@alfalab/core-components 47.2.0 → 47.3.0-beta.1

package/calendar/esm/desktop/desktop.css

@@ -1,4 +1,4 @@
-/* hash: 18slg */
+/* hash: vmv58 */
 :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-translucent-500: rgba(9, 12, 37, 0.28);
@@ -44,26 +44,26 @@
     /* disabled */
 
     /* marker */
-} .calendar__component_yub1z {
+} .calendar__component_bnlcl {
     width: var(--calendar-width);
     height: var(--calendar-height);
     display: flex;
     flex-direction: column;
     overflow: hidden;
     outline: none
-} @media (max-width: 374px) { .calendar__component_yub1z {
+} @media (max-width: 374px) { .calendar__component_bnlcl {
         align-items: center;
         width: 100%
 }
-    } .calendar__component_yub1z.calendar__responsive_yub1z {
+    } .calendar__component_bnlcl.calendar__responsive_bnlcl {
         width: 100%
-    } .calendar__component_yub1z.calendar__responsive_yub1z .calendar__period_yub1z {
+    } .calendar__component_bnlcl.calendar__responsive_bnlcl .calendar__period_bnlcl {
             width: 100%;
-        } .calendar__component_yub1z.calendar__responsive_yub1z .calendar__monthYear_yub1z {
+        } .calendar__component_bnlcl.calendar__responsive_bnlcl .calendar__monthYear_bnlcl {
             width: 100%;
-        } .calendar__component_yub1z.calendar__responsive_yub1z .calendar__container_yub1z {
+        } .calendar__component_bnlcl.calendar__responsive_bnlcl .calendar__container_bnlcl {
             width: 100%;
-        } .calendar__container_yub1z {
+        } .calendar__container_bnlcl {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -71,65 +71,65 @@
     box-sizing: border-box;
     flex-grow: 1;
     overflow: hidden
-} .calendar__container_yub1z.calendar__customScrollbar_yub1z {
+} .calendar__container_bnlcl.calendar__customScrollbar_bnlcl {
         overflow: auto;
         cursor: auto;
-    } .calendar__container_yub1z.calendar__customScrollbar_yub1z::-webkit-scrollbar {
+    } .calendar__container_bnlcl.calendar__customScrollbar_bnlcl::-webkit-scrollbar {
         width: 12px;
         height: 12px;
-    } .calendar__container_yub1z.calendar__customScrollbar_yub1z::-webkit-scrollbar-track {
+    } .calendar__container_bnlcl.calendar__customScrollbar_bnlcl::-webkit-scrollbar-track {
         background-color: transparent;
-    } .calendar__container_yub1z.calendar__customScrollbar_yub1z::-webkit-scrollbar-track-piece {
+    } .calendar__container_bnlcl.calendar__customScrollbar_bnlcl::-webkit-scrollbar-track-piece {
         background-color: transparent;
-    } .calendar__container_yub1z.calendar__customScrollbar_yub1z::-webkit-scrollbar-thumb {
+    } .calendar__container_bnlcl.calendar__customScrollbar_bnlcl::-webkit-scrollbar-thumb {
         background-color: var(--color-light-neutral-translucent-500);
         border-color: transparent;
         border-style: solid;
         border-width: 4px;
         background-clip: padding-box;
-    } .calendar__container_yub1z.calendar__customScrollbar_yub1z::-webkit-scrollbar-thumb:vertical {
+    } .calendar__container_bnlcl.calendar__customScrollbar_bnlcl::-webkit-scrollbar-thumb:vertical {
         border-radius: var(--border-radius-circle) / 6px;
         min-height: 40px;
-    } .calendar__container_yub1z.calendar__customScrollbar_yub1z::-webkit-scrollbar-thumb:vertical:hover {
+    } .calendar__container_bnlcl.calendar__customScrollbar_bnlcl::-webkit-scrollbar-thumb:vertical:hover {
         border-radius: var(--border-radius-circle) / 7px;
         border-width: 4px 3px;
-    } .calendar__container_yub1z.calendar__customScrollbar_yub1z::-webkit-scrollbar-thumb:horizontal {
+    } .calendar__container_bnlcl.calendar__customScrollbar_bnlcl::-webkit-scrollbar-thumb:horizontal {
         border-radius: 6px / var(--border-radius-circle);
         min-width: 40px;
-    } .calendar__container_yub1z.calendar__customScrollbar_yub1z::-webkit-scrollbar-thumb:horizontal:hover {
+    } .calendar__container_bnlcl.calendar__customScrollbar_bnlcl::-webkit-scrollbar-thumb:horizontal:hover {
         border-radius: 7px / var(--border-radius-circle);
         border-width: 3px 4px;
-    } .calendar__container_yub1z.calendar__customScrollbar_yub1z::-webkit-scrollbar-thumb:active {
+    } .calendar__container_bnlcl.calendar__customScrollbar_bnlcl::-webkit-scrollbar-thumb:active {
         background-color: var(--color-light-text-secondary);
-    } .calendar__container_yub1z.calendar__customScrollbar_yub1z::-webkit-resizer {
+    } .calendar__container_bnlcl.calendar__customScrollbar_bnlcl::-webkit-resizer {
         background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="%2386868a" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.64645 0.646447C8.84171 0.841709 8.84171 1.15829 8.64645 1.35355L1.35355 8.64645C1.15829 8.84171 0.841709 8.84171 0.646447 8.64645C0.451184 8.45118 0.451184 8.1346 0.646447 7.93934L7.93934 0.646447C8.1346 0.451184 8.45118 0.451184 8.64645 0.646447ZM8.64645 3.64645C8.84171 3.84171 8.84171 4.15829 8.64645 4.35355L4.35355 8.64645C4.15829 8.84171 3.84171 8.84171 3.64645 8.64645C3.45118 8.45118 3.45118 8.1346 3.64645 7.93934L7.93934 3.64645C8.1346 3.45118 8.45118 3.45118 8.64645 3.64645Z" /></svg>')
             no-repeat right bottom;
-    } .calendar__container_yub1z.calendar__customScrollbar_yub1z::-webkit-scrollbar-button,
-    .calendar__container_yub1z.calendar__customScrollbar_yub1z::-webkit-scrollbar-corner {
+    } .calendar__container_bnlcl.calendar__customScrollbar_bnlcl::-webkit-scrollbar-button,
+    .calendar__container_bnlcl.calendar__customScrollbar_bnlcl::-webkit-scrollbar-corner {
         display: none;
-    } .calendar__container_yub1z.calendar__customScrollbar_yub1z {
+    } .calendar__container_bnlcl.calendar__customScrollbar_bnlcl {
 
         display: block;
         padding-right: var(--gap-2xs);
         overflow: hidden auto;
         scrollbar-gutter: stable;
-    } .calendar__container_yub1z.calendar__nativeScrollbar_yub1z {
+    } .calendar__container_bnlcl.calendar__nativeScrollbar_bnlcl {
         overflow: hidden auto;
-    } @media (max-width: 374px) { .calendar__container_yub1z {
+    } @media (max-width: 374px) { .calendar__container_bnlcl {
         width: 288px
 }
-    } .calendar__sixWeeks_yub1z {
+    } .calendar__sixWeeks_bnlcl {
     height: 388px;
-} .calendar__period_yub1z {
+} .calendar__period_bnlcl {
     width: var(--calendar-inner-width)
-} @media (max-width: 374px) { .calendar__period_yub1z {
+} @media (max-width: 374px) { .calendar__period_bnlcl {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
         margin: 0 auto
 }
-    } .calendar__monthYear_yub1z {
+    } .calendar__monthYear_bnlcl {
     width: var(--calendar-inner-width)
-} @media (max-width: 374px) { .calendar__monthYear_yub1z {
+} @media (max-width: 374px) { .calendar__monthYear_bnlcl {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
         margin: 0 auto

package/calendar/esm/desktop/index.js

@@ -62,3 +62,5 @@ import '../useCalendar.js';
 import 'react-merge-refs';
 import 'date-fns/setYear';
 import 'date-fns/subYears';
+import '../useRange.js';
+import '../usePeriod.js';

package/calendar/esm/index.js

@@ -69,3 +69,5 @@ import 'date-fns/isThisYear';
 import './useCalendar.js';
 import 'date-fns/setYear';
 import 'date-fns/subYears';
+import './useRange.js';
+import './usePeriod.js';

package/calendar/esm/mobile/index.js

@@ -67,3 +67,5 @@ import 'date-fns/isThisYear';
 import '../useCalendar.js';
 import 'date-fns/setYear';
 import 'date-fns/subYears';
+import '../useRange.js';
+import '../usePeriod.js';

package/calendar/esm/useRange.d.ts

@@ -0,0 +1,10 @@
+import { CalendarDesktopProps } from "./desktop/index";
+type UseRangeProps = Pick<CalendarDesktopProps, 'mode' | 'value' | 'rangeBehavior' | 'onChange' | 'selectedFrom' | 'selectedTo'>;
+declare function useRange({ mode, value, selectedFrom, selectedTo, rangeBehavior, onChange, }: UseRangeProps): {
+    selectedFrom: number | undefined;
+    selectedTo: number | undefined;
+    onChange: ((date?: number | undefined, dateTo?: number | undefined) => void) | undefined;
+    onReset: (() => void) | undefined;
+    value: number | undefined;
+};
+export { useRange };

package/calendar/esm/useRange.js

@@ -0,0 +1,89 @@
+import { useEffect } from 'react';
+import { usePeriod, usePeriodWithReset } from './usePeriod.js';
+import { isRangeValue } from './utils.js';
+import 'date-fns/differenceInDays';
+import '@alfalab/hooks';
+import 'date-fns/addDays';
+import 'date-fns/addMonths';
+import 'date-fns/eachDayOfInterval';
+import 'date-fns/eachMonthOfInterval';
+import 'date-fns/eachYearOfInterval';
+import 'date-fns/endOfDay';
+import 'date-fns/endOfWeek';
+import 'date-fns/endOfYear';
+import 'date-fns/format';
+import 'date-fns/isAfter';
+import 'date-fns/isBefore';
+import 'date-fns/isSameDay';
+import 'date-fns/lastDayOfMonth';
+import 'date-fns/max';
+import 'date-fns/min';
+import 'date-fns/parse';
+import 'date-fns/startOfDay';
+import 'date-fns/startOfMonth';
+import 'date-fns/startOfWeek';
+import 'date-fns/startOfYear';
+import 'date-fns/subDays';
+import 'date-fns/subMonths';
+import '../../shared/esm';
+
+function useRange(_a) {
+    var _b = _a.mode, mode = _b === void 0 ? 'single' : _b, value = _a.value, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, rangeBehavior = _a.rangeBehavior, onChange = _a.onChange;
+    var valueFrom = isRangeValue(value) ? value.dateFrom : value;
+    var valueTo = isRangeValue(value) ? value.dateTo : value;
+    var periodHook = rangeBehavior === 'clarification' ? usePeriod : usePeriodWithReset;
+    var period = periodHook({
+        initialSelectedFrom: valueFrom,
+        initialSelectedTo: valueTo,
+    });
+    useEffect(function () {
+        if (mode === 'single') {
+            return;
+        }
+        // Внешние изменения
+        if (valueFrom !== period.selectedFrom) {
+            period.setStart(valueFrom);
+        }
+        if (valueTo !== period.selectedTo) {
+            period.setEnd(valueTo);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mode, valueFrom, valueTo]);
+    useEffect(function () {
+        if (mode === 'single') {
+            return;
+        }
+        // Внутренние изменения (действия пользователя)
+        if (valueFrom !== period.selectedFrom || valueTo !== period.selectedTo) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(period.selectedFrom, period.selectedTo);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mode, period.selectedFrom, period.selectedTo]);
+    var minValue = (function () {
+        if (mode === 'single') {
+            return valueFrom;
+        }
+        var values = [period.selectedFrom, period.selectedTo, valueFrom, valueTo].filter(Boolean);
+        if (!values.length)
+            return undefined;
+        return Math.min.apply(Math, values);
+    })();
+    if (mode === 'single') {
+        return {
+            selectedFrom: selectedFrom,
+            selectedTo: selectedTo,
+            onChange: onChange,
+            onReset: onChange ? function () { return onChange(undefined); } : undefined,
+            value: valueFrom,
+        };
+    }
+    return {
+        selectedFrom: period.selectedFrom,
+        selectedTo: period.selectedTo,
+        onChange: period.updatePeriod,
+        onReset: period.resetPeriod,
+        value: minValue,
+    };
+}
+
+export { useRange };

package/calendar/esm/utils.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { DateShift, Day, DayAddons, Month, SpecialDays, SpecialDaysAddon } from "./typings";
+import { CalendarProps } from "./index";
 declare const DAYS_IN_WEEK = 7;
 declare const MONTHS_IN_YEAR = 12;
 declare const SUNDAY_INDEX = 6;
@@ -96,4 +97,8 @@ declare function getCalendarMobileTestIds(dataTestId: string): {
     btnNextDate: string;
     btnPreviousDate: string;
 };
-export { DAYS_IN_WEEK, MONTHS_IN_YEAR, SUNDAY_INDEX, DATE_FORMAT, NATIVE_DATE_FORMAT, WEEKDAYS, MONTHS, russianWeekDay, generateWeeks, generateMonths, generateYears, buildDay, buildMonth, limitDate, dateInLimits, monthName, dateArrayToHashTable, addonArrayToHashTable, getSelectionRange, modifyDateByShift, simulateTab, formatDate, parseDateString, getCalendarMobileTestIds };
+declare function isRangeValue(value: CalendarProps['value']): value is {
+    dateFrom?: number | undefined;
+    dateTo?: number | undefined;
+};
+export { DAYS_IN_WEEK, MONTHS_IN_YEAR, SUNDAY_INDEX, DATE_FORMAT, NATIVE_DATE_FORMAT, WEEKDAYS, MONTHS, russianWeekDay, generateWeeks, generateMonths, generateYears, buildDay, buildMonth, limitDate, dateInLimits, monthName, dateArrayToHashTable, addonArrayToHashTable, getSelectionRange, modifyDateByShift, simulateTab, formatDate, parseDateString, getCalendarMobileTestIds, isRangeValue };

package/calendar/esm/utils.js

@@ -224,5 +224,8 @@ function getCalendarMobileTestIds(dataTestId) {
         btnPreviousDate: getDataTestId(dataTestId, 'slider-btn-previous-day'),
     };
 }
+function isRangeValue(value) {
+    return Boolean(value) && typeof value === 'object';
+}
 
-export { DATE_FORMAT, DAYS_IN_WEEK, MONTHS, MONTHS_IN_YEAR, NATIVE_DATE_FORMAT, SUNDAY_INDEX, WEEKDAYS, addonArrayToHashTable, buildDay, buildMonth, dateArrayToHashTable, dateInLimits, formatDate, generateMonths, generateWeeks, generateYears, getCalendarMobileTestIds, getSelectionRange, limitDate, modifyDateByShift, monthName, parseDateString, russianWeekDay, simulateTab };
+export { DATE_FORMAT, DAYS_IN_WEEK, MONTHS, MONTHS_IN_YEAR, NATIVE_DATE_FORMAT, SUNDAY_INDEX, WEEKDAYS, addonArrayToHashTable, buildDay, buildMonth, dateArrayToHashTable, dateInLimits, formatDate, generateMonths, generateWeeks, generateYears, getCalendarMobileTestIds, getSelectionRange, isRangeValue, limitDate, modifyDateByShift, monthName, parseDateString, russianWeekDay, simulateTab };

package/calendar/modern/Component.responsive.d.ts

@@ -20,7 +20,7 @@ declare const CalendarResponsive: React.ForwardRefExoticComponent<CalendarDeskto
     onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void) | undefined;
     yearsAmount?: number | undefined;
     scrollableContainer?: HTMLElement | undefined;
-} & Omit<CalendarDesktopProps, ("contentClassName" | "headerClassName") | ("className" | "dataTestId" | "hasHeader" | "rangeComplete" | "responsive" | "onYearClick" | "showCurrentYearSelector" | "onPeriodClick" | "onMonthChange" | "defaultView" | "selectorView")> & Pick<CalendarDesktopProps, "className" | "dataTestId" | "hasHeader" | "rangeComplete" | "responsive" | "onYearClick" | "showCurrentYearSelector" | "onPeriodClick" | "onMonthChange" | "defaultView" | "selectorView"> & {
+} & Omit<CalendarDesktopProps, ("className" | "dataTestId" | "hasHeader" | "defaultView" | "selectorView" | "rangeComplete" | "onMonthChange" | "onYearClick" | "onPeriodClick" | "responsive" | "showCurrentYearSelector") | ("contentClassName" | "headerClassName")> & Pick<CalendarDesktopProps, "className" | "dataTestId" | "hasHeader" | "defaultView" | "selectorView" | "rangeComplete" | "onMonthChange" | "onYearClick" | "onPeriodClick" | "responsive" | "showCurrentYearSelector"> & {
     /**
      * Контрольная точка, с нее начинается desktop версия
      * @default 1024

package/calendar/modern/Component.responsive.js

@@ -38,6 +38,10 @@ import 'date-fns/startOfWeek';
 import 'date-fns/startOfYear';
 import 'date-fns/subDays';
 import 'date-fns/subMonths';
+import './useRange.js';
+import './usePeriod.js';
+import 'date-fns/differenceInDays';
+import '@alfalab/hooks';
 import './components/days-table/Component.js';
 import 'react-transition-group';
 import 'date-fns/isEqual';
@@ -45,7 +49,6 @@ import 'date-fns/isLastDayOfMonth';
 import 'date-fns/isToday';
 import 'date-fns/isWithinInterval';
 import '../../button/modern/desktop';
-import '@alfalab/hooks';
 import './components/header/Component.js';
 import './components/month-year-header/Component.js';
 import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
@@ -58,7 +61,6 @@ import '@alfalab/icons-glyph/ChevronBackMIcon';
 import './components/period-slider/utils.js';
 import 'date-fns/addQuarters';
 import 'date-fns/addWeeks';
-import 'date-fns/differenceInDays';
 import 'date-fns/endOfMonth';
 import 'date-fns/endOfQuarter';
 import 'date-fns/getQuarter';

package/calendar/modern/components/calendar-mobile/Component.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from 'react';
 import { CalendarContentProps } from "./typings";
-declare const CalendarMonthOnlyView: ({ value, month: monthTimestamp, minDate: minDateTimestamp, maxDate: maxDateTimestamp, defaultMonth: defaultMonthTimestamp, offDays, events, holidays, onChange, onMonthTitleClick, selectedFrom, selectedTo, yearsAmount, dayAddons, shape, scrollableContainer, }: CalendarContentProps) => React.JSX.Element;
+declare const CalendarMonthOnlyView: ({ value, mode, rangeBehavior, month: monthTimestamp, minDate: minDateTimestamp, maxDate: maxDateTimestamp, defaultMonth: defaultMonthTimestamp, offDays, events, holidays, onChange, onMonthTitleClick, selectedFrom, selectedTo, yearsAmount, dayAddons, shape, scrollableContainer, }: CalendarContentProps) => React.JSX.Element;
 declare const CalendarMonthOnlyViewHeader: () => React.JSX.Element;
 declare const CalendarMobile: React.ForwardRefExoticComponent<{
     title?: string | undefined;
@@ -14,5 +14,5 @@ declare const CalendarMobile: React.ForwardRefExoticComponent<{
     onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void) | undefined;
     yearsAmount?: number | undefined;
     scrollableContainer?: HTMLElement | undefined;
-} & Omit<import("../../desktop/index").CalendarDesktopProps, ("contentClassName" | "headerClassName") | ("className" | "dataTestId" | "hasHeader" | "rangeComplete" | "responsive" | "onYearClick" | "showCurrentYearSelector" | "onPeriodClick" | "onMonthChange" | "defaultView" | "selectorView")> & Pick<import("../../desktop/index").CalendarDesktopProps, "className" | "dataTestId" | "hasHeader" | "rangeComplete" | "responsive" | "onYearClick" | "showCurrentYearSelector" | "onPeriodClick" | "onMonthChange" | "defaultView" | "selectorView"> & React.RefAttributes<HTMLDivElement>>;
+} & Omit<import("../../desktop/index").CalendarDesktopProps, ("className" | "dataTestId" | "hasHeader" | "defaultView" | "selectorView" | "rangeComplete" | "onMonthChange" | "onYearClick" | "onPeriodClick" | "responsive" | "showCurrentYearSelector") | ("contentClassName" | "headerClassName")> & Pick<import("../../desktop/index").CalendarDesktopProps, "className" | "dataTestId" | "hasHeader" | "defaultView" | "selectorView" | "rangeComplete" | "onMonthChange" | "onYearClick" | "onPeriodClick" | "responsive" | "showCurrentYearSelector"> & React.RefAttributes<HTMLDivElement>>;
 export { CalendarMonthOnlyView, CalendarMonthOnlyViewHeader, CalendarMobile };

package/calendar/modern/components/calendar-mobile/Component.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState, useMemo } from 'react';
+import React, { forwardRef, useState, useMemo, useRef } from 'react';
 import mergeRefs from 'react-merge-refs';
 import { Virtuoso } from 'react-virtuoso';
 import { ResizeObserver } from '@juggle/resize-observer';
@@ -12,7 +12,8 @@ import { ModalMobile } from '../../../../modal/modern/mobile';
 import { getDataTestId } from '../../../../shared/modern';
 import { CalendarDesktop } from '../../desktop/Component.desktop.js';
 import { useCalendar } from '../../useCalendar.js';
-import { limitDate, dateArrayToHashTable, addonArrayToHashTable, generateMonths, generateWeeks, monthName, WEEKDAYS } from '../../utils.js';
+import { useRange } from '../../useRange.js';
+import { limitDate, dateArrayToHashTable, addonArrayToHashTable, generateMonths, generateWeeks, monthName, WEEKDAYS, isRangeValue } from '../../utils.js';
 import { DaysTable } from '../days-table/Component.js';
 import '@alfalab/hooks';
 import '../header/Component.js';
@@ -49,6 +50,7 @@ import 'date-fns/isThisYear';
 import 'date-fns/isSameDay';
 import 'date-fns/setYear';
 import 'date-fns/subYears';
+import '../../usePeriod.js';
 import 'date-fns/eachDayOfInterval';
 import 'date-fns/eachMonthOfInterval';
 import 'date-fns/eachYearOfInterval';
@@ -66,26 +68,33 @@ import 'date-fns/isEqual';
 import 'date-fns/isLastDayOfMonth';
 import 'date-fns/isWithinInterval';
 
-const backdropTransitionStyles = {"appear":"calendar__appear_dk62r","enter":"calendar__enter_dk62r","appearActive":"calendar__appearActive_dk62r","enterActive":"calendar__enterActive_dk62r","appearDone":"calendar__appearDone_dk62r","enterDone":"calendar__enterDone_dk62r","exit":"calendar__exit_dk62r","exitActive":"calendar__exitActive_dk62r","exitDone":"calendar__exitDone_dk62r"};
+const backdropTransitionStyles = {"appear":"calendar__appear_18z9m","enter":"calendar__enter_18z9m","appearActive":"calendar__appearActive_18z9m","enterActive":"calendar__enterActive_18z9m","appearDone":"calendar__appearDone_18z9m","enterDone":"calendar__enterDone_18z9m","exit":"calendar__exit_18z9m","exitActive":"calendar__exitActive_18z9m","exitDone":"calendar__exitDone_18z9m"};
 require('./backdrop-transitions.css');
 
-const styles = {"wrapper":"calendar__wrapper_18xlm","withZIndex":"calendar__withZIndex_18xlm","calendar":"calendar__calendar_18xlm","dayNames":"calendar__dayNames_18xlm","withHeader":"calendar__withHeader_18xlm","month":"calendar__month_18xlm","daysTable":"calendar__daysTable_18xlm","dayName":"calendar__dayName_18xlm","virtuoso":"calendar__virtuoso_18xlm","contentModal":"calendar__contentModal_18xlm","content":"calendar__content_18xlm"};
+const styles = {"wrapper":"calendar__wrapper_18h7q","withZIndex":"calendar__withZIndex_18h7q","calendar":"calendar__calendar_18h7q","dayNames":"calendar__dayNames_18h7q","withHeader":"calendar__withHeader_18h7q","month":"calendar__month_18h7q","daysTable":"calendar__daysTable_18h7q","dayName":"calendar__dayName_18h7q","virtuoso":"calendar__virtuoso_18h7q","contentModal":"calendar__contentModal_18h7q","content":"calendar__content_18h7q"};
 require('./index.css');
 
-const transitionStyles = {"appear":"calendar__appear_155x3","enter":"calendar__enter_155x3","appearActive":"calendar__appearActive_155x3","enterActive":"calendar__enterActive_155x3","exit":"calendar__exit_155x3","exitActive":"calendar__exitActive_155x3","exitDone":"calendar__exitDone_155x3"};
+const transitionStyles = {"appear":"calendar__appear_hz7ek","enter":"calendar__enter_hz7ek","appearActive":"calendar__appearActive_hz7ek","enterActive":"calendar__enterActive_hz7ek","exit":"calendar__exit_hz7ek","exitActive":"calendar__exitActive_hz7ek","exitDone":"calendar__exitDone_hz7ek"};
 require('./transitions.css');
 
 // ResizeObserverPolyfill необходим для корректной работы react-virtuoso.
 if (typeof window !== 'undefined' && !window.ResizeObserver) {
     window.ResizeObserver = ResizeObserver;
 }
-const CalendarMonthOnlyView = ({ value, month: monthTimestamp, minDate: minDateTimestamp, maxDate: maxDateTimestamp, defaultMonth: defaultMonthTimestamp, offDays, events, holidays, onChange, onMonthTitleClick, selectedFrom, selectedTo, yearsAmount = 3, dayAddons, shape = 'rounded', scrollableContainer, }) => {
+const CalendarMonthOnlyView = ({ value, mode = 'single', rangeBehavior = 'clarification', month: monthTimestamp, minDate: minDateTimestamp, maxDate: maxDateTimestamp, defaultMonth: defaultMonthTimestamp, offDays, events, holidays, onChange, onMonthTitleClick, selectedFrom, selectedTo, yearsAmount = 3, dayAddons, shape = 'rounded', scrollableContainer, }) => {
+    const range = useRange({
+        mode,
+        value,
+        selectedFrom,
+        selectedTo,
+        rangeBehavior,
+        onChange,
+    });
     const month = useMemo(() => (monthTimestamp ? new Date(monthTimestamp) : undefined), [monthTimestamp]);
     const minDate = useMemo(() => (minDateTimestamp ? startOfDay(minDateTimestamp) : undefined), [minDateTimestamp]);
     const maxDate = useMemo(() => (maxDateTimestamp ? endOfDay(maxDateTimestamp) : undefined), [maxDateTimestamp]);
-    const selected = useMemo(() => (value ? new Date(value) : undefined), [value]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const startingDate = useMemo(() => (value ? new Date(value) : new Date()), []);
+    const selected = useMemo(() => (range.value ? new Date(range.value) : undefined), [range.value]);
+    const startingDate = useRef(range.value);
     const defaultMonth = useMemo(() => startOfMonth(selected ||
         limitDate(defaultMonthTimestamp || Date.now(), minDateTimestamp, maxDateTimestamp)), [defaultMonthTimestamp, maxDateTimestamp, minDateTimestamp, selected]);
     const { activeMonth, highlighted, getDayProps } = useCalendar({
@@ -97,7 +106,7 @@ const CalendarMonthOnlyView = ({ value, month: monthTimestamp, minDate: minDateT
         selected,
         offDays,
         events,
-        onChange,
+        onChange: range.onChange,
         dayAddons,
     });
     const activeMonths = useMemo(() => {
@@ -107,7 +116,7 @@ const CalendarMonthOnlyView = ({ value, month: monthTimestamp, minDate: minDateT
         const dayAddonsMap = addonArrayToHashTable(dayAddons || []);
         const prevMonths = [];
         const nextMonths = [];
-        const date = new Date(startingDate.getTime());
+        const date = startingDate.current ? new Date(startingDate.current) : new Date();
         const currentYear = date.getFullYear();
         const currYearMonths = generateMonths(date, {});
         for (let i = 0; i < yearsAmount; i++) {
@@ -132,21 +141,11 @@ const CalendarMonthOnlyView = ({ value, month: monthTimestamp, minDate: minDateT
             }),
             title: `${monthName(item.date)} ${item.date.getFullYear()}`,
         }));
-    }, [
-        events,
-        offDays,
-        holidays,
-        dayAddons,
-        startingDate,
-        minDate,
-        maxDate,
-        yearsAmount,
-        selected,
-    ]);
+    }, [events, offDays, holidays, dayAddons, minDate, maxDate, yearsAmount, selected]);
     const initialMonthIndex = useMemo(() => {
-        const date = value || selectedFrom || activeMonth.getTime() || Date.now();
+        const date = range.value || range.selectedFrom || activeMonth.getTime() || Date.now();
         return activeMonths.findIndex((m) => isSameMonth(date, m.date));
-    }, [activeMonth, activeMonths, selectedFrom, value]);
+    }, [range.value, range.selectedFrom, activeMonth, activeMonths]);
     const renderMonth = (index) => (React.createElement("div", { className: styles.daysTable, id: `month-${index}` },
         onMonthTitleClick ? (
         /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */
@@ -154,7 +153,7 @@ const CalendarMonthOnlyView = ({ value, month: monthTimestamp, minDate: minDateT
             " ",
             activeMonths[index].title,
             " ")),
-        React.createElement(DaysTable, { withTransition: false, weeks: activeMonths[index].weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, hasHeader: false, responsive: true, shape: shape })));
+        React.createElement(DaysTable, { withTransition: false, weeks: activeMonths[index].weeks, activeMonth: activeMonth, selectedFrom: range.selectedFrom, selectedTo: range.selectedTo, getDayProps: getDayProps, highlighted: highlighted, hasHeader: false, responsive: true, shape: shape })));
     return (React.createElement(Virtuoso, { totalCount: activeMonths.length, itemContent: renderMonth, initialTopMostItemIndex: { index: initialMonthIndex ?? 0, align: 'center' }, increaseViewportBy: 500, itemSize: (el) => el.getBoundingClientRect().height + 32, customScrollParent: scrollableContainer, useWindowScroll: true, className: styles.virtuoso }));
 };
 const CalendarMonthOnlyViewHeader = () => (React.createElement("table", { className: styles.dayNames },
@@ -191,10 +190,12 @@ const CalendarMobile = forwardRef(({ hasHeader = true, allowSelectionFromEmptyRa
         return (React.createElement(CalendarDesktop, { responsive: true, className: cn(className, styles.calendar), contentClassName: styles.content, dataTestId: getDataTestId(dataTestId, 'mobile'), ...commonProps, ...restProps }));
     };
     const renderFooter = () => {
-        if (selectedFrom || selectedTo) {
-            let selectButtonDisabled = !selectedFrom || !selectedTo;
+        const valueFrom = isRangeValue(value) ? value.dateFrom : selectedFrom;
+        const valueTo = isRangeValue(value) ? value.dateTo : selectedTo;
+        if (valueFrom || valueTo) {
+            let selectButtonDisabled = !valueFrom || !valueTo;
             if (allowSelectionFromEmptyRange) {
-                selectButtonDisabled = !selectedFrom;
+                selectButtonDisabled = !valueFrom;
             }
             return (React.createElement(React.Fragment, null,
                 React.createElement(ButtonMobile, { view: 'secondary', size: 'm', block: true, onClick: handleClear, dataTestId: getDataTestId(dataTestId, 'btn-reset') }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C"),

package/calendar/modern/components/calendar-mobile/backdrop-transitions.css

@@ -1,4 +1,4 @@
-/* hash: inu59 */
+/* hash: vtkgp */
 :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-translucent-300: rgba(15, 25, 55, 0.1); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -15,19 +15,19 @@
 } :root {
 } :root {
 } :root {
-} .calendar__appear_dk62r,
-.calendar__enter_dk62r {
+} .calendar__appear_18z9m,
+.calendar__enter_18z9m {
     background-color: transparent;
-} .calendar__appearActive_dk62r,
-.calendar__enterActive_dk62r,
-.calendar__appearDone_dk62r,
-.calendar__enterDone_dk62r {
+} .calendar__appearActive_18z9m,
+.calendar__enterActive_18z9m,
+.calendar__appearDone_18z9m,
+.calendar__enterDone_18z9m {
     background-color: var(--color-light-neutral-translucent-300);
     transition: background-color 80ms linear;
-} .calendar__exit_dk62r {
+} .calendar__exit_18z9m {
     background-color: var(--color-light-neutral-translucent-300);
-} .calendar__exitActive_dk62r,
-.calendar__exitDone_dk62r {
+} .calendar__exitActive_18z9m,
+.calendar__exitDone_18z9m {
     background-color: transparent;
     transition: background-color 80ms linear;
     transition-delay: 280ms;

package/calendar/modern/components/calendar-mobile/index.css

@@ -1,4 +1,4 @@
-/* hash: 1k9vq */
+/* hash: 1abh8 */
 :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-modal-bg-primary: #fff;
@@ -57,26 +57,26 @@
     /* mobile */
 
     /* paddings */
-} .calendar__wrapper_18xlm {
+} .calendar__wrapper_18h7q {
     overflow-x: hidden;
-} .calendar__withZIndex_18xlm {
+} .calendar__withZIndex_18h7q {
     z-index: 2;
-} .calendar__calendar_18xlm.calendar__calendar_18xlm {
+} .calendar__calendar_18h7q.calendar__calendar_18h7q {
     height: 100%;
-} .calendar__calendar_18xlm th {
+} .calendar__calendar_18h7q th {
     border-bottom: 1px solid var(--color-light-neutral-300);
-} .calendar__dayNames_18xlm {
+} .calendar__dayNames_18h7q {
     width: 100%;
     position: sticky;
     background: var(--modal-header-background);
     top: 0;
     height: 32px;
     padding: 0 6px
-} .calendar__dayNames_18xlm.calendar__withHeader_18xlm {
+} .calendar__dayNames_18h7q.calendar__withHeader_18h7q {
         top: 48px;
-    } .calendar__dayNames_18xlm th {
+    } .calendar__dayNames_18h7q th {
     height: 100%;
-} .calendar__month_18xlm {
+} .calendar__month_18h7q {
     font-style: normal;
     font-weight: 700;
     font-size: 12px;
@@ -85,25 +85,25 @@
     text-transform: uppercase;
     color: var(--color-light-text-primary);
     margin-bottom: var(--gap-xs);
-} .calendar__daysTable_18xlm {
+} .calendar__daysTable_18h7q {
     display: flex;
     flex-direction: column;
     margin-top: var(--gap-2xl);
-} .calendar__dayName_18xlm {
+} .calendar__dayName_18h7q {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
 
     height: var(--calendar-day-size);
     color: var(--color-light-text-secondary)
-} @media (max-width: 374px) { .calendar__dayName_18xlm {
+} @media (max-width: 374px) { .calendar__dayName_18h7q {
         height: 36px
 }
-    } .calendar__virtuoso_18xlm {
+    } .calendar__virtuoso_18h7q {
     margin: 0 var(--gap-m);
-} .calendar__contentModal_18xlm {
+} .calendar__contentModal_18h7q {
     padding-right: 0;
     padding-left: 0;
-} .calendar__content_18xlm.calendar__content_18xlm {
+} .calendar__content_18h7q.calendar__content_18h7q {
     flex-basis: 0;
 }

package/calendar/modern/components/calendar-mobile/index.js

@@ -66,3 +66,5 @@ import 'date-fns/isThisYear';
 import '../../useCalendar.js';
 import 'date-fns/setYear';
 import 'date-fns/subYears';
+import '../../useRange.js';
+import '../../usePeriod.js';