@spothero/ui 17.0.3-beta.0 → 17.1.0-beta.0

package/dist/components/DatepickerRange/components/DateRow.js

@@ -0,0 +1,260 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@chakra-ui/react");
+
+var _propTypes = require("../utils/propTypes");
+
+var _DatepickerRangeContext = require("../DatepickerRangeContext");
+
+var _generalCalculations = require("../utils/generalCalculations");
+
+var _dateRowArithmentic = require("../utils/dateRowArithmentic");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(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) { (0, _defineProperty2.default)(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; }
+
+var handleCalendarDateContainerBackgroundColorStyles = function handleCalendarDateContainerBackgroundColorStyles(selectedStartDate, selectedEndDate, hoveredDate, calendarDate) {
+  var defaultStyles = {
+    backgroundColor: 'transparent',
+    borderLeftRadius: 'none',
+    borderRightRadius: 'none'
+  }; // Only Start Date is Selected
+
+  if (selectedStartDate && !selectedEndDate) {
+    // Styles for Dates between Start and Hovered Dates
+    if ((0, _dateRowArithmentic.withinRange)(calendarDate, hoveredDate, selectedStartDate)) {
+      return _objectSpread(_objectSpread({}, defaultStyles), {}, {
+        backgroundColor: 'primary.100'
+      });
+    } // Styles for Start Date depending on which direction the Hovered Date is in
+    else if ((0, _dateRowArithmentic.areEqual)(calendarDate, selectedStartDate)) {
+      return _objectSpread(_objectSpread({}, defaultStyles), {}, {
+        backgroundColor: 'primary.100',
+        borderLeftRadius: !hoveredDate || (0, _dateRowArithmentic.isAfterStart)(hoveredDate, selectedStartDate) || (0, _dateRowArithmentic.areEqual)(hoveredDate, selectedStartDate) ? 'full' : 'none',
+        borderRightRadius: !hoveredDate || (0, _dateRowArithmentic.isBeforeStart)(hoveredDate, selectedStartDate) || (0, _dateRowArithmentic.areEqual)(hoveredDate, selectedStartDate) ? 'full' : 'none'
+      });
+    } // Styles for the Hovered Date depending on which direction the Start Date is in
+    else if ((0, _dateRowArithmentic.areEqual)(calendarDate, hoveredDate)) {
+      return _objectSpread(_objectSpread({}, defaultStyles), {}, {
+        backgroundColor: 'primary.100',
+        borderLeftRadius: (0, _dateRowArithmentic.isBeforeStart)(hoveredDate, selectedStartDate) ? 'full' : 'none',
+        borderRightRadius: (0, _dateRowArithmentic.isAfterStart)(hoveredDate, selectedStartDate) ? 'full' : 'none'
+      });
+    }
+  } // Start and End date selected
+  else if (selectedStartDate && selectedEndDate) {
+    // Styles for Dates between Start and End Dates
+    if ((0, _dateRowArithmentic.withinRange)(calendarDate, selectedEndDate, selectedStartDate) || (0, _dateRowArithmentic.areEqual)(calendarDate, selectedStartDate) || (0, _dateRowArithmentic.areEqual)(calendarDate, selectedEndDate)) {
+      return _objectSpread(_objectSpread({}, defaultStyles), {}, {
+        backgroundColor: 'primary.100',
+        borderLeftRadius: (0, _dateRowArithmentic.areEqual)(calendarDate, selectedStartDate) ? 'full' : 'none',
+        borderRightRadius: (0, _dateRowArithmentic.areEqual)(calendarDate, selectedEndDate) ? 'full' : 'none'
+      });
+    }
+  } // Default Styling
+  else {
+    return defaultStyles;
+  }
+};
+
+var getCalendarDateContainerStyleProps = function getCalendarDateContainerStyleProps(selectedStartDate, selectedEndDate, hoveredDate, calendarDate) {
+  return _objectSpread(_objectSpread({
+    marginTop: 0,
+    padding: 0,
+    width: {
+      base: 10,
+      tablet: 12
+    },
+    height: {
+      base: 10,
+      tablet: 12
+    }
+  }, handleCalendarDateContainerBackgroundColorStyles(selectedStartDate, selectedEndDate, hoveredDate, calendarDate)), {}, {
+    _disabled: {
+      cursor: 'not-allowed',
+      backgroundColor: 'transparent',
+      border: 'none',
+      _hover: {
+        backgroundColor: 'transparent',
+        border: 'none'
+      }
+    }
+  });
+};
+
+var getCalendarDateStyleProps = function getCalendarDateStyleProps(today, date, calendarDate, selectedStartDate, selectedEndDate, disableBeforeDate, disableAfterDate) {
+  return {
+    padding: 0,
+    borderRadius: 'full',
+    width: {
+      base: 10,
+      tablet: 12
+    },
+    height: {
+      base: 10,
+      tablet: 12
+    },
+    borderColor: (0, _dateRowArithmentic.selected)(calendarDate, selectedStartDate, selectedEndDate) ? 'white' : 'transparent',
+    fontWeight: (0, _dateRowArithmentic.selected)(calendarDate, selectedStartDate, selectedEndDate) ? 'semibold' : (0, _dateRowArithmentic.isToday)(calendarDate, today) ? 'bold' : 'base',
+    zIndex: (0, _dateRowArithmentic.selected)(calendarDate, selectedStartDate, selectedEndDate) ? '1200' : '1100',
+    backgroundColor: (0, _dateRowArithmentic.selected)(calendarDate, selectedStartDate, selectedEndDate) ? 'primary.default' : 'transparent',
+    color: (0, _dateRowArithmentic.selected)(calendarDate, selectedStartDate, selectedEndDate) ? 'text.primary.dark' : (0, _dateRowArithmentic.outOfMonth)(calendarDate, date) || (0, _dateRowArithmentic.isBeforeDisabledDate)(calendarDate, disableBeforeDate) || (0, _dateRowArithmentic.isAfterDisabledDate)(calendarDate, disableAfterDate) ? 'text.secondary.light' : 'text.primary.light',
+    _hover: {
+      borderWidth: '1px',
+      borderColor: (0, _dateRowArithmentic.selected)(calendarDate, selectedStartDate, selectedEndDate) ? 'white' : 'primary.default',
+      backgroundColor: (0, _dateRowArithmentic.selected)(calendarDate, selectedStartDate, selectedEndDate) ? 'primary.600' : 'white'
+    },
+    _active: {
+      backgroundColor: 'gray.light',
+      borderColor: 'white',
+      color: 'text.secondary.light'
+    },
+    _disabled: {
+      cursor: 'not-allowed',
+      backgroundColor: 'transparent',
+      border: 'none',
+      borderColor: 'white',
+      _hover: {
+        backgroundColor: 'transparent',
+        border: 'none',
+        borderColor: 'white'
+      }
+    }
+  };
+};
+
+var DateRow = function DateRow(_ref) {
+  var dates = _ref.dates,
+      dateRowOverrides = _ref.dateRowOverrides;
+
+  /* eslint-disable no-unused-vars */
+  var _useState = (0, _react.useState)(),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      hoveredDate = _useState2[0],
+      setHoveredDate = _useState2[1];
+
+  var _useDatepickerRange = (0, _DatepickerRangeContext.useDatepickerRange)(),
+      _useDatepickerRange$t = (0, _slicedToArray2.default)(_useDatepickerRange.today, 1),
+      today = _useDatepickerRange$t[0],
+      _useDatepickerRange$d = (0, _slicedToArray2.default)(_useDatepickerRange.date, 2),
+      date = _useDatepickerRange$d[0],
+      setDate = _useDatepickerRange$d[1],
+      _useDatepickerRange$s = (0, _slicedToArray2.default)(_useDatepickerRange.selectedStartDate, 2),
+      selectedStartDate = _useDatepickerRange$s[0],
+      setSelectedStartDate = _useDatepickerRange$s[1],
+      _useDatepickerRange$s2 = (0, _slicedToArray2.default)(_useDatepickerRange.selectedEndDate, 2),
+      selectedEndDate = _useDatepickerRange$s2[0],
+      setSelectedEndDate = _useDatepickerRange$s2[1],
+      _useDatepickerRange$s3 = (0, _slicedToArray2.default)(_useDatepickerRange.startIsSelected, 2),
+      startIsSelected = _useDatepickerRange$s3[0],
+      setStartIsSelected = _useDatepickerRange$s3[1],
+      _useDatepickerRange$e = (0, _slicedToArray2.default)(_useDatepickerRange.endIsSelected, 2),
+      endIsSelected = _useDatepickerRange$e[0],
+      setEndIsSelected = _useDatepickerRange$e[1],
+      _useDatepickerRange$d2 = (0, _slicedToArray2.default)(_useDatepickerRange.disableBeforeDate, 1),
+      disableBeforeDate = _useDatepickerRange$d2[0],
+      _useDatepickerRange$d3 = (0, _slicedToArray2.default)(_useDatepickerRange.disableAfterDate, 1),
+      disableAfterDate = _useDatepickerRange$d3[0],
+      onClose = _useDatepickerRange.disclosure.onClose;
+  /* eslint-enable no-unused-vars */
+
+
+  var handleSelect = function handleSelect(providedDate) {
+    return function () {
+      if (startIsSelected) {
+        setSelectedStartDate(new Date(providedDate));
+        setSelectedEndDate(null);
+        setStartIsSelected(false);
+        setEndIsSelected(true);
+      } else if (endIsSelected) {
+        if (providedDate < selectedStartDate) {
+          setSelectedEndDate(selectedStartDate);
+          setSelectedStartDate(new Date(providedDate));
+        } else {
+          setSelectedEndDate(new Date(providedDate));
+        }
+
+        setStartIsSelected(false);
+        setEndIsSelected(false);
+        onClose();
+      } else {
+        setStartIsSelected(true);
+        setEndIsSelected(false);
+      }
+
+      setDate(new Date(providedDate));
+    };
+  };
+
+  var handleMouseEnter = function handleMouseEnter(evt) {
+    setHoveredDate(new Date(evt.target.value));
+  };
+
+  var handleMouseLeave = function handleMouseLeave() {
+    setHoveredDate(null);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react2.Tbody, (0, _extends2.default)({
+    "data-testid": "calendarDatesContainer"
+  }, dateRowOverrides === null || dateRowOverrides === void 0 ? void 0 : dateRowOverrides.tbody), (0, _map.default)(dates).call(dates, function (week, index) {
+    return /*#__PURE__*/_react.default.createElement(_react2.Tr, (0, _extends2.default)({
+      key: index,
+      border: "none",
+      "data-testid": "calendarRow"
+    }, dateRowOverrides === null || dateRowOverrides === void 0 ? void 0 : dateRowOverrides.tr), (0, _map.default)(week).call(week, function (calendarDate, idx) {
+      return /*#__PURE__*/_react.default.createElement(_react2.Td, (0, _extends2.default)({
+        key: idx,
+        "data-date": (0, _generalCalculations.formatForDataDate)(calendarDate)
+      }, getCalendarDateContainerStyleProps(selectedStartDate, selectedEndDate, hoveredDate, calendarDate), {
+        disabled: (0, _dateRowArithmentic.isBeforeDisabledDate)(calendarDate, disableBeforeDate) || (0, _dateRowArithmentic.isAfterDisabledDate)(calendarDate, disableAfterDate)
+      }, dateRowOverrides === null || dateRowOverrides === void 0 ? void 0 : dateRowOverrides.td), /*#__PURE__*/_react.default.createElement(_react2.Button, (0, _extends2.default)({
+        value: calendarDate,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        "data-testid": "dateColumn-calendarDate",
+        onClick: handleSelect(calendarDate)
+      }, getCalendarDateStyleProps(today, date, calendarDate, selectedStartDate, selectedEndDate, disableBeforeDate, disableAfterDate), {
+        disabled: (0, _dateRowArithmentic.isBeforeDisabledDate)(calendarDate, disableBeforeDate) || (0, _dateRowArithmentic.isAfterDisabledDate)(calendarDate, disableAfterDate)
+      }, dateRowOverrides === null || dateRowOverrides === void 0 ? void 0 : dateRowOverrides.button), (0, _dateRowArithmentic.getButtonText)(calendarDate)));
+    }));
+  }));
+};
+
+var _default = DateRow;
+exports.default = _default;

package/dist/components/DatepickerRange/components/DatepickerDays.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@chakra-ui/react");
+
+var _constants = require("../constants");
+
+var _getWeeksOfMonth = require("../utils/getWeeksOfMonth");
+
+var _DatepickerRangeContext = require("../DatepickerRangeContext");
+
+var _propTypes = require("../utils/propTypes");
+
+var _generalCalculations = require("../utils/generalCalculations");
+
+var _DateRow = _interopRequireDefault(require("./DateRow"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var datepickerCalendarTableStyleProps = {
+  border: 'none',
+  boxShadow: 'none',
+  padding: 0,
+  margin: 0,
+  width: {
+    base: '17.5rem',
+    tablet: '21rem'
+  }
+};
+var datepickerTheadStyleProps = {
+  height: {
+    base: 10,
+    tablet: 12
+  },
+  border: 'none'
+};
+
+var getDatepickerCalendarThStyleProps = function getDatepickerCalendarThStyleProps(today, weeks, index) {
+  return {
+    width: {
+      base: 10,
+      tablet: 12
+    },
+    padding: 0,
+    fontSize: 'base',
+    textAlign: 'center',
+    color: 'text.secondary.light',
+    fontWeight: (0, _generalCalculations.isCurrentMonthAndYearInView)(today, weeks) && today.getDay() === index ? 'bold' : 'normal'
+  };
+};
+
+var DatepickerDays = function DatepickerDays(_ref) {
+  var datepickerRangeDaysOverrides = _ref.datepickerRangeDaysOverrides;
+
+  var _useDatepickerRange = (0, _DatepickerRangeContext.useDatepickerRange)(),
+      _useDatepickerRange$t = (0, _slicedToArray2.default)(_useDatepickerRange.today, 1),
+      today = _useDatepickerRange$t[0],
+      _useDatepickerRange$d = (0, _slicedToArray2.default)(_useDatepickerRange.date, 1),
+      date = _useDatepickerRange$d[0];
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      weeks = _useState2[0],
+      setWeeks = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    setWeeks((0, _getWeeksOfMonth.getWeeksOfMonth)(date || new Date()));
+  }, [date]);
+  return /*#__PURE__*/_react.default.createElement(_react2.Table, (0, _extends2.default)({
+    role: "grid",
+    "aria-labelledby": "id-grid-label"
+  }, datepickerCalendarTableStyleProps, datepickerRangeDaysOverrides === null || datepickerRangeDaysOverrides === void 0 ? void 0 : datepickerRangeDaysOverrides.table), /*#__PURE__*/_react.default.createElement(_react2.Thead, (0, _extends2.default)({}, datepickerTheadStyleProps, datepickerRangeDaysOverrides === null || datepickerRangeDaysOverrides === void 0 ? void 0 : datepickerRangeDaysOverrides.thead), /*#__PURE__*/_react.default.createElement(_react2.Tr, null, (0, _map.default)(_constants.DAY_NAMES).call(_constants.DAY_NAMES, function (day, index) {
+    return /*#__PURE__*/_react.default.createElement(_react2.Th, (0, _extends2.default)({
+      key: index,
+      scope: "col",
+      abbr: day.full,
+      "data-testid": "daysOfWeek-title"
+    }, getDatepickerCalendarThStyleProps(today, weeks, index), datepickerRangeDaysOverrides === null || datepickerRangeDaysOverrides === void 0 ? void 0 : datepickerRangeDaysOverrides.th), day.abbv);
+  }))), /*#__PURE__*/_react.default.createElement(_DateRow.default, {
+    dates: weeks !== null && weeks !== void 0 ? weeks : [],
+    dateRowOverrides: datepickerRangeDaysOverrides === null || datepickerRangeDaysOverrides === void 0 ? void 0 : datepickerRangeDaysOverrides.dateRowOverrides
+  }));
+};
+
+var _default = DatepickerDays;
+exports.default = _default;

package/dist/components/DatepickerRange/components/DatepickerHeader.js

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _freeze = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/freeze"));
+
+var _symbol = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/symbol"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@chakra-ui/react");
+
+var _chevronLeft = _interopRequireDefault(require("@spothero/icons/chevron-left"));
+
+var _chevronRight = _interopRequireDefault(require("@spothero/icons/chevron-right"));
+
+var _constants = require("../constants");
+
+var _DatepickerRangeContext = require("../DatepickerRangeContext");
+
+var _propTypes = require("../utils/propTypes");
+
+var Directions = (0, _freeze.default)({
+  Forward: (0, _symbol.default)('forward'),
+  Backward: (0, _symbol.default)('backward')
+});
+var monthSelectionButtonStyleProps = {
+  size: 'sm',
+  variant: 'ghost',
+  borderColor: 'transparent',
+  _hover: {
+    backgroundColor: 'gray.200'
+  }
+};
+var monthTitleStyleProps = {
+  flex: '1',
+  justifyContent: 'center',
+  fontWeight: 'semibold',
+  fontSize: 'xl'
+};
+
+var DatepickerHeader = function DatepickerHeader(_ref) {
+  var _context;
+
+  var datepickerRangeHeaderOverrides = _ref.datepickerRangeHeaderOverrides;
+
+  /* eslint-disable no-unused-vars */
+  var context = (0, _DatepickerRangeContext.useDatepickerRange)();
+
+  var _context$date = (0, _slicedToArray2.default)(context.date, 2),
+      date = _context$date[0],
+      setDate = _context$date[1];
+
+  var month = date.getMonth();
+  var year = date.getFullYear();
+  /* eslint-enable no-unused-vars */
+
+  var onChange = function onChange(dir) {
+    return function () {
+      var terminator = dir === Directions.Backward ? 0 : 11;
+      var adder = dir === Directions.Backward ? -1 : 1;
+
+      if (month === terminator) {
+        date.setFullYear(year + adder, Math.abs(11 - month));
+      } else {
+        date.setMonth(month + adder);
+      }
+
+      setDate(new Date(date));
+    };
+  };
+
+  var monthName = _constants.FULL_MONTH_NAMES[date.getMonth()];
+  /* eslint-disable react/jsx-curly-brace-presence */
+
+
+  return /*#__PURE__*/_react.default.createElement(_react2.Flex, (0, _extends2.default)({
+    alignItems: "center",
+    marginBottom: 2,
+    width: "100%"
+  }, datepickerRangeHeaderOverrides === null || datepickerRangeHeaderOverrides === void 0 ? void 0 : datepickerRangeHeaderOverrides.headerContainer), /*#__PURE__*/_react.default.createElement(_react2.IconButton, (0, _extends2.default)({
+    icon: /*#__PURE__*/_react.default.createElement(_chevronLeft.default, {
+      height: 16,
+      width: 16,
+      fill: "black"
+    }),
+    onClick: onChange(Directions.Backward),
+    "aria-label": "previous month"
+  }, monthSelectionButtonStyleProps, datepickerRangeHeaderOverrides === null || datepickerRangeHeaderOverrides === void 0 ? void 0 : datepickerRangeHeaderOverrides.iconButton)), /*#__PURE__*/_react.default.createElement(_react2.Flex, (0, _extends2.default)({
+    "aria-live": "polite",
+    id: "id-grid-label"
+  }, monthTitleStyleProps, datepickerRangeHeaderOverrides === null || datepickerRangeHeaderOverrides === void 0 ? void 0 : datepickerRangeHeaderOverrides.title), (0, _concat.default)(_context = "".concat(monthName, " ")).call(_context, year)), /*#__PURE__*/_react.default.createElement(_react2.IconButton, (0, _extends2.default)({
+    icon: /*#__PURE__*/_react.default.createElement(_chevronRight.default, {
+      height: 16,
+      width: 16,
+      fill: "black"
+    }),
+    onClick: onChange(Directions.Forward),
+    "aria-label": "next month"
+  }, monthSelectionButtonStyleProps, datepickerRangeHeaderOverrides === null || datepickerRangeHeaderOverrides === void 0 ? void 0 : datepickerRangeHeaderOverrides.iconButton)));
+  /* eslint-enable react/jsx-curly-brace-presence */
+};
+
+var _default = DatepickerHeader;
+exports.default = _default;

package/dist/components/DatepickerRange/components/DatepickerRangeControls.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@chakra-ui/react");
+
+var _DatepickerRangeContext = require("../DatepickerRangeContext");
+
+var _propTypes = require("../utils/propTypes");
+
+var _DatepickerRangeInput = _interopRequireDefault(require("./DatepickerRangeInput"));
+
+var DatepickerRangeControls = function DatepickerRangeControls(_ref) {
+  var selectedStartDate = _ref.selectedStartDate,
+      startIsSelected = _ref.startIsSelected,
+      onClickStart = _ref.onClickStart,
+      selectedEndDate = _ref.selectedEndDate,
+      endIsSelected = _ref.endIsSelected,
+      onClickEnd = _ref.onClickEnd,
+      useInputIcons = _ref.useInputIcons,
+      startDateInputLabelText = _ref.startDateInputLabelText,
+      startDateInputPlaceholderText = _ref.startDateInputPlaceholderText,
+      startDateInputErrorText = _ref.startDateInputErrorText,
+      endDateInputLabelText = _ref.endDateInputLabelText,
+      endDateInputPlaceholderText = _ref.endDateInputPlaceholderText,
+      endDateInputErrorText = _ref.endDateInputErrorText,
+      datepickerRangeControlsOverrides = _ref.datepickerRangeControlsOverrides;
+
+  var _useDatepickerRange = (0, _DatepickerRangeContext.useDatepickerRange)(),
+      isStartInvalid = _useDatepickerRange.isStartInvalid,
+      isEndInvalid = _useDatepickerRange.isEndInvalid;
+
+  return /*#__PURE__*/_react.default.createElement(_react2.Flex, (0, _extends2.default)({
+    direction: {
+      base: 'column',
+      mobileXL: 'row'
+    },
+    gap: {
+      base: 2,
+      tablet: 9
+    }
+  }, datepickerRangeControlsOverrides === null || datepickerRangeControlsOverrides === void 0 ? void 0 : datepickerRangeControlsOverrides.controlsContainer), /*#__PURE__*/_react.default.createElement(_DatepickerRangeInput.default, {
+    isSelected: startIsSelected,
+    onClick: onClickStart,
+    selectionPosition: "start",
+    value: selectedStartDate,
+    useInputIcons: useInputIcons,
+    isInputInvalid: isStartInvalid,
+    inputLabelText: startDateInputLabelText,
+    placeholderText: startDateInputPlaceholderText,
+    errorText: startDateInputErrorText,
+    inputComponentOverrides: datepickerRangeControlsOverrides === null || datepickerRangeControlsOverrides === void 0 ? void 0 : datepickerRangeControlsOverrides.startDateInputComponentOverrides
+  }), /*#__PURE__*/_react.default.createElement(_DatepickerRangeInput.default, {
+    isSelected: endIsSelected,
+    onClick: onClickEnd,
+    selectionPosition: "end",
+    value: selectedEndDate,
+    useInputIcons: useInputIcons,
+    isInputInvalid: isEndInvalid,
+    inputLabelText: endDateInputLabelText,
+    placeholderText: endDateInputPlaceholderText,
+    errorText: endDateInputErrorText,
+    inputComponentOverrides: datepickerRangeControlsOverrides === null || datepickerRangeControlsOverrides === void 0 ? void 0 : datepickerRangeControlsOverrides.endDateInputComponentOverrides
+  }));
+};
+
+var _default = DatepickerRangeControls;
+exports.default = _default;

package/dist/components/DatepickerRange/components/DatepickerRangeInput.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@chakra-ui/react");
+
+var _calendar = _interopRequireDefault(require("@spothero/icons/calendar"));
+
+var _propTypes = require("../utils/propTypes");
+
+var _generalCalculations = require("../utils/generalCalculations");
+
+var _WithPopoverAnchor = _interopRequireDefault(require("./WithPopoverAnchor"));
+
+var _DatepickerRangeContext = require("../DatepickerRangeContext");
+
+var formLabelStyleProps = {
+  as: 'label',
+  fontSize: 'sm',
+  fontWeight: 'semibold',
+  color: 'text.secondary.light',
+  marginBottom: 1
+};
+var formErrorMessageStyleProps = {
+  color: 'error',
+  fontSize: 'xs',
+  marginTop: 1
+};
+
+var DatepickerRangeInput = function DatepickerRangeInput(_ref) {
+  var isSelected = _ref.isSelected,
+      onClick = _ref.onClick,
+      selectionPosition = _ref.selectionPosition,
+      value = _ref.value,
+      useInputIcons = _ref.useInputIcons,
+      isInputInvalid = _ref.isInputInvalid,
+      inputLabelText = _ref.inputLabelText,
+      placeholderText = _ref.placeholderText,
+      errorText = _ref.errorText,
+      inputComponentOverrides = _ref.inputComponentOverrides;
+
+  var _useDatepickerRange = (0, _DatepickerRangeContext.useDatepickerRange)(),
+      _useDatepickerRange$d = _useDatepickerRange.disclosure,
+      onOpen = _useDatepickerRange$d.onOpen,
+      onClose = _useDatepickerRange$d.onClose;
+
+  var handleKeyboardControls = function handleKeyboardControls(evt) {
+    var keyCode = evt.code;
+
+    if (keyCode === 'Enter' || keyCode === 'Space') {
+      onOpen();
+    } else if (keyCode === 'Escape') {
+      onClose();
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react2.Box, inputComponentOverrides === null || inputComponentOverrides === void 0 ? void 0 : inputComponentOverrides.inputGroupContainer, /*#__PURE__*/_react.default.createElement(_react2.FormControl, (0, _extends2.default)({
+    "data-testid": "DatepickerRangeInput-".concat(selectionPosition),
+    isInvalid: isInputInvalid
+  }, inputComponentOverrides === null || inputComponentOverrides === void 0 ? void 0 : inputComponentOverrides.formControl), inputLabelText && /*#__PURE__*/_react.default.createElement(_react2.FormLabel, (0, _extends2.default)({}, formLabelStyleProps, inputComponentOverrides === null || inputComponentOverrides === void 0 ? void 0 : inputComponentOverrides.formLabel), inputLabelText), /*#__PURE__*/_react.default.createElement(_WithPopoverAnchor.default, {
+    isSelected: isSelected
+  }, /*#__PURE__*/_react.default.createElement(_react2.InputGroup, inputComponentOverrides === null || inputComponentOverrides === void 0 ? void 0 : inputComponentOverrides.inputGroup, /*#__PURE__*/_react.default.createElement(_react2.Input, (0, _extends2.default)({
+    name: "DatepickerRangeInput-".concat(selectionPosition),
+    placeholder: placeholderText,
+    value: (0, _generalCalculations.formatValueForInputDisplay)(value),
+    onClick: onClick,
+    onKeyDown: handleKeyboardControls,
+    isReadOnly: true
+  }, inputComponentOverrides === null || inputComponentOverrides === void 0 ? void 0 : inputComponentOverrides.input)), useInputIcons && /*#__PURE__*/_react.default.createElement(_react2.InputRightElement, (0, _extends2.default)({
+    color: isInputInvalid ? 'error' : 'gray.dark',
+    zIndex: "base"
+  }, inputComponentOverrides === null || inputComponentOverrides === void 0 ? void 0 : inputComponentOverrides.inputRightElement), /*#__PURE__*/_react.default.createElement(_react2.Icon, {
+    as: _calendar.default,
+    color: "inherit",
+    height: 5,
+    width: 5
+  })))), /*#__PURE__*/_react.default.createElement(_react2.FormErrorMessage, (0, _extends2.default)({}, formErrorMessageStyleProps, inputComponentOverrides === null || inputComponentOverrides === void 0 ? void 0 : inputComponentOverrides.formErrorMessage), errorText)));
+};
+
+var _default = DatepickerRangeInput;
+exports.default = _default;

package/dist/components/DatepickerRange/components/WithPopoverAnchor.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@chakra-ui/react");
+
+var WithPopoverAnchor = function WithPopoverAnchor(_ref) {
+  var isSelected = _ref.isSelected,
+      children = _ref.children;
+  return isSelected ? /*#__PURE__*/_react.default.createElement(_react2.PopoverAnchor, null, children) : children;
+};
+
+var _default = WithPopoverAnchor;
+exports.default = _default;