@zendeskgarden/react-datepickers 9.0.0-next.7 → 9.0.0-next.9

package/dist/index.esm.js

@@ -1,1687 +0,0 @@
-/**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-
-import * as React from 'react';
-import React__default, { createContext, useContext, useCallback, forwardRef, useRef, cloneElement, useReducer, useState, useMemo, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { mergeRefs } from 'react-merge-refs';
-import styled, { css, ThemeContext } from 'styled-components';
-import { useFloating, platform, autoPlacement, flip, autoUpdate } from '@floating-ui/react-dom';
-import { PLACEMENT as PLACEMENT$1, retrieveComponentStyles, DEFAULT_THEME, menuStyles, getMenuPosition, getColorV8, getFloatingPlacements } from '@zendeskgarden/react-theming';
-import { startOfMonth } from 'date-fns/startOfMonth';
-import { endOfMonth } from 'date-fns/endOfMonth';
-import { startOfWeek } from 'date-fns/startOfWeek';
-import { endOfWeek } from 'date-fns/endOfWeek';
-import { eachDayOfInterval } from 'date-fns/eachDayOfInterval';
-import { addDays } from 'date-fns/addDays';
-import { isToday } from 'date-fns/isToday';
-import { isSameDay } from 'date-fns/isSameDay';
-import { isSameMonth } from 'date-fns/isSameMonth';
-import { isBefore } from 'date-fns/isBefore';
-import { isAfter } from 'date-fns/isAfter';
-import { getDate } from 'date-fns/getDate';
-import { addMonths } from 'date-fns/addMonths';
-import { subMonths } from 'date-fns/subMonths';
-import { isValid } from 'date-fns/isValid';
-import { parse } from 'date-fns/parse';
-import { composeEventHandlers, KEYS } from '@zendeskgarden/container-utilities';
-import { compareAsc } from 'date-fns/compareAsc';
-import { subDays } from 'date-fns/subDays';
-
-const WEEK_STARTS_ON = [0, 1, 2, 3, 4, 5, 6];
-const PLACEMENT = ['auto', ...PLACEMENT$1];
-
-const COMPONENT_ID$b = 'datepickers.menu';
-const StyledMenu = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.7'
-}).withConfig({
-  displayName: "StyledMenu",
-  componentId: "sc-1npbkk0-0"
-})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID$b, props));
-StyledMenu.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$a = 'datepickers.menu_wrapper';
-const StyledMenuWrapper = styled.div.attrs(props => ({
-  className: props.isAnimated && 'is-animated'
-})).withConfig({
-  displayName: "StyledMenuWrapper",
-  componentId: "sc-6fowoz-0"
-})(["top:0;left:0;", ";", ";"], props => 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 => retrieveComponentStyles(COMPONENT_ID$a, props));
-StyledMenuWrapper.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-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: ${value}px;`;
-};
-const StyledDatePicker = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$9
-}).withConfig({
-  displayName: "StyledDatePicker",
-  componentId: "sc-15hwqzh-0"
-})(["direction:", ";", " background-color:", ";color:", ";", ";"], props => props.theme.rtl && 'rtl', retrievePadding, props => getColorV8('background', 600 , props.theme), props => getColorV8('foreground', 600 , props.theme), props => retrieveComponentStyles(COMPONENT_ID$9, props));
-StyledDatePicker.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$8 = 'datepickers.range_calendar';
-const StyledRangeCalendar = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$8
-}).withConfig({
-  displayName: "StyledRangeCalendar",
-  componentId: "sc-1og46sy-0"
-})(["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 => retrieveComponentStyles(COMPONENT_ID$8, props));
-StyledRangeCalendar.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$7 = 'datepickers.header';
-const StyledHeader = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$7
-}).withConfig({
-  displayName: "StyledHeader",
-  componentId: "sc-upq318-0"
-})(["display:flex;width:", "px;", ";"], props => props.isCompact ? props.theme.space.base * 56 : props.theme.space.base * 70, props => retrieveComponentStyles(COMPONENT_ID$7, props));
-StyledHeader.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const retrieveSizing = _ref => {
-  let {
-    isCompact,
-    theme
-  } = _ref;
-  let size = theme.space.base * 10;
-  if (isCompact) {
-    size = theme.space.base * 8;
-  }
-  return css(["width:", "px;height:", "px;"], size, size);
-};
-const retrieveColor$1 = _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return css([":hover{background-color:", ";color:", ";}:active{background-color:", ";color:", ";}color:", ";"], getColorV8('primaryHue', 600, theme, 0.08), getColorV8('foreground', 600 , theme), getColorV8('primaryHue', 600, theme, 0.2), getColorV8('foreground', 600 , theme), getColorV8('neutralHue', 600, theme));
-};
-const COMPONENT_ID$6 = 'datepickers.header_paddle';
-const StyledHeaderPaddle = styled.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:", ";}", ";"], props => props.theme.rtl && 'rotate(180deg)', props => props.isHidden && 'hidden', retrieveSizing, retrieveColor$1, props => `${props.theme.iconSizes.md}`, props => `${props.theme.iconSizes.md}`, props => retrieveComponentStyles(COMPONENT_ID$6, props));
-StyledHeaderPaddle.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$5 = 'datepickers.header_label';
-const StyledHeaderLabel = styled.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:", ";", ";"], props => props.isCompact ? props.theme.fontSizes.sm : props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID$5, props));
-StyledHeaderLabel.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$4 = 'datepickers.calendar';
-const StyledCalendar = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$4
-}).withConfig({
-  displayName: "StyledCalendar",
-  componentId: "sc-g5hoe8-0"
-})(["width:", "px;", ";"], props => props.isCompact ? props.theme.space.base * 56 : props.theme.space.base * 70, props => retrieveComponentStyles(COMPONENT_ID$4, props));
-StyledCalendar.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$3 = 'datepickers.calendar_item';
-const retrieveSize = _ref => {
-  let {
-    isCompact,
-    theme
-  } = _ref;
-  let size;
-  if (isCompact) {
-    size = `${theme.space.base * 8}px`;
-  } else {
-    size = `${theme.space.base * 10}px`;
-  }
-  return css(["width:", ";height:", ";"], size, size);
-};
-const StyledCalendarItem = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$3
-}).withConfig({
-  displayName: "StyledCalendarItem",
-  componentId: "sc-143w8wb-0"
-})(["display:inline-block;position:relative;vertical-align:top;", " ", ";"], retrieveSize, props => retrieveComponentStyles(COMPONENT_ID$3, props));
-StyledCalendarItem.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$2 = 'datepickers.day_label';
-const StyledDayLabel = styled.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:", ";", ";"], props => props.isCompact ? props.theme.fontSizes.sm : props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID$2, props));
-StyledDayLabel.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-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;
-    } else if (isEnd) {
-      return endValue;
-    }
-  }
-  if (isStart) {
-    return endValue;
-  } else if (isEnd) {
-    return startValue;
-  }
-  return '';
-};
-const retrieveColor = _ref2 => {
-  let {
-    isHighlighted,
-    theme
-  } = _ref2;
-  return css(["background-color:", ";"], isHighlighted && getColorV8('primaryHue', 600, theme, 0.08));
-};
-const StyledHighlight = styled.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, props => retrieveComponentStyles(COMPONENT_ID$1, props));
-StyledHighlight.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const retrieveStyledDayColors = _ref => {
-  let {
-    isSelected,
-    isDisabled,
-    isToday,
-    isPreviousMonth,
-    theme
-  } = _ref;
-  let backgroundColor = 'inherit';
-  let color = getColorV8('primaryHue', 600, theme);
-  if (isSelected && !isDisabled) {
-    backgroundColor = getColorV8('primaryHue', 600, theme);
-    color = getColorV8('background', 600 , theme);
-  } else if (isDisabled) {
-    color = getColorV8('neutralHue', 400, theme);
-  } else if (isToday) {
-    color = 'inherit';
-  } else if (isPreviousMonth) {
-    color = getColorV8('neutralHue', 600, theme);
-  }
-  return css(["background-color:", ";color:", ";", ""], backgroundColor, color, !isSelected && !isDisabled && `
-      :hover {
-        background-color: ${getColorV8('primaryHue', 600, theme, 0.08)};
-        color: ${getColorV8('primaryHue', 800, theme)};
-      }
-
-      :active {
-        background-color: ${getColorV8('primaryHue', 600, theme, 0.2)};
-        color: ${getColorV8('primaryHue', 800, theme)};
-      }
-  `);
-};
-const COMPONENT_ID = 'datepickers.day';
-const StyledDay = styled.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:", ";", " ", ";"], 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 => retrieveComponentStyles(COMPONENT_ID, props));
-StyledDay.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const DatePickerContext = createContext(undefined);
-const useDatePickerContext$1 = () => {
-  return useContext(DatePickerContext);
-};
-
-const REGION_MAPPINGS = {
-  'ar-DZ': 0,
-  'ar-SA': 0,
-  'en-CA': 0,
-  'en-GB': 1,
-  'en-US': 0,
-  'fa-IR': 0,
-  'fr-CH': 1,
-  'nl-BE': 1,
-  'pt-BR': 0,
-  'zh-CN': 1,
-  'zh-TW': 1
-};
-const LANGUAGE_MAPPINGS = {
-  af: 0,
-  ar: 6,
-  be: 1,
-  bg: 1,
-  bn: 0,
-  ca: 1,
-  cs: 1,
-  da: 1,
-  de: 1,
-  el: 1,
-  en: 0,
-  eo: 1,
-  es: 1,
-  et: 1,
-  fa: 0,
-  fi: 1,
-  fil: 0,
-  fr: 1,
-  gl: 1,
-  he: 0,
-  hr: 1,
-  hu: 1,
-  id: 1,
-  is: 1,
-  it: 1,
-  ja: 1,
-  ka: 1,
-  ko: 0,
-  lt: 1,
-  lv: 1,
-  mk: 1,
-  ms: 1,
-  nb: 1,
-  nl: 1,
-  nn: 1,
-  pl: 1,
-  pt: 0,
-  ro: 1,
-  ru: 1,
-  sk: 1,
-  sl: 1,
-  sr: 1,
-  sv: 1,
-  th: 1,
-  tr: 1,
-  ug: 0,
-  uk: 1,
-  vi: 1,
-  zh: 1
-};
-function getStartOfWeek(locale) {
-  if (!locale) {
-    return 0;
-  }
-  for (const region in REGION_MAPPINGS) {
-    if (locale.startsWith(region)) {
-      return REGION_MAPPINGS[region];
-    }
-  }
-  for (const language in LANGUAGE_MAPPINGS) {
-    if (locale.startsWith(language)) {
-      return LANGUAGE_MAPPINGS[language];
-    }
-  }
-  return 0;
-}
-
-var _path$1;
-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.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"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.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"
-  })));
-};
-
-var _path;
-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.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"
-  }, props), _path || (_path = /*#__PURE__*/React.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"
-  })));
-};
-
-const MonthSelector = _ref => {
-  let {
-    locale,
-    isCompact
-  } = _ref;
-  const {
-    state,
-    dispatch
-  } = useDatePickerContext$1();
-  const headerLabelFormatter = useCallback(date => {
-    const formatter = new Intl.DateTimeFormat(locale, {
-      month: 'long',
-      year: 'numeric'
-    });
-    return formatter.format(date);
-  }, [locale]);
-  return React__default.createElement(StyledHeader, {
-    isCompact: isCompact
-  }, React__default.createElement(StyledHeaderPaddle, {
-    isCompact: isCompact,
-    onClick: () => {
-      dispatch({
-        type: 'PREVIEW_PREVIOUS_MONTH'
-      });
-    }
-  }, React__default.createElement(SvgChevronLeftStroke, null)), React__default.createElement(StyledHeaderLabel, {
-    isCompact: isCompact
-  }, headerLabelFormatter(state.previewDate)), React__default.createElement(StyledHeaderPaddle, {
-    isCompact: isCompact,
-    onClick: () => {
-      dispatch({
-        type: 'PREVIEW_NEXT_MONTH'
-      });
-    }
-  }, React__default.createElement(SvgChevronRightStroke, null)));
-};
-
-const Calendar$1 = 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
-  });
-  const endDate = endOfWeek(monthEndDate, {
-    weekStartsOn: preferredWeekStartsOn
-  });
-  const dayLabelFormatter = useCallback(date => {
-    const formatter = new Intl.DateTimeFormat(locale, {
-      weekday: 'short'
-    });
-    return formatter.format(date);
-  }, [locale]);
-  const dayLabels = eachDayOfInterval({
-    start: startDate,
-    end: addDays(startDate, 6)
-  }).map(date => {
-    const formattedDayLabel = dayLabelFormatter(date);
-    return React__default.createElement(StyledCalendarItem, {
-      key: `day-label-${formattedDayLabel}`,
-      isCompact: isCompact
-    }, React__default.createElement(StyledDayLabel, {
-      isCompact: isCompact
-    }, formattedDayLabel));
-  });
-  const items = eachDayOfInterval({
-    start: startDate,
-    end: endDate
-  }).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);
-    }
-    if (maxValue !== undefined) {
-      isDisabled = isDisabled || isAfter(date, maxValue) && !isSameDay(date, maxValue);
-    }
-    return React__default.createElement(StyledCalendarItem, {
-      key: `day-${itemsIndex}`,
-      isCompact: isCompact
-    }, React__default.createElement(StyledDay, {
-      isToday: isCurrentDate,
-      isPreviousMonth: isPreviousMonth,
-      isSelected: isSelected,
-      isDisabled: isDisabled,
-      isCompact: isCompact,
-      onClick: () => {
-        if (!isDisabled) {
-          dispatch({
-            type: 'SELECT_DATE',
-            value: date
-          });
-        }
-      }
-    }, formattedDayLabel));
-  });
-  return React__default.createElement(StyledDatePicker, {
-    ref: ref,
-    isCompact: isCompact,
-    onMouseDown: e => {
-      e.preventDefault();
-    }
-  }, React__default.createElement(MonthSelector, {
-    locale: locale,
-    isCompact: isCompact
-  }), React__default.createElement(StyledCalendar, {
-    isCompact: isCompact
-  }, dayLabels, items));
-});
-Calendar$1.displayName = 'Calendar';
-
-function parseInputValue$1(_ref) {
-  let {
-    inputValue,
-    customParseDate
-  } = _ref;
-  if (customParseDate) {
-    return customParseDate(inputValue);
-  }
-  const MINIMUM_DATE = new Date(1001, 0, 0);
-  let tryParseDate = parse(inputValue, 'P', new Date());
-  if (isValid(tryParseDate) && !isBefore(tryParseDate, MINIMUM_DATE)) {
-    return tryParseDate;
-  }
-  tryParseDate = parse(inputValue, 'PP', new Date());
-  if (isValid(tryParseDate) && !isBefore(tryParseDate, MINIMUM_DATE)) {
-    return tryParseDate;
-  }
-  tryParseDate = parse(inputValue, 'PPP', new Date());
-  if (isValid(tryParseDate) && !isBefore(tryParseDate, MINIMUM_DATE)) {
-    return tryParseDate;
-  }
-  return new Date(NaN);
-}
-function formatInputValue(_ref2) {
-  let {
-    date,
-    locale,
-    formatDate
-  } = _ref2;
-  if (!date) {
-    return '';
-  }
-  if (formatDate) {
-    return formatDate(date);
-  }
-  return new Intl.DateTimeFormat(locale, {
-    month: 'long',
-    day: 'numeric',
-    year: 'numeric'
-  }).format(date);
-}
-const datepickerReducer = _ref3 => {
-  let {
-    value,
-    formatDate,
-    locale,
-    customParseDate,
-    onChange
-  } = _ref3;
-  return (state, action) => {
-    switch (action.type) {
-      case 'OPEN':
-        return {
-          ...state,
-          isOpen: true,
-          previewDate: value || new Date()
-        };
-      case 'CLOSE':
-        {
-          const inputValue = formatInputValue({
-            date: value,
-            locale,
-            formatDate
-          });
-          return {
-            ...state,
-            isOpen: false,
-            inputValue
-          };
-        }
-      case 'PREVIEW_NEXT_MONTH':
-        {
-          const previewDate = addMonths(state.previewDate, 1);
-          return {
-            ...state,
-            previewDate
-          };
-        }
-      case 'PREVIEW_PREVIOUS_MONTH':
-        {
-          const previewDate = subMonths(state.previewDate, 1);
-          return {
-            ...state,
-            previewDate
-          };
-        }
-      case 'MANUALLY_UPDATE_INPUT':
-        {
-          const inputValue = action.value;
-          const currentDate = parseInputValue$1({
-            inputValue,
-            customParseDate
-          });
-          if (onChange && currentDate && isValid(currentDate) && !isSameDay(value, currentDate)) {
-            onChange(currentDate);
-          }
-          return {
-            ...state,
-            isOpen: true,
-            inputValue
-          };
-        }
-      case 'CONTROLLED_VALUE_CHANGE':
-        {
-          const previewDate = action.value || new Date();
-          const inputValue = formatInputValue({
-            date: action.value,
-            locale,
-            formatDate
-          });
-          return {
-            ...state,
-            previewDate,
-            inputValue
-          };
-        }
-      case 'CONTROLLED_LOCALE_CHANGE':
-        {
-          const inputValue = formatInputValue({
-            date: value,
-            locale,
-            formatDate
-          });
-          return {
-            ...state,
-            inputValue
-          };
-        }
-      case 'SELECT_DATE':
-        {
-          const inputValue = formatInputValue({
-            date: action.value,
-            locale,
-            formatDate
-          });
-          if (onChange && action.value && isValid(action.value) && !isSameDay(value, action.value)) {
-            onChange(action.value);
-          }
-          return {
-            ...state,
-            isOpen: false,
-            inputValue
-          };
-        }
-      default:
-        throw new Error();
-    }
-  };
-};
-function retrieveInitialState$1(initialProps) {
-  let previewDate = initialProps.value;
-  if (previewDate === undefined || !isValid(previewDate)) {
-    previewDate = new Date();
-  }
-  let inputValue = '';
-  if (initialProps.value !== undefined) {
-    if (initialProps.formatDate) {
-      inputValue = initialProps.formatDate(initialProps.value);
-    } else {
-      inputValue = new Intl.DateTimeFormat(initialProps.locale, {
-        month: 'long',
-        day: 'numeric',
-        year: 'numeric'
-      }).format(previewDate);
-    }
-  }
-  return {
-    isOpen: false,
-    previewDate,
-    inputValue
-  };
-}
-
-const Input = forwardRef((_ref, ref) => {
-  let {
-    element,
-    dispatch,
-    state,
-    refKey
-  } = _ref;
-  const isInputMouseDownRef = useRef(false);
-  const handleBlur = () => {
-    dispatch({
-      type: 'CLOSE'
-    });
-  };
-  const handleChange = e => {
-    dispatch({
-      type: 'MANUALLY_UPDATE_INPUT',
-      value: e.target.value
-    });
-  };
-  const handleClick = () => {
-    if (isInputMouseDownRef.current && !state.isOpen) {
-      dispatch({
-        type: 'OPEN'
-      });
-    }
-  };
-  const handleKeyDown = e => {
-    switch (e.key) {
-      case KEYS.ESCAPE:
-      case KEYS.ENTER:
-        dispatch({
-          type: 'CLOSE'
-        });
-        break;
-      case KEYS.UP:
-      case KEYS.DOWN:
-      case KEYS.SPACE:
-        dispatch({
-          type: 'OPEN'
-        });
-        break;
-    }
-  };
-  const handleMouseDown = () => {
-    isInputMouseDownRef.current = true;
-  };
-  const handleMouseUp = () => {
-    setTimeout(() => {
-      isInputMouseDownRef.current = false;
-    }, 0);
-  };
-  return cloneElement(element, {
-    [refKey]: ref,
-    onMouseDown: composeEventHandlers(element.props.onMouseDown, handleMouseDown),
-    onMouseUp: composeEventHandlers(element.props.onMouseUp, handleMouseUp),
-    onClick: composeEventHandlers(element.props.onClick, handleClick),
-    onBlur: composeEventHandlers(element.props.onBlur, handleBlur),
-    onChange: composeEventHandlers(element.props.onChange, handleChange),
-    onKeyDown: composeEventHandlers(element.props.onKeyDown, handleKeyDown),
-    autoComplete: 'off',
-    value: state.inputValue
-  });
-});
-Input.displayName = 'Input';
-
-const PLACEMENT_DEFAULT = 'bottom-start';
-const DatePicker = forwardRef((props, calendarRef) => {
-  const {
-    children,
-    placement: _placement,
-    zIndex,
-    isAnimated,
-    refKey,
-    value,
-    isCompact,
-    onChange,
-    formatDate,
-    minValue,
-    maxValue,
-    locale,
-    weekStartsOn,
-    customParseDate,
-    ...menuProps
-  } = props;
-  const theme = useContext(ThemeContext) || DEFAULT_THEME;
-  const memoizedReducer = useCallback(datepickerReducer({
-    value,
-    formatDate,
-    locale,
-    customParseDate,
-    onChange
-  }), [value, formatDate, locale, onChange, customParseDate]);
-  const [state, dispatch] = useReducer(memoizedReducer, retrieveInitialState$1(props));
-  const triggerRef = useRef(null);
-  const floatingRef = useRef(null);
-  const [isVisible, setIsVisible] = useState(state.isOpen);
-  const contextValue = useMemo(() => ({
-    state,
-    dispatch
-  }), [state, dispatch]);
-  const [floatingPlacement] = getFloatingPlacements(theme, _placement === 'auto' ? PLACEMENT_DEFAULT : _placement);
-  const {
-    refs,
-    placement,
-    update,
-    floatingStyles: {
-      transform
-    }
-  } = useFloating({
-    platform: {
-      ...platform,
-      isRTL: () => theme.rtl
-    },
-    elements: {
-      reference: triggerRef?.current,
-      floating: floatingRef?.current
-    },
-    placement: floatingPlacement,
-    middleware: [_placement === 'auto' ? autoPlacement() : flip()]
-  });
-  const Child = React__default.Children.only(children);
-  useEffect(() => {
-    let cleanup;
-    if (state.isOpen && refs.reference.current && refs.floating.current) {
-      cleanup = autoUpdate(refs.reference.current, refs.floating.current, update, {
-        elementResize: typeof ResizeObserver === 'function'
-      });
-    }
-    return () => cleanup && cleanup();
-  }, [state.isOpen, refs.reference, refs.floating, update]);
-  useEffect(() => {
-    let timeout;
-    if (state.isOpen) {
-      setIsVisible(true);
-    } else if (isAnimated) {
-      timeout = setTimeout(() => setIsVisible(false), 200);
-    } else {
-      setIsVisible(false);
-    }
-    return () => clearTimeout(timeout);
-  }, [state.isOpen, isAnimated]);
-  useEffect(() => {
-    dispatch({
-      type: 'CONTROLLED_VALUE_CHANGE',
-      value
-    });
-  }, [value]);
-  useEffect(() => {
-    dispatch({
-      type: 'CONTROLLED_LOCALE_CHANGE'
-    });
-  }, [locale]);
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Input, {
-    element: Child,
-    dispatch: dispatch,
-    state: state,
-    refKey: refKey,
-    ref: mergeRefs([triggerRef, Child.ref ? Child.ref : null])
-  }), React__default.createElement(DatePickerContext.Provider, {
-    value: contextValue
-  }, React__default.createElement(StyledMenuWrapper, {
-    ref: floatingRef,
-    style: {
-      transform
-    },
-    isHidden: !state.isOpen,
-    isAnimated: isAnimated && (state.isOpen || isVisible),
-    placement: placement,
-    zIndex: zIndex
-  }, (state.isOpen || isVisible) && React__default.createElement(StyledMenu, menuProps, React__default.createElement(Calendar$1, {
-    ref: calendarRef,
-    isCompact: isCompact,
-    value: value,
-    minValue: minValue,
-    maxValue: maxValue,
-    locale: locale,
-    weekStartsOn: weekStartsOn
-  })))));
-});
-DatePicker.displayName = 'DatePicker';
-DatePicker.propTypes = {
-  value: PropTypes.any,
-  onChange: PropTypes.any,
-  formatDate: PropTypes.func,
-  locale: PropTypes.any,
-  weekStartsOn: PropTypes.oneOf(WEEK_STARTS_ON),
-  minValue: PropTypes.any,
-  maxValue: PropTypes.any,
-  isCompact: PropTypes.bool,
-  customParseDate: PropTypes.any,
-  refKey: PropTypes.string,
-  placement: PropTypes.oneOf(PLACEMENT),
-  isAnimated: PropTypes.bool,
-  zIndex: PropTypes.number
-};
-DatePicker.defaultProps = {
-  placement: PLACEMENT_DEFAULT,
-  refKey: 'ref',
-  isAnimated: true,
-  zIndex: 1000,
-  locale: 'en-US'
-};
-
-function formatValue(_ref) {
-  let {
-    value,
-    locale,
-    formatDate
-  } = _ref;
-  let stringValue = '';
-  if (value !== undefined && isValid(value)) {
-    if (formatDate) {
-      stringValue = formatDate(value);
-    } else {
-      stringValue = new Intl.DateTimeFormat(locale, {
-        month: 'long',
-        day: 'numeric',
-        year: 'numeric'
-      }).format(value);
-    }
-  }
-  return stringValue;
-}
-function parseInputValue(_ref2) {
-  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;
-  }
-  tryParseDate = parse(inputValue || '', 'PP', new Date());
-  if (isValid(tryParseDate) && !isBefore(tryParseDate, MINIMUM_DATE)) {
-    return tryParseDate;
-  }
-  tryParseDate = parse(inputValue || '', 'PPP', new Date());
-  if (isValid(tryParseDate) && !isBefore(tryParseDate, MINIMUM_DATE)) {
-    return tryParseDate;
-  }
-  return new Date(NaN);
-}
-const datepickerRangeReducer = _ref3 => {
-  let {
-    startValue,
-    endValue,
-    locale,
-    formatDate,
-    customParseDate
-  } = _ref3;
-  return (state, action) => {
-    switch (action.type) {
-      case 'START_FOCUS':
-        {
-          let previewDate = state.previewDate;
-          if (startValue) {
-            if (compareAsc(startValue, startOfMonth(state.previewDate)) === 1 && compareAsc(startValue, addMonths(endOfMonth(state.previewDate), 1)) === -1) {
-              previewDate = state.previewDate;
-            } else {
-              previewDate = startOfMonth(startValue);
-            }
-          }
-          return {
-            ...state,
-            previewDate,
-            isStartFocused: true,
-            isEndFocused: false
-          };
-        }
-      case 'END_FOCUS':
-        {
-          let previewDate = state.previewDate;
-          if (endValue) {
-            if (compareAsc(endValue, startOfMonth(state.previewDate)) === 1 && compareAsc(endValue, addMonths(endOfMonth(state.previewDate), 1)) === -1) {
-              previewDate = state.previewDate;
-            } else {
-              previewDate = startOfMonth(endValue);
-            }
-          }
-          return {
-            ...state,
-            previewDate,
-            isEndFocused: true,
-            isStartFocused: false
-          };
-        }
-      case 'START_BLUR':
-        {
-          let parsedDate;
-          if (customParseDate) {
-            parsedDate = customParseDate(state.startInputValue);
-          } else {
-            parsedDate = parseInputValue({
-              inputValue: state.startInputValue
-            });
-          }
-          const startInputValue = formatValue({
-            value: parsedDate,
-            locale,
-            formatDate
-          });
-          return {
-            ...state,
-            startInputValue: startInputValue || formatValue({
-              value: startValue,
-              locale,
-              formatDate
-            }),
-            isStartFocused: false
-          };
-        }
-      case 'END_BLUR':
-        {
-          let parsedDate;
-          if (customParseDate) {
-            parsedDate = customParseDate(state.endInputValue);
-          } else {
-            parsedDate = parseInputValue({
-              inputValue: state.endInputValue
-            });
-          }
-          const endInputValue = formatValue({
-            value: parsedDate,
-            locale,
-            formatDate
-          }) || formatValue({
-            value: endValue,
-            locale,
-            formatDate
-          });
-          return {
-            ...state,
-            endInputValue,
-            isEndFocused: false
-          };
-        }
-      case 'CONTROLLED_START_VALUE_CHANGE':
-        {
-          const startInputValue = formatValue({
-            value: action.value,
-            locale,
-            formatDate
-          });
-          let previewDate = state.previewDate;
-          if (action.value) {
-            if (compareAsc(action.value, startOfMonth(state.previewDate)) === 1 && compareAsc(action.value, addMonths(endOfMonth(state.previewDate), 1)) === -1) {
-              previewDate = state.previewDate;
-            } else {
-              previewDate = startOfMonth(action.value);
-            }
-          }
-          return {
-            ...state,
-            startInputValue,
-            hoverDate: undefined,
-            previewDate
-          };
-        }
-      case 'CONTROLLED_END_VALUE_CHANGE':
-        {
-          const endInputValue = formatValue({
-            value: action.value,
-            locale,
-            formatDate
-          });
-          let previewDate = state.previewDate;
-          if (action.value) {
-            if (compareAsc(action.value, startOfMonth(state.previewDate)) === 1 && compareAsc(action.value, addMonths(endOfMonth(state.previewDate), 1)) === -1) {
-              previewDate = state.previewDate;
-            } else {
-              previewDate = startOfMonth(action.value);
-            }
-          }
-          return {
-            ...state,
-            endInputValue,
-            hoverDate: undefined,
-            previewDate
-          };
-        }
-      case 'CLICK_DATE':
-        if (state.isStartFocused) {
-          if (endValue !== undefined && (isBefore(action.value, endValue) || isSameDay(action.value, endValue))) {
-            return {
-              ...state,
-              startInputValue: formatValue({
-                value: action.value
-              })
-            };
-          }
-          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 {
-              ...state,
-              endInputValue: formatValue({
-                value: action.value
-              })
-            };
-          }
-          return {
-            ...state,
-            startInputValue: formatValue({
-              value: action.value
-            })
-          };
-        } else if (startValue === undefined) {
-          return {
-            ...state,
-            startInputValue: formatValue({
-              value: action.value
-            }),
-            endInputValue: undefined
-          };
-        } else if (endValue === undefined) {
-          if (isBefore(action.value, startValue)) {
-            return {
-              ...state,
-              startInputValue: formatValue({
-                value: action.value
-              }),
-              endInputValue: undefined
-            };
-          }
-          return {
-            ...state,
-            endInputValue: formatValue({
-              value: action.value
-            })
-          };
-        }
-        return state;
-      case 'START_INPUT_ONCHANGE':
-        {
-          return {
-            ...state,
-            startInputValue: action.value
-          };
-        }
-      case 'END_INPUT_ONCHANGE':
-        {
-          return {
-            ...state,
-            endInputValue: action.value
-          };
-        }
-      case 'HOVER_DATE':
-        return {
-          ...state,
-          hoverDate: action.value
-        };
-      case 'PREVIEW_NEXT_MONTH':
-        {
-          const previewDate = addMonths(state.previewDate, 1);
-          return {
-            ...state,
-            previewDate,
-            hoverDate: undefined
-          };
-        }
-      case 'PREVIEW_PREVIOUS_MONTH':
-        {
-          const previewDate = subMonths(state.previewDate, 1);
-          return {
-            ...state,
-            previewDate,
-            hoverDate: undefined
-          };
-        }
-      default:
-        throw new Error();
-    }
-  };
-};
-function retrieveInitialState(initialProps) {
-  let previewDate = initialProps.startValue;
-  if (previewDate === undefined || !isValid(previewDate)) {
-    previewDate = new Date();
-  }
-  const startInputValue = formatValue({
-    value: initialProps.startValue,
-    locale: initialProps.locale,
-    formatDate: initialProps.formatDate
-  });
-  const endInputValue = formatValue({
-    value: initialProps.endValue,
-    locale: initialProps.locale,
-    formatDate: initialProps.formatDate
-  });
-  return {
-    previewDate,
-    startInputValue,
-    endInputValue,
-    isStartFocused: false,
-    isEndFocused: false
-  };
-}
-
-const DatePickerRangeContext = createContext(undefined);
-const useDatePickerContext = () => {
-  return useContext(DatePickerRangeContext);
-};
-
-const Start = props => {
-  const {
-    state,
-    dispatch,
-    onChange,
-    startValue,
-    endValue,
-    startInputRef,
-    customParseDate
-  } = useDatePickerContext();
-  const onChangeCallback = useCallback(e => {
-    dispatch({
-      type: 'START_INPUT_ONCHANGE',
-      value: e.target.value
-    });
-    props.children.props.onChange && props.children.props.onChange(e);
-  }, [dispatch, props.children]);
-  const onFocusCallback = useCallback(e => {
-    dispatch({
-      type: 'START_FOCUS'
-    });
-    props.children.props.onFocus && props.children.props.onFocus(e);
-  }, [dispatch, props.children]);
-  const handleBlur = useCallback(() => {
-    let parsedDate;
-    if (customParseDate) {
-      parsedDate = customParseDate(state.startInputValue);
-    } else {
-      parsedDate = parseInputValue({
-        inputValue: state.startInputValue
-      });
-    }
-    dispatch({
-      type: 'START_BLUR'
-    });
-    if (parsedDate && isValid(parsedDate) && !isSameDay(parsedDate, startValue)) {
-      onChange && onChange({
-        startValue: parsedDate,
-        endValue
-      });
-    }
-  }, [dispatch, onChange, startValue, endValue, customParseDate, state.startInputValue]);
-  const onKeyDownCallback = useCallback(e => {
-    if (e.key === KEYS.ENTER) {
-      e.preventDefault();
-      handleBlur();
-    }
-    props.children.props.onKeyDown && props.children.props.onKeyDown(e);
-  }, [handleBlur, props.children]);
-  const onBlurCallback = useCallback(e => {
-    handleBlur();
-    props.children.props.onBlur && props.children.props.onBlur(e);
-  }, [handleBlur, props.children]);
-  const childElement = React__default.Children.only(props.children);
-  return React__default.cloneElement(childElement, {
-    value: state.startInputValue || '',
-    ref: startInputRef,
-    onChange: composeEventHandlers(childElement.props.onChange, onChangeCallback),
-    onFocus: composeEventHandlers(childElement.props.onFocus, onFocusCallback),
-    onKeyDown: composeEventHandlers(childElement.props.onKeyDown, onKeyDownCallback),
-    onBlur: composeEventHandlers(childElement.props.onBlur, onBlurCallback)
-  });
-};
-Start.displayName = 'DatePickerRange.Start';
-
-const End = props => {
-  const {
-    state,
-    dispatch,
-    onChange,
-    startValue,
-    endValue,
-    endInputRef,
-    customParseDate
-  } = useDatePickerContext();
-  const onChangeCallback = useCallback(e => {
-    dispatch({
-      type: 'END_INPUT_ONCHANGE',
-      value: e.target.value
-    });
-    props.children.props.onChange && props.children.props.onChange(e);
-  }, [dispatch, props.children]);
-  const onFocusCallback = useCallback(e => {
-    dispatch({
-      type: 'END_FOCUS'
-    });
-    props.children.props.onFocus && props.children.props.onFocus(e);
-  }, [dispatch, props.children]);
-  const handleBlur = useCallback(() => {
-    dispatch({
-      type: 'END_BLUR'
-    });
-    let parsedDate;
-    if (customParseDate) {
-      parsedDate = customParseDate(state.endInputValue);
-    } else {
-      parsedDate = parseInputValue({
-        inputValue: state.endInputValue
-      });
-    }
-    if (onChange && parsedDate && isValid(parsedDate) && !isSameDay(parsedDate, endValue)) {
-      onChange && onChange({
-        startValue,
-        endValue: parsedDate
-      });
-    }
-  }, [dispatch, onChange, startValue, endValue, customParseDate, state.endInputValue]);
-  const onKeydownCallback = useCallback(e => {
-    if (e.key === KEYS.ENTER) {
-      handleBlur();
-      e.preventDefault();
-    }
-    props.children.props.onKeyDown && props.children.props.onKeyDown(e);
-  }, [handleBlur, props.children]);
-  const onBlurCallback = useCallback(e => {
-    handleBlur();
-    props.children.props.onBlur && props.children.props.onBlur(e);
-  }, [handleBlur, props.children]);
-  const childElement = React__default.Children.only(props.children);
-  return React__default.cloneElement(childElement, {
-    value: state.endInputValue || '',
-    ref: endInputRef,
-    onChange: composeEventHandlers(childElement.props.onChange, onChangeCallback),
-    onFocus: composeEventHandlers(childElement.props.onFocus, onFocusCallback),
-    onKeyDown: composeEventHandlers(childElement.props.onKeyDown, onKeydownCallback),
-    onBlur: composeEventHandlers(childElement.props.onBlur, onBlurCallback)
-  });
-};
-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);
-}
-
-const Month = forwardRef((_ref, ref) => {
-  let {
-    displayDate,
-    isPreviousHidden,
-    isNextHidden
-  } = _ref;
-  const {
-    state,
-    dispatch,
-    locale,
-    weekStartsOn,
-    isCompact,
-    minValue,
-    maxValue,
-    startValue,
-    endValue,
-    onChange
-  } = useDatePickerContext();
-  const headerLabelFormatter = useCallback(date => {
-    const formatter = new Intl.DateTimeFormat(locale, {
-      month: 'long',
-      year: 'numeric'
-    });
-    return formatter.format(date);
-  }, [locale]);
-  const dayLabelFormatter = useCallback(date => {
-    const formatter = new Intl.DateTimeFormat(locale, {
-      weekday: 'short'
-    });
-    return formatter.format(date);
-  }, [locale]);
-  const dayFormatter = useCallback(date => {
-    const formatter = new Intl.DateTimeFormat(locale, {
-      day: 'numeric'
-    });
-    return formatter.format(date);
-  }, [locale]);
-  const preferredWeekStartsOn = weekStartsOn || getStartOfWeek(locale);
-  const monthStartDate = startOfMonth(displayDate);
-  const monthEndDate = endOfMonth(monthStartDate);
-  const startDate = startOfWeek(monthStartDate, {
-    weekStartsOn: preferredWeekStartsOn
-  });
-  const endDate = endOfWeek(monthEndDate, {
-    weekStartsOn: preferredWeekStartsOn
-  });
-  const dayLabels = eachDayOfInterval({
-    start: startDate,
-    end: addDays(startDate, 6)
-  }).map(date => {
-    const formattedDayLabel = dayLabelFormatter(date);
-    return React__default.createElement(StyledCalendarItem, {
-      key: `day-label-${formattedDayLabel}`,
-      isCompact: isCompact
-    }, React__default.createElement(StyledDayLabel, {
-      isCompact: isCompact
-    }, formattedDayLabel));
-  });
-  const items = eachDayOfInterval({
-    start: startDate,
-    end: endDate
-  }).map((date, itemsIndex) => {
-    const formattedDayLabel = dayFormatter(date);
-    const isCurrentDate = isToday(date);
-    const isPreviousMonth = !isSameMonth(date, displayDate);
-    if (isPreviousMonth) {
-      return React__default.createElement(StyledCalendarItem, {
-        key: `day-${itemsIndex}`,
-        isCompact: isCompact
-      }, React__default.createElement(StyledDay, {
-        isCompact: isCompact,
-        isPreviousMonth: true,
-        isDisabled: true
-      }, "\xA0"));
-    }
-    let isSelected = false;
-    if (startValue !== undefined) {
-      isSelected = isSameDay(date, startValue);
-    }
-    if (endValue !== undefined) {
-      isSelected = isSelected || isSameDay(date, endValue);
-    }
-    let isDisabled = false;
-    if (minValue !== undefined) {
-      isDisabled = isBefore(date, minValue) && !isSameDay(date, minValue);
-    }
-    if (maxValue !== undefined) {
-      isDisabled = isDisabled || isAfter(date, maxValue) && !isSameDay(date, maxValue);
-    }
-    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));
-    }
-    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;
-      }
-      if (endValue) {
-        isInvalidDateRange = isInvalidDateRange || compareAsc(endValue, subDays(minValue, 1)) === -1;
-      }
-    }
-    if (maxValue) {
-      if (startValue) {
-        isInvalidDateRange = isInvalidDateRange || compareAsc(startValue, maxValue) === 1;
-      }
-      if (endValue) {
-        isInvalidDateRange = isInvalidDateRange || compareAsc(endValue, maxValue) === 1;
-      }
-    }
-    return React__default.createElement(StyledCalendarItem, {
-      key: `day-${itemsIndex}`,
-      isCompact: isCompact
-    }, React__default.createElement(StyledHighlight, {
-      isHighlighted: !isInvalidDateRange && isHighlighted && !isDisabled,
-      isStart: !isInvalidDateRange && isHighlightStart,
-      isEnd: !isInvalidDateRange && isHighlightEnd
-    }), React__default.createElement(StyledDay, {
-      isToday: isCurrentDate,
-      isPreviousMonth: isPreviousMonth,
-      isSelected: !isInvalidDateRange && isSelected,
-      isDisabled: isDisabled,
-      isCompact: isCompact,
-      onClick: () => {
-        if (!isDisabled) {
-          dispatch({
-            type: 'CLICK_DATE',
-            value: date
-          });
-          if (onChange) {
-            if (state.isStartFocused) {
-              if (endValue !== undefined && (isBefore(date, endValue) || isSameDay(date, endValue))) {
-                onChange({
-                  startValue: date,
-                  endValue
-                });
-              } else {
-                onChange({
-                  startValue: date,
-                  endValue: undefined
-                });
-              }
-            } else if (state.isEndFocused) {
-              if (startValue !== undefined && (isAfter(date, startValue) || isSameDay(date, startValue))) {
-                onChange({
-                  startValue,
-                  endValue: date
-                });
-              } else {
-                onChange({
-                  startValue: date,
-                  endValue: undefined
-                });
-              }
-            } else if (startValue === undefined) {
-              onChange({
-                startValue: date,
-                endValue: undefined
-              });
-            } else if (endValue === undefined) {
-              if (isBefore(date, startValue)) {
-                onChange({
-                  startValue: date,
-                  endValue: undefined
-                });
-              } else {
-                onChange({
-                  startValue,
-                  endValue: date
-                });
-              }
-            } else {
-              onChange({
-                startValue: date,
-                endValue: undefined
-              });
-            }
-          }
-        }
-      },
-      onMouseEnter: () => {
-        if (!isSelected) {
-          dispatch({
-            type: 'HOVER_DATE',
-            value: date
-          });
-        }
-      }
-    }, formattedDayLabel));
-  });
-  return React__default.createElement(StyledDatePicker, {
-    ref: ref,
-    isCompact: isCompact,
-    onMouseDown: e => {
-      e.preventDefault();
-    }
-  }, React__default.createElement(StyledHeader, {
-    isCompact: isCompact
-  }, React__default.createElement(StyledHeaderPaddle, {
-    isCompact: isCompact,
-    onClick: () => {
-      dispatch({
-        type: 'PREVIEW_PREVIOUS_MONTH'
-      });
-    },
-    isHidden: isPreviousHidden
-  }, React__default.createElement(SvgChevronLeftStroke, null)), React__default.createElement(StyledHeaderLabel, {
-    isCompact: isCompact
-  }, headerLabelFormatter(displayDate)), React__default.createElement(StyledHeaderPaddle, {
-    isCompact: isCompact,
-    isHidden: isNextHidden,
-    onClick: () => {
-      dispatch({
-        type: 'PREVIEW_NEXT_MONTH'
-      });
-    }
-  }, React__default.createElement(SvgChevronRightStroke, null))), React__default.createElement(StyledCalendar, {
-    isCompact: isCompact,
-    onMouseLeave: () => {
-      dispatch({
-        type: 'HOVER_DATE',
-        value: undefined
-      });
-    }
-  }, dayLabels, items));
-});
-Month.displayName = 'Month';
-
-const Calendar = forwardRef((props, ref) => {
-  const {
-    state
-  } = useDatePickerContext();
-  return React__default.createElement(StyledRangeCalendar, _extends({
-    ref: ref,
-    "data-garden-id": "datepickers.range",
-    "data-garden-version": '9.0.0-next.7'
-  }, props), React__default.createElement(Month, {
-    displayDate: state.previewDate,
-    isNextHidden: true
-  }), React__default.createElement(Month, {
-    displayDate: addMonths(state.previewDate, 1),
-    isPreviousHidden: true
-  }));
-});
-Calendar.displayName = 'DatePickerRange.Calendar';
-
-const DatePickerRangeComponent = props => {
-  const {
-    startValue,
-    locale,
-    weekStartsOn,
-    formatDate,
-    endValue,
-    onChange,
-    customParseDate,
-    isCompact,
-    minValue,
-    maxValue,
-    children
-  } = props;
-  const reducer = useCallback(datepickerRangeReducer({
-    startValue,
-    locale,
-    formatDate,
-    endValue,
-    customParseDate
-  }), [startValue, endValue, locale, formatDate, onChange, customParseDate]);
-  const [state, dispatch] = useReducer(reducer, retrieveInitialState(props));
-  const previousStartValue = useRef(startValue);
-  const previousEndValue = useRef(endValue);
-  const startInputRef = useRef();
-  const endInputRef = useRef();
-  useEffect(() => {
-    dispatch({
-      type: 'CONTROLLED_START_VALUE_CHANGE',
-      value: startValue
-    });
-    if (endInputRef.current && previousStartValue.current !== startValue && startValue !== undefined) {
-      endInputRef.current.focus();
-    }
-    previousStartValue.current = startValue;
-  }, [props, startValue]);
-  useEffect(() => {
-    dispatch({
-      type: 'CONTROLLED_END_VALUE_CHANGE',
-      value: endValue
-    });
-    if (startInputRef.current && previousEndValue.current !== endValue && endValue !== undefined) {
-      startInputRef.current.focus();
-    }
-    previousEndValue.current = endValue;
-  }, [props, endValue]);
-  const value = 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.createElement(DatePickerRangeContext.Provider, {
-    value: value
-  }, children);
-};
-DatePickerRangeComponent.propTypes = {
-  locale: PropTypes.string,
-  weekStartsOn: PropTypes.number,
-  startValue: PropTypes.instanceOf(Date),
-  endValue: PropTypes.instanceOf(Date),
-  minValue: PropTypes.instanceOf(Date),
-  maxValue: PropTypes.instanceOf(Date),
-  onChange: PropTypes.func,
-  formatDate: PropTypes.func,
-  customParseDate: PropTypes.func,
-  isCompact: PropTypes.bool
-};
-DatePickerRangeComponent.defaultProps = {
-  locale: 'en-US',
-  isCompact: false
-};
-const DatePickerRange = DatePickerRangeComponent;
-DatePickerRange.Calendar = Calendar;
-DatePickerRange.End = End;
-DatePickerRange.Start = Start;
-
-export { DatePicker, DatePickerRange };