@zendeskgarden/react-datepickers 8.57.0 → 8.58.0

package/dist/index.cjs.js

@@ -41,161 +41,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
-  }
-
-  return target;
-}
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-function _extends$2() {
-  _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-  return _extends$2.apply(this, arguments);
-}
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-
-  var _s, _e;
-
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-var SHARED_PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'];
-var PLACEMENT = [].concat(SHARED_PLACEMENT, ['end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom']);
+const SHARED_PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'];
+const PLACEMENT = [...SHARED_PLACEMENT, 'end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom'];
 
 function getPopperPlacement(gardenPlacement) {
   switch (gardenPlacement) {
@@ -216,7 +63,7 @@ function getPopperPlacement(gardenPlacement) {
   }
 }
 function getRtlPopperPlacement(gardenPlacement) {
-  var popperPlacement = getPopperPlacement(gardenPlacement);
+  const popperPlacement = getPopperPlacement(gardenPlacement);
   switch (popperPlacement) {
     case 'left':
       return 'right';
@@ -415,216 +262,173 @@ function getDate(dirtyDate) {
   return dayOfMonth;
 }
 
-var COMPONENT_ID$b = 'datepickers.menu';
-var StyledMenu = styled__default["default"].div.attrs({
+const COMPONENT_ID$b = 'datepickers.menu';
+const StyledMenu = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.57.0'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-1npbkk0-0"
-})(["", ";"], function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props);
-});
+})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
 StyledMenu.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$a = 'datepickers.menu_wrapper';
-var StyledMenuWrapper = styled__default["default"].div.attrs(function (props) {
-  return {
-    className: props.isAnimated && 'is-animated'
-  };
-}).withConfig({
+const COMPONENT_ID$a = 'datepickers.menu_wrapper';
+const StyledMenuWrapper = styled__default["default"].div.attrs(props => ({
+  className: props.isAnimated && 'is-animated'
+})).withConfig({
   displayName: "StyledMenuWrapper",
   componentId: "sc-6fowoz-0"
-})(["", ";", ";"], function (props) {
-  return reactTheming.menuStyles(getMenuPosition(props.placement), {
-    theme: props.theme,
-    hidden: props.isHidden,
-    margin: "".concat(props.theme.space.base, "px"),
-    zIndex: props.zIndex,
-    animationModifier: props.isAnimated ? '.is-animated' : undefined
-  });
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props);
-});
+})(["", ";", ";"], props => reactTheming.menuStyles(getMenuPosition(props.placement), {
+  theme: props.theme,
+  hidden: props.isHidden,
+  margin: `${props.theme.space.base}px`,
+  zIndex: props.zIndex,
+  animationModifier: props.isAnimated ? '.is-animated' : undefined
+}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
 StyledMenuWrapper.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$9 = 'datepickers.datepicker';
-var retrievePadding = function retrievePadding(_ref) {
-  var isCompact = _ref.isCompact,
-      theme = _ref.theme;
-  var value = theme.space.base * 5;
+const COMPONENT_ID$9 = 'datepickers.datepicker';
+const retrievePadding = _ref => {
+  let {
+    isCompact,
+    theme
+  } = _ref;
+  let value = theme.space.base * 5;
   if (isCompact) {
     value = theme.space.base * 4;
   }
-  return "margin: ".concat(value, "px;");
+  return `margin: ${value}px;`;
 };
-var StyledDatepicker = styled__default["default"].div.attrs({
+const StyledDatepicker = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$9
 }).withConfig({
   displayName: "StyledDatepicker",
   componentId: "sc-w3zqsp-0"
-})(["direction:", ";", " background-color:", ";color:", ";", ";"], function (props) {
-  return props.theme.rtl && 'rtl';
-}, retrievePadding, function (props) {
-  return props.theme.colors.background;
-}, function (props) {
-  return props.theme.colors.foreground;
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props);
-});
+})(["direction:", ";", " background-color:", ";color:", ";", ";"], props => props.theme.rtl && 'rtl', retrievePadding, props => props.theme.colors.background, props => props.theme.colors.foreground, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledDatepicker.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$8 = 'datepickers.range_calendar';
-var StyledRangeCalendar = styled__default["default"].div.attrs({
+const COMPONENT_ID$8 = 'datepickers.range_calendar';
+const StyledRangeCalendar = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$8
 }).withConfig({
   displayName: "StyledRangeCalendar",
   componentId: "sc-1og46sy-0"
-})(["display:flex;overflow:auto;", "{margin:0;", "}", ";"], StyledDatepicker, function (props) {
-  return props.theme.rtl ? "&:last-of-type {margin-right: ".concat(props.theme.space.base * 5, "px}") : "&:first-of-type {margin-right: ".concat(props.theme.space.base * 5, "px}");
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props);
-});
+})(["display:flex;overflow:auto;", "{margin:0;", "}", ";"], StyledDatepicker, props => props.theme.rtl ? `&:last-of-type {margin-right: ${props.theme.space.base * 5}px}` : `&:first-of-type {margin-right: ${props.theme.space.base * 5}px}`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
 StyledRangeCalendar.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$7 = 'datepickers.header';
-var StyledHeader = styled__default["default"].div.attrs({
+const COMPONENT_ID$7 = 'datepickers.header';
+const StyledHeader = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$7
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-upq318-0"
-})(["display:flex;width:", "px;", ";"], function (props) {
-  return props.isCompact ? props.theme.space.base * 56 : props.theme.space.base * 70;
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props);
-});
+})(["display:flex;width:", "px;", ";"], props => props.isCompact ? props.theme.space.base * 56 : props.theme.space.base * 70, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
 StyledHeader.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var retrieveSizing = function retrieveSizing(_ref) {
-  var isCompact = _ref.isCompact,
-      theme = _ref.theme;
-  var size = theme.space.base * 10;
+const retrieveSizing = _ref => {
+  let {
+    isCompact,
+    theme
+  } = _ref;
+  let size = theme.space.base * 10;
   if (isCompact) {
     size = theme.space.base * 8;
   }
   return styled.css(["width:", "px;height:", "px;"], size, size);
 };
-var retrieveColor$1 = function retrieveColor(_ref2) {
-  var theme = _ref2.theme;
+const retrieveColor$1 = _ref2 => {
+  let {
+    theme
+  } = _ref2;
   return styled.css([":hover{background-color:", ";color:", ";}:active{background-color:", ";color:", ";}color:", ";"], reactTheming.getColor('primaryHue', 600, theme, 0.08), theme.colors.foreground, reactTheming.getColor('primaryHue', 600, theme, 0.2), theme.colors.foreground, reactTheming.getColor('neutralHue', 600, theme));
 };
-var COMPONENT_ID$6 = 'datepickers.header_paddle';
-var StyledHeaderPaddle = styled__default["default"].div.attrs({
+const COMPONENT_ID$6 = 'datepickers.header_paddle';
+const StyledHeaderPaddle = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$6
 }).withConfig({
   displayName: "StyledHeaderPaddle",
   componentId: "sc-2oqh0g-0"
-})(["display:flex;align-items:center;justify-content:center;transform:", ";visibility:", ";border-radius:50%;cursor:pointer;", " ", " svg{width:", ";height:", ";}", ";"], function (props) {
-  return props.theme.rtl && 'rotate(180deg)';
-}, function (props) {
-  return props.isHidden && 'hidden';
-},
-retrieveSizing, retrieveColor$1, function (props) {
-  return "".concat(props.theme.iconSizes.md);
-}, function (props) {
-  return "".concat(props.theme.iconSizes.md);
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props);
-});
+})(["display:flex;align-items:center;justify-content:center;transform:", ";visibility:", ";border-radius:50%;cursor:pointer;", " ", " svg{width:", ";height:", ";}", ";"], props => props.theme.rtl && 'rotate(180deg)', props => props.isHidden && 'hidden', retrieveSizing, retrieveColor$1, props => `${props.theme.iconSizes.md}`, props => `${props.theme.iconSizes.md}`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledHeaderPaddle.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$5 = 'datepickers.header_label';
-var StyledHeaderLabel = styled__default["default"].div.attrs({
+const COMPONENT_ID$5 = 'datepickers.header_label';
+const StyledHeaderLabel = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$5
 }).withConfig({
   displayName: "StyledHeaderLabel",
   componentId: "sc-1ryf5ub-0"
-})(["display:flex;flex-grow:1;align-items:center;justify-content:center;font-size:", ";font-weight:", ";", ";"], function (props) {
-  return props.isCompact ? props.theme.fontSizes.sm : props.theme.fontSizes.md;
-}, function (props) {
-  return props.theme.fontWeights.semibold;
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props);
-});
+})(["display:flex;flex-grow:1;align-items:center;justify-content:center;font-size:", ";font-weight:", ";", ";"], props => props.isCompact ? props.theme.fontSizes.sm : props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledHeaderLabel.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$4 = 'datepickers.calendar';
-var StyledCalendar = styled__default["default"].div.attrs({
+const COMPONENT_ID$4 = 'datepickers.calendar';
+const StyledCalendar = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$4
 }).withConfig({
   displayName: "StyledCalendar",
   componentId: "sc-g5hoe8-0"
-})(["width:", "px;", ";"], function (props) {
-  return props.isCompact ? props.theme.space.base * 56 : props.theme.space.base * 70;
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props);
-});
+})(["width:", "px;", ";"], props => props.isCompact ? props.theme.space.base * 56 : props.theme.space.base * 70, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledCalendar.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$3 = 'datepickers.calendar_item';
-var retrieveSize = function retrieveSize(_ref) {
-  var isCompact = _ref.isCompact,
-      theme = _ref.theme;
-  var size;
+const COMPONENT_ID$3 = 'datepickers.calendar_item';
+const retrieveSize = _ref => {
+  let {
+    isCompact,
+    theme
+  } = _ref;
+  let size;
   if (isCompact) {
-    size = "".concat(theme.space.base * 8, "px");
+    size = `${theme.space.base * 8}px`;
   } else {
-    size = "".concat(theme.space.base * 10, "px");
+    size = `${theme.space.base * 10}px`;
   }
   return styled.css(["width:", ";height:", ";"], size, size);
 };
-var StyledCalendarItem = styled__default["default"].div.attrs({
+const StyledCalendarItem = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$3
 }).withConfig({
   displayName: "StyledCalendarItem",
   componentId: "sc-143w8wb-0"
-})(["display:inline-block;position:relative;vertical-align:top;", " ", ";"], retrieveSize, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props);
-});
+})(["display:inline-block;position:relative;vertical-align:top;", " ", ";"], retrieveSize, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledCalendarItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$2 = 'datepickers.day_label';
-var StyledDayLabel = styled__default["default"].div.attrs({
+const COMPONENT_ID$2 = 'datepickers.day_label';
+const StyledDayLabel = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$2
 }).withConfig({
   displayName: "StyledDayLabel",
   componentId: "sc-9bh1p7-0"
-})(["display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:", ";font-weight:", ";", ";"], function (props) {
-  return props.isCompact ? props.theme.fontSizes.sm : props.theme.fontSizes.md;
-}, function (props) {
-  return props.theme.fontWeights.semibold;
-}, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props);
-});
+})(["display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:", ";font-weight:", ";", ";"], props => props.isCompact ? props.theme.fontSizes.sm : props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledDayLabel.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var COMPONENT_ID$1 = 'datepickers.highlight';
-var retrieveBorderRadius = function retrieveBorderRadius(_ref) {
-  var theme = _ref.theme,
-      isEnd = _ref.isEnd,
-      isStart = _ref.isStart;
-  var startValue = 'border-radius: 0 50% 50% 0;';
-  var endValue = 'border-radius: 50% 0 0 50%;';
+const COMPONENT_ID$1 = 'datepickers.highlight';
+const retrieveBorderRadius = _ref => {
+  let {
+    theme,
+    isEnd,
+    isStart
+  } = _ref;
+  const startValue = 'border-radius: 0 50% 50% 0;';
+  const endValue = 'border-radius: 50% 0 0 50%;';
   if (theme.rtl) {
     if (isStart) {
       return startValue;
@@ -639,34 +443,36 @@ var retrieveBorderRadius = function retrieveBorderRadius(_ref) {
   }
   return '';
 };
-var retrieveColor = function retrieveColor(_ref2) {
-  var isHighlighted = _ref2.isHighlighted,
-      theme = _ref2.theme;
+const retrieveColor = _ref2 => {
+  let {
+    isHighlighted,
+    theme
+  } = _ref2;
   if (isHighlighted) {
     return styled.css(["background-color:", ";"], reactTheming.getColor('primaryHue', 600, theme, 0.08));
   }
   return styled.css([""]);
 };
-var StyledHighlight = styled__default["default"].div.attrs({
+const StyledHighlight = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$1
 }).withConfig({
   displayName: "StyledHighlight",
   componentId: "sc-16vr32x-0"
-})(["position:absolute;top:0;left:0;width:100%;height:100%;", " ", " ", ";"], retrieveBorderRadius, retrieveColor, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props);
-});
+})(["position:absolute;top:0;left:0;width:100%;height:100%;", " ", " ", ";"], retrieveBorderRadius, retrieveColor, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledHighlight.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var retrieveStyledDayColors = function retrieveStyledDayColors(_ref) {
-  var isSelected = _ref.isSelected,
-      isDisabled = _ref.isDisabled,
-      isToday = _ref.isToday,
-      isPreviousMonth = _ref.isPreviousMonth,
-      theme = _ref.theme;
-  var backgroundColor = 'inherit';
-  var color = reactTheming.getColor('primaryHue', 600, theme);
+const retrieveStyledDayColors = _ref => {
+  let {
+    isSelected,
+    isDisabled,
+    isToday,
+    isPreviousMonth,
+    theme
+  } = _ref;
+  let backgroundColor = 'inherit';
+  let color = reactTheming.getColor('primaryHue', 600, theme);
   if (isSelected && !isDisabled) {
     backgroundColor = reactTheming.getColor('primaryHue', 600, theme);
     color = theme.colors.background;
@@ -677,36 +483,36 @@ var retrieveStyledDayColors = function retrieveStyledDayColors(_ref) {
   } else if (isPreviousMonth) {
     color = reactTheming.getColor('neutralHue', 600, theme);
   }
-  return styled.css(["background-color:", ";color:", ";", ""], backgroundColor, color, !isSelected && !isDisabled && "\n      :hover {\n        background-color: ".concat(reactTheming.getColor('primaryHue', 600, theme, 0.08), ";\n        color: ").concat(reactTheming.getColor('primaryHue', 800, theme), ";\n      }\n\n      :active {\n        background-color: ").concat(reactTheming.getColor('primaryHue', 600, theme, 0.2), ";\n        color: ").concat(reactTheming.getColor('primaryHue', 800, theme), ";\n      }\n  "));
+  return styled.css(["background-color:", ";color:", ";", ""], backgroundColor, color, !isSelected && !isDisabled && `
+      :hover {
+        background-color: ${reactTheming.getColor('primaryHue', 600, theme, 0.08)};
+        color: ${reactTheming.getColor('primaryHue', 800, theme)};
+      }
+
+      :active {
+        background-color: ${reactTheming.getColor('primaryHue', 600, theme, 0.2)};
+        color: ${reactTheming.getColor('primaryHue', 800, theme)};
+      }
+  `);
 };
-var COMPONENT_ID = 'datepickers.day';
-var StyledDay = styled__default["default"].div.attrs(function (props) {
-  return {
-    'data-garden-id': COMPONENT_ID,
-    'aria-disabled': props.isDisabled ? 'true' : 'false'
-  };
-}).withConfig({
+const COMPONENT_ID = 'datepickers.day';
+const StyledDay = styled__default["default"].div.attrs(props => ({
+  'data-garden-id': COMPONENT_ID,
+  'aria-disabled': props.isDisabled ? 'true' : 'false'
+})).withConfig({
   displayName: "StyledDay",
   componentId: "sc-v42uk5-0"
-})(["display:flex;position:absolute;align-items:center;justify-content:center;border-radius:50%;cursor:", ";width:100%;height:100%;font-size:", ";font-weight:", ";", " ", ";"], function (props) {
-  return props.isDisabled ? 'inherit' : 'pointer';
-}, function (props) {
-  return props.isCompact ? props.theme.fontSizes.sm : props.theme.fontSizes.md;
-}, function (props) {
-  return props.isToday && !props.isDisabled ? props.theme.fontWeights.semibold : 'inherit';
-}, retrieveStyledDayColors, function (props) {
-  return reactTheming.retrieveComponentStyles(COMPONENT_ID, props);
-});
+})(["display:flex;position:absolute;align-items:center;justify-content:center;border-radius:50%;cursor:", ";width:100%;height:100%;font-size:", ";font-weight:", ";", " ", ";"], props => props.isDisabled ? 'inherit' : 'pointer', props => props.isCompact ? props.theme.fontSizes.sm : props.theme.fontSizes.md, props => props.isToday && !props.isDisabled ? props.theme.fontWeights.semibold : 'inherit', retrieveStyledDayColors, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
 StyledDay.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var DatepickerContext = React.createContext(undefined);
-var useDatepickerContext$1 = function useDatepickerContext() {
+const DatepickerContext = React.createContext(undefined);
+const useDatepickerContext$1 = () => {
   return React.useContext(DatepickerContext);
 };
 
-var REGION_MAPPINGS = {
+const REGION_MAPPINGS = {
   'ar-DZ': 0,
   'ar-SA': 0,
   'en-CA': 0,
@@ -719,7 +525,7 @@ var REGION_MAPPINGS = {
   'zh-CN': 1,
   'zh-TW': 1
 };
-var LANGUAGE_MAPPINGS = {
+const LANGUAGE_MAPPINGS = {
   af: 0,
   ar: 6,
   be: 1,
@@ -774,12 +580,12 @@ function getStartOfWeek(locale) {
   if (!locale) {
     return 0;
   }
-  for (var region in REGION_MAPPINGS) {
+  for (const region in REGION_MAPPINGS) {
     if (locale.startsWith(region)) {
       return REGION_MAPPINGS[region];
     }
   }
-  for (var language in LANGUAGE_MAPPINGS) {
+  for (const language in LANGUAGE_MAPPINGS) {
     if (locale.startsWith(language)) {
       return LANGUAGE_MAPPINGS[language];
     }
@@ -789,16 +595,17 @@ function getStartOfWeek(locale) {
 
 var _path$1;
 
-function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
 
 var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z"
@@ -807,30 +614,34 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
 
 var _path;
 
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
 
 var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z"
   })));
 };
 
-var MonthSelector = function MonthSelector(_ref) {
-  var locale = _ref.locale,
-      isCompact = _ref.isCompact;
-  var _useDatepickerContext = useDatepickerContext$1(),
-      state = _useDatepickerContext.state,
-      dispatch = _useDatepickerContext.dispatch;
-  var headerLabelFormatter = React.useCallback(function (date) {
-    var formatter = new Intl.DateTimeFormat(locale, {
+const MonthSelector = _ref => {
+  let {
+    locale,
+    isCompact
+  } = _ref;
+  const {
+    state,
+    dispatch
+  } = useDatepickerContext$1();
+  const headerLabelFormatter = React.useCallback(date => {
+    const formatter = new Intl.DateTimeFormat(locale, {
       month: 'long',
       year: 'numeric'
     });
@@ -840,7 +651,7 @@ var MonthSelector = function MonthSelector(_ref) {
     isCompact: isCompact
   }, React__default["default"].createElement(StyledHeaderPaddle, {
     isCompact: isCompact,
-    onClick: function onClick() {
+    onClick: () => {
       dispatch({
         type: 'PREVIEW_PREVIOUS_MONTH'
       });
@@ -849,7 +660,7 @@ var MonthSelector = function MonthSelector(_ref) {
     isCompact: isCompact
   }, headerLabelFormatter(state.previewDate)), React__default["default"].createElement(StyledHeaderPaddle, {
     isCompact: isCompact,
-    onClick: function onClick() {
+    onClick: () => {
       dispatch({
         type: 'PREVIEW_NEXT_MONTH'
       });
@@ -857,52 +668,55 @@ var MonthSelector = function MonthSelector(_ref) {
   }, React__default["default"].createElement(SvgChevronRightStroke, null)));
 };
 
-var Calendar$1 = React.forwardRef(function (_ref, ref) {
-  var value = _ref.value,
-      minValue = _ref.minValue,
-      maxValue = _ref.maxValue,
-      isCompact = _ref.isCompact,
-      locale = _ref.locale,
-      weekStartsOn = _ref.weekStartsOn;
-  var _useDatepickerContext = useDatepickerContext$1(),
-      state = _useDatepickerContext.state,
-      dispatch = _useDatepickerContext.dispatch;
-  var preferredWeekStartsOn = weekStartsOn || getStartOfWeek(locale);
-  var monthStartDate = startOfMonth(state.previewDate);
-  var monthEndDate = endOfMonth(monthStartDate);
-  var startDate = startOfWeek(monthStartDate, {
+const Calendar$1 = React.forwardRef((_ref, ref) => {
+  let {
+    value,
+    minValue,
+    maxValue,
+    isCompact,
+    locale,
+    weekStartsOn
+  } = _ref;
+  const {
+    state,
+    dispatch
+  } = useDatepickerContext$1();
+  const preferredWeekStartsOn = weekStartsOn || getStartOfWeek(locale);
+  const monthStartDate = startOfMonth(state.previewDate);
+  const monthEndDate = endOfMonth(monthStartDate);
+  const startDate = startOfWeek(monthStartDate, {
     weekStartsOn: preferredWeekStartsOn
   });
-  var endDate = endOfWeek(monthEndDate, {
+  const endDate = endOfWeek(monthEndDate, {
     weekStartsOn: preferredWeekStartsOn
   });
-  var dayLabelFormatter = React.useCallback(function (date) {
-    var formatter = new Intl.DateTimeFormat(locale, {
+  const dayLabelFormatter = React.useCallback(date => {
+    const formatter = new Intl.DateTimeFormat(locale, {
       weekday: 'short'
     });
     return formatter.format(date);
   }, [locale]);
-  var dayLabels = eachDayOfInterval({
+  const dayLabels = eachDayOfInterval({
     start: startDate,
     end: addDays(startDate, 6)
-  }).map(function (date) {
-    var formattedDayLabel = dayLabelFormatter(date);
+  }).map(date => {
+    const formattedDayLabel = dayLabelFormatter(date);
     return React__default["default"].createElement(StyledCalendarItem, {
-      key: "day-label-".concat(formattedDayLabel),
+      key: `day-label-${formattedDayLabel}`,
       isCompact: isCompact
     }, React__default["default"].createElement(StyledDayLabel, {
       isCompact: isCompact
     }, formattedDayLabel));
   });
-  var items = eachDayOfInterval({
+  const items = eachDayOfInterval({
     start: startDate,
     end: endDate
-  }).map(function (date, itemsIndex) {
-    var formattedDayLabel = getDate(date);
-    var isCurrentDate = isToday(date);
-    var isPreviousMonth = !isSameMonth(date, state.previewDate);
-    var isSelected = value && isSameDay(date, value);
-    var isDisabled = false;
+  }).map((date, itemsIndex) => {
+    const formattedDayLabel = getDate(date);
+    const isCurrentDate = isToday(date);
+    const isPreviousMonth = !isSameMonth(date, state.previewDate);
+    const isSelected = value && isSameDay(date, value);
+    let isDisabled = false;
     if (minValue !== undefined) {
       isDisabled = isBefore(date, minValue) && !isSameDay(date, minValue);
     }
@@ -910,7 +724,7 @@ var Calendar$1 = React.forwardRef(function (_ref, ref) {
       isDisabled = isDisabled || isAfter(date, maxValue) && !isSameDay(date, maxValue);
     }
     return React__default["default"].createElement(StyledCalendarItem, {
-      key: "day-".concat(itemsIndex),
+      key: `day-${itemsIndex}`,
       isCompact: isCompact
     }, React__default["default"].createElement(StyledDay, {
       isToday: isCurrentDate,
@@ -918,7 +732,7 @@ var Calendar$1 = React.forwardRef(function (_ref, ref) {
       isSelected: isSelected,
       isDisabled: isDisabled,
       isCompact: isCompact,
-      onClick: function onClick() {
+      onClick: () => {
         if (!isDisabled) {
           dispatch({
             type: 'SELECT_DATE',
@@ -931,7 +745,7 @@ var Calendar$1 = React.forwardRef(function (_ref, ref) {
   return React__default["default"].createElement(StyledDatepicker, {
     ref: ref,
     isCompact: isCompact,
-    onMouseDown: function onMouseDown(e) {
+    onMouseDown: e => {
       e.preventDefault();
     }
   }, React__default["default"].createElement(MonthSelector, {
@@ -1101,6 +915,7 @@ var formatLong = {
     defaultWidth: 'full'
   })
 };
+var formatLong$1 = formatLong;
 
 var formatRelativeLocale = {
   lastWeek: "'last' eeee 'at' p",
@@ -1261,6 +1076,7 @@ var localize = {
     defaultFormattingWidth: 'wide'
   })
 };
+var localize$1 = localize;
 
 function buildMatchPatternFn(args) {
   return function (string) {
@@ -1418,20 +1234,22 @@ var match = {
     defaultParseWidth: 'any'
   })
 };
+var match$1 = match;
 
 var locale = {
   code: 'en-US',
   formatDistance: formatDistance,
-  formatLong: formatLong,
+  formatLong: formatLong$1,
   formatRelative: formatRelative,
-  localize: localize,
-  match: match,
+  localize: localize$1,
+  match: match$1,
   options: {
     weekStartsOn: 0
     ,
     firstWeekContainsDate: 1
   }
 };
+var defaultLocale = locale;
 
 function addMilliseconds(dirtyDate, dirtyAmount) {
   requiredArgs(2, arguments);
@@ -1538,6 +1356,7 @@ var longFormatters = {
   p: timeLongFormatter,
   P: dateTimeLongFormatter
 };
+var longFormatters$1 = longFormatters;
 
 function getTimezoneOffsetInMilliseconds(date) {
   var utcDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()));
@@ -2949,6 +2768,7 @@ var parsers = {
     incompatibleTokens: '*'
   }
 };
+var parsers$1 = parsers;
 
 var TIMEZONE_UNIT_PRIORITY = 10;
 var formattingTokensRegExp = /[yYQqMLwIdDecihHKkms]o|(\w)\1*|''|'(''|[^'])+('|$)|./g;
@@ -2962,17 +2782,17 @@ function parse(dirtyDateString, dirtyFormatString, dirtyReferenceDate, dirtyOpti
   var dateString = String(dirtyDateString);
   var formatString = String(dirtyFormatString);
   var options = dirtyOptions || {};
-  var locale$1 = options.locale || locale;
-  if (!locale$1.match) {
+  var locale = options.locale || defaultLocale;
+  if (!locale.match) {
     throw new RangeError('locale must contain match property');
   }
-  var localeFirstWeekContainsDate = locale$1.options && locale$1.options.firstWeekContainsDate;
+  var localeFirstWeekContainsDate = locale.options && locale.options.firstWeekContainsDate;
   var defaultFirstWeekContainsDate = localeFirstWeekContainsDate == null ? 1 : toInteger(localeFirstWeekContainsDate);
   var firstWeekContainsDate = options.firstWeekContainsDate == null ? defaultFirstWeekContainsDate : toInteger(options.firstWeekContainsDate);
   if (!(firstWeekContainsDate >= 1 && firstWeekContainsDate <= 7)) {
     throw new RangeError('firstWeekContainsDate must be between 1 and 7 inclusively');
   }
-  var localeWeekStartsOn = locale$1.options && locale$1.options.weekStartsOn;
+  var localeWeekStartsOn = locale.options && locale.options.weekStartsOn;
   var defaultWeekStartsOn = localeWeekStartsOn == null ? 0 : toInteger(localeWeekStartsOn);
   var weekStartsOn = options.weekStartsOn == null ? defaultWeekStartsOn : toInteger(options.weekStartsOn);
   if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) {
@@ -2988,7 +2808,7 @@ function parse(dirtyDateString, dirtyFormatString, dirtyReferenceDate, dirtyOpti
   var subFnOptions = {
     firstWeekContainsDate: firstWeekContainsDate,
     weekStartsOn: weekStartsOn,
-    locale: locale$1
+    locale: locale
   };
   var setters = [{
     priority: TIMEZONE_UNIT_PRIORITY,
@@ -3000,8 +2820,8 @@ function parse(dirtyDateString, dirtyFormatString, dirtyReferenceDate, dirtyOpti
   var tokens = formatString.match(longFormattingTokensRegExp).map(function (substring) {
     var firstCharacter = substring[0];
     if (firstCharacter === 'p' || firstCharacter === 'P') {
-      var longFormatter = longFormatters[firstCharacter];
-      return longFormatter(substring, locale$1.formatLong, subFnOptions);
+      var longFormatter = longFormatters$1[firstCharacter];
+      return longFormatter(substring, locale.formatLong, subFnOptions);
     }
     return substring;
   }).join('').match(formattingTokensRegExp);
@@ -3015,7 +2835,7 @@ function parse(dirtyDateString, dirtyFormatString, dirtyReferenceDate, dirtyOpti
       throwProtectedError(token, formatString, dirtyDateString);
     }
     var firstCharacter = token[0];
-    var parser = parsers[firstCharacter];
+    var parser = parsers$1[firstCharacter];
     if (parser) {
       var incompatibleTokens = parser.incompatibleTokens;
       if (Array.isArray(incompatibleTokens)) {
@@ -3037,7 +2857,7 @@ function parse(dirtyDateString, dirtyFormatString, dirtyReferenceDate, dirtyOpti
         token: firstCharacter,
         fullToken: token
       });
-      var parseResult = parser.parse(dateString, token, locale$1.match, subFnOptions);
+      var parseResult = parser.parse(dateString, token, locale.match, subFnOptions);
       if (!parseResult) {
         return new Date(NaN);
       }
@@ -3119,13 +2939,15 @@ function cleanEscapedString(input) {
 }
 
 function parseInputValue$1(_ref) {
-  var inputValue = _ref.inputValue,
-      customParseDate = _ref.customParseDate;
+  let {
+    inputValue,
+    customParseDate
+  } = _ref;
   if (customParseDate) {
     return customParseDate(inputValue);
   }
-  var MINIMUM_DATE = new Date(1001, 0, 0);
-  var tryParseDate = parse(inputValue, 'P', new Date());
+  const MINIMUM_DATE = new Date(1001, 0, 0);
+  let tryParseDate = parse(inputValue, 'P', new Date());
   if (isValid(tryParseDate) && !isBefore(tryParseDate, MINIMUM_DATE)) {
     return tryParseDate;
   }
@@ -3140,9 +2962,11 @@ function parseInputValue$1(_ref) {
   return new Date(NaN);
 }
 function formatInputValue(_ref2) {
-  var date = _ref2.date,
-      locale = _ref2.locale,
-      formatDate = _ref2.formatDate;
+  let {
+    date,
+    locale,
+    formatDate
+  } = _ref2;
   if (!date) {
     return '';
   }
@@ -3155,98 +2979,108 @@ function formatInputValue(_ref2) {
     year: 'numeric'
   }).format(date);
 }
-var datepickerReducer = function datepickerReducer(_ref3) {
-  var value = _ref3.value,
-      formatDate = _ref3.formatDate,
-      locale = _ref3.locale,
-      customParseDate = _ref3.customParseDate,
-      onChange = _ref3.onChange;
-  return function (state, action) {
+const datepickerReducer = _ref3 => {
+  let {
+    value,
+    formatDate,
+    locale,
+    customParseDate,
+    onChange
+  } = _ref3;
+  return (state, action) => {
     switch (action.type) {
       case 'OPEN':
-        return _objectSpread2(_objectSpread2({}, state), {}, {
+        return {
+          ...state,
           isOpen: true,
           previewDate: value || new Date()
-        });
+        };
       case 'CLOSE':
         {
-          var inputValue = formatInputValue({
+          const inputValue = formatInputValue({
             date: value,
-            locale: locale,
-            formatDate: formatDate
+            locale,
+            formatDate
           });
-          return _objectSpread2(_objectSpread2({}, state), {}, {
+          return {
+            ...state,
             isOpen: false,
-            inputValue: inputValue
-          });
+            inputValue
+          };
         }
       case 'PREVIEW_NEXT_MONTH':
         {
-          var previewDate = addMonths(state.previewDate, 1);
-          return _objectSpread2(_objectSpread2({}, state), {}, {
-            previewDate: previewDate
-          });
+          const previewDate = addMonths(state.previewDate, 1);
+          return {
+            ...state,
+            previewDate
+          };
         }
       case 'PREVIEW_PREVIOUS_MONTH':
         {
-          var _previewDate = subMonths(state.previewDate, 1);
-          return _objectSpread2(_objectSpread2({}, state), {}, {
-            previewDate: _previewDate
-          });
+          const previewDate = subMonths(state.previewDate, 1);
+          return {
+            ...state,
+            previewDate
+          };
         }
       case 'MANUALLY_UPDATE_INPUT':
         {
-          var _inputValue = action.value;
-          var currentDate = parseInputValue$1({
-            inputValue: _inputValue,
-            customParseDate: customParseDate
+          const inputValue = action.value;
+          const currentDate = parseInputValue$1({
+            inputValue,
+            customParseDate
           });
           if (onChange && currentDate && isValid(currentDate) && !isSameDay(value, currentDate)) {
             onChange(currentDate);
           }
-          return _objectSpread2(_objectSpread2({}, state), {}, {
+          return {
+            ...state,
             isOpen: true,
-            inputValue: _inputValue
-          });
+            inputValue
+          };
         }
       case 'CONTROLLED_VALUE_CHANGE':
         {
-          var _previewDate2 = action.value || new Date();
-          var _inputValue2 = formatInputValue({
+          const previewDate = action.value || new Date();
+          const inputValue = formatInputValue({
             date: action.value,
-            locale: locale,
-            formatDate: formatDate
-          });
-          return _objectSpread2(_objectSpread2({}, state), {}, {
-            previewDate: _previewDate2,
-            inputValue: _inputValue2
+            locale,
+            formatDate
           });
+          return {
+            ...state,
+            previewDate,
+            inputValue
+          };
         }
       case 'CONTROLLED_LOCALE_CHANGE':
         {
-          var _inputValue3 = formatInputValue({
+          const inputValue = formatInputValue({
             date: value,
-            locale: locale,
-            formatDate: formatDate
-          });
-          return _objectSpread2(_objectSpread2({}, state), {}, {
-            inputValue: _inputValue3
+            locale,
+            formatDate
           });
+          return {
+            ...state,
+            inputValue
+          };
         }
       case 'SELECT_DATE':
         {
-          var _inputValue4 = formatInputValue({
+          const inputValue = formatInputValue({
             date: action.value,
-            locale: locale,
-            formatDate: formatDate
+            locale,
+            formatDate
           });
           if (onChange && action.value && isValid(action.value) && !isSameDay(value, action.value)) {
             onChange(action.value);
           }
-          return _objectSpread2(_objectSpread2({}, state), {}, {
+          return {
+            ...state,
             isOpen: false,
-            inputValue: _inputValue4
-          });
+            inputValue
+          };
         }
       default:
         throw new Error();
@@ -3254,11 +3088,11 @@ var datepickerReducer = function datepickerReducer(_ref3) {
   };
 };
 function retrieveInitialState$1(initialProps) {
-  var previewDate = initialProps.value;
+  let previewDate = initialProps.value;
   if (previewDate === undefined || !isValid(previewDate)) {
     previewDate = new Date();
   }
-  var inputValue = '';
+  let inputValue = '';
   if (initialProps.value !== undefined) {
     if (initialProps.formatDate) {
       inputValue = initialProps.formatDate(initialProps.value);
@@ -3272,144 +3106,146 @@ function retrieveInitialState$1(initialProps) {
   }
   return {
     isOpen: false,
-    previewDate: previewDate,
-    inputValue: inputValue
+    previewDate,
+    inputValue
   };
 }
 
-var _excluded = ["children", "placement", "popperModifiers", "eventsEnabled", "zIndex", "isAnimated", "refKey", "value", "isCompact", "onChange", "formatDate", "minValue", "maxValue", "locale", "weekStartsOn", "customParseDate"];
-var Datepicker = React.forwardRef(function (props, calendarRef) {
-  var children = props.children,
-      placement = props.placement,
-      popperModifiers = props.popperModifiers,
-      eventsEnabled = props.eventsEnabled,
-      zIndex = props.zIndex,
-      isAnimated = props.isAnimated,
-      refKey = props.refKey,
-      value = props.value,
-      isCompact = props.isCompact,
-      onChange = props.onChange,
-      formatDate = props.formatDate,
-      minValue = props.minValue,
-      maxValue = props.maxValue,
-      locale = props.locale,
-      weekStartsOn = props.weekStartsOn,
-      customParseDate = props.customParseDate,
-      menuProps = _objectWithoutProperties(props, _excluded);
-  var theme = React.useContext(styled.ThemeContext);
-  var memoizedReducer = React.useCallback(datepickerReducer({
-    value: value,
-    formatDate: formatDate,
-    locale: locale,
-    customParseDate: customParseDate,
-    onChange: onChange
+const Datepicker = React.forwardRef((props, calendarRef) => {
+  const {
+    children,
+    placement,
+    popperModifiers,
+    eventsEnabled,
+    zIndex,
+    isAnimated,
+    refKey,
+    value,
+    isCompact,
+    onChange,
+    formatDate,
+    minValue,
+    maxValue,
+    locale,
+    weekStartsOn,
+    customParseDate,
+    ...menuProps
+  } = props;
+  const theme = React.useContext(styled.ThemeContext);
+  const memoizedReducer = React.useCallback(datepickerReducer({
+    value,
+    formatDate,
+    locale,
+    customParseDate,
+    onChange
   }), [value, formatDate, locale, onChange, customParseDate]);
-  var _useReducer = React.useReducer(memoizedReducer, retrieveInitialState$1(props)),
-      _useReducer2 = _slicedToArray(_useReducer, 2),
-      state = _useReducer2[0],
-      dispatch = _useReducer2[1];
-  var scheduleUpdateRef = React.useRef(undefined);
-  var inputRef = React.useRef(null);
-  var isInputMouseDownRef = React.useRef(false);
-  React.useEffect(function () {
+  const [state, dispatch] = React.useReducer(memoizedReducer, retrieveInitialState$1(props));
+  const scheduleUpdateRef = React.useRef(undefined);
+  const inputRef = React.useRef(null);
+  const isInputMouseDownRef = React.useRef(false);
+  React.useEffect(() => {
     if (state.isOpen && scheduleUpdateRef.current) {
       scheduleUpdateRef.current();
     }
   });
-  var _useState = React.useState(state.isOpen),
-      _useState2 = _slicedToArray(_useState, 2),
-      isVisible = _useState2[0],
-      setIsVisible = _useState2[1];
-  React.useEffect(function () {
-    var timeout;
+  const [isVisible, setIsVisible] = React.useState(state.isOpen);
+  React.useEffect(() => {
+    let timeout;
     if (state.isOpen) {
       setIsVisible(true);
     } else if (isAnimated) {
-      timeout = setTimeout(function () {
-        return setIsVisible(false);
-      }, 200);
+      timeout = setTimeout(() => setIsVisible(false), 200);
     } else {
       setIsVisible(false);
     }
-    return function () {
-      return clearTimeout(timeout);
-    };
+    return () => clearTimeout(timeout);
   }, [state.isOpen, isAnimated]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     dispatch({
       type: 'CONTROLLED_VALUE_CHANGE',
-      value: value
+      value
     });
   }, [value]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     dispatch({
       type: 'CONTROLLED_LOCALE_CHANGE'
     });
   }, [locale]);
-  var popperPlacement = theme.rtl ? getRtlPopperPlacement(placement) : getPopperPlacement(placement);
-  var contextValue = React.useMemo(function () {
-    return {
-      state: state,
-      dispatch: dispatch
-    };
-  }, [state, dispatch]);
+  const popperPlacement = theme.rtl ? getRtlPopperPlacement(placement) : getPopperPlacement(placement);
+  const contextValue = React.useMemo(() => ({
+    state,
+    dispatch
+  }), [state, dispatch]);
   return React__default["default"].createElement(DatepickerContext.Provider, {
     value: contextValue
-  }, React__default["default"].createElement(reactPopper.Manager, null, React__default["default"].createElement(reactPopper.Reference, null, function (_ref) {
-    var _React$cloneElement;
-    var ref = _ref.ref;
-    var childElement = React__default["default"].Children.only(children);
-    return React__default["default"].cloneElement(childElement, (_React$cloneElement = {}, _defineProperty(_React$cloneElement, refKey, function (refValue) {
-      ref(refValue);
-      inputRef.current = refValue;
-    }), _defineProperty(_React$cloneElement, "onMouseDown", containerUtilities.composeEventHandlers(childElement.props.onMouseDown, function () {
-      isInputMouseDownRef.current = true;
-    })), _defineProperty(_React$cloneElement, "onMouseUp", containerUtilities.composeEventHandlers(childElement.props.onMouseUp, function () {
-      setTimeout(function () {
-        isInputMouseDownRef.current = false;
-      }, 0);
-    })), _defineProperty(_React$cloneElement, "onClick", containerUtilities.composeEventHandlers(childElement.props.onClick, function () {
-      if (isInputMouseDownRef.current && !state.isOpen) {
-        dispatch({
-          type: 'OPEN'
-        });
-      }
-    })), _defineProperty(_React$cloneElement, "onBlur", containerUtilities.composeEventHandlers(childElement.props.onBlur, function () {
-      dispatch({
-        type: 'CLOSE'
-      });
-    })), _defineProperty(_React$cloneElement, "onChange", containerUtilities.composeEventHandlers(childElement.props.onChange, function (e) {
-      dispatch({
-        type: 'MANUALLY_UPDATE_INPUT',
-        value: e.target.value
-      });
-    })), _defineProperty(_React$cloneElement, "onKeyDown", containerUtilities.composeEventHandlers(childElement.props.onKeyDown, function (e) {
-      switch (e.keyCode) {
-        case containerUtilities.KEY_CODES.ESCAPE:
-        case containerUtilities.KEY_CODES.ENTER:
-          dispatch({
-            type: 'CLOSE'
-          });
-          break;
-        case containerUtilities.KEY_CODES.UP:
-        case containerUtilities.KEY_CODES.DOWN:
-        case containerUtilities.KEY_CODES.SPACE:
+  }, React__default["default"].createElement(reactPopper.Manager, null, React__default["default"].createElement(reactPopper.Reference, null, _ref => {
+    let {
+      ref
+    } = _ref;
+    const childElement = React__default["default"].Children.only(children);
+    return React__default["default"].cloneElement(childElement, {
+      [refKey]: refValue => {
+        ref(refValue);
+        inputRef.current = refValue;
+      },
+      onMouseDown: containerUtilities.composeEventHandlers(childElement.props.onMouseDown, () => {
+        isInputMouseDownRef.current = true;
+      }),
+      onMouseUp: containerUtilities.composeEventHandlers(childElement.props.onMouseUp, () => {
+        setTimeout(() => {
+          isInputMouseDownRef.current = false;
+        }, 0);
+      }),
+      onClick: containerUtilities.composeEventHandlers(childElement.props.onClick, () => {
+        if (isInputMouseDownRef.current && !state.isOpen) {
           dispatch({
             type: 'OPEN'
           });
-          break;
-      }
-    })), _defineProperty(_React$cloneElement, "autoComplete", 'off'), _defineProperty(_React$cloneElement, "value", state.inputValue), _React$cloneElement));
+        }
+      }),
+      onBlur: containerUtilities.composeEventHandlers(childElement.props.onBlur, () => {
+        dispatch({
+          type: 'CLOSE'
+        });
+      }),
+      onChange: containerUtilities.composeEventHandlers(childElement.props.onChange, e => {
+        dispatch({
+          type: 'MANUALLY_UPDATE_INPUT',
+          value: e.target.value
+        });
+      }),
+      onKeyDown: containerUtilities.composeEventHandlers(childElement.props.onKeyDown, e => {
+        switch (e.keyCode) {
+          case containerUtilities.KEY_CODES.ESCAPE:
+          case containerUtilities.KEY_CODES.ENTER:
+            dispatch({
+              type: 'CLOSE'
+            });
+            break;
+          case containerUtilities.KEY_CODES.UP:
+          case containerUtilities.KEY_CODES.DOWN:
+          case containerUtilities.KEY_CODES.SPACE:
+            dispatch({
+              type: 'OPEN'
+            });
+            break;
+        }
+      }),
+      autoComplete: 'off',
+      value: state.inputValue
+    });
   }), React__default["default"].createElement(reactPopper.Popper, {
     placement: popperPlacement,
     modifiers: popperModifiers
     ,
     eventsEnabled: state.isOpen && eventsEnabled
-  }, function (_ref2) {
-    var ref = _ref2.ref,
-        style = _ref2.style,
-        scheduleUpdate = _ref2.scheduleUpdate,
-        currentPlacement = _ref2.placement;
+  }, _ref2 => {
+    let {
+      ref,
+      style,
+      scheduleUpdate,
+      placement: currentPlacement
+    } = _ref2;
     scheduleUpdateRef.current = scheduleUpdate;
     return React__default["default"].createElement(StyledMenuWrapper, {
       ref: ref,
@@ -3471,10 +3307,12 @@ function compareAsc(dirtyDateLeft, dirtyDateRight) {
 }
 
 function formatValue(_ref) {
-  var value = _ref.value,
-      locale = _ref.locale,
-      formatDate = _ref.formatDate;
-  var stringValue = '';
+  let {
+    value,
+    locale,
+    formatDate
+  } = _ref;
+  let stringValue = '';
   if (value !== undefined && isValid(value)) {
     if (formatDate) {
       stringValue = formatDate(value);
@@ -3489,9 +3327,11 @@ function formatValue(_ref) {
   return stringValue;
 }
 function parseInputValue(_ref2) {
-  var inputValue = _ref2.inputValue;
-  var MINIMUM_DATE = new Date(1001, 0, 0);
-  var tryParseDate = parse(inputValue || '', 'P', new Date());
+  let {
+    inputValue
+  } = _ref2;
+  const MINIMUM_DATE = new Date(1001, 0, 0);
+  let tryParseDate = parse(inputValue || '', 'P', new Date());
   if (isValid(tryParseDate) && !isBefore(tryParseDate, MINIMUM_DATE)) {
     return tryParseDate;
   }
@@ -3505,17 +3345,19 @@ function parseInputValue(_ref2) {
   }
   return new Date(NaN);
 }
-var datepickerRangeReducer = function datepickerRangeReducer(_ref3) {
-  var startValue = _ref3.startValue,
-      endValue = _ref3.endValue,
-      locale = _ref3.locale,
-      formatDate = _ref3.formatDate,
-      customParseDate = _ref3.customParseDate;
-  return function (state, action) {
+const datepickerRangeReducer = _ref3 => {
+  let {
+    startValue,
+    endValue,
+    locale,
+    formatDate,
+    customParseDate
+  } = _ref3;
+  return (state, action) => {
     switch (action.type) {
       case 'START_FOCUS':
         {
-          var previewDate = state.previewDate;
+          let previewDate = state.previewDate;
           if (startValue) {
             if (compareAsc(startValue, startOfMonth(state.previewDate)) === 1 && compareAsc(startValue, addMonths(endOfMonth(state.previewDate), 1)) === -1) {
               previewDate = state.previewDate;
@@ -3523,31 +3365,33 @@ var datepickerRangeReducer = function datepickerRangeReducer(_ref3) {
               previewDate = startOfMonth(startValue);
             }
           }
-          return _objectSpread2(_objectSpread2({}, state), {}, {
-            previewDate: previewDate,
+          return {
+            ...state,
+            previewDate,
             isStartFocused: true,
             isEndFocused: false
-          });
+          };
         }
       case 'END_FOCUS':
         {
-          var _previewDate = state.previewDate;
+          let previewDate = state.previewDate;
           if (endValue) {
             if (compareAsc(endValue, startOfMonth(state.previewDate)) === 1 && compareAsc(endValue, addMonths(endOfMonth(state.previewDate), 1)) === -1) {
-              _previewDate = state.previewDate;
+              previewDate = state.previewDate;
             } else {
-              _previewDate = startOfMonth(endValue);
+              previewDate = startOfMonth(endValue);
             }
           }
-          return _objectSpread2(_objectSpread2({}, state), {}, {
-            previewDate: _previewDate,
+          return {
+            ...state,
+            previewDate,
             isEndFocused: true,
             isStartFocused: false
-          });
+          };
         }
       case 'START_BLUR':
         {
-          var parsedDate;
+          let parsedDate;
           if (customParseDate) {
             parsedDate = customParseDate(state.startInputValue);
           } else {
@@ -3555,168 +3399,184 @@ var datepickerRangeReducer = function datepickerRangeReducer(_ref3) {
               inputValue: state.startInputValue
             });
           }
-          var startInputValue = formatValue({
+          const startInputValue = formatValue({
             value: parsedDate,
-            locale: locale,
-            formatDate: formatDate
+            locale,
+            formatDate
           });
-          return _objectSpread2(_objectSpread2({}, state), {}, {
+          return {
+            ...state,
             startInputValue: startInputValue || formatValue({
               value: startValue,
-              locale: locale,
-              formatDate: formatDate
+              locale,
+              formatDate
             }),
             isStartFocused: false
-          });
+          };
         }
       case 'END_BLUR':
         {
-          var _parsedDate;
+          let parsedDate;
           if (customParseDate) {
-            _parsedDate = customParseDate(state.endInputValue);
+            parsedDate = customParseDate(state.endInputValue);
           } else {
-            _parsedDate = parseInputValue({
+            parsedDate = parseInputValue({
               inputValue: state.endInputValue
             });
           }
-          var endInputValue = formatValue({
-            value: _parsedDate,
-            locale: locale,
-            formatDate: formatDate
+          const endInputValue = formatValue({
+            value: parsedDate,
+            locale,
+            formatDate
           }) || formatValue({
             value: endValue,
-            locale: locale,
-            formatDate: formatDate
+            locale,
+            formatDate
           });
-          return _objectSpread2(_objectSpread2({}, state), {}, {
-            endInputValue: endInputValue,
+          return {
+            ...state,
+            endInputValue,
             isEndFocused: false
-          });
+          };
         }
       case 'CONTROLLED_START_VALUE_CHANGE':
         {
-          var _startInputValue = formatValue({
+          const startInputValue = formatValue({
             value: action.value,
-            locale: locale,
-            formatDate: formatDate
+            locale,
+            formatDate
           });
-          var _previewDate2 = state.previewDate;
+          let previewDate = state.previewDate;
           if (action.value) {
             if (compareAsc(action.value, startOfMonth(state.previewDate)) === 1 && compareAsc(action.value, addMonths(endOfMonth(state.previewDate), 1)) === -1) {
-              _previewDate2 = state.previewDate;
+              previewDate = state.previewDate;
             } else {
-              _previewDate2 = startOfMonth(action.value);
+              previewDate = startOfMonth(action.value);
             }
           }
-          return _objectSpread2(_objectSpread2({}, state), {}, {
-            startInputValue: _startInputValue,
+          return {
+            ...state,
+            startInputValue,
             hoverDate: undefined,
-            previewDate: _previewDate2
-          });
+            previewDate
+          };
         }
       case 'CONTROLLED_END_VALUE_CHANGE':
         {
-          var _endInputValue = formatValue({
+          const endInputValue = formatValue({
             value: action.value,
-            locale: locale,
-            formatDate: formatDate
+            locale,
+            formatDate
           });
-          var _previewDate3 = state.previewDate;
+          let previewDate = state.previewDate;
           if (action.value) {
             if (compareAsc(action.value, startOfMonth(state.previewDate)) === 1 && compareAsc(action.value, addMonths(endOfMonth(state.previewDate), 1)) === -1) {
-              _previewDate3 = state.previewDate;
+              previewDate = state.previewDate;
             } else {
-              _previewDate3 = startOfMonth(action.value);
+              previewDate = startOfMonth(action.value);
             }
           }
-          return _objectSpread2(_objectSpread2({}, state), {}, {
-            endInputValue: _endInputValue,
+          return {
+            ...state,
+            endInputValue,
             hoverDate: undefined,
-            previewDate: _previewDate3
-          });
+            previewDate
+          };
         }
       case 'CLICK_DATE':
         if (state.isStartFocused) {
           if (endValue !== undefined && (isBefore(action.value, endValue) || isSameDay(action.value, endValue))) {
-            return _objectSpread2(_objectSpread2({}, state), {}, {
+            return {
+              ...state,
               startInputValue: formatValue({
                 value: action.value
               })
-            });
+            };
           }
-          return _objectSpread2(_objectSpread2({}, state), {}, {
+          return {
+            ...state,
             startInputValue: formatValue({
               value: action.value
             }),
             endInputValue: undefined
-          });
+          };
         } else if (state.isEndFocused) {
           if (startValue !== undefined && (isAfter(action.value, startValue) || isSameDay(action.value, startValue))) {
-            return _objectSpread2(_objectSpread2({}, state), {}, {
+            return {
+              ...state,
               endInputValue: formatValue({
                 value: action.value
               })
-            });
+            };
           }
-          return _objectSpread2(_objectSpread2({}, state), {}, {
+          return {
+            ...state,
             startInputValue: formatValue({
               value: action.value
             })
-          });
+          };
         } else if (startValue === undefined) {
-          return _objectSpread2(_objectSpread2({}, state), {}, {
+          return {
+            ...state,
             startInputValue: formatValue({
               value: action.value
             }),
             endInputValue: undefined
-          });
+          };
         } else if (endValue === undefined) {
           if (isBefore(action.value, startValue)) {
-            return _objectSpread2(_objectSpread2({}, state), {}, {
+            return {
+              ...state,
               startInputValue: formatValue({
                 value: action.value
               }),
               endInputValue: undefined
-            });
+            };
           }
-          return _objectSpread2(_objectSpread2({}, state), {}, {
+          return {
+            ...state,
             endInputValue: formatValue({
               value: action.value
             })
-          });
+          };
         }
         return state;
       case 'START_INPUT_ONCHANGE':
         {
-          return _objectSpread2(_objectSpread2({}, state), {}, {
+          return {
+            ...state,
             startInputValue: action.value
-          });
+          };
         }
       case 'END_INPUT_ONCHANGE':
         {
-          return _objectSpread2(_objectSpread2({}, state), {}, {
+          return {
+            ...state,
             endInputValue: action.value
-          });
+          };
         }
       case 'HOVER_DATE':
-        return _objectSpread2(_objectSpread2({}, state), {}, {
+        return {
+          ...state,
           hoverDate: action.value
-        });
+        };
       case 'PREVIEW_NEXT_MONTH':
         {
-          var _previewDate4 = addMonths(state.previewDate, 1);
-          return _objectSpread2(_objectSpread2({}, state), {}, {
-            previewDate: _previewDate4,
+          const previewDate = addMonths(state.previewDate, 1);
+          return {
+            ...state,
+            previewDate,
             hoverDate: undefined
-          });
+          };
         }
       case 'PREVIEW_PREVIOUS_MONTH':
         {
-          var _previewDate5 = subMonths(state.previewDate, 1);
-          return _objectSpread2(_objectSpread2({}, state), {}, {
-            previewDate: _previewDate5,
+          const previewDate = subMonths(state.previewDate, 1);
+          return {
+            ...state,
+            previewDate,
             hoverDate: undefined
-          });
+          };
         }
       default:
         throw new Error();
@@ -3724,58 +3584,59 @@ var datepickerRangeReducer = function datepickerRangeReducer(_ref3) {
   };
 };
 function retrieveInitialState(initialProps) {
-  var previewDate = initialProps.startValue;
+  let previewDate = initialProps.startValue;
   if (previewDate === undefined || !isValid(previewDate)) {
     previewDate = new Date();
   }
-  var startInputValue = formatValue({
+  const startInputValue = formatValue({
     value: initialProps.startValue,
     locale: initialProps.locale,
     formatDate: initialProps.formatDate
   });
-  var endInputValue = formatValue({
+  const endInputValue = formatValue({
     value: initialProps.endValue,
     locale: initialProps.locale,
     formatDate: initialProps.formatDate
   });
   return {
-    previewDate: previewDate,
-    startInputValue: startInputValue,
-    endInputValue: endInputValue,
+    previewDate,
+    startInputValue,
+    endInputValue,
     isStartFocused: false,
     isEndFocused: false
   };
 }
 
-var DatepickerRangeContext = React.createContext(undefined);
-var useDatepickerContext = function useDatepickerContext() {
+const DatepickerRangeContext = React.createContext(undefined);
+const useDatepickerContext = () => {
   return React.useContext(DatepickerRangeContext);
 };
 
-var Start = function Start(props) {
-  var _useDatepickerRangeCo = useDatepickerContext(),
-      state = _useDatepickerRangeCo.state,
-      dispatch = _useDatepickerRangeCo.dispatch,
-      onChange = _useDatepickerRangeCo.onChange,
-      startValue = _useDatepickerRangeCo.startValue,
-      endValue = _useDatepickerRangeCo.endValue,
-      startInputRef = _useDatepickerRangeCo.startInputRef,
-      customParseDate = _useDatepickerRangeCo.customParseDate;
-  var onChangeCallback = React.useCallback(function (e) {
+const Start = props => {
+  const {
+    state,
+    dispatch,
+    onChange,
+    startValue,
+    endValue,
+    startInputRef,
+    customParseDate
+  } = useDatepickerContext();
+  const onChangeCallback = React.useCallback(e => {
     dispatch({
       type: 'START_INPUT_ONCHANGE',
       value: e.target.value
     });
     props.children.props.onChange && props.children.props.onChange(e);
   }, [dispatch, props.children]);
-  var onFocusCallback = React.useCallback(function (e) {
+  const onFocusCallback = React.useCallback(e => {
     dispatch({
       type: 'START_FOCUS'
     });
     props.children.props.onFocus && props.children.props.onFocus(e);
   }, [dispatch, props.children]);
-  var handleBlur = React.useCallback(function () {
-    var parsedDate;
+  const handleBlur = React.useCallback(() => {
+    let parsedDate;
     if (customParseDate) {
       parsedDate = customParseDate(state.startInputValue);
     } else {
@@ -3789,22 +3650,22 @@ var Start = function Start(props) {
     if (parsedDate && isValid(parsedDate) && !isSameDay(parsedDate, startValue)) {
       onChange && onChange({
         startValue: parsedDate,
-        endValue: endValue
+        endValue
       });
     }
   }, [dispatch, onChange, startValue, endValue, customParseDate, state.startInputValue]);
-  var onKeyDownCallback = React.useCallback(function (e) {
+  const onKeyDownCallback = React.useCallback(e => {
     if (e.keyCode === containerUtilities.KEY_CODES.ENTER) {
       e.preventDefault();
       handleBlur();
     }
     props.children.props.onKeyDown && props.children.props.onKeyDown(e);
   }, [handleBlur, props.children]);
-  var onBlurCallback = React.useCallback(function (e) {
+  const onBlurCallback = React.useCallback(e => {
     handleBlur();
     props.children.props.onBlur && props.children.props.onBlur(e);
   }, [handleBlur, props.children]);
-  var childElement = React__default["default"].Children.only(props.children);
+  const childElement = React__default["default"].Children.only(props.children);
   return React__default["default"].cloneElement(childElement, {
     value: state.startInputValue || '',
     ref: startInputRef,
@@ -3816,33 +3677,34 @@ var Start = function Start(props) {
 };
 Start.displayName = 'DatepickerRange.Start';
 
-var End = function End(props) {
-  var _useDatepickerRangeCo = useDatepickerContext(),
-      state = _useDatepickerRangeCo.state,
-      dispatch = _useDatepickerRangeCo.dispatch,
-      onChange = _useDatepickerRangeCo.onChange,
-      startValue = _useDatepickerRangeCo.startValue,
-      endValue = _useDatepickerRangeCo.endValue,
-      endInputRef = _useDatepickerRangeCo.endInputRef,
-      customParseDate = _useDatepickerRangeCo.customParseDate;
-  var onChangeCallback = React.useCallback(function (e) {
+const End = props => {
+  const {
+    state,
+    dispatch,
+    onChange,
+    startValue,
+    endValue,
+    endInputRef,
+    customParseDate
+  } = useDatepickerContext();
+  const onChangeCallback = React.useCallback(e => {
     dispatch({
       type: 'END_INPUT_ONCHANGE',
       value: e.target.value
     });
     props.children.props.onChange && props.children.props.onChange(e);
   }, [dispatch, props.children]);
-  var onFocusCallback = React.useCallback(function (e) {
+  const onFocusCallback = React.useCallback(e => {
     dispatch({
       type: 'END_FOCUS'
     });
     props.children.props.onFocus && props.children.props.onFocus(e);
   }, [dispatch, props.children]);
-  var handleBlur = React.useCallback(function () {
+  const handleBlur = React.useCallback(() => {
     dispatch({
       type: 'END_BLUR'
     });
-    var parsedDate;
+    let parsedDate;
     if (customParseDate) {
       parsedDate = customParseDate(state.endInputValue);
     } else {
@@ -3852,23 +3714,23 @@ var End = function End(props) {
     }
     if (onChange && parsedDate && isValid(parsedDate) && !isSameDay(parsedDate, endValue)) {
       onChange && onChange({
-        startValue: startValue,
+        startValue,
         endValue: parsedDate
       });
     }
   }, [dispatch, onChange, startValue, endValue, customParseDate, state.endInputValue]);
-  var onKeydownCallback = React.useCallback(function (e) {
+  const onKeydownCallback = React.useCallback(e => {
     if (e.keyCode === containerUtilities.KEY_CODES.ENTER) {
       handleBlur();
       e.preventDefault();
     }
     props.children.props.onKeyDown && props.children.props.onKeyDown(e);
   }, [handleBlur, props.children]);
-  var onBlurCallback = React.useCallback(function (e) {
+  const onBlurCallback = React.useCallback(e => {
     handleBlur();
     props.children.props.onBlur && props.children.props.onBlur(e);
   }, [handleBlur, props.children]);
-  var childElement = React__default["default"].Children.only(props.children);
+  const childElement = React__default["default"].Children.only(props.children);
   return React__default["default"].cloneElement(childElement, {
     value: state.endInputValue || '',
     ref: endInputRef,
@@ -3880,77 +3742,95 @@ var End = function End(props) {
 };
 End.displayName = 'DatepickerRange.End';
 
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
 function subDays(dirtyDate, dirtyAmount) {
   requiredArgs(2, arguments);
   var amount = toInteger(dirtyAmount);
   return addDays(dirtyDate, -amount);
 }
 
-var Month = React.forwardRef(function (_ref, ref) {
-  var displayDate = _ref.displayDate,
-      isPreviousHidden = _ref.isPreviousHidden,
-      isNextHidden = _ref.isNextHidden;
-  var _useDatepickerRangeCo = useDatepickerContext(),
-      state = _useDatepickerRangeCo.state,
-      dispatch = _useDatepickerRangeCo.dispatch,
-      locale = _useDatepickerRangeCo.locale,
-      weekStartsOn = _useDatepickerRangeCo.weekStartsOn,
-      isCompact = _useDatepickerRangeCo.isCompact,
-      minValue = _useDatepickerRangeCo.minValue,
-      maxValue = _useDatepickerRangeCo.maxValue,
-      startValue = _useDatepickerRangeCo.startValue,
-      endValue = _useDatepickerRangeCo.endValue,
-      onChange = _useDatepickerRangeCo.onChange;
-  var headerLabelFormatter = React.useCallback(function (date) {
-    var formatter = new Intl.DateTimeFormat(locale, {
+const Month = React.forwardRef((_ref, ref) => {
+  let {
+    displayDate,
+    isPreviousHidden,
+    isNextHidden
+  } = _ref;
+  const {
+    state,
+    dispatch,
+    locale,
+    weekStartsOn,
+    isCompact,
+    minValue,
+    maxValue,
+    startValue,
+    endValue,
+    onChange
+  } = useDatepickerContext();
+  const headerLabelFormatter = React.useCallback(date => {
+    const formatter = new Intl.DateTimeFormat(locale, {
       month: 'long',
       year: 'numeric'
     });
     return formatter.format(date);
   }, [locale]);
-  var dayLabelFormatter = React.useCallback(function (date) {
-    var formatter = new Intl.DateTimeFormat(locale, {
+  const dayLabelFormatter = React.useCallback(date => {
+    const formatter = new Intl.DateTimeFormat(locale, {
       weekday: 'short'
     });
     return formatter.format(date);
   }, [locale]);
-  var dayFormatter = React.useCallback(function (date) {
-    var formatter = new Intl.DateTimeFormat(locale, {
+  const dayFormatter = React.useCallback(date => {
+    const formatter = new Intl.DateTimeFormat(locale, {
       day: 'numeric'
     });
     return formatter.format(date);
   }, [locale]);
-  var preferredWeekStartsOn = weekStartsOn || getStartOfWeek(locale);
-  var monthStartDate = startOfMonth(displayDate);
-  var monthEndDate = endOfMonth(monthStartDate);
-  var startDate = startOfWeek(monthStartDate, {
+  const preferredWeekStartsOn = weekStartsOn || getStartOfWeek(locale);
+  const monthStartDate = startOfMonth(displayDate);
+  const monthEndDate = endOfMonth(monthStartDate);
+  const startDate = startOfWeek(monthStartDate, {
     weekStartsOn: preferredWeekStartsOn
   });
-  var endDate = endOfWeek(monthEndDate, {
+  const endDate = endOfWeek(monthEndDate, {
     weekStartsOn: preferredWeekStartsOn
   });
-  var dayLabels = eachDayOfInterval({
+  const dayLabels = eachDayOfInterval({
     start: startDate,
     end: addDays(startDate, 6)
-  }).map(function (date) {
-    var formattedDayLabel = dayLabelFormatter(date);
+  }).map(date => {
+    const formattedDayLabel = dayLabelFormatter(date);
     return React__default["default"].createElement(StyledCalendarItem, {
-      key: "day-label-".concat(formattedDayLabel),
+      key: `day-label-${formattedDayLabel}`,
       isCompact: isCompact
     }, React__default["default"].createElement(StyledDayLabel, {
       isCompact: isCompact
     }, formattedDayLabel));
   });
-  var items = eachDayOfInterval({
+  const items = eachDayOfInterval({
     start: startDate,
     end: endDate
-  }).map(function (date, itemsIndex) {
-    var formattedDayLabel = dayFormatter(date);
-    var isCurrentDate = isToday(date);
-    var isPreviousMonth = !isSameMonth(date, displayDate);
+  }).map((date, itemsIndex) => {
+    const formattedDayLabel = dayFormatter(date);
+    const isCurrentDate = isToday(date);
+    const isPreviousMonth = !isSameMonth(date, displayDate);
     if (isPreviousMonth) {
       return React__default["default"].createElement(StyledCalendarItem, {
-        key: "day-".concat(itemsIndex),
+        key: `day-${itemsIndex}`,
         isCompact: isCompact
       }, React__default["default"].createElement(StyledDay, {
         isCompact: isCompact,
@@ -3958,29 +3838,29 @@ var Month = React.forwardRef(function (_ref, ref) {
         isDisabled: true
       }, "\xA0"));
     }
-    var isSelected = false;
+    let isSelected = false;
     if (startValue !== undefined) {
       isSelected = isSameDay(date, startValue);
     }
     if (endValue !== undefined) {
       isSelected = isSelected || isSameDay(date, endValue);
     }
-    var isDisabled = false;
+    let isDisabled = false;
     if (minValue !== undefined) {
       isDisabled = isBefore(date, minValue) && !isSameDay(date, minValue);
     }
     if (maxValue !== undefined) {
       isDisabled = isDisabled || isAfter(date, maxValue) && !isSameDay(date, maxValue);
     }
-    var isHighlighted = false;
+    let isHighlighted = false;
     if (startValue !== undefined && endValue !== undefined) {
       isHighlighted = (isAfter(date, startValue) || isSameDay(date, startValue)) && (isBefore(date, endValue) || isSameDay(date, endValue)) && !isSameDay(startValue, endValue);
     } else if (startValue !== undefined && state.hoverDate !== undefined) {
       isHighlighted = (isAfter(date, startValue) || isSameDay(date, startValue)) && (isBefore(date, state.hoverDate) || isSameDay(date, state.hoverDate));
     }
-    var isHighlightStart = isHighlighted && startValue && isSameDay(date, startValue) || false;
-    var isHighlightEnd = isHighlighted && endValue && isSameDay(date, endValue) || state.hoverDate && isSameDay(date, state.hoverDate) && !isBefore(date, endValue) || false;
-    var isInvalidDateRange = endValue && startValue && compareAsc(endValue, startValue) === -1 || false;
+    const isHighlightStart = isHighlighted && startValue && isSameDay(date, startValue) || false;
+    const isHighlightEnd = isHighlighted && endValue && isSameDay(date, endValue) || state.hoverDate && isSameDay(date, state.hoverDate) && !isBefore(date, endValue) || false;
+    let isInvalidDateRange = endValue && startValue && compareAsc(endValue, startValue) === -1 || false;
     if (minValue) {
       if (startValue) {
         isInvalidDateRange = isInvalidDateRange || compareAsc(startValue, subDays(minValue, 1)) === -1;
@@ -3998,7 +3878,7 @@ var Month = React.forwardRef(function (_ref, ref) {
       }
     }
     return React__default["default"].createElement(StyledCalendarItem, {
-      key: "day-".concat(itemsIndex),
+      key: `day-${itemsIndex}`,
       isCompact: isCompact
     }, React__default["default"].createElement(StyledHighlight, {
       isHighlighted: !isInvalidDateRange && isHighlighted && !isDisabled,
@@ -4010,7 +3890,7 @@ var Month = React.forwardRef(function (_ref, ref) {
       isSelected: !isInvalidDateRange && isSelected,
       isDisabled: isDisabled,
       isCompact: isCompact,
-      onClick: function onClick() {
+      onClick: () => {
         if (!isDisabled) {
           dispatch({
             type: 'CLICK_DATE',
@@ -4021,7 +3901,7 @@ var Month = React.forwardRef(function (_ref, ref) {
               if (endValue !== undefined && (isBefore(date, endValue) || isSameDay(date, endValue))) {
                 onChange({
                   startValue: date,
-                  endValue: endValue
+                  endValue
                 });
               } else {
                 onChange({
@@ -4032,7 +3912,7 @@ var Month = React.forwardRef(function (_ref, ref) {
             } else if (state.isEndFocused) {
               if (startValue !== undefined && (isAfter(date, startValue) || isSameDay(date, startValue))) {
                 onChange({
-                  startValue: startValue,
+                  startValue,
                   endValue: date
                 });
               } else {
@@ -4054,7 +3934,7 @@ var Month = React.forwardRef(function (_ref, ref) {
                 });
               } else {
                 onChange({
-                  startValue: startValue,
+                  startValue,
                   endValue: date
                 });
               }
@@ -4067,7 +3947,7 @@ var Month = React.forwardRef(function (_ref, ref) {
           }
         }
       },
-      onMouseEnter: function onMouseEnter() {
+      onMouseEnter: () => {
         if (!isSelected) {
           dispatch({
             type: 'HOVER_DATE',
@@ -4080,14 +3960,14 @@ var Month = React.forwardRef(function (_ref, ref) {
   return React__default["default"].createElement(StyledDatepicker, {
     ref: ref,
     isCompact: isCompact,
-    onMouseDown: function onMouseDown(e) {
+    onMouseDown: e => {
       e.preventDefault();
     }
   }, React__default["default"].createElement(StyledHeader, {
     isCompact: isCompact
   }, React__default["default"].createElement(StyledHeaderPaddle, {
     isCompact: isCompact,
-    onClick: function onClick() {
+    onClick: () => {
       dispatch({
         type: 'PREVIEW_PREVIOUS_MONTH'
       });
@@ -4098,14 +3978,14 @@ var Month = React.forwardRef(function (_ref, ref) {
   }, headerLabelFormatter(displayDate)), React__default["default"].createElement(StyledHeaderPaddle, {
     isCompact: isCompact,
     isHidden: isNextHidden,
-    onClick: function onClick() {
+    onClick: () => {
       dispatch({
         type: 'PREVIEW_NEXT_MONTH'
       });
     }
   }, React__default["default"].createElement(SvgChevronRightStroke, null))), React__default["default"].createElement(StyledCalendar, {
     isCompact: isCompact,
-    onMouseLeave: function onMouseLeave() {
+    onMouseLeave: () => {
       dispatch({
         type: 'HOVER_DATE',
         value: undefined
@@ -4115,13 +3995,14 @@ var Month = React.forwardRef(function (_ref, ref) {
 });
 Month.displayName = 'Month';
 
-var Calendar = React.forwardRef(function (props, ref) {
-  var _useDatepickerRangeCo = useDatepickerContext(),
-      state = _useDatepickerRangeCo.state;
-  return React__default["default"].createElement(StyledRangeCalendar, _extends$2({
+const Calendar = React.forwardRef((props, ref) => {
+  const {
+    state
+  } = useDatepickerContext();
+  return React__default["default"].createElement(StyledRangeCalendar, _extends({
     ref: ref,
     "data-garden-id": "datepickers.range",
-    "data-garden-version": '8.57.0'
+    "data-garden-version": '8.58.0'
   }, props), React__default["default"].createElement(Month, {
     displayDate: state.previewDate,
     isNextHidden: true
@@ -4132,34 +4013,33 @@ var Calendar = React.forwardRef(function (props, ref) {
 });
 Calendar.displayName = 'DatepickerRange.Calendar';
 
-var DatepickerRangeComponent = function DatepickerRangeComponent(props) {
-  var startValue = props.startValue,
-      locale = props.locale,
-      weekStartsOn = props.weekStartsOn,
-      formatDate = props.formatDate,
-      endValue = props.endValue,
-      onChange = props.onChange,
-      customParseDate = props.customParseDate,
-      isCompact = props.isCompact,
-      minValue = props.minValue,
-      maxValue = props.maxValue,
-      children = props.children;
-  var reducer = React.useCallback(datepickerRangeReducer({
-    startValue: startValue,
-    locale: locale,
-    formatDate: formatDate,
-    endValue: endValue,
-    customParseDate: customParseDate
+const DatepickerRangeComponent = props => {
+  const {
+    startValue,
+    locale,
+    weekStartsOn,
+    formatDate,
+    endValue,
+    onChange,
+    customParseDate,
+    isCompact,
+    minValue,
+    maxValue,
+    children
+  } = props;
+  const reducer = React.useCallback(datepickerRangeReducer({
+    startValue,
+    locale,
+    formatDate,
+    endValue,
+    customParseDate
   }), [startValue, endValue, locale, formatDate, onChange, customParseDate]);
-  var _useReducer = React.useReducer(reducer, retrieveInitialState(props)),
-      _useReducer2 = _slicedToArray(_useReducer, 2),
-      state = _useReducer2[0],
-      dispatch = _useReducer2[1];
-  var previousStartValue = React.useRef(startValue);
-  var previousEndValue = React.useRef(endValue);
-  var startInputRef = React.useRef();
-  var endInputRef = React.useRef();
-  React.useEffect(function () {
+  const [state, dispatch] = React.useReducer(reducer, retrieveInitialState(props));
+  const previousStartValue = React.useRef(startValue);
+  const previousEndValue = React.useRef(endValue);
+  const startInputRef = React.useRef();
+  const endInputRef = React.useRef();
+  React.useEffect(() => {
     dispatch({
       type: 'CONTROLLED_START_VALUE_CHANGE',
       value: startValue
@@ -4169,7 +4049,7 @@ var DatepickerRangeComponent = function DatepickerRangeComponent(props) {
     }
     previousStartValue.current = startValue;
   }, [props, startValue]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     dispatch({
       type: 'CONTROLLED_END_VALUE_CHANGE',
       value: endValue
@@ -4179,23 +4059,21 @@ var DatepickerRangeComponent = function DatepickerRangeComponent(props) {
     }
     previousEndValue.current = endValue;
   }, [props, endValue]);
-  var value = React.useMemo(function () {
-    return {
-      state: state,
-      dispatch: dispatch,
-      isCompact: isCompact,
-      locale: locale,
-      weekStartsOn: weekStartsOn,
-      minValue: minValue,
-      maxValue: maxValue,
-      startValue: startValue,
-      endValue: endValue,
-      onChange: onChange,
-      startInputRef: startInputRef,
-      endInputRef: endInputRef,
-      customParseDate: customParseDate
-    };
-  }, [state, dispatch, isCompact, locale, weekStartsOn, minValue, maxValue, startValue, endValue, onChange, startInputRef, endInputRef, customParseDate]);
+  const value = React.useMemo(() => ({
+    state,
+    dispatch,
+    isCompact,
+    locale,
+    weekStartsOn,
+    minValue,
+    maxValue,
+    startValue,
+    endValue,
+    onChange,
+    startInputRef,
+    endInputRef,
+    customParseDate
+  }), [state, dispatch, isCompact, locale, weekStartsOn, minValue, maxValue, startValue, endValue, onChange, startInputRef, endInputRef, customParseDate]);
   return React__default["default"].createElement(DatepickerRangeContext.Provider, {
     value: value
   }, children);
@@ -4216,7 +4094,7 @@ DatepickerRangeComponent.defaultProps = {
   locale: 'en-US',
   isCompact: false
 };
-var DatepickerRange = DatepickerRangeComponent;
+const DatepickerRange = DatepickerRangeComponent;
 DatepickerRange.Calendar = Calendar;
 DatepickerRange.End = End;
 DatepickerRange.Start = Start;