@newskit-render/shared-components 4.3.0 → 4.4.0

package/dist/cjs/Calendar/Calendar.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
-import 'react-dates/initialize';
 import { CalendarRangePickerProps } from './types';
 export declare const Calendar: React.FC<CalendarRangePickerProps>;

package/dist/cjs/Calendar/Calendar.js

@@ -33,36 +33,231 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Calendar = void 0;
 var react_1 = __importStar(require("react"));
-var react_dates_1 = require("react-dates");
-require("react-dates/initialize");
-var ChevronRight_1 = require("@emotion-icons/material/ChevronRight");
+var react_datepicker_1 = __importDefault(require("react-datepicker"));
 var newskit_1 = require("newskit");
+var ChevronRight_1 = require("@emotion-icons/material/ChevronRight");
 var CalendarStylesTheme_1 = require("./CalendarStylesTheme");
 var defaults_1 = require("./defaults");
+var types_1 = require("./types");
+var utils_1 = require("../utils");
+// eslint-disable-next-line
+var dateInputValidationPattern = /^[0-9\/]+$/; // Checks for numbers and slashes
 var IconFilledChevronRight = (0, newskit_1.toNewsKitIcon)(ChevronRight_1.ChevronRight);
 var Calendar = function (_a) {
-    var _b = _a.overrides, overrides = _b === void 0 ? defaults_1.calendarDefaults : _b, startDate = _a.startDate, endDate = _a.endDate, numberOfMonths = _a.numberOfMonths, daySize = _a.daySize, setDates = _a.setDates, isFocused = _a.isFocused;
-    var _c = (0, react_1.useState)(null), focusedInput = _c[0], setFocusedInput = _c[1];
-    var breakpoint = (0, newskit_1.useBreakpointKey)();
-    var isMobile = breakpoint === 'xs' || breakpoint === 'sm';
-    return (react_1.default.createElement(CalendarStylesTheme_1.CalendarStyles, __assign({}, overrides),
-        react_1.default.createElement(react_dates_1.DateRangePicker, { block: true, noBorder: true, daySize: daySize, numberOfMonths: numberOfMonths, displayFormat: "DD/MM/YYYY", orientation: isMobile ? 'vertical' : 'horizontal', startDateId: "startDate", endDateId: "endDate", startDate: (0, react_dates_1.toMomentObject)(startDate), endDate: (0, react_dates_1.toMomentObject)(endDate), onDatesChange: function (_a) {
-                var startDate = _a.startDate, endDate = _a.endDate;
-                var start = startDate ? startDate.toDate() : null;
-                var end = endDate ? endDate.toDate() : null;
-                setDates(start, end);
-            }, focusedInput: focusedInput, onFocusChange: function (focusedInput) {
-                if (isFocused) {
-                    isFocused(focusedInput);
-                }
-                setFocusedInput(focusedInput);
-            }, customArrowIcon: react_1.default.createElement(IconFilledChevronRight, { overrides: {
-                    size: 'iconSize020',
-                    stylePreset: 'iconCustom',
-                } }) })));
+    var _b = _a.overrides, overrides = _b === void 0 ? defaults_1.calendarDefaults : _b, startDate = _a.startDate, endDate = _a.endDate, 
+    /* istanbul ignore next */
+    _c = _a.numberOfMonths, 
+    /* istanbul ignore next */
+    numberOfMonths = _c === void 0 ? 2 : _c, setDates = _a.setDates;
+    var today = new Date();
+    today.setHours(0, 0, 0, 0); // For strict date comparison
+    var _d = (0, react_1.useState)(false), calendarVisible = _d[0], setCalendarVisible = _d[1];
+    var _e = (0, react_1.useState)(''), start = _e[0], setStart = _e[1];
+    var _f = (0, react_1.useState)(''), end = _f[0], setEnd = _f[1];
+    var _g = (0, react_1.useState)(''), focusedInputName = _g[0], setFocusedInputName = _g[1];
+    var _h = (0, react_1.useState)(false), isMonthWithSixRows = _h[0], setIsMonthWithSixRows = _h[1];
+    var startDateInputRef = (0, react_1.useRef)(null);
+    var endDateInputRef = (0, react_1.useRef)(null);
+    var calendarStylesRef = (0, react_1.useRef)(null);
+    var datePickerRef = (0, react_1.useRef)(null);
+    var handleDatePickerChange = function (dates) {
+        var selectedStart = dates[0], selectedEnd = dates[1];
+        if (focusedInputName === types_1.DateRangeInputIds.start) {
+            if (endDate && selectedStart > endDate) {
+                setDates(selectedStart, null);
+            }
+            else {
+                setDates(selectedStart, endDate);
+            }
+            /* istanbul ignore next */
+            if (endDateInputRef === null || endDateInputRef === void 0 ? void 0 : endDateInputRef.current)
+                endDateInputRef.current.focus();
+            return;
+        }
+        if (!startDate && !selectedEnd) {
+            setDates(today, selectedStart);
+            setFocusedInputName('');
+            setCalendarVisible(false);
+            return;
+        }
+        var newEndDate = selectedEnd || selectedStart;
+        if (startDate && newEndDate < startDate) {
+            setDates(today, newEndDate);
+            /* istanbul ignore next */
+            if (startDateInputRef === null || startDateInputRef === void 0 ? void 0 : startDateInputRef.current)
+                startDateInputRef.current.focus();
+            return;
+        }
+        setDates(startDate, newEndDate);
+        setCalendarVisible(false);
+        setFocusedInputName('');
+    };
+    var handleDateInputFocus = function (ev) {
+        if (ev.target.id === types_1.DateRangeInputIds.start) {
+            setFocusedInputName(types_1.DateRangeInputIds.start);
+        }
+        else {
+            setFocusedInputName(types_1.DateRangeInputIds.end);
+        }
+        if (!calendarVisible) {
+            setCalendarVisible(true);
+        }
+    };
+    var handleEndDateInputChange = function (ev) {
+        var value = ev.target.value;
+        if (!dateInputValidationPattern.test(value))
+            return;
+        setEnd(value);
+        var date = (0, utils_1.compareAndFormatDate)(today, value, startDate);
+        if (date) {
+            setDates(startDate, date);
+            setCalendarVisible(false);
+            return;
+        }
+        setDates(startDate, null);
+    };
+    var handleStartDateInputChange = function (ev) {
+        var value = ev.target.value;
+        if (!dateInputValidationPattern.test(value))
+            return;
+        setStart(value);
+        var date = (0, utils_1.compareAndFormatDate)(today, value);
+        if (date) {
+            setDates(date, endDate);
+            setCalendarVisible(false);
+            /* istanbul ignore next */
+            if (endDateInputRef === null || endDateInputRef === void 0 ? void 0 : endDateInputRef.current)
+                endDateInputRef.current.focus();
+            return;
+        }
+        setDates(null, endDate);
+    };
+    var handleMonthRowsCalculation = function () {
+        var _a, _b;
+        var monthElements = document.querySelectorAll('.react-datepicker__month');
+        /* istanbul ignore next */
+        if (monthElements &&
+            monthElements.length &&
+            (((_a = monthElements[0]) === null || _a === void 0 ? void 0 : _a.clientHeight) > 190 ||
+                ((_b = monthElements[1]) === null || _b === void 0 ? void 0 : _b.clientHeight) > 190)) {
+            setIsMonthWithSixRows(true);
+            return;
+        }
+        setIsMonthWithSixRows(false);
+    };
+    var handleOnMonthChange = function () {
+        if (!document)
+            return;
+        handleMonthRowsCalculation();
+    };
+    var handlePageClick = function (ev) {
+        var _a, _b;
+        /* istanbul ignore next */
+        if (ev.target.nodeName === 'path')
+            return;
+        if (calendarStylesRef.current &&
+            !((_a = ev.target.className) === null || _a === void 0 ? void 0 : _a.includes('react-datepicker')) &&
+            !((_b = calendarStylesRef === null || calendarStylesRef === void 0 ? void 0 : calendarStylesRef.current) === null || _b === void 0 ? void 0 : _b.contains(ev.target))) {
+            setCalendarVisible(false);
+            setFocusedInputName('');
+        }
+    };
+    var handlePageTabKey = function (ev) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!((calendarStylesRef === null || calendarStylesRef === void 0 ? void 0 : calendarStylesRef.current) && ev.key === 'Tab')) return [3 /*break*/, 2];
+                    // We need this Promise because the document.activeElement is showing the previous focused element otherwise
+                    // setTimeout without time is moving the execution of this function in the end of the call stack
+                    // and document.activeElement is updated with the latest focused element
+                    return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve); })];
+                case 1:
+                    // We need this Promise because the document.activeElement is showing the previous focused element otherwise
+                    // setTimeout without time is moving the execution of this function in the end of the call stack
+                    // and document.activeElement is updated with the latest focused element
+                    _a.sent();
+                    if (!calendarStylesRef.current.contains(document.activeElement)) {
+                        setCalendarVisible(false);
+                    }
+                    _a.label = 2;
+                case 2: return [2 /*return*/];
+            }
+        });
+    }); };
+    (0, react_1.useEffect)(function () {
+        setStart((0, utils_1.formatDateToDDMMYYYY)(startDate) || '');
+        setEnd((0, utils_1.formatDateToDDMMYYYY)(endDate) || '');
+    }, [startDate, endDate]);
+    (0, react_1.useEffect)(function () {
+        if (calendarVisible)
+            handleMonthRowsCalculation();
+    }, [calendarVisible]);
+    (0, react_1.useEffect)(function () {
+        document.addEventListener('click', handlePageClick);
+        document.addEventListener('keydown', handlePageTabKey);
+        return function () {
+            document.removeEventListener('click', handlePageClick);
+            document.removeEventListener('keydown', handlePageTabKey);
+        };
+    }, []);
+    return (react_1.default.createElement(CalendarStylesTheme_1.CalendarStyles, __assign({}, overrides, { ref: calendarStylesRef, calendarVisible: calendarVisible, isMonthWithSixRows: isMonthWithSixRows }),
+        react_1.default.createElement(CalendarStylesTheme_1.InputsWrapper, __assign({}, overrides),
+            react_1.default.createElement("div", { className: "input-container" },
+                react_1.default.createElement("input", { value: start, onFocus: handleDateInputFocus, onChange: handleStartDateInputChange, id: types_1.DateRangeInputIds.start, name: types_1.DateRangeInputIds.start, ref: startDateInputRef, className: "react-datepicker-input", placeholder: "Start Date", autoComplete: "off", "aria-label": "Start Date", type: "text" }),
+                calendarVisible && focusedInputName === types_1.DateRangeInputIds.start && (react_1.default.createElement("div", { className: "chevron" }))),
+            react_1.default.createElement("div", { className: "react-datepicker-input-arrow" },
+                react_1.default.createElement(IconFilledChevronRight, { overrides: {
+                        size: 'iconSize020',
+                        stylePreset: 'iconCustom',
+                    } })),
+            react_1.default.createElement("div", { className: "input-container" },
+                react_1.default.createElement("input", { value: end, onFocus: handleDateInputFocus, onChange: handleEndDateInputChange, id: types_1.DateRangeInputIds.end, name: types_1.DateRangeInputIds.end, ref: endDateInputRef, className: "react-datepicker-input", placeholder: "End Date", autoComplete: "off", "aria-label": "End Date", type: "text" }),
+                calendarVisible && focusedInputName === types_1.DateRangeInputIds.end && (react_1.default.createElement("div", { className: "chevron" })))),
+        react_1.default.createElement(CalendarStylesTheme_1.CalendarWrapper, null,
+            react_1.default.createElement(CalendarStylesTheme_1.Container, __assign({ className: "calendar-custom-container", stylePreset: overrides.calendar.calendarCustomContainer.stylePreset }, overrides),
+                react_1.default.createElement(react_datepicker_1.default, { selected: startDate, startDate: startDate, endDate: endDate, monthsShown: numberOfMonths, selectsRange: true, inline: true, minDate: today, onChange: handleDatePickerChange, onMonthChange: handleOnMonthChange, disabledKeyboardNavigation: true, showDisabledMonthNavigation: true, ref: datePickerRef })))));
 };
 exports.Calendar = Calendar;
 //# sourceMappingURL=Calendar.js.map

package/dist/cjs/Calendar/Calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../../src/Calendar/Calendar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAuC;AACvC,2CAAgF;AAChF,kCAA+B;AAC/B,qEAAyF;AACzF,mCAAyD;AACzD,6DAAsD;AACtD,uCAA6C;AAG7C,IAAM,sBAAsB,GAAG,IAAA,uBAAa,EAAC,2BAAkB,CAAC,CAAA;AACzD,IAAM,QAAQ,GAAuC,UAAC,EAQ5D;QAPC,iBAA4B,EAA5B,SAAS,mBAAG,2BAAgB,KAAA,EAC5B,SAAS,eAAA,EACT,OAAO,aAAA,EACP,cAAc,oBAAA,EACd,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,SAAS,eAAA;IAEH,IAAA,KAAkC,IAAA,gBAAQ,EAC9C,IAAI,CACL,EAFM,YAAY,QAAA,EAAE,eAAe,QAEnC,CAAA;IACD,IAAM,UAAU,GAAG,IAAA,0BAAgB,GAAE,CAAA;IACrC,IAAM,QAAQ,GAAG,UAAU,KAAK,IAAI,IAAI,UAAU,KAAK,IAAI,CAAA;IAC3D,OAAO,CACL,8BAAC,oCAAc,eAAK,SAAS;QAC3B,8BAAC,6BAAe,IACd,KAAK,QACL,QAAQ,QACR,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAC,YAAY,EAC1B,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,EACjD,WAAW,EAAC,WAAW,EACvB,SAAS,EAAC,SAAS,EACnB,SAAS,EAAE,IAAA,4BAAc,EAAC,SAAS,CAAC,EACpC,OAAO,EAAE,IAAA,4BAAc,EAAC,OAAO,CAAC,EAChC,aAAa,EAAE,UAAC,EAAsB;oBAApB,SAAS,eAAA,EAAE,OAAO,aAAA;gBAClC,IAAM,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;gBACnD,IAAM,GAAG,GAAG,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;gBAC7C,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;YACtB,CAAC,EACD,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,UAAC,YAAY;gBAC1B,IAAI,SAAS,EAAE;oBACb,SAAS,CAAC,YAAY,CAAC,CAAA;iBACxB;gBACD,eAAe,CAAC,YAAY,CAAC,CAAA;YAC/B,CAAC,EACD,eAAe,EACb,8BAAC,sBAAsB,IACrB,SAAS,EAAE;oBACT,IAAI,EAAE,aAAa;oBACnB,WAAW,EAAE,YAAY;iBAC1B,GACD,GAEJ,CACa,CAClB,CAAA;AACH,CAAC,CAAA;AAlDY,QAAA,QAAQ,YAkDpB"}
+{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/Calendar/CalendarStylesTheme.d.ts

@@ -1,5 +1,16 @@
 /// <reference types="react" />
 import { CalendarStylesProps } from './types';
+export declare const CalendarWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Container: import("@emotion/styled").StyledComponent<import("newskit").BlockProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & CalendarStylesProps, {}, {}>;
+export declare const InputsWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & CalendarStylesProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CalendarStyles: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/dist/cjs/Calendar/CalendarStylesTheme.js

@@ -4,125 +4,108 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CalendarStyles = void 0;
+exports.CalendarStyles = exports.InputsWrapper = exports.Container = exports.CalendarWrapper = void 0;
 var newskit_1 = require("newskit");
-exports.CalendarStyles = newskit_1.styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  max-width: 555px;\n  ", "\n  .PresetDateRangePicker_panel {\n    padding: 0 22px 11px;\n  }\n  .PresetDateRangePicker_button {\n    position: relative;\n    height: 100%;\n    text-align: center;\n    background: 0 0;\n    border: 2px solid #00a699;\n    color: #00a699;\n    padding: 4px 12px;\n    margin-right: 8px;\n    font: inherit;\n    font-weight: 700;\n    line-height: normal;\n    overflow: visible;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n    cursor: pointer;\n  }\n  .PresetDateRangePicker_button:active {\n    outline: 0;\n  }\n  .PresetDateRangePicker_button__selected {\n    color: #fff;\n    background: #00a699;\n  }\n  .SingleDatePickerInput {\n    display: inline-block;\n    background-color: #fff;\n  }\n  .SingleDatePickerInput__withBorder {\n    border-radius: 2px;\n    border: 1px solid #dbdbdb;\n  }\n  .SingleDatePickerInput__rtl {\n    direction: rtl;\n  }\n  .SingleDatePickerInput__disabled {\n    background-color: #f2f2f2;\n  }\n  .SingleDatePickerInput__block {\n    display: block;\n  }\n  .SingleDatePickerInput__showClearDate {\n    padding-right: 30px;\n  }\n  .SingleDatePickerInput_clearDate {\n    background: 0 0;\n    border: 0;\n    color: inherit;\n    font: inherit;\n    line-height: normal;\n    overflow: visible;\n    cursor: pointer;\n    padding: 10px;\n    margin: 0 10px 0 5px;\n    position: absolute;\n    right: 0;\n    top: 50%;\n    -webkit-transform: translateY(-50%);\n    -ms-transform: translateY(-50%);\n    transform: translateY(-50%);\n  }\n  .SingleDatePickerInput_clearDate__default:focus,\n  .SingleDatePickerInput_clearDate__default:hover {\n    background: #dbdbdb;\n    border-radius: 50%;\n  }\n  .SingleDatePickerInput_clearDate__small {\n    padding: 6px;\n  }\n  .SingleDatePickerInput_clearDate__hide {\n    visibility: hidden;\n  }\n  .SingleDatePickerInput_clearDate_svg {\n    fill: #82888a;\n    height: 12px;\n    width: 15px;\n    vertical-align: middle;\n  }\n  .SingleDatePickerInput_clearDate_svg__small {\n    height: 9px;\n  }\n  .SingleDatePickerInput_calendarIcon {\n    background: 0 0;\n    border: 0;\n    color: inherit;\n    font: inherit;\n    line-height: normal;\n    overflow: visible;\n    cursor: pointer;\n    display: inline-block;\n    vertical-align: middle;\n    padding: 10px;\n    margin: 0 5px 0 10px;\n  }\n  .SingleDatePickerInput_calendarIcon_svg {\n    fill: #82888a;\n    height: 15px;\n    width: 14px;\n    vertical-align: middle;\n  }\n  .SingleDatePicker {\n    position: relative;\n    display: inline-block;\n  }\n  .SingleDatePicker__block {\n    display: block;\n  }\n  .SingleDatePicker_picker {\n    z-index: 1;\n    background-color: #fff;\n    position: absolute;\n  }\n  .SingleDatePicker_picker__rtl {\n    direction: rtl;\n  }\n  .SingleDatePicker_picker__directionLeft {\n    left: 0;\n  }\n  .SingleDatePicker_picker__directionRight {\n    right: 0;\n  }\n  .SingleDatePicker_picker__portal {\n    background-color: rgba(0, 0, 0, 0.3);\n    position: fixed;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n  }\n  .SingleDatePicker_picker__fullScreenPortal {\n    background-color: #fff;\n  }\n  .SingleDatePicker_closeButton {\n    background: 0 0;\n    border: 0;\n    color: inherit;\n    font: inherit;\n    line-height: normal;\n    overflow: visible;\n    cursor: pointer;\n    position: absolute;\n    top: 0;\n    right: 0;\n    padding: 15px;\n    z-index: 2;\n  }\n  .SingleDatePicker_closeButton:focus,\n  .SingleDatePicker_closeButton:hover {\n    color: darken(#cacccd, 10%);\n    text-decoration: none;\n  }\n  .SingleDatePicker_closeButton_svg {\n    height: 15px;\n    width: 15px;\n    fill: #cacccd;\n  }\n  .DayPickerKeyboardShortcuts_buttonReset {\n    background: 0 0;\n    border: 0;\n    border-radius: 0;\n    color: inherit;\n    font: inherit;\n    line-height: normal;\n    overflow: visible;\n    padding: 0;\n    cursor: pointer;\n    font-size: 14px;\n    display: none;\n  }\n  .DayPickerKeyboardShortcuts_buttonReset:active {\n    outline: 0;\n  }\n  .DayPickerKeyboardShortcuts_show {\n    width: 33px;\n    height: 26px;\n    position: absolute;\n    z-index: 2;\n  }\n  .DayPickerKeyboardShortcuts_show::before {\n    content: '';\n    display: block;\n    position: absolute;\n  }\n  .DayPickerKeyboardShortcuts_show__bottomRight {\n    bottom: 0;\n    right: 0;\n  }\n  .DayPickerKeyboardShortcuts_show__bottomRight::before {\n    border-top: 26px solid transparent;\n    border-right: 33px solid #00a699;\n    bottom: 0;\n    right: 0;\n  }\n  .DayPickerKeyboardShortcuts_show__bottomRight:hover::before {\n    border-right: 33px solid #008489;\n  }\n  .DayPickerKeyboardShortcuts_show__topRight {\n    top: 0;\n    right: 0;\n  }\n  .DayPickerKeyboardShortcuts_show__topRight::before {\n    border-bottom: 26px solid transparent;\n    border-right: 33px solid #00a699;\n    top: 0;\n    right: 0;\n  }\n  .DayPickerKeyboardShortcuts_show__topRight:hover::before {\n    border-right: 33px solid #008489;\n  }\n  .DayPickerKeyboardShortcuts_show__topLeft {\n    top: 0;\n    left: 0;\n  }\n  .DayPickerKeyboardShortcuts_show__topLeft::before {\n    border-bottom: 26px solid transparent;\n    border-left: 33px solid #00a699;\n    top: 0;\n    left: 0;\n  }\n  .DayPickerKeyboardShortcuts_show__topLeft:hover::before {\n    border-left: 33px solid #008489;\n  }\n  .DayPickerKeyboardShortcuts_showSpan {\n    color: #fff;\n    position: absolute;\n  }\n  .DayPickerKeyboardShortcuts_showSpan__bottomRight {\n    bottom: 0;\n    right: 5px;\n  }\n  .DayPickerKeyboardShortcuts_showSpan__topRight {\n    top: 1px;\n    right: 5px;\n  }\n  .DayPickerKeyboardShortcuts_showSpan__topLeft {\n    top: 1px;\n    left: 5px;\n  }\n  .DayPickerKeyboardShortcuts_panel {\n    overflow: auto;\n    background: #fff;\n    border: 1px solid #dbdbdb;\n    border-radius: 2px;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    left: 0;\n    z-index: 2;\n    padding: 22px;\n    margin: 33px;\n    text-align: left;\n  }\n  .DayPickerKeyboardShortcuts_title {\n    font-size: 16px;\n    font-weight: 700;\n    margin: 0;\n  }\n  .DayPickerKeyboardShortcuts_list {\n    list-style: none;\n    padding: 0;\n    font-size: 14px;\n  }\n  .DayPickerKeyboardShortcuts_close {\n    position: absolute;\n    right: 22px;\n    top: 22px;\n    z-index: 2;\n  }\n  .DayPickerKeyboardShortcuts_close:active {\n    outline: 0;\n  }\n  .DayPickerKeyboardShortcuts_closeSvg {\n    height: 15px;\n    width: 15px;\n    fill: #cacccd;\n  }\n  .DayPickerKeyboardShortcuts_closeSvg:focus,\n  .DayPickerKeyboardShortcuts_closeSvg:hover {\n    fill: #82888a;\n  }\n  .CalendarDay {\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n    cursor: pointer;\n    font-size: 14px;\n    text-align: center;\n    ", "\n  }\n  .CalendarDay:active {\n    outline: 0;\n  }\n  .CalendarDay__defaultCursor {\n    cursor: default;\n  }\n  .CalendarDay__default {\n    border: 0;\n    ", "\n    ", "\n  }\n  .CalendarDay__default:hover {\n    ", "\n    border: 0;\n    color: inherit;\n  }\n  .CalendarDay__hovered_offset {\n    background: #f4f5f5;\n    border: 1px double #e4e7e7;\n    color: inherit;\n  }\n  .CalendarDay__outside {\n    border: 0;\n    background: #fff;\n    color: #484848;\n  }\n  .CalendarDay__outside:hover {\n    border: 0;\n  }\n  .CalendarDay__blocked_minimum_nights {\n    background: #fff;\n    border: 1px solid #eceeee;\n    color: #cacccd;\n  }\n  .CalendarDay__blocked_minimum_nights:active,\n  .CalendarDay__blocked_minimum_nights:hover {\n    background: #fff;\n    color: #cacccd;\n  }\n  .CalendarDay__highlighted_calendar {\n    background: #ffe8bc;\n    color: #484848;\n  }\n  .CalendarDay__highlighted_calendar:active,\n  .CalendarDay__highlighted_calendar:hover {\n    background: #ffce71;\n    color: #484848;\n  }\n  .CalendarDay__selected_span {\n    ", "\n    border: none;\n    ", "\n  }\n  .CalendarDay__selected_span:active,\n  .CalendarDay__selected_span:hover {\n    ", "\n    border: none;\n    ", "\n  }\n  .CalendarDay__selected,\n  .CalendarDay__selected:active,\n  .CalendarDay__selected:hover {\n    ", "\n    border: none;\n    ", "\n  }\n  .CalendarDay__hovered_span,\n  .CalendarDay__hovered_span:hover {\n    ", "\n    border: none;\n  \n    ", "\n  }\n  .CalendarDay__hovered_span:active {\n    background: #80e8e0;\n    ", "\n    border: none;\n    color: #007a87;\n  }\n  .CalendarDay__blocked_calendar,\n  .CalendarDay__blocked_calendar:active,\n  .CalendarDay__blocked_calendar:hover {\n    border: 0;\n    ", "\n  }\n  .CalendarDay__blocked_out_of_range,\n  .CalendarDay__blocked_out_of_range:active,\n  .CalendarDay__blocked_out_of_range:hover {\n    background: #fff;\n    border: 0;\n    ", "\n    ", "\n  }\n  .CalendarDay__hovered_start_first_possible_end {\n    background: #eceeee;\n    border: 1px double #eceeee;\n  }\n  .CalendarDay__hovered_start_blocked_min_nights {\n    background: #eceeee;\n    border: 1px double #e4e7e7;\n  }\n  .CalendarMonth {\n    background: #fff;\n    text-align: center;\n    vertical-align: top;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    padding: 0 !important;\n    width; 100%;\n  }\n  .CalendarMonth_table {\n    border-collapse: collapse;\n    border-spacing: 0;\n    width: 100%;\n    max-width: 100%;\n    margin-left: 3px;\n  }\n  .CalendarMonth_verticalSpacing {\n    border-collapse: separate;\n  }\n  .CalendarMonth_caption {\n    ", "\n    ", "\n    width: 100%;\n    text-align: center;\n    padding-top: 22px;\n    padding-bottom: 37px;\n    caption-side: initial;\n  }\n  .CalendarMonth_caption__verticalScrollable {\n    padding-top: 12px;\n    padding-bottom: 7px;\n  }\n  .CalendarMonthGrid {\n    ", "\n    ", "\n    text-align: left;\n    z-index: 0;\n  }\n  .CalendarMonthGrid__animating {\n    z-index: 1;\n  }\n  .CalendarMonthGrid__horizontal {\n    position: absolute;\n    left: 0px;\n    margin: 4px;\n  }\n  .CalendarMonthGrid__vertical,\n  .CalendarMonthGrid__vertical_scrollable {\n    margin: 0 auto;\n  }\n  .CalendarMonthGrid_month__horizontal {\n    display: inline-block;\n    vertical-align: top;\n    min-height: 100%;\n  }\n  .CalendarMonthGrid_month__hideForAnimation {\n    position: absolute;\n    z-index: -1;\n    opacity: 0;\n    pointer-events: none;\n  }\n  .CalendarMonthGrid_month__hidden {\n    visibility: hidden;\n  }\n  .DayPickerNavigation {\n    display: flex;\n    justify-items: space-between;\n    position: relative;\n    z-index: 2;\n  }\n  .DayPickerNavigation__horizontal {\n    max-width: 555px;\n    height: 0;\n  }\n  .DayPickerNavigation__verticalScrollable_prevNav {\n    z-index: 1;\n  }\n  .DayPickerNavigation__verticalDefault {\n    position: absolute;\n    width: 100%;\n    height: 52px;\n    bottom: -72px;\n    left: 0;\n  }\n  .DayPickerNavigation__verticalScrollableDefault {\n    position: relative;\n  }\n  .DayPickerNavigation__bottom {\n    height: auto;\n  }\n  .DayPickerNavigation__bottomDefault {\n    -webkit-box-pack: justify;\n    -ms-flex-pack: justify;\n    display: -webkit-box;\n    display: -moz-box;\n    display: -ms-flexbox;\n    display: -webkit-flex;\n    display: flex;\n    -webkit-justify-content: space-between;\n    justify-content: space-between;\n  }\n  .DayPickerNavigation_button {\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    padding: 0;\n    margin: 0;\n  }\n  .DayPickerNavigation_button__default {\n    border: 0;\n    background-color: #fff;\n    ", "\n  }\n  .DayPickerNavigation_button__default:focus,\n  .DayPickerNavigation_button__default:hover {\n    border: 0;\n  }\n  .DayPickerNavigation_button__default:active {\n    background: #f2f2f2;\n  }\n  .DayPickerNavigation_button__disabled {\n    cursor: default;\n    border: 1px solid #f2f2f2;\n  }\n  .DayPickerNavigation_button__disabled:focus,\n  .DayPickerNavigation_button__disabled:hover {\n    border: 1px solid #f2f2f2;\n  }\n  .DayPickerNavigation_button__disabled:active {\n    background: 0 0;\n  }\n  .DayPickerNavigation_button__horizontalDefault {\n    position: absolute;\n    top: 18px;\n    line-height: 0.78;\n    border-radius: 3px;\n    padding: 9px;\n  }\n  .DayPickerNavigation_bottomButton__horizontalDefault {\n    position: static;\n    margin: -10px 22px 30px;\n  }\n  .DayPickerNavigation_leftButton__horizontalDefault {\n    left: 10px;\n  }\n  .DayPickerNavigation_rightButton__horizontalDefault {\n    right: 18px;\n  }\n  .DayPickerNavigation_button__verticalDefault {\n    background: #fff;\n    box-shadow: none;\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 45%;\n    padding: 8px 12px;\n    \n    ", "\n  }\n  .DayPickerNavigation_nextButton__verticalDefault {\n    ", "\n    ", "\n  }\n  .DayPickerNavigation_nextButton__verticalScrollableDefault,\n  .DayPickerNavigation_prevButton__verticalScrollableDefault {\n    width: 100%;\n  }\n  .DayPickerNavigation_svg__horizontal {\n    height: 19px;\n    width: 19px;\n    display: block;\n    ", "\n  }\n  .DayPickerNavigation_svg__vertical {\n    ", "\n    ", "\n    ", "\n  }\n  .DayPickerNavigation_svg__disabled {\n    fill: #f2f2f2;\n  }\n  .DayPicker {\n    background: #fff;\n    position: relative;\n    text-align: left;\n  }\n  .DayPicker__horizontal {\n    background: #fff;\n  }\n  .DayPicker__verticalScrollable {\n    height: 100%;\n  }\n  .DayPicker__hidden {\n    visibility: hidden;\n  }\n  .DayPicker__withBorder {\n    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.07);\n    ", "\n   \n  }\n  .DayPicker_portal__horizontal {\n    box-shadow: none;\n    position: absolute;\n    left: 50%;\n    top: 50%;\n  }\n  .DayPicker_portal__vertical {\n    position: initial;\n  }\n  .DayPicker_focusRegion {\n    outline: 0;\n  }\n  .DayPicker_calendarInfo__horizontal,\n  .DayPicker_wrapper__horizontal {\n    display: inline-block;\n    vertical-align: top;\n  }\n  .DayPicker_weekHeaders {\n    ", "\n    position: relative;\n  }\n  .DayPicker_weekHeaders__horizontal {\n    margin-left: 9px;\n  }\n  .DayPicker_weekHeader {\n    color: #757575;\n    position: absolute;\n    top: 62px;\n    z-index: 2;\n    text-align: left;\n  }\n  .DayPicker_weekHeader__vertical {\n    display: block;\n  }\n  .DayPicker_weekHeader__verticalScrollable {\n    top: 0;\n    display: table-row;\n    border-bottom: 1px solid #dbdbdb;\n    background: #fff;\n    margin-left: 0;\n    left: 0;\n    width: 100%;\n    text-align: center;\n  }\n  .DayPicker_weekHeader_ul {\n    list-style: none;\n    margin: 1px 0;\n    padding-left: 0;\n    padding-right: 0;\n    ", "\n  }\n  .DayPicker_weekHeader_li {\n    display: inline-block;\n    text-align: center;\n  }\n  .DayPicker_transitionContainer {\n    position: relative;\n    overflow: hidden;\n    border-radius: 3px;\n    ", "\n    max-width: 87%;\n  }\n  .DayPicker_transitionContainer__horizontal {\n    -webkit-transition: height 0.2s ease-in-out;\n    -moz-transition: height 0.2s ease-in-out;\n    transition: height 0.2s ease-in-out;\n  }\n  .DayPicker_transitionContainer__vertical {\n    min-height: 100%;\n  }\n  .DayPicker_transitionContainer__verticalScrollable {\n    padding-top: 20px;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    left: 0;\n    overflow-y: scroll\n  }\n  .DateInput {\n    margin: 0;\n    background: #fff;\n    position: relative;\n    display: inline-block;\n    width: 50%;\n    vertical-align: middle;\n  }\n  .DateInput__small {\n    width: 97px;\n  }\n  .DateInput__block {\n    box-sizing: border-box;\n    width: 100%;\n  }\n  .DateInput__disabled {\n    background: #f2f2f2;\n    color: #dbdbdb;\n  }\n  .DateInput_input {\n    box-sizing: border-box;\n    diplay: block;\n    width: 100%;\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n  .DateInput_input__small {\n    font-size: 15px;\n    line-height: 18px;\n    letter-spacing: 0.2px;\n    padding: 7px 7px 5px;\n  }\n  .DateInput_input__regular {\n    font-weight: auto;\n  }\n  .DateInput_input__readOnly {\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  .DateInput_input__focused {\n    width: 100%;\n    outline: 0;\n    background: #fff;\n\n  }\n  .DateInput_input__disabled {\n    background: #f2f2f2;\n    font-style: italic;\n  }\n  .DateInput_screenReaderMessage {\n    border: 0;\n    clip: rect(0, 0, 0, 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    width: 1px;\n  }\n  .DateInput_fang {\n    position: absolute;\n    width: 20px;\n    height: 10px;\n    left: 22px;\n    z-index: 2;\n    top: 57px !important;\n  }\n  .DateInput_fangShape {\n    fill: #fff;\n  }\n  .DateInput_fangStroke {\n    stroke: #919191;\n    fill: transparent;\n  }\n  .DateRangePickerInput {\n    ", "\n    background-color: #fff;\n    display: inline-block;\n  }\n  .DateRangePickerInput__disabled {\n    background: #f2f2f2;\n  }\n  .DateRangePickerInput__withBorder {\n    border-radius: 2px;\n    border: 1px solid #dbdbdb;\n  }\n  .DateRangePickerInput__rtl {\n    direction: rtl;\n  }\n  .DateRangePickerInput__block {\n    display: flex;\n    width: 100%;\n    justify-content: space-between;\n    align-items: center;\n  }\n  .DateRangePickerInput__showClearDates {\n    padding-right: 30px;\n  }\n  .DateRangePickerInput_arrow {\n    display: inline-block;\n    vertical-align: middle;\n    ", "\n    ", "\n    ", "\n  }\n  .DateRangePickerInput_arrow_svg {\n    vertical-align: middle;\n    ", "\n    height: 24px;\n    width: 24px;\n  }\n  .DateRangePickerInput_clearDates {\n    background: 0 0;\n    border: 0;\n    color: inherit;\n    font: inherit;\n    line-height: normal;\n    overflow: visible;\n    cursor: pointer;\n    padding: 10px;\n    margin: 0 10px 0 5px;\n    position: absolute;\n    right: 0;\n    top: 50%;\n    -webkit-transform: translateY(-50%);\n    -ms-transform: translateY(-50%);\n    transform: translateY(-50%);\n  }\n  .DateRangePickerInput_clearDates__small {\n    padding: 6px;\n  }\n  .DateRangePickerInput_clearDates_default:focus,\n  .DateRangePickerInput_clearDates_default:hover {\n    background: #dbdbdb;\n    border-radius: 50%;\n  }\n  .DateRangePickerInput_clearDates__hide {\n    visibility: hidden;\n  }\n  .DateRangePickerInput_clearDates_svg {\n    fill: #82888a;\n    height: 12px;\n    width: 15px;\n    vertical-align: middle;\n  }\n  .DateRangePickerInput_clearDates_svg__small {\n    height: 9px;\n  }\n  .DateRangePickerInput_calendarIcon {\n    background: 0 0;\n    border: 0;\n    color: inherit;\n    font: inherit;\n    line-height: normal;\n    overflow: visible;\n    cursor: pointer;\n    display: inline-block;\n    vertical-align: middle;\n    padding: 10px;\n    margin: 0 5px 0 10px;\n  }\n  .DateRangePickerInput_calendarIcon_svg {\n    fill: #82888a;\n    height: 15px;\n    width: 14px;\n    vertical-align: middle;\n  }\n  .DateRangePicker {\n    position: relative;\n    display: inline-block;\n  }\n  .DateRangePicker__block {\n    display: block;\n  }\n  .DateRangePicker_picker {\n    z-index: 1;\n    background-color: #fff;\n    position: absolute;\n    width: 100%;\n  }\n  .DateRangePicker_picker__rtl {\n    direction: rtl;\n  }\n  .DateRangePicker_picker__directionLeft {\n    left: 0;\n  }\n  .DateRangePicker_picker__directionRight {\n    right: 0;\n  }\n  .DateRangePicker_picker__portal {\n    background-color: rgba(0, 0, 0, 0.3);\n    position: fixed;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n  }\n  .DateRangePicker_picker__fullScreenPortal {\n    background-color: #fff;\n  }\n  .DateRangePicker_closeButton {\n    background: 0 0;\n    border: 0;\n    color: inherit;\n    font: inherit;\n    line-height: normal;\n    overflow: visible;\n    cursor: pointer;\n    position: absolute;\n    top: 0;\n    right: 0;\n    padding: 15px;\n    z-index: 2;\n  }\n  .DateRangePicker_closeButton:focus,\n  .DateRangePicker_closeButton:hover {\n    color: darken(#cacccd, 10%);\n    text-decoration: none;\n  }\n  .DateRangePicker_closeButton_svg {\n    height: 15px;\n    width: 15px;\n    fill: #cacccd;\n  }\n\n  div.DateRangePicker_picker > div {\n    max-width: 555px !important;\n  }\n\n  div.DayPicker_focusRegion {\n    max-width: 550px !important;\n  }\n  \n  div.DayPicker_focusRegion > div {\n    max-width: 550px !important;\n    display: flex;\n    justify-content: space-between;\n  }\n  div.DayPicker_transitionContainer > div {\n    max-width: 550px !important;\n  }\n\n  div.DayPicker_weekHeader {\n    padding: 0 !important;\n  }\n  div.DayPicker_weekHeaders.DayPicker_weekHeaders_1 > div {\n    margin: 0;\n    padding: 0;\n    display: block;\n    width: 100%;\n  }\n  div.DayPicker_weekHeaders.DayPicker_weekHeaders_1.DayPicker_weekHeaders__horizontal.DayPicker_weekHeaders__horizontal_2\n    > div:nth-of-type {\n    left: 270px !important;\n  }\n  .DayPicker_transitionContainer__vertical_2 > div {\n    width: 100% !important;\n  }\n  @media only screen and (max-width: 770px) {\n    .DayPicker_weekHeader_ul {\n      list-style: none;\n      margin: 1px 0;\n      padding-left: 0;\n      padding-right: 0;\n      display: flex;\n      justify-content: space-around;\n    }\n\n    div.DayPicker_weekHeader__vertical {\n      margin: 0 !important;\n      left: 0;\n    }\n\n    div.DayPicker_focusRegion.DayPicker_focusRegion_1 {\n      height: 600px;\n    }\n\n    .DayPicker__withBorder {\n      border-radius: 4px;\n    }\n  }\n"], ["\n  width: 100%;\n  max-width: 555px;\n  ", "\n  .PresetDateRangePicker_panel {\n    padding: 0 22px 11px;\n  }\n  .PresetDateRangePicker_button {\n    position: relative;\n    height: 100%;\n    text-align: center;\n    background: 0 0;\n    border: 2px solid #00a699;\n    color: #00a699;\n    padding: 4px 12px;\n    margin-right: 8px;\n    font: inherit;\n    font-weight: 700;\n    line-height: normal;\n    overflow: visible;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n    cursor: pointer;\n  }\n  .PresetDateRangePicker_button:active {\n    outline: 0;\n  }\n  .PresetDateRangePicker_button__selected {\n    color: #fff;\n    background: #00a699;\n  }\n  .SingleDatePickerInput {\n    display: inline-block;\n    background-color: #fff;\n  }\n  .SingleDatePickerInput__withBorder {\n    border-radius: 2px;\n    border: 1px solid #dbdbdb;\n  }\n  .SingleDatePickerInput__rtl {\n    direction: rtl;\n  }\n  .SingleDatePickerInput__disabled {\n    background-color: #f2f2f2;\n  }\n  .SingleDatePickerInput__block {\n    display: block;\n  }\n  .SingleDatePickerInput__showClearDate {\n    padding-right: 30px;\n  }\n  .SingleDatePickerInput_clearDate {\n    background: 0 0;\n    border: 0;\n    color: inherit;\n    font: inherit;\n    line-height: normal;\n    overflow: visible;\n    cursor: pointer;\n    padding: 10px;\n    margin: 0 10px 0 5px;\n    position: absolute;\n    right: 0;\n    top: 50%;\n    -webkit-transform: translateY(-50%);\n    -ms-transform: translateY(-50%);\n    transform: translateY(-50%);\n  }\n  .SingleDatePickerInput_clearDate__default:focus,\n  .SingleDatePickerInput_clearDate__default:hover {\n    background: #dbdbdb;\n    border-radius: 50%;\n  }\n  .SingleDatePickerInput_clearDate__small {\n    padding: 6px;\n  }\n  .SingleDatePickerInput_clearDate__hide {\n    visibility: hidden;\n  }\n  .SingleDatePickerInput_clearDate_svg {\n    fill: #82888a;\n    height: 12px;\n    width: 15px;\n    vertical-align: middle;\n  }\n  .SingleDatePickerInput_clearDate_svg__small {\n    height: 9px;\n  }\n  .SingleDatePickerInput_calendarIcon {\n    background: 0 0;\n    border: 0;\n    color: inherit;\n    font: inherit;\n    line-height: normal;\n    overflow: visible;\n    cursor: pointer;\n    display: inline-block;\n    vertical-align: middle;\n    padding: 10px;\n    margin: 0 5px 0 10px;\n  }\n  .SingleDatePickerInput_calendarIcon_svg {\n    fill: #82888a;\n    height: 15px;\n    width: 14px;\n    vertical-align: middle;\n  }\n  .SingleDatePicker {\n    position: relative;\n    display: inline-block;\n  }\n  .SingleDatePicker__block {\n    display: block;\n  }\n  .SingleDatePicker_picker {\n    z-index: 1;\n    background-color: #fff;\n    position: absolute;\n  }\n  .SingleDatePicker_picker__rtl {\n    direction: rtl;\n  }\n  .SingleDatePicker_picker__directionLeft {\n    left: 0;\n  }\n  .SingleDatePicker_picker__directionRight {\n    right: 0;\n  }\n  .SingleDatePicker_picker__portal {\n    background-color: rgba(0, 0, 0, 0.3);\n    position: fixed;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n  }\n  .SingleDatePicker_picker__fullScreenPortal {\n    background-color: #fff;\n  }\n  .SingleDatePicker_closeButton {\n    background: 0 0;\n    border: 0;\n    color: inherit;\n    font: inherit;\n    line-height: normal;\n    overflow: visible;\n    cursor: pointer;\n    position: absolute;\n    top: 0;\n    right: 0;\n    padding: 15px;\n    z-index: 2;\n  }\n  .SingleDatePicker_closeButton:focus,\n  .SingleDatePicker_closeButton:hover {\n    color: darken(#cacccd, 10%);\n    text-decoration: none;\n  }\n  .SingleDatePicker_closeButton_svg {\n    height: 15px;\n    width: 15px;\n    fill: #cacccd;\n  }\n  .DayPickerKeyboardShortcuts_buttonReset {\n    background: 0 0;\n    border: 0;\n    border-radius: 0;\n    color: inherit;\n    font: inherit;\n    line-height: normal;\n    overflow: visible;\n    padding: 0;\n    cursor: pointer;\n    font-size: 14px;\n    display: none;\n  }\n  .DayPickerKeyboardShortcuts_buttonReset:active {\n    outline: 0;\n  }\n  .DayPickerKeyboardShortcuts_show {\n    width: 33px;\n    height: 26px;\n    position: absolute;\n    z-index: 2;\n  }\n  .DayPickerKeyboardShortcuts_show::before {\n    content: '';\n    display: block;\n    position: absolute;\n  }\n  .DayPickerKeyboardShortcuts_show__bottomRight {\n    bottom: 0;\n    right: 0;\n  }\n  .DayPickerKeyboardShortcuts_show__bottomRight::before {\n    border-top: 26px solid transparent;\n    border-right: 33px solid #00a699;\n    bottom: 0;\n    right: 0;\n  }\n  .DayPickerKeyboardShortcuts_show__bottomRight:hover::before {\n    border-right: 33px solid #008489;\n  }\n  .DayPickerKeyboardShortcuts_show__topRight {\n    top: 0;\n    right: 0;\n  }\n  .DayPickerKeyboardShortcuts_show__topRight::before {\n    border-bottom: 26px solid transparent;\n    border-right: 33px solid #00a699;\n    top: 0;\n    right: 0;\n  }\n  .DayPickerKeyboardShortcuts_show__topRight:hover::before {\n    border-right: 33px solid #008489;\n  }\n  .DayPickerKeyboardShortcuts_show__topLeft {\n    top: 0;\n    left: 0;\n  }\n  .DayPickerKeyboardShortcuts_show__topLeft::before {\n    border-bottom: 26px solid transparent;\n    border-left: 33px solid #00a699;\n    top: 0;\n    left: 0;\n  }\n  .DayPickerKeyboardShortcuts_show__topLeft:hover::before {\n    border-left: 33px solid #008489;\n  }\n  .DayPickerKeyboardShortcuts_showSpan {\n    color: #fff;\n    position: absolute;\n  }\n  .DayPickerKeyboardShortcuts_showSpan__bottomRight {\n    bottom: 0;\n    right: 5px;\n  }\n  .DayPickerKeyboardShortcuts_showSpan__topRight {\n    top: 1px;\n    right: 5px;\n  }\n  .DayPickerKeyboardShortcuts_showSpan__topLeft {\n    top: 1px;\n    left: 5px;\n  }\n  .DayPickerKeyboardShortcuts_panel {\n    overflow: auto;\n    background: #fff;\n    border: 1px solid #dbdbdb;\n    border-radius: 2px;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    left: 0;\n    z-index: 2;\n    padding: 22px;\n    margin: 33px;\n    text-align: left;\n  }\n  .DayPickerKeyboardShortcuts_title {\n    font-size: 16px;\n    font-weight: 700;\n    margin: 0;\n  }\n  .DayPickerKeyboardShortcuts_list {\n    list-style: none;\n    padding: 0;\n    font-size: 14px;\n  }\n  .DayPickerKeyboardShortcuts_close {\n    position: absolute;\n    right: 22px;\n    top: 22px;\n    z-index: 2;\n  }\n  .DayPickerKeyboardShortcuts_close:active {\n    outline: 0;\n  }\n  .DayPickerKeyboardShortcuts_closeSvg {\n    height: 15px;\n    width: 15px;\n    fill: #cacccd;\n  }\n  .DayPickerKeyboardShortcuts_closeSvg:focus,\n  .DayPickerKeyboardShortcuts_closeSvg:hover {\n    fill: #82888a;\n  }\n  .CalendarDay {\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n    cursor: pointer;\n    font-size: 14px;\n    text-align: center;\n    ", "\n  }\n  .CalendarDay:active {\n    outline: 0;\n  }\n  .CalendarDay__defaultCursor {\n    cursor: default;\n  }\n  .CalendarDay__default {\n    border: 0;\n    ", "\n    ", "\n  }\n  .CalendarDay__default:hover {\n    ", "\n    border: 0;\n    color: inherit;\n  }\n  .CalendarDay__hovered_offset {\n    background: #f4f5f5;\n    border: 1px double #e4e7e7;\n    color: inherit;\n  }\n  .CalendarDay__outside {\n    border: 0;\n    background: #fff;\n    color: #484848;\n  }\n  .CalendarDay__outside:hover {\n    border: 0;\n  }\n  .CalendarDay__blocked_minimum_nights {\n    background: #fff;\n    border: 1px solid #eceeee;\n    color: #cacccd;\n  }\n  .CalendarDay__blocked_minimum_nights:active,\n  .CalendarDay__blocked_minimum_nights:hover {\n    background: #fff;\n    color: #cacccd;\n  }\n  .CalendarDay__highlighted_calendar {\n    background: #ffe8bc;\n    color: #484848;\n  }\n  .CalendarDay__highlighted_calendar:active,\n  .CalendarDay__highlighted_calendar:hover {\n    background: #ffce71;\n    color: #484848;\n  }\n  .CalendarDay__selected_span {\n    ", "\n    border: none;\n    ", "\n  }\n  .CalendarDay__selected_span:active,\n  .CalendarDay__selected_span:hover {\n    ", "\n    border: none;\n    ", "\n  }\n  .CalendarDay__selected,\n  .CalendarDay__selected:active,\n  .CalendarDay__selected:hover {\n    ", "\n    border: none;\n    ", "\n  }\n  .CalendarDay__hovered_span,\n  .CalendarDay__hovered_span:hover {\n    ", "\n    border: none;\n  \n    ", "\n  }\n  .CalendarDay__hovered_span:active {\n    background: #80e8e0;\n    ", "\n    border: none;\n    color: #007a87;\n  }\n  .CalendarDay__blocked_calendar,\n  .CalendarDay__blocked_calendar:active,\n  .CalendarDay__blocked_calendar:hover {\n    border: 0;\n    ", "\n  }\n  .CalendarDay__blocked_out_of_range,\n  .CalendarDay__blocked_out_of_range:active,\n  .CalendarDay__blocked_out_of_range:hover {\n    background: #fff;\n    border: 0;\n    ", "\n    ", "\n  }\n  .CalendarDay__hovered_start_first_possible_end {\n    background: #eceeee;\n    border: 1px double #eceeee;\n  }\n  .CalendarDay__hovered_start_blocked_min_nights {\n    background: #eceeee;\n    border: 1px double #e4e7e7;\n  }\n  .CalendarMonth {\n    background: #fff;\n    text-align: center;\n    vertical-align: top;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    padding: 0 !important;\n    width; 100%;\n  }\n  .CalendarMonth_table {\n    border-collapse: collapse;\n    border-spacing: 0;\n    width: 100%;\n    max-width: 100%;\n    margin-left: 3px;\n  }\n  .CalendarMonth_verticalSpacing {\n    border-collapse: separate;\n  }\n  .CalendarMonth_caption {\n    ", "\n    ", "\n    width: 100%;\n    text-align: center;\n    padding-top: 22px;\n    padding-bottom: 37px;\n    caption-side: initial;\n  }\n  .CalendarMonth_caption__verticalScrollable {\n    padding-top: 12px;\n    padding-bottom: 7px;\n  }\n  .CalendarMonthGrid {\n    ", "\n    ", "\n    text-align: left;\n    z-index: 0;\n  }\n  .CalendarMonthGrid__animating {\n    z-index: 1;\n  }\n  .CalendarMonthGrid__horizontal {\n    position: absolute;\n    left: 0px;\n    margin: 4px;\n  }\n  .CalendarMonthGrid__vertical,\n  .CalendarMonthGrid__vertical_scrollable {\n    margin: 0 auto;\n  }\n  .CalendarMonthGrid_month__horizontal {\n    display: inline-block;\n    vertical-align: top;\n    min-height: 100%;\n  }\n  .CalendarMonthGrid_month__hideForAnimation {\n    position: absolute;\n    z-index: -1;\n    opacity: 0;\n    pointer-events: none;\n  }\n  .CalendarMonthGrid_month__hidden {\n    visibility: hidden;\n  }\n  .DayPickerNavigation {\n    display: flex;\n    justify-items: space-between;\n    position: relative;\n    z-index: 2;\n  }\n  .DayPickerNavigation__horizontal {\n    max-width: 555px;\n    height: 0;\n  }\n  .DayPickerNavigation__verticalScrollable_prevNav {\n    z-index: 1;\n  }\n  .DayPickerNavigation__verticalDefault {\n    position: absolute;\n    width: 100%;\n    height: 52px;\n    bottom: -72px;\n    left: 0;\n  }\n  .DayPickerNavigation__verticalScrollableDefault {\n    position: relative;\n  }\n  .DayPickerNavigation__bottom {\n    height: auto;\n  }\n  .DayPickerNavigation__bottomDefault {\n    -webkit-box-pack: justify;\n    -ms-flex-pack: justify;\n    display: -webkit-box;\n    display: -moz-box;\n    display: -ms-flexbox;\n    display: -webkit-flex;\n    display: flex;\n    -webkit-justify-content: space-between;\n    justify-content: space-between;\n  }\n  .DayPickerNavigation_button {\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    padding: 0;\n    margin: 0;\n  }\n  .DayPickerNavigation_button__default {\n    border: 0;\n    background-color: #fff;\n    ", "\n  }\n  .DayPickerNavigation_button__default:focus,\n  .DayPickerNavigation_button__default:hover {\n    border: 0;\n  }\n  .DayPickerNavigation_button__default:active {\n    background: #f2f2f2;\n  }\n  .DayPickerNavigation_button__disabled {\n    cursor: default;\n    border: 1px solid #f2f2f2;\n  }\n  .DayPickerNavigation_button__disabled:focus,\n  .DayPickerNavigation_button__disabled:hover {\n    border: 1px solid #f2f2f2;\n  }\n  .DayPickerNavigation_button__disabled:active {\n    background: 0 0;\n  }\n  .DayPickerNavigation_button__horizontalDefault {\n    position: absolute;\n    top: 18px;\n    line-height: 0.78;\n    border-radius: 3px;\n    padding: 9px;\n  }\n  .DayPickerNavigation_bottomButton__horizontalDefault {\n    position: static;\n    margin: -10px 22px 30px;\n  }\n  .DayPickerNavigation_leftButton__horizontalDefault {\n    left: 10px;\n  }\n  .DayPickerNavigation_rightButton__horizontalDefault {\n    right: 18px;\n  }\n  .DayPickerNavigation_button__verticalDefault {\n    background: #fff;\n    box-shadow: none;\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 45%;\n    padding: 8px 12px;\n    \n    ", "\n  }\n  .DayPickerNavigation_nextButton__verticalDefault {\n    ", "\n    ", "\n  }\n  .DayPickerNavigation_nextButton__verticalScrollableDefault,\n  .DayPickerNavigation_prevButton__verticalScrollableDefault {\n    width: 100%;\n  }\n  .DayPickerNavigation_svg__horizontal {\n    height: 19px;\n    width: 19px;\n    display: block;\n    ", "\n  }\n  .DayPickerNavigation_svg__vertical {\n    ", "\n    ", "\n    ", "\n  }\n  .DayPickerNavigation_svg__disabled {\n    fill: #f2f2f2;\n  }\n  .DayPicker {\n    background: #fff;\n    position: relative;\n    text-align: left;\n  }\n  .DayPicker__horizontal {\n    background: #fff;\n  }\n  .DayPicker__verticalScrollable {\n    height: 100%;\n  }\n  .DayPicker__hidden {\n    visibility: hidden;\n  }\n  .DayPicker__withBorder {\n    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.07);\n    ", "\n   \n  }\n  .DayPicker_portal__horizontal {\n    box-shadow: none;\n    position: absolute;\n    left: 50%;\n    top: 50%;\n  }\n  .DayPicker_portal__vertical {\n    position: initial;\n  }\n  .DayPicker_focusRegion {\n    outline: 0;\n  }\n  .DayPicker_calendarInfo__horizontal,\n  .DayPicker_wrapper__horizontal {\n    display: inline-block;\n    vertical-align: top;\n  }\n  .DayPicker_weekHeaders {\n    ", "\n    position: relative;\n  }\n  .DayPicker_weekHeaders__horizontal {\n    margin-left: 9px;\n  }\n  .DayPicker_weekHeader {\n    color: #757575;\n    position: absolute;\n    top: 62px;\n    z-index: 2;\n    text-align: left;\n  }\n  .DayPicker_weekHeader__vertical {\n    display: block;\n  }\n  .DayPicker_weekHeader__verticalScrollable {\n    top: 0;\n    display: table-row;\n    border-bottom: 1px solid #dbdbdb;\n    background: #fff;\n    margin-left: 0;\n    left: 0;\n    width: 100%;\n    text-align: center;\n  }\n  .DayPicker_weekHeader_ul {\n    list-style: none;\n    margin: 1px 0;\n    padding-left: 0;\n    padding-right: 0;\n    ", "\n  }\n  .DayPicker_weekHeader_li {\n    display: inline-block;\n    text-align: center;\n  }\n  .DayPicker_transitionContainer {\n    position: relative;\n    overflow: hidden;\n    border-radius: 3px;\n    ", "\n    max-width: 87%;\n  }\n  .DayPicker_transitionContainer__horizontal {\n    -webkit-transition: height 0.2s ease-in-out;\n    -moz-transition: height 0.2s ease-in-out;\n    transition: height 0.2s ease-in-out;\n  }\n  .DayPicker_transitionContainer__vertical {\n    min-height: 100%;\n  }\n  .DayPicker_transitionContainer__verticalScrollable {\n    padding-top: 20px;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    left: 0;\n    overflow-y: scroll\n  }\n  .DateInput {\n    margin: 0;\n    background: #fff;\n    position: relative;\n    display: inline-block;\n    width: 50%;\n    vertical-align: middle;\n  }\n  .DateInput__small {\n    width: 97px;\n  }\n  .DateInput__block {\n    box-sizing: border-box;\n    width: 100%;\n  }\n  .DateInput__disabled {\n    background: #f2f2f2;\n    color: #dbdbdb;\n  }\n  .DateInput_input {\n    box-sizing: border-box;\n    diplay: block;\n    width: 100%;\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n  .DateInput_input__small {\n    font-size: 15px;\n    line-height: 18px;\n    letter-spacing: 0.2px;\n    padding: 7px 7px 5px;\n  }\n  .DateInput_input__regular {\n    font-weight: auto;\n  }\n  .DateInput_input__readOnly {\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  .DateInput_input__focused {\n    width: 100%;\n    outline: 0;\n    background: #fff;\n\n  }\n  .DateInput_input__disabled {\n    background: #f2f2f2;\n    font-style: italic;\n  }\n  .DateInput_screenReaderMessage {\n    border: 0;\n    clip: rect(0, 0, 0, 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    width: 1px;\n  }\n  .DateInput_fang {\n    position: absolute;\n    width: 20px;\n    height: 10px;\n    left: 22px;\n    z-index: 2;\n    top: 57px !important;\n  }\n  .DateInput_fangShape {\n    fill: #fff;\n  }\n  .DateInput_fangStroke {\n    stroke: #919191;\n    fill: transparent;\n  }\n  .DateRangePickerInput {\n    ", "\n    background-color: #fff;\n    display: inline-block;\n  }\n  .DateRangePickerInput__disabled {\n    background: #f2f2f2;\n  }\n  .DateRangePickerInput__withBorder {\n    border-radius: 2px;\n    border: 1px solid #dbdbdb;\n  }\n  .DateRangePickerInput__rtl {\n    direction: rtl;\n  }\n  .DateRangePickerInput__block {\n    display: flex;\n    width: 100%;\n    justify-content: space-between;\n    align-items: center;\n  }\n  .DateRangePickerInput__showClearDates {\n    padding-right: 30px;\n  }\n  .DateRangePickerInput_arrow {\n    display: inline-block;\n    vertical-align: middle;\n    ", "\n    ", "\n    ", "\n  }\n  .DateRangePickerInput_arrow_svg {\n    vertical-align: middle;\n    ", "\n    height: 24px;\n    width: 24px;\n  }\n  .DateRangePickerInput_clearDates {\n    background: 0 0;\n    border: 0;\n    color: inherit;\n    font: inherit;\n    line-height: normal;\n    overflow: visible;\n    cursor: pointer;\n    padding: 10px;\n    margin: 0 10px 0 5px;\n    position: absolute;\n    right: 0;\n    top: 50%;\n    -webkit-transform: translateY(-50%);\n    -ms-transform: translateY(-50%);\n    transform: translateY(-50%);\n  }\n  .DateRangePickerInput_clearDates__small {\n    padding: 6px;\n  }\n  .DateRangePickerInput_clearDates_default:focus,\n  .DateRangePickerInput_clearDates_default:hover {\n    background: #dbdbdb;\n    border-radius: 50%;\n  }\n  .DateRangePickerInput_clearDates__hide {\n    visibility: hidden;\n  }\n  .DateRangePickerInput_clearDates_svg {\n    fill: #82888a;\n    height: 12px;\n    width: 15px;\n    vertical-align: middle;\n  }\n  .DateRangePickerInput_clearDates_svg__small {\n    height: 9px;\n  }\n  .DateRangePickerInput_calendarIcon {\n    background: 0 0;\n    border: 0;\n    color: inherit;\n    font: inherit;\n    line-height: normal;\n    overflow: visible;\n    cursor: pointer;\n    display: inline-block;\n    vertical-align: middle;\n    padding: 10px;\n    margin: 0 5px 0 10px;\n  }\n  .DateRangePickerInput_calendarIcon_svg {\n    fill: #82888a;\n    height: 15px;\n    width: 14px;\n    vertical-align: middle;\n  }\n  .DateRangePicker {\n    position: relative;\n    display: inline-block;\n  }\n  .DateRangePicker__block {\n    display: block;\n  }\n  .DateRangePicker_picker {\n    z-index: 1;\n    background-color: #fff;\n    position: absolute;\n    width: 100%;\n  }\n  .DateRangePicker_picker__rtl {\n    direction: rtl;\n  }\n  .DateRangePicker_picker__directionLeft {\n    left: 0;\n  }\n  .DateRangePicker_picker__directionRight {\n    right: 0;\n  }\n  .DateRangePicker_picker__portal {\n    background-color: rgba(0, 0, 0, 0.3);\n    position: fixed;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n  }\n  .DateRangePicker_picker__fullScreenPortal {\n    background-color: #fff;\n  }\n  .DateRangePicker_closeButton {\n    background: 0 0;\n    border: 0;\n    color: inherit;\n    font: inherit;\n    line-height: normal;\n    overflow: visible;\n    cursor: pointer;\n    position: absolute;\n    top: 0;\n    right: 0;\n    padding: 15px;\n    z-index: 2;\n  }\n  .DateRangePicker_closeButton:focus,\n  .DateRangePicker_closeButton:hover {\n    color: darken(#cacccd, 10%);\n    text-decoration: none;\n  }\n  .DateRangePicker_closeButton_svg {\n    height: 15px;\n    width: 15px;\n    fill: #cacccd;\n  }\n\n  div.DateRangePicker_picker > div {\n    max-width: 555px !important;\n  }\n\n  div.DayPicker_focusRegion {\n    max-width: 550px !important;\n  }\n  \n  div.DayPicker_focusRegion > div {\n    max-width: 550px !important;\n    display: flex;\n    justify-content: space-between;\n  }\n  div.DayPicker_transitionContainer > div {\n    max-width: 550px !important;\n  }\n\n  div.DayPicker_weekHeader {\n    padding: 0 !important;\n  }\n  div.DayPicker_weekHeaders.DayPicker_weekHeaders_1 > div {\n    margin: 0;\n    padding: 0;\n    display: block;\n    width: 100%;\n  }\n  div.DayPicker_weekHeaders.DayPicker_weekHeaders_1.DayPicker_weekHeaders__horizontal.DayPicker_weekHeaders__horizontal_2\n    > div:nth-of-type {\n    left: 270px !important;\n  }\n  .DayPicker_transitionContainer__vertical_2 > div {\n    width: 100% !important;\n  }\n  @media only screen and (max-width: 770px) {\n    .DayPicker_weekHeader_ul {\n      list-style: none;\n      margin: 1px 0;\n      padding-left: 0;\n      padding-right: 0;\n      display: flex;\n      justify-content: space-around;\n    }\n\n    div.DayPicker_weekHeader__vertical {\n      margin: 0 !important;\n      left: 0;\n    }\n\n    div.DayPicker_focusRegion.DayPicker_focusRegion_1 {\n      height: 600px;\n    }\n\n    .DayPicker__withBorder {\n      border-radius: 4px;\n    }\n  }\n"])), function (_a) {
+exports.CalendarWrapper = newskit_1.styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  height: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n  height: 100%;\n"
+    /* istanbul ignore next */
+])));
+/* istanbul ignore next */
+exports.Container = (0, newskit_1.styled)(newskit_1.Block)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (_a) {
     var calendar = _a.calendar;
-    return (0, newskit_1.getTypographyPresetFromTheme)(calendar.typographyPreset);
-}, function (_a) {
-    var calendar = _a.calendar;
-    return (0, newskit_1.getTypographyPresetFromTheme)(calendar.day.typographyPreset);
-}, function (_a) {
-    var calendar = _a.calendar;
-    return (0, newskit_1.getColorCssFromTheme)('color', calendar.day.color);
-}, function (_a) {
-    var calendar = _a.calendar;
-    return (0, newskit_1.getColorCssFromTheme)('backgroundColor', calendar.day.backgroundColor);
+    return (0, newskit_1.getSizingCssFromTheme)('height', calendar.calendarCustomContainer.sizing.height);
 }, function (_a) {
+    var _b, _c;
     var calendar = _a.calendar;
-    return (0, newskit_1.getColorCssFromTheme)('backgroundColor', calendar.day.hover.backgroundColor);
-}, function (_a) {
+    return ((_c = (_b = calendar.calendarCustomContainer) === null || _b === void 0 ? void 0 : _b.spacing) === null || _c === void 0 ? void 0 : _c.marginTop)
+        ? (0, newskit_1.getSpacingCssFromTheme)('marginTop', calendar.calendarCustomContainer.spacing.marginTop)
+        : "\n      margin-top: 2px;\n    ";
+});
+exports.InputsWrapper = newskit_1.styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  align-items: center;\n\n  .input-container {\n    position: relative;\n    height: 100%;\n    width: 100%;\n  }\n\n  .chevron {\n    position: absolute;\n    left: 24px;\n    bottom: -36px;\n\n    &:before {\n      content: '';\n      ", ";\n      border-bottom: 0;\n      border-left: 0;\n      content: '';\n      display: inline-block;\n      height: 14px;\n      position: relative;\n      transform: rotate(-45deg);\n      vertical-align: top;\n      width: 14px;\n      z-index: 2;\n    }\n  }\n\n  .react-datepicker-input {\n    margin: 0;\n    background: #fff;\n    position: relative;\n    display: inline-block;\n    width: 50%;\n\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n\n  .react-datepicker-input-arrow {\n    display: inline-block;\n    vertical-align: middle;\n    ", "\n    ", "\n    ", "\n\n    svg {\n      vertical-align: middle;\n      ", "\n      height: 24px;\n      width: 24px;\n    }\n  }\n"], ["\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  align-items: center;\n\n  .input-container {\n    position: relative;\n    height: 100%;\n    width: 100%;\n  }\n\n  .chevron {\n    position: absolute;\n    left: 24px;\n    bottom: -36px;\n\n    &:before {\n      content: '';\n      ", ";\n      border-bottom: 0;\n      border-left: 0;\n      content: '';\n      display: inline-block;\n      height: 14px;\n      position: relative;\n      transform: rotate(-45deg);\n      vertical-align: top;\n      width: 14px;\n      z-index: 2;\n    }\n  }\n\n  .react-datepicker-input {\n    margin: 0;\n    background: #fff;\n    position: relative;\n    display: inline-block;\n    width: 50%;\n\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n\n  .react-datepicker-input-arrow {\n    display: inline-block;\n    vertical-align: middle;\n    ", "\n    ", "\n    ", "\n\n    svg {\n      vertical-align: middle;\n      ", "\n      height: 24px;\n      width: 24px;\n    }\n  }\n"
+    /* istanbul ignore next */
+])), function (_a) {
     var calendar = _a.calendar;
-    return (0, newskit_1.getColorCssFromTheme)('backgroundColor', calendar.day.selected.backgroundColor);
+    return (0, newskit_1.getStylePresetFromTheme)(calendar.borders.stylePreset);
 }, function (_a) {
     var calendar = _a.calendar;
-    return (0, newskit_1.getColorCssFromTheme)('color', calendar.day.selected.color);
+    return (0, newskit_1.getTypographyPresetFromTheme)(calendar.inputs.typographyPreset);
 }, function (_a) {
     var calendar = _a.calendar;
-    return (0, newskit_1.getColorCssFromTheme)('backgroundColor', calendar.day.span.hover.active.backgroundColor);
+    return (0, newskit_1.getColorCssFromTheme)('backgroundColor', calendar.inputs.colors.backgroundColor);
 }, function (_a) {
     var calendar = _a.calendar;
-    return (0, newskit_1.getColorCssFromTheme)('color', calendar.day.span.selected.active.hover.color);
+    return (0, newskit_1.getSizingCssFromTheme)('padding', calendar.inputs.spacing.padding);
 }, function (_a) {
     var calendar = _a.calendar;
-    return (0, newskit_1.getColorCssFromTheme)('backgroundColor', calendar.day.selected.active.hover.backgroundColor);
-}, (0, newskit_1.getColorCssFromTheme)('color', 'inkInverse'), function (_a) {
-    var calendar = _a.calendar;
-    return (0, newskit_1.getColorCssFromTheme)('backgroundColor', calendar.day.span.hover.backgroundColor);
+    return (0, newskit_1.getStylePresetFromTheme)(calendar.inputs.borders.stylePreset);
 }, function (_a) {
     var calendar = _a.calendar;
-    return (0, newskit_1.getColorCssFromTheme)('color', calendar.day.span.hover.color);
+    return (0, newskit_1.getColorCssFromTheme)('color', calendar.inputs.colors.color);
 }, function (_a) {
     var calendar = _a.calendar;
-    return (0, newskit_1.getColorCssFromTheme)('backgroundColor', calendar.day.span.hover.active.backgroundColor);
+    return (0, newskit_1.getSpacingCssFromTheme)('marginLeft', calendar.inputs.spacing.marginLeft);
 }, function (_a) {
     var calendar = _a.calendar;
-    return (0, newskit_1.getColorCssFromTheme)('color', calendar.day.blocked.color);
+    return (0, newskit_1.getSpacingCssFromTheme)('marginRight', calendar.inputs.spacing.marginRight);
 }, function (_a) {
     var calendar = _a.calendar;
-    return (0, newskit_1.getTypographyPresetFromTheme)(calendar.day.typographyPreset);
-}, function (_a) {
+    return (0, newskit_1.getColorCssFromTheme)('fill', calendar.inputs.colors.fill);
+});
+/* istanbul ignore next */
+exports.CalendarStyles = newskit_1.styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 100%;\n  max-width: 555px;\n  ", "\n  ", "\n\n  .react-datepicker__year-read-view--down-arrow,\n  .react-datepicker__month-read-view--down-arrow,\n  .react-datepicker__month-year-read-view--down-arrow,\n  .react-datepicker__navigation-icon::before {\n    ", "\n    border-style: solid;\n    border-width: 2px 2px 0 0;\n    content: '';\n    display: block;\n    height: 7px;\n    position: absolute;\n    top: 6px;\n    width: 7px;\n  }\n\n  .react-datepicker-wrapper {\n    display: inline-block;\n    padding: 0;\n    border: 0;\n  }\n\n  .react-datepicker {\n    font-family: inherit;\n    background-color: #fff;\n    color: #000;\n    border-radius: 0.3rem;\n    display: inline-block;\n    position: absolute;\n    top: 17px;\n    left: 0px;\n    z-index: 1;\n    width: 580px;\n    max-width: 580px;\n    padding: 0;\n    border: none;\n    display: flex;\n    justify-content: space-between;\n    ", ";\n    ", ";\n    ", ";\n    overflow: hidden;\n    min-height: 0;\n    height: 0;\n    transition: min-height 0.1s linear, height 0.1s linear, opacity 0.1s linear;\n    opacity: 0;\n    box-shadow: none;\n\n    @media (max-width: 770px) {\n      width: 100%;\n      flex-direction: column;\n      transition: none;\n    }\n  }\n\n  .react-datepicker__header {\n    position: relative;\n\n    ", "\n    width: 100%;\n    text-align: center;\n    padding-top: 22px;\n    caption-side: initial;\n  }\n\n  .react-datepicker__current-month,\n  .react-datepicker-time__header,\n  .react-datepicker-year-header {\n    ", "\n    margin-top: 0;\n    margin-bottom: 17px;\n  }\n\n  .react-datepicker__navigation {\n    align-items: center;\n    background: none;\n    display: flex;\n    justify-content: center;\n    text-align: center;\n    cursor: pointer;\n    position: absolute;\n    top: 2px;\n    padding: 0;\n    border: none;\n    z-index: 1;\n    height: 32px;\n    width: 32px;\n    text-indent: -999em;\n    overflow: hidden;\n  }\n  .react-datepicker__navigation--previous {\n    left: 14px;\n    top: 20px;\n\n    @media (max-width: 770px) {\n      height: 52px;\n      bottom: -72px;\n      top: auto;\n      left: 0;\n      width: 50%;\n      background: #fff;\n      position: absolute;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: 45%;\n      ", "\n\n      span {\n        right: 0;\n\n        &:before {\n          transform: rotate(315deg);\n          top: 10px;\n        }\n      }\n    }\n  }\n  .react-datepicker__navigation--next {\n    right: 14px;\n    top: 20px;\n\n    @media (max-width: 770px) {\n      height: 52px;\n      bottom: -72px;\n      top: auto;\n      right: 0;\n      width: 50%;\n      background: #fff;\n      position: absolute;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: 45%;\n      ", "\n\n      span {\n        left: 0;\n\n        &:before {\n          transform: rotate(134deg);\n          top: 5px;\n        }\n      }\n    }\n  }\n  .react-datepicker__aria-live {\n    visibility: hidden;\n    width: 0;\n    height: 0;\n  }\n\n  .react-datepicker__navigation-icon {\n    position: relative;\n    font-size: 20px;\n    width: 0;\n  }\n  .react-datepicker__navigation-icon--next {\n    left: -2px;\n  }\n  .react-datepicker__navigation-icon--next::before {\n    transform: rotate(45deg);\n    left: -7px;\n  }\n  .react-datepicker__navigation-icon--previous {\n    right: -2px;\n  }\n  .react-datepicker__navigation-icon--previous::before {\n    transform: rotate(225deg);\n    right: -7px;\n  }\n\n  .react-datepicker__month-container {\n    width: 50%;\n    max-width: 50%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    @media (max-width: 770px) {\n      width: 100%;\n      max-width: 100%;\n      max-height: 50%;\n    }\n  }\n\n  .react-datepicker__month {\n    @media (max-width: 770px) {\n      width: 100%;\n    }\n  }\n\n  .react-datepicker__day-names,\n  .react-datepicker__week {\n    white-space: nowrap;\n    display: flex;\n    justify-content: center;\n\n    @media (max-width: 770px) {\n      justify-content: center;\n    }\n  }\n\n  .react-datepicker__day-names {\n    margin: 0;\n    padding-left: 0;\n    padding-right: 0;\n    ", "\n    > div {\n      color: #757575;\n      width: 38px;\n      height: auto;\n      display: inline-block;\n      text-align: center;\n      font-size: 0.8rem;\n\n      @media (max-width: 770px) {\n        width: 100%;\n        max-width: 57px;\n      }\n    }\n  }\n\n  .react-datepicker__day-name,\n  .react-datepicker__day,\n  .react-datepicker__time-name {\n    ", "\n    width: 38px;\n    height: 37px;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    @media (max-width: 770px) {\n      width: 100%;\n      max-width: 57px;\n      min-width: 38px;\n      flex-grow: 1;\n    }\n  }\n\n  .react-datepicker__day--outside-month {\n    color: #fff !important;\n    background-color: #fff !important;\n  }\n\n  .react-datepicker__day {\n    cursor: pointer;\n  }\n\n  .react-datepicker__day--in-selecting-range:hover {\n    ", "\n    border: none;\n    ", "\n  }\n\n  .react-datepicker__day--in-range,\n  .react-datepicker__day--in-selecting-range {\n    ", "\n    border: none;\n    ", "\n  }\n\n  .react-datepicker__day--in-range:hover {\n    ", "\n    border: none;\n    ", "\n  }\n\n  .react-datepicker__day--selected,\n  .react-datepicker__day--range-start,\n  .react-datepicker__day--range-end {\n    ", "\n    border: none;\n    ", "\n  }\n\n  .react-datepicker__day--disabled,\n  .react-datepicker__month-text--disabled,\n  .react-datepicker__quarter-text--disabled,\n  .react-datepicker__year-text--disabled {\n    cursor: default;\n    ", "\n    ", "\n  }\n  .react-datepicker__day--disabled:hover,\n  .react-datepicker__month-text--disabled:hover,\n  .react-datepicker__quarter-text--disabled:hover,\n  .react-datepicker__year-text--disabled:hover {\n    background-color: transparent;\n  }\n"], ["\n  width: 100%;\n  max-width: 555px;\n  ", "\n  ", "\n\n  .react-datepicker__year-read-view--down-arrow,\n  .react-datepicker__month-read-view--down-arrow,\n  .react-datepicker__month-year-read-view--down-arrow,\n  .react-datepicker__navigation-icon::before {\n    ", "\n    border-style: solid;\n    border-width: 2px 2px 0 0;\n    content: '';\n    display: block;\n    height: 7px;\n    position: absolute;\n    top: 6px;\n    width: 7px;\n  }\n\n  .react-datepicker-wrapper {\n    display: inline-block;\n    padding: 0;\n    border: 0;\n  }\n\n  .react-datepicker {\n    font-family: inherit;\n    background-color: #fff;\n    color: #000;\n    border-radius: 0.3rem;\n    display: inline-block;\n    position: absolute;\n    top: 17px;\n    left: 0px;\n    z-index: 1;\n    width: 580px;\n    max-width: 580px;\n    padding: 0;\n    border: none;\n    display: flex;\n    justify-content: space-between;\n    ", ";\n    ", ";\n    ", ";\n    overflow: hidden;\n    min-height: 0;\n    height: 0;\n    transition: min-height 0.1s linear, height 0.1s linear, opacity 0.1s linear;\n    opacity: 0;\n    box-shadow: none;\n\n    @media (max-width: 770px) {\n      width: 100%;\n      flex-direction: column;\n      transition: none;\n    }\n  }\n\n  .react-datepicker__header {\n    position: relative;\n\n    ", "\n    width: 100%;\n    text-align: center;\n    padding-top: 22px;\n    caption-side: initial;\n  }\n\n  .react-datepicker__current-month,\n  .react-datepicker-time__header,\n  .react-datepicker-year-header {\n    ", "\n    margin-top: 0;\n    margin-bottom: 17px;\n  }\n\n  .react-datepicker__navigation {\n    align-items: center;\n    background: none;\n    display: flex;\n    justify-content: center;\n    text-align: center;\n    cursor: pointer;\n    position: absolute;\n    top: 2px;\n    padding: 0;\n    border: none;\n    z-index: 1;\n    height: 32px;\n    width: 32px;\n    text-indent: -999em;\n    overflow: hidden;\n  }\n  .react-datepicker__navigation--previous {\n    left: 14px;\n    top: 20px;\n\n    @media (max-width: 770px) {\n      height: 52px;\n      bottom: -72px;\n      top: auto;\n      left: 0;\n      width: 50%;\n      background: #fff;\n      position: absolute;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: 45%;\n      ", "\n\n      span {\n        right: 0;\n\n        &:before {\n          transform: rotate(315deg);\n          top: 10px;\n        }\n      }\n    }\n  }\n  .react-datepicker__navigation--next {\n    right: 14px;\n    top: 20px;\n\n    @media (max-width: 770px) {\n      height: 52px;\n      bottom: -72px;\n      top: auto;\n      right: 0;\n      width: 50%;\n      background: #fff;\n      position: absolute;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: 45%;\n      ", "\n\n      span {\n        left: 0;\n\n        &:before {\n          transform: rotate(134deg);\n          top: 5px;\n        }\n      }\n    }\n  }\n  .react-datepicker__aria-live {\n    visibility: hidden;\n    width: 0;\n    height: 0;\n  }\n\n  .react-datepicker__navigation-icon {\n    position: relative;\n    font-size: 20px;\n    width: 0;\n  }\n  .react-datepicker__navigation-icon--next {\n    left: -2px;\n  }\n  .react-datepicker__navigation-icon--next::before {\n    transform: rotate(45deg);\n    left: -7px;\n  }\n  .react-datepicker__navigation-icon--previous {\n    right: -2px;\n  }\n  .react-datepicker__navigation-icon--previous::before {\n    transform: rotate(225deg);\n    right: -7px;\n  }\n\n  .react-datepicker__month-container {\n    width: 50%;\n    max-width: 50%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    @media (max-width: 770px) {\n      width: 100%;\n      max-width: 100%;\n      max-height: 50%;\n    }\n  }\n\n  .react-datepicker__month {\n    @media (max-width: 770px) {\n      width: 100%;\n    }\n  }\n\n  .react-datepicker__day-names,\n  .react-datepicker__week {\n    white-space: nowrap;\n    display: flex;\n    justify-content: center;\n\n    @media (max-width: 770px) {\n      justify-content: center;\n    }\n  }\n\n  .react-datepicker__day-names {\n    margin: 0;\n    padding-left: 0;\n    padding-right: 0;\n    ", "\n    > div {\n      color: #757575;\n      width: 38px;\n      height: auto;\n      display: inline-block;\n      text-align: center;\n      font-size: 0.8rem;\n\n      @media (max-width: 770px) {\n        width: 100%;\n        max-width: 57px;\n      }\n    }\n  }\n\n  .react-datepicker__day-name,\n  .react-datepicker__day,\n  .react-datepicker__time-name {\n    ", "\n    width: 38px;\n    height: 37px;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    @media (max-width: 770px) {\n      width: 100%;\n      max-width: 57px;\n      min-width: 38px;\n      flex-grow: 1;\n    }\n  }\n\n  .react-datepicker__day--outside-month {\n    color: #fff !important;\n    background-color: #fff !important;\n  }\n\n  .react-datepicker__day {\n    cursor: pointer;\n  }\n\n  .react-datepicker__day--in-selecting-range:hover {\n    ", "\n    border: none;\n    ", "\n  }\n\n  .react-datepicker__day--in-range,\n  .react-datepicker__day--in-selecting-range {\n    ", "\n    border: none;\n    ", "\n  }\n\n  .react-datepicker__day--in-range:hover {\n    ", "\n    border: none;\n    ", "\n  }\n\n  .react-datepicker__day--selected,\n  .react-datepicker__day--range-start,\n  .react-datepicker__day--range-end {\n    ", "\n    border: none;\n    ", "\n  }\n\n  .react-datepicker__day--disabled,\n  .react-datepicker__month-text--disabled,\n  .react-datepicker__quarter-text--disabled,\n  .react-datepicker__year-text--disabled {\n    cursor: default;\n    ", "\n    ", "\n  }\n  .react-datepicker__day--disabled:hover,\n  .react-datepicker__month-text--disabled:hover,\n  .react-datepicker__quarter-text--disabled:hover,\n  .react-datepicker__year-text--disabled:hover {\n    background-color: transparent;\n  }\n"])), function (_a) {
     var calendar = _a.calendar;
-    return (0, newskit_1.getColorCssFromTheme)('color', calendar.day.blocked.color);
+    return (0, newskit_1.getTypographyPresetFromTheme)(calendar.typographyPreset);
 }, function (_a) {
-    var calendar = _a.calendar;
-    return (0, newskit_1.getTypographyPresetFromTheme)(calendar.month.headers.typographyPreset);
+    var calendarVisible = _a.calendarVisible, isMonthWithSixRows = _a.isMonthWithSixRows;
+    return calendarVisible &&
+        "\n      .calendar-custom-container .react-datepicker {\n        opacity: 1;\n        padding: 4px;\n        min-height: ".concat(isMonthWithSixRows ? 315 : 280, "px;\n        height: 100%;\n        box-shadow: 0px 20px 32px 0px rgba(17, 17, 17, 0.08);\n        transition: min-height 0.18s linear, height 0.18s linear,\n          opacity 0.22s linear;\n\n        @media (max-width: 770px) {\n          height: auto;\n          padding: 0 0 22px 0;\n          overflow: initial;\n          min-height: auto;\n        }\n      }\n    ");
 }, function (_a) {
     var calendar = _a.calendar;
-    return (0, newskit_1.getColorCssFromTheme)('color', calendar.month.headers.color);
+    return (0, newskit_1.getColorCssFromTheme)('border-color', calendar.month.headers.color);
 }, (0, newskit_1.getTypographyPresetFromTheme)('utilityBody020'), (0, newskit_1.getColorCssFromTheme)('backgroundColor', 'inkInverse'), function (_a) {
     var calendar = _a.calendar;
-    return (0, newskit_1.getColorCssFromTheme)('color', calendar.month.navigation.default.stylePreset);
+    return (0, newskit_1.getStylePresetFromTheme)(calendar.borders.stylePreset);
 }, function (_a) {
     var calendar = _a.calendar;
-    return (0, newskit_1.getStylePresetFromTheme)(calendar.month.navigation.default.stylePreset);
+    return (0, newskit_1.getColorCssFromTheme)('color', calendar.month.headers.color);
 }, function (_a) {
     var calendar = _a.calendar;
-    return (0, newskit_1.getSpacingCssFromTheme)('marginLeft', calendar.month.navigation.vertical.buttons.next);
+    return (0, newskit_1.getTypographyPresetFromTheme)(calendar.month.headers.typographyPreset);
 }, function (_a) {
     var calendar = _a.calendar;
     return (0, newskit_1.getStylePresetFromTheme)(calendar.month.navigation.default.stylePreset);
 }, function (_a) {
     var calendar = _a.calendar;
-    return (0, newskit_1.getColorCssFromTheme)('fill', calendar.month.navigation.icons.svg.left.fill);
-}, function (_a) {
-    var calendar = _a.calendar;
-    return (0, newskit_1.getSizingCssFromTheme)('height', calendar.month.navigation.icons.svg.vertical.height);
-}, function (_a) {
-    var calendar = _a.calendar;
-    return (0, newskit_1.getSizingCssFromTheme)('width', calendar.month.navigation.icons.svg.vertical.width);
-}, function (_a) {
-    var calendar = _a.calendar;
-    return (0, newskit_1.getColorCssFromTheme)('fill', calendar.month.navigation.icons.svg.vertical.fill);
-}, function (_a) {
-    var calendar = _a.calendar;
-    return (0, newskit_1.getStylePresetFromTheme)(calendar.borders.stylePreset);
-}, function (_a) {
-    var calendar = _a.calendar;
-    return (0, newskit_1.getTypographyPresetFromTheme)(calendar.week.headers.typographyPreset);
+    return (0, newskit_1.getStylePresetFromTheme)(calendar.month.navigation.default.stylePreset);
 }, function (_a) {
     var calendar = _a.calendar;
     return (0, newskit_1.getTypographyPresetFromTheme)(calendar.week.headers.typographyPreset);
 }, function (_a) {
     var calendar = _a.calendar;
-    return (0, newskit_1.getBorderCssFromTheme)('borderRadius', calendar.transitionContainer.borders.stylePreset);
-}, function (_a) {
-    var calendar = _a.calendar;
-    return (0, newskit_1.getTypographyPresetFromTheme)(calendar.inputs.typographyPreset);
+    return (0, newskit_1.getTypographyPresetFromTheme)(calendar.day.typographyPreset);
 }, function (_a) {
     var calendar = _a.calendar;
-    return (0, newskit_1.getColorCssFromTheme)('backgroundColor', calendar.inputs.colors.backgroundColor);
+    return (0, newskit_1.getColorCssFromTheme)('backgroundColor', calendar.day.span.hover.active.backgroundColor);
 }, function (_a) {
     var calendar = _a.calendar;
-    return (0, newskit_1.getSizingCssFromTheme)('padding', calendar.inputs.spacing.padding);
+    return (0, newskit_1.getColorCssFromTheme)('color', calendar.day.span.selected.active.hover.color);
 }, function (_a) {
     var calendar = _a.calendar;
-    return (0, newskit_1.getStylePresetFromTheme)(calendar.inputs.borders.stylePreset);
+    return (0, newskit_1.getColorCssFromTheme)('backgroundColor', calendar.day.selected.backgroundColor);
 }, function (_a) {
     var calendar = _a.calendar;
-    return (0, newskit_1.getTypographyPresetFromTheme)(calendar.inputs.typographyPreset);
+    return (0, newskit_1.getColorCssFromTheme)('color', calendar.day.selected.color);
 }, function (_a) {
     var calendar = _a.calendar;
-    return (0, newskit_1.getColorCssFromTheme)('color', calendar.inputs.colors.color);
-}, function (_a) {
+    return (0, newskit_1.getColorCssFromTheme)('backgroundColor', calendar.day.selected.active.hover.backgroundColor);
+}, (0, newskit_1.getColorCssFromTheme)('color', 'inkInverse'), function (_a) {
     var calendar = _a.calendar;
-    return (0, newskit_1.getSpacingCssFromTheme)('marginLeft', calendar.inputs.spacing.marginLeft);
-}, function (_a) {
+    return (0, newskit_1.getColorCssFromTheme)('backgroundColor', calendar.day.selected.active.hover.backgroundColor);
+}, (0, newskit_1.getColorCssFromTheme)('color', 'inkInverse'), function (_a) {
     var calendar = _a.calendar;
-    return (0, newskit_1.getSpacingCssFromTheme)('marginRight', calendar.inputs.spacing.marginRight);
+    return (0, newskit_1.getTypographyPresetFromTheme)(calendar.day.typographyPreset);
 }, function (_a) {
     var calendar = _a.calendar;
-    return (0, newskit_1.getColorCssFromTheme)('fill', calendar.inputs.colors.fill);
+    return (0, newskit_1.getColorCssFromTheme)('color', calendar.day.blocked.color);
 });
-var templateObject_1;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 //# sourceMappingURL=CalendarStylesTheme.js.map