@7shifts/sous-chef 2.11.0 → 2.12.2

package/dist/index.js

@@ -6,6 +6,8 @@ var classnames = _interopDefault(require('classnames'));
 var ReactDOM = _interopDefault(require('react-dom'));
 var Select = require('react-select');
 var Select__default = _interopDefault(Select);
+var AsyncSelect = _interopDefault(require('react-select/async'));
+var lodashEs = require('lodash-es');
 var DayPickerInput = _interopDefault(require('react-day-picker/DayPickerInput'));
 var dateFns = require('date-fns');
 var DayPicker = require('react-day-picker');
@@ -3217,7 +3219,7 @@ var getLocalTranslation = function getLocalTranslation(key) {
 
   if (translationParts.length > 1) {
     var literal = translationParts[1];
-    return literal.charAt(0).toUpperCase() + literal.slice(1).toLowerCase();
+    return literal.charAt(0).toUpperCase() + literal.slice(1).toLowerCase().replace(/_/g, ' ');
   }
 
   return key;
@@ -4941,10 +4943,20 @@ var getSelectStyles$1 = function getSelectStyles(_ref) {
     },
     noOptionsMessage: function noOptionsMessage() {
       return {
-        color: GREY500,
+        color: GREY400,
         textAlign: 'center',
         padding: '8px',
-        fontFamily: FONT_FAMILY
+        fontFamily: FONT_FAMILY,
+        fontSize: '14px'
+      };
+    },
+    loadingMessage: function loadingMessage() {
+      return {
+        color: GREY400,
+        textAlign: 'center',
+        padding: '8px',
+        fontFamily: FONT_FAMILY,
+        fontSize: '14px'
       };
     },
     singleValue: function singleValue(base, state) {
@@ -5126,7 +5138,7 @@ function CustomControl(_ref) {
       props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
 
   var selectedOption = (_props$getValue = props.getValue()) === null || _props$getValue === void 0 ? void 0 : _props$getValue[0];
-  return React__default.createElement(Select.components.Control, Object.assign({}, props), CustomControl && selectedOption ? React__default.createElement("div", {
+  return React__default.createElement(Select.components.Control, Object.assign({}, props), CustomPrefixComponent && selectedOption ? React__default.createElement("div", {
     className: styles$r['custom-control'],
     style: {
       paddingLeft: selectedOption ? 8 : 0
@@ -5150,13 +5162,13 @@ function CustomOption$1(_ref) {
   return React__default.createElement(Select.components.Option, Object.assign({}, props), React__default.createElement(CustomComponent, Object.assign({}, props), children));
 }
 
-var SelectField = function SelectField(_ref) {
+var useSelectField = function useSelectField(_ref) {
   var _ref$asToolbarFilter = _ref.asToolbarFilter,
       asToolbarFilter = _ref$asToolbarFilter === void 0 ? false : _ref$asToolbarFilter,
       caption = _ref.caption,
       disabled = _ref.disabled,
       error = _ref.error,
-      inputId = _ref.id,
+      id = _ref.id,
       _ref$isClearable = _ref.isClearable,
       isClearable = _ref$isClearable === void 0 ? false : _ref$isClearable,
       label = _ref.label,
@@ -5168,32 +5180,22 @@ var SelectField = function SelectField(_ref) {
       onBlur = _ref.onBlur,
       onChange = _ref.onChange,
       placeholder = _ref.placeholder,
-      prefix = _ref.prefix,
       value = _ref.value,
       UserCustomOption = _ref.CustomOption,
       SelectedOptionPrefix = _ref.SelectedOptionPrefix;
   var controllers = useSelectFieldControllers({
     error: error,
-    id: inputId,
+    id: id,
     name: name,
     onChange: onChange,
     onBlur: onBlur,
     value: value
   });
   var hasError = !!controllers.error;
-  var fieldProps = {
-    caption: caption,
-    error: controllers.error,
-    id: controllers.id,
-    label: label,
-    name: name
-  };
   var defaultNoOptionsMessage = noOptionsMessage && typeof noOptionsMessage === 'string' ? function () {
     return noOptionsMessage;
   } : undefined;
-  return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(AffixContainer, {
-    prefix: prefix
-  }, React__default.createElement(Select__default, {
+  var selectProps = {
     closeMenuOnScroll: function closeMenuOnScroll(e) {
       if (menuShouldScrollIntoView || !e.target) {
         return false;
@@ -5230,7 +5232,150 @@ var SelectField = function SelectField(_ref) {
       asToolbarFilter: asToolbarFilter
     }),
     value: controllers.value
-  })));
+  };
+  var fieldProps = {
+    caption: caption,
+    error: controllers.error,
+    id: controllers.id,
+    label: label,
+    name: name
+  };
+  return {
+    selectProps: selectProps,
+    fieldProps: fieldProps
+  };
+};
+
+var SelectField = function SelectField(props) {
+  var _useSelectField = useSelectField(props),
+      fieldProps = _useSelectField.fieldProps,
+      selectProps = _useSelectField.selectProps;
+
+  return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(AffixContainer, {
+    prefix: props.prefix
+  }, React__default.createElement(Select__default, Object.assign({}, selectProps))));
+};
+
+var styles$s = {"custom-list":"_uC4zU"};
+
+var _excluded$7 = ["children", "hasMoreOptions", "hasMoreOptionsFirstLoad"];
+
+var CustomList = function CustomList(_ref) {
+  var children = _ref.children,
+      hasMoreOptions = _ref.hasMoreOptions,
+      hasMoreOptionsFirstLoad = _ref.hasMoreOptionsFirstLoad,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+
+  var showFooter = hasMoreOptions;
+
+  if (props.selectProps.inputValue === '' && typeof hasMoreOptionsFirstLoad === 'boolean') {
+    showFooter = hasMoreOptionsFirstLoad;
+  }
+
+  return React__default.createElement(Select.components.MenuList, Object.assign({}, props), React__default.createElement(React.Fragment, null, children, showFooter && React__default.createElement(Inline, {
+    justifyContent: "center"
+  }, React__default.createElement("div", {
+    className: styles$s['custom-list']
+  }, getLocalizedString('main.START_TYPING_TO_SEE_MORE_OPTIONS')))));
+};
+
+var _excluded$8 = ["loadOptions"];
+
+var AsyncSelectField = function AsyncSelectField(_ref) {
+  var loadOptions = _ref.loadOptions,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+
+  var _useState = React.useState(false),
+      hasMoreOptions = _useState[0],
+      setHasMoreOptions = _useState[1];
+
+  var _useState2 = React.useState(),
+      hasMoreOptionsFirstLoad = _useState2[0],
+      setHasMoreOptionsFirstLoad = _useState2[1];
+
+  var _useState3 = React.useState(false),
+      hasFirstLoadPerformed = _useState3[0],
+      setHasFirstLoadPerformed = _useState3[1];
+
+  var _useState4 = React.useState(null),
+      localOptions = _useState4[0],
+      setLocalOptions = _useState4[1];
+
+  var ref = React.useRef(null);
+
+  var handleInternalSearch = function handleInternalSearch(inputValue, callback) {
+    if (!localOptions) {
+      return;
+    }
+
+    var filteredOptions = localOptions.filter(function (option) {
+      return option.label.toLowerCase().includes(inputValue.toLocaleLowerCase());
+    });
+    callback(filteredOptions);
+  };
+
+  var handleLoadOptions = function handleLoadOptions(inputValue, callback) {
+    if (hasMoreOptions) {
+      setHasMoreOptions(false);
+    }
+
+    if (localOptions) {
+      handleInternalSearch(inputValue, callback);
+      return;
+    }
+
+    loadOptions(inputValue).then(function (_ref2) {
+      var _ref$current;
+
+      var hasMore = _ref2.hasMore,
+          options = _ref2.options;
+
+      if (ref.current && inputValue !== (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current['state']['inputValue'])) {
+        return;
+      }
+
+      if (!hasFirstLoadPerformed) {
+        setHasFirstLoadPerformed(true);
+
+        if (!hasMore) {
+          setLocalOptions(options);
+        }
+      }
+
+      setHasMoreOptions(hasMore);
+
+      if (hasMoreOptionsFirstLoad === undefined) {
+        setHasMoreOptionsFirstLoad(hasMore);
+      }
+
+      callback(options);
+    });
+  };
+
+  var _useSelectField = useSelectField(_extends({}, props, {
+    options: []
+  })),
+      fieldProps = _useSelectField.fieldProps,
+      selectProps = _useSelectField.selectProps;
+
+  return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(AffixContainer, {
+    prefix: props.prefix
+  }, React__default.createElement(AsyncSelect, Object.assign({}, selectProps, {
+    components: _extends({}, selectProps.components, {
+      MenuList: function MenuList(props) {
+        return React__default.createElement(CustomList, Object.assign({}, props, {
+          hasMoreOptions: hasMoreOptions,
+          hasMoreOptionsFirstLoad: hasMoreOptionsFirstLoad
+        }));
+      }
+    }),
+    cacheOptions: false,
+    defaultOptions: true,
+    loadOptions: lodashEs.debounce(handleLoadOptions, 500, {
+      leading: true
+    }),
+    ref: ref
+  }))));
 };
 
 var useDateFieldControllers = function useDateFieldControllers(_ref) {
@@ -5524,7 +5669,7 @@ var getFormikError = function getFormikError(error) {
   return undefined;
 };
 
-var styles$s = {"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$t = {"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,
@@ -5562,7 +5707,7 @@ var FromDate = function FromDate(_ref) {
   }
 
   var dayPickerProps = {
-    classNames: styles$s,
+    classNames: styles$t,
     months: MONTH_NAMES,
     weekdaysLong: DAYS,
     weekdaysShort: DAYS.map(function (day) {
@@ -5589,7 +5734,7 @@ var FromDate = function FromDate(_ref) {
   };
   return React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$s,
+    classNames: styles$t,
     selectedDay: start,
     value: start,
     formatDate: formatDate,
@@ -5662,7 +5807,7 @@ var ToDate = function ToDate(_ref, ref) {
   }
 
   var dayPickerProps = {
-    classNames: styles$s,
+    classNames: styles$t,
     months: MONTH_NAMES,
     weekdaysLong: DAYS,
     weekdaysShort: DAYS.map(function (day) {
@@ -5681,7 +5826,7 @@ var ToDate = function ToDate(_ref, ref) {
   };
   return React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$s,
+    classNames: styles$t,
     selectedDay: end,
     value: end,
     formatDate: formatDate,
@@ -5765,7 +5910,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$s['date-range-field'], (_classnames = {}, _classnames[styles$s['date-range-field--invalid']] = hasError, _classnames[styles$s['date-range-field--disabled']] = disabled, _classnames))
+    className: classnames(styles$t['date-range-field'], (_classnames = {}, _classnames[styles$t['date-range-field--invalid']] = hasError, _classnames[styles$t['date-range-field--disabled']] = disabled, _classnames))
   }, React__default.createElement(IconCalendarAlt, {
     size: "medium",
     color: GREY400
@@ -5959,14 +6104,14 @@ var WeekField = function WeekField(_ref) {
   })));
 };
 
-var _excluded$7 = ["placeholder", "autoComplete"];
+var _excluded$9 = ["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$7);
+      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$9);
 
   var _useTextField = useTextField(_extends({}, allOtherProps, {
     placeholder: placeholder,
@@ -5987,12 +6132,12 @@ var TimeFieldElement = function TimeFieldElement(_ref, ref) {
 
 var TimeField = React.forwardRef(TimeFieldElement);
 
-var _excluded$8 = ["currencySymbol"];
+var _excluded$a = ["currencySymbol"];
 
 var CurrencyFieldElement = function CurrencyFieldElement(_ref, ref) {
   var _ref$currencySymbol = _ref.currencySymbol,
       currencySymbol = _ref$currencySymbol === void 0 ? "$" : _ref$currencySymbol,
-      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$a);
 
   var _useTextField = useTextField(_extends({}, allOtherProps, {
     ref: ref
@@ -6025,7 +6170,7 @@ var CurrencyFieldElement = function CurrencyFieldElement(_ref, ref) {
 
 var CurrencyField = React.forwardRef(CurrencyFieldElement);
 
-var _excluded$9 = ["max", "min", "precision", "stepSize"];
+var _excluded$b = ["max", "min", "precision", "stepSize"];
 
 var PercentageElement = function PercentageElement(_ref, ref) {
   var _ref$max = _ref.max,
@@ -6036,7 +6181,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$9);
+      allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$b);
 
   var _useTextField = useTextField(_extends({}, allOtherProps, {
     ref: ref
@@ -6116,9 +6261,148 @@ var PercentageElement = function PercentageElement(_ref, ref) {
 
 var PercentageField = React.forwardRef(PercentageElement);
 
-var styles$t = {"overlay":"_2puqJ","overlay--after-open":"_1167h","overlay--before-close":"_t_t7L","content":"_wQQ_2","content--after-open":"_3jwux","content--before-close":"_2c2QP"};
+var BANNER_THEME = {
+  INFO: 'info',
+  WARNING: 'warning',
+  SUCCESS: 'success',
+  DANGER: 'danger',
+  UPSELL: 'upsell'
+};
+var BUTTON_THEME = {
+  HOLLOW: 'hollow',
+  UPSELL: 'upsell'
+};
+
+var styles$u = {"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,
+      bannerTheme = _ref.bannerTheme,
+      _ref$primaryCTA = _ref.primaryCTA,
+      primaryCTA = _ref$primaryCTA === void 0 ? false : _ref$primaryCTA;
+
+  if (button.type !== Button$1 || button.props.theme) {
+    return button;
+  }
+
+  if (bannerTheme === BANNER_THEME.UPSELL && primaryCTA) {
+    return React__default.cloneElement(button, _extends({
+      theme: BUTTON_THEME.UPSELL
+    }, button.props));
+  }
+
+  return React__default.cloneElement(button, _extends({
+    theme: BUTTON_THEME.HOLLOW
+  }, button.props));
+};
+
+var styles$v = {"banner__caption":"_1jqm8"};
+
+var InlineBannerCTA = function InlineBannerCTA(_ref) {
+  var primaryButton = _ref.primaryButton,
+      secondaryButton = _ref.secondaryButton,
+      caption = _ref.caption,
+      multiLine = _ref.multiLine,
+      bannerTheme = _ref.bannerTheme;
+  return React__default.createElement(Stack, {
+    space: 12,
+    "data-testid": "banner_ctas"
+  }, multiLine ? React__default.createElement(Inline, {
+    space: 12
+  }, React__default.createElement(ButtonCTA, {
+    button: primaryButton,
+    bannerTheme: bannerTheme,
+    primaryCTA: true
+  }), secondaryButton && React__default.createElement(ButtonCTA, {
+    button: secondaryButton,
+    bannerTheme: bannerTheme
+  })) : React__default.createElement(Inline, {
+    space: 12
+  }, secondaryButton && React__default.createElement(ButtonCTA, {
+    button: secondaryButton,
+    bannerTheme: bannerTheme
+  }), React__default.createElement(ButtonCTA, {
+    button: primaryButton,
+    bannerTheme: bannerTheme,
+    primaryCTA: true
+  })), caption && multiLine && React__default.createElement("div", {
+    className: styles$v['banner__caption']
+  }, caption));
+};
+
+var InlineBannerIcon = function InlineBannerIcon(_ref) {
+  var theme = _ref.theme;
+
+  switch (theme) {
+    case BANNER_THEME.INFO:
+      return React__default.createElement(IconInfoCircle, null);
+
+    case BANNER_THEME.WARNING:
+      return React__default.createElement(IconExclaimationTriangle, null);
+
+    case BANNER_THEME.SUCCESS:
+      return React__default.createElement(IconCheck, null);
+
+    case BANNER_THEME.DANGER:
+      return React__default.createElement(IconTimesOctagon, null);
+
+    case BANNER_THEME.UPSELL:
+      return React__default.createElement(IconAward, null);
+  }
+};
+
+var InlineBanner = function InlineBanner(_ref) {
+  var _classnames, _classnames2;
+
+  var children = _ref.children,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? BANNER_THEME.INFO : _ref$theme,
+      title = _ref.title,
+      onClose = _ref.onClose,
+      caption = _ref.caption,
+      primaryButton = _ref.primaryButton,
+      secondaryButton = _ref.secondaryButton;
+  var multiLine = !!title;
+  var dismissable = !!onClose;
+  var Layout = multiLine ? Stack : Inline;
+  return React__default.createElement("div", {
+    "data-testid": "inline_banner",
+    className: classnames(styles$u['banner'], (_classnames = {}, _classnames[styles$u['banner--info']] = theme === BANNER_THEME.INFO, _classnames[styles$u['banner--warning']] = theme === BANNER_THEME.WARNING, _classnames[styles$u['banner--success']] = theme === BANNER_THEME.SUCCESS, _classnames[styles$u['banner--danger']] = theme === BANNER_THEME.DANGER, _classnames[styles$u['banner--upsell']] = theme === BANNER_THEME.UPSELL, _classnames[styles$u['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$u['banner__icon']
+  }, React__default.createElement(InlineBannerIcon, {
+    theme: theme
+  })), React__default.createElement(Layout, {
+    justifyContent: multiLine ? undefined : 'space-between',
+    alignItems: multiLine ? undefined : 'center',
+    space: multiLine ? 8 : 12,
+    "data-testid": "banner-body-container"
+  }, title && React__default.createElement("div", {
+    className: styles$u['banner__title']
+  }, title), React__default.createElement("div", {
+    className: classnames(styles$u['banner__body'], (_classnames2 = {}, _classnames2[styles$u['banner__body--multilineCTA']] = primaryButton && multiLine, _classnames2))
+  }, children), primaryButton && React__default.createElement(InlineBannerCTA, {
+    primaryButton: primaryButton,
+    secondaryButton: secondaryButton,
+    caption: caption,
+    multiLine: multiLine,
+    bannerTheme: theme
+  })), dismissable && React__default.createElement("div", {
+    className: styles$u['banner__close']
+  }, React__default.createElement(Button$1, {
+    theme: "link-icon",
+    type: "button",
+    onClick: onClose
+  }, React__default.createElement(IconTimes, null)))));
+};
+
+var styles$w = {"overlay":"_2puqJ","overlay--after-open":"_1167h","overlay--before-close":"_t_t7L","content":"_wQQ_2","content--after-open":"_3jwux","content--before-close":"_2c2QP"};
 
-var styles$u = {"header":"_36nxW","sub-header":"_2XwRD"};
+var styles$x = {"header":"_36nxW","sub-header":"_2XwRD"};
 
 var ModalHeader = function ModalHeader(_ref) {
   var header = _ref.header,
@@ -6130,12 +6414,12 @@ var ModalHeader = function ModalHeader(_ref) {
     flex: [1],
     alignItems: "center"
   }, React__default.createElement("span", {
-    className: styles$u['header']
+    className: styles$x['header']
   }, header), React__default.createElement(Button$1, {
     theme: "link-icon",
     onClick: onClose
   }, React__default.createElement(IconTimes, null))), subHeader && React__default.createElement("div", {
-    className: styles$u['sub-header']
+    className: styles$x['sub-header']
   }, subHeader));
 };
 
@@ -6171,14 +6455,14 @@ var Modal = function Modal(_ref) {
     contentLabel: "Modal",
     appElement: rootElementId && document.getElementById(rootElementId) || undefined,
     overlayClassName: {
-      base: styles$t['overlay'],
-      afterOpen: styles$t['overlay--after-open'],
-      beforeClose: styles$t['overlay--before-close']
+      base: styles$w['overlay'],
+      afterOpen: styles$w['overlay--after-open'],
+      beforeClose: styles$w['overlay--before-close']
     },
     className: {
-      base: styles$t['content'],
-      afterOpen: styles$t['content--after-open'],
-      beforeClose: styles$t['content--before-close']
+      base: styles$w['content'],
+      afterOpen: styles$w['content--after-open'],
+      beforeClose: styles$w['content--before-close']
     }
   }, React__default.createElement(ModalHeader, {
     header: header,
@@ -6191,16 +6475,16 @@ Modal.setAppElement = function (rootElement) {
   ReactModal.setAppElement(rootElement);
 };
 
-var styles$v = {"modal-body":"_2J-ku"};
+var styles$y = {"modal-body":"_2J-ku"};
 
 var ModalBody = function ModalBody(_ref) {
   var children = _ref.children;
   return React__default.createElement("div", {
-    className: styles$v['modal-body']
+    className: styles$y['modal-body']
   }, children);
 };
 
-var styles$w = {"modal-footer":"_LKOr5","tertiary-container":"_Qktd-"};
+var styles$z = {"modal-footer":"_LKOr5","tertiary-container":"_Qktd-"};
 
 var ModalFooter = function ModalFooter(_ref) {
   var children = _ref.children,
@@ -6221,7 +6505,7 @@ var ModalFooter = function ModalFooter(_ref) {
     return React__default.createElement(FooterContainer, null, React__default.createElement(Inline, {
       justifyContent: "space-between"
     }, React__default.createElement("div", {
-      className: classnames((_classnames = {}, _classnames[styles$w['tertiary-container']] = tertiaryButton && tertiaryButton.props.theme.startsWith('link'), _classnames))
+      className: classnames((_classnames = {}, _classnames[styles$z['tertiary-container']] = tertiaryButton && tertiaryButton.props.theme.startsWith('link'), _classnames))
     }, tertiaryButton || React__default.createElement("div", null)), React__default.createElement(Inline, {
       space: 12
     }, secondaryButton, primaryButton)));
@@ -6249,7 +6533,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$w['modal-footer']
+    className: styles$z['modal-footer']
   }, React__default.createElement(Inline, {
     justifyContent: "end",
     space: 12,
@@ -6411,9 +6695,9 @@ var Calendar = function Calendar(_ref) {
   }))));
 };
 
-var styles$x = {"badge":"_2f81N","badge--warning":"_2g1GI","badge--danger":"_2zLnM","badge--success":"_27QOo","badge--info":"_2gmsM"};
+var styles$A = {"badge":"_2f81N","badge--warning":"_2g1GI","badge--danger":"_2zLnM","badge--success":"_27QOo","badge--info":"_2gmsM"};
 
-var _excluded$a = ["children", "theme", "title"];
+var _excluded$c = ["children", "theme", "title"];
 
 var Badge = function Badge(_ref, forwardedRef) {
   var _classnames;
@@ -6421,7 +6705,7 @@ var Badge = function Badge(_ref, forwardedRef) {
   var children = _ref.children,
       theme = _ref.theme,
       title = _ref.title,
-      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$c);
 
   var internalRef = React.useRef(null);
   var ref = forwardedRef || internalRef;
@@ -6434,16 +6718,16 @@ var Badge = function Badge(_ref, forwardedRef) {
     overlay: title,
     ref: ref
   }, React__default.createElement("div", Object.assign({
-    className: classnames(styles$x['badge'], (_classnames = {}, _classnames[styles$x['badge--success']] = theme === 'success', _classnames[styles$x['badge--danger']] = theme === 'danger', _classnames[styles$x['badge--info']] = theme === 'info', _classnames[styles$x['badge--warning']] = theme === 'warning', _classnames)),
+    className: classnames(styles$A['badge'], (_classnames = {}, _classnames[styles$A['badge--success']] = theme === 'success', _classnames[styles$A['badge--danger']] = theme === 'danger', _classnames[styles$A['badge--info']] = theme === 'info', _classnames[styles$A['badge--warning']] = theme === 'warning', _classnames)),
     ref: ref
   }, otherProps), children));
 };
 
 var Badge$1 = React.forwardRef(Badge);
 
-var styles$y = {"avatar":"_2wJGB","avatar--small":"_3QTSo","avatar__badge":"_2Rl8S","avatar--medium":"_1zwj0","avatar--large":"_3-U6x","avatar--extra-large":"_3qn2q"};
+var styles$B = {"avatar":"_2wJGB","avatar--small":"_3QTSo","avatar__badge":"_2Rl8S","avatar--medium":"_1zwj0","avatar--large":"_3-U6x","avatar--extra-large":"_3qn2q"};
 
-var styles$z = {"avatar-image":"_GKL9P"};
+var styles$C = {"avatar-image":"_GKL9P"};
 
 var AvatarImage = function AvatarImage(_ref) {
   var url = _ref.url,
@@ -6468,7 +6752,7 @@ var AvatarImage = function AvatarImage(_ref) {
   }
 
   return React__default.createElement("div", {
-    className: styles$z['avatar-image']
+    className: styles$C['avatar-image']
   }, React__default.createElement(IconUserSolid, {
     size: "flexible",
     color: color
@@ -6536,7 +6820,7 @@ var Avatar = function Avatar(_ref) {
 
   var backgroundColor = url ? GREY200 : color;
   return React__default.createElement("div", {
-    className: classnames(styles$y['avatar'], (_classnames = {}, _classnames[styles$y['avatar--small']] = size === 'small', _classnames[styles$y['avatar--medium']] = size === 'medium', _classnames[styles$y['avatar--large']] = size === 'large', _classnames[styles$y['avatar--extra-large']] = size === 'extra-large', _classnames)),
+    className: classnames(styles$B['avatar'], (_classnames = {}, _classnames[styles$B['avatar--small']] = size === 'small', _classnames[styles$B['avatar--medium']] = size === 'medium', _classnames[styles$B['avatar--large']] = size === 'large', _classnames[styles$B['avatar--extra-large']] = size === 'extra-large', _classnames)),
     style: {
       backgroundColor: children || url && !showIconInsteadOfImage ? backgroundColor : defaultProfilePictureColors.backgroundColor
     }
@@ -6548,10 +6832,11 @@ var Avatar = function Avatar(_ref) {
       return setShowIconInsteadOfImage(true);
     }
   }), badge && size !== 'small' && React__default.createElement("div", {
-    className: styles$y['avatar__badge']
+    className: styles$B['avatar__badge']
   }, badge));
 };
 
+exports.AsyncSelectField = AsyncSelectField;
 exports.Avatar = Avatar;
 exports.Badge = Badge$1;
 exports.Button = Button$1;
@@ -6691,6 +6976,7 @@ exports.IconVolume = IconVolume;
 exports.IconVolumeMute = IconVolumeMute;
 exports.IconWrench = IconWrench;
 exports.Inline = Inline;
+exports.InlineBanner = InlineBanner;
 exports.Modal = Modal;
 exports.ModalBody = ModalBody;
 exports.ModalFooter = ModalFooter;