@7shifts/sous-chef 2.17.2 → 2.18.0

package/dist/index.js

@@ -3,7 +3,9 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 var React = require('react');
 var React__default = _interopDefault(React);
 var classnames = _interopDefault(require('classnames'));
+var reactToastify = require('react-toastify');
 var ReactDOM = _interopDefault(require('react-dom'));
+require('react-toastify/dist/ReactToastify.css');
 var ReactModal = _interopDefault(require('react-modal'));
 var DayPicker = require('react-day-picker');
 var DayPicker__default = _interopDefault(DayPicker);
@@ -53,71 +55,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var initialValue = {};
-var Context = React.createContext(initialValue);
-var useResourceTableContext = function useResourceTableContext() {
-  var context = React.useContext(Context);
-
-  if (!context) {
-    throw Error('useResourceTableContext should be used withing `ResourceTable`. Probably you are using `ResourceTableRow` without a `ResourceTable` component');
-  }
-
-  return context;
-};
-
-var MenuContext = React__default.createContext({
-  onToggleMenu: function onToggleMenu() {},
-  isOpen: false,
-  triggerRef: undefined
-});
-var useMenuContext = function useMenuContext() {
-  return React__default.useContext(MenuContext);
-};
-
-var Menu = function Menu(_ref) {
-  var children = _ref.children;
-
-  var _useState = React.useState(false),
-      isOpen = _useState[0],
-      setIsOpen = _useState[1];
-
-  var triggerRef = React.useRef();
-  return React__default.createElement(MenuContext.Provider, {
-    value: {
-      isOpen: isOpen,
-      onToggleMenu: function onToggleMenu() {
-        return setIsOpen(!isOpen);
-      },
-      triggerRef: triggerRef
-    }
-  }, children);
-};
-
-var styles = {"list":"_v0AEt","list--active":"_lxd1B","list-item":"_IRJ4j"};
-
-var MenuItem = function MenuItem(_ref) {
-  var onClick = _ref.onClick,
-      children = _ref.children;
-
-  var _useMenuContext = useMenuContext(),
-      onToggleMenu = _useMenuContext.onToggleMenu;
-
-  var handleClick = function handleClick(e) {
-    onToggleMenu();
-    onClick(e);
-    e.stopPropagation();
-  };
-
-  return React__default.createElement("li", {
-    className: styles['list-item'],
-    onClick: handleClick,
-    onKeyPress: handleClick,
-    tabIndex: 0,
-    role: "menuitem"
-  }, children);
-};
-
-var styles$1 = {"flex":"_1DgA2","align-center":"_3HjO2","align-end":"_3r9Wx","align-start":"_oIWCF","justify-center":"_36c9a","justify-end":"_1bNEh","justify-space-between":"_1VoZz","justify-start":"_2GoV5","inline-flex":"_QuNgn"};
+var styles = {"flex":"_1DgA2","align-center":"_3HjO2","align-end":"_3r9Wx","align-start":"_oIWCF","justify-center":"_36c9a","justify-end":"_1bNEh","justify-space-between":"_1VoZz","justify-start":"_2GoV5","inline-flex":"_QuNgn"};
 
 var Flex = function Flex(_ref) {
   var _classNames;
@@ -140,7 +78,7 @@ var Flex = function Flex(_ref) {
       flexWrap = _ref$flexWrap === void 0 ? 'nowrap' : _ref$flexWrap,
       testId = _ref.testId,
       extraClass = _ref.extraClass;
-  var className = classnames(styles$1['flex'], extraClass, (_classNames = {}, _classNames[styles$1['align-start']] = alignItems === 'flex-start', _classNames[styles$1['align-end']] = alignItems === 'flex-end', _classNames[styles$1['align-center']] = alignItems === 'center', _classNames[styles$1['justify-start']] = justifyContent === 'start', _classNames[styles$1['justify-end']] = justifyContent === 'end', _classNames[styles$1['justify-center']] = justifyContent === 'center', _classNames[styles$1['justify-space-between']] = justifyContent === 'space-between', _classNames[styles$1['inline-flex']] = inlineFlex, _classNames));
+  var className = classnames(styles['flex'], extraClass, (_classNames = {}, _classNames[styles['align-start']] = alignItems === 'flex-start', _classNames[styles['align-end']] = alignItems === 'flex-end', _classNames[styles['align-center']] = alignItems === 'center', _classNames[styles['justify-start']] = justifyContent === 'start', _classNames[styles['justify-end']] = justifyContent === 'end', _classNames[styles['justify-center']] = justifyContent === 'center', _classNames[styles['justify-space-between']] = justifyContent === 'space-between', _classNames[styles['inline-flex']] = inlineFlex, _classNames));
   var items = React__default.Children.toArray(children).filter(Boolean);
   var lastItemIndex = items.length - 1;
   return React__default.createElement("div", {
@@ -163,6 +101,51 @@ var Flex = function Flex(_ref) {
   }));
 };
 
+var _excluded = ["alignItems"];
+
+var Stack = function Stack(_ref) {
+  var _ref$alignItems = _ref.alignItems,
+      alignItems = _ref$alignItems === void 0 ? 'stretch' : _ref$alignItems,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return React.createElement(Flex, Object.assign({}, props, {
+    alignItems: alignItems,
+    direction: "column"
+  }));
+};
+
+var styles$1 = {"caption":"_1QDLF","label":"_2wiMV","label--truncate":"_fu5zH","toggle":"_1ui8X","toggle__label":"_1YRJT","toggle__caption":"_1jEiW","toggle__switch":"_3tNyE"};
+
+var Toggle = function Toggle(_ref) {
+  var checked = _ref.checked,
+      label = _ref.label,
+      caption = _ref.caption,
+      onChange = _ref.onChange,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      id = _ref.id,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'toggle' : _ref$testId;
+  return React__default.createElement(Stack, {
+    space: 8
+  }, React__default.createElement("label", {
+    className: styles$1['toggle']
+  }, React__default.createElement("input", {
+    type: "checkbox",
+    checked: checked,
+    onChange: onChange,
+    disabled: disabled,
+    id: id,
+    "data-testid": testId
+  }), React__default.createElement("span", {
+    className: styles$1['toggle__switch']
+  }), label && React__default.createElement("span", {
+    className: styles$1['toggle__label']
+  }, label)), caption && React__default.createElement("span", {
+    className: styles$1['toggle__caption']
+  }, caption));
+};
+
 var Inline = function Inline(props) {
   return React__default.createElement(Flex, Object.assign({}, props, {
     direction: "row"
@@ -379,19 +362,6 @@ var calculateArrowPosition = function calculateArrowPosition(placement, tooltipP
   };
 };
 
-var _excluded = ["alignItems"];
-
-var Stack = function Stack(_ref) {
-  var _ref$alignItems = _ref.alignItems,
-      alignItems = _ref$alignItems === void 0 ? 'stretch' : _ref$alignItems,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return React.createElement(Flex, Object.assign({}, props, {
-    alignItems: alignItems,
-    direction: "column"
-  }));
-};
-
 var useIsMounted = function useIsMounted() {
   var isMounted = React.useRef(false);
   React.useEffect(function () {
@@ -634,7 +604,7 @@ var Tooltip = function Tooltip(_ref, forwardedRef) {
 
 var Tooltip$1 = React.forwardRef(Tooltip);
 
-var styles$5 = {"button":"_1SQ_p","button--loading":"_1g1Zw","button__spinner":"_3TAU6","button--size-min-width-100":"_3mZ7B","button--size-full-width":"_13ze_","button--icon-only":"_3ig9y","button--default":"_3OB2g","button--primary":"_2RivT","button--danger":"_3T8M_","button--upsell":"_1AYVC","button--marketing":"_34HiE","button--hollow":"_3BrS0","button--link-contrast":"_1LCBO","button--link-primary":"_23S36","button--link-danger":"_2CzxI","button--link-upsell":"_21e4m","button--link-toolbar":"_2-ESu","button--link-icon":"_1u3kp"};
+var styles$5 = {"button":"_1SQ_p","button--loading":"_1g1Zw","button__spinner":"_3TAU6","button--size-min-width-100":"_3mZ7B","button--size-full-width":"_13ze_","button--icon-only":"_3ig9y","button--default":"_3OB2g","button--primary":"_2RivT","button--danger":"_3T8M_","button--upsell":"_1AYVC","button--marketing":"_34HiE","button--hollow":"_3BrS0","button--hollow-contrast":"_17InS","button--link-contrast":"_1LCBO","button--link-primary":"_23S36","button--link-danger":"_2CzxI","button--link-upsell":"_21e4m","button--link-toolbar":"_2-ESu","button--link-icon":"_1u3kp"};
 
 var BUTTON_SIZES = {
   FULL_WIDTH: 'full-width',
@@ -647,6 +617,7 @@ var BUTTON_THEMES = {
   UPSELL: 'upsell',
   MARKETING: 'marketing',
   HOLLOW: 'hollow',
+  HOLLOW_CONTRAST: 'hollow-contrast',
   LINK_PRIMARY: 'link-primary',
   LINK_DANGER: 'link-danger',
   LINK_UPSELL: 'link-upsell',
@@ -664,7 +635,7 @@ var BUTTON_TARGETS = {
   SELF: '_self'
 };
 
-var _excluded$1 = ["id", "onClick", "className", "type", "disabled", "href", "target", "children"];
+var _excluded$1 = ["id", "onClick", "onKeyDown", "className", "type", "disabled", "href", "target", "children"];
 
 var Button = function Button(_ref, ref) {
   var _classnames;
@@ -677,6 +648,7 @@ var Button = function Button(_ref, ref) {
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       onClick = _ref.onClick,
+      onKeyDown = _ref.onKeyDown,
       id = _ref.id,
       wide = _ref.wide,
       loading = _ref.loading,
@@ -694,7 +666,8 @@ var Button = function Button(_ref, ref) {
   }, React__default.createElement(ButtonElement, {
     id: id,
     onClick: onClick,
-    className: classnames(styles$5['button'], (_classnames = {}, _classnames[styles$5['button--default']] = theme === BUTTON_THEMES.DEFAULT, _classnames[styles$5['button--primary']] = theme === BUTTON_THEMES.PRIMARY, _classnames[styles$5['button--danger']] = theme === BUTTON_THEMES.DANGER, _classnames[styles$5['button--upsell']] = theme === BUTTON_THEMES.UPSELL, _classnames[styles$5['button--marketing']] = theme === BUTTON_THEMES.MARKETING, _classnames[styles$5['button--hollow']] = theme === BUTTON_THEMES.HOLLOW, _classnames[styles$5['button--link-primary']] = theme === BUTTON_THEMES.LINK_PRIMARY, _classnames[styles$5['button--link-danger']] = theme === BUTTON_THEMES.LINK_DANGER, _classnames[styles$5['button--link-upsell']] = theme === BUTTON_THEMES.LINK_UPSELL, _classnames[styles$5['button--link-toolbar']] = theme === BUTTON_THEMES.LINK_TOOLBAR, _classnames[styles$5['button--link-contrast']] = theme === BUTTON_THEMES.LINK_CONTRAST, _classnames[styles$5['button--link-icon']] = theme === BUTTON_THEMES.LINK_ICON, _classnames[styles$5['button--loading']] = loading, _classnames[styles$5['button--icon-only']] = isIconOnly, _classnames[styles$5['button--size-min-width-100']] = wide || size === BUTTON_SIZES.MIN_WIDTH_100, _classnames[styles$5['button--size-full-width']] = size === BUTTON_SIZES.FULL_WIDTH, _classnames)),
+    onKeyDown: onKeyDown,
+    className: classnames(styles$5['button'], (_classnames = {}, _classnames[styles$5['button--default']] = theme === BUTTON_THEMES.DEFAULT, _classnames[styles$5['button--primary']] = theme === BUTTON_THEMES.PRIMARY, _classnames[styles$5['button--danger']] = theme === BUTTON_THEMES.DANGER, _classnames[styles$5['button--upsell']] = theme === BUTTON_THEMES.UPSELL, _classnames[styles$5['button--marketing']] = theme === BUTTON_THEMES.MARKETING, _classnames[styles$5['button--hollow']] = theme === BUTTON_THEMES.HOLLOW, _classnames[styles$5['button--hollow-contrast']] = theme === BUTTON_THEMES.HOLLOW_CONTRAST, _classnames[styles$5['button--link-primary']] = theme === BUTTON_THEMES.LINK_PRIMARY, _classnames[styles$5['button--link-danger']] = theme === BUTTON_THEMES.LINK_DANGER, _classnames[styles$5['button--link-upsell']] = theme === BUTTON_THEMES.LINK_UPSELL, _classnames[styles$5['button--link-toolbar']] = theme === BUTTON_THEMES.LINK_TOOLBAR, _classnames[styles$5['button--link-contrast']] = theme === BUTTON_THEMES.LINK_CONTRAST, _classnames[styles$5['button--link-icon']] = theme === BUTTON_THEMES.LINK_ICON, _classnames[styles$5['button--loading']] = loading, _classnames[styles$5['button--icon-only']] = isIconOnly, _classnames[styles$5['button--size-min-width-100']] = wide || size === BUTTON_SIZES.MIN_WIDTH_100, _classnames[styles$5['button--size-full-width']] = size === BUTTON_SIZES.FULL_WIDTH, _classnames)),
     type: type,
     disabled: disabled || loading,
     href: href,
@@ -714,6 +687,7 @@ var Button = function Button(_ref, ref) {
 var ButtonElement = React.forwardRef(function (_ref2, ref) {
   var id = _ref2.id,
       onClick = _ref2.onClick,
+      onKeyDown = _ref2.onKeyDown,
       className = _ref2.className,
       type = _ref2.type,
       disabled = _ref2.disabled,
@@ -725,6 +699,7 @@ var ButtonElement = React.forwardRef(function (_ref2, ref) {
   var commonProps = {
     id: id,
     onClick: onClick,
+    onKeyDown: onKeyDown,
     className: className,
     disabled: disabled
   };
@@ -745,89 +720,6 @@ var ButtonElement = React.forwardRef(function (_ref2, ref) {
 });
 var Button$1 = React.forwardRef(Button);
 
-var MenuButton = function MenuButton(_ref) {
-  var _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? 'link-icon' : _ref$theme,
-      children = _ref.children;
-
-  var _useMenuContext = useMenuContext(),
-      onToggleMenu = _useMenuContext.onToggleMenu,
-      triggerRef = _useMenuContext.triggerRef;
-
-  return React__default.createElement(Button$1, {
-    onClick: function onClick(e) {
-      onToggleMenu();
-      e.stopPropagation();
-    },
-    theme: theme,
-    ref: triggerRef
-  }, children);
-};
-
-function isClickInside(ref, event) {
-  return !ref.current || event.target instanceof Node && ref.current.contains(event.target);
-}
-
-function useOnClickOutside(ref, cb) {
-  React__default.useEffect(function () {
-    var listener = function listener(event) {
-      if (isClickInside(ref, event)) {
-        return;
-      }
-
-      cb(event);
-    };
-
-    document.addEventListener('mousedown', listener);
-    document.addEventListener('touchstart', listener);
-    return function () {
-      document.removeEventListener('mousedown', listener);
-      document.removeEventListener('touchstart', listener);
-    };
-  }, [ref, cb]);
-}
-
-var MenuList = function MenuList(_ref) {
-  var _classnames;
-
-  var children = _ref.children;
-  var paneElement = React.useRef(null);
-
-  var _useMenuContext = useMenuContext(),
-      isOpen = _useMenuContext.isOpen,
-      onToggleMenu = _useMenuContext.onToggleMenu,
-      triggerRef = _useMenuContext.triggerRef;
-
-  var _useState = React.useState({}),
-      position = _useState[0],
-      setPosition = _useState[1];
-
-  var clickOutisideCallback = React.useCallback(function () {
-    if (isOpen) {
-      onToggleMenu();
-    }
-  }, [isOpen]);
-  useOnClickOutside(paneElement, clickOutisideCallback);
-  React.useEffect(function () {
-    var _paneElement$current;
-
-    var triggerPosition = triggerRef.current.getBoundingClientRect();
-    var panePosition = (_paneElement$current = paneElement.current) === null || _paneElement$current === void 0 ? void 0 : _paneElement$current.getBoundingClientRect();
-    var paneWidth = (panePosition === null || panePosition === void 0 ? void 0 : panePosition.width) || 160;
-    var pos = {
-      left: triggerPosition.left + triggerPosition.width - paneWidth,
-      top: triggerPosition.top + window.scrollY + triggerPosition.height + 3
-    };
-    setPosition(pos);
-  }, [isOpen, triggerRef]);
-  return React__default.createElement(Portal, null, React__default.createElement("ul", {
-    className: classnames(styles['list'], (_classnames = {}, _classnames[styles['list--active']] = isOpen, _classnames)),
-    role: "menu",
-    style: position,
-    ref: paneElement
-  }, children));
-};
-
 var ICON_SIZES = {
   small: '12px',
   medium: '16px',
@@ -3863,55 +3755,353 @@ var IconWrench = function IconWrench(_ref) {
 
 IconWrench.displayName = 'IconWrench';
 
-var styles$6 = {"item":"_1UG1r","selected":"_WeTZF","clickable":"_34gnL","item-column":"_3gRJf","actions":"_3ABSf"};
+var styles$6 = {"pagination-controls":"_1IynL"};
 
-var ResourceTableRow = function ResourceTableRow(_ref) {
-  var _classnames;
+var getLocalizedString = function getLocalizedString(key) {
+  if (!window.Shifts) {
+    return getLocalTranslation(key);
+  }
 
-  var children = _ref.children,
-      onClick = _ref.onClick,
-      _ref$isSelected = _ref.isSelected,
-      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
-      _ref$actions = _ref.actions,
-      actions = _ref$actions === void 0 ? [] : _ref$actions;
+  return getWebAppTranslation(key);
+};
 
-  var _useResourceTableCont = useResourceTableContext(),
-      columnSizes = _useResourceTableCont.columnSizes,
-      showActionMenu = _useResourceTableCont.showActionMenu;
+var getWebAppTranslation = function getWebAppTranslation(key) {
+  var _Shifts, _Shifts$Lang;
 
-  var styleNames = classnames(styles$6['item'], (_classnames = {}, _classnames[styles$6['clickable']] = onClick, _classnames[styles$6['selected']] = isSelected, _classnames));
+  if (!Shifts || ((_Shifts = Shifts) === null || _Shifts === void 0 ? void 0 : (_Shifts$Lang = _Shifts.Lang) === null || _Shifts$Lang === void 0 ? void 0 : _Shifts$Lang.cache) === undefined) {
+    return getLocalTranslation(key);
+  }
 
-  var renderColumn = function renderColumn(columnElement, index) {
-    return React__default.createElement("div", {
-      className: styles$6['item-column'],
-      style: {
-        flex: columnSizes && columnSizes[index] || 1
-      },
-      key: index,
-      "data-testid": "resource-table-column"
-    }, columnElement);
-  };
+  var _key$split = key.split('.'),
+      moduleName = _key$split[0],
+      id = _key$split[1];
 
-  var columnElements = React__default.Children.toArray(children);
-  return React__default.createElement("div", {
-    className: styleNames,
-    onClick: onClick ? onClick : undefined,
-    onKeyPress: onClick ? onClick : undefined,
-    "data-testid": "resource-table-row",
-    role: "row",
-    tabIndex: 0
-  }, columnElements.map(renderColumn), showActionMenu && React__default.createElement("div", {
-    className: classnames(styles$6['item-column'], styles$6['actions']),
-    "data-testid": "resource-table-dropdown-menu"
-  }, actions.length > 0 && React__default.createElement(Menu, null, React__default.createElement(MenuButton, null, React__default.createElement(IconEllipsisV, null)), React__default.createElement(MenuList, null, actions.map(function (action, index) {
-    return React__default.createElement(MenuItem, {
-      onClick: action.onAction,
-      key: index
-    }, action.label);
-  })))));
-};
+  if (Shifts.Lang.cache === undefined || Shifts.Lang.cache[moduleName] === undefined || Shifts.Lang.cache[moduleName][id] === undefined) {
+    return key;
+  }
 
-var styles$7 = {"header":"_kxyuW","header-item":"_13L7D","header-item--sortable":"_1YCGB","header-item--action":"_1gpTf","header-sort-icon":"_1tFcX","body":"_ppaWg","footer":"_1nb-e"};
+  return Shifts.Lang.cache[moduleName][id];
+};
+
+var getLocalTranslation = function getLocalTranslation(key) {
+  var translationParts = key.split('.');
+
+  if (translationParts.length > 1) {
+    var literal = translationParts[1];
+    return literal.charAt(0).toUpperCase() + literal.slice(1).toLowerCase().replace(/_/g, ' ');
+  }
+
+  return key;
+};
+
+var capitalizeFirstLetter = function capitalizeFirstLetter(text) {
+  return text.charAt(0).toUpperCase() + text.slice(1);
+};
+
+var PaginationControls = function PaginationControls(_ref) {
+  var _ref$hasPrevious = _ref.hasPrevious,
+      hasPrevious = _ref$hasPrevious === void 0 ? true : _ref$hasPrevious,
+      _ref$hasNext = _ref.hasNext,
+      hasNext = _ref$hasNext === void 0 ? true : _ref$hasNext,
+      onPreviousClick = _ref.onPreviousClick,
+      onNextClick = _ref.onNextClick,
+      testId = _ref.testId;
+  return React__default.createElement("div", {
+    className: styles$6['pagination-controls'],
+    "data-testid": testId
+  }, React__default.createElement(Button$1, {
+    disabled: !hasPrevious,
+    onClick: onPreviousClick,
+    title: capitalizeFirstLetter(getLocalizedString('default.PREVIOUS'))
+  }, React__default.createElement(IconArrowLeft, {
+    size: "small"
+  })), React__default.createElement(Button$1, {
+    disabled: !hasNext,
+    onClick: onNextClick,
+    title: capitalizeFirstLetter(getLocalizedString('default.next'))
+  }, React__default.createElement(IconArrowRight, {
+    size: "small"
+  })));
+};
+
+var LINK_THEME = {
+  PRIMARY: 'primary',
+  CONTRAST: 'contrast'
+};
+var LINK_TARGET = {
+  SELF: '_self',
+  BLANK: '_blank'
+};
+
+var styles$7 = {"link--primary":"_3K6vV","link--contrast":"_1xjKv"};
+
+var Link = function Link(_ref) {
+  var _classNames;
+
+  var href = _ref.href,
+      _ref$target = _ref.target,
+      target = _ref$target === void 0 ? LINK_TARGET.BLANK : _ref$target,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? LINK_THEME.PRIMARY : _ref$theme,
+      onClick = _ref.onClick,
+      children = _ref.children;
+  return React__default.createElement("a", {
+    className: classnames(styles$7['link'], (_classNames = {}, _classNames[styles$7['link--primary']] = theme === LINK_THEME.PRIMARY, _classNames[styles$7['link--contrast']] = theme === LINK_THEME.CONTRAST, _classNames)),
+    href: href,
+    target: target,
+    onClick: onClick
+  }, children);
+};
+
+var TOAST_THEME = {
+  DEFAULT: 'default',
+  DANGER: 'danger'
+};
+var TOAST_CONTAINER_ID = 'sous-chef-toast';
+
+var styles$8 = {"toast":"_c4pW8","toast--danger":"_1ncFe","toast__text":"_3EHwm"};
+
+var toast = function toast(text, theme, options) {
+  var _classNames;
+
+  if (theme === void 0) {
+    theme = TOAST_THEME.DEFAULT;
+  }
+
+  if (options === void 0) {
+    options = {};
+  }
+
+  reactToastify.toast(text, _extends({
+    className: classnames(styles$8['toast'], (_classNames = {}, _classNames[styles$8['toast--danger']] = theme === TOAST_THEME.DANGER, _classNames)),
+    containerId: TOAST_CONTAINER_ID
+  }, options));
+};
+
+var CloseButton = function CloseButton(_ref) {
+  var closeToast = _ref.closeToast;
+  return React__default.createElement(Button$1, {
+    theme: "link-contrast",
+    onClick: closeToast
+  }, React__default.createElement(IconTimes, null));
+};
+
+var ToastContainer = function ToastContainer(_ref2) {
+  var _ref2$containerId = _ref2.containerId,
+      containerId = _ref2$containerId === void 0 ? TOAST_CONTAINER_ID : _ref2$containerId;
+  return React__default.createElement(reactToastify.ToastContainer, {
+    bodyClassName: styles$8['toast__text'],
+    hideProgressBar: true,
+    draggable: false,
+    transition: reactToastify.Slide,
+    position: "bottom-center",
+    closeButton: React__default.createElement(CloseButton, null),
+    containerId: containerId,
+    enableMultiContainer: true
+  });
+};
+
+var SousChefProvider = function SousChefProvider(_ref) {
+  var children = _ref.children;
+  return React__default.createElement(React.Fragment, null, React__default.createElement(ToastContainer, null), children);
+};
+
+var initialValue = {};
+var Context = React.createContext(initialValue);
+var useResourceTableContext = function useResourceTableContext() {
+  var context = React.useContext(Context);
+
+  if (!context) {
+    throw Error('useResourceTableContext should be used withing `ResourceTable`. Probably you are using `ResourceTableRow` without a `ResourceTable` component');
+  }
+
+  return context;
+};
+
+var MenuContext = React__default.createContext({
+  onToggleMenu: function onToggleMenu() {},
+  isOpen: false,
+  triggerRef: undefined
+});
+var useMenuContext = function useMenuContext() {
+  return React__default.useContext(MenuContext);
+};
+
+var Menu = function Menu(_ref) {
+  var children = _ref.children;
+
+  var _useState = React.useState(false),
+      isOpen = _useState[0],
+      setIsOpen = _useState[1];
+
+  var triggerRef = React.useRef();
+  return React__default.createElement(MenuContext.Provider, {
+    value: {
+      isOpen: isOpen,
+      onToggleMenu: function onToggleMenu() {
+        return setIsOpen(!isOpen);
+      },
+      triggerRef: triggerRef
+    }
+  }, children);
+};
+
+var styles$9 = {"list":"_v0AEt","list--active":"_lxd1B","list-item":"_IRJ4j"};
+
+var MenuItem = function MenuItem(_ref) {
+  var onClick = _ref.onClick,
+      children = _ref.children;
+
+  var _useMenuContext = useMenuContext(),
+      onToggleMenu = _useMenuContext.onToggleMenu;
+
+  var handleClick = function handleClick(e) {
+    onToggleMenu();
+    onClick(e);
+    e.stopPropagation();
+  };
+
+  return React__default.createElement("li", {
+    className: styles$9['list-item'],
+    onClick: handleClick,
+    onKeyPress: handleClick,
+    tabIndex: 0,
+    role: "menuitem"
+  }, children);
+};
+
+var MenuButton = function MenuButton(_ref) {
+  var _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'link-icon' : _ref$theme,
+      children = _ref.children;
+
+  var _useMenuContext = useMenuContext(),
+      onToggleMenu = _useMenuContext.onToggleMenu,
+      triggerRef = _useMenuContext.triggerRef;
+
+  return React__default.createElement(Button$1, {
+    onClick: function onClick(e) {
+      onToggleMenu();
+      e.stopPropagation();
+    },
+    theme: theme,
+    ref: triggerRef
+  }, children);
+};
+
+function isClickInside(ref, event) {
+  return !ref.current || event.target instanceof Node && ref.current.contains(event.target);
+}
+
+function useOnClickOutside(ref, cb) {
+  React__default.useEffect(function () {
+    var listener = function listener(event) {
+      if (isClickInside(ref, event)) {
+        return;
+      }
+
+      cb(event);
+    };
+
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+    return function () {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [ref, cb]);
+}
+
+var MenuList = function MenuList(_ref) {
+  var _classnames;
+
+  var children = _ref.children;
+  var paneElement = React.useRef(null);
+
+  var _useMenuContext = useMenuContext(),
+      isOpen = _useMenuContext.isOpen,
+      onToggleMenu = _useMenuContext.onToggleMenu,
+      triggerRef = _useMenuContext.triggerRef;
+
+  var _useState = React.useState({}),
+      position = _useState[0],
+      setPosition = _useState[1];
+
+  var clickOutisideCallback = React.useCallback(function () {
+    if (isOpen) {
+      onToggleMenu();
+    }
+  }, [isOpen]);
+  useOnClickOutside(paneElement, clickOutisideCallback);
+  React.useEffect(function () {
+    var _paneElement$current;
+
+    var triggerPosition = triggerRef.current.getBoundingClientRect();
+    var panePosition = (_paneElement$current = paneElement.current) === null || _paneElement$current === void 0 ? void 0 : _paneElement$current.getBoundingClientRect();
+    var paneWidth = (panePosition === null || panePosition === void 0 ? void 0 : panePosition.width) || 160;
+    var pos = {
+      left: triggerPosition.left + triggerPosition.width - paneWidth,
+      top: triggerPosition.top + window.scrollY + triggerPosition.height + 3
+    };
+    setPosition(pos);
+  }, [isOpen, triggerRef]);
+  return React__default.createElement(Portal, null, React__default.createElement("ul", {
+    className: classnames(styles$9['list'], (_classnames = {}, _classnames[styles$9['list--active']] = isOpen, _classnames)),
+    role: "menu",
+    style: position,
+    ref: paneElement
+  }, children));
+};
+
+var styles$a = {"item":"_1UG1r","selected":"_WeTZF","clickable":"_34gnL","item-column":"_3gRJf","actions":"_3ABSf"};
+
+var ResourceTableRow = function ResourceTableRow(_ref) {
+  var _classnames;
+
+  var children = _ref.children,
+      onClick = _ref.onClick,
+      _ref$isSelected = _ref.isSelected,
+      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+      _ref$actions = _ref.actions,
+      actions = _ref$actions === void 0 ? [] : _ref$actions;
+
+  var _useResourceTableCont = useResourceTableContext(),
+      columnSizes = _useResourceTableCont.columnSizes,
+      showActionMenu = _useResourceTableCont.showActionMenu;
+
+  var styleNames = classnames(styles$a['item'], (_classnames = {}, _classnames[styles$a['clickable']] = onClick, _classnames[styles$a['selected']] = isSelected, _classnames));
+
+  var renderColumn = function renderColumn(columnElement, index) {
+    return React__default.createElement("div", {
+      className: styles$a['item-column'],
+      style: {
+        flex: columnSizes && columnSizes[index] || 1
+      },
+      key: index,
+      "data-testid": "resource-table-column"
+    }, columnElement);
+  };
+
+  var columnElements = React__default.Children.toArray(children);
+  return React__default.createElement("div", {
+    className: styleNames,
+    onClick: onClick ? onClick : undefined,
+    onKeyPress: onClick ? onClick : undefined,
+    "data-testid": "resource-table-row",
+    role: "row",
+    tabIndex: 0
+  }, columnElements.map(renderColumn), showActionMenu && React__default.createElement("div", {
+    className: classnames(styles$a['item-column'], styles$a['actions']),
+    "data-testid": "resource-table-dropdown-menu"
+  }, actions.length > 0 && React__default.createElement(Menu, null, React__default.createElement(MenuButton, null, React__default.createElement(IconEllipsisV, null)), React__default.createElement(MenuList, null, actions.map(function (action, index) {
+    return React__default.createElement(MenuItem, {
+      onClick: action.onAction,
+      key: index
+    }, action.label);
+  })))));
+};
+
+var styles$b = {"header":"_kxyuW","header-item":"_13L7D","header-item--sortable":"_1YCGB","header-item--action":"_1gpTf","header-sort-icon":"_1tFcX","body":"_ppaWg","footer":"_1nb-e"};
 
 var WHITE = '#ffffff';
 var EGGPLANT200 = '#d3dbf4';
@@ -3954,14 +4144,14 @@ var ResourceTableHeader = function ResourceTableHeader(_ref) {
   };
 
   return React__default.createElement("div", {
-    className: styles$7['header']
+    className: styles$b['header']
   }, columns.map(function (column) {
     var _classnames;
 
     var isSortable = column.isSortable;
     var sortDir = column.currentSort;
     return React__default.createElement("div", {
-      className: classnames((_classnames = {}, _classnames[styles$7['header-item']] = true, _classnames[styles$7['header-item--sortable']] = isSortable, _classnames)),
+      className: classnames((_classnames = {}, _classnames[styles$b['header-item']] = true, _classnames[styles$b['header-item--sortable']] = isSortable, _classnames)),
       style: {
         flex: column.size || 1
       },
@@ -3975,12 +4165,12 @@ var ResourceTableHeader = function ResourceTableHeader(_ref) {
       role: "columnheader",
       tabIndex: 0
     }, column.label, ' ', isSortable && React__default.createElement("span", {
-      className: styles$7['header-sort-icon']
+      className: styles$b['header-sort-icon']
     }, React__default.createElement(IconSort$1, {
       sortDirection: sortDir
     })));
   }), showActionMenu && React__default.createElement("div", {
-    className: classnames(styles$7['header-item'], styles$7['header-item--action'])
+    className: classnames(styles$b['header-item'], styles$b['header-item--action'])
   }));
 };
 
@@ -4018,75 +4208,6 @@ var IconSort$1 = function IconSort(_ref2) {
   })));
 };
 
-var styles$8 = {"pagination-controls":"_1IynL"};
-
-var getLocalizedString = function getLocalizedString(key) {
-  if (!window.Shifts) {
-    return getLocalTranslation(key);
-  }
-
-  return getWebAppTranslation(key);
-};
-
-var getWebAppTranslation = function getWebAppTranslation(key) {
-  var _Shifts, _Shifts$Lang;
-
-  if (!Shifts || ((_Shifts = Shifts) === null || _Shifts === void 0 ? void 0 : (_Shifts$Lang = _Shifts.Lang) === null || _Shifts$Lang === void 0 ? void 0 : _Shifts$Lang.cache) === undefined) {
-    return getLocalTranslation(key);
-  }
-
-  var _key$split = key.split('.'),
-      moduleName = _key$split[0],
-      id = _key$split[1];
-
-  if (Shifts.Lang.cache === undefined || Shifts.Lang.cache[moduleName] === undefined || Shifts.Lang.cache[moduleName][id] === undefined) {
-    return key;
-  }
-
-  return Shifts.Lang.cache[moduleName][id];
-};
-
-var getLocalTranslation = function getLocalTranslation(key) {
-  var translationParts = key.split('.');
-
-  if (translationParts.length > 1) {
-    var literal = translationParts[1];
-    return literal.charAt(0).toUpperCase() + literal.slice(1).toLowerCase().replace(/_/g, ' ');
-  }
-
-  return key;
-};
-
-var capitalizeFirstLetter = function capitalizeFirstLetter(text) {
-  return text.charAt(0).toUpperCase() + text.slice(1);
-};
-
-var PaginationControls = function PaginationControls(_ref) {
-  var _ref$hasPrevious = _ref.hasPrevious,
-      hasPrevious = _ref$hasPrevious === void 0 ? true : _ref$hasPrevious,
-      _ref$hasNext = _ref.hasNext,
-      hasNext = _ref$hasNext === void 0 ? true : _ref$hasNext,
-      onPreviousClick = _ref.onPreviousClick,
-      onNextClick = _ref.onNextClick,
-      testId = _ref.testId;
-  return React__default.createElement("div", {
-    className: styles$8['pagination-controls'],
-    "data-testid": testId
-  }, React__default.createElement(Button$1, {
-    disabled: !hasPrevious,
-    onClick: onPreviousClick,
-    title: capitalizeFirstLetter(getLocalizedString('default.PREVIOUS'))
-  }, React__default.createElement(IconArrowLeft, {
-    size: "small"
-  })), React__default.createElement(Button$1, {
-    disabled: !hasNext,
-    onClick: onNextClick,
-    title: capitalizeFirstLetter(getLocalizedString('default.next'))
-  }, React__default.createElement(IconArrowRight, {
-    size: "small"
-  })));
-};
-
 var ResourceTable = function ResourceTable(_ref) {
   var items = _ref.items,
       columns = _ref.columns,
@@ -4126,7 +4247,7 @@ var ResourceTable = function ResourceTable(_ref) {
     onSort: onSort,
     showActionMenu: showActionMenu
   }), React__default.createElement("div", {
-    className: styles$7['body'],
+    className: styles$b['body'],
     style: conditionalStyles,
     role: "table"
   }, isLoading && React__default.createElement(Spinner, {
@@ -4139,7 +4260,7 @@ var ResourceTable = function ResourceTable(_ref) {
       index: index
     });
   })), onPreviousClick && onNextClick && (hasPrevious || hasNext) && React__default.createElement("div", {
-    className: styles$7['footer'],
+    className: styles$b['footer'],
     "data-testid": "pagination-controls"
   }, React__default.createElement(PaginationControls, {
     hasPrevious: hasPrevious && !isLoading,
@@ -4171,51 +4292,19 @@ var initialValue$1 = {
   columns: [],
   numberOfRows: 0
 };
-var Context$1 = React.createContext(initialValue$1);
-var useDataTableContext = function useDataTableContext() {
-  var context = React.useContext(Context$1);
-
-  if (!context) {
-    throw Error('useDataTableContext should be used withing `DataTable`. Probably you are using `DataTableRow` without a `DataTable` component');
-  }
-
-  return context;
-};
-
-var styles$9 = {"item":"_2GGMG","selected":"_1ZCir","clickable":"_3VoZI","item-column":"_kcNkt","item-column--default-padding":"_2obax","item-column--right-align":"_bLVPl","item-column--vertical-border":"_3PWfD","actions":"_1IGwu"};
-
-var styles$a = {"caption":"_1QDLF","label":"_2wiMV","label--truncate":"_fu5zH","toggle":"_1ui8X","toggle__label":"_1YRJT","toggle__caption":"_1jEiW","toggle__switch":"_3tNyE"};
-
-var Toggle = function Toggle(_ref) {
-  var checked = _ref.checked,
-      label = _ref.label,
-      caption = _ref.caption,
-      onChange = _ref.onChange,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      id = _ref.id,
-      _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? 'toggle' : _ref$testId;
-  return React__default.createElement(Stack, {
-    space: 8
-  }, React__default.createElement("label", {
-    className: styles$a['toggle']
-  }, React__default.createElement("input", {
-    type: "checkbox",
-    checked: checked,
-    onChange: onChange,
-    disabled: disabled,
-    id: id,
-    "data-testid": testId
-  }), React__default.createElement("span", {
-    className: styles$a['toggle__switch']
-  }), label && React__default.createElement("span", {
-    className: styles$a['toggle__label']
-  }, label)), caption && React__default.createElement("span", {
-    className: styles$a['toggle__caption']
-  }, caption));
+var Context$1 = React.createContext(initialValue$1);
+var useDataTableContext = function useDataTableContext() {
+  var context = React.useContext(Context$1);
+
+  if (!context) {
+    throw Error('useDataTableContext should be used withing `DataTable`. Probably you are using `DataTableRow` without a `DataTable` component');
+  }
+
+  return context;
 };
 
+var styles$c = {"item":"_2GGMG","selected":"_1ZCir","clickable":"_3VoZI","item-column":"_kcNkt","item-column--default-padding":"_2obax","item-column--right-align":"_bLVPl","item-column--vertical-border":"_3PWfD","actions":"_1IGwu"};
+
 var KebabMenu = function KebabMenu(_ref) {
   var actions = _ref.actions;
   return React__default.createElement(Menu, null, React__default.createElement(MenuButton, null, React__default.createElement(IconEllipsisV, null)), React__default.createElement(MenuList, null, actions.map(function (action, index) {
@@ -4235,7 +4324,7 @@ var ActionsCell = function ActionsCell(_ref) {
     return action.showInKebab === false;
   });
   return React__default.createElement("div", {
-    className: classnames(styles$9['item-column'], styles$9['actions']),
+    className: classnames(styles$c['item-column'], styles$c['actions']),
     "data-testid": "data-table-dropdown-menu"
   }, sideActions.length > 0 && sideActions.map(function (action, index) {
     return React__default.createElement(Button$1, Object.assign({
@@ -4268,7 +4357,7 @@ var DataTableRowComponent = function DataTableRowComponent(_ref, ref) {
       showActionMenu = _useDataTableContext.showActionMenu,
       hasVerticalBorders = _useDataTableContext.hasVerticalBorders;
 
-  var styleNames = classnames(styles$9['item'], (_classnames = {}, _classnames[styles$9['clickable']] = onClick, _classnames[styles$9['selected']] = isSelected, _classnames));
+  var styleNames = classnames(styles$c['item'], (_classnames = {}, _classnames[styles$c['clickable']] = onClick, _classnames[styles$c['selected']] = isSelected, _classnames));
 
   var renderColumn = function renderColumn(columnElement, index) {
     var _classnames2;
@@ -4276,7 +4365,7 @@ var DataTableRowComponent = function DataTableRowComponent(_ref, ref) {
     var column = columns === null || columns === void 0 ? void 0 : columns[index];
     var isRightAligned = column === null || column === void 0 ? void 0 : column.isRightAligned;
     return React__default.createElement("div", {
-      className: classnames((_classnames2 = {}, _classnames2[styles$9['item-column--right-align']] = isRightAligned, _classnames2[styles$9['item-column--vertical-border']] = hasVerticalBorders, _classnames2[styles$9['item-column--default-padding']] = hasDefaultPadding, _classnames2), styles$9['item-column']),
+      className: classnames((_classnames2 = {}, _classnames2[styles$c['item-column--right-align']] = isRightAligned, _classnames2[styles$c['item-column--vertical-border']] = hasVerticalBorders, _classnames2[styles$c['item-column--default-padding']] = hasDefaultPadding, _classnames2), styles$c['item-column']),
       style: {
         flex: (column === null || column === void 0 ? void 0 : column.size) || 1
       },
@@ -4301,7 +4390,7 @@ var DataTableRowComponent = function DataTableRowComponent(_ref, ref) {
 
 var DataTableRow = React.forwardRef(DataTableRowComponent);
 
-var styles$b = {"header":"_2ZgmC","header-item":"_3slLU","header-item--sortable":"_1-26z","header-item--right-align":"_1vCLo","header-item--action":"_2i1wY","header-sort-icon":"_BLrNe","body":"_CT4Lp","footer":"_398L3","pagination-controls":"_2smmY"};
+var styles$d = {"header":"_2ZgmC","header-item":"_3slLU","header-item--sortable":"_1-26z","header-item--right-align":"_1vCLo","header-item--action":"_2i1wY","header-sort-icon":"_BLrNe","body":"_CT4Lp","footer":"_398L3","pagination-controls":"_2smmY"};
 
 var SORT_ORDER$1 = {
   ASC: 'asc',
@@ -4332,7 +4421,7 @@ var DataTableHeader = function DataTableHeader(_ref) {
   };
 
   return React__default.createElement("div", {
-    className: styles$b['header']
+    className: styles$d['header']
   }, columns.map(function (column) {
     var _classnames;
 
@@ -4340,7 +4429,7 @@ var DataTableHeader = function DataTableHeader(_ref) {
     var sortDir = column.currentSort;
     var isRightAligned = column.isRightAligned;
     return React__default.createElement("div", {
-      className: classnames((_classnames = {}, _classnames[styles$b['header-item']] = true, _classnames[styles$b['header-item--sortable']] = isSortable, _classnames[styles$b['header-item--right-align']] = isRightAligned, _classnames)),
+      className: classnames((_classnames = {}, _classnames[styles$d['header-item']] = true, _classnames[styles$d['header-item--sortable']] = isSortable, _classnames[styles$d['header-item--right-align']] = isRightAligned, _classnames)),
       style: {
         flex: column.size || 1
       },
@@ -4354,12 +4443,12 @@ var DataTableHeader = function DataTableHeader(_ref) {
       role: "columnheader",
       tabIndex: 0
     }, column.label, ' ', isSortable && React__default.createElement("span", {
-      className: styles$b['header-sort-icon']
+      className: styles$d['header-sort-icon']
     }, React__default.createElement(IconSort$2, {
       sortDirection: sortDir
     })));
   }), showActionMenu && React__default.createElement("div", {
-    className: classnames(styles$b['header-item'], styles$b['header-item--action'])
+    className: classnames(styles$d['header-item'], styles$d['header-item--action'])
   }));
 };
 
@@ -4440,7 +4529,7 @@ var DataTable = function DataTable(_ref) {
     onSort: onSort,
     showActionMenu: showActionMenu
   }), React__default.createElement("div", {
-    className: styles$b['body'],
+    className: styles$d['body'],
     style: conditionalStyles,
     role: "table",
     "data-testid": testId
@@ -4454,10 +4543,10 @@ var DataTable = function DataTable(_ref) {
       index: index
     });
   }), footerComponent && !isLoading && React__default.createElement("div", {
-    className: styles$b['footer'],
+    className: styles$d['footer'],
     "data-testid": "footer"
   }, footerComponent)), onPreviousClick && onNextClick && (hasPrevious || hasNext) && React__default.createElement("div", {
-    className: styles$b['pagination-controls'],
+    className: styles$d['pagination-controls'],
     "data-testid": "pagination-controls"
   }, React__default.createElement(PaginationControls, {
     hasPrevious: hasPrevious && !isLoading,
@@ -4485,7 +4574,7 @@ var DefaultItemComponent$1 = function DefaultItemComponent(_ref2) {
   }));
 };
 
-var styles$c = {"data-table-cell":"_2Ybjx","data-table-cell--right-aligned":"_1cXj6"};
+var styles$e = {"data-table-cell":"_2Ybjx","data-table-cell--right-aligned":"_1cXj6"};
 
 var DataTableCell = function DataTableCell(_ref) {
   var _columns$columnIndex, _classnames;
@@ -4499,7 +4588,7 @@ var DataTableCell = function DataTableCell(_ref) {
   var column = (_columns$columnIndex = columns === null || columns === void 0 ? void 0 : columns[columnIndex]) != null ? _columns$columnIndex : null;
   var isRightAligned = column ? column.isRightAligned : false;
   return React__default.createElement("div", {
-    className: classnames((_classnames = {}, _classnames[styles$c['data-table-cell--right-aligned']] = isRightAligned, _classnames), styles$c['data-table-cell'])
+    className: classnames((_classnames = {}, _classnames[styles$e['data-table-cell--right-aligned']] = isRightAligned, _classnames), styles$e['data-table-cell'])
   }, children);
 };
 
@@ -4615,9 +4704,9 @@ var useFieldControllers = function useFieldControllers(_ref) {
   return controllers;
 };
 
-var styles$d = {"overlay":"_2puqJ","overlay--after-open":"_1167h","overlay--before-close":"_t_t7L","content":"_wQQ_2","content--after-open":"_3jwux","content--before-close":"_2c2QP"};
+var styles$f = {"overlay":"_2puqJ","overlay--after-open":"_1167h","overlay--before-close":"_t_t7L","content":"_wQQ_2","content--after-open":"_3jwux","content--before-close":"_2c2QP"};
 
-var styles$e = {"header":"_36nxW","sub-header":"_2XwRD"};
+var styles$g = {"header":"_36nxW","sub-header":"_2XwRD"};
 
 var ModalHeader = function ModalHeader(_ref) {
   var header = _ref.header,
@@ -4629,12 +4718,12 @@ var ModalHeader = function ModalHeader(_ref) {
     flex: [1],
     alignItems: "center"
   }, React__default.createElement("span", {
-    className: styles$e['header']
+    className: styles$g['header']
   }, header), React__default.createElement(Button$1, {
     theme: "link-icon",
     onClick: onClose
   }, React__default.createElement(IconTimes, null))), subHeader && React__default.createElement("div", {
-    className: styles$e['sub-header']
+    className: styles$g['sub-header']
   }, subHeader));
 };
 
@@ -4675,14 +4764,14 @@ var Modal = function Modal(_ref) {
     contentLabel: "Modal",
     appElement: rootElementId && document.getElementById(rootElementId) || undefined,
     overlayClassName: {
-      base: styles$d['overlay'],
-      afterOpen: styles$d['overlay--after-open'],
-      beforeClose: styles$d['overlay--before-close']
+      base: styles$f['overlay'],
+      afterOpen: styles$f['overlay--after-open'],
+      beforeClose: styles$f['overlay--before-close']
     },
     className: {
-      base: styles$d['content'],
-      afterOpen: styles$d['content--after-open'],
-      beforeClose: styles$d['content--before-close']
+      base: styles$f['content'],
+      afterOpen: styles$f['content--after-open'],
+      beforeClose: styles$f['content--before-close']
     }
   }, React__default.createElement(ModalHeader, {
     header: header,
@@ -4720,7 +4809,7 @@ var useScrollShadow = function useScrollShadow() {
   };
 };
 
-var styles$f = {"modal-body":"_2J-ku","modal-body--with-scroll-shadow":"_2ErCP"};
+var styles$h = {"modal-body":"_2J-ku","modal-body--with-scroll-shadow":"_2ErCP"};
 
 var ModalBody = function ModalBody(_ref) {
   var _classNames;
@@ -4733,13 +4822,13 @@ var ModalBody = function ModalBody(_ref) {
       showScrollShadow = _useScrollShadow.showScrollShadow;
 
   return React__default.createElement("div", {
-    className: classnames(styles$f['modal-body'], (_classNames = {}, _classNames[styles$f['modal-body--with-scroll-shadow']] = showScrollShadow, _classNames)),
+    className: classnames(styles$h['modal-body'], (_classNames = {}, _classNames[styles$h['modal-body--with-scroll-shadow']] = showScrollShadow, _classNames)),
     ref: ref,
     "data-testid": testId
   }, children);
 };
 
-var styles$g = {"modal-footer":"_LKOr5","tertiary-container":"_Qktd-"};
+var styles$i = {"modal-footer":"_LKOr5","tertiary-container":"_Qktd-"};
 
 var ModalFooter = function ModalFooter(_ref) {
   var children = _ref.children,
@@ -4763,7 +4852,7 @@ var ModalFooter = function ModalFooter(_ref) {
     }, React__default.createElement(Inline, {
       justifyContent: "space-between"
     }, React__default.createElement("div", {
-      className: classnames((_classnames = {}, _classnames[styles$g['tertiary-container']] = tertiaryButton && tertiaryButton.props.theme.startsWith('link'), _classnames))
+      className: classnames((_classnames = {}, _classnames[styles$i['tertiary-container']] = tertiaryButton && tertiaryButton.props.theme.startsWith('link'), _classnames))
     }, tertiaryButton || React__default.createElement("div", null)), React__default.createElement(Inline, {
       space: 12
     }, secondaryButton, primaryButton)));
@@ -4792,7 +4881,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$g['modal-footer'],
+    className: styles$i['modal-footer'],
     "data-testid": testId
   }, React__default.createElement(Inline, {
     justifyContent: "end",
@@ -4801,9 +4890,9 @@ var FooterContainer = function FooterContainer(_ref2) {
   }, children));
 };
 
-var styles$h = {"container":"_v1b-5","wrapper":"_3mrLu","interactionDisabled":"_1J9dh","DayPicker-Day":"_8FcQE","navBar":"_1SPuq","todayButton":"_24FJ6","navButtonInteractionDisabled":"_Oxdm9","navButtonPrev":"_20uqc","navButtonNext":"_3C53z","months":"_M_eHz","month":"_3RPpJ","caption":"_1FXNw","weekdays":"_3KcRU","weekdaysRow":"_1fO_e","weekday":"_c1Y-X","body":"_34mA1","week":"_1PmqZ","day":"_1AWH2","disabled":"_3vJkw","selected":"_1DR0N","outside":"_276GV","footer":"_2M5xr","today":"_3N6fj","overlayWrapper":"_3Zqgu","overlay":"_20Ncd","weekNumber":"_2hb-S"};
+var styles$j = {"container":"_v1b-5","wrapper":"_3mrLu","interactionDisabled":"_1J9dh","DayPicker-Day":"_8FcQE","navBar":"_1SPuq","todayButton":"_24FJ6","navButtonInteractionDisabled":"_Oxdm9","navButtonPrev":"_20uqc","navButtonNext":"_3C53z","months":"_M_eHz","month":"_3RPpJ","caption":"_1FXNw","weekdays":"_3KcRU","weekdaysRow":"_1fO_e","weekday":"_c1Y-X","body":"_34mA1","week":"_1PmqZ","day":"_1AWH2","disabled":"_3vJkw","selected":"_1DR0N","outside":"_276GV","footer":"_2M5xr","today":"_3N6fj","overlayWrapper":"_3Zqgu","overlay":"_20Ncd","weekNumber":"_2hb-S"};
 
-var styles$i = {"container":"_okDvi","wrapper":"_17XdD","interactionDisabled":"_1O7OT","DayPicker-Day":"_3noGA","navBar":"_1Hl3Q","todayButton":"_m0Vs9","navButtonInteractionDisabled":"_1ULWH","navButtonPrev":"_3gjq8","navButtonNext":"_1m-Kd","months":"_Fq6Xh","month":"_3i0Oo","caption":"_36X9Y","weekdays":"_1aWPn","weekdaysRow":"_3HXCK","weekday":"_t-ctd","body":"_XAbiR","week":"_3Nwep","day":"_3nNcG","disabled":"_1M4ZF","selected":"_2PEs8","outside":"_1PIJa","footer":"_2T_z1","today":"_1hVM6","overlayWrapper":"_1L-hI","overlay":"_dDPZb","weekNumber":"_1alhT"};
+var styles$k = {"container":"_okDvi","wrapper":"_17XdD","interactionDisabled":"_1O7OT","DayPicker-Day":"_3noGA","navBar":"_1Hl3Q","todayButton":"_m0Vs9","navButtonInteractionDisabled":"_1ULWH","navButtonPrev":"_3gjq8","navButtonNext":"_1m-Kd","months":"_Fq6Xh","month":"_3i0Oo","caption":"_36X9Y","weekdays":"_1aWPn","weekdaysRow":"_3HXCK","weekday":"_t-ctd","body":"_XAbiR","week":"_3Nwep","day":"_3nNcG","disabled":"_1M4ZF","selected":"_2PEs8","outside":"_1PIJa","footer":"_2T_z1","today":"_1hVM6","overlayWrapper":"_1L-hI","overlay":"_dDPZb","weekNumber":"_1alhT"};
 
 function parseDate(str, format, locale) {
   var parsed = dateFnsParse(str, format, new Date(), {
@@ -4926,7 +5015,7 @@ var Calendar = function Calendar(_ref) {
       calendarRef = _useState[0],
       setCalendarRef = _useState[1];
 
-  var style = mode === CALENDAR_MODE.DAY ? styles$h : styles$i;
+  var style = mode === CALENDAR_MODE.DAY ? styles$j : styles$k;
   var anchorNode = anchorRef.current;
   useOnClickOutside({
     current: calendarRef
@@ -4992,6 +5081,7 @@ var Calendar = function Calendar(_ref) {
     disabledDays: disabledDays,
     months: MONTH_NAMES,
     weekdaysLong: DAYS,
+    initialMonth: selected,
     weekdaysShort: DAYS.map(function (day) {
       return day.substring(0, 2);
     }),
@@ -5000,7 +5090,7 @@ var Calendar = function Calendar(_ref) {
   }))));
 };
 
-var styles$j = {"label":"_h724f","label--truncate":"_1VUoF"};
+var styles$l = {"label":"_h724f","label--truncate":"_1VUoF"};
 
 var isEllipsisActive = function isEllipsisActive(e) {
   return e.offsetWidth < e.scrollWidth;
@@ -5061,7 +5151,7 @@ var Label = function Label(_ref) {
   var LabelElement = React__default.createElement("label", {
     htmlFor: htmlFor,
     id: labelId,
-    className: classnames(styles$j['label'], (_classNames = {}, _classNames[styles$j['label--truncate']] = shouldTruncate, _classNames))
+    className: classnames(styles$l['label'], (_classNames = {}, _classNames[styles$l['label--truncate']] = shouldTruncate, _classNames))
   }, children);
 
   if (showTooltip) {
@@ -5074,25 +5164,25 @@ var Label = function Label(_ref) {
   return LabelElement;
 };
 
-var styles$k = {"caption":"_1DWBq"};
+var styles$m = {"caption":"_1DWBq"};
 
 var Caption = function Caption(_ref) {
   var fieldId = _ref.fieldId,
       children = _ref.children;
   return React__default.createElement("div", {
     id: fieldId && fieldId + "-describer",
-    className: styles$k['caption']
+    className: styles$m['caption']
   }, children);
 };
 
-var styles$l = {"error-message":"_nZ2MD"};
+var styles$n = {"error-message":"_nZ2MD"};
 
 var ErrorMessage = function ErrorMessage(_ref) {
   var fieldId = _ref.fieldId,
       children = _ref.children;
   return React__default.createElement("div", {
     id: fieldId && fieldId + "-error-message",
-    className: styles$l['error-message']
+    className: styles$n['error-message']
   }, React__default.createElement(Inline, {
     space: 8,
     alignItems: "center"
@@ -5121,7 +5211,7 @@ var Field = function Field(_ref) {
   }, error));
 };
 
-var styles$m = {"affix-container":"_ybKOk","affix-container--prefixed":"_2COk3","affix-container--suffixed":"_1xXXN","prefix":"_eX5OL","suffix":"__YH01"};
+var styles$o = {"affix-container":"_ybKOk","affix-container--prefixed":"_2COk3","affix-container--suffixed":"_1xXXN","prefix":"_eX5OL","suffix":"__YH01"};
 
 var AffixContainer = function AffixContainer(_ref) {
   var _classnames;
@@ -5159,24 +5249,24 @@ var AffixContainer = function AffixContainer(_ref) {
     return children;
   }
 
-  var classes = classnames(styles$m['affix-container'], (_classnames = {}, _classnames[styles$m['affix-container--prefixed']] = hasPrefix, _classnames[styles$m['affix-container--suffixed']] = hasSuffix, _classnames));
+  var classes = classnames(styles$o['affix-container'], (_classnames = {}, _classnames[styles$o['affix-container--prefixed']] = hasPrefix, _classnames[styles$o['affix-container--suffixed']] = hasSuffix, _classnames));
   return React__default.createElement("div", {
     className: classes,
     ref: container,
     "data-testid": "affix-container"
   }, hasPrefix && React__default.createElement("div", {
-    className: styles$m['prefix'],
+    className: styles$o['prefix'],
     ref: prefixElement
   }, prefix), children, hasSuffix && React__default.createElement("div", {
-    className: styles$m['suffix'],
+    className: styles$o['suffix'],
     ref: suffixElement
   }, suffix));
 };
 
-var styles$n = {"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$p = {"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 DataTableEditableCell = function DataTableEditableCell(_ref) {
-  var _columns$columnIndex, _classnames, _classnames2;
+  var _columns$columnIndex, _controllers$error, _classnames, _classnames2;
 
   var name = _ref.name,
       columnIndex = _ref.columnIndex,
@@ -5216,12 +5306,13 @@ var DataTableEditableCell = function DataTableEditableCell(_ref) {
     type: type
   });
   var hasError = !!controllers.error;
+  var errorMessage = (_controllers$error = controllers.error) === null || _controllers$error === void 0 ? void 0 : _controllers$error.toString();
   var fieldProps = {
     name: name,
     id: controllers.id
   };
-  return React__default.createElement("div", {
-    className: classnames((_classnames = {}, _classnames[styles$n['data-table-editable-cell--currency']] = type === 'currency', _classnames), styles$n['data-table-editable-cell']),
+  var EditableCell = React__default.createElement("div", {
+    className: classnames((_classnames = {}, _classnames[styles$p['data-table-editable-cell--currency']] = type === 'currency', _classnames), styles$p['data-table-editable-cell']),
     "data-testid": testId
   }, React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(AffixContainer, {
     prefix: prefix,
@@ -5229,7 +5320,7 @@ var DataTableEditableCell = function DataTableEditableCell(_ref) {
   }, React__default.createElement("input", {
     name: name,
     id: controllers.id,
-    className: classnames((_classnames2 = {}, _classnames2[styles$n['data-table-editable-cell--right-aligned']] = isRightAligned, _classnames2[styles$n['data-table-editable-cell--top-left']] = isTopLeftCell, _classnames2[styles$n['data-table-editable-cell--top-right']] = isTopRightCell, _classnames2[styles$n['data-table-editable-cell--bottom-left']] = isBottomLeftCell, _classnames2[styles$n['data-table-editable-cell--bottom-right']] = isBottomRightCell, _classnames2[styles$n['data-table-editable-cell--invalid']] = hasError, _classnames2)),
+    className: classnames((_classnames2 = {}, _classnames2[styles$p['data-table-editable-cell--right-aligned']] = isRightAligned, _classnames2[styles$p['data-table-editable-cell--top-left']] = isTopLeftCell, _classnames2[styles$p['data-table-editable-cell--top-right']] = isTopRightCell, _classnames2[styles$p['data-table-editable-cell--bottom-left']] = isBottomLeftCell, _classnames2[styles$p['data-table-editable-cell--bottom-right']] = isBottomRightCell, _classnames2[styles$p['data-table-editable-cell--invalid']] = hasError, _classnames2)),
     type: type === 'currency' ? 'number' : 'text',
     step: type === 'currency' ? 'any' : '',
     "data-testid": "text-field-" + name,
@@ -5242,6 +5333,16 @@ var DataTableEditableCell = function DataTableEditableCell(_ref) {
     onChange: controllers.onChange,
     onBlur: controllers.onBlur
   }))));
+
+  if (hasError) {
+    return React__default.createElement(Tooltip$1, {
+      overlay: errorMessage,
+      placement: "top",
+      theme: "white"
+    }, EditableCell);
+  }
+
+  return EditableCell;
 };
 
 var useSelectFieldControllers = function useSelectFieldControllers(_ref) {
@@ -5250,7 +5351,8 @@ var useSelectFieldControllers = function useSelectFieldControllers(_ref) {
       value = _ref.value,
       _onChange = _ref.onChange,
       _onBlur = _ref.onBlur,
-      error = _ref.error;
+      error = _ref.error,
+      onMenuInputFocus = _ref.onMenuInputFocus;
 
   var _useFormContext = useFormContext(),
       formik = _useFormContext.formik;
@@ -5264,10 +5366,22 @@ var useSelectFieldControllers = function useSelectFieldControllers(_ref) {
     error: error,
     value: value,
     onChange: function onChange(option) {
-      return _onChange && _onChange(option);
+      if (_onChange) {
+        _onChange(option);
+      }
+
+      if (_onChange && onMenuInputFocus) {
+        onMenuInputFocus(false);
+      }
     },
     onBlur: function onBlur(option) {
-      return _onBlur && _onBlur(option);
+      if (_onBlur) {
+        _onBlur(option);
+      }
+
+      if (_onBlur && onMenuInputFocus) {
+        onMenuInputFocus(false);
+      }
     }
   };
   var formikState = getFormikState(name, formik);
@@ -5281,6 +5395,10 @@ var useSelectFieldControllers = function useSelectFieldControllers(_ref) {
           _onChange(option);
         }
 
+        if (_onChange && onMenuInputFocus) {
+          onMenuInputFocus(false);
+        }
+
         formik.setFieldValue(name, option);
       },
       onBlur: function onBlur(option) {
@@ -5288,6 +5406,10 @@ var useSelectFieldControllers = function useSelectFieldControllers(_ref) {
           _onBlur(option);
         }
 
+        if (_onBlur && onMenuInputFocus) {
+          onMenuInputFocus(false);
+        }
+
         formik.setFieldTouched(name);
       }
     });
@@ -5427,7 +5549,201 @@ var ToolbarSelect = function ToolbarSelect(_ref) {
   }));
 };
 
-var styles$o = {"form--standard-size":"_3CaV0"};
+var styles$q = {"date-filter":"_2X-yg","date-filter--wide":"_3O5Kh"};
+
+var styles$r = {"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',
+  WEEK: 'week',
+  MONTH: 'month'
+};
+var STEP_DIRECTION = {
+  FORWARD: 'forward',
+  BACKWARD: 'backward'
+};
+
+var getDateString = function getDateString(date, mode) {
+  var format;
+
+  switch (mode) {
+    case DATE_FILTER_MODE.DAY:
+      format = "EEE',' MMM d',' yyyy";
+      break;
+
+    case DATE_FILTER_MODE.WEEK:
+      format = "MMM d',' yyyy";
+      break;
+
+    default:
+      format = "MMMM',' yyyy";
+      break;
+  }
+
+  return formatDate(date, format);
+};
+
+var DateFilterText = function DateFilterText(_ref) {
+  var mode = _ref.mode,
+      selectedDate = _ref.selectedDate,
+      weekStart = _ref.weekStart;
+
+  switch (mode) {
+    case DATE_FILTER_MODE.WEEK:
+      var weekRange = createWeekRange(selectedDate, weekStart);
+      return React__default.createElement(Inline, {
+        space: 12
+      }, React__default.createElement("span", null, getDateString(weekRange.start, mode)), React__default.createElement("span", {
+        className: "date-filter__to_date_icon"
+      }, React__default.createElement(IconArrowRight, {
+        size: "small",
+        color: GREY400
+      })), React__default.createElement("span", null, getDateString(weekRange.end, mode)));
+
+    default:
+      return React__default.createElement("span", null, getDateString(selectedDate, mode));
+  }
+};
+
+var DateFilterDisplay = function DateFilterDisplay(_ref) {
+  var _classnames;
+
+  var mode = _ref.mode,
+      selectedDate = _ref.selectedDate,
+      weekStart = _ref.weekStart,
+      onClick = _ref.onClick;
+  return React__default.createElement("button", {
+    className: classnames(styles$r['date-filter-display'], (_classnames = {}, _classnames[styles$r['date-filter-display--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames[styles$r['date-filter-display--non-interactive']] = mode === DATE_FILTER_MODE.MONTH, _classnames)),
+    onClick: onClick,
+    tabIndex: mode === DATE_FILTER_MODE.MONTH ? -1 : undefined
+  }, React__default.createElement(Inline, {
+    space: 12,
+    alignItems: "center"
+  }, React__default.createElement("div", {
+    className: classnames(styles$r['date-filter-display__display-icon'])
+  }, React__default.createElement(IconCalendarAlt, {
+    size: "flexible",
+    color: GREY400
+  })), React__default.createElement(DateFilterText, {
+    mode: mode,
+    selectedDate: selectedDate,
+    weekStart: weekStart
+  })));
+};
+
+var styles$s = {"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;
+  var newDate = new Date(date);
+
+  switch (mode) {
+    case DATE_FILTER_MODE.DAY:
+      newDate.setDate(date.getDate() + step);
+      break;
+
+    case DATE_FILTER_MODE.WEEK:
+      newDate.setDate(date.getDate() + step * 7);
+      break;
+
+    case DATE_FILTER_MODE.MONTH:
+      newDate.setMonth(date.getMonth() + step);
+      break;
+
+    default:
+      throw new Error('Mode not supported by DateFilter: ' + mode);
+  }
+
+  onChange(newDate);
+};
+
+var DateFilterStepper = function DateFilterStepper(_ref) {
+  var _classnames;
+
+  var children = _ref.children,
+      mode = _ref.mode,
+      stepDirection = _ref.stepDirection,
+      onChange = _ref.onChange,
+      date = _ref.date;
+  return React__default.createElement("button", {
+    className: classnames(styles$s['date-stepper'], (_classnames = {}, _classnames[styles$s['date-stepper--backward']] = stepDirection === STEP_DIRECTION.BACKWARD, _classnames[styles$s['date-stepper--forward']] = stepDirection === STEP_DIRECTION.FORWARD, _classnames)),
+    onClick: function onClick() {
+      return handleDateStepper(date, mode, stepDirection, onChange);
+    }
+  }, children);
+};
+
+var DateFilter = function DateFilter(_ref) {
+  var _classnames;
+
+  var _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? 'day' : _ref$mode,
+      _ref$weekStart = _ref.weekStart,
+      weekStart = _ref$weekStart === void 0 ? 0 : _ref$weekStart,
+      value = _ref.value,
+      onChange = _ref.onChange,
+      testId = _ref.testId;
+  var calendarAnchorRef = React.useRef(null);
+
+  var _useState = React.useState(false),
+      calendarOpen = _useState[0],
+      setCalendarOpen = _useState[1];
+
+  var _useState2 = React.useState(value),
+      date = _useState2[0],
+      setDate = _useState2[1];
+
+  var handleChange = function handleChange(date) {
+    setDate(date);
+    onChange(date);
+    setCalendarOpen(false);
+  };
+
+  return React__default.createElement("div", {
+    "data-testid": testId,
+    ref: calendarAnchorRef,
+    className: classnames(styles$q['date-filter'], (_classnames = {}, _classnames[styles$q['date-filter--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames))
+  }, React__default.createElement(Inline, {
+    space: 0
+  }, React__default.createElement(DateFilterStepper, {
+    mode: mode,
+    date: date,
+    stepDirection: STEP_DIRECTION.BACKWARD,
+    onChange: handleChange
+  }, React__default.createElement(IconChevronLeft, {
+    size: "small",
+    color: GREY400
+  })), React__default.createElement(DateFilterDisplay, {
+    mode: mode,
+    weekStart: weekStart,
+    selectedDate: date,
+    onClick: function onClick() {
+      return setCalendarOpen(function (prevState) {
+        return !prevState;
+      });
+    }
+  }), React__default.createElement(DateFilterStepper, {
+    mode: mode,
+    stepDirection: STEP_DIRECTION.FORWARD,
+    date: date,
+    onChange: handleChange
+  }, React__default.createElement(IconChevronRight, {
+    size: "small",
+    color: GREY400
+  }))), calendarOpen && mode !== DATE_FILTER_MODE.MONTH && React__default.createElement(Calendar, {
+    onSelect: handleChange,
+    selected: date,
+    onClickOutside: function onClickOutside() {
+      return setCalendarOpen(false);
+    },
+    anchorRef: calendarAnchorRef,
+    weekStart: weekStart,
+    mode: mode,
+    position: "bottom"
+  }));
+};
+
+var styles$t = {"form--standard-size":"_3CaV0"};
 
 var Form = function Form(_ref) {
   var _classnames;
@@ -5453,12 +5769,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$o['form--standard-size']] = !wide, _classnames)),
+    className: classnames((_classnames = {}, _classnames[styles$t['form--standard-size']] = !wide, _classnames)),
     "data-testid": testId
   }, stackContent ? React__default.createElement(Stack, null, children) : children));
 };
 
-var styles$p = {"form-row":"_2i-Ll"};
+var styles$u = {"form-row":"_2i-Ll"};
 
 var SIZE_25_PERCENT = '25%';
 var SIZE_33_PERCENT = '33.333%';
@@ -5489,7 +5805,7 @@ var FormRow = function FormRow(_ref) {
     space: 20,
     testId: testId,
     alignItems: "stretch",
-    extraClass: styles$p['form-row']
+    extraClass: styles$u['form-row']
   }, children, additionalColumns.map(function (_, index) {
     return React__default.createElement("span", {
       key: index,
@@ -5498,7 +5814,7 @@ var FormRow = function FormRow(_ref) {
   }));
 };
 
-var styles$q = {"text-field":"_BkzdC","text-field--focus":"_Rop31","text-field--disabled":"_2x3Cm","text-field--invalid":"_3zOwV","text-field__toolbar":"_rQqnL"};
+var styles$v = {"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);
@@ -5574,7 +5890,7 @@ var TextAreaField = function TextAreaField(_ref) {
       updateHeight = _useGrowTextAreaRef.updateHeight;
 
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
-    className: classnames(styles$q['text-field'], (_classnames = {}, _classnames[styles$q['text-field--invalid']] = hasError, _classnames[styles$q['text-field--disabled']] = disabled, _classnames[styles$q['text-field--focus']] = hasFocus, _classnames)),
+    className: classnames(styles$v['text-field'], (_classnames = {}, _classnames[styles$v['text-field--invalid']] = hasError, _classnames[styles$v['text-field--disabled']] = disabled, _classnames[styles$v['text-field--focus']] = hasFocus, _classnames)),
     ref: containerRef,
     onClick: function onClick(event) {
       if (event.target === (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current)) {
@@ -5606,7 +5922,7 @@ var TextAreaField = function TextAreaField(_ref) {
     },
     ref: textAreaRef
   }), toolbar && React__default.createElement("div", {
-    className: styles$q['text-field__toolbar'],
+    className: styles$v['text-field__toolbar'],
     id: controllers.id + "-toolbar",
     ref: toolbarRef,
     onClick: function onClick(event) {
@@ -5619,7 +5935,7 @@ var TextAreaField = function TextAreaField(_ref) {
   }, toolbar)));
 };
 
-var styles$r = {"text-field":"_20YOA","text-field--invalid":"_3kUSh","text-field--prefixed":"_3IU3Q","text-field--suffixed":"_QXJOD"};
+var textFieldStyles = {"text-field":"_20YOA","text-field--invalid":"_3kUSh","text-field--prefixed":"_3IU3Q","text-field--suffixed":"_QXJOD"};
 
 var useTextField = function useTextField(_ref) {
   var _classnames;
@@ -5658,7 +5974,7 @@ var useTextField = function useTextField(_ref) {
     'aria-invalid': hasError,
     autoComplete: autoComplete,
     autoFocus: autoFocus,
-    className: classnames(styles$r['text-field'], (_classnames = {}, _classnames[styles$r['text-field--invalid']] = hasError, _classnames)),
+    className: classnames(textFieldStyles['text-field'], (_classnames = {}, _classnames[textFieldStyles['text-field--invalid']] = hasError, _classnames)),
     'data-testid': testId || "text-field-" + name,
     disabled: disabled,
     defaultValue: defaultValue,
@@ -5755,7 +6071,7 @@ var useCheckBoxFieldControllers = function useCheckBoxFieldControllers(_ref) {
   return controllers;
 };
 
-var styles$s = {"check-box-field":"_2sg0c","check-box-field__caption":"_2LdrP","check-box-field__custom-input":"_2mA8e"};
+var styles$w = {"check-box-field":"_2sg0c","check-box-field__caption":"_2LdrP","check-box-field__custom-input":"_2mA8e"};
 
 var CheckboxField = function CheckboxField(_ref) {
   var name = _ref.name,
@@ -5785,7 +6101,7 @@ var CheckboxField = function CheckboxField(_ref) {
     flexItems: true,
     flex: ['0 0 auto']
   }, React__default.createElement("div", {
-    className: styles$s['check-box-field']
+    className: styles$w['check-box-field']
   }, React__default.createElement("input", {
     name: name,
     id: controllers.id,
@@ -5798,12 +6114,12 @@ var CheckboxField = function CheckboxField(_ref) {
     onChange: controllers.onChange,
     onBlur: controllers.onBlur
   }), React__default.createElement("span", {
-    className: styles$s['check-box-field__custom-input']
+    className: styles$w['check-box-field__custom-input']
   })), label && React__default.createElement(Label, {
     htmlFor: controllers.id,
     truncate: false
   }, label)), caption && React__default.createElement("div", {
-    className: styles$s['check-box-field__caption']
+    className: styles$w['check-box-field__caption']
   }, React__default.createElement(Caption, {
     fieldId: controllers.id
   }, caption)), controllers.error && React__default.createElement(ErrorMessage, {
@@ -5811,7 +6127,7 @@ var CheckboxField = function CheckboxField(_ref) {
   }, controllers.error));
 };
 
-var styles$t = {"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,
@@ -5903,7 +6219,7 @@ var PillSelectField = function PillSelectField(_ref) {
     var itemId = controllers.id + "-" + itemIdentifier;
     return React__default.createElement("div", {
       key: itemIdentifier,
-      className: styles$t['pill-select-field']
+      className: styles$x['pill-select-field']
     }, React__default.createElement("input", {
       name: name + "-" + itemIdentifier,
       id: itemId,
@@ -5925,7 +6241,7 @@ var PillSelectField = function PillSelectField(_ref) {
         controllers.onChange(newValue);
       }
     }), React__default.createElement("span", {
-      className: styles$t['pill-select-field__custom-input']
+      className: styles$x['pill-select-field__custom-input']
     }, option.label));
   })));
 };
@@ -5973,9 +6289,9 @@ var useRadioGroupFieldContext = function useRadioGroupFieldContext() {
   return context;
 };
 
-var styles$u = {"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$v = {"label":"_1Tw96","label--truncate":"_1o8rK","radio-group-box-option":"_2OGKE","radio-group-box-option__box":"_23M9k","radio-group-box-option__label":"_1r-Wg"};
+var styles$z = {"label":"_1Tw96","label--truncate":"_1o8rK","radio-group-box-option":"_2OGKE","radio-group-box-option__box":"_23M9k","radio-group-box-option__label":"_1r-Wg"};
 
 var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
   var value = _ref.value,
@@ -5990,7 +6306,7 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     id: inputId
   });
   return React__default.createElement("label", {
-    className: styles$v['radio-group-box-option']
+    className: styles$z['radio-group-box-option']
   }, React__default.createElement("input", {
     type: "radio",
     "data-testid": testId,
@@ -6001,7 +6317,7 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     checked: radioGroupContext.value !== undefined ? radioGroupContext.value === value : undefined,
     disabled: radioGroupContext.disabled
   }), React__default.createElement("div", {
-    className: styles$v['radio-group-box-option__box']
+    className: styles$z['radio-group-box-option__box']
   }, React__default.createElement(Stack, {
     space: 16,
     alignItems: "center",
@@ -6010,13 +6326,13 @@ var RadioGroupBoxOption = function RadioGroupBoxOption(_ref) {
     space: 8,
     alignItems: "center"
   }, label && React__default.createElement("div", {
-    className: styles$v['radio-group-box-option__label']
+    className: styles$z['radio-group-box-option__label']
   }, label), caption && React__default.createElement(Caption, {
     fieldId: id
   }, caption)))));
 };
 
-var styles$w = {"radio-group-option":"_1Clmp","radio-group-option__caption":"_3UmWA","radio-group-option__custom-input":"_1tMq-"};
+var styles$A = {"radio-group-option":"_1Clmp","radio-group-option__caption":"_3UmWA","radio-group-option__custom-input":"_1tMq-"};
 
 var RadioGroupOption = function RadioGroupOption(_ref) {
   var value = _ref.value,
@@ -6035,7 +6351,7 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     space: 8,
     alignItems: "center"
   }, React__default.createElement("div", {
-    className: styles$w['radio-group-option']
+    className: styles$A['radio-group-option']
   }, React__default.createElement("input", {
     type: "radio",
     "data-testid": testId,
@@ -6046,11 +6362,11 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     checked: radioGroupContext.value !== undefined ? radioGroupContext.value === value : undefined,
     disabled: radioGroupContext.disabled
   }), React__default.createElement("span", {
-    className: styles$w['radio-group-option__custom-input']
+    className: styles$A['radio-group-option__custom-input']
   })), label && React__default.createElement(Label, {
     htmlFor: id
   }, label)), caption && React__default.createElement("div", {
-    className: styles$w['radio-group-option__caption']
+    className: styles$A['radio-group-option__caption']
   }, React__default.createElement(Caption, {
     fieldId: id
   }, caption)));
@@ -6185,7 +6501,7 @@ var RadioGroupField = function RadioGroupField(_ref) {
   }, React__default.createElement(Stack, {
     space: 12
   }, label && React__default.createElement("div", {
-    className: styles$u['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, {
@@ -6198,9 +6514,9 @@ var RadioGroupField = function RadioGroupField(_ref) {
   }, children), controllers.error && React__default.createElement(ErrorMessage, null, controllers.error))));
 };
 
-var styles$x = {"text-field":"_18Rzv","text-field--invalid":"_3eD7t","text-field--prefixed":"_2evrG","text-field--suffixed":"_-MgeO","password-container":"_-Rf3c","password-toggle":"_yinPY"};
+var styles$B = {"text-field":"_18Rzv","text-field--invalid":"_3eD7t","text-field--prefixed":"_2evrG","text-field--suffixed":"_-MgeO","password-container":"_-Rf3c","password-toggle":"_yinPY"};
 
-var styles$y = {"password-criteria":"_U0krC","password-criteria--invalid":"_2XIl4"};
+var styles$C = {"password-criteria":"_U0krC","password-criteria--invalid":"_2XIl4"};
 
 var PasswordCriteria = function PasswordCriteria(_ref) {
   var _classnames;
@@ -6208,7 +6524,7 @@ var PasswordCriteria = function PasswordCriteria(_ref) {
   var met = _ref.met,
       children = _ref.children;
   return React__default.createElement("span", {
-    className: classnames(styles$y['password-criteria'], (_classnames = {}, _classnames[styles$y['password-criteria--invalid']] = !met, _classnames))
+    className: classnames(styles$C['password-criteria'], (_classnames = {}, _classnames[styles$C['password-criteria--invalid']] = !met, _classnames))
   }, React__default.createElement(Inline, {
     space: met ? 4 : 8
   }, met ? React__default.createElement(IconCheck, {
@@ -6293,11 +6609,11 @@ var PasswordField = function PasswordField(_ref) {
     error: controllers.error
   };
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
-    className: styles$x['password-container']
+    className: styles$B['password-container']
   }, React__default.createElement("input", {
     name: name,
     id: controllers.id,
-    className: classnames(styles$x['text-field'], (_classnames = {}, _classnames[styles$x['text-field--invalid']] = hasError, _classnames)),
+    className: classnames(styles$B['text-field'], (_classnames = {}, _classnames[styles$B['text-field--invalid']] = hasError, _classnames)),
     type: type,
     "data-testid": testId || "text-field-" + name,
     "aria-describedby": hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
@@ -6309,7 +6625,7 @@ var PasswordField = function PasswordField(_ref) {
     onChange: controllers.onChange,
     onBlur: controllers.onBlur
   }), React__default.createElement("div", {
-    className: styles$x['password-toggle'],
+    className: styles$B['password-toggle'],
     onClick: toggleType,
     onKeyPress: toggleType,
     "data-testid": "password-toggle",
@@ -6568,7 +6884,7 @@ var MultiSelectField = function MultiSelectField(_ref) {
   }));
 };
 
-var styles$z = {"custom-control":"_1cDCR"};
+var styles$D = {"custom-control":"_1cDCR"};
 
 var _excluded$23 = ["children"];
 
@@ -6581,7 +6897,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$z['custom-control'],
+    className: styles$D['custom-control'],
     style: {
       paddingLeft: selectedOption ? 8 : 0
     }
@@ -6594,6 +6910,113 @@ function CustomControl(_ref) {
   }, props)), children)) : children);
 }
 
+var styles$E = {"custom-menu-hr":"_3sdnK","custom-menu-div":"_2F1jP"};
+
+var _excluded$24 = ["children"];
+
+function CustomMenu(_ref) {
+  var children = _ref.children,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$24);
+
+  var _props$selectProps$co = props.selectProps.componentsProps,
+      creatableButton = _props$selectProps$co.creatableButton,
+      onMenuInputFocus = _props$selectProps$co.onMenuInputFocus,
+      onCreate = _props$selectProps$co.onCreate;
+
+  var _useState = React.useState(false),
+      showFooter = _useState[0],
+      setShowFooter = _useState[1];
+
+  var textFieldRef = React.useRef(null);
+  var containerRef = React.useRef(null);
+
+  var CreatableButton = function CreatableButton() {
+    var button = creatableButton;
+
+    if (!button || typeof button === 'string') {
+      return React__default.createElement(Button$1, {
+        theme: "link-primary",
+        onClick: function onClick() {
+          return setShowFooter(true);
+        },
+        size: "full-width"
+      }, React__default.createElement(Inline, {
+        space: 4,
+        justifyContent: "center"
+      }, React__default.createElement(IconPlus, {
+        size: "medium"
+      }), button || getLocalizedString('main.CREATE_OPTION')));
+    }
+
+    return React__default.cloneElement(button, {
+      onClick: function onClick() {
+        return setShowFooter(true);
+      }
+    });
+  };
+
+  var onCreateButton = function onCreateButton() {
+    if (textFieldRef.current && textFieldRef.current.value.trim() !== '') {
+      onCreate(textFieldRef.current.value);
+      textFieldRef.current.value = '';
+    }
+  };
+
+  var handleClickOutsideContainer = function handleClickOutsideContainer() {
+    onMenuInputFocus(false);
+  };
+
+  useOnClickOutside(containerRef, handleClickOutsideContainer);
+  return React__default.createElement(Select.components.Menu, Object.assign({}, props), React__default.createElement("div", {
+    ref: containerRef
+  }, children, React__default.createElement("hr", {
+    className: styles$E['custom-menu-hr']
+  }), !showFooter ? React__default.createElement(CreatableButton, null) : React__default.createElement("div", {
+    className: styles$E['custom-menu-div']
+  }, React__default.createElement(Flex, {
+    space: 4,
+    flex: [1],
+    flexItems: true
+  }, React__default.createElement("input", {
+    className: textFieldStyles['text-field'],
+    autoCorrect: "off",
+    autoComplete: "off",
+    spellCheck: "false",
+    type: "text",
+    onMouseDown: function onMouseDown(e) {
+      var _textFieldRef$current;
+
+      e.stopPropagation();
+      textFieldRef === null || textFieldRef === void 0 ? void 0 : (_textFieldRef$current = textFieldRef.current) === null || _textFieldRef$current === void 0 ? void 0 : _textFieldRef$current.focus();
+    },
+    onKeyDown: function onKeyDown(e) {
+      return e.stopPropagation();
+    },
+    onKeyPress: function onKeyPress(e) {
+      if (e.key === 'Enter') {
+        onCreateButton();
+      }
+    },
+    onTouchEnd: function onTouchEnd(e) {
+      var _textFieldRef$current2;
+
+      e.stopPropagation();
+      textFieldRef === null || textFieldRef === void 0 ? void 0 : (_textFieldRef$current2 = textFieldRef.current) === null || _textFieldRef$current2 === void 0 ? void 0 : _textFieldRef$current2.focus();
+    },
+    onFocus: function onFocus() {
+      return onMenuInputFocus(true);
+    },
+    ref: textFieldRef,
+    "data-testid": "select-create-option-input",
+    autoFocus: true
+  }), React__default.createElement(Button$1, {
+    onClick: onCreateButton,
+    onKeyDown: function onKeyDown(e) {
+      e.stopPropagation();
+    }
+  }, getLocalizedString('default.CREATE'))))));
+}
+
 var useSelectField = function useSelectField(_ref) {
   var _ref$asToolbarFilter = _ref.asToolbarFilter,
       asToolbarFilter = _ref$asToolbarFilter === void 0 ? false : _ref$asToolbarFilter,
@@ -6616,14 +7039,26 @@ var useSelectField = function useSelectField(_ref) {
       defaultValue = _ref.defaultValue,
       UserCustomOption = _ref.CustomOption,
       SelectedOptionPrefix = _ref.SelectedOptionPrefix,
-      testId = _ref.testId;
+      testId = _ref.testId,
+      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 = useSelectFieldControllers({
     error: error,
     id: id,
     name: name,
     onChange: onChange,
     onBlur: onBlur,
-    value: value
+    value: value,
+    onMenuInputFocus: onMenuInputFocus
   });
   var hasError = !!controllers.error;
   var defaultNoOptionsMessage = noOptionsMessage && typeof noOptionsMessage === 'string' ? function () {
@@ -6640,12 +7075,16 @@ var useSelectField = function useSelectField(_ref) {
     componentsProps: {
       testId: testId,
       UserCustomOption: UserCustomOption,
-      SelectedOptionPrefix: SelectedOptionPrefix
+      SelectedOptionPrefix: SelectedOptionPrefix,
+      creatableButton: creatableButton,
+      onMenuInputFocus: onMenuInputFocus,
+      onCreate: onCreate
     },
     components: {
       SelectContainer: CustomContainer,
       Option: UserCustomOption ? CustomOption : Select.components.Option,
-      Control: SelectedOptionPrefix ? CustomControl : Select.components.Control
+      Control: SelectedOptionPrefix ? CustomControl : Select.components.Control,
+      Menu: onCreate ? CustomMenu : Select.components.Menu
     },
     inputId: controllers.id,
     isClearable: isClearable,
@@ -6664,7 +7103,8 @@ var useSelectField = function useSelectField(_ref) {
       asToolbarFilter: asToolbarFilter
     }),
     value: controllers.value,
-    defaultValue: defaultValue
+    defaultValue: defaultValue,
+    menuIsOpen: isMenuInputFocus || undefined
   };
   var fieldProps = {
     caption: caption,
@@ -6689,15 +7129,15 @@ var SelectField = function SelectField(props) {
   }, React__default.createElement(Select__default, Object.assign({}, selectProps))));
 };
 
-var styles$A = {"custom-list":"_uC4zU"};
+var styles$F = {"custom-list":"_uC4zU"};
 
-var _excluded$24 = ["children", "hasMoreOptions", "hasMoreOptionsFirstLoad"];
+var _excluded$25 = ["children", "hasMoreOptions", "hasMoreOptionsFirstLoad"];
 
 var CustomList = function CustomList(_ref) {
   var children = _ref.children,
       hasMoreOptions = _ref.hasMoreOptions,
       hasMoreOptionsFirstLoad = _ref.hasMoreOptionsFirstLoad,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$24);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$25);
 
   var showFooter = hasMoreOptions;
 
@@ -6708,15 +7148,15 @@ 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$A['custom-list']
+    className: styles$F['custom-list']
   }, getLocalizedString('main.START_TYPING_TO_SEE_MORE_OPTIONS')))));
 };
 
-var _excluded$25 = ["loadOptions"];
+var _excluded$26 = ["loadOptions"];
 
 var AsyncSelectField = function AsyncSelectField(_ref) {
   var loadOptions = _ref.loadOptions,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$25);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$26);
 
   var _useState = React.useState(false),
       hasMoreOptions = _useState[0],
@@ -6937,7 +7377,7 @@ var DateField = function DateField(_ref) {
     error: controllers.error
   };
   var dayPickerProps = {
-    classNames: styles$h,
+    classNames: styles$j,
     disabledDays: function disabledDays(day) {
       return _disabledDays && _disabledDays(setToMidnight(day));
     },
@@ -6955,7 +7395,7 @@ var DateField = function DateField(_ref) {
     })
   }, React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$h,
+    classNames: styles$j,
     formatDate: formatDate,
     parseDate: parseDate,
     placeholder: placeholder || format.toUpperCase(),
@@ -7064,7 +7504,7 @@ var getFormikError = function getFormikError(error) {
   return undefined;
 };
 
-var styles$B = {"container":"_1Ini2","wrapper":"_21VnL","interactionDisabled":"_wJ6Cb","DayPicker-Day":"_1c48y","navBar":"_3KwsN","todayButton":"_10CBO","navButtonInteractionDisabled":"_dHL-D","navButtonPrev":"_6kNi3","navButtonNext":"_13W_e","months":"_1FeSY","month":"_wU6A4","caption":"_AMbAo","weekdays":"_1LEst","weekdaysRow":"_2XECo","weekday":"_1C5ry","body":"_11F-Y","week":"_3MAFk","day":"_mG73F","disabled":"_2pgnH","selected":"_MtLaz","outside":"_CRqyX","footer":"_2KG9-","today":"_2JA2y","overlayWrapper":"_1JWbc","overlay":"_2tL6g","weekNumber":"_3u72O","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$G = {"container":"_1Ini2","wrapper":"_21VnL","interactionDisabled":"_wJ6Cb","DayPicker-Day":"_1c48y","navBar":"_3KwsN","todayButton":"_10CBO","navButtonInteractionDisabled":"_dHL-D","navButtonPrev":"_6kNi3","navButtonNext":"_13W_e","months":"_1FeSY","month":"_wU6A4","caption":"_AMbAo","weekdays":"_1LEst","weekdaysRow":"_2XECo","weekday":"_1C5ry","body":"_11F-Y","week":"_3MAFk","day":"_mG73F","disabled":"_2pgnH","selected":"_MtLaz","outside":"_CRqyX","footer":"_2KG9-","today":"_2JA2y","overlayWrapper":"_1JWbc","overlay":"_2tL6g","weekNumber":"_3u72O","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 FromDate = function FromDate(_ref) {
   var name = _ref.name,
@@ -7102,7 +7542,7 @@ var FromDate = function FromDate(_ref) {
   }
 
   var dayPickerProps = {
-    classNames: styles$B,
+    classNames: styles$G,
     months: MONTH_NAMES,
     weekdaysLong: DAYS,
     weekdaysShort: DAYS.map(function (day) {
@@ -7129,7 +7569,7 @@ var FromDate = function FromDate(_ref) {
   };
   return React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$B,
+    classNames: styles$G,
     selectedDay: start,
     value: start,
     formatDate: formatDate,
@@ -7202,7 +7642,7 @@ var ToDate = function ToDate(_ref, ref) {
   }
 
   var dayPickerProps = {
-    classNames: styles$B,
+    classNames: styles$G,
     months: MONTH_NAMES,
     weekdaysLong: DAYS,
     weekdaysShort: DAYS.map(function (day) {
@@ -7221,7 +7661,7 @@ var ToDate = function ToDate(_ref, ref) {
   };
   return React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$B,
+    classNames: styles$G,
     selectedDay: end,
     value: end,
     formatDate: formatDate,
@@ -7306,7 +7746,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$B['date-range-field'], (_classnames = {}, _classnames[styles$B['date-range-field--invalid']] = hasError, _classnames[styles$B['date-range-field--disabled']] = disabled, _classnames)),
+    className: classnames(styles$G['date-range-field'], (_classnames = {}, _classnames[styles$G['date-range-field--invalid']] = hasError, _classnames[styles$G['date-range-field--disabled']] = disabled, _classnames)),
     "data-testid": testId
   }, React__default.createElement(IconCalendarAlt, {
     size: "medium",
@@ -7431,7 +7871,7 @@ var WeekField = function WeekField(_ref) {
   };
 
   var dayPickerProps = {
-    classNames: styles$i,
+    classNames: styles$k,
     disabledDays: function disabledDays(day) {
       return _disabledDays && _disabledDays(setToMidnight(day));
     },
@@ -7461,7 +7901,7 @@ var WeekField = function WeekField(_ref) {
     })
   }, React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$i,
+    classNames: styles$k,
     formatDate: formatDate,
     parseDate: parseDate,
     placeholder: placeholder || format.toUpperCase(),
@@ -7500,14 +7940,14 @@ var WeekField = function WeekField(_ref) {
   })));
 };
 
-var _excluded$26 = ["placeholder", "autoComplete"];
+var _excluded$27 = ["placeholder", "autoComplete"];
 
 var TimeFieldElement = function TimeFieldElement(_ref, ref) {
   var _ref$placeholder = _ref.placeholder,
       placeholder = _ref$placeholder === void 0 ? '9am' : _ref$placeholder,
       _ref$autoComplete = _ref.autoComplete,
       autoComplete = _ref$autoComplete === void 0 ? 'off' : _ref$autoComplete,
-      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$26);
+      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$27);
 
   var _useTextField = useTextField(_extends({}, allOtherProps, {
     placeholder: placeholder,
@@ -7528,12 +7968,12 @@ var TimeFieldElement = function TimeFieldElement(_ref, ref) {
 
 var TimeField = React.forwardRef(TimeFieldElement);
 
-var _excluded$27 = ["currencySymbol"];
+var _excluded$28 = ["currencySymbol"];
 
 var CurrencyFieldElement = function CurrencyFieldElement(_ref, ref) {
   var _ref$currencySymbol = _ref.currencySymbol,
       currencySymbol = _ref$currencySymbol === void 0 ? "$" : _ref$currencySymbol,
-      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$27);
+      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$28);
 
   var _useTextField = useTextField(_extends({}, allOtherProps, {
     ref: ref
@@ -7566,7 +8006,7 @@ var CurrencyFieldElement = function CurrencyFieldElement(_ref, ref) {
 
 var CurrencyField = React.forwardRef(CurrencyFieldElement);
 
-var _excluded$28 = ["max", "min", "precision", "stepSize"];
+var _excluded$29 = ["max", "min", "precision", "stepSize"];
 
 var PercentageElement = function PercentageElement(_ref, ref) {
   var _ref$max = _ref.max,
@@ -7577,7 +8017,7 @@ var PercentageElement = function PercentageElement(_ref, ref) {
       precision = _ref$precision === void 0 ? 0 : _ref$precision,
       _ref$stepSize = _ref.stepSize,
       stepSize = _ref$stepSize === void 0 ? 1 : _ref$stepSize,
-      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$28);
+      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$29);
 
   var _useTextField = useTextField(_extends({}, allOtherProps, {
     ref: ref
@@ -7669,7 +8109,7 @@ var BUTTON_THEME = {
   UPSELL: 'upsell'
 };
 
-var styles$C = {"banner":"_vgLin","banner__title":"_63TwY","banner__body":"_3n6S7","banner__body--multilineCTA":"_2pMYs","banner--info":"_ON6Eg","banner__icon":"_1-D-E","banner--success":"_1FFZh","banner--danger":"_2R34O","banner--warning":"_3Cfhe","banner--upsell":"_1SIOw","banner__close":"_3SNQ1","banner--single-line":"_3nLTI"};
+var styles$H = {"banner":"_vgLin","banner__title":"_63TwY","banner__body":"_3n6S7","banner__body--multilineCTA":"_2pMYs","banner--info":"_ON6Eg","banner__icon":"_1-D-E","banner--success":"_1FFZh","banner--danger":"_2R34O","banner--warning":"_3Cfhe","banner--upsell":"_1SIOw","banner__close":"_3SNQ1","banner--single-line":"_3nLTI"};
 
 var ButtonCTA = function ButtonCTA(_ref) {
   var button = _ref.button,
@@ -7692,7 +8132,7 @@ var ButtonCTA = function ButtonCTA(_ref) {
   }, button.props));
 };
 
-var styles$D = {"banner__caption":"_1jqm8"};
+var styles$I = {"banner__caption":"_1jqm8"};
 
 var InlineBannerCTA = function InlineBannerCTA(_ref) {
   var primaryButton = _ref.primaryButton,
@@ -7724,7 +8164,7 @@ var InlineBannerCTA = function InlineBannerCTA(_ref) {
     bannerTheme: bannerTheme,
     primaryCTA: true
   })), caption && multiLine && React__default.createElement("div", {
-    className: styles$D['banner__caption']
+    className: styles$I['banner__caption']
   }, caption));
 };
 
@@ -7767,13 +8207,13 @@ var InlineBanner = function InlineBanner(_ref) {
   var Layout = multiLine ? Stack : Inline;
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$C['banner'], (_classnames = {}, _classnames[styles$C['banner--info']] = theme === BANNER_THEME.INFO, _classnames[styles$C['banner--warning']] = theme === BANNER_THEME.WARNING, _classnames[styles$C['banner--success']] = theme === BANNER_THEME.SUCCESS, _classnames[styles$C['banner--danger']] = theme === BANNER_THEME.DANGER, _classnames[styles$C['banner--upsell']] = theme === BANNER_THEME.UPSELL, _classnames[styles$C['banner--single-line']] = !multiLine, _classnames))
+    className: classnames(styles$H['banner'], (_classnames = {}, _classnames[styles$H['banner--info']] = theme === BANNER_THEME.INFO, _classnames[styles$H['banner--warning']] = theme === BANNER_THEME.WARNING, _classnames[styles$H['banner--success']] = theme === BANNER_THEME.SUCCESS, _classnames[styles$H['banner--danger']] = theme === BANNER_THEME.DANGER, _classnames[styles$H['banner--upsell']] = theme === BANNER_THEME.UPSELL, _classnames[styles$H['banner--single-line']] = !multiLine, _classnames))
   }, React__default.createElement(Inline, {
     alignItems: multiLine ? undefined : 'center',
     flex: ['0 1 auto', 1],
     space: 12
   }, React__default.createElement("div", {
-    className: styles$C['banner__icon']
+    className: styles$H['banner__icon']
   }, React__default.createElement(InlineBannerIcon, {
     theme: theme
   })), React__default.createElement(Layout, {
@@ -7784,9 +8224,9 @@ var InlineBanner = function InlineBanner(_ref) {
     flex: ['min-content'],
     flexWrap: multiLine ? undefined : 'wrap'
   }, title && React__default.createElement("div", {
-    className: styles$C['banner__title']
+    className: styles$H['banner__title']
   }, title), React__default.createElement("div", {
-    className: classnames(styles$C['banner__body'], (_classnames2 = {}, _classnames2[styles$C['banner__body--multilineCTA']] = primaryButton && multiLine, _classnames2))
+    className: classnames(styles$H['banner__body'], (_classnames2 = {}, _classnames2[styles$H['banner__body--multilineCTA']] = primaryButton && multiLine, _classnames2))
   }, children), primaryButton && React__default.createElement(InlineBannerCTA, {
     primaryButton: primaryButton,
     secondaryButton: secondaryButton,
@@ -7794,7 +8234,7 @@ var InlineBanner = function InlineBanner(_ref) {
     multiLine: multiLine,
     bannerTheme: theme
   })), dismissable && React__default.createElement("div", {
-    className: styles$C['banner__close']
+    className: styles$H['banner__close']
   }, React__default.createElement(Button$1, {
     theme: "link-icon",
     type: "button",
@@ -7802,9 +8242,83 @@ var InlineBanner = function InlineBanner(_ref) {
   }, React__default.createElement(IconTimes, null)))));
 };
 
-var styles$E = {"badge":"_2f81N","badge--warning":"_2g1GI","badge--danger":"_2zLnM","badge--success":"_27QOo","badge--info":"_2gmsM"};
+var styles$J = {"card":"_29ZIp","card__body":"_3Q8NT","card__body--interactive":"_2Fah6","card--focus":"_SGno0","card__body--focus":"_1zqRN","card__body--with-kebab":"_3Hwms","card__kebab":"_TmEUS"};
+
+var Card = function Card(_ref) {
+  var _classnames, _classnames2;
+
+  var children = _ref.children,
+      onClick = _ref.onClick,
+      _ref$isSelected = _ref.isSelected,
+      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+      actions = _ref.actions,
+      testId = _ref.testId;
+  return React__default.createElement("div", {
+    className: classnames(styles$J['card'])
+  }, onClick ? React__default.createElement("button", {
+    className: classnames(styles$J['card__body'], styles$J['card__body--interactive'], (_classnames = {}, _classnames[styles$J['card__body--focus']] = isSelected, _classnames[styles$J['card__body--with-kebab']] = actions, _classnames)),
+    "data-testid": testId,
+    tabIndex: 0,
+    onClick: onClick
+  }, children) : React__default.createElement("div", {
+    className: classnames(styles$J['card__body'], (_classnames2 = {}, _classnames2[styles$J['card__body--focus']] = isSelected, _classnames2[styles$J['card__body--with-kebab']] = actions, _classnames2)),
+    "data-testid": testId
+  }, children), actions && React__default.createElement("div", {
+    className: classnames(styles$J['card__kebab'])
+  }, React__default.createElement(KebabMenu, {
+    actions: actions
+  })));
+};
+
+var PERSISTENT_BANNER_THEME = {
+  UPSELL: 'upsell',
+  INFO: 'info',
+  DANGER: 'danger'
+};
+
+var styles$K = {"persistent-banner":"_1KO1J","persistent-banner--info":"_2mTN3","persistent-banner--danger":"_1YuCF","persistent-banner--upsell":"_tlNFk"};
+
+var PersistentBanner = function PersistentBanner(_ref) {
+  var _classNames;
+
+  var _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? PERSISTENT_BANNER_THEME.INFO : _ref$theme,
+      children = _ref.children,
+      primaryButton = _ref.primaryButton,
+      secondaryButton = _ref.secondaryButton,
+      onDismiss = _ref.onDismiss,
+      onLoad = _ref.onLoad,
+      testId = _ref.testId;
+  React.useEffect(function () {
+    onLoad === null || onLoad === void 0 ? void 0 : onLoad();
+  }, []);
+
+  var BannerContent = function BannerContent() {
+    return React__default.createElement(Inline, {
+      justifyContent: "center",
+      alignItems: "center"
+    }, children, primaryButton && React__default.cloneElement(primaryButton, _extends({
+      theme: BUTTON_THEMES.HOLLOW_CONTRAST
+    }, primaryButton.props)), secondaryButton && React__default.cloneElement(secondaryButton, _extends({
+      theme: BUTTON_THEMES.LINK_CONTRAST
+    }, secondaryButton.props)));
+  };
+
+  return React__default.createElement("div", {
+    className: classnames(styles$K['persistent-banner'], (_classNames = {}, _classNames[styles$K['persistent-banner--info']] = theme === PERSISTENT_BANNER_THEME.INFO, _classNames[styles$K['persistent-banner--danger']] = theme === PERSISTENT_BANNER_THEME.DANGER, _classNames[styles$K['persistent-banner--upsell']] = theme === PERSISTENT_BANNER_THEME.UPSELL, _classNames)),
+    "data-testid": testId
+  }, onDismiss ? React__default.createElement(Inline, {
+    flex: [1],
+    alignItems: "center"
+  }, React__default.createElement(BannerContent, null), React__default.createElement(Button$1, {
+    theme: "link-contrast",
+    onClick: onDismiss
+  }, React__default.createElement(IconTimes, null))) : React__default.createElement(BannerContent, null));
+};
+
+var styles$L = {"badge":"_2f81N","badge--warning":"_2g1GI","badge--danger":"_2zLnM","badge--success":"_27QOo","badge--info":"_2gmsM"};
 
-var _excluded$29 = ["children", "theme", "title", "testId"];
+var _excluded$2a = ["children", "theme", "title", "testId"];
 
 var Badge = function Badge(_ref, forwardedRef) {
   var _classnames;
@@ -7813,7 +8327,7 @@ var Badge = function Badge(_ref, forwardedRef) {
       theme = _ref.theme,
       title = _ref.title,
       testId = _ref.testId,
-      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$29);
+      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2a);
 
   var internalRef = React.useRef(null);
   var ref = forwardedRef || internalRef;
@@ -7826,7 +8340,7 @@ var Badge = function Badge(_ref, forwardedRef) {
     overlay: title,
     ref: ref
   }, React__default.createElement("div", Object.assign({
-    className: classnames(styles$E['badge'], (_classnames = {}, _classnames[styles$E['badge--success']] = theme === 'success', _classnames[styles$E['badge--danger']] = theme === 'danger', _classnames[styles$E['badge--info']] = theme === 'info', _classnames[styles$E['badge--warning']] = theme === 'warning', _classnames)),
+    className: classnames(styles$L['badge'], (_classnames = {}, _classnames[styles$L['badge--success']] = theme === 'success', _classnames[styles$L['badge--danger']] = theme === 'danger', _classnames[styles$L['badge--info']] = theme === 'info', _classnames[styles$L['badge--warning']] = theme === 'warning', _classnames)),
     ref: ref,
     "data-testid": testId
   }, otherProps), children));
@@ -7834,9 +8348,9 @@ var Badge = function Badge(_ref, forwardedRef) {
 
 var Badge$1 = React.forwardRef(Badge);
 
-var styles$F = {"avatar":"_2wJGB","avatar--small":"_3QTSo","avatar__badge":"_2Rl8S","avatar--medium":"_1zwj0","avatar--large":"_3-U6x","avatar--extra-large":"_3qn2q"};
+var styles$M = {"avatar":"_2wJGB","avatar--small":"_3QTSo","avatar__badge":"_2Rl8S","avatar--medium":"_1zwj0","avatar--large":"_3-U6x","avatar--extra-large":"_3qn2q"};
 
-var styles$G = {"avatar-image":"_GKL9P"};
+var styles$N = {"avatar-image":"_GKL9P"};
 
 var AvatarImage = function AvatarImage(_ref) {
   var url = _ref.url,
@@ -7861,7 +8375,7 @@ var AvatarImage = function AvatarImage(_ref) {
   }
 
   return React__default.createElement("div", {
-    className: styles$G['avatar-image']
+    className: styles$N['avatar-image']
   }, React__default.createElement(IconUserSolid, {
     size: "flexible",
     color: color
@@ -7930,7 +8444,7 @@ var Avatar = function Avatar(_ref) {
 
   var backgroundColor = url ? GREY200 : color;
   return React__default.createElement("div", {
-    className: classnames(styles$F['avatar'], (_classnames = {}, _classnames[styles$F['avatar--small']] = size === 'small', _classnames[styles$F['avatar--medium']] = size === 'medium', _classnames[styles$F['avatar--large']] = size === 'large', _classnames[styles$F['avatar--extra-large']] = size === 'extra-large', _classnames)),
+    className: classnames(styles$M['avatar'], (_classnames = {}, _classnames[styles$M['avatar--small']] = size === 'small', _classnames[styles$M['avatar--medium']] = size === 'medium', _classnames[styles$M['avatar--large']] = size === 'large', _classnames[styles$M['avatar--extra-large']] = size === 'extra-large', _classnames)),
     style: {
       backgroundColor: children || url && !showIconInsteadOfImage ? backgroundColor : defaultProfilePictureColors.backgroundColor
     },
@@ -7943,7 +8457,7 @@ var Avatar = function Avatar(_ref) {
       return setShowIconInsteadOfImage(true);
     }
   }), badge && size !== 'small' && React__default.createElement("div", {
-    className: styles$F['avatar__badge']
+    className: styles$M['avatar__badge']
   }, badge));
 };
 
@@ -7956,7 +8470,7 @@ var CHIP_THEME = {
   DANGER: 'danger'
 };
 
-var styles$H = {"chip":"_1fIeV","chip--marketing":"_V4byU","chip--success":"_37gN9","chip--upsell":"_Tw7tp","chip--warning":"_t94VZ","chip--info":"_3SmeO","chip--danger":"_2eoX0"};
+var styles$O = {"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;
@@ -7967,11 +8481,11 @@ var Chip = function Chip(_ref) {
       testId = _ref.testId;
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$H['chip'], (_classnames = {}, _classnames[styles$H['chip--marketing']] = theme === CHIP_THEME.MARKETING, _classnames[styles$H['chip--success']] = theme === CHIP_THEME.SUCCESS, _classnames[styles$H['chip--upsell']] = theme === CHIP_THEME.UPSELL, _classnames[styles$H['chip--warning']] = theme === CHIP_THEME.WARNING, _classnames[styles$H['chip--info']] = theme === CHIP_THEME.INFO, _classnames[styles$H['chip--danger']] = theme === CHIP_THEME.DANGER, _classnames))
+    className: classnames(styles$O['chip'], (_classnames = {}, _classnames[styles$O['chip--marketing']] = theme === CHIP_THEME.MARKETING, _classnames[styles$O['chip--success']] = theme === CHIP_THEME.SUCCESS, _classnames[styles$O['chip--upsell']] = theme === CHIP_THEME.UPSELL, _classnames[styles$O['chip--warning']] = theme === CHIP_THEME.WARNING, _classnames[styles$O['chip--info']] = theme === CHIP_THEME.INFO, _classnames[styles$O['chip--danger']] = theme === CHIP_THEME.DANGER, _classnames))
   }, children);
 };
 
-var styles$I = {"pill":"_23q4Y","pill--default":"_niDEM","pill--success":"_IwDRB","pill--danger":"_MPji-","pill--warning":"_3S2m8","pill--info":"_2G3ML"};
+var styles$P = {"pill":"_23q4Y","pill--default":"_niDEM","pill--success":"_IwDRB","pill--danger":"_MPji-","pill--warning":"_3S2m8","pill--info":"_2G3ML"};
 
 var PILL_THEME = {
   INFO: 'info',
@@ -7990,38 +8504,10 @@ var Pill = function Pill(_ref) {
       testId = _ref.testId;
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$I['pill'], (_classnames = {}, _classnames[styles$I['pill--default']] = theme === PILL_THEME.DEFAULT, _classnames[styles$I['pill--warning']] = theme === PILL_THEME.WARNING, _classnames[styles$I['pill--success']] = theme === PILL_THEME.SUCCESS, _classnames[styles$I['pill--danger']] = theme === PILL_THEME.DANGER, _classnames[styles$I['pill--info']] = theme === PILL_THEME.INFO, _classnames))
+    className: classnames(styles$P['pill'], (_classnames = {}, _classnames[styles$P['pill--default']] = theme === PILL_THEME.DEFAULT, _classnames[styles$P['pill--warning']] = theme === PILL_THEME.WARNING, _classnames[styles$P['pill--success']] = theme === PILL_THEME.SUCCESS, _classnames[styles$P['pill--danger']] = theme === PILL_THEME.DANGER, _classnames[styles$P['pill--info']] = theme === PILL_THEME.INFO, _classnames))
   }, children);
 };
 
-var styles$J = {"card":"_29ZIp","card__body":"_3Q8NT","card__body--interactive":"_2Fah6","card--focus":"_SGno0","card__body--focus":"_1zqRN","card__body--with-kebab":"_3Hwms","card__kebab":"_TmEUS"};
-
-var Card = function Card(_ref) {
-  var _classnames, _classnames2;
-
-  var children = _ref.children,
-      onClick = _ref.onClick,
-      _ref$isSelected = _ref.isSelected,
-      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
-      actions = _ref.actions,
-      testId = _ref.testId;
-  return React__default.createElement("div", {
-    className: classnames(styles$J['card'])
-  }, onClick ? React__default.createElement("button", {
-    className: classnames(styles$J['card__body'], styles$J['card__body--interactive'], (_classnames = {}, _classnames[styles$J['card__body--focus']] = isSelected, _classnames[styles$J['card__body--with-kebab']] = actions, _classnames)),
-    "data-testid": testId,
-    tabIndex: 0,
-    onClick: onClick
-  }, children) : React__default.createElement("div", {
-    className: classnames(styles$J['card__body'], (_classnames2 = {}, _classnames2[styles$J['card__body--focus']] = isSelected, _classnames2[styles$J['card__body--with-kebab']] = actions, _classnames2)),
-    "data-testid": testId
-  }, children), actions && React__default.createElement("div", {
-    className: classnames(styles$J['card__kebab'])
-  }, React__default.createElement(KebabMenu, {
-    actions: actions
-  })));
-};
-
 exports.AsyncSelectField = AsyncSelectField;
 exports.Avatar = Avatar;
 exports.Badge = Badge$1;
@@ -8036,6 +8522,7 @@ exports.DataTableCell = DataTableCell;
 exports.DataTableEditableCell = DataTableEditableCell;
 exports.DataTableRow = DataTableRow;
 exports.DateField = DateField;
+exports.DateFilter = DateFilter;
 exports.DateRangeField = DateRangeField;
 exports.Form = Form;
 exports.FormRow = FormRow;
@@ -8167,6 +8654,7 @@ exports.IconVolumeMute = IconVolumeMute;
 exports.IconWrench = IconWrench;
 exports.Inline = Inline;
 exports.InlineBanner = InlineBanner;
+exports.Link = Link;
 exports.Modal = Modal;
 exports.ModalBody = ModalBody;
 exports.ModalFooter = ModalFooter;
@@ -8174,6 +8662,7 @@ exports.MultiSelectField = MultiSelectField;
 exports.PaginationControls = PaginationControls;
 exports.PasswordField = PasswordField;
 exports.PercentageField = PercentageField;
+exports.PersistentBanner = PersistentBanner;
 exports.Pill = Pill;
 exports.PillSelectField = PillSelectField;
 exports.RadioGroupField = RadioGroupField;
@@ -8186,6 +8675,7 @@ exports.SIZE_50_PERCENT = SIZE_50_PERCENT;
 exports.SIZE_66_PERCENT = SIZE_66_PERCENT;
 exports.SIZE_75_PERCENT = SIZE_75_PERCENT;
 exports.SelectField = SelectField;
+exports.SousChefProvider = SousChefProvider;
 exports.Spinner = Spinner;
 exports.Stack = Stack;
 exports.TextAreaField = TextAreaField;
@@ -8195,4 +8685,5 @@ exports.Toggle = Toggle;
 exports.ToolbarSelect = ToolbarSelect;
 exports.Tooltip = Tooltip$1;
 exports.WeekField = WeekField;
+exports.toast = toast;
 //# sourceMappingURL=index.js.map