@alfalab/core-components 25.0.0 → 25.1.0

package/calendar-range/hooks.d.ts

@@ -19,4 +19,9 @@ declare function useStaticViewMonthes({ selectedFrom, selectedTo, defaultMonth,
     handleMonthFromChange: (newMonthFrom: number) => void;
     handleMonthToChange: (newMonthTo: number) => void;
 };
-export { usePopoverViewMonthes, useStaticViewMonthes };
+declare function useSelectionProps(from?: number, to?: number, highlighted?: number): {
+    rangeComplete: boolean;
+    selectedFrom: number | undefined;
+    selectedTo: number | undefined;
+};
+export { usePopoverViewMonthes, useStaticViewMonthes, useSelectionProps };

package/calendar-range/hooks.js

@@ -124,6 +124,24 @@ function useStaticViewMonthes(_a) {
         handleMonthToChange: handleMonthToChange,
     };
 }
+function useSelectionProps(from, to, highlighted) {
+    return React.useMemo(function () {
+        if (from && to) {
+            return {
+                rangeComplete: true,
+                selectedFrom: min__default['default']([from, to]).getTime(),
+                selectedTo: max__default['default']([from, to]).getTime(),
+            };
+        }
+        var dates = [from, to, highlighted].filter(function (date) { return date !== undefined; });
+        return {
+            rangeComplete: false,
+            selectedFrom: from || dates.length === 2 ? min__default['default'](dates).getTime() : undefined,
+            selectedTo: to || dates.length === 2 ? max__default['default'](dates).getTime() : undefined,
+        };
+    }, [from, highlighted, to]);
+}
 
 exports.usePopoverViewMonthes = usePopoverViewMonthes;
+exports.useSelectionProps = useSelectionProps;
 exports.useStaticViewMonthes = useStaticViewMonthes;

package/calendar-range/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./index.module-bcae62ec.js');
+require('./index.module-a9bc9731.js');
 require('react');
 require('classnames');
 require('date-fns/startOfMonth');

package/calendar-range/{index.module-bcae62ec.js → index.module-a9bc9731.js}

@@ -37,7 +37,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"calendar-range__component_jenpd","divider":"calendar-range__divider_jenpd","static":"calendar-range__static_jenpd","calendar":"calendar-range__calendar_jenpd"};
+var styles = {"component":"calendar-range__component_eksd6","divider":"calendar-range__divider_eksd6","static":"calendar-range__static_eksd6","calendar":"calendar-range__calendar_eksd6"};
 require('./views/index.css');
 
 exports.__rest = __rest;

package/calendar-range/modern/Component.js

@@ -10,7 +10,7 @@ import 'date-fns/endOfMonth';
 import '../../calendar-input/modern';
 import '../../date-input/modern';
 import './hooks.js';
-import './index.module-7d74ac8d.js';
+import './index.module-4c141936.js';
 import { CalendarRangePopover } from './views/popover.js';
 import '../../calendar/modern';
 import './utils.js';

package/calendar-range/modern/hooks.d.ts

@@ -19,4 +19,9 @@ declare function useStaticViewMonthes({ selectedFrom, selectedTo, defaultMonth,
     handleMonthFromChange: (newMonthFrom: number) => void;
     handleMonthToChange: (newMonthTo: number) => void;
 };
-export { usePopoverViewMonthes, useStaticViewMonthes };
+declare function useSelectionProps(from?: number, to?: number, highlighted?: number): {
+    rangeComplete: boolean;
+    selectedFrom: number | undefined;
+    selectedTo: number | undefined;
+};
+export { usePopoverViewMonthes, useStaticViewMonthes, useSelectionProps };

package/calendar-range/modern/hooks.js

@@ -109,5 +109,22 @@ function useStaticViewMonthes({ selectedFrom, selectedTo, defaultMonth, }) {
         handleMonthToChange,
     };
 }
+function useSelectionProps(from, to, highlighted) {
+    return useMemo(() => {
+        if (from && to) {
+            return {
+                rangeComplete: true,
+                selectedFrom: min([from, to]).getTime(),
+                selectedTo: max([from, to]).getTime(),
+            };
+        }
+        const dates = [from, to, highlighted].filter(date => date !== undefined);
+        return {
+            rangeComplete: false,
+            selectedFrom: from || dates.length === 2 ? min(dates).getTime() : undefined,
+            selectedTo: to || dates.length === 2 ? max(dates).getTime() : undefined,
+        };
+    }, [from, highlighted, to]);
+}
 
-export { usePopoverViewMonthes, useStaticViewMonthes };
+export { usePopoverViewMonthes, useSelectionProps, useStaticViewMonthes };

package/calendar-range/modern/index.js

@@ -10,7 +10,7 @@ import 'date-fns/endOfMonth';
 import '../../calendar-input/modern';
 import '../../date-input/modern';
 import './hooks.js';
-import './index.module-7d74ac8d.js';
+import './index.module-4c141936.js';
 import './views/popover.js';
 import '../../calendar/modern';
 import './utils.js';

package/calendar-range/modern/index.module-4c141936.js

@@ -0,0 +1,4 @@
+var styles = {"component":"calendar-range__component_eksd6","divider":"calendar-range__divider_eksd6","static":"calendar-range__static_eksd6","calendar":"calendar-range__calendar_eksd6"};
+require('./views/index.css');
+
+export { styles as s };

package/calendar-range/modern/views/index.css

@@ -1,4 +1,4 @@
-/* hash: m35lt */
+/* hash: 13dnh */
 :root {
     --color-light-graphic-primary: #0b1f35;
 }
@@ -34,19 +34,19 @@
 
     /* marker */
 }
-.calendar-range__component_jenpd {
+.calendar-range__component_eksd6 {
     display: flex
 }
-.calendar-range__component_jenpd button[aria-selected='true'] {
+.calendar-range__component_eksd6 button[aria-selected='true'] {
         cursor: pointer;
     }
-.calendar-range__component_jenpd *[class*='errorIcon_'] {
+.calendar-range__component_eksd6 *[class*='errorIcon_'] {
         display: none;
     }
-.calendar-range__component_jenpd *[class*='calendarIcon_'] {
+.calendar-range__component_eksd6 *[class*='calendarIcon_'] {
         margin-right: 0;
     }
-.calendar-range__divider_jenpd {
+.calendar-range__divider_eksd6 {
     height: 48px;
     display: flex;
     align-items: center;
@@ -54,13 +54,13 @@
     width: 16px;
     margin: 0 var(--gap-xs)
 }
-.calendar-range__divider_jenpd:after {
+.calendar-range__divider_eksd6:after {
         content: '';
         display: block;
         width: 100%;
         height: 1px;
         background-color: var(--color-light-graphic-primary);
     }
-.calendar-range__static_jenpd .calendar-range__calendar_jenpd {
+.calendar-range__static_eksd6 .calendar-range__calendar_eksd6 {
         width: var(--calendar-inner-width);
     }

package/calendar-range/modern/views/popover.js

@@ -9,7 +9,7 @@ import 'date-fns/isEqual';
 import { isValidInputValue, parseDateString, CalendarInput } from '../../../calendar-input/modern';
 import { isCompleteDateInput } from '../../../date-input/modern';
 import { usePopoverViewMonthes } from '../hooks.js';
-import { s as styles } from '../index.module-7d74ac8d.js';
+import { s as styles } from '../index.module-4c141936.js';
 
 const CalendarRangePopover = ({ className, defaultMonth = startOfMonth(new Date()).getTime(), minDate, maxDate, valueFrom = '', valueTo = '', onDateFromChange = () => null, onDateToChange = () => null, onChange = () => null, inputFromProps = {}, inputToProps = {}, offDays, events, dataTestId, }) => {
     const [inputFromValue, setInputFromValue] = useState(valueFrom);

package/calendar-range/modern/views/static.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import cn from 'classnames';
 import startOfMonth from 'date-fns/startOfMonth';
 import addMonths from 'date-fns/addMonths';
@@ -9,14 +9,13 @@ import 'date-fns/isEqual';
 import endOfMonth from 'date-fns/endOfMonth';
 import { isValidInputValue, parseDateString, formatDate } from '../../../calendar-input/modern';
 import { isCompleteDateInput, DateInput } from '../../../date-input/modern';
-import { useStaticViewMonthes } from '../hooks.js';
-import { s as styles } from '../index.module-7d74ac8d.js';
+import { useStaticViewMonthes, useSelectionProps } from '../hooks.js';
+import { s as styles } from '../index.module-4c141936.js';
 import { usePeriodWithReset, Calendar } from '../../../calendar/modern';
 import { isDayButton } from '../utils.js';
 
 /* eslint-disable complexity */
 const CalendarRangeStatic = ({ className, defaultMonth = startOfMonth(new Date()).getTime(), minDate, maxDate, valueFrom = '', valueTo = '', onDateFromChange = () => null, onDateToChange = () => null, onChange = () => null, inputFromProps = {}, inputToProps = {}, offDays, events, dataTestId, }) => {
-    const calendarToRef = useRef(null);
     const [inputFromValue, setInputFromValue] = useState(valueFrom);
     const [inputToValue, setInputToValue] = useState(valueTo);
     let dateFrom = isValidInputValue(inputFromValue, minDate, maxDate, offDays)
@@ -31,7 +30,7 @@ const CalendarRangeStatic = ({ className, defaultMonth = startOfMonth(new Date()
     const bothInvalid = isCompleteDateInput(inputFromValue) &&
         isCompleteDateInput(inputToValue) &&
         parseDateString(inputFromValue).getTime() > parseDateString(inputToValue).getTime();
-    const [nextMonthHighlighted, setNextMonthHighlighted] = useState(false);
+    const [highlightedDate, setHighlightedDate] = useState(undefined);
     const period = usePeriodWithReset({
         initialSelectedFrom: dateFrom ? parseDateString(inputFromValue).getTime() : undefined,
         initialSelectedTo: dateTo ? parseDateString(inputToValue).getTime() : undefined,
@@ -57,21 +56,17 @@ const CalendarRangeStatic = ({ className, defaultMonth = startOfMonth(new Date()
     const handleInputToChange = useCallback((_, payload) => {
         setInputToValue(payload.value);
     }, []);
-    const handleCalendarToMouseOver = useCallback((event) => {
+    const handleMouseOver = useCallback((event) => {
         const target = event.target;
-        if (calendarToRef.current?.contains(target)) {
-            const dayHighlighted = isDayButton(target) || isDayButton(target.parentElement);
-            setNextMonthHighlighted(highlighted => {
-                if (highlighted && !dayHighlighted)
-                    return false;
-                if (!highlighted && dayHighlighted)
-                    return true;
-                return highlighted;
-            });
-        }
-        else {
-            setNextMonthHighlighted(false);
+        const mouseOverDayButton = isDayButton(target) || isDayButton(target.parentElement);
+        let date;
+        if (mouseOverDayButton) {
+            const button = target.tagName === 'BUTTON' ? target : target.parentElement;
+            if (button.dataset.date) {
+                date = +button.dataset.date;
+            }
         }
+        setHighlightedDate(date);
     }, []);
     const handleClearFrom = useCallback(() => {
         setInputFromValue('');
@@ -135,24 +130,25 @@ const CalendarRangeStatic = ({ className, defaultMonth = startOfMonth(new Date()
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [inputToValue]);
+    const rangeProps = useSelectionProps(period.selectedFrom, period.selectedTo, highlightedDate);
     const { calendarProps: calendarFromProps, ...dateInputFromProps } = inputFromProps;
     const { calendarProps: calendarToProps, ...dateInputToProps } = inputToProps;
     const CalendarFromComponent = dateInputFromProps.Calendar || Calendar;
     const CalendarToComponent = dateInputToProps.Calendar || Calendar;
     return (
     // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-    React.createElement("div", { className: cn(styles.component, styles.static, className), onMouseOver: handleCalendarToMouseOver, "data-test-id": dataTestId },
+    React.createElement("div", { className: cn(styles.component, styles.static, className), onMouseOver: handleMouseOver, "data-test-id": dataTestId },
         React.createElement("div", null,
             React.createElement(DateInput, Object.assign({}, dateInputFromProps, { mobileMode: dateInputFromProps.mobileMode === 'popover'
                     ? 'input'
                     : dateInputFromProps.mobileMode, value: inputFromValue, onChange: handleInputFromChange, onClear: handleClearFrom, onBlur: handleValidInputFrom, error: bothInvalid || inputFromInvalid || dateInputFromProps.error, clear: true, block: true })),
-            React.createElement(CalendarFromComponent, Object.assign({}, calendarFromProps, { className: cn(styles.calendar, calendarFromProps?.className), month: monthFrom, selectorView: 'month-only', offDays: offDays, events: events, onChange: period.updatePeriod, onMonthChange: handleMonthFromChange, minDate: minDate, maxDate: maxDate && max([maxDate, endOfMonth(subMonths(maxDate, 1))]).getTime(), selectedFrom: period.selectedFrom, selectedTo: period.selectedTo || (nextMonthHighlighted ? monthTo : undefined), rangeComplete: Boolean(period.selectedFrom && period.selectedTo) }))),
+            React.createElement(CalendarFromComponent, Object.assign({}, calendarFromProps, { className: cn(styles.calendar, calendarFromProps?.className), month: monthFrom, selectorView: 'month-only', offDays: offDays, events: events, onChange: period.updatePeriod, onMonthChange: handleMonthFromChange, minDate: minDate, maxDate: maxDate && max([maxDate, endOfMonth(subMonths(maxDate, 1))]).getTime() }, rangeProps))),
         React.createElement("span", { className: styles.divider }),
         React.createElement("div", null,
             React.createElement(DateInput, Object.assign({}, dateInputToProps, { mobileMode: dateInputToProps.mobileMode === 'popover'
                     ? 'input'
                     : dateInputToProps.mobileMode, value: inputToValue, onChange: handleInputToChange, onClear: handleClearTo, onBlur: handleValidInputTo, error: bothInvalid || inputToInvalid, clear: true, block: true })),
-            React.createElement(CalendarToComponent, Object.assign({}, calendarToProps, { className: cn(styles.calendar, calendarToProps?.className), ref: calendarToRef, month: monthTo, selectorView: 'month-only', offDays: offDays, events: events, onChange: period.updatePeriod, onMonthChange: handleMonthToChange, minDate: minDate && startOfMonth(addMonths(minDate, 1)).getTime(), maxDate: maxDate, selectedFrom: period.selectedFrom, selectedTo: period.selectedTo })))));
+            React.createElement(CalendarToComponent, Object.assign({}, calendarToProps, { className: cn(styles.calendar, calendarToProps?.className), month: monthTo, selectorView: 'month-only', offDays: offDays, events: events, onChange: period.updatePeriod, onMonthChange: handleMonthToChange, minDate: minDate && startOfMonth(addMonths(minDate, 1)).getTime(), maxDate: maxDate }, rangeProps)))));
 };
 
 export { CalendarRangeStatic };

package/calendar-range/utils.js

@@ -1,5 +1,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var isDayButton = function (node) { return node && node.tagName === 'BUTTON' && node.dataset.date; };
+var isDayButton = function (node) {
+    return node && node.tagName === 'BUTTON' && node.dataset.date;
+};
 
 exports.isDayButton = isDayButton;

package/calendar-range/views/index.css

@@ -1,4 +1,4 @@
-/* hash: m35lt */
+/* hash: 13dnh */
 :root {
     --color-light-graphic-primary: #0b1f35;
 }
@@ -34,19 +34,19 @@
 
     /* marker */
 }
-.calendar-range__component_jenpd {
+.calendar-range__component_eksd6 {
     display: flex
 }
-.calendar-range__component_jenpd button[aria-selected='true'] {
+.calendar-range__component_eksd6 button[aria-selected='true'] {
         cursor: pointer;
     }
-.calendar-range__component_jenpd *[class*='errorIcon_'] {
+.calendar-range__component_eksd6 *[class*='errorIcon_'] {
         display: none;
     }
-.calendar-range__component_jenpd *[class*='calendarIcon_'] {
+.calendar-range__component_eksd6 *[class*='calendarIcon_'] {
         margin-right: 0;
     }
-.calendar-range__divider_jenpd {
+.calendar-range__divider_eksd6 {
     height: 48px;
     display: flex;
     align-items: center;
@@ -54,13 +54,13 @@
     width: 16px;
     margin: 0 var(--gap-xs)
 }
-.calendar-range__divider_jenpd:after {
+.calendar-range__divider_eksd6:after {
         content: '';
         display: block;
         width: 100%;
         height: 1px;
         background-color: var(--color-light-graphic-primary);
     }
-.calendar-range__static_jenpd .calendar-range__calendar_jenpd {
+.calendar-range__static_eksd6 .calendar-range__calendar_eksd6 {
         width: var(--calendar-inner-width);
     }

package/calendar-range/views/popover.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index_module = require('../index.module-bcae62ec.js');
+var index_module = require('../index.module-a9bc9731.js');
 var React = require('react');
 var cn = require('classnames');
 var startOfMonth = require('date-fns/startOfMonth');

package/calendar-range/views/static.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index_module = require('../index.module-bcae62ec.js');
+var index_module = require('../index.module-a9bc9731.js');
 var React = require('react');
 var cn = require('classnames');
 var startOfMonth = require('date-fns/startOfMonth');
@@ -28,7 +28,6 @@ var endOfMonth__default = /*#__PURE__*/_interopDefaultLegacy(endOfMonth);
 
 var CalendarRangeStatic = function (_a) {
     var className = _a.className, _b = _a.defaultMonth, defaultMonth = _b === void 0 ? startOfMonth__default['default'](new Date()).getTime() : _b, minDate = _a.minDate, maxDate = _a.maxDate, _c = _a.valueFrom, valueFrom = _c === void 0 ? '' : _c, _d = _a.valueTo, valueTo = _d === void 0 ? '' : _d, _e = _a.onDateFromChange, onDateFromChange = _e === void 0 ? function () { return null; } : _e, _f = _a.onDateToChange, onDateToChange = _f === void 0 ? function () { return null; } : _f, _g = _a.onChange, onChange = _g === void 0 ? function () { return null; } : _g, _h = _a.inputFromProps, inputFromProps = _h === void 0 ? {} : _h, _j = _a.inputToProps, inputToProps = _j === void 0 ? {} : _j, offDays = _a.offDays, events = _a.events, dataTestId = _a.dataTestId;
-    var calendarToRef = React.useRef(null);
     var _k = React.useState(valueFrom), inputFromValue = _k[0], setInputFromValue = _k[1];
     var _l = React.useState(valueTo), inputToValue = _l[0], setInputToValue = _l[1];
     var dateFrom = coreComponentsCalendarInput.isValidInputValue(inputFromValue, minDate, maxDate, offDays)
@@ -43,7 +42,7 @@ var CalendarRangeStatic = function (_a) {
     var bothInvalid = coreComponentsDateInput.isCompleteDateInput(inputFromValue) &&
         coreComponentsDateInput.isCompleteDateInput(inputToValue) &&
         coreComponentsCalendarInput.parseDateString(inputFromValue).getTime() > coreComponentsCalendarInput.parseDateString(inputToValue).getTime();
-    var _m = React.useState(false), nextMonthHighlighted = _m[0], setNextMonthHighlighted = _m[1];
+    var _m = React.useState(undefined), highlightedDate = _m[0], setHighlightedDate = _m[1];
     var period = coreComponentsCalendar.usePeriodWithReset({
         initialSelectedFrom: dateFrom ? coreComponentsCalendarInput.parseDateString(inputFromValue).getTime() : undefined,
         initialSelectedTo: dateTo ? coreComponentsCalendarInput.parseDateString(inputToValue).getTime() : undefined,
@@ -69,22 +68,17 @@ var CalendarRangeStatic = function (_a) {
     var handleInputToChange = React.useCallback(function (_, payload) {
         setInputToValue(payload.value);
     }, []);
-    var handleCalendarToMouseOver = React.useCallback(function (event) {
-        var _a;
+    var handleMouseOver = React.useCallback(function (event) {
         var target = event.target;
-        if ((_a = calendarToRef.current) === null || _a === void 0 ? void 0 : _a.contains(target)) {
-            var dayHighlighted_1 = utils.isDayButton(target) || utils.isDayButton(target.parentElement);
-            setNextMonthHighlighted(function (highlighted) {
-                if (highlighted && !dayHighlighted_1)
-                    return false;
-                if (!highlighted && dayHighlighted_1)
-                    return true;
-                return highlighted;
-            });
-        }
-        else {
-            setNextMonthHighlighted(false);
+        var mouseOverDayButton = utils.isDayButton(target) || utils.isDayButton(target.parentElement);
+        var date;
+        if (mouseOverDayButton) {
+            var button = target.tagName === 'BUTTON' ? target : target.parentElement;
+            if (button.dataset.date) {
+                date = +button.dataset.date;
+            }
         }
+        setHighlightedDate(date);
     }, []);
     var handleClearFrom = React.useCallback(function () {
         setInputFromValue('');
@@ -148,24 +142,25 @@ var CalendarRangeStatic = function (_a) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [inputToValue]);
+    var rangeProps = hooks.useSelectionProps(period.selectedFrom, period.selectedTo, highlightedDate);
     var calendarFromProps = inputFromProps.calendarProps, dateInputFromProps = index_module.__rest(inputFromProps, ["calendarProps"]);
     var calendarToProps = inputToProps.calendarProps, dateInputToProps = index_module.__rest(inputToProps, ["calendarProps"]);
     var CalendarFromComponent = dateInputFromProps.Calendar || coreComponentsCalendar.Calendar;
     var CalendarToComponent = dateInputToProps.Calendar || coreComponentsCalendar.Calendar;
     return (
     // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-    React__default['default'].createElement("div", { className: cn__default['default'](index_module.styles.component, index_module.styles.static, className), onMouseOver: handleCalendarToMouseOver, "data-test-id": dataTestId },
+    React__default['default'].createElement("div", { className: cn__default['default'](index_module.styles.component, index_module.styles.static, className), onMouseOver: handleMouseOver, "data-test-id": dataTestId },
         React__default['default'].createElement("div", null,
             React__default['default'].createElement(coreComponentsDateInput.DateInput, index_module.__assign({}, dateInputFromProps, { mobileMode: dateInputFromProps.mobileMode === 'popover'
                     ? 'input'
                     : dateInputFromProps.mobileMode, value: inputFromValue, onChange: handleInputFromChange, onClear: handleClearFrom, onBlur: handleValidInputFrom, error: bothInvalid || inputFromInvalid || dateInputFromProps.error, clear: true, block: true })),
-            React__default['default'].createElement(CalendarFromComponent, index_module.__assign({}, calendarFromProps, { className: cn__default['default'](index_module.styles.calendar, calendarFromProps === null || calendarFromProps === void 0 ? void 0 : calendarFromProps.className), month: monthFrom, selectorView: 'month-only', offDays: offDays, events: events, onChange: period.updatePeriod, onMonthChange: handleMonthFromChange, minDate: minDate, maxDate: maxDate && max__default['default']([maxDate, endOfMonth__default['default'](subMonths__default['default'](maxDate, 1))]).getTime(), selectedFrom: period.selectedFrom, selectedTo: period.selectedTo || (nextMonthHighlighted ? monthTo : undefined), rangeComplete: Boolean(period.selectedFrom && period.selectedTo) }))),
+            React__default['default'].createElement(CalendarFromComponent, index_module.__assign({}, calendarFromProps, { className: cn__default['default'](index_module.styles.calendar, calendarFromProps === null || calendarFromProps === void 0 ? void 0 : calendarFromProps.className), month: monthFrom, selectorView: 'month-only', offDays: offDays, events: events, onChange: period.updatePeriod, onMonthChange: handleMonthFromChange, minDate: minDate, maxDate: maxDate && max__default['default']([maxDate, endOfMonth__default['default'](subMonths__default['default'](maxDate, 1))]).getTime() }, rangeProps))),
         React__default['default'].createElement("span", { className: index_module.styles.divider }),
         React__default['default'].createElement("div", null,
             React__default['default'].createElement(coreComponentsDateInput.DateInput, index_module.__assign({}, dateInputToProps, { mobileMode: dateInputToProps.mobileMode === 'popover'
                     ? 'input'
                     : dateInputToProps.mobileMode, value: inputToValue, onChange: handleInputToChange, onClear: handleClearTo, onBlur: handleValidInputTo, error: bothInvalid || inputToInvalid, clear: true, block: true })),
-            React__default['default'].createElement(CalendarToComponent, index_module.__assign({}, calendarToProps, { className: cn__default['default'](index_module.styles.calendar, calendarToProps === null || calendarToProps === void 0 ? void 0 : calendarToProps.className), ref: calendarToRef, month: monthTo, selectorView: 'month-only', offDays: offDays, events: events, onChange: period.updatePeriod, onMonthChange: handleMonthToChange, minDate: minDate && startOfMonth__default['default'](addMonths__default['default'](minDate, 1)).getTime(), maxDate: maxDate, selectedFrom: period.selectedFrom, selectedTo: period.selectedTo })))));
+            React__default['default'].createElement(CalendarToComponent, index_module.__assign({}, calendarToProps, { className: cn__default['default'](index_module.styles.calendar, calendarToProps === null || calendarToProps === void 0 ? void 0 : calendarToProps.className), month: monthTo, selectorView: 'month-only', offDays: offDays, events: events, onChange: period.updatePeriod, onMonthChange: handleMonthToChange, minDate: minDate && startOfMonth__default['default'](addMonths__default['default'](minDate, 1)).getTime(), maxDate: maxDate }, rangeProps)))));
 };
 
 exports.CalendarRangeStatic = CalendarRangeStatic;

package/calendar-with-skeleton/Component.js

@@ -50,7 +50,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"calendar-with-skeleton__component_1i8o5","calendarVisible":"calendar-with-skeleton__calendarVisible_1i8o5","skeleton":"calendar-with-skeleton__skeleton_1i8o5","header":"calendar-with-skeleton__header_1i8o5","weekDays":"calendar-with-skeleton__weekDays_1i8o5","row":"calendar-with-skeleton__row_1i8o5","enter":"calendar-with-skeleton__enter_1i8o5","enterActive":"calendar-with-skeleton__enterActive_1i8o5","exit":"calendar-with-skeleton__exit_1i8o5","exitActive":"calendar-with-skeleton__exitActive_1i8o5"};
+var styles = {"component":"calendar-with-skeleton__component_129d2","calendarVisible":"calendar-with-skeleton__calendarVisible_129d2","skeleton":"calendar-with-skeleton__skeleton_129d2","header":"calendar-with-skeleton__header_129d2","weekDays":"calendar-with-skeleton__weekDays_129d2","row":"calendar-with-skeleton__row_129d2","enter":"calendar-with-skeleton__enter_129d2","enterActive":"calendar-with-skeleton__enterActive_129d2","exit":"calendar-with-skeleton__exit_129d2","exitActive":"calendar-with-skeleton__exitActive_129d2"};
 require('./index.css');
 
 var CalendarWithSkeleton = React.forwardRef(function (_a, ref) {

package/calendar-with-skeleton/esm/Component.js

@@ -43,7 +43,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"calendar-with-skeleton__component_1i8o5","calendarVisible":"calendar-with-skeleton__calendarVisible_1i8o5","skeleton":"calendar-with-skeleton__skeleton_1i8o5","header":"calendar-with-skeleton__header_1i8o5","weekDays":"calendar-with-skeleton__weekDays_1i8o5","row":"calendar-with-skeleton__row_1i8o5","enter":"calendar-with-skeleton__enter_1i8o5","enterActive":"calendar-with-skeleton__enterActive_1i8o5","exit":"calendar-with-skeleton__exit_1i8o5","exitActive":"calendar-with-skeleton__exitActive_1i8o5"};
+var styles = {"component":"calendar-with-skeleton__component_129d2","calendarVisible":"calendar-with-skeleton__calendarVisible_129d2","skeleton":"calendar-with-skeleton__skeleton_129d2","header":"calendar-with-skeleton__header_129d2","weekDays":"calendar-with-skeleton__weekDays_129d2","row":"calendar-with-skeleton__row_129d2","enter":"calendar-with-skeleton__enter_129d2","enterActive":"calendar-with-skeleton__enterActive_129d2","exit":"calendar-with-skeleton__exit_129d2","exitActive":"calendar-with-skeleton__exitActive_129d2"};
 require('./index.css');
 
 var CalendarWithSkeleton = forwardRef(function (_a, ref) {

package/calendar-with-skeleton/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1gexr */
+/* hash: svbe0 */
 :root {
     --color-light-bg-primary: #fff;
 }
@@ -14,15 +14,15 @@
     --gap-m: 16px;
     --gap-l: 20px;
 }
-.calendar-with-skeleton__component_1i8o5 {
+.calendar-with-skeleton__component_129d2 {
     width: var(--calendar-width);
     height: var(--calendar-height);
     position: relative;
 }
-.calendar-with-skeleton__calendarVisible_1i8o5 {
+.calendar-with-skeleton__calendarVisible_129d2 {
     height: auto;
 }
-.calendar-with-skeleton__skeleton_1i8o5 {
+.calendar-with-skeleton__skeleton_129d2 {
     display: flex;
     flex-direction: column;
     padding: var(--gap-m);
@@ -37,25 +37,25 @@
     background-color: var(--color-light-bg-primary);
     background-clip: content-box;
 }
-.calendar-with-skeleton__header_1i8o5 {
+.calendar-with-skeleton__header_129d2 {
     height: 48px;
     margin-bottom: var(--gap-l);
 }
-.calendar-with-skeleton__weekDays_1i8o5 {
+.calendar-with-skeleton__weekDays_129d2 {
     height: 12px;
     margin-bottom: var(--gap-m);
 }
-.calendar-with-skeleton__row_1i8o5 {
+.calendar-with-skeleton__row_129d2 {
     height: 32px
 }
-.calendar-with-skeleton__row_1i8o5 + .calendar-with-skeleton__row_1i8o5 {
+.calendar-with-skeleton__row_129d2 + .calendar-with-skeleton__row_129d2 {
         margin-top: 10px;
     }
-.calendar-with-skeleton__enter_1i8o5,
-.calendar-with-skeleton__enterActive_1i8o5,
-.calendar-with-skeleton__exit_1i8o5 {
+.calendar-with-skeleton__enter_129d2,
+.calendar-with-skeleton__enterActive_129d2,
+.calendar-with-skeleton__exit_129d2 {
     opacity: 1;
 }
-.calendar-with-skeleton__exitActive_1i8o5 {
+.calendar-with-skeleton__exitActive_129d2 {
     opacity: 0;
 }

package/calendar-with-skeleton/index.css

@@ -1,4 +1,4 @@
-/* hash: 1gexr */
+/* hash: svbe0 */
 :root {
     --color-light-bg-primary: #fff;
 }
@@ -14,15 +14,15 @@
     --gap-m: 16px;
     --gap-l: 20px;
 }
-.calendar-with-skeleton__component_1i8o5 {
+.calendar-with-skeleton__component_129d2 {
     width: var(--calendar-width);
     height: var(--calendar-height);
     position: relative;
 }
-.calendar-with-skeleton__calendarVisible_1i8o5 {
+.calendar-with-skeleton__calendarVisible_129d2 {
     height: auto;
 }
-.calendar-with-skeleton__skeleton_1i8o5 {
+.calendar-with-skeleton__skeleton_129d2 {
     display: flex;
     flex-direction: column;
     padding: var(--gap-m);
@@ -37,25 +37,25 @@
     background-color: var(--color-light-bg-primary);
     background-clip: content-box;
 }
-.calendar-with-skeleton__header_1i8o5 {
+.calendar-with-skeleton__header_129d2 {
     height: 48px;
     margin-bottom: var(--gap-l);
 }
-.calendar-with-skeleton__weekDays_1i8o5 {
+.calendar-with-skeleton__weekDays_129d2 {
     height: 12px;
     margin-bottom: var(--gap-m);
 }
-.calendar-with-skeleton__row_1i8o5 {
+.calendar-with-skeleton__row_129d2 {
     height: 32px
 }
-.calendar-with-skeleton__row_1i8o5 + .calendar-with-skeleton__row_1i8o5 {
+.calendar-with-skeleton__row_129d2 + .calendar-with-skeleton__row_129d2 {
         margin-top: 10px;
     }
-.calendar-with-skeleton__enter_1i8o5,
-.calendar-with-skeleton__enterActive_1i8o5,
-.calendar-with-skeleton__exit_1i8o5 {
+.calendar-with-skeleton__enter_129d2,
+.calendar-with-skeleton__enterActive_129d2,
+.calendar-with-skeleton__exit_129d2 {
     opacity: 1;
 }
-.calendar-with-skeleton__exitActive_1i8o5 {
+.calendar-with-skeleton__exitActive_129d2 {
     opacity: 0;
 }

package/calendar-with-skeleton/modern/Component.js

@@ -4,7 +4,7 @@ import { CSSTransition } from 'react-transition-group';
 import { Skeleton } from '../../skeleton/modern';
 import { Calendar } from '../../calendar/modern';
 
-var styles = {"component":"calendar-with-skeleton__component_1i8o5","calendarVisible":"calendar-with-skeleton__calendarVisible_1i8o5","skeleton":"calendar-with-skeleton__skeleton_1i8o5","header":"calendar-with-skeleton__header_1i8o5","weekDays":"calendar-with-skeleton__weekDays_1i8o5","row":"calendar-with-skeleton__row_1i8o5","enter":"calendar-with-skeleton__enter_1i8o5","enterActive":"calendar-with-skeleton__enterActive_1i8o5","exit":"calendar-with-skeleton__exit_1i8o5","exitActive":"calendar-with-skeleton__exitActive_1i8o5"};
+var styles = {"component":"calendar-with-skeleton__component_129d2","calendarVisible":"calendar-with-skeleton__calendarVisible_129d2","skeleton":"calendar-with-skeleton__skeleton_129d2","header":"calendar-with-skeleton__header_129d2","weekDays":"calendar-with-skeleton__weekDays_129d2","row":"calendar-with-skeleton__row_129d2","enter":"calendar-with-skeleton__enter_129d2","enterActive":"calendar-with-skeleton__enterActive_129d2","exit":"calendar-with-skeleton__exit_129d2","exitActive":"calendar-with-skeleton__exitActive_129d2"};
 require('./index.css');
 
 const CalendarWithSkeleton = forwardRef(({ calendarVisible = true, animate = true, className, ...restProps }, ref) => {