@newskit-render/shared-components 1.4.0 → 1.5.0

package/dist/cjs/Calendar/presets.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calendarPresets = void 0;
+exports.calendarPresets = {
+    calendarBorderStyle: {
+        base: {
+            borderColor: '{{colors.interactiveInput020}}',
+            borderRadius: '{{borders.borderRadiusRounded020}}',
+            backgroundColor: '{{colors.interfaceBackground}}',
+            borderStyle: 'solid',
+            borderWidth: '{{borders.borderWidth010}} {{borders.borderWidth010}} {{borders.borderWidth010}} {{borders.borderWidth010}}',
+        },
+    },
+    monthNavigationButtons: {
+        base: {
+            borderColor: '{{colors.interactiveInput030}}',
+            borderRadius: '{{borders.borderRadiusRounded020}}',
+            backgroundColor: '{{colors.interfaceBackground}}',
+            borderStyle: 'solid',
+            borderWidth: '{{borders.borderWidth020}} {{borders.borderWidth020}} {{borders.borderWidth020}} {{borders.borderWidth020}}',
+        },
+    },
+    dateInputStylePreset: {
+        base: {
+            backgroundColor: '{{colors.interfaceBackground}}',
+            borderStyle: 'solid',
+            borderColor: '{{colors.interactiveInput020}}',
+            borderWidth: '{{borders.borderWidth020}} {{borders.borderWidth020}} {{borders.borderWidth020}} {{borders.borderWidth020}}',
+            borderRadius: '{{borders.borderRadiusRounded020}}',
+        },
+        focus: {
+            borderColor: '{{colors.interactiveFocus010}}',
+        },
+    },
+    iconCustom: {
+        base: {
+            iconColor: '{{colors.inkBase}}',
+        },
+    },
+};
+//# sourceMappingURL=presets.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"presets.js","sourceRoot":"","sources":["../../../src/Calendar/presets.ts"],"names":[],"mappings":";;;AAAa,QAAA,eAAe,GAAG;IAC7B,mBAAmB,EAAE;QACnB,IAAI,EAAE;YACJ,WAAW,EAAE,gCAAgC;YAC7C,YAAY,EAAE,oCAAoC;YAClD,eAAe,EAAE,gCAAgC;YACjD,WAAW,EAAE,OAAO;YACpB,WAAW,EACT,6GAA6G;SAChH;KACF;IACD,sBAAsB,EAAE;QACtB,IAAI,EAAE;YACJ,WAAW,EAAE,gCAAgC;YAC7C,YAAY,EAAE,oCAAoC;YAClD,eAAe,EAAE,gCAAgC;YACjD,WAAW,EAAE,OAAO;YACpB,WAAW,EACT,6GAA6G;SAChH;KACF;IACD,oBAAoB,EAAE;QACpB,IAAI,EAAE;YACJ,eAAe,EAAE,gCAAgC;YACjD,WAAW,EAAE,OAAO;YACpB,WAAW,EAAE,gCAAgC;YAC7C,WAAW,EACT,6GAA6G;YAC/G,YAAY,EAAE,oCAAoC;SACnD;QACD,KAAK,EAAE;YACL,WAAW,EAAE,gCAAgC;SAC9C;KACF;IACD,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,SAAS,EAAE,oBAAoB;SAChC;KACF;CACF,CAAA"}

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

@@ -0,0 +1,117 @@
+export interface CalendarRangePickerProps {
+    overrides?: CalendarStylesProps;
+    startDate: Date | null;
+    endDate: Date | null;
+    setDates: (start: null | Date, end: null | Date) => void;
+    numberOfMonths: number;
+    daySize: number;
+}
+export interface CalendarStylesProps {
+    calendar: {
+        typographyPreset: string;
+        borders: {
+            stylePreset: string;
+        };
+        transitionContainer: {
+            borders: {
+                stylePreset: string;
+            };
+        };
+        day: {
+            color: string;
+            backgroundColor: string;
+            typographyPreset: string;
+            hover: {
+                backgroundColor: string;
+            };
+            selected: {
+                color: string;
+                backgroundColor: string;
+                active: {
+                    hover: {
+                        color: string;
+                        backgroundColor: string;
+                    };
+                };
+            };
+            blocked: {
+                color: string;
+                outOfRange: {
+                    color: string;
+                };
+            };
+            span: {
+                color: string;
+                backgroundColor: string;
+                selected: {
+                    active: {
+                        hover: {
+                            color: string;
+                            backgroundColor: string;
+                        };
+                    };
+                };
+                hover: {
+                    color: string;
+                    backgroundColor: string;
+                    active: {
+                        backgroundColor: string;
+                    };
+                };
+            };
+        };
+        week: {
+            headers: {
+                typographyPreset: string;
+            };
+        };
+        month: {
+            headers: {
+                typographyPreset: string;
+                color: string;
+            };
+            navigation: {
+                default: {
+                    stylePreset: string;
+                };
+                vertical: {
+                    buttons: {
+                        next: string;
+                    };
+                };
+                icons: {
+                    stylePreset: string;
+                    svg: {
+                        left: {
+                            fill: string;
+                        };
+                        vertical: {
+                            width: string;
+                            height: string;
+                            fill: string;
+                        };
+                    };
+                };
+            };
+        };
+        inputs: {
+            typographyPreset: string;
+            colors: {
+                color: string;
+                fill: string;
+                backgroundColor: string;
+            };
+            spacing: {
+                marginLeft: string;
+                marginRight: string;
+                padding: string;
+            };
+            sizing: {
+                width: string;
+            };
+            borders: {
+                stylePreset: string;
+            };
+        };
+    };
+}

package/dist/cjs/Calendar/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/Calendar/types.ts"],"names":[],"mappings":""}

package/dist/cjs/index.d.ts

@@ -19,6 +19,7 @@ export * from './SubscriptionDrawer';
 export * from './SubscriptionDetails';
 export * from './ThemeDropdown';
 export * from './TitleBar';
+export * from './Calendar';
 export * from './helpers';
 export * from './theme';
 export * from './utils';

package/dist/cjs/index.js

@@ -35,6 +35,7 @@ __exportStar(require("./SubscriptionDrawer"), exports);
 __exportStar(require("./SubscriptionDetails"), exports);
 __exportStar(require("./ThemeDropdown"), exports);
 __exportStar(require("./TitleBar"), exports);
+__exportStar(require("./Calendar"), exports);
 __exportStar(require("./helpers"), exports);
 __exportStar(require("./theme"), exports);
 __exportStar(require("./utils"), exports);

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,+CAA4B;AAC5B,gDAA6B;AAC7B,oDAAiC;AACjC,uDAAoC;AACpC,kDAA+B;AAC/B,kDAA+B;AAC/B,8CAA2B;AAC3B,2CAAwB;AACxB,iDAA8B;AAC9B,+CAA4B;AAC5B,yCAAsB;AACtB,0CAAuB;AACvB,sDAAmC;AACnC,qDAAkC;AAClC,kDAA+B;AAC/B,wCAAqB;AACrB,kDAA+B;AAC/B,uDAAoC;AACpC,wDAAqC;AACrC,kDAA+B;AAC/B,6CAA0B;AAC1B,4CAAyB;AACzB,0CAAuB;AAEvB,0CAAuB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,+CAA4B;AAC5B,gDAA6B;AAC7B,oDAAiC;AACjC,uDAAoC;AACpC,kDAA+B;AAC/B,kDAA+B;AAC/B,8CAA2B;AAC3B,2CAAwB;AACxB,iDAA8B;AAC9B,+CAA4B;AAC5B,yCAAsB;AACtB,0CAAuB;AACvB,sDAAmC;AACnC,qDAAkC;AAClC,kDAA+B;AAC/B,wCAAqB;AACrB,kDAA+B;AAC/B,uDAAoC;AACpC,wDAAqC;AACrC,kDAA+B;AAC/B,6CAA0B;AAC1B,6CAA0B;AAC1B,4CAAyB;AACzB,0CAAuB;AAEvB,0CAAuB"}

package/dist/cjs/theme/sharedTheme/index.js

@@ -17,13 +17,14 @@ var ButtonGroup_1 = require("../../ButtonGroup");
 var SubscriptionDetails_1 = require("../../SubscriptionDetails");
 var Modal_1 = require("../../Modal");
 var stylePresets_1 = require("./stylePresets");
+var presets_1 = require("../../Calendar/presets");
 var colors_1 = require("./colors");
 exports.sharedTheme = (0, newskit_1.createTheme)({
     name: 'Shared-Theme',
     baseTheme: newskit_1.newskitLightTheme,
     overrides: {
         colors: colors_1.colors,
-        stylePresets: __assign(__assign(__assign(__assign({}, ButtonGroup_1.buttonGroupPresets), SubscriptionDetails_1.headerSubscriptionDetailsPresets), Modal_1.modalPresets), stylePresets_1.stylePresets),
+        stylePresets: __assign(__assign(__assign(__assign(__assign({}, ButtonGroup_1.buttonGroupPresets), SubscriptionDetails_1.headerSubscriptionDetailsPresets), Modal_1.modalPresets), stylePresets_1.stylePresets), presets_1.calendarPresets),
     },
 });
 //# sourceMappingURL=index.js.map

package/dist/cjs/theme/sharedTheme/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/theme/sharedTheme/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,mCAAwD;AACxD,iDAAsD;AACtD,iEAA4E;AAC5E,qCAA0C;AAC1C,+CAA6C;AAC7C,mCAAiC;AAEpB,QAAA,WAAW,GAAG,IAAA,qBAAW,EAAC;IACrC,IAAI,EAAE,cAAc;IACpB,SAAS,EAAE,2BAAiB;IAC5B,SAAS,EAAE;QACT,MAAM,iBAAA;QACN,YAAY,0CACP,gCAAkB,GAClB,sDAAgC,GAChC,oBAAY,GACZ,2BAAY,CAChB;KACF;CACF,CAAC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/theme/sharedTheme/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,mCAAwD;AACxD,iDAAsD;AACtD,iEAA4E;AAC5E,qCAA0C;AAC1C,+CAA6C;AAC7C,kDAAwD;AACxD,mCAAiC;AAEpB,QAAA,WAAW,GAAG,IAAA,qBAAW,EAAC;IACrC,IAAI,EAAE,cAAc;IACpB,SAAS,EAAE,2BAAiB;IAC5B,SAAS,EAAE;QACT,MAAM,iBAAA;QACN,YAAY,mDACP,gCAAkB,GAClB,sDAAgC,GAChC,oBAAY,GACZ,2BAAY,GACZ,yBAAe,CACnB;KACF;CACF,CAAC,CAAA"}

package/dist/esm/Calendar/Calendar.d.ts

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

package/dist/esm/Calendar/Calendar.js

@@ -0,0 +1,36 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React, { useState } from 'react';
+import { DateRangePicker, toMomentObject } from 'react-dates';
+import 'react-dates/initialize';
+import { ChevronRight as OutlinedChevronRight } from '@emotion-icons/material/ChevronRight';
+import { useBreakpointKey, toNewsKitIcon } from 'newskit';
+import { CalendarStyles } from './CalendarStylesTheme';
+import { calendarDefaults } from './defaults';
+var IconOutlinedChevronRight = toNewsKitIcon(OutlinedChevronRight);
+export var Calendar = function (_a) {
+    var _b = _a.overrides, overrides = _b === void 0 ? calendarDefaults : _b, startDate = _a.startDate, endDate = _a.endDate, numberOfMonths = _a.numberOfMonths, daySize = _a.daySize, setDates = _a.setDates;
+    var _c = useState('startDate'), focusedInput = _c[0], setFocusedInput = _c[1];
+    var breakpoint = useBreakpointKey();
+    var isMobile = breakpoint === 'xs' || breakpoint === 'sm';
+    return (React.createElement(CalendarStyles, __assign({}, overrides),
+        React.createElement(DateRangePicker, { block: true, noBorder: true, daySize: daySize, numberOfMonths: numberOfMonths, displayFormat: "DD/MM/YYYY", orientation: isMobile ? 'vertical' : 'horizontal', startDateId: "startDate", endDateId: "endDate", startDate: toMomentObject(startDate), endDate: 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) { return setFocusedInput(focusedInput); }, customArrowIcon: React.createElement(IconOutlinedChevronRight, { overrides: {
+                    size: 'iconSize020',
+                    stylePreset: 'iconCustom',
+                } }) })));
+};
+//# sourceMappingURL=Calendar.js.map

package/dist/esm/Calendar/Calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../../src/Calendar/Calendar.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,eAAe,EAAqB,cAAc,EAAE,MAAM,aAAa,CAAA;AAChF,OAAO,wBAAwB,CAAA;AAC/B,OAAO,EAAE,YAAY,IAAI,oBAAoB,EAAE,MAAM,sCAAsC,CAAA;AAC3F,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAG7C,IAAM,wBAAwB,GAAG,aAAa,CAAC,oBAAoB,CAAC,CAAA;AACpE,MAAM,CAAC,IAAM,QAAQ,GAAuC,UAAC,EAO5D;QANC,iBAA4B,EAA5B,SAAS,mBAAG,gBAAgB,KAAA,EAC5B,SAAS,eAAA,EACT,OAAO,aAAA,EACP,cAAc,oBAAA,EACd,OAAO,aAAA,EACP,QAAQ,cAAA;IAEF,IAAA,KAAkC,QAAQ,CAC9C,WAAW,CACZ,EAFM,YAAY,QAAA,EAAE,eAAe,QAEnC,CAAA;IACD,IAAM,UAAU,GAAG,gBAAgB,EAAE,CAAA;IACrC,IAAM,QAAQ,GAAG,UAAU,KAAK,IAAI,IAAI,UAAU,KAAK,IAAI,CAAA;IAC3D,OAAO,CACL,oBAAC,cAAc,eAAK,SAAS;QAC3B,oBAAC,eAAe,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,cAAc,CAAC,SAAS,CAAC,EACpC,OAAO,EAAE,cAAc,CAAC,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,IAAK,OAAA,eAAe,CAAC,YAAY,CAAC,EAA7B,CAA6B,EAC9D,eAAe,EACb,oBAAC,wBAAwB,IACvB,SAAS,EAAE;oBACT,IAAI,EAAE,aAAa;oBACnB,WAAW,EAAE,YAAY;iBAC1B,GACD,GAEJ,CACa,CAClB,CAAA;AACH,CAAC,CAAA"}

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { CalendarStylesProps } from './types';
+export declare const CalendarStyles: 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>, {}>;

package/dist/esm/Calendar/CalendarStylesTheme.js

@@ -0,0 +1,128 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { getBorderCssFromTheme, getColorCssFromTheme, getSizingCssFromTheme, getSpacingCssFromTheme, getStylePresetFromTheme, getTypographyPresetFromTheme, styled, } from 'newskit';
+export var CalendarStyles = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  max-width: 560px;\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  }\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: 560px;\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  }\n  .DateInput_fangShape {\n    fill: #fff;\n  }\n  .DateInput_fangStroke {\n    stroke: #dbdbdb;\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: 560px !important;\n  }\n\n  div.DayPicker_focusRegion {\n    max-width: 560px !important;\n  }\n  \n  div.DayPicker_focusRegion > div {\n    max-width: 560px !important;\n    display: flex;\n    justify-content: space-between;\n  }\n  div.DayPicker_transitionContainer > div {\n    max-width: 560px !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-child(2) {\n    left: 270px !important;\n  }\n  .DayPicker_transitionContainer__vertical_2 > div {\n    width: 100% !important;\n  }\n  @media only screen and (max-width: 480px) {\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  }\n"], ["\n  width: 100%;\n  max-width: 560px;\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  }\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: 560px;\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  }\n  .DateInput_fangShape {\n    fill: #fff;\n  }\n  .DateInput_fangStroke {\n    stroke: #dbdbdb;\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: 560px !important;\n  }\n\n  div.DayPicker_focusRegion {\n    max-width: 560px !important;\n  }\n  \n  div.DayPicker_focusRegion > div {\n    max-width: 560px !important;\n    display: flex;\n    justify-content: space-between;\n  }\n  div.DayPicker_transitionContainer > div {\n    max-width: 560px !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-child(2) {\n    left: 270px !important;\n  }\n  .DayPicker_transitionContainer__vertical_2 > div {\n    width: 100% !important;\n  }\n  @media only screen and (max-width: 480px) {\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  }\n"])), function (_a) {
+    var calendar = _a.calendar;
+    return getTypographyPresetFromTheme(calendar.typographyPreset);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getTypographyPresetFromTheme(calendar.day.typographyPreset);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getColorCssFromTheme('color', calendar.day.color);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getColorCssFromTheme('backgroundColor', calendar.day.backgroundColor);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getColorCssFromTheme('backgroundColor', calendar.day.hover.backgroundColor);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getColorCssFromTheme('backgroundColor', calendar.day.selected.backgroundColor);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getColorCssFromTheme('color', calendar.day.selected.color);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getColorCssFromTheme('backgroundColor', calendar.day.span.hover.active.backgroundColor);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getColorCssFromTheme('color', calendar.day.span.selected.active.hover.color);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getColorCssFromTheme('backgroundColor', calendar.day.selected.active.hover.backgroundColor);
+}, getColorCssFromTheme('color', 'inkInverse'), function (_a) {
+    var calendar = _a.calendar;
+    return getColorCssFromTheme('backgroundColor', calendar.day.span.hover.backgroundColor);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getColorCssFromTheme('color', calendar.day.span.hover.color);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getColorCssFromTheme('backgroundColor', calendar.day.span.hover.active.backgroundColor);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getColorCssFromTheme('color', calendar.day.blocked.color);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getTypographyPresetFromTheme(calendar.day.typographyPreset);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getColorCssFromTheme('color', calendar.day.blocked.color);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getTypographyPresetFromTheme(calendar.month.headers.typographyPreset);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getColorCssFromTheme('color', calendar.month.headers.color);
+}, getTypographyPresetFromTheme('utilityBody020'), getColorCssFromTheme('backgroundColor', 'inkInverse'), function (_a) {
+    var calendar = _a.calendar;
+    return getColorCssFromTheme('color', calendar.month.navigation.default.stylePreset);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getStylePresetFromTheme(calendar.month.navigation.default.stylePreset);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getSpacingCssFromTheme('marginLeft', calendar.month.navigation.vertical.buttons.next);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getStylePresetFromTheme(calendar.month.navigation.default.stylePreset);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getColorCssFromTheme('fill', calendar.month.navigation.icons.svg.left.fill);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getSizingCssFromTheme('height', calendar.month.navigation.icons.svg.vertical.height);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getSizingCssFromTheme('width', calendar.month.navigation.icons.svg.vertical.width);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getColorCssFromTheme('fill', calendar.month.navigation.icons.svg.vertical.fill);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getStylePresetFromTheme(calendar.borders.stylePreset);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getTypographyPresetFromTheme(calendar.week.headers.typographyPreset);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getTypographyPresetFromTheme(calendar.week.headers.typographyPreset);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getBorderCssFromTheme('borderRadius', calendar.transitionContainer.borders.stylePreset);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getTypographyPresetFromTheme(calendar.inputs.typographyPreset);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getColorCssFromTheme('backgroundColor', calendar.inputs.colors.backgroundColor);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getSizingCssFromTheme('padding', calendar.inputs.spacing.padding);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getStylePresetFromTheme(calendar.inputs.borders.stylePreset);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getTypographyPresetFromTheme(calendar.inputs.typographyPreset);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getColorCssFromTheme('color', calendar.inputs.colors.color);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getSpacingCssFromTheme('marginLeft', calendar.inputs.spacing.marginLeft);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getSpacingCssFromTheme('marginRight', calendar.inputs.spacing.marginRight);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getColorCssFromTheme('fill', calendar.inputs.colors.fill);
+}, function (_a) {
+    var calendar = _a.calendar;
+    return getStylePresetFromTheme(calendar.borders.stylePreset);
+});
+var templateObject_1;
+//# sourceMappingURL=CalendarStylesTheme.js.map

package/dist/esm/Calendar/CalendarStylesTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarStylesTheme.js","sourceRoot":"","sources":["../../../src/Calendar/CalendarStylesTheme.tsx"],"names":[],"mappings":"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"}

package/dist/esm/Calendar/defaults.d.ts

@@ -0,0 +1,2 @@
+import { CalendarStylesProps } from './types';
+export declare const calendarDefaults: CalendarStylesProps;

package/dist/esm/Calendar/defaults.js

@@ -0,0 +1,110 @@
+export var calendarDefaults = {
+    calendar: {
+        typographyPreset: 'utilityBody020',
+        borders: {
+            stylePreset: 'calendarBorderStyle',
+        },
+        transitionContainer: {
+            borders: {
+                stylePreset: 'calendarBorderStyle',
+            },
+        },
+        day: {
+            color: 'inkBase',
+            backgroundColor: 'interface010',
+            typographyPreset: 'utilityBody020',
+            hover: {
+                backgroundColor: 'interface010',
+            },
+            selected: {
+                color: 'inkBase',
+                backgroundColor: 'interactivePrimary010',
+                active: {
+                    hover: {
+                        color: 'inkInverse',
+                        backgroundColor: 'interactivePrimary030',
+                    },
+                },
+            },
+            blocked: {
+                color: 'interface040',
+                outOfRange: {
+                    color: 'interface040',
+                },
+            },
+            span: {
+                color: 'inkBase',
+                backgroundColor: 'interactivePrimary010',
+                selected: {
+                    active: {
+                        hover: {
+                            color: 'inkBase',
+                            backgroundColor: 'interactivePrimary030',
+                        },
+                    },
+                },
+                hover: {
+                    backgroundColor: 'interactivePrimary010',
+                    color: 'inkBase',
+                    active: {
+                        backgroundColor: 'interactivePrimary030',
+                    },
+                },
+            },
+        },
+        week: {
+            headers: {
+                typographyPreset: 'utilityBody020',
+            },
+        },
+        month: {
+            headers: {
+                typographyPreset: 'utilityHeading020',
+                color: 'utilityBody020',
+            },
+            navigation: {
+                default: {
+                    stylePreset: 'monthNavigationButtons',
+                },
+                vertical: {
+                    buttons: {
+                        next: 'space020',
+                    },
+                },
+                icons: {
+                    stylePreset: 'iconCustom',
+                    svg: {
+                        left: {
+                            fill: 'inkBase',
+                        },
+                        vertical: {
+                            width: 'sizing040',
+                            height: 'sizing040',
+                            fill: 'inkBase',
+                        },
+                    },
+                },
+            },
+        },
+        inputs: {
+            typographyPreset: '',
+            colors: {
+                color: 'inkBase',
+                fill: 'inkBase',
+                backgroundColor: 'interfaceBackground',
+            },
+            spacing: {
+                marginLeft: 'space020',
+                marginRight: 'space020',
+                padding: 'sizing030',
+            },
+            sizing: {
+                width: '',
+            },
+            borders: {
+                stylePreset: 'dateInputStylePreset',
+            },
+        },
+    },
+};
+//# sourceMappingURL=defaults.js.map

package/dist/esm/Calendar/defaults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.js","sourceRoot":"","sources":["../../../src/Calendar/defaults.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,IAAM,gBAAgB,GAAwB;IACnD,QAAQ,EAAE;QACR,gBAAgB,EAAE,gBAAgB;QAClC,OAAO,EAAE;YACP,WAAW,EAAE,qBAAqB;SACnC;QACD,mBAAmB,EAAE;YACnB,OAAO,EAAE;gBACP,WAAW,EAAE,qBAAqB;aACnC;SACF;QACD,GAAG,EAAE;YACH,KAAK,EAAE,SAAS;YAChB,eAAe,EAAE,cAAc;YAC/B,gBAAgB,EAAE,gBAAgB;YAClC,KAAK,EAAE;gBACL,eAAe,EAAE,cAAc;aAChC;YACD,QAAQ,EAAE;gBACR,KAAK,EAAE,SAAS;gBAChB,eAAe,EAAE,uBAAuB;gBACxC,MAAM,EAAE;oBACN,KAAK,EAAE;wBACL,KAAK,EAAE,YAAY;wBACnB,eAAe,EAAE,uBAAuB;qBACzC;iBACF;aACF;YACD,OAAO,EAAE;gBACP,KAAK,EAAE,cAAc;gBACrB,UAAU,EAAE;oBACV,KAAK,EAAE,cAAc;iBACtB;aACF;YACD,IAAI,EAAE;gBACJ,KAAK,EAAE,SAAS;gBAChB,eAAe,EAAE,uBAAuB;gBACxC,QAAQ,EAAE;oBACR,MAAM,EAAE;wBACN,KAAK,EAAE;4BACL,KAAK,EAAE,SAAS;4BAChB,eAAe,EAAE,uBAAuB;yBACzC;qBACF;iBACF;gBACD,KAAK,EAAE;oBACL,eAAe,EAAE,uBAAuB;oBACxC,KAAK,EAAE,SAAS;oBAChB,MAAM,EAAE;wBACN,eAAe,EAAE,uBAAuB;qBACzC;iBACF;aACF;SACF;QACD,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,gBAAgB,EAAE,gBAAgB;aACnC;SACF;QACD,KAAK,EAAE;YACL,OAAO,EAAE;gBACP,gBAAgB,EAAE,mBAAmB;gBACrC,KAAK,EAAE,gBAAgB;aACxB;YACD,UAAU,EAAE;gBACV,OAAO,EAAE;oBACP,WAAW,EAAE,wBAAwB;iBACtC;gBACD,QAAQ,EAAE;oBACR,OAAO,EAAE;wBACP,IAAI,EAAE,UAAU;qBACjB;iBACF;gBACD,KAAK,EAAE;oBACL,WAAW,EAAE,YAAY;oBACzB,GAAG,EAAE;wBACH,IAAI,EAAE;4BACJ,IAAI,EAAE,SAAS;yBAChB;wBACD,QAAQ,EAAE;4BACR,KAAK,EAAE,WAAW;4BAClB,MAAM,EAAE,WAAW;4BACnB,IAAI,EAAE,SAAS;yBAChB;qBACF;iBACF;aACF;SACF;QACD,MAAM,EAAE;YACN,gBAAgB,EAAE,EAAE;YACpB,MAAM,EAAE;gBACN,KAAK,EAAE,SAAS;gBAChB,IAAI,EAAE,SAAS;gBACf,eAAe,EAAE,qBAAqB;aACvC;YACD,OAAO,EAAE;gBACP,UAAU,EAAE,UAAU;gBACtB,WAAW,EAAE,UAAU;gBACvB,OAAO,EAAE,WAAW;aACrB;YACD,MAAM,EAAE;gBACN,KAAK,EAAE,EAAE;aACV;YACD,OAAO,EAAE;gBACP,WAAW,EAAE,sBAAsB;aACpC;SACF;KACF;CACF,CAAA"}

package/dist/esm/Calendar/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Calendar';
+export * from './types';
+export * from './defaults';