@7shifts/sous-chef 2.9.0 → 2.12.0

package/dist/index.js

@@ -6,15 +6,19 @@ 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 reactDayPicker = require('react-day-picker');
+var DayPicker = require('react-day-picker');
+var DayPicker__default = _interopDefault(DayPicker);
 var dateFnsFormat = _interopDefault(require('date-fns/format'));
 var dateFnsParse = _interopDefault(require('date-fns/parse'));
 var startOfDay = _interopDefault(require('date-fns/startOfDay'));
 var eachDayOfInterval = _interopDefault(require('date-fns/eachDayOfInterval'));
 var parseTime = _interopDefault(require('time-autocomplete/src/core/AMPMParser'));
 var ReactModal = _interopDefault(require('react-modal'));
+require('react-day-picker/lib/style.css');
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -3215,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().replaceAll('_', ' ');
   }
 
   return key;
@@ -4939,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) {
@@ -5124,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
@@ -5148,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,
@@ -5166,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;
@@ -5228,7 +5232,110 @@ 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 handleLoadOptions = function handleLoadOptions(inputValue, callback) {
+    if (hasMoreOptions) {
+      setHasMoreOptions(false);
+    }
+
+    return loadOptions(inputValue).then(function (_ref2) {
+      var hasMore = _ref2.hasMore,
+          options = _ref2.options;
+      setHasMoreOptions(hasMore);
+
+      if (hasMoreOptionsFirstLoad === undefined) {
+        setHasMoreOptionsFirstLoad(hasMore);
+      }
+
+      callback(options);
+      return 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,
+      trailing: false
+    })
+  }))));
 };
 
 var useDateFieldControllers = function useDateFieldControllers(_ref) {
@@ -5310,14 +5417,14 @@ var DatePickerCalendar = function DatePickerCalendar(_ref) {
 
 var inputStyles = {"text-field":"_1btTx","date-field":"_1Sc9D","text-field--invalid":"_2feYp","date-field--invalid":"_2SNat","text-field--prefixed":"_E18JV","date-field--prefixed":"_jLolW","text-field--suffixed":"_27J43","date-field--suffixed":"_3eTNi"};
 
-var styles$s = {"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 dayStyles = {"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"};
 
 function parseDate(str, format, locale) {
   var parsed = dateFnsParse(str, format, new Date(), {
     locale: locale
   });
 
-  if (str.length === format.length && reactDayPicker.DateUtils.isDate(parsed)) {
+  if (str.length === format.length && DayPicker.DateUtils.isDate(parsed)) {
     return parsed;
   }
 
@@ -5370,7 +5477,8 @@ var DateField = function DateField(_ref) {
       disabled = _ref.disabled,
       defaultValue = _ref.defaultValue,
       _ref$readOnly = _ref.readOnly,
-      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+      onMonthChange = _ref.onMonthChange;
   var inputRef = React.useRef();
 
   var _useState = React.useState(false),
@@ -5394,7 +5502,7 @@ var DateField = function DateField(_ref) {
     error: controllers.error
   };
   var dayPickerProps = {
-    classNames: styles$s,
+    classNames: dayStyles,
     disabledDays: function disabledDays(day) {
       return _disabledDays && _disabledDays(setToMidnight(day));
     },
@@ -5403,7 +5511,8 @@ var DateField = function DateField(_ref) {
     weekdaysLong: DAYS,
     weekdaysShort: DAYS.map(function (day) {
       return day.substring(0, 2);
-    })
+    }),
+    onMonthChange: onMonthChange
   };
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(AffixContainer, {
     prefix: React__default.createElement(IconCalendarAlt, {
@@ -5411,7 +5520,7 @@ var DateField = function DateField(_ref) {
     })
   }, React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$s,
+    classNames: dayStyles,
     formatDate: formatDate,
     parseDate: parseDate,
     placeholder: placeholder || format.toUpperCase(),
@@ -5811,7 +5920,7 @@ var DateRangeField = function DateRangeField(_ref) {
   })));
 };
 
-var styles$u = {"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 weekStyles = {"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 WeekField = function WeekField(_ref) {
   var _classnames;
@@ -5886,7 +5995,7 @@ var WeekField = function WeekField(_ref) {
   };
 
   var dayPickerProps = {
-    classNames: styles$u,
+    classNames: weekStyles,
     disabledDays: function disabledDays(day) {
       return _disabledDays && _disabledDays(setToMidnight(day));
     },
@@ -5916,7 +6025,7 @@ var WeekField = function WeekField(_ref) {
     })
   }, React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$u,
+    classNames: weekStyles,
     formatDate: formatDate,
     parseDate: parseDate,
     placeholder: placeholder || format.toUpperCase(),
@@ -5955,14 +6064,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,
@@ -5983,12 +6092,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
@@ -6021,7 +6130,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,
@@ -6032,7 +6141,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
@@ -6112,9 +6221,148 @@ var PercentageElement = function PercentageElement(_ref, ref) {
 
 var PercentageField = React.forwardRef(PercentageElement);
 
-var styles$v = {"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;
 
-var styles$w = {"header":"_36nxW","sub-header":"_2XwRD"};
+  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$x = {"header":"_36nxW","sub-header":"_2XwRD"};
 
 var ModalHeader = function ModalHeader(_ref) {
   var header = _ref.header,
@@ -6126,12 +6374,12 @@ var ModalHeader = function ModalHeader(_ref) {
     flex: [1],
     alignItems: "center"
   }, React__default.createElement("span", {
-    className: styles$w['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$w['sub-header']
+    className: styles$x['sub-header']
   }, subHeader));
 };
 
@@ -6167,14 +6415,14 @@ var Modal = function Modal(_ref) {
     contentLabel: "Modal",
     appElement: rootElementId && document.getElementById(rootElementId) || undefined,
     overlayClassName: {
-      base: styles$v['overlay'],
-      afterOpen: styles$v['overlay--after-open'],
-      beforeClose: styles$v['overlay--before-close']
+      base: styles$w['overlay'],
+      afterOpen: styles$w['overlay--after-open'],
+      beforeClose: styles$w['overlay--before-close']
     },
     className: {
-      base: styles$v['content'],
-      afterOpen: styles$v['content--after-open'],
-      beforeClose: styles$v['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,
@@ -6187,16 +6435,16 @@ Modal.setAppElement = function (rootElement) {
   ReactModal.setAppElement(rootElement);
 };
 
-var styles$x = {"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$x['modal-body']
+    className: styles$y['modal-body']
   }, children);
 };
 
-var styles$y = {"modal-footer":"_LKOr5","tertiary-container":"_Qktd-"};
+var styles$z = {"modal-footer":"_LKOr5","tertiary-container":"_Qktd-"};
 
 var ModalFooter = function ModalFooter(_ref) {
   var children = _ref.children,
@@ -6217,7 +6465,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$y['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)));
@@ -6245,7 +6493,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$y['modal-footer']
+    className: styles$z['modal-footer']
   }, React__default.createElement(Inline, {
     justifyContent: "end",
     space: 12,
@@ -6253,9 +6501,163 @@ var FooterContainer = function FooterContainer(_ref2) {
   }, children));
 };
 
-var styles$z = {"badge":"_2f81N","badge--warning":"_2g1GI","badge--danger":"_2zLnM","badge--success":"_27QOo","badge--info":"_2gmsM"};
+var CALENDAR_MODE = {
+  DAY: 'day',
+  WEEK: 'week'
+};
+var CALENDAR_PLACEMENT = {
+  BOTTOM: 'bottom',
+  TOP: 'top'
+};
+
+var calculateCalendarPosition = function calculateCalendarPosition(placement, anchorPosition, calendarDimensions) {
+  if (!calendarDimensions) {
+    return {
+      left: 0,
+      top: 0
+    };
+  }
+
+  var horizontalPosition = getHorizontalPosition(anchorPosition, calendarDimensions);
+  var verticalPosition = getVerticalPosition(anchorPosition, placement, calendarDimensions);
+  return _extends({}, horizontalPosition, verticalPosition);
+};
+
+var getHorizontalPosition = function getHorizontalPosition(anchorPosition, calendarDimensions) {
+  var innerWidth = window.innerWidth;
+  var calendarRight = anchorPosition.left + calendarDimensions.width;
+
+  if (innerWidth > calendarRight + BUFFER) {
+    return {
+      left: anchorPosition.left
+    };
+  }
+
+  return {
+    left: anchorPosition.right - calendarDimensions.width
+  };
+};
+
+var getVerticalPosition = function getVerticalPosition(anchorPosition, placement, calendarDimensions) {
+  var calendarTopAboveTrigger = anchorPosition.top - calendarDimensions.height - PADDING;
+  var calendarTopBelowTrigger = anchorPosition.bottom + PADDING;
+
+  if (placement === CALENDAR_PLACEMENT.TOP) {
+    if (calendarTopAboveTrigger < 0) {
+      return {
+        top: anchorPosition.bottom + PADDING
+      };
+    }
+
+    return {
+      top: calendarTopAboveTrigger + window.scrollY
+    };
+  } else {
+    if (calendarTopBelowTrigger + calendarDimensions.height > window.innerHeight) {
+      return {
+        top: calendarTopAboveTrigger + window.scrollY
+      };
+    }
+
+    return {
+      top: calendarTopBelowTrigger + window.scrollY
+    };
+  }
+};
+
+var Calendar = function Calendar(_ref) {
+  var _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? CALENDAR_MODE.DAY : _ref$mode,
+      _ref$position = _ref.position,
+      position = _ref$position === void 0 ? CALENDAR_PLACEMENT.BOTTOM : _ref$position,
+      _ref$weekStart = _ref.weekStart,
+      weekStart = _ref$weekStart === void 0 ? 0 : _ref$weekStart,
+      selected = _ref.selected,
+      onSelect = _ref.onSelect,
+      onClickOutside = _ref.onClickOutside,
+      disabledDays = _ref.disabledDays,
+      anchorRef = _ref.anchorRef;
+
+  var _useState = React.useState(null),
+      calendarRef = _useState[0],
+      setCalendarRef = _useState[1];
+
+  var style = mode === CALENDAR_MODE.DAY ? dayStyles : weekStyles;
+  var anchorNode = anchorRef.current;
+  useOnClickOutside({
+    current: calendarRef
+  }, function (event) {
+    var _anchorRef$current;
+
+    if (!((_anchorRef$current = anchorRef.current) !== null && _anchorRef$current !== void 0 && _anchorRef$current.contains(event === null || event === void 0 ? void 0 : event.srcElement))) {
+      onClickOutside();
+    }
+  });
+  var weekRange = selected ? createWeekRange(selected, weekStart) : undefined;
+  var selectedRange = weekRange && {
+    from: weekRange.start,
+    to: weekRange.end
+  };
+
+  var handleSelect = function handleSelect(day) {
+    var selectedDate = setToMidnight(day);
+
+    if (mode === CALENDAR_MODE.DAY) {
+      onSelect(selectedDate);
+    } else {
+      var _weekRange = createWeekRange(selectedDate, weekStart);
+
+      onSelect(_weekRange.start);
+    }
+
+    setTimeout(function () {
+      onClickOutside();
+    }, 100);
+  };
+
+  if (!anchorNode) {
+    return null;
+  }
+
+  var anchorPosition = anchorNode.getBoundingClientRect();
+  var calendarPosition = calculateCalendarPosition(position, anchorPosition, calendarRef === null || calendarRef === void 0 ? void 0 : calendarRef.getBoundingClientRect());
+  return React__default.createElement(Portal, null, React__default.createElement("div", {
+    className: style.overlayWrapper
+  }, React__default.createElement("div", {
+    className: style.overlay,
+    ref: function ref(_ref2) {
+      return setCalendarRef(_ref2);
+    },
+    style: _extends({}, calendarPosition, {
+      zIndex: Z_INDEX_LAYERS.MODAL
+    })
+  }, React__default.createElement(DayPicker__default, {
+    format: "MM/dd/yyyy",
+    classNames: style,
+    onDayClick: function onDayClick(day, activeModifiers) {
+      var isDateDisabled = Object.keys(activeModifiers).find(function (modifier) {
+        return modifier.includes('disabled');
+      });
+
+      if (!Boolean(isDateDisabled)) {
+        handleSelect(day);
+      }
+    },
+    selectedDays: mode === CALENDAR_MODE.DAY ? selected : selectedRange,
+    disabledDays: disabledDays,
+    months: MONTH_NAMES,
+    weekdaysLong: DAYS,
+    weekdaysShort: DAYS.map(function (day) {
+      return day.substring(0, 2);
+    }),
+    showOutsideDays: mode === CALENDAR_MODE.WEEK,
+    firstDayOfWeek: weekStart
+  }))));
+};
+
+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;
@@ -6263,7 +6665,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;
@@ -6276,16 +6678,16 @@ var Badge = function Badge(_ref, forwardedRef) {
     overlay: title,
     ref: ref
   }, React__default.createElement("div", Object.assign({
-    className: classnames(styles$z['badge'], (_classnames = {}, _classnames[styles$z['badge--success']] = theme === 'success', _classnames[styles$z['badge--danger']] = theme === 'danger', _classnames[styles$z['badge--info']] = theme === 'info', _classnames[styles$z['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$A = {"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$B = {"avatar-image":"_GKL9P"};
+var styles$C = {"avatar-image":"_GKL9P"};
 
 var AvatarImage = function AvatarImage(_ref) {
   var url = _ref.url,
@@ -6310,7 +6712,7 @@ var AvatarImage = function AvatarImage(_ref) {
   }
 
   return React__default.createElement("div", {
-    className: styles$B['avatar-image']
+    className: styles$C['avatar-image']
   }, React__default.createElement(IconUserSolid, {
     size: "flexible",
     color: color
@@ -6378,7 +6780,7 @@ var Avatar = function Avatar(_ref) {
 
   var backgroundColor = url ? GREY200 : color;
   return React__default.createElement("div", {
-    className: classnames(styles$A['avatar'], (_classnames = {}, _classnames[styles$A['avatar--small']] = size === 'small', _classnames[styles$A['avatar--medium']] = size === 'medium', _classnames[styles$A['avatar--large']] = size === 'large', _classnames[styles$A['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
     }
@@ -6390,13 +6792,15 @@ var Avatar = function Avatar(_ref) {
       return setShowIconInsteadOfImage(true);
     }
   }), badge && size !== 'small' && React__default.createElement("div", {
-    className: styles$A['avatar__badge']
+    className: styles$B['avatar__badge']
   }, badge));
 };
 
+exports.AsyncSelectField = AsyncSelectField;
 exports.Avatar = Avatar;
 exports.Badge = Badge$1;
 exports.Button = Button$1;
+exports.Calendar = Calendar;
 exports.CheckboxField = CheckboxField;
 exports.CurrencyField = CurrencyField;
 exports.DataTable = DataTable;
@@ -6532,6 +6936,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;