@alfalab/core-components-date-range-input 3.3.25 → 3.4.0

package/components/date-range-input/Component.js

@@ -23,7 +23,7 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var dateFnsIsValid__default = /*#__PURE__*/_interopDefaultCompat(dateFnsIsValid);
 var startOfMonth__default = /*#__PURE__*/_interopDefaultCompat(startOfMonth);
 
-var styles = {"component":"date-range-input__component_16do0","calendarContainer":"date-range-input__calendarContainer_16do0","calendarResponsive":"date-range-input__calendarResponsive_16do0","block":"date-range-input__block_16do0","calendarIcon":"date-range-input__calendarIcon_16do0"};
+var styles = {"component":"date-range-input__component_1g9ps","calendarContainer":"date-range-input__calendarContainer_1g9ps","calendarResponsive":"date-range-input__calendarResponsive_1g9ps","block":"date-range-input__block_1g9ps","calendarIcon":"date-range-input__calendarIcon_1g9ps"};
 require('./index.css')
 
 var DateRangeInput = React__default.default.forwardRef(function (_a, ref) {

package/components/date-range-input/index.css

@@ -1,4 +1,4 @@
-/* hash: 1tl6y */
+/* hash: 1edyr */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-neutral-300: #e7e8eb; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -19,6 +19,7 @@
     --gap-s-neg: -12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 
     /* новые значения, используйте их */
+    --gap-12-neg: var(--gap-s-neg);
 } :root {
 } :root {
 } :root {
@@ -45,24 +46,24 @@
     /* marker */
 } :root {
     --calendar-popover-border-radius: var(--border-radius-m);
-} .date-range-input__component_16do0 {
+} .date-range-input__component_1g9ps {
     display: inline-block;
     outline: none;
     position: relative;
-} .date-range-input__calendarContainer_16do0 {
+} .date-range-input__calendarContainer_1g9ps {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-popover-border-radius);
     border: 1px solid var(--color-light-neutral-300)
-} @media (max-width: 374px) { .date-range-input__calendarContainer_16do0 {
+} @media (max-width: 374px) { .date-range-input__calendarContainer_1g9ps {
         width: 100%;
         min-width: 288px
 }
-    } .date-range-input__calendarResponsive_16do0 {
+    } .date-range-input__calendarResponsive_1g9ps {
     width: var(--calendar-width);
-} .date-range-input__block_16do0 {
+} .date-range-input__block_1g9ps {
     width: 100%;
-} .date-range-input__calendarIcon_16do0 {
-    margin-right: var(--gap-s-neg);
+} .date-range-input__calendarIcon_1g9ps {
+    margin-right: var(--gap-12-neg);
     height: 100%;
 }

package/cssm/components/date-range-input/index.module.css

@@ -18,6 +18,7 @@
     --gap-s-neg: -12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 
     /* новые значения, используйте их */
+    --gap-12-neg: var(--gap-s-neg);
 } :root {
 } :root {
 } :root {
@@ -62,6 +63,6 @@
 } .block {
     width: 100%;
 } .calendarIcon {
-    margin-right: var(--gap-s-neg);
+    margin-right: var(--gap-12-neg);
     height: 100%;
 }

package/esm/components/date-range-input/Component.js

@@ -11,7 +11,7 @@ import { useDidUpdateEffect } from '@alfalab/hooks';
 import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
 import { parseTimestampToDate, DATE_FORMAT, format, parseDateString, DATE_MASK, isCompleteDateInput, isValid } from '../../utils/format.js';
 
-var styles = {"component":"date-range-input__component_16do0","calendarContainer":"date-range-input__calendarContainer_16do0","calendarResponsive":"date-range-input__calendarResponsive_16do0","block":"date-range-input__block_16do0","calendarIcon":"date-range-input__calendarIcon_16do0"};
+var styles = {"component":"date-range-input__component_1g9ps","calendarContainer":"date-range-input__calendarContainer_1g9ps","calendarResponsive":"date-range-input__calendarResponsive_1g9ps","block":"date-range-input__block_1g9ps","calendarIcon":"date-range-input__calendarIcon_1g9ps"};
 require('./index.css')
 
 var DateRangeInput = React.forwardRef(function (_a, ref) {

package/esm/components/date-range-input/index.css

@@ -1,4 +1,4 @@
-/* hash: 1tl6y */
+/* hash: 1edyr */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-neutral-300: #e7e8eb; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -19,6 +19,7 @@
     --gap-s-neg: -12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 
     /* новые значения, используйте их */
+    --gap-12-neg: var(--gap-s-neg);
 } :root {
 } :root {
 } :root {
@@ -45,24 +46,24 @@
     /* marker */
 } :root {
     --calendar-popover-border-radius: var(--border-radius-m);
-} .date-range-input__component_16do0 {
+} .date-range-input__component_1g9ps {
     display: inline-block;
     outline: none;
     position: relative;
-} .date-range-input__calendarContainer_16do0 {
+} .date-range-input__calendarContainer_1g9ps {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-popover-border-radius);
     border: 1px solid var(--color-light-neutral-300)
-} @media (max-width: 374px) { .date-range-input__calendarContainer_16do0 {
+} @media (max-width: 374px) { .date-range-input__calendarContainer_1g9ps {
         width: 100%;
         min-width: 288px
 }
-    } .date-range-input__calendarResponsive_16do0 {
+    } .date-range-input__calendarResponsive_1g9ps {
     width: var(--calendar-width);
-} .date-range-input__block_16do0 {
+} .date-range-input__block_1g9ps {
     width: 100%;
-} .date-range-input__calendarIcon_16do0 {
-    margin-right: var(--gap-s-neg);
+} .date-range-input__calendarIcon_1g9ps {
+    margin-right: var(--gap-12-neg);
     height: 100%;
 }

package/modern/components/date-range-input/Component.js

@@ -10,7 +10,7 @@ import { useDidUpdateEffect } from '@alfalab/hooks';
 import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
 import { parseTimestampToDate, DATE_FORMAT, format, parseDateString, DATE_MASK, isCompleteDateInput, isValid } from '../../utils/format.js';
 
-const styles = {"component":"date-range-input__component_16do0","calendarContainer":"date-range-input__calendarContainer_16do0","calendarResponsive":"date-range-input__calendarResponsive_16do0","block":"date-range-input__block_16do0","calendarIcon":"date-range-input__calendarIcon_16do0"};
+const styles = {"component":"date-range-input__component_1g9ps","calendarContainer":"date-range-input__calendarContainer_1g9ps","calendarResponsive":"date-range-input__calendarResponsive_1g9ps","block":"date-range-input__block_1g9ps","calendarIcon":"date-range-input__calendarIcon_1g9ps"};
 require('./index.css')
 
 /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */

package/modern/components/date-range-input/index.css

@@ -1,4 +1,4 @@
-/* hash: 1tl6y */
+/* hash: 1edyr */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-neutral-300: #e7e8eb; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -19,6 +19,7 @@
     --gap-s-neg: -12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 
     /* новые значения, используйте их */
+    --gap-12-neg: var(--gap-s-neg);
 } :root {
 } :root {
 } :root {
@@ -45,24 +46,24 @@
     /* marker */
 } :root {
     --calendar-popover-border-radius: var(--border-radius-m);
-} .date-range-input__component_16do0 {
+} .date-range-input__component_1g9ps {
     display: inline-block;
     outline: none;
     position: relative;
-} .date-range-input__calendarContainer_16do0 {
+} .date-range-input__calendarContainer_1g9ps {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-popover-border-radius);
     border: 1px solid var(--color-light-neutral-300)
-} @media (max-width: 374px) { .date-range-input__calendarContainer_16do0 {
+} @media (max-width: 374px) { .date-range-input__calendarContainer_1g9ps {
         width: 100%;
         min-width: 288px
 }
-    } .date-range-input__calendarResponsive_16do0 {
+    } .date-range-input__calendarResponsive_1g9ps {
     width: var(--calendar-width);
-} .date-range-input__block_16do0 {
+} .date-range-input__block_1g9ps {
     width: 100%;
-} .date-range-input__calendarIcon_16do0 {
-    margin-right: var(--gap-s-neg);
+} .date-range-input__calendarIcon_1g9ps {
+    margin-right: var(--gap-12-neg);
     height: 100%;
 }

package/moderncssm/Component.responsive.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import React from 'react';
+import { ConditionalProps, DateRangeInputProps } from "./components/date-range-input/index";
+type DateRangeInputResponsiveProps = Omit<DateRangeInputProps, 'view' | 'picker' | 'onClose' | 'InputComponent'> & ConditionalProps & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+type DateRangeInputMedia = 'desktop' | 'mobile';
+/**
+ * @deprecated
+ * use UniversalDateInput instead
+ */
+declare const DateRangeInputResponsive: React.ForwardRefExoticComponent<DateRangeInputResponsiveProps & React.RefAttributes<HTMLInputElement>>;
+export { DateRangeInputResponsiveProps, DateRangeInputMedia, DateRangeInputResponsive };

package/moderncssm/Component.responsive.js

@@ -0,0 +1,18 @@
+import React, { forwardRef } from 'react';
+import { useMedia } from '@alfalab/hooks';
+import { DateRangeInputDesktop } from './desktop/Component.desktop.js';
+import { DateRangeInputMobile } from './mobile/Component.mobile.js';
+
+/**
+ * @deprecated
+ * use UniversalDateInput instead
+ */
+const DateRangeInputResponsive = forwardRef(({ breakpoint = 1024, ...restProps }, ref) => {
+    const [view] = useMedia([
+        ['mobile', `(max-width: ${breakpoint - 1}px)`],
+        ['desktop', `(min-width: ${breakpoint}px)`],
+    ], 'desktop');
+    return view === 'desktop' ? (React.createElement(DateRangeInputDesktop, { ...restProps, ref: ref })) : (React.createElement(DateRangeInputMobile, { ...restProps, ref: ref }));
+});
+
+export { DateRangeInputResponsive };

package/moderncssm/components/date-range-input/Component.d.ts

@@ -0,0 +1,117 @@
+/// <reference types="react" />
+import React from 'react';
+import { ChangeEvent, ElementType } from "react";
+import { CalendarDesktopProps } from "@alfalab/core-components-calendar/desktop";
+import { CalendarMobileProps } from "@alfalab/core-components-calendar/mobile";
+import { InputProps } from "@alfalab/core-components-input";
+import { PopoverProps } from "@alfalab/core-components-popover";
+type ConditionalProps = {
+    /**
+     * Обработчик изменения значения
+     */
+    picker: true;
+    /**
+     * Обработчик закрытия календаря
+     */
+    onClose?: () => void;
+} | {
+    picker?: false;
+    onClose?: never;
+};
+type DateRangeInputProps = Omit<InputProps, 'onChange'> & ConditionalProps & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для инпута
+     */
+    inputClassName?: string;
+    /**
+     * Дополнительный класс для поповера
+     */
+    popoverClassName?: string;
+    /**
+     * Обработчик изменения значения
+     */
+    onChange?: (payload: {
+        dateFrom?: Date;
+        dateTo?: Date;
+        value: string;
+    }, event?: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Обработчик окончания ввода
+     */
+    onComplete?: (payload: {
+        dateFrom: Date;
+        dateTo: Date;
+        value: string;
+    }, event?: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Компонент календаря
+     */
+    Calendar?: ElementType;
+    /**
+     * Доп. пропсы для календаря
+     */
+    calendarProps?: (CalendarDesktopProps & Record<string, unknown>) | (CalendarMobileProps & Record<string, unknown>);
+    /**
+     * Месяц в календаре по умолчанию (timestamp)
+     */
+    defaultMonth?: number;
+    /**
+     * Минимальная дата, доступная для выбора (timestamp)
+     */
+    minDate?: number;
+    /**
+     * Максимальная дата, доступная для выбора (timestamp)
+     */
+    maxDate?: number;
+    /**
+     * Список событий
+     */
+    events?: Array<Date | number>;
+    /**
+     * Список выходных
+     */
+    offDays?: Array<Date | number>;
+    /**
+     * Состояние открытия по умолчанию
+     */
+    defaultOpen?: boolean;
+    /**
+     * Позиционирование поповера с календарем
+     */
+    popoverPosition?: PopoverProps['position'];
+    /**
+     * z-index Popover
+     */
+    zIndexPopover?: PopoverProps['zIndex'];
+    /**
+     * Запрещает поповеру менять свою позицию.
+     * Например, если места снизу недостаточно, то он все равно будет показан снизу
+     */
+    preventFlip?: boolean;
+    /**
+     * Календарь будет принимать ширину инпута
+     */
+    useAnchorWidth?: boolean;
+    /**
+     * Растягивает компонент на ширину контейнера
+     */
+    block?: boolean;
+    /**
+     * Отображение компонента в мобильном или десктопном виде
+     */
+    view?: 'desktop' | 'mobile';
+    /**
+     * Компонент инпута
+     */
+    InputComponent?: ElementType;
+    /**
+     * Запретить ввод с клавиатуры
+     */
+    disableUserInput?: boolean;
+};
+declare const DateRangeInput: React.ForwardRefExoticComponent<DateRangeInputProps & React.RefAttributes<HTMLInputElement>>;
+export { ConditionalProps, DateRangeInputProps, DateRangeInput };

package/moderncssm/components/date-range-input/Component.js

@@ -0,0 +1,206 @@
+import React, { useRef, useState, useEffect } from 'react';
+import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
+import dateFnsIsValid from 'date-fns/isValid';
+import startOfMonth from 'date-fns/startOfMonth';
+import { usePeriod } from '@alfalab/core-components-calendar/moderncssm/shared';
+import { IconButton } from '@alfalab/core-components-icon-button/moderncssm';
+import { Popover } from '@alfalab/core-components-popover/moderncssm';
+import { useDidUpdateEffect } from '@alfalab/hooks';
+import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
+import { parseTimestampToDate, DATE_FORMAT, format, parseDateString, DATE_MASK, isCompleteDateInput, isValid } from '../../utils/format.js';
+import styles from './index.module.css';
+
+/* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
+const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverClassName, disabled, readOnly, disableUserInput = false, picker, defaultValue = '', value: propValue, onChange, onComplete, onClose, rightAddons, useAnchorWidth, block, popoverPosition = 'bottom-start', zIndexPopover, preventFlip, InputComponent, Calendar, calendarProps = {}, defaultMonth, minDate = calendarProps.minDate, maxDate = calendarProps.maxDate, offDays = calendarProps.offDays || [], events = calendarProps.events || [], defaultOpen = false, view = 'desktop', ...restProps }, ref) => {
+    const inputRef = useRef(null);
+    const iconRef = useRef(null);
+    const calendarRef = useRef(null);
+    const [value, setValue] = useState(propValue || defaultValue);
+    const [open, setOpen] = useState(defaultOpen);
+    const inputDisabled = disabled || readOnly;
+    const calendarResponsive = calendarProps?.responsive ?? true;
+    const { selectedFrom, selectedTo, updatePeriod, resetPeriod, setStart, setEnd } = usePeriod({ onPeriodChange: handlePeriodChange });
+    useEffect(() => {
+        if (value) {
+            setCalendarPeriod(getDates(value));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => {
+        setValue((prevValue) => {
+            if (selectedFrom && selectedTo) {
+                const from = parseTimestampToDate(selectedFrom);
+                const to = parseTimestampToDate(selectedTo);
+                return `${from} - ${to}`;
+            }
+            if (selectedFrom && prevValue.length < DATE_FORMAT.length) {
+                return parseTimestampToDate(selectedFrom);
+            }
+            return prevValue;
+        });
+    }, [selectedFrom, selectedTo]);
+    useDidUpdateEffect(() => {
+        const newPropValue = propValue || '';
+        setValue((prevValue) => {
+            if (prevValue === newPropValue) {
+                return prevValue;
+            }
+            const dates = getDates(newPropValue);
+            setCalendarPeriod(dates);
+            return dates.formattedValue;
+        });
+    }, [propValue]);
+    function getDates(val) {
+        const formattedValue = format(val);
+        const dateArr = formattedValue.split('-').map((v) => v.trim());
+        const dateFrom = dateArr[0] ? parseDateString(dateArr[0]) : undefined;
+        const dateTo = dateArr[1] ? parseDateString(dateArr[1]) : undefined;
+        return { formattedValue, dateFrom, dateTo, dateArr };
+    }
+    function setCalendarPeriod({ dateFrom, dateTo }) {
+        setStart(dateFrom?.getTime());
+        setEnd(dateTo?.getTime());
+    }
+    function handlePeriodChange(from, to) {
+        if (from && !to && value.length === DATE_MASK.length) {
+            setValue(parseTimestampToDate(from));
+        }
+        else if ((!from && !to && value.length === DATE_FORMAT.length) ||
+            (from === to && value.length === DATE_MASK.length)) {
+            setValue('');
+        }
+        const dateFrom = from ? new Date(from) : undefined;
+        const dateTo = to ? new Date(to) : undefined;
+        const newValue = [from, to].filter(Boolean)
+            .map((timestamp) => parseTimestampToDate(timestamp))
+            .join(' - ');
+        onChange?.({
+            dateFrom,
+            dateTo,
+            value: newValue,
+        });
+        if (dateFrom && dateTo) {
+            onComplete?.({
+                dateFrom,
+                dateTo,
+                value: newValue,
+            });
+        }
+    }
+    const handleInputWrapperFocus = (event) => {
+        if (view === 'desktop') {
+            if (picker) {
+                setOpen(true);
+            }
+            if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
+                calendarRef.current.focus();
+            }
+        }
+    };
+    const handleBlur = (event) => {
+        if (view === 'desktop') {
+            const target = (event.relatedTarget || document.activeElement);
+            if (calendarRef.current?.contains(target) === false &&
+                inputRef.current?.contains(target) === false &&
+                iconRef.current?.contains(target) === false) {
+                setOpen(false);
+                if (onClose) {
+                    onClose();
+                }
+            }
+        }
+    };
+    // eslint-disable-next-line complexity
+    const handleChange = (event) => {
+        const { value: newValue } = event.target;
+        if (newValue.length > DATE_MASK.length)
+            return;
+        // Позволяем вводить только цифры, точки, дефис и пробелы
+        if (/[^\d. -]/.test(newValue)) {
+            return;
+        }
+        const dots = newValue.match(/\./g);
+        const hyphen = newValue.match(/\-/g);
+        // Не даем вводить больше, чем 4 точки и 1 дефис
+        if ((dots && dots.length > 4) || (hyphen && hyphen.length > 1)) {
+            return;
+        }
+        const { formattedValue, dateFrom, dateTo, dateArr } = getDates(newValue);
+        if (!dateFrom && !dateTo) {
+            resetPeriod();
+        }
+        else if (selectedFrom && formattedValue.length < DATE_FORMAT.length) {
+            setStart();
+        }
+        else if (selectedFrom && selectedTo) {
+            setEnd();
+        }
+        else if (dateFrom &&
+            dateFnsIsValid(dateFrom) &&
+            dateArr[0]?.length === DATE_FORMAT.length &&
+            dateFrom.getTime() !== selectedFrom) {
+            setStart(dateFrom.getTime());
+        }
+        else if (dateTo &&
+            dateFnsIsValid(dateTo) &&
+            dateArr[1]?.length === DATE_FORMAT.length &&
+            dateTo.getTime() !== selectedTo) {
+            setEnd(dateTo.getTime());
+        }
+        setValue(formattedValue);
+        onChange?.({ dateFrom, dateTo, value: formattedValue }, event);
+        if (isCompleteDateInput(formattedValue)) {
+            const valid = isValid(formattedValue, dateArr[0], dateArr[1]);
+            if (!valid)
+                return;
+            if (dateFrom && dateTo) {
+                onComplete?.({ dateFrom, dateTo, value: formattedValue }, event);
+            }
+        }
+    };
+    const handleCalendarClose = () => {
+        if (view === 'mobile' && onClose) {
+            onClose();
+        }
+        setOpen(false);
+    };
+    const handleClear = () => {
+        setValue('');
+        resetPeriod();
+    };
+    const handleCalendarChange = (date) => {
+        updatePeriod(date);
+    };
+    const handleCalendarWrapperMouseDown = (event) => {
+        // Не дает инпуту терять фокус при выборе даты
+        event.preventDefault();
+    };
+    const handleIconButtonClick = () => {
+        if (!open)
+            setOpen(true);
+        if (view === 'desktop' && inputRef.current) {
+            inputRef.current.focus();
+        }
+    };
+    const renderCalendar = () => {
+        const activeMonth = (selectedTo && startOfMonth(selectedTo)) ||
+            (selectedFrom && startOfMonth(selectedFrom));
+        return Calendar ? (
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        React.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
+            React.createElement(Calendar, { ...calendarProps, responsive: calendarResponsive, open: open, onClose: handleCalendarClose, ref: calendarRef, defaultMonth: activeMonth || defaultMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events }))) : null;
+    };
+    return (React.createElement("div", { className: cn(styles.component, className, {
+            [styles.block]: block,
+        }), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
+        InputComponent ? (React.createElement(InputComponent, { autoComplete: picker ? 'off' : undefined, ...restProps, block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, disableUserInput: disableUserInput, rightAddons: React.createElement(React.Fragment, null,
+                rightAddons,
+                picker && (React.createElement(IconButton, { className: styles.calendarIcon, ref: iconRef, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 's' }))) })) : null,
+        picker &&
+            (view === 'desktop' ? (React.createElement(Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn(styles.calendarContainer, {
+                    [styles.calendarResponsive]: calendarResponsive,
+                }), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar())) : (renderCalendar()))));
+});
+
+export { DateRangeInput };

package/moderncssm/components/date-range-input/index.d.ts

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

package/moderncssm/components/date-range-input/index.js

@@ -0,0 +1 @@
+export { DateRangeInput } from './Component.js';

package/moderncssm/components/date-range-input/index.module.css

@@ -0,0 +1,54 @@
+/* */
+:root {
+    --calendar-width: 344px;
+
+    /* Кнопки выбора месяцев и годов */
+
+    /* Шапка */
+
+    /* День */
+
+    /* today */
+
+    /* highlighted */
+
+    /* holidays */
+
+    /* range */
+
+    /* selected */
+
+    /* disabled */
+
+    /* marker */
+}
+:root {
+    --calendar-popover-border-radius: var(--border-radius-m);
+}
+.component {
+    display: inline-block;
+    outline: none;
+    position: relative;
+}
+.calendarContainer {
+    display: inline-block;
+    box-sizing: border-box;
+    border-radius: var(--calendar-popover-border-radius);
+    border: 1px solid var(--color-light-neutral-300)
+}
+@media (max-width: 374px) {
+.calendarContainer {
+        width: 100%;
+        min-width: 288px
+}
+    }
+.calendarResponsive {
+    width: var(--calendar-width);
+}
+.block {
+    width: 100%;
+}
+.calendarIcon {
+    margin-right: var(--gap-12-neg);
+    height: 100%;
+}

package/moderncssm/desktop/Component.desktop.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import React from 'react';
+import { ConditionalProps, DateRangeInputProps } from "../components/date-range-input/index";
+type DateRangeInputDesktopProps = Omit<DateRangeInputProps, 'view' | 'picker' | 'onClose' | 'InputComponent'> & ConditionalProps;
+/**
+ * @deprecated
+ * use UniversalDateInput instead
+ */
+declare const DateRangeInputDesktop: React.ForwardRefExoticComponent<DateRangeInputDesktopProps & React.RefAttributes<HTMLInputElement>>;
+export { DateRangeInputDesktopProps, DateRangeInputDesktop };

package/moderncssm/desktop/Component.desktop.js

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import { CalendarDesktop } from '@alfalab/core-components-calendar/moderncssm/desktop';
+import { InputDesktop } from '@alfalab/core-components-input/moderncssm/desktop';
+import { DateRangeInput } from '../components/date-range-input/Component.js';
+
+/**
+ * @deprecated
+ * use UniversalDateInput instead
+ */
+const DateRangeInputDesktop = forwardRef((props, ref) => (React.createElement(DateRangeInput, { InputComponent: InputDesktop, Calendar: CalendarDesktop, ...props, ref: ref })));
+
+export { DateRangeInputDesktop };

package/moderncssm/desktop/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.desktop";
+export {};

package/moderncssm/desktop/index.js

@@ -0,0 +1 @@
+export { DateRangeInputDesktop } from './Component.desktop.js';

package/moderncssm/index.d.ts

@@ -0,0 +1,3 @@
+export { DateRangeInputResponsive as DateRangeInput } from "./Component.responsive";
+export type { DateRangeInputResponsiveProps as DateRangeInputProps } from "./Component.responsive";
+export {};

package/moderncssm/index.js

@@ -0,0 +1 @@
+export { DateRangeInputResponsive as DateRangeInput } from './Component.responsive.js';

package/moderncssm/mobile/Component.mobile.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import React from 'react';
+import { ConditionalProps, DateRangeInputProps } from "../components/date-range-input/index";
+type DateRangeInputMobileProps = Omit<DateRangeInputProps, 'view' | 'picker' | 'onClose' | 'InputComponent'> & ConditionalProps;
+/**
+ * @deprecated
+ * use UniversalDateInput instead
+ */
+declare const DateRangeInputMobile: React.ForwardRefExoticComponent<DateRangeInputMobileProps & React.RefAttributes<HTMLInputElement>>;
+export { DateRangeInputMobileProps, DateRangeInputMobile };

package/moderncssm/mobile/Component.mobile.js

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import { CalendarMobile } from '@alfalab/core-components-calendar/moderncssm/mobile';
+import { InputMobile } from '@alfalab/core-components-input/moderncssm/mobile';
+import { DateRangeInput } from '../components/date-range-input/Component.js';
+
+/**
+ * @deprecated
+ * use UniversalDateInput instead
+ */
+const DateRangeInputMobile = forwardRef((props, ref) => (React.createElement(DateRangeInput, { InputComponent: InputMobile, Calendar: CalendarMobile, view: 'mobile', ...props, ref: ref })));
+
+export { DateRangeInputMobile };

package/moderncssm/mobile/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.mobile";
+export {};

package/moderncssm/mobile/index.js

@@ -0,0 +1 @@
+export { DateRangeInputMobile } from './Component.mobile.js';

package/moderncssm/utils/format.d.ts

@@ -0,0 +1,8 @@
+declare const DATE_FORMAT = "dd.MM.yyyy";
+declare const DATE_MASK: (string | RegExp)[];
+declare const isCompleteDateInput: (input: string) => boolean;
+declare const parseDateString: (value: string, dateFormat?: string) => Date;
+declare const isValid: (inputValue: string, dateFrom: string, dateTo: string) => boolean;
+declare const format: (value: string) => string;
+declare const parseTimestampToDate: (timestamp: number) => string;
+export { DATE_FORMAT, DATE_MASK, isCompleteDateInput, parseDateString, isValid, format, parseTimestampToDate };

package/moderncssm/utils/format.js

@@ -0,0 +1,81 @@
+import dateFnsIsValid from 'date-fns/isValid';
+import parse from 'date-fns/parse';
+
+/* eslint-disable no-useless-escape */
+const DATE_FORMAT = 'dd.MM.yyyy';
+const DATE_MASK = [
+    /\d/,
+    /\d/,
+    '.',
+    /\d/,
+    /\d/,
+    '.',
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    ' ',
+    '-',
+    ' ',
+    /\d/,
+    /\d/,
+    '.',
+    /\d/,
+    /\d/,
+    '.',
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+];
+const isCompleteDateInput = (input) => input.length === DATE_MASK.length;
+const parseDateString = (value, dateFormat = DATE_FORMAT) => parse(value, dateFormat, new Date());
+const isValid = (inputValue, dateFrom, dateTo) => !inputValue ||
+    (isCompleteDateInput(inputValue) &&
+        dateFnsIsValid(parseDateString(dateFrom)) &&
+        dateFnsIsValid(parseDateString(dateTo)));
+const format = (value) => value
+    .replace(/^(\d\d)(\d)$/, '$1.$2') // 121 => 12.1
+    .replace(/^(\d\d)\.(\d\d)(\d)$/, '$1.$2.$3') // 12.122 => 12.12.2
+    .replace(/^(\d\d)\d\.(.*)/, '$1.$2') // 123.12.2005 => 12.12.2005
+    .replace(/^(\d\d\.\d\d)\d\.(.*)/, '$1.$2') // 12.123.2005 => 12.12.2005
+    .replace(/\.$/, '') // 12. => 12
+    .replace(/\ $/, '') // 1 2 => 12
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d)(\d) - (\d.*)/, '$1 - $3') // 12.12.20051 - 12.12.200 => 12.12.2005 - 12.12.200
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d) (\d)- (\d.*)/, '$1 - $3') // 12.12.2005 1- 12.12.200 => 12.12.2005 - 12.12.200
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d) -(\d) (\d.*)/, '$1 - $3') // 12.12.2005 -1 12.12.200 => 12.12.2005 - 12.12.200
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d) - (\d)(\d\d.\d\d.\d\d\d)/, '$1 - $3') // 12.12.2005 - 112.12.200 => 12.12.2005 - 12.12.200
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d) - (\d)(\d\d.\d.\d\d\d\d)/, '$1 - $3') // 12.12.2005 - 112.1.2001 => 12.12.2005 - 12.1.2001
+    .replace(/^(\d\d\.\d\d)(\d\d\d\d)/, '$1.$2') // 12.122005 => 12.12.2005
+    .replace(/^(\d\d)(\d\d\.\d\d\d\d)/, '$1.$2') // 1212.2005 => 12.12.2005
+    .replace(/^(\d\d)(\d.*)/, '$1.$2') // 1212 => 12.12
+    .replace(/^(\d\d.\d\d)(\d.*)/, '$1.$2') // 12.122 => 12.12.2
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d)(\d)/, '$1 - $2') // 12.12.20056 => 12.12.2005 - 6
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d) - (\d\d)(\d)/, '$1 - $2.$3') // 12.12.2005 - 123 => 12.12.2005 - 12.3
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d) - (\d\d).(\d\d)(\d)/, '$1 - $2.$3.$4') // 12.12.2005 - 12.123 => 12.12.2005 - 12.12.3
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d)- (\d.*)/, '$1 - $2') // 12.12.2005- 12.12.2005 => 12.12.2005 - 12.12.2005
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d) -(\d.*)/, '$1 - $2') // 12.12.2005 -12.12.2005 => 12.12.2005 - 12.12.2005
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d) -/, '$1') // 12.12.2005 - => 12.12.2005
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d) (\d.*)/, '$1 - $2') // 12.12.2005 12.12.2005 => 12.12.2005 - 12.12.2005
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d)  {2}(\d.*)/, '$1 - $2') // 12.12.2005  12.12.2005 => 12.12.2005 - 12.12.2005
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d)-/, '$1') // 12.12.2005- => 12.12.2005
+    .replace(/^(\d\.\d\d\.\d\d\d\d)([0-9]*)/, '$1') // 1.12.2005123123 => 1.12.2005
+    .replace(/^(\d\d\.\d\.\d\d\d\d)([0-9]*)/, '$1') // 01.2.20055125125 => 01.2.2005
+    .replace(/^(\d)\.(\d\d)([0-9]*)\.(\d\d\d\d)/, '$1.$2.$4') // 1.123123.2005 => 1.12.2005
+    .replace(/^(\d\.\d\.\d\d\d\d)([0-9]*)/, '$1') // 1.2.20055125125 => 1.2.2005
+    .replace(/^()\.(\d)\.(\d\d\d\d)([0-9]*)/, '$1.$2.$3'); // .2.2005123123 => .2.2005
+const parseTimestampToDate = (timestamp) => {
+    const date = new Date(timestamp);
+    const year = date.getFullYear();
+    let month = date.getMonth() + 1;
+    let day = date.getDate();
+    if (month < 10) {
+        month = `0${month}`;
+    }
+    if (day < 10) {
+        day = `0${day}`;
+    }
+    return `${day}.${month}.${year}`;
+};
+
+export { DATE_FORMAT, DATE_MASK, format, isCompleteDateInput, isValid, parseDateString, parseTimestampToDate };

package/moderncssm/utils/index.d.ts

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

package/moderncssm/utils/index.js

@@ -0,0 +1 @@
+export { DATE_FORMAT, DATE_MASK, format, isCompleteDateInput, isValid, parseDateString, parseTimestampToDate } from './format.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-date-range-input",
-    "version": "3.3.25",
+    "version": "3.4.0",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -15,10 +15,10 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-input": "^15.0.4",
-        "@alfalab/core-components-icon-button": "^6.7.4",
-        "@alfalab/core-components-calendar": "^7.10.0",
-        "@alfalab/core-components-popover": "^6.2.5",
+        "@alfalab/core-components-input": "^15.1.0",
+        "@alfalab/core-components-icon-button": "^6.8.0",
+        "@alfalab/core-components-calendar": "^7.11.0",
+        "@alfalab/core-components-popover": "^6.3.0",
         "@alfalab/hooks": "^1.13.0",
         "@alfalab/icons-glyph": "^2.139.0",
         "classnames": "^2.3.1",
@@ -26,6 +26,6 @@
         "react-merge-refs": "^1.1.0",
         "tslib": "^2.4.0"
     },
-    "themesVersion": "13.0.1",
-    "varsVersion": "9.11.1"
+    "themesVersion": "13.1.0",
+    "varsVersion": "9.12.0"
 }

package/src/components/date-range-input/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 @import '@alfalab/core-components-calendar/src/vars.css';
 
 :root {
@@ -32,6 +32,6 @@
 }
 
 .calendarIcon {
-    margin-right: var(--gap-s-neg);
+    margin-right: var(--gap-12-neg);
     height: 100%;
 }