@gympass/yoga 7.49.0 → 7.50.0

package/cjs/Datepicker/web/Datepicker.test.js

@@ -0,0 +1,229 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _moment = _interopRequireDefault(require("moment"));
+
+var _ = require("../..");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('<Datepicker />', function () {
+  var testDate = new Date(2022, 7, 3);
+  describe('Snapshots', function () {
+    it('should match with single Datepicker', function () {
+      var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "single"
+      }))),
+          container = _render.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with range Datepicker', function () {
+      var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "range"
+      }))),
+          container = _render2.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with default selected date single Datepicker', function () {
+      var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "single",
+        startDate: testDate
+      }))),
+          container = _render3.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with default selected dates range Datepicker', function () {
+      var endDate = new Date();
+      endDate.setDate(testDate.getDate() + 15);
+
+      var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "range",
+        startDate: testDate,
+        endDate: endDate
+      }))),
+          container = _render4.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with custom placeholder single Datepicker', function () {
+      var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "single",
+        placeholder: "This is a custom placeholder :)"
+      }))),
+          container = _render5.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with disabled past dates Datepicker', function () {
+      var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "single",
+        disablePastDates: true
+      }))),
+          container = _render6.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with disabled future dates Datepicker', function () {
+      var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "single",
+        disableFutureDates: true
+      }))),
+          container = _render7.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with disabled Datepicker', function () {
+      var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "single",
+        disabled: true
+      }))),
+          container = _render8.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with error Datepicker', function () {
+      var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "single",
+        error: "This is an error"
+      }))),
+          container = _render9.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+  describe('Unit', function () {
+    var dateFormat = 'MMM D, YYYY';
+    it('should call onSelectSingle function on single Datepicker', function () {
+      var onSelectSingle = jest.fn();
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "single",
+        onSelectSingle: onSelectSingle
+      })));
+      expect(onSelectSingle).toHaveBeenCalledTimes(1);
+
+      _react2.fireEvent.click(_react2.screen.getByRole('button'));
+
+      var day10 = _react2.screen.queryAllByText('10')[0];
+
+      _react2.fireEvent.click(day10);
+
+      expect(onSelectSingle).toHaveBeenCalledTimes(2);
+    });
+    it('should call onSelectRange function on range Datepicker', function () {
+      var onSelectRange = jest.fn();
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "range",
+        onSelectRange: onSelectRange
+      })));
+      expect(onSelectRange).toHaveBeenCalledTimes(1);
+
+      _react2.fireEvent.click(_react2.screen.getByRole('button'));
+
+      var day10 = _react2.screen.queryAllByText('10')[0];
+
+      var day20 = _react2.screen.queryAllByText('20')[0];
+
+      _react2.fireEvent.click(day10);
+
+      expect(onSelectRange).toHaveBeenCalledTimes(2);
+
+      _react2.fireEvent.click(day20);
+
+      expect(onSelectRange).toHaveBeenCalledTimes(3);
+    });
+    it('should display default date on single Datepicker', function () {
+      var currentDate = new Date();
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "single",
+        startDate: currentDate
+      })));
+      var formattedDate = (0, _moment["default"])(currentDate).format(dateFormat);
+      expect(_react2.screen.getByText(formattedDate)).toBeVisible();
+    });
+    it('should display default date range on range Datepicker', function () {
+      var currentDate = new Date();
+      var end = new Date();
+      end.setDate(currentDate.getDate() + 15);
+      var formattedStartDate = (0, _moment["default"])(currentDate).format(dateFormat);
+      var formattedEndDate = (0, _moment["default"])(end).format(dateFormat);
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "range",
+        startDate: currentDate,
+        endDate: end
+      })));
+      expect(_react2.screen.getByText(formattedStartDate + " - " + formattedEndDate)).toBeVisible();
+    });
+    it('should display custom placeholder and "Select Date" if none is provided', function () {
+      var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "single",
+        placeholder: "This is a custom placeholder :)"
+      }))),
+          rerender = _render10.rerender;
+
+      expect(_react2.screen.getByText('This is a custom placeholder :)')).toBeVisible();
+      rerender( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "single"
+      })));
+      expect(_react2.screen.getByText('Select Date')).toBeVisible();
+    });
+    it('should disable past dates', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "single",
+        disablePastDates: true
+      })));
+
+      _react2.fireEvent.click(_react2.screen.getByRole('button'));
+
+      var previousMonthArrow = _react2.screen.getByTestId('previous-month-arrow');
+
+      _react2.fireEvent.click(previousMonthArrow);
+
+      [].concat(Array(25)).forEach(function (_e, i) {
+        return expect(_react2.screen.getAllByText("" + (i + 1))[0].closest('div')).toHaveAttribute('disabled');
+      });
+    });
+    it('should disable future dates', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "single",
+        startDate: testDate,
+        disableFutureDates: true
+      })));
+
+      _react2.fireEvent.click(_react2.screen.getByRole('button'));
+
+      var nextMonthArrow = _react2.screen.getByTestId('next-month-arrow');
+
+      _react2.fireEvent.click(nextMonthArrow);
+
+      [].concat(Array(25)).forEach(function (_e, i) {
+        return expect(_react2.screen.getAllByText("" + (i + 1))[0].closest('div')).toHaveAttribute('disabled');
+      });
+    });
+    it('should be disabled', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "single",
+        startDate: testDate,
+        disabled: true
+      })));
+      var formattedDate = (0, _moment["default"])(testDate).format(dateFormat);
+
+      var datepickerInput = _react2.screen.getByText(formattedDate);
+
+      expect(datepickerInput).toHaveAttribute('disabled');
+      expect(datepickerInput.closest('div')).toHaveAttribute('disabled');
+    });
+    it('should display an error', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "single",
+        error: "This is an error"
+      })));
+      expect(_react2.screen.getByText('This is an error')).toBeVisible();
+    });
+  });
+});

package/cjs/Datepicker/web/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _Datepicker = _interopRequireDefault(require("./Datepicker"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = _Datepicker["default"];
+exports["default"] = _default;

package/cjs/Theme/theme/theme.js

@@ -25,6 +25,8 @@ var _CheckboxTheme = _interopRequireDefault(require("./../../Checkbox/Checkbox.t
 
 var _CheckboxSwitchTheme = _interopRequireDefault(require("./../../Checkbox/CheckboxSwitch.theme.js"));
 
+var _DatepickerTheme = _interopRequireDefault(require("./../../Datepicker/Datepicker.theme.js"));
+
 var _DialogTheme = _interopRequireDefault(require("./../../Dialog/Dialog.theme.js"));
 
 var _DividerTheme = _interopRequireDefault(require("./../../Divider/Divider.theme.js"));
@@ -86,6 +88,7 @@ var componentThemes = {
   Card$CardWeb: _CardWebTheme["default"],
   Checkbox$Checkbox: _CheckboxTheme["default"],
   Checkbox$CheckboxSwitch: _CheckboxSwitchTheme["default"],
+  Datepicker$Datepicker: _DatepickerTheme["default"],
   Dialog$Dialog: _DialogTheme["default"],
   Divider$Divider: _DividerTheme["default"],
   Drawer$Drawer: _DrawerTheme["default"],

package/cjs/index.js

@@ -131,6 +131,10 @@ var _Feedback = _interopRequireDefault(require("./Feedback"));
 
 exports.Feedback = _Feedback["default"];
 
+var _Datepicker = _interopRequireDefault(require("./Datepicker"));
+
+exports.Datepicker = _Datepicker["default"];
+
 var _Drawer = _interopRequireDefault(require("./Drawer"));
 
 exports.Drawer = _Drawer["default"];

package/esm/Datepicker/Datepicker.theme.js

@@ -0,0 +1,12 @@
+var Datepicker = function Datepicker() {
+  return {
+    width: {
+      day: 32
+    },
+    height: {
+      day: 20
+    }
+  };
+};
+
+export default Datepicker;

package/esm/Datepicker/index.js

@@ -0,0 +1,2 @@
+import Datepicker from './web';
+export default Datepicker;

package/esm/Datepicker/web/Calendar.js

@@ -0,0 +1,334 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { Icon, Text, Box } from '@gympass/yoga';
+import { ChevronLeft, ChevronRight } from '@gympass/yoga-icons';
+import { oneOf, func, instanceOf, bool } from 'prop-types';
+import _ from 'lodash';
+var CalendarWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+  var spacing = _ref.theme.yoga.spacing;
+  return "\n    padding: " + spacing.xsmall + "px " + spacing.xsmall + "px " + spacing.small + "px " + spacing.xsmall + "px;\n  ";
+});
+var DaysWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
+  var spacing = _ref2.theme.yoga.spacing;
+  return "\n    display: flex;\n    justify-content: space-between;\n    margin: " + spacing.xxsmall + "px " + spacing.zero + "px " + spacing.xsmall + "px " + spacing.zero + "px;\n  ";
+});
+var Day = styled(Text.SectionTitle)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref3) {
+  var colors = _ref3.theme.yoga.colors;
+  return "\n    width: 40px;\n    color: " + colors.medium + ";\n    text-align: center;\n  ";
+});
+
+var getDayFieldColor = function getDayFieldColor(selected, disabled, colors, aux) {
+  if (selected && !disabled) {
+    return colors.white;
+  }
+
+  if (disabled) {
+    return colors.text.disabled;
+  }
+
+  var currentDate = new Date();
+  var val = aux.val,
+      year = aux.year,
+      month = aux.month;
+
+  if ( // if current date
+  new Date(Date.UTC(year, month, val)).getTime() === new Date(Date.UTC(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate())).getTime()) {
+    return colors.primary;
+  }
+
+  return colors.stamina;
+};
+
+var toUTCDate = function toUTCDate(date) {
+  return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate())).getTime();
+};
+
+var getDayFieldRadius = function getDayFieldRadius(aux, radii) {
+  var _Date;
+
+  var val = aux.val,
+      startDate = aux.startDate,
+      endDate = aux.endDate,
+      year = aux.year,
+      month = aux.month;
+  var currentDate = (_Date = new Date(Date.UTC(year, month, val))) == null ? void 0 : _Date.getTime();
+
+  if (currentDate === toUTCDate(startDate) && endDate) {
+    return radii.circle + "px " + radii.sharp + "px " + radii.sharp + "px " + radii.circle + "px";
+  }
+
+  if (currentDate === toUTCDate(endDate) && startDate) {
+    return radii.sharp + "px " + radii.circle + "px " + radii.circle + "px " + radii.sharp + "px";
+  }
+
+  return radii.sharp + "px";
+};
+
+var DayField = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref4) {
+  var selected = _ref4.selected,
+      inRange = _ref4.inRange,
+      disabled = _ref4.disabled,
+      aux = _ref4.aux,
+      _ref4$theme$yoga = _ref4.theme.yoga,
+      colors = _ref4$theme$yoga.colors,
+      radii = _ref4$theme$yoga.radii,
+      spacing = _ref4$theme$yoga.spacing,
+      datepicker = _ref4$theme$yoga.components.datepicker;
+  return "\n    p {\n        color: " + getDayFieldColor(selected, disabled, colors, aux) + ";\n        z-index: 1;\n    }\n    width: " + datepicker.width.day + "px;\n    height: " + datepicker.width.day + "px;\n    padding: " + spacing.zero + "px 21.3px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: " + (inRange ? colors.clear : colors.white) + ";\n    position: relative;\n    cursor: pointer;\n    " + (selected && inRange ? "border-radius: " + getDayFieldRadius(aux, radii) : "") + "\n    " + (selected && !disabled ? "&:before {\n            content: '';\n            position: absolute;\n            background: " + colors.vibin + ";\n            width: " + datepicker.width.day + "px;\n            height: " + datepicker.width.day + "px;\n            border-radius: " + radii.circle + "px;\n        }" : "") + "\n    " + (!disabled ? "&:hover {\n            &:before {\n              content: '';\n              position: absolute;\n              border: 1px solid " + colors.secondary + ";\n              width: " + datepicker.width.day + "px;\n              height: " + datepicker.width.day + "px;\n              border-radius: " + radii.circle + "px;\n            }\n          }" : "") + "\n";
+});
+var Row = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref5) {
+  var _ref5$theme$yoga = _ref5.theme.yoga,
+      radii = _ref5$theme$yoga.radii,
+      spacing = _ref5$theme$yoga.spacing;
+  return "\n    display: flex;\n    div:first-child {\n        border-radius: " + radii.regular + "px 0 0 " + radii.regular + "px;\n    }\n    div:last-child {\n        border-radius: 0 " + radii.regular + "px " + radii.regular + "px 0;\n    }\n    padding: " + spacing.xxxsmall + "px 0px;\n";
+});
+
+function Calendar(_ref6) {
+  var type = _ref6.type,
+      startDate = _ref6.startDate,
+      endDate = _ref6.endDate,
+      onSelectSingle = _ref6.onSelectSingle,
+      onSelectRange = _ref6.onSelectRange,
+      disablePastDates = _ref6.disablePastDates,
+      disableFutureDates = _ref6.disableFutureDates;
+
+  var _useState = useState(new Date().getUTCMonth()),
+      month = _useState[0],
+      setMonth = _useState[1];
+
+  var _useState2 = useState(new Date().getUTCFullYear()),
+      year = _useState2[0],
+      setYear = _useState2[1];
+
+  useEffect(function () {
+    if (startDate) {
+      setMonth(startDate.getUTCMonth());
+      setYear(startDate.getUTCFullYear());
+    }
+  }, [startDate]);
+
+  var getDayOfWeek = function getDayOfWeek(day) {
+    return new Date(Date.UTC(year, month, day)).getUTCDay();
+  };
+
+  var getDaysInMonth = function getDaysInMonth() {
+    return new Date(Date.UTC(year, month + 1, 0)).getUTCDate();
+  };
+
+  var getDaysInMonthBefore = function getDaysInMonthBefore() {
+    return new Date(Date.UTC(year, month, 0)).getUTCDate();
+  };
+
+  var toUTCDateDay = function toUTCDateDay(day) {
+    return new Date(Date.UTC(year, month, day)).getTime();
+  };
+
+  var isEqual = function isEqual(day) {
+    return startDate && toUTCDate(startDate) === toUTCDateDay(day) || endDate && toUTCDate(endDate) === toUTCDateDay(day);
+  };
+
+  var inRange = function inRange(day) {
+    return startDate && toUTCDate(startDate) <= toUTCDateDay(day) && endDate && toUTCDate(endDate) >= toUTCDateDay(day);
+  };
+
+  var isDisabled = function isDisabled(day) {
+    var local = new Date(Date.UTC(year, month, day));
+    var now = new Date();
+    var nowUTC = Date.UTC(now.getFullYear(), now.getMonth(), now.getDate());
+    var pastDatesDisabled = disablePastDates && local.getTime() < nowUTC;
+    var futureDateDisabled = disableFutureDates && local.getTime() > nowUTC;
+    return pastDatesDisabled || futureDateDisabled;
+  };
+
+  var _onClick = function onClick(day) {
+    var selectedDate = new Date(Date.UTC(year, month, day));
+    if (isDisabled(day) || startDate && selectedDate.getTime() === toUTCDate(startDate)) return;
+
+    if (type === 'single') {
+      onSelectSingle(selectedDate);
+    } else if (type === 'range') {
+      onSelectRange(selectedDate);
+    }
+  };
+
+  var getFirstWeek = function getFirstWeek() {
+    var day = getDayOfWeek(1);
+
+    var week = _.range(1, 7 - day + 1);
+
+    var lastDayBefore = getDaysInMonthBefore();
+    var daysBefore = [];
+
+    for (var i = lastDayBefore - (day - 1); i <= lastDayBefore; i += 1) {
+      daysBefore.push(i);
+    }
+
+    week = _.concat(daysBefore, week);
+    return week.map(function (val) {
+      return /*#__PURE__*/React.createElement(DayField, {
+        key: val,
+        disabled: val > 7 || isDisabled(val),
+        selected: isEqual(val),
+        onClick: function onClick() {
+          return val <= 7 && _onClick(val);
+        },
+        inRange: type === 'range' && val <= 7 && inRange(val),
+        aux: {
+          val: val,
+          startDate: startDate,
+          endDate: endDate,
+          year: year,
+          month: month
+        }
+      }, /*#__PURE__*/React.createElement(Text.Small, null, val));
+    });
+  };
+
+  var getMiddleWeeks = function getMiddleWeeks() {
+    var day = getDayOfWeek(1);
+    var firstDay = 7 - day + 1;
+    var weeks = [];
+
+    while (firstDay + 7 <= getDaysInMonth()) {
+      weeks.push(_.range(firstDay, firstDay + 7));
+      firstDay += 7;
+    }
+
+    return weeks.map(function (week, i) {
+      var days = week.map(function (val) {
+        return /*#__PURE__*/React.createElement(DayField, {
+          selected: isEqual(val),
+          onClick: function onClick() {
+            return _onClick(val);
+          },
+          inRange: type === 'range' && inRange(val),
+          key: val,
+          disabled: isDisabled(val),
+          aux: {
+            val: val,
+            startDate: startDate,
+            endDate: endDate,
+            year: year,
+            month: month
+          }
+        }, /*#__PURE__*/React.createElement(Text.Small, null, val));
+      });
+      /* eslint-disable-next-line react/no-array-index-key */
+
+      return /*#__PURE__*/React.createElement(Row, {
+        key: i
+      }, days);
+    });
+  };
+
+  var getLastWeek = function getLastWeek() {
+    var lastDay = getDaysInMonth();
+    var day = getDayOfWeek(lastDay);
+
+    var week = _.range(lastDay - day, lastDay + 1);
+
+    week = _.concat(week, _.range(1, 7 - day));
+    return week.map(function (val) {
+      return /*#__PURE__*/React.createElement(DayField, {
+        key: val,
+        disabled: val < 7 || isDisabled(val),
+        selected: isEqual(val),
+        onClick: function onClick() {
+          return val > 7 && _onClick(val);
+        },
+        inRange: type === 'range' && val > 7 && inRange(val),
+        aux: {
+          val: val,
+          startDate: startDate,
+          endDate: endDate,
+          year: year,
+          month: month
+        }
+      }, /*#__PURE__*/React.createElement(Text.Small, null, val));
+    });
+  };
+
+  var getDays = function getDays() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Row, null, getFirstWeek()), getMiddleWeeks(), /*#__PURE__*/React.createElement(Row, null, getLastWeek()));
+  };
+
+  var prior = function prior() {
+    var local = month - 1;
+
+    if (local < 0) {
+      local = 11;
+      setYear(year - 1);
+    }
+
+    setMonth(local);
+  };
+
+  var next = function next() {
+    var local = month + 1;
+
+    if (local > 11) {
+      local = 0;
+      setYear(year + 1);
+    }
+
+    setMonth(local);
+  };
+
+  return /*#__PURE__*/React.createElement(CalendarWrapper, null, /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    justifyContent: "space-between",
+    m: "xxsmall",
+    mb: "zero",
+    pb: "small"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    style: {
+      cursor: 'pointer'
+    },
+    as: ChevronLeft,
+    width: "large",
+    height: "large",
+    onClick: prior,
+    fill: "primary",
+    "data-testid": "previous-month-arrow"
+  }), /*#__PURE__*/React.createElement(Text, {
+    style: {
+      alignSelf: 'center'
+    }
+  }, new Intl.DateTimeFormat('en-US', {
+    month: 'long',
+    year: 'numeric'
+  }).format(new Date(year, month, 1, 0, 0, 0))), /*#__PURE__*/React.createElement(Icon, {
+    style: {
+      cursor: 'pointer'
+    },
+    as: ChevronRight,
+    width: "large",
+    height: "large",
+    onClick: next,
+    fill: "primary",
+    "data-testid": "next-month-arrow"
+  })), /*#__PURE__*/React.createElement(DaysWrapper, null, /*#__PURE__*/React.createElement(Day, null, "S"), /*#__PURE__*/React.createElement(Day, null, "M"), /*#__PURE__*/React.createElement(Day, null, "T"), /*#__PURE__*/React.createElement(Day, null, "W"), /*#__PURE__*/React.createElement(Day, null, "T"), /*#__PURE__*/React.createElement(Day, null, "F"), /*#__PURE__*/React.createElement(Day, null, "S")), /*#__PURE__*/React.createElement(Box, null, getDays()));
+}
+
+Calendar.propTypes = {
+  type: oneOf(['single', 'range']).isRequired,
+  startDate: instanceOf(Date),
+  endDate: instanceOf(Date),
+  onSelectSingle: func,
+  onSelectRange: func,
+  disablePastDates: bool,
+  disableFutureDates: bool
+};
+Calendar.defaultProps = {
+  startDate: undefined,
+  endDate: undefined,
+  onSelectSingle: null,
+  onSelectRange: null,
+  disablePastDates: false,
+  disableFutureDates: false
+};
+export default Calendar;