@alfalab/core-components-calendar-range 7.0.6 → 7.0.8

package/esm/components/divider/index.css

@@ -0,0 +1,75 @@
+/* hash: 1udsd */
+:root {
+    --color-light-graphic-primary: #0b1f35;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-xs: 8px;
+}
+:root {
+    --size-s-height: 48px;
+    --size-m-height: 56px;
+    --size-l-height: 64px;
+    --size-xl-height: 72px;
+}
+:root {
+
+    /* Кнопки выбора месяцев и годов */
+
+    /* Шапка */
+
+    /* День */
+
+    /* today */
+
+    /* highlighted */
+
+    /* holidays */
+
+    /* range */
+
+    /* selected */
+
+    /* disabled */
+
+    /* marker */
+}
+.calendar-range__component_1tbg6 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    margin: 0 var(--gap-xs)
+}
+.calendar-range__component_1tbg6:after {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 1px;
+        background-color: var(--color-light-graphic-primary);
+    }
+.calendar-range__outer_1tbg6 {
+    position: relative;
+
+    /* FormControl .above height + margin-bottom */
+    top: 24px;
+}
+.calendar-range__s_1tbg6 {
+    height: var(--size-s-height);
+}
+.calendar-range__m_1tbg6 {
+    height: var(--size-m-height);
+}
+.calendar-range__l_1tbg6 {
+    height: var(--size-l-height);
+}
+.calendar-range__xl_1tbg6 {
+    height: var(--size-xl-height);
+}

package/esm/components/divider/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/esm/components/divider/index.js

@@ -0,0 +1,3 @@
+export { Divider } from './Component.js';
+import 'react';
+import 'classnames';

package/esm/index.js

@@ -1,11 +1,12 @@
 export { CalendarRange } from './Component.js';
-import './index.module-bf0c7948.js';
+import './index.module-1aaed941.js';
 import 'react';
 import './views/popover.js';
 import 'classnames';
 import 'date-fns/startOfMonth';
 import '@alfalab/core-components-calendar-input/esm';
 import '@alfalab/core-components-date-input/esm';
+import './components/divider/Component.js';
 import './hooks.js';
 import 'date-fns/addMonths';
 import 'date-fns/isEqual';

package/esm/{index.module-bf0c7948.js → index.module-1aaed941.js}

@@ -37,7 +37,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"calendar-range__component_17yx8","divider":"calendar-range__divider_17yx8","static":"calendar-range__static_17yx8","calendar":"calendar-range__calendar_17yx8"};
+var styles = {"component":"calendar-range__component_1ci3b","static":"calendar-range__static_1ci3b","calendar":"calendar-range__calendar_1ci3b"};
 require('./views/index.css')
 
 export { __rest as _, __assign as a, styles as s };

package/esm/views/index.css

@@ -1,7 +1,4 @@
-/* hash: z4zdr */
-:root {
-    --color-light-graphic-primary: #0b1f35;
-}
+/* hash: 1y02j */
 :root {
 
     /* Hard */
@@ -10,9 +7,6 @@
 
     /* Hard up */
 }
-:root {
-    --gap-xs: 8px;
-}
 :root {
     --calendar-inner-width: 280px;
 
@@ -36,33 +30,18 @@
 
     /* marker */
 }
-.calendar-range__component_17yx8 {
+.calendar-range__component_1ci3b {
     display: flex
 }
-.calendar-range__component_17yx8 button[aria-selected='true'] {
+.calendar-range__component_1ci3b button[aria-selected='true'] {
         cursor: pointer;
     }
-.calendar-range__component_17yx8 *[class*='errorIcon_'] {
+.calendar-range__component_1ci3b *[class*='errorIcon_'] {
         display: none;
     }
-.calendar-range__component_17yx8 *[class*='calendarIcon_'] {
+.calendar-range__component_1ci3b *[class*='calendarIcon_'] {
         margin-right: 0;
     }
-.calendar-range__divider_17yx8 {
-    height: 48px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    margin: 0 var(--gap-xs)
-}
-.calendar-range__divider_17yx8:after {
-        content: '';
-        display: block;
-        width: 100%;
-        height: 1px;
-        background-color: var(--color-light-graphic-primary);
-    }
-.calendar-range__static_17yx8 .calendar-range__calendar_17yx8 {
+.calendar-range__static_1ci3b .calendar-range__calendar_1ci3b {
         width: var(--calendar-inner-width);
     }

package/esm/views/popover.js

@@ -1,9 +1,10 @@
-import { s as styles, a as __assign } from '../index.module-bf0c7948.js';
+import { s as styles, a as __assign } from '../index.module-1aaed941.js';
 import React, { useState, useCallback, useEffect } from 'react';
 import cn from 'classnames';
 import startOfMonth from 'date-fns/startOfMonth';
 import { isValidInputValue, parseDateString, CalendarInput } from '@alfalab/core-components-calendar-input/esm';
 import { isCompleteDateInput } from '@alfalab/core-components-date-input/esm';
+import { Divider } from '../components/divider/Component.js';
 import { usePopoverViewMonthes } from '../hooks.js';
 import 'date-fns/addMonths';
 import 'date-fns/isEqual';
@@ -106,7 +107,7 @@ var CalendarRangePopover = function (_a) {
     }, [hasValidateError]);
     return (React.createElement("div", { className: cn(styles.component, className), "data-test-id": dataTestId },
         React.createElement(CalendarInput, __assign({}, inputFromProps, { useAnchorWidth: false, calendarPosition: 'popover', popoverPosition: 'bottom-start', error: inputFromInvalid || bothInvalid || inputFromProps.error, onChange: handleFromChange, onInputChange: handleInputFromChange, onBlur: handleInputFromBlur, value: inputFromValue, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events, calendarProps: __assign(__assign({}, inputFromProps.calendarProps), { month: monthFrom, onMonthChange: handleMonthFromChange, selectorView: 'full' }) })),
-        React.createElement("span", { className: styles.divider }),
+        React.createElement(Divider, { inputFromProps: inputFromProps, inputToProps: inputToProps }),
         React.createElement(CalendarInput, __assign({}, inputToProps, { useAnchorWidth: false, calendarPosition: 'popover', popoverPosition: 'bottom-end', error: inputToInvalid || bothInvalid || inputToProps.error, onChange: handleToChange, onInputChange: handleInputToChange, onBlur: handleInputToBlur, value: inputToValue, minDate: dateFrom || minDate, maxDate: maxDate, offDays: offDays, events: events, calendarProps: __assign(__assign({}, inputToProps.calendarProps), { month: monthTo, onMonthChange: handleMonthToChange, selectorView: 'full' }) }))));
 };
 

package/esm/views/static.js

@@ -1,4 +1,4 @@
-import { _ as __rest, s as styles, a as __assign } from '../index.module-bf0c7948.js';
+import { _ as __rest, s as styles, a as __assign } from '../index.module-1aaed941.js';
 import React, { useState, useCallback, useEffect } from 'react';
 import cn from 'classnames';
 import addMonths from 'date-fns/addMonths';
@@ -9,6 +9,7 @@ import subMonths from 'date-fns/subMonths';
 import { usePeriodWithReset, Calendar } from '@alfalab/core-components-calendar/esm';
 import { isValidInputValue, parseDateString, formatDate } from '@alfalab/core-components-calendar-input/esm';
 import { isCompleteDateInput, DateInput } from '@alfalab/core-components-date-input/esm';
+import { Divider } from '../components/divider/Component.js';
 import { useStaticViewMonthes, useSelectionProps } from '../hooks.js';
 import { isDayButton } from '../utils.js';
 import 'date-fns/isEqual';
@@ -151,7 +152,7 @@ var CalendarRangeStatic = function (_a) {
                     ? 'input'
                     : dateInputFromProps.mobileMode, value: inputFromValue, onChange: handleInputFromChange, onClear: handleClearFrom, onBlur: handleValidInputFrom, error: bothInvalid || inputFromInvalid || dateInputFromProps.error, clear: true, block: true })),
             React.createElement(CalendarFromComponent, __assign({}, calendarFromProps, { className: cn(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([maxDate, endOfMonth(subMonths(maxDate, 1))]).getTime() }, rangeProps))),
-        React.createElement("span", { className: styles.divider }),
+        React.createElement(Divider, { inputFromProps: inputFromProps, inputToProps: inputToProps }),
         React.createElement("div", null,
             React.createElement(DateInput, __assign({}, dateInputToProps, { mobileMode: dateInputToProps.mobileMode === 'popover'
                     ? 'input'

package/hooks.js

@@ -8,6 +8,15 @@ var min = require('date-fns/min');
 var startOfMonth = require('date-fns/startOfMonth');
 var subMonths = require('date-fns/subMonths');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var addMonths__default = /*#__PURE__*/_interopDefaultCompat(addMonths);
+var isEqual__default = /*#__PURE__*/_interopDefaultCompat(isEqual);
+var max__default = /*#__PURE__*/_interopDefaultCompat(max);
+var min__default = /*#__PURE__*/_interopDefaultCompat(min);
+var startOfMonth__default = /*#__PURE__*/_interopDefaultCompat(startOfMonth);
+var subMonths__default = /*#__PURE__*/_interopDefaultCompat(subMonths);
+
 function usePopoverViewMonthes(_a) {
     var dateFrom = _a.dateFrom, dateTo = _a.dateTo, defaultMonth = _a.defaultMonth, resetKey = _a.resetKey;
     var _b = React.useState(), monthFrom = _b[0], setMonthFrom = _b[1];
@@ -25,10 +34,10 @@ function usePopoverViewMonthes(_a) {
         }
     }, [dateFrom]);
     React.useEffect(function () {
-        setMonthFrom(dateFrom ? startOfMonth(dateFrom).getTime() : defaultMonth);
+        setMonthFrom(dateFrom ? startOfMonth__default.default(dateFrom).getTime() : defaultMonth);
     }, [defaultMonth, dateFrom, resetKey]);
     React.useEffect(function () {
-        setMonthTo(dateTo ? startOfMonth(dateTo).getTime() : monthFrom);
+        setMonthTo(dateTo ? startOfMonth__default.default(dateTo).getTime() : monthFrom);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [dateTo, resetKey]);
     return {
@@ -44,44 +53,44 @@ function useStaticViewMonthes(_a) {
      * Если указана начальная дата — левый месяц равен ей, иначе используется дата конца.
      * Если обе даты не указаны, то используется дефолтный месяц
      */
-    var initialMonthFrom = React.useMemo(function () { return startOfMonth(selectedFrom || selectedTo || defaultMonth).getTime(); }, 
+    var initialMonthFrom = React.useMemo(function () { return startOfMonth__default.default(selectedFrom || selectedTo || defaultMonth).getTime(); }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
     /**
      * Правый месяц должен быть как минимум на 1 месяц больше левого
      */
     var initialMonthTo = React.useMemo(function () {
-        return max([
-            selectedTo ? startOfMonth(selectedTo) : 0,
-            addMonths(initialMonthFrom, 1),
+        return max__default.default([
+            selectedTo ? startOfMonth__default.default(selectedTo) : 0,
+            addMonths__default.default(initialMonthFrom, 1),
         ]).getTime();
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
     if (defaultMonthPosition === 'right') {
         initialMonthTo = initialMonthFrom;
-        initialMonthFrom = subMonths(initialMonthFrom, 1).getTime();
+        initialMonthFrom = subMonths__default.default(initialMonthFrom, 1).getTime();
     }
     var _b = React.useState(initialMonthFrom), monthFrom = _b[0], setMonthFrom = _b[1];
     var _c = React.useState(initialMonthTo), monthTo = _c[0], setMonthTo = _c[1];
     var handleMonthFromChange = React.useCallback(function (newMonthFrom) {
         setMonthFrom(newMonthFrom);
-        if (monthTo && isEqual(newMonthFrom, monthTo)) {
-            var nextMonth = addMonths(newMonthFrom, 1).getTime();
+        if (monthTo && isEqual__default.default(newMonthFrom, monthTo)) {
+            var nextMonth = addMonths__default.default(newMonthFrom, 1).getTime();
             setMonthTo(nextMonth);
         }
     }, [monthTo]);
     var handleMonthToChange = React.useCallback(function (newMonthTo) {
         setMonthTo(newMonthTo);
-        if (monthFrom && isEqual(newMonthTo, monthFrom)) {
-            var prevMonth = subMonths(newMonthTo, 1).getTime();
+        if (monthFrom && isEqual__default.default(newMonthTo, monthFrom)) {
+            var prevMonth = subMonths__default.default(newMonthTo, 1).getTime();
             setMonthFrom(prevMonth);
         }
     }, [monthFrom]);
     // eslint-disable-next-line complexity
     React.useEffect(function () {
-        var selectedFromMonth = selectedFrom ? startOfMonth(selectedFrom).getTime() : undefined;
-        var selectedToMonth = selectedTo ? startOfMonth(selectedTo).getTime() : undefined;
+        var selectedFromMonth = selectedFrom ? startOfMonth__default.default(selectedFrom).getTime() : undefined;
+        var selectedToMonth = selectedTo ? startOfMonth__default.default(selectedTo).getTime() : undefined;
         // Проверяем, показываются ли выбранные месяцы в левой или правой части компонента
         var fromMonthOnLeft = selectedFromMonth && selectedFromMonth === monthFrom;
         var fromMonthOnRight = selectedFromMonth && selectedFromMonth === monthTo;
@@ -90,25 +99,25 @@ function useStaticViewMonthes(_a) {
         var fromMonthOnScreen = fromMonthOnLeft || fromMonthOnRight;
         var toMonthOnScreen = toMonthOnLeft || toMonthOnRight;
         if (fromMonthOnLeft && toMonthOnLeft) {
-            setMonthTo(max([addMonths(selectedFromMonth, 1), monthTo]).getTime());
+            setMonthTo(max__default.default([addMonths__default.default(selectedFromMonth, 1), monthTo]).getTime());
             return;
         }
         if (fromMonthOnRight && toMonthOnRight) {
-            setMonthFrom(min([subMonths(selectedToMonth, 1), monthFrom]).getTime());
+            setMonthFrom(min__default.default([subMonths__default.default(selectedToMonth, 1), monthFrom]).getTime());
             return;
         }
         if (selectedFromMonth && selectedToMonth) {
             setMonthFrom(selectedFromMonth);
-            setMonthTo(max([addMonths(selectedFromMonth, 1), selectedToMonth]).getTime());
+            setMonthTo(max__default.default([addMonths__default.default(selectedFromMonth, 1), selectedToMonth]).getTime());
             return;
         }
         if (selectedFromMonth && !selectedToMonth && !fromMonthOnScreen) {
             setMonthFrom(selectedFromMonth);
-            setMonthTo(max([addMonths(selectedFromMonth, 1), monthTo]).getTime());
+            setMonthTo(max__default.default([addMonths__default.default(selectedFromMonth, 1), monthTo]).getTime());
         }
         if (selectedToMonth && !selectedFromMonth && !toMonthOnScreen) {
             setMonthTo(selectedToMonth);
-            setMonthFrom(min([subMonths(selectedToMonth, 1), monthFrom]).getTime());
+            setMonthFrom(min__default.default([subMonths__default.default(selectedToMonth, 1), monthFrom]).getTime());
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [selectedFrom, selectedTo]);
@@ -124,15 +133,15 @@ function useSelectionProps(from, to, highlighted) {
         if (from && to) {
             return {
                 rangeComplete: true,
-                selectedFrom: min([from, to]).getTime(),
-                selectedTo: max([from, to]).getTime(),
+                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(dates).getTime() : undefined,
-            selectedTo: to || dates.length === 2 ? max(dates).getTime() : undefined,
+            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]);
 }

package/index.js

@@ -1,13 +1,14 @@
 'use strict';
 
 var Component = require('./Component.js');
-require('./index.module-3391f602.js');
+require('./index.module-255b4286.js');
 require('react');
 require('./views/popover.js');
 require('classnames');
 require('date-fns/startOfMonth');
 require('@alfalab/core-components-calendar-input');
 require('@alfalab/core-components-date-input');
+require('./components/divider/Component.js');
 require('./hooks.js');
 require('date-fns/addMonths');
 require('date-fns/isEqual');

package/{index.module-3391f602.js → index.module-255b4286.js}

@@ -39,7 +39,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"calendar-range__component_17yx8","divider":"calendar-range__divider_17yx8","static":"calendar-range__static_17yx8","calendar":"calendar-range__calendar_17yx8"};
+var styles = {"component":"calendar-range__component_1ci3b","static":"calendar-range__static_1ci3b","calendar":"calendar-range__calendar_1ci3b"};
 require('./views/index.css')
 
 exports.__rest = __rest;

package/modern/Component.js

@@ -5,13 +5,14 @@ import 'classnames';
 import 'date-fns/startOfMonth';
 import '@alfalab/core-components-calendar-input/modern';
 import '@alfalab/core-components-date-input/modern';
+import './components/divider/Component.js';
 import './hooks.js';
 import 'date-fns/addMonths';
 import 'date-fns/isEqual';
 import 'date-fns/max';
 import 'date-fns/min';
 import 'date-fns/subMonths';
-import './index.module-5493f8ee.js';
+import './index.module-491eb220.js';
 import 'date-fns/endOfMonth';
 import '@alfalab/core-components-calendar/modern';
 import './utils.js';

package/modern/components/divider/Component.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { CalendarRangeProps } from "../../Component";
+type Props = {
+    inputFromProps?: CalendarRangeProps['inputFromProps'];
+    inputToProps?: CalendarRangeProps['inputToProps'];
+};
+declare const Divider: FC<Props>;
+export { Divider };

package/modern/components/divider/Component.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import cn from 'classnames';
+
+const styles = {"component":"calendar-range__component_1tbg6","outer":"calendar-range__outer_1tbg6","s":"calendar-range__s_1tbg6","m":"calendar-range__m_1tbg6","l":"calendar-range__l_1tbg6","xl":"calendar-range__xl_1tbg6"};
+require('./index.css')
+
+const Divider = ({ inputFromProps, inputToProps }) => {
+    const outer = inputFromProps?.label &&
+        inputFromProps?.labelView === 'outer' &&
+        inputToProps?.label &&
+        inputToProps?.labelView === 'outer';
+    const size = inputFromProps?.size || inputToProps?.size || 's';
+    return React.createElement("span", { className: cn(styles.component, styles[size], { [styles.outer]: outer }) });
+};
+
+export { Divider };

package/modern/components/divider/index.css

@@ -0,0 +1,75 @@
+/* hash: 1udsd */
+:root {
+    --color-light-graphic-primary: #0b1f35;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-xs: 8px;
+}
+:root {
+    --size-s-height: 48px;
+    --size-m-height: 56px;
+    --size-l-height: 64px;
+    --size-xl-height: 72px;
+}
+:root {
+
+    /* Кнопки выбора месяцев и годов */
+
+    /* Шапка */
+
+    /* День */
+
+    /* today */
+
+    /* highlighted */
+
+    /* holidays */
+
+    /* range */
+
+    /* selected */
+
+    /* disabled */
+
+    /* marker */
+}
+.calendar-range__component_1tbg6 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    margin: 0 var(--gap-xs)
+}
+.calendar-range__component_1tbg6:after {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 1px;
+        background-color: var(--color-light-graphic-primary);
+    }
+.calendar-range__outer_1tbg6 {
+    position: relative;
+
+    /* FormControl .above height + margin-bottom */
+    top: 24px;
+}
+.calendar-range__s_1tbg6 {
+    height: var(--size-s-height);
+}
+.calendar-range__m_1tbg6 {
+    height: var(--size-m-height);
+}
+.calendar-range__l_1tbg6 {
+    height: var(--size-l-height);
+}
+.calendar-range__xl_1tbg6 {
+    height: var(--size-xl-height);
+}

package/modern/components/divider/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/modern/components/divider/index.js

@@ -0,0 +1,3 @@
+export { Divider } from './Component.js';
+import 'react';
+import 'classnames';

package/modern/index.js

@@ -5,13 +5,14 @@ import 'classnames';
 import 'date-fns/startOfMonth';
 import '@alfalab/core-components-calendar-input/modern';
 import '@alfalab/core-components-date-input/modern';
+import './components/divider/Component.js';
 import './hooks.js';
 import 'date-fns/addMonths';
 import 'date-fns/isEqual';
 import 'date-fns/max';
 import 'date-fns/min';
 import 'date-fns/subMonths';
-import './index.module-5493f8ee.js';
+import './index.module-491eb220.js';
 import './views/static.js';
 import 'date-fns/endOfMonth';
 import '@alfalab/core-components-calendar/modern';

package/modern/index.module-491eb220.js

@@ -0,0 +1,4 @@
+const styles = {"component":"calendar-range__component_1ci3b","static":"calendar-range__static_1ci3b","calendar":"calendar-range__calendar_1ci3b"};
+require('./views/index.css')
+
+export { styles as s };

package/modern/views/index.css

@@ -1,7 +1,4 @@
-/* hash: z4zdr */
-:root {
-    --color-light-graphic-primary: #0b1f35;
-}
+/* hash: 1y02j */
 :root {
 
     /* Hard */
@@ -10,9 +7,6 @@
 
     /* Hard up */
 }
-:root {
-    --gap-xs: 8px;
-}
 :root {
     --calendar-inner-width: 280px;
 
@@ -36,33 +30,18 @@
 
     /* marker */
 }
-.calendar-range__component_17yx8 {
+.calendar-range__component_1ci3b {
     display: flex
 }
-.calendar-range__component_17yx8 button[aria-selected='true'] {
+.calendar-range__component_1ci3b button[aria-selected='true'] {
         cursor: pointer;
     }
-.calendar-range__component_17yx8 *[class*='errorIcon_'] {
+.calendar-range__component_1ci3b *[class*='errorIcon_'] {
         display: none;
     }
-.calendar-range__component_17yx8 *[class*='calendarIcon_'] {
+.calendar-range__component_1ci3b *[class*='calendarIcon_'] {
         margin-right: 0;
     }
-.calendar-range__divider_17yx8 {
-    height: 48px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    margin: 0 var(--gap-xs)
-}
-.calendar-range__divider_17yx8:after {
-        content: '';
-        display: block;
-        width: 100%;
-        height: 1px;
-        background-color: var(--color-light-graphic-primary);
-    }
-.calendar-range__static_17yx8 .calendar-range__calendar_17yx8 {
+.calendar-range__static_1ci3b .calendar-range__calendar_1ci3b {
         width: var(--calendar-inner-width);
     }

package/modern/views/popover.js

@@ -3,8 +3,9 @@ import cn from 'classnames';
 import startOfMonth from 'date-fns/startOfMonth';
 import { isValidInputValue, parseDateString, CalendarInput } from '@alfalab/core-components-calendar-input/modern';
 import { isCompleteDateInput } from '@alfalab/core-components-date-input/modern';
+import { Divider } from '../components/divider/Component.js';
 import { usePopoverViewMonthes } from '../hooks.js';
-import { s as styles } from '../index.module-5493f8ee.js';
+import { s as styles } from '../index.module-491eb220.js';
 import 'date-fns/addMonths';
 import 'date-fns/isEqual';
 import 'date-fns/max';
@@ -110,7 +111,7 @@ const CalendarRangePopover = ({ className, defaultMonth = startOfMonth(new Date(
                 onMonthChange: handleMonthFromChange,
                 selectorView: 'full',
             } }),
-        React.createElement("span", { className: styles.divider }),
+        React.createElement(Divider, { inputFromProps: inputFromProps, inputToProps: inputToProps }),
         React.createElement(CalendarInput, { ...inputToProps, useAnchorWidth: false, calendarPosition: 'popover', popoverPosition: 'bottom-end', error: inputToInvalid || bothInvalid || inputToProps.error, onChange: handleToChange, onInputChange: handleInputToChange, onBlur: handleInputToBlur, value: inputToValue, minDate: dateFrom || minDate, maxDate: maxDate, offDays: offDays, events: events, calendarProps: {
                 ...inputToProps.calendarProps,
                 month: monthTo,

package/modern/views/static.js

@@ -8,9 +8,10 @@ import subMonths from 'date-fns/subMonths';
 import { usePeriodWithReset, Calendar } from '@alfalab/core-components-calendar/modern';
 import { isValidInputValue, parseDateString, formatDate } from '@alfalab/core-components-calendar-input/modern';
 import { isCompleteDateInput, DateInput } from '@alfalab/core-components-date-input/modern';
+import { Divider } from '../components/divider/Component.js';
 import { useStaticViewMonthes, useSelectionProps } from '../hooks.js';
 import { isDayButton } from '../utils.js';
-import { s as styles } from '../index.module-5493f8ee.js';
+import { s as styles } from '../index.module-491eb220.js';
 import 'date-fns/isEqual';
 import 'date-fns/min';
 
@@ -151,7 +152,7 @@ const CalendarRangeStatic = ({ className, defaultMonth = startOfMonth(new Date()
                     ? 'input'
                     : dateInputFromProps.mobileMode, value: inputFromValue, onChange: handleInputFromChange, onClear: handleClearFrom, onBlur: handleValidInputFrom, error: bothInvalid || inputFromInvalid || dateInputFromProps.error, clear: true, block: true }),
             React.createElement(CalendarFromComponent, { ...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(Divider, { inputFromProps: inputFromProps, inputToProps: inputToProps }),
         React.createElement("div", null,
             React.createElement(DateInput, { ...dateInputToProps, mobileMode: dateInputToProps.mobileMode === 'popover'
                     ? 'input'

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-calendar-range",
-    "version": "7.0.6",
+    "version": "7.0.8",
     "description": "Calendar range component",
     "keywords": [],
     "license": "MIT",
@@ -18,9 +18,9 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-calendar": "^6.1.15",
-        "@alfalab/core-components-calendar-input": "^8.1.3",
-        "@alfalab/core-components-date-input": "^4.1.0",
+        "@alfalab/core-components-calendar": "^6.2.1",
+        "@alfalab/core-components-calendar-input": "^8.2.1",
+        "@alfalab/core-components-date-input": "^4.1.2",
         "classnames": "^2.3.1",
         "date-fns": "^2.16.1"
     }