@7shifts/sous-chef 2.9.0 → 2.12.0

package/dist/index.modern.js

@@ -2,15 +2,18 @@ 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 { DateUtils } from 'react-day-picker';
+import DayPicker, { DateUtils } from 'react-day-picker';
 import dateFnsFormat from 'date-fns/format';
 import dateFnsParse from 'date-fns/parse';
 import startOfDay$1 from 'date-fns/startOfDay';
 import eachDayOfInterval from 'date-fns/eachDayOfInterval';
 import parseTime from 'time-autocomplete/src/core/AMPMParser';
 import ReactModal from 'react-modal';
+import 'react-day-picker/lib/style.css';
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -3211,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().replaceAll('_', ' ');
   }
 
   return key;
@@ -4935,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) {
@@ -5120,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
@@ -5144,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,
@@ -5162,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;
@@ -5224,7 +5227,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, 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 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: debounce(handleLoadOptions, 500, {
+      leading: true,
+      trailing: false
+    })
+  }))));
 };
 
 var useDateFieldControllers = function useDateFieldControllers(_ref) {
@@ -5306,7 +5412,7 @@ 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(), {
@@ -5366,7 +5472,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 = useRef();
 
   var _useState = useState(false),
@@ -5390,7 +5497,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));
     },
@@ -5399,7 +5506,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, {
@@ -5407,7 +5515,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(),
@@ -5807,7 +5915,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;
@@ -5882,7 +5990,7 @@ var WeekField = function WeekField(_ref) {
   };
 
   var dayPickerProps = {
-    classNames: styles$u,
+    classNames: weekStyles,
     disabledDays: function disabledDays(day) {
       return _disabledDays && _disabledDays(setToMidnight(day));
     },
@@ -5912,7 +6020,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(),
@@ -5951,14 +6059,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,
@@ -5979,12 +6087,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
@@ -6017,7 +6125,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,
@@ -6028,7 +6136,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
@@ -6108,9 +6216,148 @@ var PercentageElement = function PercentageElement(_ref, ref) {
 
 var PercentageField = 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,
@@ -6122,12 +6369,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));
 };
 
@@ -6163,14 +6410,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,
@@ -6183,16 +6430,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,
@@ -6213,7 +6460,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)));
@@ -6241,7 +6488,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,
@@ -6249,9 +6496,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 = 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, {
+    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;
@@ -6259,7 +6660,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;
@@ -6272,16 +6673,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 = 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,
@@ -6306,7 +6707,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
@@ -6374,7 +6775,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
     }
@@ -6386,9 +6787,9 @@ 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));
 };
 
-export { Avatar, Badge$1 as Badge, Button$1 as Button, 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