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

package/lib/cjs/components/Calendar.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,143 +8,121 @@ exports.CalendarMonths = exports.CalendarDays = void 0;
 exports.CalendarUnit = CalendarUnit;
 exports.CalendarWeekDays = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _core = require("@semcore/core");
-var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/keyboardFocusEnhance"));
+var _baseComponents = require("@semcore/base-components");
 var _fire = _interopRequireDefault(require("@semcore/core/lib/utils/fire"));
-var _flexBox = require("@semcore/flex-box");
 var _dayjs = _interopRequireDefault(require("dayjs"));
 var _react = _interopRequireDefault(require("react"));
 var _formatDate = require("../utils/formatDate");
 var _includesDate = require("../utils/includesDate");
 var _isBetweenPlugin = _interopRequireDefault(require("../utils/isBetweenPlugin"));
-var _excluded = ["date"];
 /*!__reshadow-styles__:"../style/calendar.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_core.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__*/_core.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_"
 });
-_dayjs["default"].extend(_isBetweenPlugin["default"]);
-var range = function range(N, cb) {
-  return Array.from({
-    length: N
-  }, function (_v, k) {
-    return cb(k);
-  });
-};
+_dayjs.default.extend(_isBetweenPlugin.default);
+const range = (N, cb) => Array.from({
+  length: N
+}, (_v, k) => cb(k));
 function getDayJSLocaleParams(locale) {
   if (locale.includes('en') || locale.includes('ja')) {
-    return (0, _objectSpread2["default"])({
-      weekStart: 0
-    }, _dayjs["default"].Ls[locale]);
+    return {
+      weekStart: 0,
+      ..._dayjs.default.Ls[locale]
+    };
   }
-  return (0, _objectSpread2["default"])({
-    weekStart: 1
-  }, _dayjs["default"].Ls[locale]);
+  return {
+    weekStart: 1,
+    ..._dayjs.default.Ls[locale]
+  };
 }
-var CalendarWeekDaysRoot = /*#__PURE__*/function (_Component) {
-  function CalendarWeekDaysRoot() {
-    (0, _classCallCheck2["default"])(this, CalendarWeekDaysRoot);
-    return (0, _callSuper2["default"])(this, CalendarWeekDaysRoot, arguments);
-  }
-  (0, _inherits2["default"])(CalendarWeekDaysRoot, _Component);
-  return (0, _createClass2["default"])(CalendarWeekDaysRoot, [{
-    key: "getDaysByWeek",
-    value: function getDaysByWeek() {
-      var locale = this.asProps.locale;
-      var date = (0, _dayjs["default"])().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 _core.Component {
+  getDaysByWeek() {
+    const {
+      locale
+    } = this.asProps;
+    let date = (0, _dayjs.default)().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 = _flexBox.Box;
-      var _this$asProps = this.asProps,
-        Children = _this$asProps.Children,
-        styles = _this$asProps.styles;
-      return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SWeekDays, _ref6.cn("SWeekDays", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref))), /*#__PURE__*/_react["default"].createElement(Children, _ref6.cn("Children", {})));
-    }
-  }]);
-}(_core.Component);
-(0, _defineProperty2["default"])(CalendarWeekDaysRoot, "displayName", 'CalendarWeekDays');
-(0, _defineProperty2["default"])(CalendarWeekDaysRoot, "style", style);
-(0, _defineProperty2["default"])(CalendarWeekDaysRoot, "defaultProps", {
-  locale: 'en',
-  children: function children(_ref15) {
-    var days = _ref15.days;
-    return days.map(function (data, i) {
-      return /*#__PURE__*/_react["default"].createElement(CalendarWeekDays.Unit, (0, _extends2["default"])({
-        key: i
-      }, data));
     });
   }
+  setContext() {
+    return {
+      days: this.getDaysByWeek()
+    };
+  }
+  render() {
+    var _ref = this.asProps,
+      _ref6;
+    const SWeekDays = _baseComponents.Box;
+    const {
+      Children,
+      styles
+    } = this.asProps;
+    return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SWeekDays, _ref6.cn("SWeekDays", {
+      ...(0, _core.assignProps)({}, _ref)
+    }), /*#__PURE__*/_react.default.createElement(Children, _ref6.cn("Children", {})));
+  }
+}
+(0, _defineProperty2.default)(CalendarWeekDaysRoot, "displayName", 'CalendarWeekDays');
+(0, _defineProperty2.default)(CalendarWeekDaysRoot, "style", style);
+(0, _defineProperty2.default)(CalendarWeekDaysRoot, "defaultProps", {
+  locale: 'en',
+  children: ({
+    days
+  }) => days.map((data, i) => /*#__PURE__*/_react.default.createElement(CalendarWeekDays.Unit, (0, _extends2.default)({
+    key: i
+  }, data)))
 });
-function CalendarWeekUnit(_ref1) {
+function CalendarWeekUnit({
+  styles
+}) {
   var _ref2 = arguments[0],
     _ref7;
-  var styles = _ref1.styles;
-  var SWeekDay = _flexBox.Box;
-  return _ref7 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SWeekDay, _ref7.cn("SWeekDay", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-    "role": 'columnheader'
-  }, _ref2))));
+  const SWeekDay = _baseComponents.Box;
+  return _ref7 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SWeekDay, _ref7.cn("SWeekDay", {
+    ...(0, _core.assignProps)({
+      "role": 'columnheader'
+    }, _ref2)
+  }));
 }
 function resolveHighlighting(date, unit, highlighted) {
-  var highlighted0 = highlighted[0] ? (0, _dayjs["default"])(highlighted[0]) : null;
-  var highlighted1 = highlighted[1] ? (0, _dayjs["default"])(highlighted[1]) : highlighted0;
+  let highlighted0 = highlighted[0] ? (0, _dayjs.default)(highlighted[0]) : null;
+  let highlighted1 = highlighted[1] ? (0, _dayjs.default)(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'),
@@ -158,397 +136,362 @@ function resolveHighlighting(date, unit, highlighted) {
   };
 }
 function resolveSelecting(date, unit, value) {
-  var value0 = value[0] ? (0, _dayjs["default"])(value[0]) : null;
-  var value1 = value[1] ? (0, _dayjs["default"])(value[1]) : null;
-  var selected;
+  let value0 = value[0] ? (0, _dayjs.default)(value[0]) : null;
+  let value1 = value[1] ? (0, _dayjs.default)(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;
-    (0, _classCallCheck2["default"])(this, CalendarAbstract);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = (0, _callSuper2["default"])(this, CalendarAbstract, [].concat(args));
-    (0, _defineProperty2["default"])(_this, "today", new Date(new Date().setHours(0, 0, 0, 0)));
-    (0, _defineProperty2["default"])(_this, "handleMouseLeave", function () {
-      var highlighted = _this.asProps.highlighted;
-      (0, _fire["default"])(_this, 'onHighlightedChange', highlighted.length ? [highlighted[0]] : []);
+class CalendarAbstract extends _core.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "today", new Date(new Date().setHours(0, 0, 0, 0)));
+    (0, _defineProperty2.default)(this, "handleMouseLeave", () => {
+      const {
+        highlighted
+      } = this.asProps;
+      (0, _fire.default)(this, 'onHighlightedChange', highlighted.length ? [highlighted[0]] : []);
     });
-    (0, _defineProperty2["default"])(_this, "formatter", _formatDate.formatDDMMYY);
-    return _this;
+    (0, _defineProperty2.default)(this, "formatter", _formatDate.formatDDMMYY);
   }
-  (0, _inherits2["default"])(CalendarAbstract, _Component2);
-  return (0, _createClass2["default"])(CalendarAbstract, [{
-    key: "createUnit",
-    value: function createUnit(_ref12, unit) {
-      var _this2 = this;
-      var date = _ref12.date,
-        other = (0, _objectWithoutProperties2["default"])(_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((0, _includesDate.includesDate)(date, unit));
-      return (0, _objectSpread2["default"])({
-        'date': (0, _formatDate.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((0, _includesDate.includesDate)(date, unit));
+    return {
+      'date': (0, _formatDate.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') {
+          (0, _fire.default)(this, 'onCompareHighlightedChange', highlighted);
+        } else {
+          (0, _fire.default)(this, 'onHighlightedChange', highlighted);
+        }
+        (0, _fire.default)(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') {
-            (0, _fire["default"])(_this2, 'onCompareHighlightedChange', highlighted);
+            (0, _fire.default)(this, 'onCompareHighlightedChange', highlighted);
           } else {
-            (0, _fire["default"])(_this2, 'onHighlightedChange', highlighted);
-          }
-          (0, _fire["default"])(_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') {
-              (0, _fire["default"])(_this2, 'onCompareHighlightedChange', _highlighted2);
-            } else {
-              (0, _fire["default"])(_this2, 'onHighlightedChange', _highlighted2);
-            }
+            (0, _fire.default)(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;
     }
-  }]);
-}(_core.Component);
-(0, _defineProperty2["default"])(CalendarAbstract, "style", style);
-function CalendarUnit(_ref14) {
+    return description;
+  }
+}
+(0, _defineProperty2.default)(CalendarAbstract, "style", style);
+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 = _flexBox.Box;
-  return _ref8 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SCalendarUnit, _ref8.cn("SCalendarUnit", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-    "use:disabled": disabled || outdated || !date,
-    "aria-hidden": !date,
-    "aria-label": _long2 || date,
-    "use:tabIndex": highlighted ? 0 : -1
-  }, _ref3))));
+  const SCalendarUnit = _baseComponents.Box;
+  return _ref8 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SCalendarUnit, _ref8.cn("SCalendarUnit", {
+    ...(0, _core.assignProps)({
+      "use:disabled": disabled || outdated || !date,
+      "aria-hidden": !date,
+      "aria-label": long || date,
+      "use:tabIndex": highlighted ? 0 : -1
+    }, _ref3)
+  }));
 }
-CalendarUnit.enhance = [(0, _keyboardFocusEnhance["default"])()];
-var CalendarDaysRoot = /*#__PURE__*/function (_CalendarAbstract2) {
-  function CalendarDaysRoot() {
-    (0, _classCallCheck2["default"])(this, CalendarDaysRoot);
-    return (0, _callSuper2["default"])(this, CalendarDaysRoot, arguments);
-  }
-  (0, _inherits2["default"])(CalendarDaysRoot, _CalendarAbstract2);
-  return (0, _createClass2["default"])(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 = (0, _dayjs["default"])(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 = (0, _dayjs.default)(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((0, _toConsumableArray2["default"])(prevMonthDays), (0, _toConsumableArray2["default"])(monthDays), (0, _toConsumableArray2["default"])(nextMonthDays));
-    }
-  }, {
-    key: "setContext",
-    value: function setContext() {
-      return {
-        days: this.getDaysByMonth()
-      };
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref4 = this.asProps,
-        _ref9;
-      var SCalendar = _flexBox.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 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SCalendar, _ref9.cn("SCalendar", (0, _objectSpread2["default"])({}, (0, _core.assignProps)((0, _objectSpread2["default"])({}, this.getRootProps()), _ref4))), /*#__PURE__*/_react["default"].createElement(CalendarWeekDays, _ref9.cn("CalendarWeekDays", {
-        "locale": locale,
-        "role": 'row'
-      })), /*#__PURE__*/_react["default"].createElement(SGridDays, _ref9.cn("SGridDays", {
-        "onMouseLeave": this.handleMouseLeave,
-        "role": 'row'
-      }), /*#__PURE__*/_react["default"].createElement(Children, _ref9.cn("Children", {}))), /*#__PURE__*/_react["default"].createElement(_flexBox.ScreenReaderOnly, _ref9.cn("ScreenReaderOnly", {
-        "role": 'row'
-      }), /*#__PURE__*/_react["default"].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);
-(0, _defineProperty2["default"])(CalendarDaysRoot, "displayName", 'CalendarDays');
-(0, _defineProperty2["default"])(CalendarDaysRoot, "defaultProps", {
+    return [...prevMonthDays, ...monthDays, ...nextMonthDays];
+  }
+  setContext() {
+    return {
+      days: this.getDaysByMonth()
+    };
+  }
+  render() {
+    var _ref4 = this.asProps,
+      _ref9;
+    const SCalendar = _baseComponents.Box;
+    const SGridDays = 'div';
+    const {
+      Children,
+      styles,
+      locale
+    } = this.asProps;
+    const description = this.describeValue();
+    return _ref9 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SCalendar, _ref9.cn("SCalendar", {
+      ...(0, _core.assignProps)({
+        ...this.getRootProps()
+      }, _ref4)
+    }), /*#__PURE__*/_react.default.createElement(CalendarWeekDays, _ref9.cn("CalendarWeekDays", {
+      "locale": locale,
+      "role": 'row'
+    })), /*#__PURE__*/_react.default.createElement(SGridDays, _ref9.cn("SGridDays", {
+      "onMouseLeave": this.handleMouseLeave,
+      "role": 'row'
+    }), /*#__PURE__*/_react.default.createElement(Children, _ref9.cn("Children", {}))), /*#__PURE__*/_react.default.createElement(_baseComponents.ScreenReaderOnly, _ref9.cn("ScreenReaderOnly", {
+      "role": 'row'
+    }), /*#__PURE__*/_react.default.createElement("span", _ref9.cn("span", {
+      "aria-live": 'polite',
+      "role": 'gridcell'
+    }), description)));
+  }
+}
+(0, _defineProperty2.default)(CalendarDaysRoot, "displayName", 'CalendarDays');
+(0, _defineProperty2.default)(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["default"].createElement(CalendarDays.Unit, (0, _extends2["default"])({
-        key: i
-      }, data));
-    });
-  }
+  children: ({
+    days
+  }) => days.map((data, i) => /*#__PURE__*/_react.default.createElement(CalendarDays.Unit, (0, _extends2.default)({
+    key: i
+  }, data)))
 });
-var CalendarMonthsRoot = /*#__PURE__*/function (_CalendarAbstract3) {
-  function CalendarMonthsRoot() {
-    var _this5;
-    (0, _classCallCheck2["default"])(this, CalendarMonthsRoot);
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-    _this5 = (0, _callSuper2["default"])(this, CalendarMonthsRoot, [].concat(args));
-    (0, _defineProperty2["default"])(_this5, "formatter", _formatDate.formatMMYY);
-    return _this5;
+class CalendarMonthsRoot extends CalendarAbstract {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "formatter", _formatDate.formatMMYY);
   }
-  (0, _inherits2["default"])(CalendarMonthsRoot, _CalendarAbstract3);
-  return (0, _createClass2["default"])(CalendarMonthsRoot, [{
-    key: "getMonthsByYear",
-    value: function getMonthsByYear() {
-      var _this6 = this;
-      var _this$asProps6 = this.asProps,
-        displayedPeriod = _this$asProps6.displayedPeriod,
-        locale = _this$asProps6.locale;
-      var date = (0, _dayjs["default"])(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 = _flexBox.Box;
-      var SGridMonths = 'div';
-      var _this$asProps7 = this.asProps,
-        Children = _this$asProps7.Children,
-        styles = _this$asProps7.styles;
-      var description = this.describeValue();
-      return _ref0 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SCalendar, _ref0.cn("SCalendar", (0, _objectSpread2["default"])({}, (0, _core.assignProps)((0, _objectSpread2["default"])({}, this.getRootProps()), _ref5))), /*#__PURE__*/_react["default"].createElement(SGridMonths, _ref0.cn("SGridMonths", {
-        "onMouseLeave": this.handleMouseLeave,
-        "role": 'row'
-      }), /*#__PURE__*/_react["default"].createElement(Children, _ref0.cn("Children", {}))), /*#__PURE__*/_react["default"].createElement(_flexBox.ScreenReaderOnly, _ref0.cn("ScreenReaderOnly", {
-        "role": 'row'
-      }), /*#__PURE__*/_react["default"].createElement("span", _ref0.cn("span", {
-        "aria-live": 'polite',
-        "role": 'gridcell'
-      }), description)));
-    }
-  }]);
-}(CalendarAbstract);
-(0, _defineProperty2["default"])(CalendarMonthsRoot, "displayName", 'CalendarMonths');
-(0, _defineProperty2["default"])(CalendarMonthsRoot, "defaultProps", {
-  locale: 'en',
-  children: function children(_ref17) {
-    var months = _ref17.months;
-    return months.map(function (data, i) {
-      return /*#__PURE__*/_react["default"].createElement(CalendarMonths.Unit, (0, _extends2["default"])({
-        key: i
-      }, data));
+  getMonthsByYear() {
+    const {
+      displayedPeriod,
+      locale
+    } = this.asProps;
+    let date = (0, _dayjs.default)(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;
     });
   }
+  setContext() {
+    return {
+      months: this.getMonthsByYear()
+    };
+  }
+  render() {
+    var _ref5 = this.asProps,
+      _ref0;
+    const SCalendar = _baseComponents.Box;
+    const SGridMonths = 'div';
+    const {
+      Children,
+      styles
+    } = this.asProps;
+    const description = this.describeValue();
+    return _ref0 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SCalendar, _ref0.cn("SCalendar", {
+      ...(0, _core.assignProps)({
+        ...this.getRootProps()
+      }, _ref5)
+    }), /*#__PURE__*/_react.default.createElement(SGridMonths, _ref0.cn("SGridMonths", {
+      "onMouseLeave": this.handleMouseLeave,
+      "role": 'row'
+    }), /*#__PURE__*/_react.default.createElement(Children, _ref0.cn("Children", {}))), /*#__PURE__*/_react.default.createElement(_baseComponents.ScreenReaderOnly, _ref0.cn("ScreenReaderOnly", {
+      "role": 'row'
+    }), /*#__PURE__*/_react.default.createElement("span", _ref0.cn("span", {
+      "aria-live": 'polite',
+      "role": 'gridcell'
+    }), description)));
+  }
+}
+(0, _defineProperty2.default)(CalendarMonthsRoot, "displayName", 'CalendarMonths');
+(0, _defineProperty2.default)(CalendarMonthsRoot, "defaultProps", {
+  locale: 'en',
+  children: ({
+    months
+  }) => months.map((data, i) => /*#__PURE__*/_react.default.createElement(CalendarMonths.Unit, (0, _extends2.default)({
+    key: i
+  }, data)))
 });
-var CalendarWeekDays = exports.CalendarWeekDays = (0, _core.createComponent)(CalendarWeekDaysRoot, {
+const CalendarWeekDays = exports.CalendarWeekDays = (0, _core.createComponent)(CalendarWeekDaysRoot, {
   Unit: CalendarWeekUnit
 });
-var CalendarDays = exports.CalendarDays = (0, _core.createComponent)(CalendarDaysRoot, {
+const CalendarDays = exports.CalendarDays = (0, _core.createComponent)(CalendarDaysRoot, {
   Unit: CalendarUnit
 });
-var CalendarMonths = exports.CalendarMonths = (0, _core.createComponent)(CalendarMonthsRoot, {
+const CalendarMonths = exports.CalendarMonths = (0, _core.createComponent)(CalendarMonthsRoot, {
   Unit: CalendarUnit
 });
 //# sourceMappingURL=Calendar.js.map