@semcore/date-picker 16.2.4 → 17.0.0-prerelease.18

package/lib/es6/components/Calendar.js

@@ -1,147 +1,125 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _callSuper from "@babel/runtime/helpers/callSuper";
-import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import { sstyled as _sstyled } from "@semcore/core";
 import { assignProps as _assignProps5 } from "@semcore/core";
 import { assignProps as _assignProps4 } from "@semcore/core";
 import { assignProps as _assignProps3 } from "@semcore/core";
 import { assignProps as _assignProps2 } from "@semcore/core";
 import { assignProps as _assignProps } from "@semcore/core";
-var _excluded = ["date"];
+import { Box, ScreenReaderOnly } from '@semcore/base-components';
 import { createComponent, Component, Root, sstyled } from '@semcore/core';
-import keyboardFocusEnhance from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';
 import fire from '@semcore/core/lib/utils/fire';
-import { Box, ScreenReaderOnly } from '@semcore/flex-box';
 import dayjs from 'dayjs';
 import React from 'react';
 /*!__reshadow-styles__:"../style/calendar.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SCalendar_1fgj7_gg_{display:flex;flex-direction:column;border-radius:var(--intergalactic-surface-rounded, 6px)}.___SCalendar_1fgj7_gg_ .___SCalendarUnit_1fgj7_gg_:focus-visible{outline:0}.___SGridDays_1fgj7_gg_{display:grid;grid-template-columns:repeat(7,minmax(32px,auto));grid-template-rows:repeat(auto-fit,minmax(32px,auto))}.___SGridMonths_1fgj7_gg_{display:grid;grid-row-gap:var(--intergalactic-spacing-2x, 8px);grid-template-columns:repeat(3,minmax(60px,auto));grid-template-rows:repeat(4,minmax(32px,auto))}.___SWeekDays_1fgj7_gg_{display:grid;grid-template-columns:repeat(7,minmax(32px,auto))}.___SCalendarUnit_1fgj7_gg_,.___SWeekDay_1fgj7_gg_{align-items:center;display:flex;font-size:var(--intergalactic-fs-200, 14px);justify-content:center;min-height:32px;min-width:32px}.___SWeekDay_1fgj7_gg_{color:var(--intergalactic-text-secondary, #6c6e79);font-weight:var(--intergalactic-regular, 400);overflow:hidden}.___SCalendarUnit_1fgj7_gg_{font-family:inherit;font-weight:400;line-height:normal;-webkit-text-decoration:none;text-decoration:none;text-align:center;vertical-align:middle;border:1px solid transparent;color:var(--intergalactic-text-primary, #191b23);box-shadow:none;overflow:visible;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background-color:var(--intergalactic-date-picker-cell, #ffffff);border-radius:var(--intergalactic-control-rounded, 6px);box-sizing:border-box;cursor:pointer;position:relative;transition:border-radius .15s .15s;outline:0;margin:4px 0 0}@media (hover:hover){.___SCalendarUnit_1fgj7_gg_:hover{color:var(--intergalactic-text-primary, #191b23);background-color:var(--intergalactic-date-picker-cell-hover, #e0e1e9)}}.___SCalendarUnit_1fgj7_gg_.__today_1fgj7_gg_:before{content:\"\";position:absolute;display:block;top:1px;left:1px;border-radius:var(--intergalactic-control-rounded, 6px);width:calc(100% - 2px);height:calc(100% - 2px);box-sizing:border-box;border:1px solid var(--intergalactic-date-picker-cell-current, #8a8e9b)}.___SCalendarUnit_1fgj7_gg_.___SCalendarUnit_1fgj7_gg_.__today_1fgj7_gg_.__endSelected_1fgj7_gg_:before,.___SCalendarUnit_1fgj7_gg_.___SCalendarUnit_1fgj7_gg_.__today_1fgj7_gg_.__startSelected_1fgj7_gg_:before{border-color:var(--intergalactic-border-secondary, #e0e1e9)}.___SCalendarUnit_1fgj7_gg_.__highlighted_1fgj7_gg_,.___SCalendarUnit_1fgj7_gg_.__selected_1fgj7_gg_{background-color:var(--intergalactic-date-picker-cell-range, #c4e5fe);border-radius:0;transition:border-radius 0s 0s;color:var(--intergalactic-text-primary, #191b23)}@media (hover:hover){.___SCalendarUnit_1fgj7_gg_.__selected_1fgj7_gg_:hover{background-color:var(--intergalactic-date-picker-cell-range-hover, #8ecdff)}}@media (hover:hover){.___SCalendarUnit_1fgj7_gg_.__highlighted_1fgj7_gg_:hover{background-color:var(--intergalactic-date-picker-cell-range-hover, #8ecdff)}}.___SCalendarUnit_1fgj7_gg_.__startSelected_1fgj7_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);background-color:var(--intergalactic-date-picker-cell-active, #2bb3ff)}.___SCalendarUnit_1fgj7_gg_.__startSelected_1fgj7_gg_:not(.__highlighted_1fgj7_gg_){border-bottom-left-radius:var(--intergalactic-control-rounded, 6px);border-bottom-right-radius:0;border-top-left-radius:var(--intergalactic-control-rounded, 6px);border-top-right-radius:0}@media (hover:hover){.___SCalendarUnit_1fgj7_gg_.__startSelected_1fgj7_gg_:hover{color:var(--intergalactic-text-primary-invert, #ffffff);background-color:var(--intergalactic-date-picker-cell-active-hover, #008ff8)}}.___SCalendarUnit_1fgj7_gg_.__endSelected_1fgj7_gg_{background-color:var(--intergalactic-date-picker-cell-active, #2bb3ff);color:var(--intergalactic-text-primary-invert, #ffffff)}.___SCalendarUnit_1fgj7_gg_.__endSelected_1fgj7_gg_:not(.__highlighted_1fgj7_gg_){border-bottom-left-radius:0;border-bottom-right-radius:var(--intergalactic-control-rounded, 6px);border-top-left-radius:0;border-top-right-radius:var(--intergalactic-control-rounded, 6px)}@media (hover:hover){.___SCalendarUnit_1fgj7_gg_.__endSelected_1fgj7_gg_:hover{color:var(--intergalactic-text-primary-invert, #ffffff);background-color:var(--intergalactic-date-picker-cell-active-hover, #008ff8)}}.___SCalendarUnit_1fgj7_gg_.__startHighlighted_1fgj7_gg_:not(.__selected_1fgj7_gg_){border-bottom-left-radius:var(--intergalactic-control-rounded, 6px);border-bottom-right-radius:0;border-top-left-radius:var(--intergalactic-control-rounded, 6px);border-top-right-radius:0}.___SCalendarUnit_1fgj7_gg_.__endHighlighted_1fgj7_gg_:not(.__selected_1fgj7_gg_){border-bottom-left-radius:0;border-bottom-right-radius:var(--intergalactic-control-rounded, 6px);border-top-left-radius:0;border-top-right-radius:var(--intergalactic-control-rounded, 6px)}.___SCalendarUnit_1fgj7_gg_.__startHighlighted_1fgj7_gg_.___SCalendarUnit_1fgj7_gg_.__endHighlighted_1fgj7_gg_,.___SCalendarUnit_1fgj7_gg_.__startSelected_1fgj7_gg_.___SCalendarUnit_1fgj7_gg_.__endSelected_1fgj7_gg_{border-bottom-left-radius:var(--intergalactic-control-rounded, 6px);border-bottom-right-radius:var(--intergalactic-control-rounded, 6px);border-top-left-radius:var(--intergalactic-control-rounded, 6px);border-top-right-radius:var(--intergalactic-control-rounded, 6px)}.___SCalendarUnit_1fgj7_gg_.__compareHighlighted_1fgj7_gg_{border-top:2px dashed var(--intergalactic-date-picker-cell-comparison-active, #8649e1);border-bottom:2px dashed var(--intergalactic-date-picker-cell-comparison-active, #8649e1);border-radius:0;transition:none}.___SCalendarUnit_1fgj7_gg_.__compareEndHighlighted_1fgj7_gg_,.___SCalendarUnit_1fgj7_gg_.__compareStartHighlighted_1fgj7_gg_{border-left:2px dashed var(--intergalactic-date-picker-cell-comparison-active, #8649e1);border-right:2px dashed var(--intergalactic-date-picker-cell-comparison-active, #8649e1)}.___SCalendarUnit_1fgj7_gg_.__compareEnd_1fgj7_gg_,.___SCalendarUnit_1fgj7_gg_.__compareStart_1fgj7_gg_{border-radius:0;background-color:var(--intergalactic-date-picker-cell-comparison-active, #8649e1);color:var(--intergalactic-text-primary-invert, #ffffff)}@media (hover:hover){.___SCalendarUnit_1fgj7_gg_.__compareEnd_1fgj7_gg_:hover,.___SCalendarUnit_1fgj7_gg_.__compareStart_1fgj7_gg_:hover{color:var(--intergalactic-text-primary-invert, #ffffff);background-color:var(--intergalactic-date-picker-cell-comparison-active-hover, #5925ab)}}.___SCalendarUnit_1fgj7_gg_.__compareStartHighlighted_1fgj7_gg_{border-top-left-radius:var(--intergalactic-control-rounded, 6px);border-bottom-left-radius:var(--intergalactic-control-rounded, 6px)}.___SCalendarUnit_1fgj7_gg_.__compareEndHighlighted_1fgj7_gg_{border-top-right-radius:var(--intergalactic-control-rounded, 6px);border-bottom-right-radius:var(--intergalactic-control-rounded, 6px)}.___SCalendarUnit_1fgj7_gg_.__compareStart_1fgj7_gg_:not(.__compareHighlighted_1fgj7_gg_){border-top-left-radius:var(--intergalactic-control-rounded, 6px);border-bottom-left-radius:var(--intergalactic-control-rounded, 6px)}.___SCalendarUnit_1fgj7_gg_.__compareEnd_1fgj7_gg_:not(.__compareHighlighted_1fgj7_gg_){border-top-right-radius:var(--intergalactic-control-rounded, 6px);border-bottom-right-radius:var(--intergalactic-control-rounded, 6px)}.___SCalendarUnit_1fgj7_gg_.__outdated_1fgj7_gg_{opacity:.2}.___SCalendarUnit_1fgj7_gg_.__disabled_1fgj7_gg_{opacity:.4;cursor:default;pointer-events:none}.___SCalendar_1fgj7_gg_:focus .___SCalendarUnit_1fgj7_gg_.__highlighted_1fgj7_gg_{z-index:1}.___SCalendar_1fgj7_gg_:focus:not(.___SCalendar_1fgj7_gg_:focus:has(.___SCalendarUnit_1fgj7_gg_.__highlighted_1fgj7_gg_)){border-radius:var(--intergalactic-surface-rounded, 6px)}@media (prefers-reduced-motion){.___SCalendarUnit_1fgj7_gg_,.___SCalendarUnit_1fgj7_gg_.__highlighted_1fgj7_gg_,.___SCalendarUnit_1fgj7_gg_.__selected_1fgj7_gg_{transition:none}}", /*__inner_css_end__*/"1fgj7_gg_"),
+const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SCalendar_bx7k3_gg_{display:flex;flex-direction:column;border-radius:var(--intergalactic-surface-rounded, 6px)}.___SCalendar_bx7k3_gg_ .___SCalendarUnit_bx7k3_gg_:focus-visible{outline:0}.___SGridDays_bx7k3_gg_{display:grid;grid-template-columns:repeat(7,minmax(32px,auto));grid-template-rows:repeat(auto-fit,minmax(32px,auto))}.___SGridMonths_bx7k3_gg_{display:grid;grid-row-gap:var(--intergalactic-spacing-2x, 8px);grid-template-columns:repeat(3,minmax(60px,auto));grid-template-rows:repeat(4,minmax(32px,auto))}.___SWeekDays_bx7k3_gg_{display:grid;grid-template-columns:repeat(7,minmax(32px,auto))}.___SCalendarUnit_bx7k3_gg_,.___SWeekDay_bx7k3_gg_{align-items:center;display:flex;font-size:var(--intergalactic-fs-200, 14px);justify-content:center;min-height:32px;min-width:32px}.___SWeekDay_bx7k3_gg_{color:var(--intergalactic-text-secondary, #6c6e79);font-weight:var(--intergalactic-regular, 400);overflow:hidden}.___SCalendarUnit_bx7k3_gg_{font-family:inherit;font-weight:400;line-height:normal;-webkit-text-decoration:none;text-decoration:none;text-align:center;vertical-align:middle;border:1px solid transparent;color:var(--intergalactic-text-primary, #191b23);box-shadow:none;overflow:visible;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background-color:var(--intergalactic-date-picker-cell, #ffffff);border-radius:var(--intergalactic-control-rounded, 6px);box-sizing:border-box;cursor:pointer;position:relative;transition:border-radius .15s .15s;outline:0;margin:4px 0 0}@media (hover:hover){.___SCalendarUnit_bx7k3_gg_:hover{color:var(--intergalactic-text-primary, #191b23);background-color:var(--intergalactic-date-picker-cell-hover, #e0e1e9)}}.___SCalendarUnit_bx7k3_gg_.__today_bx7k3_gg_:before{content:\"\";position:absolute;display:block;top:1px;left:1px;border-radius:var(--intergalactic-control-rounded, 6px);width:calc(100% - 2px);height:calc(100% - 2px);box-sizing:border-box;border:1px solid var(--intergalactic-date-picker-cell-current, #8a8e9b)}.___SCalendarUnit_bx7k3_gg_.___SCalendarUnit_bx7k3_gg_.__today_bx7k3_gg_.__endSelected_bx7k3_gg_:before,.___SCalendarUnit_bx7k3_gg_.___SCalendarUnit_bx7k3_gg_.__today_bx7k3_gg_.__startSelected_bx7k3_gg_:before{border-color:var(--intergalactic-border-secondary, #e0e1e9)}.___SCalendarUnit_bx7k3_gg_.__highlighted_bx7k3_gg_,.___SCalendarUnit_bx7k3_gg_.__selected_bx7k3_gg_{background-color:var(--intergalactic-date-picker-cell-range, #c4e5fe);border-radius:0;transition:border-radius 0s 0s;color:var(--intergalactic-text-primary, #191b23)}@media (hover:hover){.___SCalendarUnit_bx7k3_gg_.__selected_bx7k3_gg_:hover{background-color:var(--intergalactic-date-picker-cell-range-hover, #8ecdff)}}@media (hover:hover){.___SCalendarUnit_bx7k3_gg_.__highlighted_bx7k3_gg_:hover{background-color:var(--intergalactic-date-picker-cell-range-hover, #8ecdff)}}.___SCalendarUnit_bx7k3_gg_.__startSelected_bx7k3_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);background-color:var(--intergalactic-date-picker-cell-active, #2bb3ff)}.___SCalendarUnit_bx7k3_gg_.__startSelected_bx7k3_gg_:not(.__highlighted_bx7k3_gg_){border-bottom-left-radius:var(--intergalactic-control-rounded, 6px);border-bottom-right-radius:0;border-top-left-radius:var(--intergalactic-control-rounded, 6px);border-top-right-radius:0}@media (hover:hover){.___SCalendarUnit_bx7k3_gg_.__startSelected_bx7k3_gg_:hover{color:var(--intergalactic-text-primary-invert, #ffffff);background-color:var(--intergalactic-date-picker-cell-active-hover, #008ff8)}}.___SCalendarUnit_bx7k3_gg_.__endSelected_bx7k3_gg_{background-color:var(--intergalactic-date-picker-cell-active, #2bb3ff);color:var(--intergalactic-text-primary-invert, #ffffff)}.___SCalendarUnit_bx7k3_gg_.__endSelected_bx7k3_gg_:not(.__highlighted_bx7k3_gg_){border-bottom-left-radius:0;border-bottom-right-radius:var(--intergalactic-control-rounded, 6px);border-top-left-radius:0;border-top-right-radius:var(--intergalactic-control-rounded, 6px)}@media (hover:hover){.___SCalendarUnit_bx7k3_gg_.__endSelected_bx7k3_gg_:hover{color:var(--intergalactic-text-primary-invert, #ffffff);background-color:var(--intergalactic-date-picker-cell-active-hover, #008ff8)}}.___SCalendarUnit_bx7k3_gg_.__startHighlighted_bx7k3_gg_:not(.__selected_bx7k3_gg_){border-bottom-left-radius:var(--intergalactic-control-rounded, 6px);border-bottom-right-radius:0;border-top-left-radius:var(--intergalactic-control-rounded, 6px);border-top-right-radius:0}.___SCalendarUnit_bx7k3_gg_.__endHighlighted_bx7k3_gg_:not(.__selected_bx7k3_gg_){border-bottom-left-radius:0;border-bottom-right-radius:var(--intergalactic-control-rounded, 6px);border-top-left-radius:0;border-top-right-radius:var(--intergalactic-control-rounded, 6px)}.___SCalendarUnit_bx7k3_gg_.__startHighlighted_bx7k3_gg_.___SCalendarUnit_bx7k3_gg_.__endHighlighted_bx7k3_gg_,.___SCalendarUnit_bx7k3_gg_.__startSelected_bx7k3_gg_.___SCalendarUnit_bx7k3_gg_.__endSelected_bx7k3_gg_{border-bottom-left-radius:var(--intergalactic-control-rounded, 6px);border-bottom-right-radius:var(--intergalactic-control-rounded, 6px);border-top-left-radius:var(--intergalactic-control-rounded, 6px);border-top-right-radius:var(--intergalactic-control-rounded, 6px)}.___SCalendarUnit_bx7k3_gg_.__compareHighlighted_bx7k3_gg_{border-top:2px dashed var(--intergalactic-date-picker-cell-comparison-active, #8649e1);border-bottom:2px dashed var(--intergalactic-date-picker-cell-comparison-active, #8649e1);border-radius:0;transition:none}.___SCalendarUnit_bx7k3_gg_.__compareEndHighlighted_bx7k3_gg_,.___SCalendarUnit_bx7k3_gg_.__compareStartHighlighted_bx7k3_gg_{border-left:2px dashed var(--intergalactic-date-picker-cell-comparison-active, #8649e1);border-right:2px dashed var(--intergalactic-date-picker-cell-comparison-active, #8649e1)}.___SCalendarUnit_bx7k3_gg_.__compareEnd_bx7k3_gg_,.___SCalendarUnit_bx7k3_gg_.__compareStart_bx7k3_gg_{border-radius:0;background-color:var(--intergalactic-date-picker-cell-comparison-active, #8649e1);color:var(--intergalactic-text-primary-invert, #ffffff)}@media (hover:hover){.___SCalendarUnit_bx7k3_gg_.__compareEnd_bx7k3_gg_:hover,.___SCalendarUnit_bx7k3_gg_.__compareStart_bx7k3_gg_:hover{color:var(--intergalactic-text-primary-invert, #ffffff);background-color:var(--intergalactic-date-picker-cell-comparison-active-hover, #5925ab)}}.___SCalendarUnit_bx7k3_gg_.__compareStartHighlighted_bx7k3_gg_{border-top-left-radius:var(--intergalactic-control-rounded, 6px);border-bottom-left-radius:var(--intergalactic-control-rounded, 6px)}.___SCalendarUnit_bx7k3_gg_.__compareEndHighlighted_bx7k3_gg_{border-top-right-radius:var(--intergalactic-control-rounded, 6px);border-bottom-right-radius:var(--intergalactic-control-rounded, 6px)}.___SCalendarUnit_bx7k3_gg_.__compareStart_bx7k3_gg_:not(.__compareHighlighted_bx7k3_gg_){border-top-left-radius:var(--intergalactic-control-rounded, 6px);border-bottom-left-radius:var(--intergalactic-control-rounded, 6px)}.___SCalendarUnit_bx7k3_gg_.__compareEnd_bx7k3_gg_:not(.__compareHighlighted_bx7k3_gg_){border-top-right-radius:var(--intergalactic-control-rounded, 6px);border-bottom-right-radius:var(--intergalactic-control-rounded, 6px)}.___SCalendarUnit_bx7k3_gg_.__outdated_bx7k3_gg_{opacity:.2}.___SCalendarUnit_bx7k3_gg_.__disabled_bx7k3_gg_{opacity:.4;cursor:default;pointer-events:none}.___SCalendar_bx7k3_gg_:focus .___SCalendarUnit_bx7k3_gg_.__highlighted_bx7k3_gg_{z-index:1}.___SCalendar_bx7k3_gg_:focus:not(.___SCalendar_bx7k3_gg_:focus:has(.___SCalendarUnit_bx7k3_gg_.__highlighted_bx7k3_gg_)){border-radius:var(--intergalactic-surface-rounded, 6px)}@media (prefers-reduced-motion){.___SCalendarUnit_bx7k3_gg_,.___SCalendarUnit_bx7k3_gg_.__highlighted_bx7k3_gg_,.___SCalendarUnit_bx7k3_gg_.__selected_bx7k3_gg_{transition:none}}", /*__inner_css_end__*/"bx7k3_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SGridDays": "___SGridDays_1fgj7_gg_",
-  "__SGridMonths": "___SGridMonths_1fgj7_gg_",
-  "__SWeekDays": "___SWeekDays_1fgj7_gg_",
-  "__SWeekDay": "___SWeekDay_1fgj7_gg_",
-  "__SCalendarUnit": "___SCalendarUnit_1fgj7_gg_",
-  "_startHighlighted": "__startHighlighted_1fgj7_gg_",
-  "_selected": "__selected_1fgj7_gg_",
-  "_endHighlighted": "__endHighlighted_1fgj7_gg_",
-  "_startSelected": "__startSelected_1fgj7_gg_",
-  "_endSelected": "__endSelected_1fgj7_gg_",
-  "_compareHighlighted": "__compareHighlighted_1fgj7_gg_",
-  "_compareStartHighlighted": "__compareStartHighlighted_1fgj7_gg_",
-  "_compareEndHighlighted": "__compareEndHighlighted_1fgj7_gg_",
-  "_compareStart": "__compareStart_1fgj7_gg_",
-  "_compareEnd": "__compareEnd_1fgj7_gg_",
-  "_outdated": "__outdated_1fgj7_gg_",
-  "_disabled": "__disabled_1fgj7_gg_",
-  "_highlighted": "__highlighted_1fgj7_gg_",
-  "__SCalendar": "___SCalendar_1fgj7_gg_",
-  "_today": "__today_1fgj7_gg_"
+  "__SGridDays": "___SGridDays_bx7k3_gg_",
+  "__SGridMonths": "___SGridMonths_bx7k3_gg_",
+  "__SWeekDays": "___SWeekDays_bx7k3_gg_",
+  "__SWeekDay": "___SWeekDay_bx7k3_gg_",
+  "__SCalendarUnit": "___SCalendarUnit_bx7k3_gg_",
+  "_startHighlighted": "__startHighlighted_bx7k3_gg_",
+  "_selected": "__selected_bx7k3_gg_",
+  "_endHighlighted": "__endHighlighted_bx7k3_gg_",
+  "_startSelected": "__startSelected_bx7k3_gg_",
+  "_endSelected": "__endSelected_bx7k3_gg_",
+  "_compareHighlighted": "__compareHighlighted_bx7k3_gg_",
+  "_compareStartHighlighted": "__compareStartHighlighted_bx7k3_gg_",
+  "_compareEndHighlighted": "__compareEndHighlighted_bx7k3_gg_",
+  "_compareStart": "__compareStart_bx7k3_gg_",
+  "_compareEnd": "__compareEnd_bx7k3_gg_",
+  "_outdated": "__outdated_bx7k3_gg_",
+  "_disabled": "__disabled_bx7k3_gg_",
+  "_highlighted": "__highlighted_bx7k3_gg_",
+  "__SCalendar": "___SCalendar_bx7k3_gg_",
+  "_today": "__today_bx7k3_gg_"
 });
 import { formatDDMMYY, formatMMYY } from '../utils/formatDate';
 import { includesDate } from '../utils/includesDate';
 import isBetween from '../utils/isBetweenPlugin';
 dayjs.extend(isBetween);
-var range = function range(N, cb) {
-  return Array.from({
-    length: N
-  }, function (_v, k) {
-    return cb(k);
-  });
-};
+const range = (N, cb) => Array.from({
+  length: N
+}, (_v, k) => cb(k));
 function getDayJSLocaleParams(locale) {
   if (locale.includes('en') || locale.includes('ja')) {
-    return _objectSpread({
-      weekStart: 0
-    }, dayjs.Ls[locale]);
+    return {
+      weekStart: 0,
+      ...dayjs.Ls[locale]
+    };
   }
-  return _objectSpread({
-    weekStart: 1
-  }, dayjs.Ls[locale]);
+  return {
+    weekStart: 1,
+    ...dayjs.Ls[locale]
+  };
 }
-var CalendarWeekDaysRoot = /*#__PURE__*/function (_Component) {
-  function CalendarWeekDaysRoot() {
-    _classCallCheck(this, CalendarWeekDaysRoot);
-    return _callSuper(this, CalendarWeekDaysRoot, arguments);
-  }
-  _inherits(CalendarWeekDaysRoot, _Component);
-  return _createClass(CalendarWeekDaysRoot, [{
-    key: "getDaysByWeek",
-    value: function getDaysByWeek() {
-      var locale = this.asProps.locale;
-      var date = dayjs().locale(locale, getDayJSLocaleParams(locale)).startOf('week');
-      return range(7, function () {
-        var _short = new Intl.DateTimeFormat(locale, {
-          weekday: 'short'
-        }).format(date.valueOf());
-        var _long = new Intl.DateTimeFormat(locale, {
-          weekday: 'long'
-        }).format(date.valueOf());
-        date = date.add(1, 'day');
-        return {
-          'children': _short,
-          'aria-label': _long
-        };
-      });
-    }
-  }, {
-    key: "setContext",
-    value: function setContext() {
+class CalendarWeekDaysRoot extends Component {
+  getDaysByWeek() {
+    const {
+      locale
+    } = this.asProps;
+    let date = dayjs().locale(locale, getDayJSLocaleParams(locale)).startOf('week');
+    return range(7, () => {
+      const short = new Intl.DateTimeFormat(locale, {
+        weekday: 'short'
+      }).format(date.valueOf());
+      const long = new Intl.DateTimeFormat(locale, {
+        weekday: 'long'
+      }).format(date.valueOf());
+      date = date.add(1, 'day');
       return {
-        days: this.getDaysByWeek()
+        'children': short,
+        'aria-label': long
       };
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps,
-        _ref6;
-      var SWeekDays = Box;
-      var _this$asProps = this.asProps,
-        Children = _this$asProps.Children,
-        styles = _this$asProps.styles;
-      return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SWeekDays, _ref6.cn("SWeekDays", _objectSpread({}, _assignProps({}, _ref))), /*#__PURE__*/React.createElement(Children, _ref6.cn("Children", {})));
-    }
-  }]);
-}(Component);
+    });
+  }
+  setContext() {
+    return {
+      days: this.getDaysByWeek()
+    };
+  }
+  render() {
+    var _ref = this.asProps,
+      _ref6;
+    const SWeekDays = Box;
+    const {
+      Children,
+      styles
+    } = this.asProps;
+    return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SWeekDays, _ref6.cn("SWeekDays", {
+      ..._assignProps({}, _ref)
+    }), /*#__PURE__*/React.createElement(Children, _ref6.cn("Children", {})));
+  }
+}
 _defineProperty(CalendarWeekDaysRoot, "displayName", 'CalendarWeekDays');
 _defineProperty(CalendarWeekDaysRoot, "style", style);
 _defineProperty(CalendarWeekDaysRoot, "defaultProps", {
   locale: 'en',
-  children: function children(_ref15) {
-    var days = _ref15.days;
-    return days.map(function (data, i) {
-      return /*#__PURE__*/React.createElement(CalendarWeekDays.Unit, _extends({
-        key: i
-      }, data));
-    });
-  }
+  children: ({
+    days
+  }) => days.map((data, i) => /*#__PURE__*/React.createElement(CalendarWeekDays.Unit, _extends({
+    key: i
+  }, data)))
 });
-function CalendarWeekUnit(_ref1) {
+function CalendarWeekUnit({
+  styles
+}) {
   var _ref2 = arguments[0],
     _ref7;
-  var styles = _ref1.styles;
-  var SWeekDay = Box;
-  return _ref7 = sstyled(styles), /*#__PURE__*/React.createElement(SWeekDay, _ref7.cn("SWeekDay", _objectSpread({}, _assignProps2({
-    "role": 'columnheader'
-  }, _ref2))));
+  const SWeekDay = Box;
+  return _ref7 = sstyled(styles), /*#__PURE__*/React.createElement(SWeekDay, _ref7.cn("SWeekDay", {
+    ..._assignProps2({
+      "role": 'columnheader'
+    }, _ref2)
+  }));
 }
 function resolveHighlighting(date, unit, highlighted) {
-  var highlighted0 = highlighted[0] ? dayjs(highlighted[0]) : null;
-  var highlighted1 = highlighted[1] ? dayjs(highlighted[1]) : highlighted0;
+  let highlighted0 = highlighted[0] ? dayjs(highlighted[0]) : null;
+  let highlighted1 = highlighted[1] ? dayjs(highlighted[1]) : highlighted0;
   if (highlighted0 && highlighted1) {
-    if (highlighted0 > highlighted1) {
-      var _ref10 = [highlighted0, highlighted1];
-      highlighted1 = _ref10[0];
-      highlighted0 = _ref10[1];
-    }
+    if (highlighted0 > highlighted1) [highlighted1, highlighted0] = [highlighted0, highlighted1];
     return {
       highlighted: date.isBetween(highlighted0, highlighted1, unit, '[]'),
       startHighlighted: highlighted0 && date.isSame(highlighted0, 'date'),
@@ -155,397 +133,362 @@ function resolveHighlighting(date, unit, highlighted) {
   };
 }
 function resolveSelecting(date, unit, value) {
-  var value0 = value[0] ? dayjs(value[0]) : null;
-  var value1 = value[1] ? dayjs(value[1]) : null;
-  var selected;
+  let value0 = value[0] ? dayjs(value[0]) : null;
+  let value1 = value[1] ? dayjs(value[1]) : null;
+  let selected;
   if (value0 && value1) {
-    if (value0 > value1) {
-      var _ref11 = [value0, value1];
-      value1 = _ref11[0];
-      value0 = _ref11[1];
-    }
+    if (value0 > value1) [value1, value0] = [value0, value1];
     selected = date.isBetween(value0, value1, unit, '()');
   }
-  var startSelected = value0 && date.isSame(value0, unit);
-  var endSelected = value1 && date.isSame(value1, unit);
+  const startSelected = value0 && date.isSame(value0, unit);
+  const endSelected = value1 && date.isSame(value1, unit);
   return {
-    selected: selected,
-    startSelected: startSelected,
-    endSelected: endSelected
+    selected,
+    startSelected,
+    endSelected
   };
 }
-var CalendarAbstract = /*#__PURE__*/function (_Component2) {
-  function CalendarAbstract() {
-    var _this;
-    _classCallCheck(this, CalendarAbstract);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, CalendarAbstract, [].concat(args));
-    _defineProperty(_this, "today", new Date(new Date().setHours(0, 0, 0, 0)));
-    _defineProperty(_this, "handleMouseLeave", function () {
-      var highlighted = _this.asProps.highlighted;
-      fire(_this, 'onHighlightedChange', highlighted.length ? [highlighted[0]] : []);
+class CalendarAbstract extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "today", new Date(new Date().setHours(0, 0, 0, 0)));
+    _defineProperty(this, "handleMouseLeave", () => {
+      const {
+        highlighted
+      } = this.asProps;
+      fire(this, 'onHighlightedChange', highlighted.length ? [highlighted[0]] : []);
     });
-    _defineProperty(_this, "formatter", formatDDMMYY);
-    return _this;
+    _defineProperty(this, "formatter", formatDDMMYY);
   }
-  _inherits(CalendarAbstract, _Component2);
-  return _createClass(CalendarAbstract, [{
-    key: "createUnit",
-    value: function createUnit(_ref12, unit) {
-      var _this2 = this;
-      var date = _ref12.date,
-        other = _objectWithoutProperties(_ref12, _excluded);
-      var self = this;
-      var _this$asProps2 = this.asProps,
-        _disabled = _this$asProps2.disabled,
-        value = _this$asProps2.value,
-        compare = _this$asProps2.compare,
-        highlighted = _this$asProps2.highlighted,
-        compareHighlighted = _this$asProps2.compareHighlighted,
-        locale = _this$asProps2.locale;
-      var highlighting = resolveHighlighting(date, unit, highlighted !== null && highlighted !== void 0 ? highlighted : []);
-      var comparedHighlighting = resolveHighlighting(date, unit, compareHighlighted !== null && compareHighlighted !== void 0 ? compareHighlighted : []);
-      var selecting = resolveSelecting(date, unit, value !== null && value !== void 0 ? value : []);
-      var comparing = resolveSelecting(date, unit, compare !== null && compare !== void 0 ? compare : []);
-      var disabled = _disabled.some(includesDate(date, unit));
-      return _objectSpread({
-        'date': formatDDMMYY(date, locale),
-        'dateKey': this.formatter(date, locale),
-        'children': '',
-        'role': 'gridcell',
-        'startSelected': selecting.startSelected,
-        'endSelected': selecting.endSelected,
-        'selected': selecting.selected,
-        'highlighted': highlighting.highlighted,
-        'startHighlighted': highlighting.startHighlighted,
-        'endHighlighted': highlighting.endHighlighted,
-        'compareHighlighted': comparedHighlighting.highlighted || comparing.selected,
-        'compareStartHighlighted': comparedHighlighting.startHighlighted,
-        'compareEndHighlighted': comparedHighlighting.endHighlighted,
-        'compareStart': comparing.startSelected,
-        'compareEnd': comparing.endSelected,
-        'aria-selected': selecting.selected,
-        'aria-disabled': disabled,
-        'aria-current': highlighting.highlighted ? 'date' : undefined,
-        disabled: disabled,
-        'today': date.isSame(self.today, unit),
-        'onClick': function onClick() {
-          var _this2$asProps = _this2.asProps,
-            range = _this2$asProps.range,
-            _highlighted = _this2$asProps.highlighted;
-          var highlighted = [date.valueOf()];
-          if (_highlighted.length === 1) {
-            highlighted = [_highlighted[0], date.valueOf()];
-          } else if (_highlighted.length >= 2) {
-            highlighted = [];
-          }
+  createUnit({
+    date,
+    ...other
+  }, unit) {
+    const self = this;
+    const {
+      disabled: _disabled,
+      value,
+      compare,
+      highlighted,
+      compareHighlighted,
+      locale
+    } = this.asProps;
+    const highlighting = resolveHighlighting(date, unit, highlighted ?? []);
+    const comparedHighlighting = resolveHighlighting(date, unit, compareHighlighted ?? []);
+    const selecting = resolveSelecting(date, unit, value ?? []);
+    const comparing = resolveSelecting(date, unit, compare ?? []);
+    const disabled = _disabled.some(includesDate(date, unit));
+    return {
+      'date': formatDDMMYY(date, locale),
+      'dateKey': this.formatter(date, locale),
+      'children': '',
+      'role': 'gridcell',
+      'startSelected': selecting.startSelected,
+      'endSelected': selecting.endSelected,
+      'selected': selecting.selected,
+      'highlighted': highlighting.highlighted,
+      'startHighlighted': highlighting.startHighlighted,
+      'endHighlighted': highlighting.endHighlighted,
+      'compareHighlighted': comparedHighlighting.highlighted || comparing.selected,
+      'compareStartHighlighted': comparedHighlighting.startHighlighted,
+      'compareEndHighlighted': comparedHighlighting.endHighlighted,
+      'compareStart': comparing.startSelected,
+      'compareEnd': comparing.endSelected,
+      'aria-selected': selecting.selected,
+      'aria-disabled': disabled,
+      'aria-current': highlighting.highlighted ? 'date' : undefined,
+      disabled,
+      'today': date.isSame(self.today, unit),
+      'onClick': () => {
+        const {
+          range,
+          highlighted: _highlighted
+        } = this.asProps;
+        let highlighted = [date.valueOf()];
+        if (_highlighted.length === 1) {
+          highlighted = [_highlighted[0], date.valueOf()];
+        } else if (_highlighted.length >= 2) {
+          highlighted = [];
+        }
+        if (range === 'compare') {
+          fire(this, 'onCompareHighlightedChange', highlighted);
+        } else {
+          fire(this, 'onHighlightedChange', highlighted);
+        }
+        fire(this, 'onChange', date.toDate());
+      },
+      'onMouseEnter': () => {
+        const {
+          range,
+          highlighted: _highlighted
+        } = this.asProps;
+        const value = range === 'compare' ? this.asProps.compare : this.asProps.value;
+        if (_highlighted[0] || (value ?? []).length === 1) {
+          const startDate = _highlighted[0] || (value ?? [])[0];
+          const highlighted = [startDate.valueOf(), date.valueOf()];
           if (range === 'compare') {
-            fire(_this2, 'onCompareHighlightedChange', highlighted);
+            fire(this, 'onCompareHighlightedChange', highlighted);
           } else {
-            fire(_this2, 'onHighlightedChange', highlighted);
-          }
-          fire(_this2, 'onChange', date.toDate());
-        },
-        'onMouseEnter': function onMouseEnter() {
-          var _this2$asProps2 = _this2.asProps,
-            range = _this2$asProps2.range,
-            _highlighted = _this2$asProps2.highlighted;
-          var value = range === 'compare' ? _this2.asProps.compare : _this2.asProps.value;
-          if (_highlighted[0] || (value !== null && value !== void 0 ? value : []).length === 1) {
-            var startDate = _highlighted[0] || (value !== null && value !== void 0 ? value : [])[0];
-            var _highlighted2 = [startDate.valueOf(), date.valueOf()];
-            if (range === 'compare') {
-              fire(_this2, 'onCompareHighlightedChange', _highlighted2);
-            } else {
-              fire(_this2, 'onHighlightedChange', _highlighted2);
-            }
+            fire(this, 'onHighlightedChange', highlighted);
           }
         }
-      }, other);
-    }
-  }, {
-    key: "getUnitProps",
-    value: function getUnitProps(_ref13, index) {
-      var dateKey = _ref13.dateKey;
-      var inRow = 7;
-      var unitRefs = this.asProps.unitRefs;
-      return {
-        'aria-colindex': index % inRow + 1,
-        'aria-rowindex': Math.floor(index / inRow) + 1,
-        'ref': function ref(node) {
-          if (!dateKey) return;
-          unitRefs[dateKey] = node;
-        }
-      };
-    }
-  }, {
-    key: "getRootProps",
-    value: function getRootProps() {
-      return {
-        role: 'grid',
-        tabIndex: 0
-      };
-    }
-  }, {
-    key: "describeValue",
-    value: function describeValue() {
-      var _this3 = this;
-      var _this$asProps3 = this.asProps,
-        locale = _this$asProps3.locale,
-        getI18nText = _this$asProps3.getI18nText,
-        actionsDescribing = _this$asProps3.actionsDescribing;
-      var value = this.asProps.value || [];
-      var compare = this.asProps.compare || [];
-      if (!actionsDescribing) return null;
-      var t = function t(key, date) {
-        return getI18nText(key, date ? {
-          date: _this3.formatter(date, locale)
-        } : undefined);
-      };
-      var description = '';
-      if (value.length === 1 || compare.length === 1) {
-        description += t('selectingStarted') + '. ';
-      } else if (value.length === 2 || compare.length === 2) {
-        description += t('selectingFinished') + '. ';
+      },
+      ...other
+    };
+  }
+  getUnitProps({
+    dateKey
+  }, index) {
+    const inRow = 7;
+    const {
+      unitRefs
+    } = this.asProps;
+    return {
+      'aria-colindex': index % inRow + 1,
+      'aria-rowindex': Math.floor(index / inRow) + 1,
+      'ref': node => {
+        if (!dateKey) return;
+        unitRefs[dateKey] = node;
       }
-      if (actionsDescribing === 'range') {
-        if (value[0] || value[1]) description += t('dateRange') + ' ';
+    };
+  }
+  getRootProps() {
+    return {
+      role: 'grid',
+      tabIndex: 0
+    };
+  }
+  describeValue() {
+    const {
+      locale,
+      getI18nText,
+      actionsDescribing
+    } = this.asProps;
+    const value = this.asProps.value || [];
+    const compare = this.asProps.compare || [];
+    if (!actionsDescribing) return null;
+    const t = (key, date) => getI18nText(key, date ? {
+      date: this.formatter(date, locale)
+    } : undefined);
+    let description = '';
+    if (value.length === 1 || compare.length === 1) {
+      description += t('selectingStarted') + '. ';
+    } else if (value.length === 2 || compare.length === 2) {
+      description += t('selectingFinished') + '. ';
+    }
+    if (actionsDescribing === 'range') {
+      if (value[0] || value[1]) description += t('dateRange') + ' ';
+      if (value[0]) description += t('fromDate', value[0]) + ', ';
+      if (value[1]) description += t('toDate', value[1]) + '. ';
+    } else if (actionsDescribing === 'range-compare') {
+      if (compare.length === 1) {
+        description += t('dateRange2') + ' ';
+        if (compare[0]) description += t('fromDate', value[0]) + ', ';
+        if (compare[1]) description += t('toDate', value[1]) + '. ';
+      } else {
+        if (value[0] || value[1]) description += t('dateRange1') + ' ';
         if (value[0]) description += t('fromDate', value[0]) + ', ';
         if (value[1]) description += t('toDate', value[1]) + '. ';
-      } else if (actionsDescribing === 'range-compare') {
-        if (compare.length === 1) {
+        if (compare.length > 0) {
           description += t('dateRange2') + ' ';
-          if (compare[0]) description += t('fromDate', value[0]) + ', ';
-          if (compare[1]) description += t('toDate', value[1]) + '. ';
-        } else {
-          if (value[0] || value[1]) description += t('dateRange1') + ' ';
-          if (value[0]) description += t('fromDate', value[0]) + ', ';
-          if (value[1]) description += t('toDate', value[1]) + '. ';
-          if (compare.length > 0) {
-            description += t('dateRange2') + ' ';
-            if (compare[0]) description += t('fromDate', compare[0]) + ', ';
-            if (compare[1]) description += t('toDate', compare[1]) + '. ';
-          }
+          if (compare[0]) description += t('fromDate', compare[0]) + ', ';
+          if (compare[1]) description += t('toDate', compare[1]) + '. ';
         }
       }
-      return description;
     }
-  }]);
-}(Component);
+    return description;
+  }
+}
 _defineProperty(CalendarAbstract, "style", style);
-function CalendarUnit(_ref14) {
+function CalendarUnit({
+  styles,
+  date,
+  long,
+  outdated,
+  disabled,
+  highlighted
+}) {
   var _ref3 = arguments[0],
     _ref8;
-  var styles = _ref14.styles,
-    date = _ref14.date,
-    _long2 = _ref14["long"],
-    outdated = _ref14.outdated,
-    disabled = _ref14.disabled,
-    highlighted = _ref14.highlighted;
-  var SCalendarUnit = Box;
-  return _ref8 = sstyled(styles), /*#__PURE__*/React.createElement(SCalendarUnit, _ref8.cn("SCalendarUnit", _objectSpread({}, _assignProps3({
-    "use:disabled": disabled || outdated || !date,
-    "aria-hidden": !date,
-    "aria-label": _long2 || date,
-    "use:tabIndex": highlighted ? 0 : -1
-  }, _ref3))));
+  const SCalendarUnit = Box;
+  return _ref8 = sstyled(styles), /*#__PURE__*/React.createElement(SCalendarUnit, _ref8.cn("SCalendarUnit", {
+    ..._assignProps3({
+      "use:disabled": disabled || outdated || !date,
+      "aria-hidden": !date,
+      "aria-label": long || date,
+      "use:tabIndex": highlighted ? 0 : -1
+    }, _ref3)
+  }));
 }
-CalendarUnit.enhance = [keyboardFocusEnhance()];
-var CalendarDaysRoot = /*#__PURE__*/function (_CalendarAbstract2) {
-  function CalendarDaysRoot() {
-    _classCallCheck(this, CalendarDaysRoot);
-    return _callSuper(this, CalendarDaysRoot, arguments);
-  }
-  _inherits(CalendarDaysRoot, _CalendarAbstract2);
-  return _createClass(CalendarDaysRoot, [{
-    key: "getDaysByMonth",
-    value: function getDaysByMonth() {
-      var _this4 = this;
-      var _this$asProps4 = this.asProps,
-        displayedPeriod = _this$asProps4.displayedPeriod,
-        renderOutdated = _this$asProps4.renderOutdated,
-        locale = _this$asProps4.locale;
-      var date = dayjs(displayedPeriod).startOf('month');
-      var prevDate = date.subtract(1, 'month');
-      var nextDate = date.add(1, 'month');
+class CalendarDaysRoot extends CalendarAbstract {
+  getDaysByMonth() {
+    const {
+      displayedPeriod,
+      renderOutdated,
+      locale
+    } = this.asProps;
+    let date = dayjs(displayedPeriod).startOf('month');
+    let prevDate = date.subtract(1, 'month');
+    let nextDate = date.add(1, 'month');
 
-      /* 0 - 6 */
-      var dateStartOfWeek = date.locale(locale, getDayJSLocaleParams(locale)).startOf('week').get('d') ? (date.get('d') || 7) - 1 : date.get('d');
-      var prevMonthDays = dateStartOfWeek ? range(prevDate.daysInMonth(), function (i) {
-        var day = _this4.createUnit({
-          date: prevDate,
-          outdated: true,
-          i: i
-        }, 'date');
-        day.children = String(prevDate.get('date'));
-        prevDate = prevDate.add(1, 'day');
-        return day;
-      }).slice(-dateStartOfWeek) : [];
-      var monthDays = range(date.daysInMonth(), function (i) {
-        var day = _this4.createUnit({
-          date: date,
-          i: i
-        }, 'date');
-        day.children = String(date.get('date'));
-        date = date.add(1, 'day');
-        return day;
-      });
-      var nextMonthDays = range(42 - prevMonthDays.length - monthDays.length, function (i) {
-        var day = _this4.createUnit({
-          date: nextDate,
-          outdated: true,
-          i: i
-        }, 'date');
-        day.children = String(nextDate.get('date'));
-        nextDate = nextDate.add(1, 'day');
-        return day;
-      });
-      if (!renderOutdated) {
-        prevMonthDays = prevMonthDays.map(function () {
-          return {
-            disabled: true,
-            children: ''
-          };
-        });
-        nextMonthDays = [];
-      }
-      return [].concat(_toConsumableArray(prevMonthDays), _toConsumableArray(monthDays), _toConsumableArray(nextMonthDays));
-    }
-  }, {
-    key: "setContext",
-    value: function setContext() {
-      return {
-        days: this.getDaysByMonth()
-      };
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref4 = this.asProps,
-        _ref9;
-      var SCalendar = Box;
-      var SGridDays = 'div';
-      var _this$asProps5 = this.asProps,
-        Children = _this$asProps5.Children,
-        styles = _this$asProps5.styles,
-        locale = _this$asProps5.locale;
-      var description = this.describeValue();
-      return _ref9 = sstyled(styles), /*#__PURE__*/React.createElement(SCalendar, _ref9.cn("SCalendar", _objectSpread({}, _assignProps4(_objectSpread({}, this.getRootProps()), _ref4))), /*#__PURE__*/React.createElement(CalendarWeekDays, _ref9.cn("CalendarWeekDays", {
-        "locale": locale,
-        "role": 'row'
-      })), /*#__PURE__*/React.createElement(SGridDays, _ref9.cn("SGridDays", {
-        "onMouseLeave": this.handleMouseLeave,
-        "role": 'row'
-      }), /*#__PURE__*/React.createElement(Children, _ref9.cn("Children", {}))), /*#__PURE__*/React.createElement(ScreenReaderOnly, _ref9.cn("ScreenReaderOnly", {
-        "role": 'row'
-      }), /*#__PURE__*/React.createElement("span", _ref9.cn("span", {
-        "aria-live": 'polite',
-        "role": 'gridcell'
-      }), description)));
+    /* 0 - 6 */
+    const dateStartOfWeek = date.locale(locale, getDayJSLocaleParams(locale)).startOf('week').get('d') ? (date.get('d') || 7) - 1 : date.get('d');
+    let prevMonthDays = dateStartOfWeek ? range(prevDate.daysInMonth(), i => {
+      const day = this.createUnit({
+        date: prevDate,
+        outdated: true,
+        i
+      }, 'date');
+      day.children = String(prevDate.get('date'));
+      prevDate = prevDate.add(1, 'day');
+      return day;
+    }).slice(-dateStartOfWeek) : [];
+    const monthDays = range(date.daysInMonth(), i => {
+      const day = this.createUnit({
+        date,
+        i
+      }, 'date');
+      day.children = String(date.get('date'));
+      date = date.add(1, 'day');
+      return day;
+    });
+    let nextMonthDays = range(42 - prevMonthDays.length - monthDays.length, i => {
+      const day = this.createUnit({
+        date: nextDate,
+        outdated: true,
+        i
+      }, 'date');
+      day.children = String(nextDate.get('date'));
+      nextDate = nextDate.add(1, 'day');
+      return day;
+    });
+    if (!renderOutdated) {
+      prevMonthDays = prevMonthDays.map(() => ({
+        disabled: true,
+        children: ''
+      }));
+      nextMonthDays = [];
     }
-  }]);
-}(CalendarAbstract);
+    return [...prevMonthDays, ...monthDays, ...nextMonthDays];
+  }
+  setContext() {
+    return {
+      days: this.getDaysByMonth()
+    };
+  }
+  render() {
+    var _ref4 = this.asProps,
+      _ref9;
+    const SCalendar = Box;
+    const SGridDays = 'div';
+    const {
+      Children,
+      styles,
+      locale
+    } = this.asProps;
+    const description = this.describeValue();
+    return _ref9 = sstyled(styles), /*#__PURE__*/React.createElement(SCalendar, _ref9.cn("SCalendar", {
+      ..._assignProps4({
+        ...this.getRootProps()
+      }, _ref4)
+    }), /*#__PURE__*/React.createElement(CalendarWeekDays, _ref9.cn("CalendarWeekDays", {
+      "locale": locale,
+      "role": 'row'
+    })), /*#__PURE__*/React.createElement(SGridDays, _ref9.cn("SGridDays", {
+      "onMouseLeave": this.handleMouseLeave,
+      "role": 'row'
+    }), /*#__PURE__*/React.createElement(Children, _ref9.cn("Children", {}))), /*#__PURE__*/React.createElement(ScreenReaderOnly, _ref9.cn("ScreenReaderOnly", {
+      "role": 'row'
+    }), /*#__PURE__*/React.createElement("span", _ref9.cn("span", {
+      "aria-live": 'polite',
+      "role": 'gridcell'
+    }), description)));
+  }
+}
 _defineProperty(CalendarDaysRoot, "displayName", 'CalendarDays');
 _defineProperty(CalendarDaysRoot, "defaultProps", {
   displayedPeriod: new Date(new Date().setHours(0, 0, 0, 0)),
   disabled: [],
   value: [],
   locale: 'en',
-  children: function children(_ref16) {
-    var days = _ref16.days;
-    return days.map(function (data, i) {
-      return /*#__PURE__*/React.createElement(CalendarDays.Unit, _extends({
-        key: i
-      }, data));
+  children: ({
+    days
+  }) => days.map((data, i) => /*#__PURE__*/React.createElement(CalendarDays.Unit, _extends({
+    key: i
+  }, data)))
+});
+class CalendarMonthsRoot extends CalendarAbstract {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "formatter", formatMMYY);
+  }
+  getMonthsByYear() {
+    const {
+      displayedPeriod,
+      locale
+    } = this.asProps;
+    let date = dayjs(displayedPeriod).startOf('year');
+    return range(12, () => {
+      const month = this.createUnit({
+        date
+      }, 'month');
+      month.children = new Intl.DateTimeFormat(locale, {
+        month: 'short'
+      }).format(date.valueOf());
+      month.long = new Intl.DateTimeFormat(locale, {
+        month: 'long',
+        year: 'numeric'
+      }).format(date.valueOf());
+      date = date.add(1, 'month');
+      return month;
     });
   }
-});
-var CalendarMonthsRoot = /*#__PURE__*/function (_CalendarAbstract3) {
-  function CalendarMonthsRoot() {
-    var _this5;
-    _classCallCheck(this, CalendarMonthsRoot);
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-    _this5 = _callSuper(this, CalendarMonthsRoot, [].concat(args));
-    _defineProperty(_this5, "formatter", formatMMYY);
-    return _this5;
+  setContext() {
+    return {
+      months: this.getMonthsByYear()
+    };
   }
-  _inherits(CalendarMonthsRoot, _CalendarAbstract3);
-  return _createClass(CalendarMonthsRoot, [{
-    key: "getMonthsByYear",
-    value: function getMonthsByYear() {
-      var _this6 = this;
-      var _this$asProps6 = this.asProps,
-        displayedPeriod = _this$asProps6.displayedPeriod,
-        locale = _this$asProps6.locale;
-      var date = dayjs(displayedPeriod).startOf('year');
-      return range(12, function () {
-        var month = _this6.createUnit({
-          date: date
-        }, 'month');
-        month.children = new Intl.DateTimeFormat(locale, {
-          month: 'short'
-        }).format(date.valueOf());
-        month["long"] = new Intl.DateTimeFormat(locale, {
-          month: 'long',
-          year: 'numeric'
-        }).format(date.valueOf());
-        date = date.add(1, 'month');
-        return month;
-      });
-    }
-  }, {
-    key: "setContext",
-    value: function setContext() {
-      return {
-        months: this.getMonthsByYear()
-      };
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref5 = this.asProps,
-        _ref0;
-      var SCalendar = Box;
-      var SGridMonths = 'div';
-      var _this$asProps7 = this.asProps,
-        Children = _this$asProps7.Children,
-        styles = _this$asProps7.styles;
-      var description = this.describeValue();
-      return _ref0 = sstyled(styles), /*#__PURE__*/React.createElement(SCalendar, _ref0.cn("SCalendar", _objectSpread({}, _assignProps5(_objectSpread({}, this.getRootProps()), _ref5))), /*#__PURE__*/React.createElement(SGridMonths, _ref0.cn("SGridMonths", {
-        "onMouseLeave": this.handleMouseLeave,
-        "role": 'row'
-      }), /*#__PURE__*/React.createElement(Children, _ref0.cn("Children", {}))), /*#__PURE__*/React.createElement(ScreenReaderOnly, _ref0.cn("ScreenReaderOnly", {
-        "role": 'row'
-      }), /*#__PURE__*/React.createElement("span", _ref0.cn("span", {
-        "aria-live": 'polite',
-        "role": 'gridcell'
-      }), description)));
-    }
-  }]);
-}(CalendarAbstract);
+  render() {
+    var _ref5 = this.asProps,
+      _ref0;
+    const SCalendar = Box;
+    const SGridMonths = 'div';
+    const {
+      Children,
+      styles
+    } = this.asProps;
+    const description = this.describeValue();
+    return _ref0 = sstyled(styles), /*#__PURE__*/React.createElement(SCalendar, _ref0.cn("SCalendar", {
+      ..._assignProps5({
+        ...this.getRootProps()
+      }, _ref5)
+    }), /*#__PURE__*/React.createElement(SGridMonths, _ref0.cn("SGridMonths", {
+      "onMouseLeave": this.handleMouseLeave,
+      "role": 'row'
+    }), /*#__PURE__*/React.createElement(Children, _ref0.cn("Children", {}))), /*#__PURE__*/React.createElement(ScreenReaderOnly, _ref0.cn("ScreenReaderOnly", {
+      "role": 'row'
+    }), /*#__PURE__*/React.createElement("span", _ref0.cn("span", {
+      "aria-live": 'polite',
+      "role": 'gridcell'
+    }), description)));
+  }
+}
 _defineProperty(CalendarMonthsRoot, "displayName", 'CalendarMonths');
 _defineProperty(CalendarMonthsRoot, "defaultProps", {
   locale: 'en',
-  children: function children(_ref17) {
-    var months = _ref17.months;
-    return months.map(function (data, i) {
-      return /*#__PURE__*/React.createElement(CalendarMonths.Unit, _extends({
-        key: i
-      }, data));
-    });
-  }
+  children: ({
+    months
+  }) => months.map((data, i) => /*#__PURE__*/React.createElement(CalendarMonths.Unit, _extends({
+    key: i
+  }, data)))
 });
-var CalendarWeekDays = createComponent(CalendarWeekDaysRoot, {
+const CalendarWeekDays = createComponent(CalendarWeekDaysRoot, {
   Unit: CalendarWeekUnit
 });
-var CalendarDays = createComponent(CalendarDaysRoot, {
+const CalendarDays = createComponent(CalendarDaysRoot, {
   Unit: CalendarUnit
 });
-var CalendarMonths = createComponent(CalendarMonthsRoot, {
+const CalendarMonths = createComponent(CalendarMonthsRoot, {
   Unit: CalendarUnit
 });
 export { CalendarUnit, CalendarWeekDays, CalendarDays, CalendarMonths };