@7shifts/sous-chef 2.11.0 → 2.12.2

package/dist/index.modern.js

@@ -2,6 +2,8 @@ import React__default, { createContext, useContext, useState, useRef, createElem
 import classnames from 'classnames';
 import ReactDOM from 'react-dom';
 import Select, { components } from 'react-select';
+import AsyncSelect from 'react-select/async';
+import { debounce } from 'lodash-es';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
 import { isDate, startOfDay } from 'date-fns';
 import DayPicker, { DateUtils } from 'react-day-picker';
@@ -3212,7 +3214,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;
@@ -4936,10 +4938,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) {
@@ -5121,7 +5133,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(components.Control, Object.assign({}, props), CustomControl && selectedOption ? React__default.createElement("div", {
+  return React__default.createElement(components.Control, Object.assign({}, props), CustomPrefixComponent && selectedOption ? React__default.createElement("div", {
     className: styles$r['custom-control'],
     style: {
       paddingLeft: selectedOption ? 8 : 0
@@ -5145,13 +5157,13 @@ function CustomOption$1(_ref) {
   return React__default.createElement(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,
@@ -5163,32 +5175,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, {
+  var selectProps = {
     closeMenuOnScroll: function closeMenuOnScroll(e) {
       if (menuShouldScrollIntoView || !e.target) {
         return false;
@@ -5225,7 +5227,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, 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(components.MenuList, Object.assign({}, props), React__default.createElement(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 = useState(false),
+      hasMoreOptions = _useState[0],
+      setHasMoreOptions = _useState[1];
+
+  var _useState2 = useState(),
+      hasMoreOptionsFirstLoad = _useState2[0],
+      setHasMoreOptionsFirstLoad = _useState2[1];
+
+  var _useState3 = useState(false),
+      hasFirstLoadPerformed = _useState3[0],
+      setHasFirstLoadPerformed = _useState3[1];
+
+  var _useState4 = useState(null),
+      localOptions = _useState4[0],
+      setLocalOptions = _useState4[1];
+
+  var ref = 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: debounce(handleLoadOptions, 500, {
+      leading: true
+    }),
+    ref: ref
+  }))));
 };
 
 var useDateFieldControllers = function useDateFieldControllers(_ref) {
@@ -5519,7 +5664,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,
@@ -5557,7 +5702,7 @@ var FromDate = function FromDate(_ref) {
   }
 
   var dayPickerProps = {
-    classNames: styles$s,
+    classNames: styles$t,
     months: MONTH_NAMES,
     weekdaysLong: DAYS,
     weekdaysShort: DAYS.map(function (day) {
@@ -5584,7 +5729,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,
@@ -5657,7 +5802,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) {
@@ -5676,7 +5821,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,
@@ -5760,7 +5905,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
@@ -5954,14 +6099,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,
@@ -5982,12 +6127,12 @@ var TimeFieldElement = function TimeFieldElement(_ref, ref) {
 
 var TimeField = 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
@@ -6020,7 +6165,7 @@ var CurrencyFieldElement = function CurrencyFieldElement(_ref, ref) {
 
 var CurrencyField = 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,
@@ -6031,7 +6176,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
@@ -6111,9 +6256,148 @@ var PercentageElement = function PercentageElement(_ref, ref) {
 
 var PercentageField = 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,
@@ -6125,12 +6409,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));
 };
 
@@ -6166,14 +6450,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,
@@ -6186,16 +6470,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,
@@ -6216,7 +6500,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)));
@@ -6244,7 +6528,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,
@@ -6406,9 +6690,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;
@@ -6416,7 +6700,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 = useRef(null);
   var ref = forwardedRef || internalRef;
@@ -6429,16 +6713,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 = 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,
@@ -6463,7 +6747,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
@@ -6531,7 +6815,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
     }
@@ -6543,9 +6827,9 @@ 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));
 };
 
-export { Avatar, Badge$1 as Badge, Button$1 as Button, Calendar, CheckboxField, 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, IconSearch, IconSignOut, IconSitemap, IconSlidersH, IconSort, IconStar, IconStarSolid, IconStickyNoteLines, IconStopwatch, IconStrikethrough, IconSync, IconSyncExclaimation, IconTachometer, IconTimes, IconTimesOctagon, IconTrash, IconUnderline, IconUndo, IconUniversity, IconUserComputer, IconUserLight, IconUserPlus, IconUserSlash, IconUserSolid, IconUserTag, IconUserTie, IconUsers, IconVideo, IconVolume, IconVolumeMute, IconWrench, Inline, Modal, ModalBody, ModalFooter, MultiSelectField, PaginationControls, PasswordField, PercentageField, 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, CheckboxField, 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, IconSearch, IconSignOut, IconSitemap, IconSlidersH, IconSort, IconStar, IconStarSolid, IconStickyNoteLines, IconStopwatch, IconStrikethrough, IconSync, IconSyncExclaimation, IconTachometer, IconTimes, IconTimesOctagon, IconTrash, IconUnderline, IconUndo, IconUniversity, IconUserComputer, IconUserLight, IconUserPlus, IconUserSlash, IconUserSolid, IconUserTag, IconUserTie, IconUsers, IconVideo, IconVolume, IconVolumeMute, IconWrench, Inline, InlineBanner, Modal, ModalBody, ModalFooter, MultiSelectField, PaginationControls, PasswordField, PercentageField, 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 };
 //# sourceMappingURL=index.modern.js.map