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

package/Component.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index_module = require('./index.module-24e4de4c.js');
+var index_module = require('./index.module-255b4286.js');
 var React = require('react');
 var views_popover = require('./views/popover.js');
 var views_static = require('./views/static.js');
@@ -8,6 +8,7 @@ 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/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/components/divider/Component.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var React = require('react');
+var cn = require('classnames');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+
+var 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')
+
+var Divider = function (_a) {
+    var _b;
+    var inputFromProps = _a.inputFromProps, inputToProps = _a.inputToProps;
+    var outer = (inputFromProps === null || inputFromProps === void 0 ? void 0 : inputFromProps.label) &&
+        (inputFromProps === null || inputFromProps === void 0 ? void 0 : inputFromProps.labelView) === 'outer' &&
+        (inputToProps === null || inputToProps === void 0 ? void 0 : inputToProps.label) &&
+        (inputToProps === null || inputToProps === void 0 ? void 0 : inputToProps.labelView) === 'outer';
+    var size = (inputFromProps === null || inputFromProps === void 0 ? void 0 : inputFromProps.size) || (inputToProps === null || inputToProps === void 0 ? void 0 : inputToProps.size) || 's';
+    return React__default.default.createElement("span", { className: cn__default.default(styles.component, styles[size], (_b = {}, _b[styles.outer] = outer, _b)) });
+};
+
+exports.Divider = Divider;

package/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/components/divider/index.d.ts

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

package/components/divider/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var components_divider_Component = require('./Component.js');
+require('react');
+require('classnames');
+
+
+
+exports.Divider = components_divider_Component.Divider;

package/cssm/Component.js

@@ -8,6 +8,8 @@ require('classnames');
 require('date-fns/startOfMonth');
 require('@alfalab/core-components-calendar-input/cssm');
 require('@alfalab/core-components-date-input/cssm');
+require('./components/divider/Component.js');
+require('./components/divider/index.module.css');
 require('./hooks.js');
 require('date-fns/addMonths');
 require('date-fns/isEqual');

package/cssm/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/cssm/components/divider/Component.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var React = require('react');
+var cn = require('classnames');
+var styles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var Divider = function (_a) {
+    var _b;
+    var inputFromProps = _a.inputFromProps, inputToProps = _a.inputToProps;
+    var outer = (inputFromProps === null || inputFromProps === void 0 ? void 0 : inputFromProps.label) &&
+        (inputFromProps === null || inputFromProps === void 0 ? void 0 : inputFromProps.labelView) === 'outer' &&
+        (inputToProps === null || inputToProps === void 0 ? void 0 : inputToProps.label) &&
+        (inputToProps === null || inputToProps === void 0 ? void 0 : inputToProps.labelView) === 'outer';
+    var size = (inputFromProps === null || inputFromProps === void 0 ? void 0 : inputFromProps.size) || (inputToProps === null || inputToProps === void 0 ? void 0 : inputToProps.size) || 's';
+    return React__default.default.createElement("span", { className: cn__default.default(styles__default.default.component, styles__default.default[size], (_b = {}, _b[styles__default.default.outer] = outer, _b)) });
+};
+
+exports.Divider = Divider;

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

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

package/cssm/components/divider/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var components_divider_Component = require('./Component.js');
+require('react');
+require('classnames');
+require('./index.module.css');
+
+
+
+exports.Divider = components_divider_Component.Divider;

package/cssm/components/divider/index.module.css

@@ -0,0 +1,74 @@
+: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 */
+}
+.component {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    margin: 0 var(--gap-xs)
+}
+.component:after {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 1px;
+        background-color: var(--color-light-graphic-primary);
+    }
+.outer {
+    position: relative;
+
+    /* FormControl .above height + margin-bottom */
+    top: 24px;
+}
+.s {
+    height: var(--size-s-height);
+}
+.m {
+    height: var(--size-m-height);
+}
+.l {
+    height: var(--size-l-height);
+}
+.xl {
+    height: var(--size-xl-height);
+}

package/cssm/index.js

@@ -8,6 +8,8 @@ require('classnames');
 require('date-fns/startOfMonth');
 require('@alfalab/core-components-calendar-input/cssm');
 require('@alfalab/core-components-date-input/cssm');
+require('./components/divider/Component.js');
+require('./components/divider/index.module.css');
 require('./hooks.js');
 require('date-fns/addMonths');
 require('date-fns/isEqual');

package/cssm/views/index.module.css

@@ -1,6 +1,3 @@
-:root {
-    --color-light-graphic-primary: #0b1f35;
-}
 :root {
 
     /* Hard */
@@ -9,9 +6,6 @@
 
     /* Hard up */
 }
-:root {
-    --gap-xs: 8px;
-}
 :root {
     --calendar-inner-width: 280px;
 
@@ -47,21 +41,6 @@
 .component *[class*='calendarIcon_'] {
         margin-right: 0;
     }
-.divider {
-    height: 48px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    margin: 0 var(--gap-xs)
-}
-.divider:after {
-        content: '';
-        display: block;
-        width: 100%;
-        height: 1px;
-        background-color: var(--color-light-graphic-primary);
-    }
 .static .calendar {
         width: var(--calendar-inner-width);
     }

package/cssm/views/popover.js

@@ -6,8 +6,10 @@ var cn = require('classnames');
 var startOfMonth = require('date-fns/startOfMonth');
 var coreComponentsCalendarInput = require('@alfalab/core-components-calendar-input/cssm');
 var coreComponentsDateInput = require('@alfalab/core-components-date-input/cssm');
+var components_divider_Component = require('../components/divider/Component.js');
 var hooks = require('../hooks.js');
 var styles = require('./index.module.css');
+require('../components/divider/index.module.css');
 require('date-fns/addMonths');
 require('date-fns/isEqual');
 require('date-fns/max');
@@ -116,7 +118,7 @@ var CalendarRangePopover = function (_a) {
     }, [hasValidateError]);
     return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className), "data-test-id": dataTestId },
         React__default.default.createElement(coreComponentsCalendarInput.CalendarInput, tslib_es6.__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: tslib_es6.__assign(tslib_es6.__assign({}, inputFromProps.calendarProps), { month: monthFrom, onMonthChange: handleMonthFromChange, selectorView: 'full' }) })),
-        React__default.default.createElement("span", { className: styles__default.default.divider }),
+        React__default.default.createElement(components_divider_Component.Divider, { inputFromProps: inputFromProps, inputToProps: inputToProps }),
         React__default.default.createElement(coreComponentsCalendarInput.CalendarInput, tslib_es6.__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: tslib_es6.__assign(tslib_es6.__assign({}, inputToProps.calendarProps), { month: monthTo, onMonthChange: handleMonthToChange, selectorView: 'full' }) }))));
 };
 

package/cssm/views/static.js

@@ -11,9 +11,11 @@ var subMonths = require('date-fns/subMonths');
 var coreComponentsCalendar = require('@alfalab/core-components-calendar/cssm');
 var coreComponentsCalendarInput = require('@alfalab/core-components-calendar-input/cssm');
 var coreComponentsDateInput = require('@alfalab/core-components-date-input/cssm');
+var components_divider_Component = require('../components/divider/Component.js');
 var hooks = require('../hooks.js');
 var utils = require('../utils.js');
 var styles = require('./index.module.css');
+require('../components/divider/index.module.css');
 require('date-fns/isEqual');
 require('date-fns/min');
 
@@ -165,7 +167,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__default.default.createElement(CalendarFromComponent, tslib_es6.__assign({}, calendarFromProps, { className: cn__default.default(styles__default.default.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: styles__default.default.divider }),
+        React__default.default.createElement(components_divider_Component.Divider, { inputFromProps: inputFromProps, inputToProps: inputToProps }),
         React__default.default.createElement("div", null,
             React__default.default.createElement(coreComponentsDateInput.DateInput, tslib_es6.__assign({}, dateInputToProps, { mobileMode: dateInputToProps.mobileMode === 'popover'
                     ? 'input'

package/esm/Component.js

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign } from './index.module-b9db88e5.js';
+import { _ as __rest, a as __assign } from './index.module-1aaed941.js';
 import React from 'react';
 import { CalendarRangePopover } from './views/popover.js';
 import { CalendarRangeStatic } from './views/static.js';
@@ -6,6 +6,7 @@ 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/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/esm/components/divider/Component.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import cn from 'classnames';
+
+var 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')
+
+var Divider = function (_a) {
+    var _b;
+    var inputFromProps = _a.inputFromProps, inputToProps = _a.inputToProps;
+    var outer = (inputFromProps === null || inputFromProps === void 0 ? void 0 : inputFromProps.label) &&
+        (inputFromProps === null || inputFromProps === void 0 ? void 0 : inputFromProps.labelView) === 'outer' &&
+        (inputToProps === null || inputToProps === void 0 ? void 0 : inputToProps.label) &&
+        (inputToProps === null || inputToProps === void 0 ? void 0 : inputToProps.labelView) === 'outer';
+    var size = (inputFromProps === null || inputFromProps === void 0 ? void 0 : inputFromProps.size) || (inputToProps === null || inputToProps === void 0 ? void 0 : inputToProps.size) || 's';
+    return React.createElement("span", { className: cn(styles.component, styles[size], (_b = {}, _b[styles.outer] = outer, _b)) });
+};
+
+export { Divider };

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-b9db88e5.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-b9db88e5.js → index.module-1aaed941.js}

@@ -37,7 +37,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"calendar-range__component_qeu3v","divider":"calendar-range__divider_qeu3v","static":"calendar-range__static_qeu3v","calendar":"calendar-range__calendar_qeu3v"};
+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: 142zt */
-: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_qeu3v {
+.calendar-range__component_1ci3b {
     display: flex
 }
-.calendar-range__component_qeu3v button[aria-selected='true'] {
+.calendar-range__component_1ci3b button[aria-selected='true'] {
         cursor: pointer;
     }
-.calendar-range__component_qeu3v *[class*='errorIcon_'] {
+.calendar-range__component_1ci3b *[class*='errorIcon_'] {
         display: none;
     }
-.calendar-range__component_qeu3v *[class*='calendarIcon_'] {
+.calendar-range__component_1ci3b *[class*='calendarIcon_'] {
         margin-right: 0;
     }
-.calendar-range__divider_qeu3v {
-    height: 48px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    margin: 0 var(--gap-xs)
-}
-.calendar-range__divider_qeu3v:after {
-        content: '';
-        display: block;
-        width: 100%;
-        height: 1px;
-        background-color: var(--color-light-graphic-primary);
-    }
-.calendar-range__static_qeu3v .calendar-range__calendar_qeu3v {
+.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-b9db88e5.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-b9db88e5.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/index.js

@@ -1,13 +1,14 @@
 'use strict';
 
 var Component = require('./Component.js');
-require('./index.module-24e4de4c.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-24e4de4c.js → index.module-255b4286.js}

@@ -39,7 +39,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"calendar-range__component_qeu3v","divider":"calendar-range__divider_qeu3v","static":"calendar-range__static_qeu3v","calendar":"calendar-range__calendar_qeu3v"};
+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-8c524c02.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-8c524c02.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: 142zt */
-: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_qeu3v {
+.calendar-range__component_1ci3b {
     display: flex
 }
-.calendar-range__component_qeu3v button[aria-selected='true'] {
+.calendar-range__component_1ci3b button[aria-selected='true'] {
         cursor: pointer;
     }
-.calendar-range__component_qeu3v *[class*='errorIcon_'] {
+.calendar-range__component_1ci3b *[class*='errorIcon_'] {
         display: none;
     }
-.calendar-range__component_qeu3v *[class*='calendarIcon_'] {
+.calendar-range__component_1ci3b *[class*='calendarIcon_'] {
         margin-right: 0;
     }
-.calendar-range__divider_qeu3v {
-    height: 48px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    margin: 0 var(--gap-xs)
-}
-.calendar-range__divider_qeu3v:after {
-        content: '';
-        display: block;
-        width: 100%;
-        height: 1px;
-        background-color: var(--color-light-graphic-primary);
-    }
-.calendar-range__static_qeu3v .calendar-range__calendar_qeu3v {
+.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-8c524c02.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-8c524c02.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.7",
+    "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.2.0",
-        "@alfalab/core-components-calendar-input": "^8.2.0",
-        "@alfalab/core-components-date-input": "^4.1.1",
+        "@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"
     }

package/views/index.css

@@ -1,7 +1,4 @@
-/* hash: 142zt */
-: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_qeu3v {
+.calendar-range__component_1ci3b {
     display: flex
 }
-.calendar-range__component_qeu3v button[aria-selected='true'] {
+.calendar-range__component_1ci3b button[aria-selected='true'] {
         cursor: pointer;
     }
-.calendar-range__component_qeu3v *[class*='errorIcon_'] {
+.calendar-range__component_1ci3b *[class*='errorIcon_'] {
         display: none;
     }
-.calendar-range__component_qeu3v *[class*='calendarIcon_'] {
+.calendar-range__component_1ci3b *[class*='calendarIcon_'] {
         margin-right: 0;
     }
-.calendar-range__divider_qeu3v {
-    height: 48px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    margin: 0 var(--gap-xs)
-}
-.calendar-range__divider_qeu3v:after {
-        content: '';
-        display: block;
-        width: 100%;
-        height: 1px;
-        background-color: var(--color-light-graphic-primary);
-    }
-.calendar-range__static_qeu3v .calendar-range__calendar_qeu3v {
+.calendar-range__static_1ci3b .calendar-range__calendar_1ci3b {
         width: var(--calendar-inner-width);
     }

package/views/popover.js

@@ -1,11 +1,12 @@
 'use strict';
 
-var index_module = require('../index.module-24e4de4c.js');
+var index_module = require('../index.module-255b4286.js');
 var React = require('react');
 var cn = require('classnames');
 var startOfMonth = require('date-fns/startOfMonth');
 var coreComponentsCalendarInput = require('@alfalab/core-components-calendar-input');
 var coreComponentsDateInput = require('@alfalab/core-components-date-input');
+var components_divider_Component = require('../components/divider/Component.js');
 var hooks = require('../hooks.js');
 require('date-fns/addMonths');
 require('date-fns/isEqual');
@@ -114,7 +115,7 @@ var CalendarRangePopover = function (_a) {
     }, [hasValidateError]);
     return (React__default.default.createElement("div", { className: cn__default.default(index_module.styles.component, className), "data-test-id": dataTestId },
         React__default.default.createElement(coreComponentsCalendarInput.CalendarInput, index_module.__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: index_module.__assign(index_module.__assign({}, inputFromProps.calendarProps), { month: monthFrom, onMonthChange: handleMonthFromChange, selectorView: 'full' }) })),
-        React__default.default.createElement("span", { className: index_module.styles.divider }),
+        React__default.default.createElement(components_divider_Component.Divider, { inputFromProps: inputFromProps, inputToProps: inputToProps }),
         React__default.default.createElement(coreComponentsCalendarInput.CalendarInput, index_module.__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: index_module.__assign(index_module.__assign({}, inputToProps.calendarProps), { month: monthTo, onMonthChange: handleMonthToChange, selectorView: 'full' }) }))));
 };
 

package/views/static.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index_module = require('../index.module-24e4de4c.js');
+var index_module = require('../index.module-255b4286.js');
 var React = require('react');
 var cn = require('classnames');
 var addMonths = require('date-fns/addMonths');
@@ -11,6 +11,7 @@ var subMonths = require('date-fns/subMonths');
 var coreComponentsCalendar = require('@alfalab/core-components-calendar');
 var coreComponentsCalendarInput = require('@alfalab/core-components-calendar-input');
 var coreComponentsDateInput = require('@alfalab/core-components-date-input');
+var components_divider_Component = require('../components/divider/Component.js');
 var hooks = require('../hooks.js');
 var utils = require('../utils.js');
 require('date-fns/isEqual');
@@ -163,7 +164,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__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(components_divider_Component.Divider, { inputFromProps: inputFromProps, inputToProps: inputToProps }),
         React__default.default.createElement("div", null,
             React__default.default.createElement(coreComponentsDateInput.DateInput, index_module.__assign({}, dateInputToProps, { mobileMode: dateInputToProps.mobileMode === 'popover'
                     ? 'input'

package/modern/index.module-8c524c02.js

@@ -1,4 +0,0 @@
-const styles = {"component":"calendar-range__component_qeu3v","divider":"calendar-range__divider_qeu3v","static":"calendar-range__static_qeu3v","calendar":"calendar-range__calendar_qeu3v"};
-require('./views/index.css')
-
-export { styles as s };