@7shifts/sous-chef 2.17.1 → 2.18.0

package/dist/index.modern.js

@@ -1,6 +1,8 @@
-import React__default, { createContext, useContext, useState, useRef, createElement, useEffect, useCallback, forwardRef, Fragment, Children, useMemo, useLayoutEffect } from 'react';
+import React__default, { createElement, useRef, useEffect, useCallback, useState, forwardRef, Fragment, Children, createContext, useContext, useMemo, useLayoutEffect } from 'react';
 import classnames from 'classnames';
+import { toast as toast$1, ToastContainer as ToastContainer$1, Slide } from 'react-toastify';
 import ReactDOM from 'react-dom';
+import 'react-toastify/dist/ReactToastify.css';
 import ReactModal from 'react-modal';
 import DayPicker, { DateUtils } from 'react-day-picker';
 import 'react-day-picker/lib/style.css';
@@ -48,71 +50,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var initialValue = {};
-var Context = createContext(initialValue);
-var useResourceTableContext = function useResourceTableContext() {
-  var context = 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 = useState(false),
-      isOpen = _useState[0],
-      setIsOpen = _useState[1];
-
-  var triggerRef = 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":"_3-eyQ","align-center":"_kf0KG","align-end":"_3xCGO","align-start":"_3R2c9","justify-center":"_Zvv8e","justify-end":"_2hBMj","justify-space-between":"_3hKWn","justify-start":"_3ACwY","inline-flex":"_2pujZ"};
+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;
@@ -135,7 +73,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", {
@@ -158,6 +96,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 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"
@@ -374,19 +357,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 createElement(Flex, Object.assign({}, props, {
-    alignItems: alignItems,
-    direction: "column"
-  }));
-};
-
 var useIsMounted = function useIsMounted() {
   var isMounted = useRef(false);
   useEffect(function () {
@@ -629,7 +599,7 @@ var Tooltip = function Tooltip(_ref, forwardedRef) {
 
 var Tooltip$1 = 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',
@@ -642,6 +612,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',
@@ -659,7 +630,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;
@@ -672,6 +643,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,
@@ -689,7 +661,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,
@@ -709,6 +682,7 @@ var Button = function Button(_ref, ref) {
 var ButtonElement = forwardRef(function (_ref2, ref) {
   var id = _ref2.id,
       onClick = _ref2.onClick,
+      onKeyDown = _ref2.onKeyDown,
       className = _ref2.className,
       type = _ref2.type,
       disabled = _ref2.disabled,
@@ -720,6 +694,7 @@ var ButtonElement = forwardRef(function (_ref2, ref) {
   var commonProps = {
     id: id,
     onClick: onClick,
+    onKeyDown: onKeyDown,
     className: className,
     disabled: disabled
   };
@@ -740,89 +715,6 @@ var ButtonElement = forwardRef(function (_ref2, ref) {
 });
 var Button$1 = 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 = useRef(null);
-
-  var _useMenuContext = useMenuContext(),
-      isOpen = _useMenuContext.isOpen,
-      onToggleMenu = _useMenuContext.onToggleMenu,
-      triggerRef = _useMenuContext.triggerRef;
-
-  var _useState = useState({}),
-      position = _useState[0],
-      setPosition = _useState[1];
-
-  var clickOutisideCallback = useCallback(function () {
-    if (isOpen) {
-      onToggleMenu();
-    }
-  }, [isOpen]);
-  useOnClickOutside(paneElement, clickOutisideCallback);
-  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',
@@ -3858,55 +3750,353 @@ var IconWrench = function IconWrench(_ref) {
 
 IconWrench.displayName = 'IconWrench';
 
-var styles$6 = {"item":"_3DlpO","selected":"_NS-B9","clickable":"_2jPpF","item-column":"_3ENNn","actions":"_1FTaE"};
+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":"_28AYq","header-item":"_3-nHz","header-item--sortable":"_2Rh0i","header-item--action":"_2fGMK","header-sort-icon":"_W7CnY","body":"_2ygIH","footer":"_2cqhY"};
+  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 = {};
+  }
+
+  toast$1(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(ToastContainer$1, {
+    bodyClassName: styles$8['toast__text'],
+    hideProgressBar: true,
+    draggable: false,
+    transition: 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(Fragment, null, React__default.createElement(ToastContainer, null), children);
+};
+
+var initialValue = {};
+var Context = createContext(initialValue);
+var useResourceTableContext = function useResourceTableContext() {
+  var context = 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 = useState(false),
+      isOpen = _useState[0],
+      setIsOpen = _useState[1];
+
+  var triggerRef = 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 = useRef(null);
+
+  var _useMenuContext = useMenuContext(),
+      isOpen = _useMenuContext.isOpen,
+      onToggleMenu = _useMenuContext.onToggleMenu,
+      triggerRef = _useMenuContext.triggerRef;
+
+  var _useState = useState({}),
+      position = _useState[0],
+      setPosition = _useState[1];
+
+  var clickOutisideCallback = useCallback(function () {
+    if (isOpen) {
+      onToggleMenu();
+    }
+  }, [isOpen]);
+  useOnClickOutside(paneElement, clickOutisideCallback);
+  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';
@@ -3949,14 +4139,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
       },
@@ -3970,12 +4160,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'])
   }));
 };
 
@@ -4013,75 +4203,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,
@@ -4121,7 +4242,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, {
@@ -4134,7 +4255,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,
@@ -4168,49 +4289,17 @@ var initialValue$1 = {
 };
 var Context$1 = createContext(initialValue$1);
 var useDataTableContext = function useDataTableContext() {
-  var context = 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":"_1d8Ci","selected":"_3tb7U","clickable":"_thFcO","item-column":"_OTcMc","item-column--default-padding":"_lNHQ8","item-column--right-align":"_13YLe","item-column--vertical-border":"_1rrRr","actions":"_azbIG"};
-
-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 = 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) {
@@ -4230,7 +4319,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({
@@ -4263,7 +4352,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;
@@ -4271,7 +4360,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
       },
@@ -4296,7 +4385,7 @@ var DataTableRowComponent = function DataTableRowComponent(_ref, ref) {
 
 var DataTableRow = forwardRef(DataTableRowComponent);
 
-var styles$b = {"header":"_of22N","header-item":"_27x4v","header-item--sortable":"_3gw3Z","header-item--right-align":"_Fjm2n","header-item--action":"_LoIvx","header-sort-icon":"_3VjFP","body":"_1bTmd","footer":"_1opWx","pagination-controls":"_F_spz"};
+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',
@@ -4327,7 +4416,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;
 
@@ -4335,7 +4424,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
       },
@@ -4349,12 +4438,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'])
   }));
 };
 
@@ -4435,7 +4524,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
@@ -4449,10 +4538,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,
@@ -4480,7 +4569,7 @@ var DefaultItemComponent$1 = function DefaultItemComponent(_ref2) {
   }));
 };
 
-var styles$c = {"data-table-cell":"_orjDM","data-table-cell--right-aligned":"_3EpfF"};
+var styles$e = {"data-table-cell":"_2Ybjx","data-table-cell--right-aligned":"_1cXj6"};
 
 var DataTableCell = function DataTableCell(_ref) {
   var _columns$columnIndex, _classnames;
@@ -4494,7 +4583,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);
 };
 
@@ -4610,9 +4699,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,
@@ -4624,12 +4713,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));
 };
 
@@ -4670,14 +4759,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,
@@ -4715,7 +4804,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;
@@ -4728,13 +4817,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,
@@ -4758,7 +4847,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)));
@@ -4787,7 +4876,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",
@@ -4796,9 +4885,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(), {
@@ -4921,7 +5010,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
@@ -4987,6 +5076,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);
     }),
@@ -4995,7 +5085,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;
@@ -5056,7 +5146,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) {
@@ -5069,25 +5159,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"
@@ -5116,7 +5206,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;
@@ -5154,24 +5244,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":"_kIngZ","data-table-editable-cell--right-aligned":"_3_QIj","data-table-editable-cell--currency":"_2Kyuc","data-table-editable-cell--invalid":"_y9SBQ","data-table-editable-cell--top-left":"_32mWH","data-table-editable-cell--top-right":"_3Jg2-","data-table-editable-cell--bottom-left":"_1F5fj","data-table-editable-cell--bottom-right":"_1fTTW"};
+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,
@@ -5211,12 +5301,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,
@@ -5224,7 +5315,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,
@@ -5237,6 +5328,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) {
@@ -5245,7 +5346,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;
@@ -5259,10 +5361,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);
@@ -5276,6 +5390,10 @@ var useSelectFieldControllers = function useSelectFieldControllers(_ref) {
           _onChange(option);
         }
 
+        if (_onChange && onMenuInputFocus) {
+          onMenuInputFocus(false);
+        }
+
         formik.setFieldValue(name, option);
       },
       onBlur: function onBlur(option) {
@@ -5283,6 +5401,10 @@ var useSelectFieldControllers = function useSelectFieldControllers(_ref) {
           _onBlur(option);
         }
 
+        if (_onBlur && onMenuInputFocus) {
+          onMenuInputFocus(false);
+        }
+
         formik.setFieldTouched(name);
       }
     });
@@ -5422,7 +5544,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 = useRef(null);
+
+  var _useState = useState(false),
+      calendarOpen = _useState[0],
+      setCalendarOpen = _useState[1];
+
+  var _useState2 = 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;
@@ -5448,12 +5764,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%';
@@ -5484,7 +5800,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,
@@ -5493,7 +5809,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 = useRef(null);
@@ -5569,7 +5885,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)) {
@@ -5601,7 +5917,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) {
@@ -5614,7 +5930,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;
@@ -5653,7 +5969,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,
@@ -5750,7 +6066,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,
@@ -5780,7 +6096,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,
@@ -5793,12 +6109,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, {
@@ -5806,7 +6122,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,
@@ -5898,7 +6214,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,
@@ -5920,7 +6236,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));
   })));
 };
@@ -5968,9 +6284,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,
@@ -5985,7 +6301,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,
@@ -5996,7 +6312,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",
@@ -6005,13 +6321,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,
@@ -6030,7 +6346,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,
@@ -6041,11 +6357,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)));
@@ -6180,7 +6496,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, {
@@ -6193,9 +6509,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;
@@ -6203,7 +6519,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, {
@@ -6288,11 +6604,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",
@@ -6304,7 +6620,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",
@@ -6563,7 +6879,7 @@ var MultiSelectField = function MultiSelectField(_ref) {
   }));
 };
 
-var styles$z = {"custom-control":"_1cDCR"};
+var styles$D = {"custom-control":"_1cDCR"};
 
 var _excluded$23 = ["children"];
 
@@ -6576,7 +6892,7 @@ function CustomControl(_ref) {
   var SelectedOptionPrefix = props.selectProps.componentsProps.SelectedOptionPrefix;
   var selectedOption = (_props$getValue = props.getValue()) === null || _props$getValue === void 0 ? void 0 : _props$getValue[0];
   return React__default.createElement(components.Control, Object.assign({}, props), SelectedOptionPrefix && selectedOption ? React__default.createElement("div", {
-    className: styles$z['custom-control'],
+    className: styles$D['custom-control'],
     style: {
       paddingLeft: selectedOption ? 8 : 0
     }
@@ -6589,6 +6905,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 = useState(false),
+      showFooter = _useState[0],
+      setShowFooter = _useState[1];
+
+  var textFieldRef = useRef(null);
+  var containerRef = 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(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,
@@ -6611,14 +7034,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 = 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 () {
@@ -6635,12 +7070,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 : components.Option,
-      Control: SelectedOptionPrefix ? CustomControl : components.Control
+      Control: SelectedOptionPrefix ? CustomControl : components.Control,
+      Menu: onCreate ? CustomMenu : components.Menu
     },
     inputId: controllers.id,
     isClearable: isClearable,
@@ -6659,7 +7098,8 @@ var useSelectField = function useSelectField(_ref) {
       asToolbarFilter: asToolbarFilter
     }),
     value: controllers.value,
-    defaultValue: defaultValue
+    defaultValue: defaultValue,
+    menuIsOpen: isMenuInputFocus || undefined
   };
   var fieldProps = {
     caption: caption,
@@ -6684,15 +7124,15 @@ var SelectField = function SelectField(props) {
   }, React__default.createElement(Select, 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;
 
@@ -6703,15 +7143,15 @@ var CustomList = function CustomList(_ref) {
   return React__default.createElement(components.MenuList, Object.assign({}, props), React__default.createElement(Fragment, null, children, showFooter && React__default.createElement(Inline, {
     justifyContent: "center"
   }, React__default.createElement("div", {
-    className: styles$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 = useState(false),
       hasMoreOptions = _useState[0],
@@ -6932,7 +7372,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));
     },
@@ -6950,7 +7390,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(),
@@ -7059,7 +7499,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,
@@ -7097,7 +7537,7 @@ var FromDate = function FromDate(_ref) {
   }
 
   var dayPickerProps = {
-    classNames: styles$B,
+    classNames: styles$G,
     months: MONTH_NAMES,
     weekdaysLong: DAYS,
     weekdaysShort: DAYS.map(function (day) {
@@ -7124,7 +7564,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,
@@ -7197,7 +7637,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) {
@@ -7216,7 +7656,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,
@@ -7301,7 +7741,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",
@@ -7426,7 +7866,7 @@ var WeekField = function WeekField(_ref) {
   };
 
   var dayPickerProps = {
-    classNames: styles$i,
+    classNames: styles$k,
     disabledDays: function disabledDays(day) {
       return _disabledDays && _disabledDays(setToMidnight(day));
     },
@@ -7456,7 +7896,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(),
@@ -7495,14 +7935,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,
@@ -7523,12 +7963,12 @@ var TimeFieldElement = function TimeFieldElement(_ref, ref) {
 
 var TimeField = 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
@@ -7561,7 +8001,7 @@ var CurrencyFieldElement = function CurrencyFieldElement(_ref, ref) {
 
 var CurrencyField = 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,
@@ -7572,7 +8012,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
@@ -7664,7 +8104,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,
@@ -7687,7 +8127,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,
@@ -7699,7 +8139,7 @@ var InlineBannerCTA = function InlineBannerCTA(_ref) {
     space: 12,
     "data-testid": "banner_ctas"
   }, multiLine ? React__default.createElement(Inline, {
-    flexWrap: 'wrap',
+    flexWrap: "wrap",
     space: 12
   }, React__default.createElement(ButtonCTA, {
     button: primaryButton,
@@ -7709,7 +8149,7 @@ var InlineBannerCTA = function InlineBannerCTA(_ref) {
     button: secondaryButton,
     bannerTheme: bannerTheme
   })) : React__default.createElement(Inline, {
-    flexWrap: 'wrap',
+    flexWrap: "wrap",
     space: 12
   }, secondaryButton && React__default.createElement(ButtonCTA, {
     button: secondaryButton,
@@ -7719,7 +8159,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));
 };
 
@@ -7762,13 +8202,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, {
@@ -7776,12 +8216,12 @@ var InlineBanner = function InlineBanner(_ref) {
     alignItems: multiLine ? undefined : 'center',
     space: multiLine ? 8 : 12,
     "data-testid": "banner-body-container",
-    flex: ["min-content"],
+    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,
@@ -7789,7 +8229,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",
@@ -7797,9 +8237,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;
+  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;
@@ -7808,7 +8322,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 = useRef(null);
   var ref = forwardedRef || internalRef;
@@ -7821,7 +8335,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));
@@ -7829,9 +8343,9 @@ var Badge = function Badge(_ref, forwardedRef) {
 
 var Badge$1 = 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,
@@ -7856,7 +8370,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
@@ -7925,7 +8439,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
     },
@@ -7938,7 +8452,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));
 };
 
@@ -7951,7 +8465,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;
@@ -7962,11 +8476,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',
@@ -7985,37 +8499,9 @@ 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
-  })));
-};
-
-export { AsyncSelectField, Avatar, Badge$1 as Badge, Button$1 as Button, Calendar, Card, CheckboxField, Chip, CurrencyField, DataTable, DataTableCell, DataTableEditableCell, DataTableRow, DateField, DateRangeField, Form, FormRow, IconAnalytics, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowToTop, IconArrowUp, IconAward, IconBalanceScale, IconBalanceScaleLeft, IconBan, IconBarsH, IconBarsV, IconBell, IconBirthdayCake, IconBold, IconBolt, IconBook, IconBriefcase, IconBullseyeArrow, IconCalculator, IconCalendar, IconCalendarAlt, IconCalendarCheck, IconCalendarDay, IconCalendarExclamation, IconCalendarStar, IconCalendarTomorrow, IconCamera, IconCameraSlash, IconCashRegister, IconChartBar, IconCheck, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconClipboardList, IconClock, IconCog, IconComment, IconCommentLines, IconCopy, IconCreditCard, IconCreditCardPlus, IconDownload, IconEdit, IconEllipsisV, IconEnvelope, IconExclaimation, IconExclaimationTriangle, IconExpand, IconExternalLink, IconEye, IconEyeSlash, IconFile, IconFilePdf, IconFlag, IconFourDotsCircle, IconFourSquares, IconGavel, IconGif, IconGift, IconGrinBeam, IconGripVertical, IconHandshake, IconImage, IconInfoCircle, IconIslandTropical, IconItalic, IconLaptopSearch, IconLink, IconList, IconListOI as IconListOi, IconLock, IconMagicSolid, IconMapMarker, IconMegaphone, IconMinus, IconMinusCircle, IconMoneyBill, IconNotesMedical, IconOvertime, IconPaperPlane, IconPaperPlaneClock, IconPaperclip, IconPencil, IconPercentage, IconPhone, IconPlug, IconPlus, IconPrint, IconQuestionCircle, IconRepeat, IconReply, IconSearch, IconSignOut, IconSitemap, IconSlidersH, IconSort, IconStar, IconStarSolid, IconStickyNoteLines, IconStopwatch, IconStrikethrough, IconSync, IconSyncExclaimation, IconTachometer, IconTimes, IconTimesOctagon, IconTrash, IconUnderline, IconUndo, IconUniversity, IconUserComputer, IconUserFriends, IconUserLight, IconUserPlus, IconUserSlash, IconUserSolid, IconUserTag, IconUserTie, IconUsers, IconVideo, IconVolume, IconVolumeMute, IconWrench, Inline, InlineBanner, Modal, ModalBody, ModalFooter, MultiSelectField, PaginationControls, PasswordField, PercentageField, Pill, PillSelectField, RadioGroupField, RadioGroupOption, ResourceTable, ResourceTableRow, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT, SelectField, Spinner, Stack, TextAreaField, TextField, TimeField, Toggle, ToolbarSelect, Tooltip$1 as Tooltip, WeekField };
+export { AsyncSelectField, Avatar, Badge$1 as Badge, Button$1 as Button, Calendar, Card, CheckboxField, Chip, CurrencyField, DataTable, DataTableCell, DataTableEditableCell, DataTableRow, DateField, DateFilter, DateRangeField, Form, FormRow, IconAnalytics, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowToTop, IconArrowUp, IconAward, IconBalanceScale, IconBalanceScaleLeft, IconBan, IconBarsH, IconBarsV, IconBell, IconBirthdayCake, IconBold, IconBolt, IconBook, IconBriefcase, IconBullseyeArrow, IconCalculator, IconCalendar, IconCalendarAlt, IconCalendarCheck, IconCalendarDay, IconCalendarExclamation, IconCalendarStar, IconCalendarTomorrow, IconCamera, IconCameraSlash, IconCashRegister, IconChartBar, IconCheck, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconClipboardList, IconClock, IconCog, IconComment, IconCommentLines, IconCopy, IconCreditCard, IconCreditCardPlus, IconDownload, IconEdit, IconEllipsisV, IconEnvelope, IconExclaimation, IconExclaimationTriangle, IconExpand, IconExternalLink, IconEye, IconEyeSlash, IconFile, IconFilePdf, IconFlag, IconFourDotsCircle, IconFourSquares, IconGavel, IconGif, IconGift, IconGrinBeam, IconGripVertical, IconHandshake, IconImage, IconInfoCircle, IconIslandTropical, IconItalic, IconLaptopSearch, IconLink, IconList, IconListOI as IconListOi, IconLock, IconMagicSolid, IconMapMarker, IconMegaphone, IconMinus, IconMinusCircle, IconMoneyBill, IconNotesMedical, IconOvertime, IconPaperPlane, IconPaperPlaneClock, IconPaperclip, IconPencil, IconPercentage, IconPhone, IconPlug, IconPlus, IconPrint, IconQuestionCircle, IconRepeat, IconReply, IconSearch, IconSignOut, IconSitemap, IconSlidersH, IconSort, IconStar, IconStarSolid, IconStickyNoteLines, IconStopwatch, IconStrikethrough, IconSync, IconSyncExclaimation, IconTachometer, IconTimes, IconTimesOctagon, IconTrash, IconUnderline, IconUndo, IconUniversity, IconUserComputer, IconUserFriends, IconUserLight, IconUserPlus, IconUserSlash, IconUserSolid, IconUserTag, IconUserTie, IconUsers, IconVideo, IconVolume, IconVolumeMute, IconWrench, Inline, InlineBanner, Link, Modal, ModalBody, ModalFooter, MultiSelectField, PaginationControls, PasswordField, PercentageField, PersistentBanner, Pill, PillSelectField, RadioGroupField, RadioGroupOption, ResourceTable, ResourceTableRow, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT, SelectField, SousChefProvider, Spinner, Stack, TextAreaField, TextField, TimeField, Toggle, ToolbarSelect, Tooltip$1 as Tooltip, WeekField, toast };
 //# sourceMappingURL=index.modern.js.map