@alfalab/core-components 42.0.0-beta.1 → 42.0.0-beta.2

package/calendar/modern/Component.responsive.js

@@ -9,7 +9,7 @@ import 'date-fns/endOfDay';
 import 'date-fns/getMonth';
 import 'date-fns/startOfDay';
 import 'date-fns/startOfMonth';
-import '../../button/modern';
+import '../../button/modern/mobile';
 import '../../modal/modern/mobile';
 import 'react-merge-refs';
 import 'date-fns/addMonths';
@@ -42,6 +42,7 @@ import 'date-fns/isEqual';
 import 'date-fns/isLastDayOfMonth';
 import 'date-fns/isToday';
 import 'date-fns/isWithinInterval';
+import '../../button/modern/desktop';
 import './components/header/Component.js';
 import './components/month-year-header/Component.js';
 import '@alfalab/icons-glyph/ChevronDownCompactSIcon';

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

@@ -6,7 +6,7 @@ import endOfDay from 'date-fns/endOfDay';
 import getMonth from 'date-fns/getMonth';
 import startOfDay from 'date-fns/startOfDay';
 import startOfMonth from 'date-fns/startOfMonth';
-import { Button } from '../../../../button/modern';
+import { ButtonMobile } from '../../../../button/modern/mobile';
 import { ModalMobile } from '../../../../modal/modern/mobile';
 import { CalendarDesktop } from '../../Component.desktop.js';
 import { useCalendar } from '../../useCalendar.js';
@@ -17,6 +17,7 @@ import '../header/Component.js';
 import '../month-year-header/Component.js';
 import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
 import '../select-button/Component.js';
+import '../../../../button/modern/desktop';
 import '../months-table/Component.js';
 import 'date-fns/isSameMonth';
 import 'date-fns/isThisMonth';
@@ -64,7 +65,7 @@ import 'date-fns/isLastDayOfMonth';
 import 'date-fns/isWithinInterval';
 import '../period-slider/utils.js';
 
-const styles = {"wrapper":"calendar__wrapper_1n08x","withZIndex":"calendar__withZIndex_1n08x","calendar":"calendar__calendar_1n08x","dayNames":"calendar__dayNames_1n08x","withHeader":"calendar__withHeader_1n08x","month":"calendar__month_1n08x","daysTable":"calendar__daysTable_1n08x","dayName":"calendar__dayName_1n08x"};
+const styles = {"wrapper":"calendar__wrapper_1sfsc","withZIndex":"calendar__withZIndex_1sfsc","calendar":"calendar__calendar_1sfsc","dayNames":"calendar__dayNames_1sfsc","withHeader":"calendar__withHeader_1sfsc","month":"calendar__month_1sfsc","daysTable":"calendar__daysTable_1sfsc","dayName":"calendar__dayName_1sfsc"};
 require('./index.css');
 
 // ResizeObserverPolyfill необходим для корректной работы react-virtuoso.
@@ -165,7 +166,7 @@ const CalendarMobile = forwardRef(({ hasHeader = true, allowSelectionFromEmptyRa
         if (monthOnlyView) {
             return (React.createElement(CalendarMonthOnlyView, { open: open, yearsAmount: yearsAmount, scrollableContainer: modalRef, ...commonProps, ...restProps }));
         }
-        return (React.createElement(CalendarDesktop, { responsive: true, className: styles.calendar, ...commonProps, ...restProps }));
+        return (React.createElement(CalendarDesktop, { responsive: true, className: cn(className, styles.calendar), ...commonProps, ...restProps }));
     };
     const renderFooter = () => {
         if (selectedFrom || selectedTo) {
@@ -174,13 +175,13 @@ const CalendarMobile = forwardRef(({ hasHeader = true, allowSelectionFromEmptyRa
                 selectButtonDisabled = !selectedFrom;
             }
             return (React.createElement(React.Fragment, null,
-                React.createElement(Button, { view: 'secondary', size: 's', block: true, onClick: handleClear }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C"),
-                React.createElement(Button, { view: 'primary', size: 's', block: true, onClick: handleClose, disabled: selectButtonDisabled }, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C")));
+                React.createElement(ButtonMobile, { view: 'secondary', size: 'm', block: true, onClick: handleClear }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C"),
+                React.createElement(ButtonMobile, { view: 'primary', size: 'm', block: true, onClick: handleClose, disabled: selectButtonDisabled }, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C")));
         }
         if (value) {
-            return (React.createElement(Button, { view: 'primary', size: 's', block: true, onClick: handleClose }, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C"));
+            return (React.createElement(ButtonMobile, { view: 'primary', size: 'm', block: true, onClick: handleClose }, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C"));
         }
-        return (React.createElement(Button, { view: 'secondary', size: 's', block: true, onClick: handleClose }, "\u041E\u0442\u043C\u0435\u043D\u0430"));
+        return (React.createElement(ButtonMobile, { view: 'secondary', size: 'm', block: true, onClick: handleClose }, "\u041E\u0442\u043C\u0435\u043D\u0430"));
     };
     return (React.createElement("div", { className: cn(className, styles.component), ref: ref, "data-test-id": dataTestId },
         React.createElement(ModalMobile, { open: open, onClose: handleClose, ref: (node) => setModalRef(node), className: styles.modal, wrapperClassName: styles.wrapper },

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

@@ -1,4 +1,4 @@
-/* hash: 1fucq */
+/* hash: 1xhbp */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff;
@@ -56,23 +56,23 @@
     /* mobile */
 
     /* paddings */
-} .calendar__wrapper_1n08x {
+} .calendar__wrapper_1sfsc {
     background: var(--color-light-bg-primary);
-} .calendar__withZIndex_1n08x {
+} .calendar__withZIndex_1sfsc {
     z-index: 2;
-} .calendar__calendar_1n08x th {
+} .calendar__calendar_1sfsc th {
     border-bottom: 1px solid var(--color-light-border-primary);
-} .calendar__dayNames_1n08x {
+} .calendar__dayNames_1sfsc {
     width: 100%;
     position: sticky;
     background: var(--modal-header-background);
     top: 0;
     height: 32px
-} .calendar__dayNames_1n08x.calendar__withHeader_1n08x {
+} .calendar__dayNames_1sfsc.calendar__withHeader_1sfsc {
         top: 48px;
-    } .calendar__dayNames_1n08x th {
+    } .calendar__dayNames_1sfsc th {
     height: 100%;
-} .calendar__month_1n08x {
+} .calendar__month_1sfsc {
     font-style: normal;
     font-weight: 700;
     font-size: 12px;
@@ -81,18 +81,18 @@
     text-transform: uppercase;
     color: var(--color-light-text-primary);
     margin-bottom: var(--gap-xs);
-} .calendar__daysTable_1n08x {
+} .calendar__daysTable_1sfsc {
     display: flex;
     flex-direction: column;
     margin-top: var(--gap-2xl);
-} .calendar__dayName_1n08x {
+} .calendar__dayName_1sfsc {
     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_1n08x {
+} @media (max-width: 374px) { .calendar__dayName_1sfsc {
         height: 36px
 }
     }

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

@@ -7,7 +7,7 @@ import 'date-fns/endOfDay';
 import 'date-fns/getMonth';
 import 'date-fns/startOfDay';
 import 'date-fns/startOfMonth';
-import '../../../../button/modern';
+import '../../../../button/modern/mobile';
 import '../../../../modal/modern/mobile';
 import '../../Component.desktop.js';
 import '@alfalab/hooks';
@@ -18,6 +18,7 @@ import 'date-fns/isLastDayOfMonth';
 import 'date-fns/isSameDay';
 import 'date-fns/isToday';
 import 'date-fns/isWithinInterval';
+import '../../../../button/modern/desktop';
 import 'date-fns/addDays';
 import 'date-fns/addMonths';
 import 'date-fns/eachDayOfInterval';

package/calendar/modern/components/days-table/Component.js

@@ -7,7 +7,7 @@ import isSameDay from 'date-fns/isSameDay';
 import isToday from 'date-fns/isToday';
 import isWithinInterval from 'date-fns/isWithinInterval';
 import startOfMonth from 'date-fns/startOfMonth';
-import { Button } from '../../../../button/modern';
+import { ButtonDesktop } from '../../../../button/modern/desktop';
 import { usePrevious } from '@alfalab/hooks';
 import { getSelectionRange, WEEKDAYS, russianWeekDay } from '../../utils.js';
 import 'date-fns/addDays';
@@ -30,7 +30,7 @@ import 'date-fns/startOfYear';
 import 'date-fns/subDays';
 import 'date-fns/subMonths';
 
-const styles = {"daysTable":"calendar__daysTable_1s32e","responsive":"calendar__responsive_1s32e","dayName":"calendar__dayName_1s32e","day":"calendar__day_1s32e","rounded":"calendar__rounded_1s32e","rectangular":"calendar__rectangular_1s32e","highlighted":"calendar__highlighted_1s32e","range":"calendar__range_1s32e","disabled":"calendar__disabled_1s32e","holiday":"calendar__holiday_1s32e","today":"calendar__today_1s32e","rangeComplete":"calendar__rangeComplete_1s32e","selected":"calendar__selected_1s32e","dayWrapper":"calendar__dayWrapper_1s32e","cursorPointer":"calendar__cursorPointer_1s32e","rangeEnd":"calendar__rangeEnd_1s32e","rangeStart":"calendar__rangeStart_1s32e","transitLeft":"calendar__transitLeft_1s32e","transitRight":"calendar__transitRight_1s32e","sharpTransitLeft":"calendar__sharpTransitLeft_1s32e","sharpTransitRight":"calendar__sharpTransitRight_1s32e","daysEnter":"calendar__daysEnter_1s32e","left":"calendar__left_1s32e","daysEnterActive":"calendar__daysEnterActive_1s32e","daysExit":"calendar__daysExit_1s32e","daysExitActive":"calendar__daysExitActive_1s32e","right":"calendar__right_1s32e","dayAddons":"calendar__dayAddons_1s32e","dayContent":"calendar__dayContent_1s32e","addons":"calendar__addons_1s32e","dot":"calendar__dot_1s32e","bottomAddon":"calendar__bottomAddon_1s32e"};
+const styles = {"daysTable":"calendar__daysTable_1xilt","responsive":"calendar__responsive_1xilt","dayName":"calendar__dayName_1xilt","day":"calendar__day_1xilt","rounded":"calendar__rounded_1xilt","rectangular":"calendar__rectangular_1xilt","highlighted":"calendar__highlighted_1xilt","range":"calendar__range_1xilt","disabled":"calendar__disabled_1xilt","holiday":"calendar__holiday_1xilt","today":"calendar__today_1xilt","rangeComplete":"calendar__rangeComplete_1xilt","selected":"calendar__selected_1xilt","dayWrapper":"calendar__dayWrapper_1xilt","cursorPointer":"calendar__cursorPointer_1xilt","rangeEnd":"calendar__rangeEnd_1xilt","rangeStart":"calendar__rangeStart_1xilt","transitLeft":"calendar__transitLeft_1xilt","transitRight":"calendar__transitRight_1xilt","sharpTransitLeft":"calendar__sharpTransitLeft_1xilt","sharpTransitRight":"calendar__sharpTransitRight_1xilt","daysEnter":"calendar__daysEnter_1xilt","left":"calendar__left_1xilt","daysEnterActive":"calendar__daysEnterActive_1xilt","daysExit":"calendar__daysExit_1xilt","daysExitActive":"calendar__daysExitActive_1xilt","right":"calendar__right_1xilt","dayAddons":"calendar__dayAddons_1xilt","dayContent":"calendar__dayContent_1xilt","addons":"calendar__addons_1xilt","dot":"calendar__dot_1xilt","bottomAddon":"calendar__bottomAddon_1xilt"};
 require('./index.css');
 
 /* eslint-disable complexity */
@@ -97,7 +97,7 @@ const DaysTable = ({ weeks = [], activeMonth = new Date(), highlighted, selected
                     dayProps.ref(node);
                 }
             }, onClick: handleDayClick },
-            React.createElement(Button, { type: 'button', view: 'ghost', size: 'xs', disabled: day.disabled, className: cn(styles.day, styles[shape], {
+            React.createElement(ButtonDesktop, { type: 'button', view: 'ghost', size: 'xs', disabled: day.disabled, className: cn(styles.day, styles[shape], {
                     [styles.dayAddons]: day.dayAddon,
                     [styles.selected]: daySelected,
                     [styles.today]: isToday(day.date),

package/calendar/modern/components/days-table/index.css

@@ -1,4 +1,4 @@
-/* hash: 195zj */
+/* hash: 1kjjm */
 :root {
 } /* deprecated */ :root {
     --color-light-graphic-primary: #0e0e0e;
@@ -69,27 +69,27 @@
     /* marker */
     --calendar-marker-background: var(--color-light-graphic-primary);
     --calendar-marker-selected-background: var(--color-light-graphic-primary-inverted);
-} .calendar__daysTable_1s32e {
+} .calendar__daysTable_1xilt {
     border-collapse: separate;
     border-spacing: 0;
     position: relative
-} .calendar__daysTable_1s32e.calendar__responsive_1s32e {
+} .calendar__daysTable_1xilt.calendar__responsive_1xilt {
         width: 100%;
-    } .calendar__daysTable_1s32e th {
+    } .calendar__daysTable_1xilt th {
         padding: 0;
-    } .calendar__daysTable_1s32e td {
+    } .calendar__daysTable_1xilt td {
         padding: var(--gap-2xs) 0 0;
-    } .calendar__dayName_1s32e {
+    } .calendar__dayName_1xilt {
     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_1s32e {
+} @media (max-width: 374px) { .calendar__dayName_1xilt {
         height: 36px
 }
-    } .calendar__day_1s32e {
+    } .calendar__day_1xilt {
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
     position: relative;
@@ -102,41 +102,41 @@
     box-sizing: border-box;
     color: var(--color-light-text-primary);
     z-index: 1
-} .calendar__day_1s32e.calendar__rounded_1s32e {
+} .calendar__day_1xilt.calendar__rounded_1xilt {
         border-radius: var(--calendar-day-border-radius);
-    } .calendar__day_1s32e.calendar__rectangular_1s32e {
+    } .calendar__day_1xilt.calendar__rectangular_1xilt {
         border-radius: var(--border-radius-m);
         width: 44px;
-    } .calendar__day_1s32e.calendar__highlighted_1s32e,
-    .calendar__day_1s32e.calendar__range_1s32e.calendar__highlighted_1s32e:not(.calendar__disabled_1s32e) {
+    } .calendar__day_1xilt.calendar__highlighted_1xilt,
+    .calendar__day_1xilt.calendar__range_1xilt.calendar__highlighted_1xilt:not(.calendar__disabled_1xilt) {
         color: var(--calendar-highlighted-color);
         background: var(--calendar-highlighted-background);
-    } .calendar__day_1s32e.calendar__holiday_1s32e {
+    } .calendar__day_1xilt.calendar__holiday_1xilt {
         color: var(--calendar-holiday-color);
-    } .calendar__day_1s32e.calendar__disabled_1s32e {
+    } .calendar__day_1xilt.calendar__disabled_1xilt {
         pointer-events: none;
         color: var(--calendar-disabled-color);
 
         background: var(--calendar-disabled-background);
         cursor: default;
-    } .calendar__day_1s32e.calendar__today_1s32e {
+    } .calendar__day_1xilt.calendar__today_1xilt {
         color: var(--calendar-today-color);
-    } .calendar__day_1s32e.calendar__rangeComplete_1s32e {
+    } .calendar__day_1xilt.calendar__rangeComplete_1xilt {
         background: var(--calendar-range-complete-background);
-    } .calendar__day_1s32e.calendar__selected_1s32e,
-    .calendar__day_1s32e.calendar__disabled_1s32e.calendar__selected_1s32e {
+    } .calendar__day_1xilt.calendar__selected_1xilt,
+    .calendar__day_1xilt.calendar__disabled_1xilt.calendar__selected_1xilt {
         color: var(--calendar-selected-color);
         background: var(--calendar-selected-background);
     } @media (hover) {
-            .calendar__day_1s32e.calendar__selected_1s32e:hover {
+            .calendar__day_1xilt.calendar__selected_1xilt:hover {
                 background: var(--calendar-selected-hover-background);
             }
-        } .calendar__day_1s32e:focus {
+        } .calendar__day_1xilt:focus {
         z-index: 1;
-    } /* RANGE */ .calendar__dayWrapper_1s32e {
+    } /* RANGE */ .calendar__dayWrapper_1xilt {
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     position: relative
-} .calendar__dayWrapper_1s32e:before {
+} .calendar__dayWrapper_1xilt:before {
         content: '';
         display: block;
         position: absolute;
@@ -144,27 +144,27 @@
         bottom: 0;
         width: 100%;
         height: var(--calendar-day-size);
-    } .calendar__dayWrapper_1s32e:focus {
+    } .calendar__dayWrapper_1xilt:focus {
         outline: none;
-    } .calendar__dayWrapper_1s32e.calendar__cursorPointer_1s32e {
+    } .calendar__dayWrapper_1xilt.calendar__cursorPointer_1xilt {
         cursor: pointer;
-    } .calendar__range_1s32e .calendar__day_1s32e:not(.calendar__selected_1s32e):not(.calendar__disabled_1s32e):not(.calendar__today_1s32e):not(.calendar__holiday_1s32e) {
+    } .calendar__range_1xilt .calendar__day_1xilt:not(.calendar__selected_1xilt):not(.calendar__disabled_1xilt):not(.calendar__today_1xilt):not(.calendar__holiday_1xilt) {
         color: var(--calendar-range-color);
-    } .calendar__range_1s32e:before {
+    } .calendar__range_1xilt:before {
         background: var(--calendar-range-background);
-    } .calendar__rangeEnd_1s32e:before {
+    } .calendar__rangeEnd_1xilt:before {
         width: calc(50% + 20px);
         border-top-right-radius: var(--calendar-day-border-radius);
         border-bottom-right-radius: var(--calendar-day-border-radius);
-    } .calendar__rangeStart_1s32e:before {
+    } .calendar__rangeStart_1xilt:before {
         left: auto;
         right: 0;
         width: calc(50% + 20px);
         border-top-left-radius: var(--calendar-day-border-radius);
         border-bottom-left-radius: var(--calendar-day-border-radius);
-    } .calendar__rangeComplete_1s32e:before {
+    } .calendar__rangeComplete_1xilt:before {
         background: var(--calendar-range-complete-background);
-    } .calendar__transitLeft_1s32e:after, .calendar__transitRight_1s32e:after {
+    } .calendar__transitLeft_1xilt:after, .calendar__transitRight_1xilt:after {
         content: '';
         position: absolute;
         display: block;
@@ -172,81 +172,81 @@
         height: var(--calendar-day-size);
         bottom: 0;
         pointer-events: none;
-    } .calendar__transitLeft_1s32e:after {
+    } .calendar__transitLeft_1xilt:after {
         right: 100%;
         background: linear-gradient(
             270deg,
             var(--calendar-range-background) 0%,
             var(--color-light-specialbg-nulled) 100%
         );
-    } .calendar__transitLeft_1s32e:first-child:before {
+    } .calendar__transitLeft_1xilt:first-child:before {
             opacity: 0;
-        } .calendar__transitLeft_1s32e:first-child:after {
+        } .calendar__transitLeft_1xilt:first-child:after {
             right: 0;
-        } .calendar__transitRight_1s32e:after {
+        } .calendar__transitRight_1xilt:after {
         left: 100%;
         background: linear-gradient(
             270deg,
             var(--color-light-specialbg-nulled) 0%,
             var(--calendar-range-background) 100%
         );
-    } .calendar__transitRight_1s32e:last-child:before {
+    } .calendar__transitRight_1xilt:last-child:before {
             opacity: 0;
-        } .calendar__transitRight_1s32e:last-child:after {
+        } .calendar__transitRight_1xilt:last-child:after {
             left: 0;
-        } .calendar__sharpTransitLeft_1s32e:first-child:before {
+        } .calendar__sharpTransitLeft_1xilt:first-child:before {
             opacity: 1;
-        } .calendar__sharpTransitLeft_1s32e:first-child:after {
+        } .calendar__sharpTransitLeft_1xilt:first-child:after {
             opacity: 0;
-        } .calendar__sharpTransitRight_1s32e:last-child:before {
+        } .calendar__sharpTransitRight_1xilt:last-child:before {
             opacity: 1;
-        } .calendar__sharpTransitRight_1s32e:last-child:after {
+        } .calendar__sharpTransitRight_1xilt:last-child:after {
             opacity: 0;
-        } .calendar__rangeComplete_1s32e.calendar__transitLeft_1s32e:after {
+        } .calendar__rangeComplete_1xilt.calendar__transitLeft_1xilt:after {
         background: linear-gradient(
             270deg,
             var(--calendar-range-complete-background) 0%,
             var(--color-light-specialbg-nulled) 100%
         );
-    } .calendar__rangeComplete_1s32e.calendar__transitRight_1s32e:after {
+    } .calendar__rangeComplete_1xilt.calendar__transitRight_1xilt:after {
         background: linear-gradient(
             270deg,
             var(--color-light-specialbg-nulled) 0%,
             var(--calendar-range-complete-background) 100%
         );
-    } /* SLIDE ANIMATION */ .calendar__daysEnter_1s32e .calendar__dayWrapper_1s32e {
+    } /* SLIDE ANIMATION */ .calendar__daysEnter_1xilt .calendar__dayWrapper_1xilt {
     width: 100px;
-} .calendar__left_1s32e .calendar__daysEnter_1s32e {
+} .calendar__left_1xilt .calendar__daysEnter_1xilt {
         transform: translateX(50px);
-    } .calendar__left_1s32e .calendar__daysEnterActive_1s32e {
+    } .calendar__left_1xilt .calendar__daysEnterActive_1xilt {
         transform: translateX(0);
-    } .calendar__left_1s32e .calendar__daysExit_1s32e {
+    } .calendar__left_1xilt .calendar__daysExit_1xilt {
         transform: translateX(0);
-    } .calendar__left_1s32e .calendar__daysExitActive_1s32e {
+    } .calendar__left_1xilt .calendar__daysExitActive_1xilt {
         transform: translateX(-50px);
-    } .calendar__right_1s32e .calendar__daysEnter_1s32e {
+    } .calendar__right_1xilt .calendar__daysEnter_1xilt {
         transform: translateX(-50px);
-    } .calendar__right_1s32e .calendar__daysEnterActive_1s32e {
+    } .calendar__right_1xilt .calendar__daysEnterActive_1xilt {
         transform: translateX(0);
-    } .calendar__right_1s32e .calendar__daysExit_1s32e {
+    } .calendar__right_1xilt .calendar__daysExit_1xilt {
         transform: translateX(0);
-    } .calendar__right_1s32e .calendar__daysExitActive_1s32e {
+    } .calendar__right_1xilt .calendar__daysExitActive_1xilt {
         transform: translateX(50px);
-    } .calendar__dayAddons_1s32e > span {
+    } .calendar__dayAddons_1xilt > span {
         display: flex;
         flex-direction: column;
         justify-content: flex-end;
         height: inherit;
         padding: 0 var(--gap-3xs);
-    } .calendar__dayContent_1s32e {
+    } .calendar__dayContent_1xilt {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400
-} .calendar__dayContent_1s32e.calendar__today_1s32e {
+} .calendar__dayContent_1xilt.calendar__today_1xilt {
         font-weight: bold;
-    } .calendar__addons_1s32e {
+    } .calendar__addons_1xilt {
     min-height: 8px;
-} .calendar__dot_1s32e {
+} .calendar__dot_1xilt {
     display: block;
     position: absolute;
     bottom: 4px;
@@ -256,25 +256,25 @@
     transform: translateX(-50%);
     border-radius: var(--border-radius-circle);
     background: var(--calendar-marker-background);
-} .calendar__selected_1s32e .calendar__dot_1s32e {
+} .calendar__selected_1xilt .calendar__dot_1xilt {
     background: var(--calendar-marker-selected-background);
-} .calendar__daysEnter_1s32e {
+} .calendar__daysEnter_1xilt {
     opacity: 0;
     position: absolute;
     left: 0;
-} .calendar__daysEnterActive_1s32e {
+} .calendar__daysEnterActive_1xilt {
     opacity: 1;
-} .calendar__daysExit_1s32e {
+} .calendar__daysExit_1xilt {
     pointer-events: none;
     opacity: 1;
-} .calendar__daysExitActive_1s32e {
+} .calendar__daysExitActive_1xilt {
     opacity: 0;
-} .calendar__daysEnterActive_1s32e,
-.calendar__daysExitActive_1s32e {
+} .calendar__daysEnterActive_1xilt,
+.calendar__daysExitActive_1xilt {
     transition: opacity 200ms, transform 300ms;
-} .calendar__bottomAddon_1s32e {
+} .calendar__bottomAddon_1xilt {
     margin: 0 auto
-} .calendar__bottomAddon_1s32e.calendar__selected_1s32e,
-    .calendar__bottomAddon_1s32e.calendar__selected_1s32e > * {
+} .calendar__bottomAddon_1xilt.calendar__selected_1xilt,
+    .calendar__bottomAddon_1xilt.calendar__selected_1xilt > * {
         color: var(--calendar-selected-color);
     }

package/calendar/modern/components/days-table/index.js

@@ -8,7 +8,7 @@ import 'date-fns/isSameDay';
 import 'date-fns/isToday';
 import 'date-fns/isWithinInterval';
 import 'date-fns/startOfMonth';
-import '../../../../button/modern';
+import '../../../../button/modern/desktop';
 import '@alfalab/hooks';
 import 'date-fns/addDays';
 import 'date-fns/addMonths';

package/calendar/modern/components/header/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-const styles = {"header":"calendar__header_s4cnn","withShadow":"calendar__withShadow_s4cnn"};
+const styles = {"header":"calendar__header_xjw24","withShadow":"calendar__withShadow_xjw24"};
 require('./index.css');
 
 const Header = ({ view = 'full', withShadow, children }) => (React.createElement("div", { className: cn(styles.header, {

package/calendar/modern/components/header/index.css

@@ -1,4 +1,4 @@
-/* hash: nu134 */
+/* hash: q6paw */
 :root {
 } /* deprecated */ :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 */
 } :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 */
@@ -39,13 +39,13 @@
     /* disabled */
 
     /* marker */
-} .calendar__header_s4cnn {
+} .calendar__header_xjw24 {
     width: 100%;
     box-sizing: border-box;
     padding: var(--gap-m) var(--gap-m) var(--gap-s);
     transition: box-shadow 0.2s ease;
     display: flex;
     justify-content: center;
-} .calendar__withShadow_s4cnn {
+} .calendar__withShadow_xjw24 {
     box-shadow: var(--shadow-s);
 }

package/calendar/modern/components/month-year-header/Component.js

@@ -24,9 +24,9 @@ import 'date-fns/startOfWeek';
 import 'date-fns/startOfYear';
 import 'date-fns/subDays';
 import 'date-fns/subMonths';
-import '../../../../button/modern';
+import '../../../../button/modern/desktop';
 
-const styles = {"component":"calendar__component_m5aqp","button":"calendar__button_m5aqp","month":"calendar__month_m5aqp","year":"calendar__year_m5aqp","buttonContent":"calendar__buttonContent_m5aqp","upDownIcon":"calendar__upDownIcon_m5aqp"};
+const styles = {"component":"calendar__component_gprc8","button":"calendar__button_gprc8","month":"calendar__month_gprc8","year":"calendar__year_gprc8","buttonContent":"calendar__buttonContent_gprc8","upDownIcon":"calendar__upDownIcon_gprc8"};
 require('./index.css');
 
 const MonthYearHeader = ({ value, className, onMonthClick, onYearClick, dataTestId, }) => {

package/calendar/modern/components/month-year-header/index.css

@@ -1,4 +1,4 @@
-/* hash: to00a */
+/* hash: 962oe */
 :root {
 } /* deprecated */ :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 */
 } :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 */
@@ -37,33 +37,33 @@
     /* disabled */
 
     /* marker */
-} .calendar__component_m5aqp {
+} .calendar__component_gprc8 {
     position: relative;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
-} .cc-calendar .calendar__button_m5aqp {
+} .cc-calendar .calendar__button_gprc8 {
         border-radius: var(--border-radius-s);
-    } .calendar__month_m5aqp {
+    } .calendar__month_gprc8 {
     flex-basis: 65%
-} @media (max-width: 374px) { .calendar__month_m5aqp {
+} @media (max-width: 374px) { .calendar__month_gprc8 {
         flex-grow: 1
 }
-    } .calendar__year_m5aqp {
+    } .calendar__year_gprc8 {
     flex-basis: 35%;
     margin-left: var(--gap-xs)
-} @media (max-width: 374px) { .calendar__year_m5aqp {
+} @media (max-width: 374px) { .calendar__year_gprc8 {
         width: 90px
 }
-    } .calendar__buttonContent_m5aqp {
+    } .calendar__buttonContent_gprc8 {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
-} .calendar__upDownIcon_m5aqp {
+} .calendar__upDownIcon_gprc8 {
     margin-left: var(--gap-xs)
-} @media (max-width: 374px) { .calendar__upDownIcon_m5aqp {
+} @media (max-width: 374px) { .calendar__upDownIcon_gprc8 {
         margin-left: auto
 }
     }

package/calendar/modern/components/month-year-header/index.js

@@ -24,5 +24,5 @@ import 'date-fns/startOfYear';
 import 'date-fns/subDays';
 import 'date-fns/subMonths';
 import '../select-button/Component.js';
-import '../../../../button/modern';
+import '../../../../button/modern/desktop';
 import '../../utils.js';

package/calendar/modern/components/months-table/Component.js

@@ -25,9 +25,9 @@ import 'date-fns/startOfWeek';
 import 'date-fns/startOfYear';
 import 'date-fns/subDays';
 import 'date-fns/subMonths';
-import '../../../../button/modern';
+import '../../../../button/modern/desktop';
 
-const styles = {"monthsTable":"calendar__monthsTable_s1zu9","responsive":"calendar__responsive_s1zu9","button":"calendar__button_s1zu9"};
+const styles = {"monthsTable":"calendar__monthsTable_mmgfs","responsive":"calendar__responsive_mmgfs","button":"calendar__button_mmgfs"};
 require('./index.css');
 
 const MonthsTable = ({ selectedMonth, months = [], getMonthProps, responsive, }) => {