@7shifts/sous-chef 2.8.3 → 2.11.0

package/dist/index.js

@@ -8,13 +8,15 @@ var Select = require('react-select');
 var Select__default = _interopDefault(Select);
 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) {
@@ -100,7 +102,7 @@ var MenuItem = function MenuItem(_ref) {
 
   var handleClick = function handleClick(e) {
     onToggleMenu();
-    onClick();
+    onClick(e);
     e.stopPropagation();
   };
 
@@ -3346,6 +3348,64 @@ var useDataTableContext = function useDataTableContext() {
 
 var styles$9 = {"item":"_1d8Ci","selected":"_3tb7U","clickable":"_thFcO","item-column":"_OTcMc","item-column--default-padding":"_lNHQ8","item-column--right-align":"_13YLe","item-column--vertical-border":"_1rrRr","actions":"_azbIG"};
 
+var styles$a = {"caption":"_1QDLF","label":"_2wiMV","toggle":"_1ui8X","toggle__label":"_1YRJT","toggle__caption":"_1jEiW","toggle__switch":"_3tNyE"};
+
+var Toggle = function Toggle(_ref) {
+  var checked = _ref.checked,
+      label = _ref.label,
+      caption = _ref.caption,
+      onChange = _ref.onChange,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      id = _ref.id;
+  return React__default.createElement(Stack, {
+    space: 8
+  }, React__default.createElement("label", {
+    className: styles$a['toggle']
+  }, React__default.createElement("input", {
+    "data-testid": "toggle",
+    type: "checkbox",
+    checked: checked,
+    onChange: onChange,
+    disabled: disabled,
+    id: id
+  }), React__default.createElement("span", {
+    className: styles$a['toggle__switch']
+  }), label && React__default.createElement("span", {
+    className: styles$a['toggle__label']
+  }, label)), caption && React__default.createElement("span", {
+    className: styles$a['toggle__caption']
+  }, caption));
+};
+
+var ActionsCell = function ActionsCell(_ref) {
+  var actions = _ref.actions;
+  var kebabMenuItems = actions.filter(function (action) {
+    return action.showInKebab === undefined || action.showInKebab;
+  });
+  var sideActions = actions.filter(function (action) {
+    return action.showInKebab === false;
+  });
+  return React__default.createElement("div", {
+    className: classnames(styles$9['item-column'], styles$9['actions']),
+    "data-testid": "data-table-dropdown-menu"
+  }, React__default.createElement(Inline, {
+    space: 0,
+    justifyContent: "end"
+  }, sideActions.length > 0 && sideActions.map(function (action, index) {
+    return React__default.createElement(Button$1, Object.assign({
+      key: action.action || index,
+      onClick: action.onAction,
+      theme: "link-icon"
+    }, action.showInKebab === false ? action.buttonProps : {}), action.label);
+  }), kebabMenuItems.length > 0 && React__default.createElement(Menu, null, React__default.createElement(MenuButton, null, React__default.createElement(IconEllipsisV, null)), React__default.createElement(MenuList, null, kebabMenuItems.map(function (action, index) {
+    return React__default.createElement(MenuItem, {
+      onClick: action.onAction,
+      key: index
+    }, action.label);
+  })))));
+};
+
 var _excluded$2 = ["children", "onClick", "isSelected", "actions", "hasDefaultPadding"];
 
 var DataTableRowComponent = function DataTableRowComponent(_ref, ref) {
@@ -3392,20 +3452,14 @@ var DataTableRowComponent = function DataTableRowComponent(_ref, ref) {
     ref: ref
   }), React__default.Children.map(children, function (child, index) {
     return renderColumn(child, index);
-  }), showActionMenu && React__default.createElement("div", {
-    className: classnames(styles$9['item-column'], styles$9['actions']),
-    "data-testid": "data-table-dropdown-menu"
-  }, actions.length > 0 && React__default.createElement(Menu, null, React__default.createElement(MenuButton, null, React__default.createElement(IconEllipsisV, null)), React__default.createElement(MenuList, null, actions.map(function (action, index) {
-    return React__default.createElement(MenuItem, {
-      onClick: action.onAction,
-      key: index
-    }, action.label);
-  })))));
+  }), showActionMenu && React__default.createElement(ActionsCell, {
+    actions: actions
+  }));
 };
 
 var DataTableRow = React.forwardRef(DataTableRowComponent);
 
-var styles$a = {"header":"_of22N","header-item":"_27x4v","header-item--sortable":"_3gw3Z","header-item--right-align":"_Fjm2n","header-item--action":"_LoIvx","header-sort-icon":"_3VjFP","body":"_1bTmd","footer":"_1opWx","pagination-controls":"_F_spz"};
+var styles$b = {"header":"_of22N","header-item":"_27x4v","header-item--sortable":"_3gw3Z","header-item--right-align":"_Fjm2n","header-item--action":"_LoIvx","header-sort-icon":"_3VjFP","body":"_1bTmd","footer":"_1opWx","pagination-controls":"_F_spz"};
 
 var SORT_ORDER$1 = {
   ASC: 'asc',
@@ -3436,7 +3490,7 @@ var DataTableHeader = function DataTableHeader(_ref) {
   };
 
   return React__default.createElement("div", {
-    className: styles$a['header']
+    className: styles$b['header']
   }, columns.map(function (column) {
     var _classnames;
 
@@ -3444,7 +3498,7 @@ var DataTableHeader = function DataTableHeader(_ref) {
     var sortDir = column.currentSort;
     var isRightAligned = column.isRightAligned;
     return React__default.createElement("div", {
-      className: classnames((_classnames = {}, _classnames[styles$a['header-item']] = true, _classnames[styles$a['header-item--sortable']] = isSortable, _classnames[styles$a['header-item--right-align']] = isRightAligned, _classnames)),
+      className: classnames((_classnames = {}, _classnames[styles$b['header-item']] = true, _classnames[styles$b['header-item--sortable']] = isSortable, _classnames[styles$b['header-item--right-align']] = isRightAligned, _classnames)),
       style: {
         flex: column.size || 1
       },
@@ -3458,12 +3512,12 @@ var DataTableHeader = function DataTableHeader(_ref) {
       role: "columnheader",
       tabIndex: 0
     }, column.label, ' ', isSortable && React__default.createElement("span", {
-      className: styles$a['header-sort-icon']
+      className: styles$b['header-sort-icon']
     }, React__default.createElement(IconSort$2, {
       sortDirection: sortDir
     })));
   }), showActionMenu && React__default.createElement("div", {
-    className: classnames(styles$a['header-item'], styles$a['header-item--action'])
+    className: classnames(styles$b['header-item'], styles$b['header-item--action'])
   }));
 };
 
@@ -3543,7 +3597,7 @@ var DataTable = function DataTable(_ref) {
     onSort: onSort,
     showActionMenu: showActionMenu
   }), React__default.createElement("div", {
-    className: styles$a['body'],
+    className: styles$b['body'],
     style: conditionalStyles,
     role: "table"
   }, isLoading && React__default.createElement(Spinner, {
@@ -3556,10 +3610,10 @@ var DataTable = function DataTable(_ref) {
       index: index
     });
   }), footerComponent && !isLoading && React__default.createElement("div", {
-    className: styles$a['footer'],
+    className: styles$b['footer'],
     "data-testid": "footer"
   }, footerComponent)), onPreviousClick && onNextClick && (hasPrevious || hasNext) && React__default.createElement("div", {
-    className: styles$a['pagination-controls'],
+    className: styles$b['pagination-controls'],
     "data-testid": "pagination-controls"
   }, React__default.createElement(PaginationControls, {
     hasPrevious: hasPrevious && !isLoading,
@@ -3587,7 +3641,7 @@ var DefaultItemComponent$1 = function DefaultItemComponent(_ref2) {
   }));
 };
 
-var styles$b = {"data-table-cell":"_orjDM","data-table-cell--right-aligned":"_3EpfF"};
+var styles$c = {"data-table-cell":"_orjDM","data-table-cell--right-aligned":"_3EpfF"};
 
 var DataTableCell = function DataTableCell(_ref) {
   var _columns$columnIndex, _classnames;
@@ -3601,7 +3655,7 @@ var DataTableCell = function DataTableCell(_ref) {
   var column = (_columns$columnIndex = columns === null || columns === void 0 ? void 0 : columns[columnIndex]) != null ? _columns$columnIndex : null;
   var isRightAligned = column ? column.isRightAligned : false;
   return React__default.createElement("div", {
-    className: classnames((_classnames = {}, _classnames[styles$b['data-table-cell--right-aligned']] = isRightAligned, _classnames), styles$b['data-table-cell'])
+    className: classnames((_classnames = {}, _classnames[styles$c['data-table-cell--right-aligned']] = isRightAligned, _classnames), styles$c['data-table-cell'])
   }, children);
 };
 
@@ -3717,36 +3771,36 @@ var useFieldControllers = function useFieldControllers(_ref) {
   return controllers;
 };
 
-var styles$c = {"label":"_h724f"};
+var styles$d = {"label":"_h724f"};
 
 var Label = function Label(_ref) {
   var htmlFor = _ref.htmlFor,
       children = _ref.children;
   return React__default.createElement("label", {
     htmlFor: htmlFor,
-    className: styles$c['label']
+    className: styles$d['label']
   }, children);
 };
 
-var styles$d = {"caption":"_1DWBq"};
+var styles$e = {"caption":"_1DWBq"};
 
 var Caption = function Caption(_ref) {
   var fieldId = _ref.fieldId,
       children = _ref.children;
   return React__default.createElement("div", {
     id: fieldId && fieldId + "-describer",
-    className: styles$d['caption']
+    className: styles$e['caption']
   }, children);
 };
 
-var styles$e = {"error-message":"_nZ2MD"};
+var styles$f = {"error-message":"_nZ2MD"};
 
 var ErrorMessage = function ErrorMessage(_ref) {
   var fieldId = _ref.fieldId,
       children = _ref.children;
   return React__default.createElement("div", {
     id: fieldId && fieldId + "-error-message",
-    className: styles$e['error-message']
+    className: styles$f['error-message']
   }, React__default.createElement(Inline, {
     space: 8,
     alignItems: "center"
@@ -3775,7 +3829,7 @@ var Field = function Field(_ref) {
   }, error));
 };
 
-var styles$f = {"affix-container":"_ybKOk","affix-container--prefixed":"_2COk3","affix-container--suffixed":"_1xXXN","prefix":"_eX5OL","suffix":"__YH01"};
+var styles$g = {"affix-container":"_ybKOk","affix-container--prefixed":"_2COk3","affix-container--suffixed":"_1xXXN","prefix":"_eX5OL","suffix":"__YH01"};
 
 var AffixContainer = function AffixContainer(_ref) {
   var _classnames;
@@ -3812,21 +3866,21 @@ var AffixContainer = function AffixContainer(_ref) {
     return children;
   }
 
-  var classes = classnames(styles$f['affix-container'], (_classnames = {}, _classnames[styles$f['affix-container--prefixed']] = hasPrefix, _classnames[styles$f['affix-container--suffixed']] = hasSuffix, _classnames));
+  var classes = classnames(styles$g['affix-container'], (_classnames = {}, _classnames[styles$g['affix-container--prefixed']] = hasPrefix, _classnames[styles$g['affix-container--suffixed']] = hasSuffix, _classnames));
   return React__default.createElement("div", {
     className: classes,
     ref: container,
     "data-testid": "affix-container"
   }, hasPrefix && React__default.createElement("div", {
-    className: styles$f['prefix'],
+    className: styles$g['prefix'],
     ref: prefixElement
   }, prefix), children, hasSuffix && React__default.createElement("div", {
-    className: styles$f['suffix'],
+    className: styles$g['suffix'],
     ref: suffixElement
   }, suffix));
 };
 
-var styles$g = {"data-table-editable-cell":"_kIngZ","data-table-editable-cell--right-aligned":"_3_QIj","data-table-editable-cell--currency":"_2Kyuc","data-table-editable-cell--invalid":"_y9SBQ","data-table-editable-cell--top-left":"_32mWH","data-table-editable-cell--top-right":"_3Jg2-","data-table-editable-cell--bottom-left":"_1F5fj","data-table-editable-cell--bottom-right":"_1fTTW"};
+var styles$h = {"data-table-editable-cell":"_kIngZ","data-table-editable-cell--right-aligned":"_3_QIj","data-table-editable-cell--currency":"_2Kyuc","data-table-editable-cell--invalid":"_y9SBQ","data-table-editable-cell--top-left":"_32mWH","data-table-editable-cell--top-right":"_3Jg2-","data-table-editable-cell--bottom-left":"_1F5fj","data-table-editable-cell--bottom-right":"_1fTTW"};
 
 var DataTableEditableCell = function DataTableEditableCell(_ref) {
   var _columns$columnIndex, _classnames, _classnames2;
@@ -3873,14 +3927,14 @@ var DataTableEditableCell = function DataTableEditableCell(_ref) {
     id: controllers.id
   };
   return React__default.createElement("div", {
-    className: classnames((_classnames = {}, _classnames[styles$g['data-table-editable-cell--currency']] = type === 'currency', _classnames), styles$g['data-table-editable-cell'])
+    className: classnames((_classnames = {}, _classnames[styles$h['data-table-editable-cell--currency']] = type === 'currency', _classnames), styles$h['data-table-editable-cell'])
   }, React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(AffixContainer, {
     prefix: prefix,
     suffix: suffix
   }, React__default.createElement("input", {
     name: name,
     id: controllers.id,
-    className: classnames((_classnames2 = {}, _classnames2[styles$g['data-table-editable-cell--right-aligned']] = isRightAligned, _classnames2[styles$g['data-table-editable-cell--top-left']] = isTopLeftCell, _classnames2[styles$g['data-table-editable-cell--top-right']] = isTopRightCell, _classnames2[styles$g['data-table-editable-cell--bottom-left']] = isBottomLeftCell, _classnames2[styles$g['data-table-editable-cell--bottom-right']] = isBottomRightCell, _classnames2[styles$g['data-table-editable-cell--invalid']] = hasError, _classnames2)),
+    className: classnames((_classnames2 = {}, _classnames2[styles$h['data-table-editable-cell--right-aligned']] = isRightAligned, _classnames2[styles$h['data-table-editable-cell--top-left']] = isTopLeftCell, _classnames2[styles$h['data-table-editable-cell--top-right']] = isTopRightCell, _classnames2[styles$h['data-table-editable-cell--bottom-left']] = isBottomLeftCell, _classnames2[styles$h['data-table-editable-cell--bottom-right']] = isBottomRightCell, _classnames2[styles$h['data-table-editable-cell--invalid']] = hasError, _classnames2)),
     type: type === 'currency' ? 'number' : 'text',
     step: type === 'currency' ? 'any' : '',
     "data-testid": "text-field-" + name,
@@ -4076,7 +4130,7 @@ var ToolbarSelect = function ToolbarSelect(_ref) {
   }));
 };
 
-var styles$h = {"form--standard-size":"_3CaV0"};
+var styles$i = {"form--standard-size":"_3CaV0"};
 
 var Form = function Form(_ref) {
   var _classnames;
@@ -4100,7 +4154,7 @@ var Form = function Form(_ref) {
     }
   }, React__default.createElement("form", {
     onSubmit: onSubmit ? handleSubmit : formik === null || formik === void 0 ? void 0 : formik.handleSubmit,
-    className: classnames((_classnames = {}, _classnames[styles$h['form--standard-size']] = !wide, _classnames)),
+    className: classnames((_classnames = {}, _classnames[styles$i['form--standard-size']] = !wide, _classnames)),
     "data-testid": "form"
   }, stackContent ? React__default.createElement(Stack, null, children) : children));
 };
@@ -4139,7 +4193,7 @@ var FormRow = function FormRow(_ref) {
   }));
 };
 
-var styles$i = {"text-field":"_BkzdC","text-field--focus":"_Rop31","text-field--disabled":"_2x3Cm","text-field--invalid":"_3zOwV","text-field__toolbar":"_rQqnL"};
+var styles$j = {"text-field":"_BkzdC","text-field--focus":"_Rop31","text-field--disabled":"_2x3Cm","text-field--invalid":"_3zOwV","text-field__toolbar":"_rQqnL"};
 
 var useGrowTextAreaRef = function useGrowTextAreaRef(minHeight, maxHeight, autoGrow, forwardedRef) {
   var textareaRef = React.useRef(null);
@@ -4214,7 +4268,7 @@ var TextAreaField = function TextAreaField(_ref) {
       updateHeight = _useGrowTextAreaRef.updateHeight;
 
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
-    className: classnames(styles$i['text-field'], (_classnames = {}, _classnames[styles$i['text-field--invalid']] = hasError, _classnames[styles$i['text-field--disabled']] = disabled, _classnames[styles$i['text-field--focus']] = hasFocus, _classnames)),
+    className: classnames(styles$j['text-field'], (_classnames = {}, _classnames[styles$j['text-field--invalid']] = hasError, _classnames[styles$j['text-field--disabled']] = disabled, _classnames[styles$j['text-field--focus']] = hasFocus, _classnames)),
     ref: containerRef,
     onClick: function onClick(event) {
       if (event.target === (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current)) {
@@ -4246,7 +4300,7 @@ var TextAreaField = function TextAreaField(_ref) {
     },
     ref: textAreaRef
   }), toolbar && React__default.createElement("div", {
-    className: styles$i['text-field__toolbar'],
+    className: styles$j['text-field__toolbar'],
     id: controllers.id + "-toolbar",
     ref: toolbarRef,
     onClick: function onClick(event) {
@@ -4259,7 +4313,7 @@ var TextAreaField = function TextAreaField(_ref) {
   }, toolbar)));
 };
 
-var styles$j = {"text-field":"_20YOA","text-field--invalid":"_3kUSh","text-field--prefixed":"_3IU3Q","text-field--suffixed":"_QXJOD"};
+var styles$k = {"text-field":"_20YOA","text-field--invalid":"_3kUSh","text-field--prefixed":"_3IU3Q","text-field--suffixed":"_QXJOD"};
 
 var useTextField = function useTextField(_ref) {
   var _classnames;
@@ -4297,7 +4351,7 @@ var useTextField = function useTextField(_ref) {
     'aria-invalid': hasError,
     autoComplete: autoComplete,
     autoFocus: autoFocus,
-    className: classnames(styles$j['text-field'], (_classnames = {}, _classnames[styles$j['text-field--invalid']] = hasError, _classnames)),
+    className: classnames(styles$k['text-field'], (_classnames = {}, _classnames[styles$k['text-field--invalid']] = hasError, _classnames)),
     'data-testid': "text-field-" + name,
     disabled: disabled,
     defaultValue: defaultValue,
@@ -4394,7 +4448,7 @@ var useCheckBoxFieldControllers = function useCheckBoxFieldControllers(_ref) {
   return controllers;
 };
 
-var styles$k = {"check-box-field":"_2sg0c","check-box-field__caption":"_2LdrP","check-box-field__custom-input":"_2mA8e"};
+var styles$l = {"check-box-field":"_2sg0c","check-box-field__caption":"_2LdrP","check-box-field__custom-input":"_2mA8e"};
 
 var CheckboxField = function CheckboxField(_ref) {
   var name = _ref.name,
@@ -4421,7 +4475,7 @@ var CheckboxField = function CheckboxField(_ref) {
     space: 8,
     alignItems: "center"
   }, React__default.createElement("div", {
-    className: styles$k['check-box-field']
+    className: styles$l['check-box-field']
   }, React__default.createElement("input", {
     name: name,
     id: controllers.id,
@@ -4434,11 +4488,11 @@ var CheckboxField = function CheckboxField(_ref) {
     onChange: controllers.onChange,
     onBlur: controllers.onBlur
   }), React__default.createElement("span", {
-    className: styles$k['check-box-field__custom-input']
+    className: styles$l['check-box-field__custom-input']
   })), label && React__default.createElement(Label, {
     htmlFor: controllers.id
   }, label)), caption && React__default.createElement("div", {
-    className: styles$k['check-box-field__caption']
+    className: styles$l['check-box-field__caption']
   }, React__default.createElement(Caption, {
     fieldId: controllers.id
   }, caption)), controllers.error && React__default.createElement(ErrorMessage, {
@@ -4446,7 +4500,7 @@ var CheckboxField = function CheckboxField(_ref) {
   }, controllers.error));
 };
 
-var styles$l = {"pill-select-field":"_g6T-p","pill-select-field__custom-input":"_1i2AX"};
+var styles$m = {"pill-select-field":"_g6T-p","pill-select-field__custom-input":"_1i2AX"};
 
 var useMultiSelectFieldControllers = function useMultiSelectFieldControllers(_ref) {
   var name = _ref.name,
@@ -4537,7 +4591,7 @@ var PillSelectField = function PillSelectField(_ref) {
     var itemId = controllers.id + "-" + itemIdentifier;
     return React__default.createElement("div", {
       key: itemIdentifier,
-      className: styles$l['pill-select-field']
+      className: styles$m['pill-select-field']
     }, React__default.createElement("input", {
       name: name + "-" + itemIdentifier,
       id: itemId,
@@ -4559,7 +4613,7 @@ var PillSelectField = function PillSelectField(_ref) {
         controllers.onChange(newValue);
       }
     }), React__default.createElement("span", {
-      className: styles$l['pill-select-field__custom-input']
+      className: styles$m['pill-select-field__custom-input']
     }, option.label));
   })));
 };
@@ -4607,7 +4661,7 @@ var useRadioGroupFieldContext = function useRadioGroupFieldContext() {
   return context;
 };
 
-var styles$m = {"label":"_1WGz2","radio-group-field__label":"_RXyG_"};
+var styles$n = {"label":"_1WGz2","radio-group-field__label":"_RXyG_"};
 
 var RadioGroupField = function RadioGroupField(_ref) {
   var name = _ref.name,
@@ -4640,7 +4694,7 @@ var RadioGroupField = function RadioGroupField(_ref) {
   }, React__default.createElement(Stack, {
     space: 12
   }, label && React__default.createElement("div", {
-    className: styles$m['radio-group-field__label']
+    className: styles$n['radio-group-field__label']
   }, label), React__default.createElement(Stack, {
     space: 8
   }, inline ? React__default.createElement(InlineOptions, null, children) : React__default.createElement(Stack, {
@@ -4674,7 +4728,7 @@ var InlineOptions = function InlineOptions(_ref2) {
   return React__default.createElement(FormRow, null, children);
 };
 
-var styles$n = {"radio-group-option":"_1Clmp","radio-group-option__caption":"_3UmWA","radio-group-option__custom-input":"_1tMq-"};
+var styles$o = {"radio-group-option":"_1Clmp","radio-group-option__caption":"_3UmWA","radio-group-option__custom-input":"_1tMq-"};
 
 var RadioGroupOption = function RadioGroupOption(_ref) {
   var value = _ref.value,
@@ -4692,7 +4746,7 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     space: 8,
     alignItems: "center"
   }, React__default.createElement("div", {
-    className: styles$n['radio-group-option']
+    className: styles$o['radio-group-option']
   }, React__default.createElement("input", {
     type: "radio",
     id: id,
@@ -4702,19 +4756,19 @@ var RadioGroupOption = function RadioGroupOption(_ref) {
     checked: radioGroupContext.value !== undefined ? radioGroupContext.value === value : undefined,
     disabled: radioGroupContext.disabled
   }), React__default.createElement("span", {
-    className: styles$n['radio-group-option__custom-input']
+    className: styles$o['radio-group-option__custom-input']
   })), label && React__default.createElement(Label, {
     htmlFor: id
   }, label)), caption && React__default.createElement("div", {
-    className: styles$n['radio-group-option__caption']
+    className: styles$o['radio-group-option__caption']
   }, React__default.createElement(Caption, {
     fieldId: id
   }, caption)));
 };
 
-var styles$o = {"text-field":"_18Rzv","text-field--invalid":"_3eD7t","text-field--prefixed":"_2evrG","text-field--suffixed":"_-MgeO","password-container":"_-Rf3c","password-toggle":"_yinPY"};
+var styles$p = {"text-field":"_18Rzv","text-field--invalid":"_3eD7t","text-field--prefixed":"_2evrG","text-field--suffixed":"_-MgeO","password-container":"_-Rf3c","password-toggle":"_yinPY"};
 
-var styles$p = {"password-criteria":"_U0krC","password-criteria--invalid":"_2XIl4"};
+var styles$q = {"password-criteria":"_U0krC","password-criteria--invalid":"_2XIl4"};
 
 var PasswordCriteria = function PasswordCriteria(_ref) {
   var _classnames;
@@ -4722,7 +4776,7 @@ var PasswordCriteria = function PasswordCriteria(_ref) {
   var met = _ref.met,
       children = _ref.children;
   return React__default.createElement("span", {
-    className: classnames(styles$p['password-criteria'], (_classnames = {}, _classnames[styles$p['password-criteria--invalid']] = !met, _classnames))
+    className: classnames(styles$q['password-criteria'], (_classnames = {}, _classnames[styles$q['password-criteria--invalid']] = !met, _classnames))
   }, React__default.createElement(Inline, {
     space: met ? 4 : 8
   }, met ? React__default.createElement(IconCheck, {
@@ -4806,11 +4860,11 @@ var PasswordField = function PasswordField(_ref) {
     error: controllers.error
   };
   return React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement("div", {
-    className: styles$o['password-container']
+    className: styles$p['password-container']
   }, React__default.createElement("input", {
     name: name,
     id: controllers.id,
-    className: classnames(styles$o['text-field'], (_classnames = {}, _classnames[styles$o['text-field--invalid']] = hasError, _classnames)),
+    className: classnames(styles$p['text-field'], (_classnames = {}, _classnames[styles$p['text-field--invalid']] = hasError, _classnames)),
     type: type,
     "data-testid": "text-field-" + name,
     "aria-describedby": hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
@@ -4822,7 +4876,7 @@ var PasswordField = function PasswordField(_ref) {
     onChange: controllers.onChange,
     onBlur: controllers.onBlur
   }), React__default.createElement("div", {
-    className: styles$o['password-toggle'],
+    className: styles$p['password-toggle'],
     onClick: toggleType,
     onKeyPress: toggleType,
     "data-testid": "password-toggle",
@@ -5060,7 +5114,7 @@ var MultiSelectField = function MultiSelectField(_ref) {
   }));
 };
 
-var styles$q = {"custom-control":"_1cDCR"};
+var styles$r = {"custom-control":"_1cDCR"};
 
 var _excluded$5 = ["children", "CustomPrefixComponent"];
 
@@ -5073,7 +5127,7 @@ function CustomControl(_ref) {
 
   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", {
-    className: styles$q['custom-control'],
+    className: styles$r['custom-control'],
     style: {
       paddingLeft: selectedOption ? 8 : 0
     }
@@ -5258,14 +5312,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$r = {"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;
   }
 
@@ -5318,7 +5372,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),
@@ -5342,7 +5397,7 @@ var DateField = function DateField(_ref) {
     error: controllers.error
   };
   var dayPickerProps = {
-    classNames: styles$r,
+    classNames: dayStyles,
     disabledDays: function disabledDays(day) {
       return _disabledDays && _disabledDays(setToMidnight(day));
     },
@@ -5351,7 +5406,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, {
@@ -5359,7 +5415,7 @@ var DateField = function DateField(_ref) {
     })
   }, React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$r,
+    classNames: dayStyles,
     formatDate: formatDate,
     parseDate: parseDate,
     placeholder: placeholder || format.toUpperCase(),
@@ -5759,7 +5815,7 @@ var DateRangeField = function DateRangeField(_ref) {
   })));
 };
 
-var styles$t = {"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;
@@ -5834,7 +5890,7 @@ var WeekField = function WeekField(_ref) {
   };
 
   var dayPickerProps = {
-    classNames: styles$t,
+    classNames: weekStyles,
     disabledDays: function disabledDays(day) {
       return _disabledDays && _disabledDays(setToMidnight(day));
     },
@@ -5864,7 +5920,7 @@ var WeekField = function WeekField(_ref) {
     })
   }, React__default.createElement(DayPickerInput, {
     format: format,
-    classNames: styles$t,
+    classNames: weekStyles,
     formatDate: formatDate,
     parseDate: parseDate,
     placeholder: placeholder || format.toUpperCase(),
@@ -6060,39 +6116,9 @@ var PercentageElement = function PercentageElement(_ref, ref) {
 
 var PercentageField = React.forwardRef(PercentageElement);
 
-var styles$u = {"caption":"_1QDLF","label":"_2wiMV","toggle":"_1ui8X","toggle__label":"_1YRJT","toggle__caption":"_1jEiW","toggle__switch":"_3tNyE"};
-
-var Toggle = function Toggle(_ref) {
-  var checked = _ref.checked,
-      label = _ref.label,
-      caption = _ref.caption,
-      onChange = _ref.onChange,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      id = _ref.id;
-  return React__default.createElement(Stack, {
-    space: 8
-  }, React__default.createElement("label", {
-    className: styles$u['toggle']
-  }, React__default.createElement("input", {
-    "data-testid": "toggle",
-    type: "checkbox",
-    checked: checked,
-    onChange: onChange,
-    disabled: disabled,
-    id: id
-  }), React__default.createElement("span", {
-    className: styles$u['toggle__switch']
-  }), label && React__default.createElement("span", {
-    className: styles$u['toggle__label']
-  }, label)), caption && React__default.createElement("span", {
-    className: styles$u['toggle__caption']
-  }, caption));
-};
-
-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 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 styles$w = {"header":"_36nxW","sub-header":"_2XwRD"};
+var styles$u = {"header":"_36nxW","sub-header":"_2XwRD"};
 
 var ModalHeader = function ModalHeader(_ref) {
   var header = _ref.header,
@@ -6104,12 +6130,12 @@ var ModalHeader = function ModalHeader(_ref) {
     flex: [1],
     alignItems: "center"
   }, React__default.createElement("span", {
-    className: styles$w['header']
+    className: styles$u['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$u['sub-header']
   }, subHeader));
 };
 
@@ -6145,14 +6171,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$t['overlay'],
+      afterOpen: styles$t['overlay--after-open'],
+      beforeClose: styles$t['overlay--before-close']
     },
     className: {
-      base: styles$v['content'],
-      afterOpen: styles$v['content--after-open'],
-      beforeClose: styles$v['content--before-close']
+      base: styles$t['content'],
+      afterOpen: styles$t['content--after-open'],
+      beforeClose: styles$t['content--before-close']
     }
   }, React__default.createElement(ModalHeader, {
     header: header,
@@ -6165,16 +6191,16 @@ Modal.setAppElement = function (rootElement) {
   ReactModal.setAppElement(rootElement);
 };
 
-var styles$x = {"modal-body":"_2J-ku"};
+var styles$v = {"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$v['modal-body']
   }, children);
 };
 
-var styles$y = {"modal-footer":"_LKOr5","tertiary-container":"_Qktd-"};
+var styles$w = {"modal-footer":"_LKOr5","tertiary-container":"_Qktd-"};
 
 var ModalFooter = function ModalFooter(_ref) {
   var children = _ref.children,
@@ -6195,7 +6221,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$w['tertiary-container']] = tertiaryButton && tertiaryButton.props.theme.startsWith('link'), _classnames))
     }, tertiaryButton || React__default.createElement("div", null)), React__default.createElement(Inline, {
       space: 12
     }, secondaryButton, primaryButton)));
@@ -6223,7 +6249,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$w['modal-footer']
   }, React__default.createElement(Inline, {
     justifyContent: "end",
     space: 12,
@@ -6231,7 +6257,161 @@ 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$x = {"badge":"_2f81N","badge--warning":"_2g1GI","badge--danger":"_2zLnM","badge--success":"_27QOo","badge--info":"_2gmsM"};
 
 var _excluded$a = ["children", "theme", "title"];
 
@@ -6254,16 +6434,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$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)),
     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$y = {"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$z = {"avatar-image":"_GKL9P"};
 
 var AvatarImage = function AvatarImage(_ref) {
   var url = _ref.url,
@@ -6288,7 +6468,7 @@ var AvatarImage = function AvatarImage(_ref) {
   }
 
   return React__default.createElement("div", {
-    className: styles$B['avatar-image']
+    className: styles$z['avatar-image']
   }, React__default.createElement(IconUserSolid, {
     size: "flexible",
     color: color
@@ -6356,7 +6536,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$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)),
     style: {
       backgroundColor: children || url && !showIconInsteadOfImage ? backgroundColor : defaultProfilePictureColors.backgroundColor
     }
@@ -6368,13 +6548,14 @@ var Avatar = function Avatar(_ref) {
       return setShowIconInsteadOfImage(true);
     }
   }), badge && size !== 'small' && React__default.createElement("div", {
-    className: styles$A['avatar__badge']
+    className: styles$y['avatar__badge']
   }, badge));
 };
 
 exports.Avatar = Avatar;
 exports.Badge = Badge$1;
 exports.Button = Button$1;
+exports.Calendar = Calendar;
 exports.CheckboxField = CheckboxField;
 exports.CurrencyField = CurrencyField;
 exports.DataTable = DataTable;