@cashub/ui 0.21.0 → 0.22.0

package/datetimePicker/DatePicker.js

@@ -1,297 +1,184 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("react");
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
 var _reactI18next = require("react-i18next");
-
 var _reactOutsideClickHandler = _interopRequireDefault(require("react-outside-click-handler"));
-
 var _hooks = require("@cashub/hooks");
-
 var _utils = require("@cashub/utils");
-
 var _Button = _interopRequireDefault(require("../button/Button"));
-
 var _Accordion = _interopRequireDefault(require("./subComponent/Accordion"));
-
 var _Input = _interopRequireDefault(require("../form/Input"));
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _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) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-var DatePicker = function DatePicker(_ref) {
-  var onConfirm = _ref.onConfirm,
-      selected = _ref.selected,
-      minDate = _ref.minDate,
-      maxDate = _ref.maxDate,
-      fixedYear = _ref.fixedYear,
-      disabled = _ref.disabled;
-
-  var _useTranslation = (0, _reactI18next.useTranslation)(),
-      t = _useTranslation.t;
-
-  var _useState = (0, _react.useState)(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      currentDisplayType = _useState2[0],
-      setCurrentDisplayType = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      displayPicker = _useState4[0],
-      setDisplayPicker = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(selected ? new Date(selected).getFullYear() : new Date().getFullYear()),
-      _useState6 = _slicedToArray(_useState5, 2),
-      selectedYear = _useState6[0],
-      setSelectedYear = _useState6[1];
-
-  var _useState7 = (0, _react.useState)(selected ? new Date(selected).getMonth() : new Date().getMonth()),
-      _useState8 = _slicedToArray(_useState7, 2),
-      selectedMonth = _useState8[0],
-      setSelectedMonth = _useState8[1];
-
-  var _useState9 = (0, _react.useState)(selected ? new Date(selected).getDate() : new Date().getDate()),
-      _useState10 = _slicedToArray(_useState9, 2),
-      selectedDay = _useState10[0],
-      setSelectedDay = _useState10[1];
-
-  var _useState11 = (0, _react.useState)(selected ? new Date(selected).getFullYear() : ''),
-      _useState12 = _slicedToArray(_useState11, 2),
-      confirmYear = _useState12[0],
-      setConfirmYear = _useState12[1];
-
-  var _useState13 = (0, _react.useState)(selected ? new Date(selected).getMonth() : ''),
-      _useState14 = _slicedToArray(_useState13, 2),
-      confirmMonth = _useState14[0],
-      setConfirmMonth = _useState14[1];
-
-  var _useState15 = (0, _react.useState)(selected ? new Date(selected).getDate() : ''),
-      _useState16 = _slicedToArray(_useState15, 2),
-      confirmDay = _useState16[0],
-      setConfirmDay = _useState16[1];
-
-  var _useState17 = (0, _react.useState)(selected ? selected : ''),
-      _useState18 = _slicedToArray(_useState17, 2),
-      inputValue = _useState18[0],
-      setInputValue = _useState18[1];
-
-  var _useState19 = (0, _react.useState)(null),
-      _useState20 = _slicedToArray(_useState19, 2),
-      toggleElement = _useState20[0],
-      setToggleElement = _useState20[1];
-
-  var _useState21 = (0, _react.useState)(null),
-      _useState22 = _slicedToArray(_useState21, 2),
-      contentElement = _useState22[0],
-      setContentElement = _useState22[1];
-
-  var _useCustomPopper = (0, _hooks.useCustomPopper)(toggleElement, contentElement, {
+const DatePicker = _ref => {
+  let {
+    onConfirm,
+    selected,
+    minDate,
+    maxDate,
+    fixedYear,
+    disabled
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
+  const [currentDisplayType, setCurrentDisplayType] = (0, _react.useState)(null);
+  const [displayPicker, setDisplayPicker] = (0, _react.useState)(false);
+  const [selectedYear, setSelectedYear] = (0, _react.useState)(selected ? new Date(selected).getFullYear() : new Date().getFullYear());
+  const [selectedMonth, setSelectedMonth] = (0, _react.useState)(selected ? new Date(selected).getMonth() : new Date().getMonth());
+  const [selectedDay, setSelectedDay] = (0, _react.useState)(selected ? new Date(selected).getDate() : new Date().getDate());
+  const [confirmYear, setConfirmYear] = (0, _react.useState)(selected ? new Date(selected).getFullYear() : '');
+  const [confirmMonth, setConfirmMonth] = (0, _react.useState)(selected ? new Date(selected).getMonth() : '');
+  const [confirmDay, setConfirmDay] = (0, _react.useState)(selected ? new Date(selected).getDate() : '');
+  const [inputValue, setInputValue] = (0, _react.useState)(selected ? selected : '');
+  const [toggleElement, setToggleElement] = (0, _react.useState)(null);
+  const [contentElement, setContentElement] = (0, _react.useState)(null);
+  const {
+    styles,
+    attributes,
+    state,
+    update
+  } = (0, _hooks.useCustomPopper)(toggleElement, contentElement, {
     strategy: 'absolute',
     placement: 'bottom-start'
-  }),
-      styles = _useCustomPopper.styles,
-      attributes = _useCustomPopper.attributes,
-      state = _useCustomPopper.state,
-      update = _useCustomPopper.update;
-
-  var weeks = (0, _react.useMemo)(function () {
-    return ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map(function (week) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Week, {
-        children: week
-      }, week);
-    });
+  });
+  const weeks = (0, _react.useMemo)(() => {
+    return ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map(week => /*#__PURE__*/(0, _jsxRuntime.jsx)(Week, {
+      children: week
+    }, week));
   }, []);
-
-  var _handleDisplayAccordionContent = (0, _react.useCallback)(function (type) {
+  const handleDisplayAccordionContent = (0, _react.useCallback)(type => {
     if (currentDisplayType === type) {
       setCurrentDisplayType(null);
     } else {
       setCurrentDisplayType(type);
     }
   }, [currentDisplayType]);
-
-  var handleChangeYear = function handleChangeYear(selected) {
+  const handleChangeYear = selected => {
     if (selected === 'previous') {
-      setSelectedYear(function (previousParams) {
+      setSelectedYear(previousParams => {
         if (previousParams <= 1) {
           return previousParams;
         }
-
         return previousParams - 1;
       });
     } else if (selected === 'next') {
-      setSelectedYear(function (previousParams) {
+      setSelectedYear(previousParams => {
         return previousParams + 1;
       });
     }
-
     setCurrentDisplayType(null);
   };
-
-  var handleChangeMonth = function handleChangeMonth(selected) {
+  const handleChangeMonth = selected => {
     if (selected === 'previous') {
-      setSelectedMonth(function (previousParams) {
+      setSelectedMonth(previousParams => {
         if (previousParams <= 0) {
           return 11;
         }
-
         return previousParams - 1;
       });
     } else if (selected === 'next') {
-      setSelectedMonth(function (previousParams) {
+      setSelectedMonth(previousParams => {
         if (previousParams >= 11) {
           return 0;
         }
-
         return previousParams + 1;
       });
     }
-
     setCurrentDisplayType(null);
   };
-
-  var handleDisabled = (0, _react.useCallback)(function (firstWeekOfMonth, daysOfMonthForSelectedDate, dayIndex, day) {
-    var selectedDate = (0, _utils.formatDate)(new Date(selectedYear, firstWeekOfMonth >= dayIndex + 1 ? selectedMonth - 1 : daysOfMonthForSelectedDate + firstWeekOfMonth < dayIndex + 1 ? selectedMonth + 1 : selectedMonth, day).getTime() + 86399 * 1000);
-
+  const handleDisabled = (0, _react.useCallback)((firstWeekOfMonth, daysOfMonthForSelectedDate, dayIndex, day) => {
+    const selectedDate = (0, _utils.formatDate)(new Date(selectedYear, firstWeekOfMonth >= dayIndex + 1 ? selectedMonth - 1 : daysOfMonthForSelectedDate + firstWeekOfMonth < dayIndex + 1 ? selectedMonth + 1 : selectedMonth, day).getTime() + 86399 * 1000);
     if (minDate && minDate > selectedDate || maxDate && maxDate < selectedDate) {
       return true;
     }
-
     if (fixedYear) {
-      var disabledDateInDec = selectedMonth === 11 && dayIndex >= daysOfMonthForSelectedDate + firstWeekOfMonth;
-      var disabledDateInJan = selectedMonth === 0 && dayIndex < firstWeekOfMonth;
+      const disabledDateInDec = selectedMonth === 11 && dayIndex >= daysOfMonthForSelectedDate + firstWeekOfMonth;
+      const disabledDateInJan = selectedMonth === 0 && dayIndex < firstWeekOfMonth;
       return !!(disabledDateInDec || disabledDateInJan);
     }
-
     return false;
   }, [fixedYear, minDate, maxDate, selectedMonth, selectedYear]);
-  var handleChangeDate = (0, _react.useCallback)(function (daysOfMonthForSelectedDate, firstWeekOfMonth, dayIndex, day) {
+  const handleChangeDate = (0, _react.useCallback)((daysOfMonthForSelectedDate, firstWeekOfMonth, dayIndex, day) => {
     if (!fixedYear) {
-      setSelectedYear(function () {
+      setSelectedYear(() => {
         if (selectedMonth === 0 && dayIndex < firstWeekOfMonth && selectedYear > 1) {
           return selectedYear - 1;
         } else if (selectedMonth === 11 && dayIndex >= daysOfMonthForSelectedDate + firstWeekOfMonth) {
           return selectedYear + 1;
         }
-
         return selectedYear;
       });
-      setConfirmYear(function () {
+      setConfirmYear(() => {
         if (selectedMonth === 0 && dayIndex < firstWeekOfMonth && selectedYear > 1) {
           return selectedYear - 1;
         } else if (selectedMonth === 11 && dayIndex >= daysOfMonthForSelectedDate + firstWeekOfMonth) {
           return selectedYear + 1;
         }
-
         return selectedYear;
       });
     }
-
-    setSelectedMonth(function () {
+    setSelectedMonth(() => {
       if (firstWeekOfMonth > dayIndex) {
         return selectedMonth !== 0 ? selectedMonth - 1 : 11;
       } else if (daysOfMonthForSelectedDate + firstWeekOfMonth <= dayIndex) {
         return selectedMonth !== 11 ? selectedMonth + 1 : 0;
       }
-
       return selectedMonth;
     });
-    setConfirmMonth(function () {
+    setConfirmMonth(() => {
       if (firstWeekOfMonth > dayIndex) {
         return selectedMonth !== 0 ? selectedMonth - 1 : 11;
       } else if (daysOfMonthForSelectedDate + firstWeekOfMonth <= dayIndex) {
         return selectedMonth !== 11 ? selectedMonth + 1 : 0;
       }
-
       return selectedMonth;
     });
     setConfirmDay(day);
   }, [fixedYear, selectedMonth, selectedYear]);
-  var handleSelectedDay = (0, _react.useCallback)(function (day, daysOfMonthForSelectedDate, index, firstWeekOfMonth, lastWeekOfMonth) {
+  const handleSelectedDay = (0, _react.useCallback)((day, daysOfMonthForSelectedDate, index, firstWeekOfMonth, lastWeekOfMonth) => {
     if (confirmDay === day && confirmYear === selectedYear && confirmMonth === selectedMonth) {
       if (firstWeekOfMonth === 6 && lastWeekOfMonth === 6) {
         return true;
       } else if (firstWeekOfMonth !== 6 && lastWeekOfMonth === 6) {
         return index + 1 > firstWeekOfMonth;
       }
-
       return !!(index + 1 >= firstWeekOfMonth && index + 1 <= daysOfMonthForSelectedDate + firstWeekOfMonth);
     }
-
     return false;
   }, [confirmYear, confirmMonth, confirmDay, selectedYear, selectedMonth]);
-  var handleDisplayDays = (0, _react.useMemo)(function () {
-    var daysOfMonthForSelectedDate = new Date(selectedYear, selectedMonth + 1, 0).getDate();
-    var daysOfPrevioueMonthForSelectedDate = new Date(selectedYear, selectedMonth + 1 - 1, 0).getDate();
-    var firstWeekOfMonth = new Date("".concat(selectedYear, "/").concat(selectedMonth + 1, "/1")).getDay();
-    var lastWeekOfMonth = new Date("".concat(selectedYear, "/").concat(selectedMonth + 1, "/").concat(daysOfMonthForSelectedDate)).getDay();
-    var days = [];
-
-    for (var _i2 = 0, _arr2 = _toConsumableArray(Array(daysOfMonthForSelectedDate).keys()); _i2 < _arr2.length; _i2++) {
-      var day = _arr2[_i2];
+  const handleDisplayDays = (0, _react.useMemo)(() => {
+    const daysOfMonthForSelectedDate = new Date(selectedYear, selectedMonth + 1, 0).getDate();
+    const daysOfPrevioueMonthForSelectedDate = new Date(selectedYear, selectedMonth + 1 - 1, 0).getDate();
+    const firstWeekOfMonth = new Date("".concat(selectedYear, "/").concat(selectedMonth + 1, "/1")).getDay();
+    const lastWeekOfMonth = new Date("".concat(selectedYear, "/").concat(selectedMonth + 1, "/").concat(daysOfMonthForSelectedDate)).getDay();
+    const days = [];
+    for (const day of [...Array(daysOfMonthForSelectedDate).keys()]) {
       days.push(day + 1);
     }
-
     if (firstWeekOfMonth !== 0) {
-      for (var index = daysOfPrevioueMonthForSelectedDate; index > daysOfPrevioueMonthForSelectedDate - firstWeekOfMonth; index -= 1) {
+      for (let index = daysOfPrevioueMonthForSelectedDate; index > daysOfPrevioueMonthForSelectedDate - firstWeekOfMonth; index -= 1) {
         days.unshift(index);
       }
     }
-
     if (lastWeekOfMonth !== 6) {
-      for (var _index = 1; _index <= 6 - lastWeekOfMonth; _index += 1) {
-        days.push(_index);
+      for (let index = 1; index <= 6 - lastWeekOfMonth; index += 1) {
+        days.push(index);
       }
     }
-
-    return days.map(function (day, index) {
+    return days.map((day, index) => {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(Day, {
         disabled: handleDisabled(firstWeekOfMonth, daysOfMonthForSelectedDate, index, day),
-        onClick: function onClick() {
+        onClick: () => {
           handleChangeDate(daysOfMonthForSelectedDate, firstWeekOfMonth, index, day);
         },
         selected: handleSelectedDay(day, daysOfMonthForSelectedDate, index, firstWeekOfMonth, lastWeekOfMonth),
@@ -299,21 +186,18 @@ var DatePicker = function DatePicker(_ref) {
       }, index);
     });
   }, [selectedMonth, selectedYear, handleDisabled, handleChangeDate, handleSelectedDay]);
-
-  var handleToggle = function handleToggle() {
+  const handleToggle = () => {
     setDisplayPicker(!displayPicker);
     update();
   };
-
-  var handleConfirm = function handleConfirm() {
+  const handleConfirm = () => {
     onConfirm(inputValue);
     setDisplayPicker(false);
     setCurrentDisplayType(null);
   };
-
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (!selected) return;
-    var date = new Date(selected);
+    const date = new Date(selected);
     setSelectedYear(date.getFullYear());
     setSelectedMonth(date.getMonth());
     setSelectedDay(date.getDate());
@@ -322,7 +206,7 @@ var DatePicker = function DatePicker(_ref) {
     setConfirmDay(date.getDate());
     setInputValue(selected);
   }, [selected]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (!(confirmYear && confirmMonth && confirmDay)) return;
     setInputValue((0, _utils.formatDate)(new Date(confirmYear, confirmMonth, confirmDay), 'date'));
   }, [confirmYear, confirmMonth, confirmDay]);
@@ -334,7 +218,8 @@ var DatePicker = function DatePicker(_ref) {
       onClick: handleToggle,
       readOnly: true,
       disabled: disabled
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, _objectSpread(_objectSpread({}, attributes.popper), {}, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+      ...attributes.popper,
       style: styles.popper,
       placement: state && state.placement,
       ref: setContentElement,
@@ -343,8 +228,8 @@ var DatePicker = function DatePicker(_ref) {
         displayType: currentDisplayType,
         children: [!fixedYear && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion.default, {
           type: "year",
-          handleDisplayAccordionContent: function handleDisplayAccordionContent() {
-            _handleDisplayAccordionContent('year');
+          handleDisplayAccordionContent: () => {
+            handleDisplayAccordionContent('year');
           },
           handleChangeTitle: handleChangeYear,
           setCurrentDisplayType: setCurrentDisplayType,
@@ -357,8 +242,8 @@ var DatePicker = function DatePicker(_ref) {
           fixedYear: fixedYear
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion.default, {
           type: "month",
-          handleDisplayAccordionContent: function handleDisplayAccordionContent() {
-            _handleDisplayAccordionContent('month');
+          handleDisplayAccordionContent: () => {
+            handleDisplayAccordionContent('month');
           },
           handleChangeTitle: handleChangeMonth,
           setCurrentDisplayType: setCurrentDisplayType,
@@ -381,39 +266,40 @@ var DatePicker = function DatePicker(_ref) {
           children: t('Confirm')
         })
       })]
-    }))]
+    })]
   });
 };
-
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-bottom: var(--spacing-s);\n  background: var(--color-background1);\n  border-radius: var(--border-radius);\n  border: var(--border-width) solid var(--border-color);\n  box-shadow: var(--box-shadow);\n  overflow: hidden;\n  width: 286px;\n  z-index: 1;\n  color: var(--font-on-background);\n\n  display: ", ";\n"])), function (_ref2) {
-  var displayPicker = _ref2.displayPicker;
+const Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-bottom: var(--spacing-s);\n  background: var(--color-background1);\n  border-radius: var(--border-radius);\n  border: var(--border-width) solid var(--border-color);\n  box-shadow: var(--box-shadow);\n  overflow: hidden;\n  width: 286px;\n  z-index: 1;\n  color: var(--font-on-background);\n\n  display: ", ";\n"])), _ref2 => {
+  let {
+    displayPicker
+  } = _ref2;
   return displayPicker ? 'block' : 'none';
 });
-
-var Week = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  min-width: 36px;\n  height: 36px;\n  border-radius: var(--border-radius-s);\n  line-height: 36px;\n  text-align: center;\n"])));
-
-var Day = _styledComponents.default.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  min-width: 36px;\n  height: 36px;\n  border-radius: var(--border-radius-s);\n  line-height: 36px;\n  text-align: center;\n  padding: 0;\n  border: 0;\n  background: var(--color-background1);\n  color: var(--font-on-background);\n  &:hover {\n    background: var(--color-primary);\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref3) {
-  var selected = _ref3.selected;
+const Week = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  min-width: 36px;\n  height: 36px;\n  border-radius: var(--border-radius-s);\n  line-height: 36px;\n  text-align: center;\n"])));
+const Day = _styledComponents.default.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  min-width: 36px;\n  height: 36px;\n  border-radius: var(--border-radius-s);\n  line-height: 36px;\n  text-align: center;\n  padding: 0;\n  border: 0;\n  background: var(--color-background1);\n  color: var(--font-on-background);\n  &:hover {\n    background: var(--color-primary);\n  }\n\n  ", "\n\n  ", "\n"])), _ref3 => {
+  let {
+    selected
+  } = _ref3;
   return selected && 'background: var(--color-hover);';
-}, function (_ref4) {
-  var disabled = _ref4.disabled;
+}, _ref4 => {
+  let {
+    disabled
+  } = _ref4;
   return disabled && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      color: var(--font-on-mute);\n      background: none;\n      &:hover {\n        background: none;\n      }\n    "])));
 });
-
-var DateContent = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n"])));
-
-var PickerInput = (0, _styledComponents.default)(_Input.default)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n"])));
-var ConfirmButton = (0, _styledComponents.default)(_Button.default)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin: 16px auto 0;\n"])));
-
-var Body = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", "\n\n  overflow: hidden;\n  padding: ", ";\n"])), function (_ref5) {
-  var displayType = _ref5.displayType;
+const DateContent = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n"])));
+const PickerInput = (0, _styledComponents.default)(_Input.default)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n"])));
+const ConfirmButton = (0, _styledComponents.default)(_Button.default)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin: 16px auto 0;\n"])));
+const Body = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", "\n\n  overflow: hidden;\n  padding: ", ";\n"])), _ref5 => {
+  let {
+    displayType
+  } = _ref5;
   return displayType && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      height: 216px;\n    "])));
-}, function (_ref6) {
-  var displayType = _ref6.displayType;
+}, _ref6 => {
+  let {
+    displayType
+  } = _ref6;
   return displayType === 'year' ? ' 0 4px var(--spacing-s) var(--spacing-s)' : '0 var(--spacing-s) 0 var(--spacing-s)';
 });
-
-var Footer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  padding: 0 var(--spacing-s);\n"])));
-
-var _default = DatePicker;
-exports.default = _default;
+const Footer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  padding: 0 var(--spacing-s);\n"])));
+var _default = exports.default = DatePicker;