@alfalab/core-components 47.15.0 → 47.17.0

package/calendar/modern/desktop/desktop.css

@@ -1,4 +1,4 @@
-/* hash: 3ersp */
+/* hash: 1tifj */
 :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);
@@ -16,16 +16,18 @@
     --border-radius-circle: 50%;
 
     /* новые значения, используйте их */
+    --border-radius-6: 6px;
 } :root { /* deprecated */
     --gap-2xs: 4px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
     --gap-m: 16px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 
     /* новые значения, используйте их */
+    --gap-0: 0;
     --gap-4: var(--gap-2xs);
     --gap-16: var(--gap-m);
 } :root {
 } :root {
-} :root {
+} /* сбрасывает синюю подсветку при нажатии */ :root {
     --calendar-height: 344px;
     --calendar-width: 344px;
     --calendar-inner-width: 280px;
@@ -50,94 +52,94 @@
     /* disabled */
 
     /* marker */
-} .calendar__component_lwz7z {
+} .calendar__component_5zea7 {
     width: var(--calendar-width);
     height: var(--calendar-height);
     display: flex;
     flex-direction: column;
     overflow: hidden;
     outline: none
-} @media (max-width: 374px) { .calendar__component_lwz7z {
+} @media (max-width: 374px) { .calendar__component_5zea7 {
         align-items: center;
         width: 100%
 }
-    } .calendar__component_lwz7z.calendar__responsive_lwz7z {
+    } .calendar__component_5zea7.calendar__responsive_5zea7 {
         width: 100%
-    } .calendar__component_lwz7z.calendar__responsive_lwz7z .calendar__period_lwz7z {
+    } .calendar__component_5zea7.calendar__responsive_5zea7 .calendar__period_5zea7 {
             width: 100%;
-        } .calendar__component_lwz7z.calendar__responsive_lwz7z .calendar__monthYear_lwz7z {
+        } .calendar__component_5zea7.calendar__responsive_5zea7 .calendar__monthYear_5zea7 {
             width: 100%;
-        } .calendar__component_lwz7z.calendar__responsive_lwz7z .calendar__container_lwz7z {
+        } .calendar__component_5zea7.calendar__responsive_5zea7 .calendar__container_5zea7 {
             width: 100%;
-        } .calendar__container_lwz7z {
+        } .calendar__container_5zea7 {
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 0 var(--gap-16) var(--gap-16);
+    padding: var(--gap-0) var(--gap-16) var(--gap-16);
     box-sizing: border-box;
     flex-grow: 1;
     overflow: hidden
-} .calendar__container_lwz7z.calendar__customScrollbar_lwz7z {
+} .calendar__container_5zea7.calendar__customScrollbar_5zea7 {
         overflow: auto;
         cursor: auto;
-    } .calendar__container_lwz7z.calendar__customScrollbar_lwz7z::-webkit-scrollbar {
+    } .calendar__container_5zea7.calendar__customScrollbar_5zea7::-webkit-scrollbar {
         width: 12px;
         height: 12px;
-    } .calendar__container_lwz7z.calendar__customScrollbar_lwz7z::-webkit-scrollbar-track {
+    } .calendar__container_5zea7.calendar__customScrollbar_5zea7::-webkit-scrollbar-track {
         background-color: transparent;
-    } .calendar__container_lwz7z.calendar__customScrollbar_lwz7z::-webkit-scrollbar-track-piece {
+    } .calendar__container_5zea7.calendar__customScrollbar_5zea7::-webkit-scrollbar-track-piece {
         background-color: transparent;
-    } .calendar__container_lwz7z.calendar__customScrollbar_lwz7z::-webkit-scrollbar-thumb {
+    } .calendar__container_5zea7.calendar__customScrollbar_5zea7::-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_lwz7z.calendar__customScrollbar_lwz7z::-webkit-scrollbar-thumb:vertical {
-        border-radius: var(--border-radius-circle) / 6px;
+    } .calendar__container_5zea7.calendar__customScrollbar_5zea7::-webkit-scrollbar-thumb:vertical {
+        border-radius: var(--border-radius-circle) / var(--border-radius-6);
         min-height: 40px;
-    } .calendar__container_lwz7z.calendar__customScrollbar_lwz7z::-webkit-scrollbar-thumb:vertical:hover {
+    } .calendar__container_5zea7.calendar__customScrollbar_5zea7::-webkit-scrollbar-thumb:vertical:hover {
         border-radius: var(--border-radius-circle) / 7px;
         border-width: 4px 3px;
-    } .calendar__container_lwz7z.calendar__customScrollbar_lwz7z::-webkit-scrollbar-thumb:horizontal {
-        border-radius: 6px / var(--border-radius-circle);
+    } .calendar__container_5zea7.calendar__customScrollbar_5zea7::-webkit-scrollbar-thumb:horizontal {
+        border-radius: var(--border-radius-6) / var(--border-radius-circle);
         min-width: 40px;
-    } .calendar__container_lwz7z.calendar__customScrollbar_lwz7z::-webkit-scrollbar-thumb:horizontal:hover {
+    } .calendar__container_5zea7.calendar__customScrollbar_5zea7::-webkit-scrollbar-thumb:horizontal:hover {
         border-radius: 7px / var(--border-radius-circle);
         border-width: 3px 4px;
-    } .calendar__container_lwz7z.calendar__customScrollbar_lwz7z::-webkit-scrollbar-thumb:active {
+    } .calendar__container_5zea7.calendar__customScrollbar_5zea7::-webkit-scrollbar-thumb:active {
         background-color: var(--color-light-text-secondary);
-    } .calendar__container_lwz7z.calendar__customScrollbar_lwz7z::-webkit-resizer {
+    } .calendar__container_5zea7.calendar__customScrollbar_5zea7::-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_lwz7z.calendar__customScrollbar_lwz7z::-webkit-scrollbar-button,
-    .calendar__container_lwz7z.calendar__customScrollbar_lwz7z::-webkit-scrollbar-corner {
+    } .calendar__container_5zea7.calendar__customScrollbar_5zea7::-webkit-scrollbar-button,
+    .calendar__container_5zea7.calendar__customScrollbar_5zea7::-webkit-scrollbar-corner {
         display: none;
-    } .calendar__container_lwz7z.calendar__customScrollbar_lwz7z {
+    } .calendar__container_5zea7.calendar__customScrollbar_5zea7 {
 
         display: block;
         padding-right: var(--gap-4);
         overflow: hidden auto;
         scrollbar-gutter: stable;
-    } .calendar__container_lwz7z.calendar__nativeScrollbar_lwz7z {
+    } .calendar__container_5zea7.calendar__nativeScrollbar_5zea7 {
         overflow: hidden auto;
-    } @media (max-width: 374px) { .calendar__container_lwz7z {
+    } @media (max-width: 374px) { .calendar__container_5zea7 {
         width: 288px
 }
-    } .calendar__sixWeeks_lwz7z {
+    } .calendar__sixWeeks_5zea7 {
     height: 388px;
-} .calendar__period_lwz7z {
+} .calendar__period_5zea7 {
     width: var(--calendar-inner-width)
-} @media (max-width: 374px) { .calendar__period_lwz7z {
+} @media (max-width: 374px) { .calendar__period_5zea7 {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
-        margin: 0 auto
+        margin: var(--gap-0) auto
 }
-    } .calendar__monthYear_lwz7z {
+    } .calendar__monthYear_5zea7 {
     width: var(--calendar-inner-width)
-} @media (max-width: 374px) { .calendar__monthYear_lwz7z {
+} @media (max-width: 374px) { .calendar__monthYear_5zea7 {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
-        margin: 0 auto
+        margin: var(--gap-0) auto
 }
     }

package/calendar/moderncssm/Component.responsive.js

@@ -62,6 +62,7 @@ import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
 import './components/select-button/Component.js';
 import './components/select-button/index.module.css';
 import './components/month-year-header/index.module.css';
+import './components/month-year-header/mobile.module.css';
 import './components/months-table/Component.js';
 import './components/months-table/index.module.css';
 import './components/period-slider/Component.js';

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

@@ -32,6 +32,7 @@ import '../select-button/Component.js';
 import '../../../../button/moderncssm/desktop';
 import '../select-button/index.module.css';
 import '../month-year-header/index.module.css';
+import '../month-year-header/mobile.module.css';
 import '../months-table/Component.js';
 import '../months-table/index.module.css';
 import '../period-slider/Component.js';
@@ -250,7 +251,7 @@ const CalendarMobile = forwardRef(({ hasHeader = true, allowSelectionFromEmptyRa
         if (monthOnlyView) {
             return (React.createElement(CalendarMonthOnlyView, { yearsAmount: yearsAmount, scrollableContainer: modalRef, onMonthTitleClick: onMonthTitleClick, clickableMonth: clickableMonth, ...commonProps, ...restProps }));
         }
-        return (React.createElement(CalendarDesktop, { responsive: true, className: cn(className, styles.calendar), contentClassName: styles.content, dataTestId: getDataTestId(dataTestId, 'mobile'), ...commonProps, ...restProps }));
+        return (React.createElement(CalendarDesktop, { responsive: true, className: cn(className, styles.calendar), contentClassName: styles.content, dataTestId: getDataTestId(dataTestId, 'mobile'), mobile: true, ...commonProps, ...restProps }));
     };
     const renderFooter = () => {
         const valueFrom = isRangeValue(value) ? value.dateFrom : selectedFrom;

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

@@ -50,6 +50,7 @@ import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
 import '../select-button/Component.js';
 import '../select-button/index.module.css';
 import '../month-year-header/index.module.css';
+import '../month-year-header/mobile.module.css';
 import '../months-table/Component.js';
 import '../months-table/index.module.css';
 import '../period-slider/Component.js';

package/calendar/moderncssm/components/calendar-mobile/index.module.css

@@ -53,12 +53,12 @@
     width: 100%;
     position: sticky;
     background: var(--modal-header-background);
-    top: 0;
+    top: var(--gap-0);
     height: 32px;
-    padding: 0 6px
+    padding: var(--gap-0) 6px
 }
 .dayNames.withHeader {
-        top: 48px;
+        top: var(--gap-48);
     }
 .dayNames th {
     height: 100%;
@@ -82,7 +82,7 @@
         text-transform: unset
     }
 .month.clickableMonth.rectangular {
-            border-radius: var(--border-radius-l);
+            border-radius: var(--border-radius-12);
         }
 .month.clickableMonth.active {
             background-color: var(--color-light-accent-secondary)
@@ -115,11 +115,11 @@
 }
     }
 .virtuoso {
-    margin: 0 var(--gap-16);
+    margin: var(--gap-0) var(--gap-16);
 }
 .contentModal {
-    padding-right: 0;
-    padding-left: 0;
+    padding-right: var(--gap-0);
+    padding-left: var(--gap-0);
 }
 .content.content {
     flex-basis: 0;

package/calendar/moderncssm/components/days-table/index.module.css

@@ -46,10 +46,10 @@
         width: 100%;
     }
 .daysTable th {
-        padding: 0;
+        padding: var(--gap-0);
     }
 .daysTable td {
-        padding: var(--gap-4) 0 0;
+        padding: var(--gap-4) var(--gap-0) var(--gap-0);
     }
 .dayName {
     font-size: 14px;
@@ -82,7 +82,7 @@
         border-radius: var(--calendar-day-border-radius);
     }
 .day.rectangular {
-        border-radius: var(--border-radius-m);
+        border-radius: var(--border-radius-8);
         width: 44px;
     }
 .day.highlighted,
@@ -128,8 +128,8 @@
         content: '';
         display: block;
         position: absolute;
-        left: 0;
-        bottom: 0;
+        left: var(--gap-0);
+        bottom: var(--gap-0);
         width: 100%;
         height: var(--calendar-day-size);
     }
@@ -152,20 +152,20 @@
     }
 .rangeEnd.shapeRectangular:before {
         width: calc(50% + 22px);
-        border-top-right-radius: var(--border-radius-m);
-        border-bottom-right-radius: var(--border-radius-m);
+        border-top-right-radius: var(--border-radius-8);
+        border-bottom-right-radius: var(--border-radius-8);
     }
 .rangeStart:before {
         left: auto;
-        right: 0;
+        right: var(--gap-0);
         width: calc(50% + 20px);
         border-top-left-radius: var(--calendar-day-border-radius);
         border-bottom-left-radius: var(--calendar-day-border-radius);
     }
 .rangeStart.shapeRectangular:before {
         width: calc(50% + 22px);
-        border-top-left-radius: var(--border-radius-m);
-        border-bottom-left-radius: var(--border-radius-m);
+        border-top-left-radius: var(--border-radius-8);
+        border-bottom-left-radius: var(--border-radius-8);
     }
 .rangeComplete:before {
         background: var(--calendar-range-complete-background);
@@ -176,7 +176,7 @@
         display: block;
         width: 100%;
         height: var(--calendar-day-size);
-        bottom: 0;
+        bottom: var(--gap-0);
         pointer-events: none;
     }
 .transitLeft:after {
@@ -191,7 +191,7 @@
             opacity: 0;
         }
 .transitLeft:first-child:after {
-            right: 0;
+            right: var(--gap-0);
         }
 .transitRight:after {
         left: 100%;
@@ -205,7 +205,7 @@
             opacity: 0;
         }
 .transitRight:last-child:after {
-            left: 0;
+            left: var(--gap-0);
         }
 .sharpTransitLeft:first-child:before {
             opacity: 1;
@@ -266,7 +266,7 @@
         flex-direction: column;
         justify-content: flex-end;
         height: inherit;
-        padding: 0 var(--gap-2);
+        padding: var(--gap-0) var(--gap-2);
     }
 .dayContent {
     font-size: 16px;
@@ -282,7 +282,7 @@
 .dot {
     display: block;
     position: absolute;
-    bottom: 4px;
+    bottom: var(--gap-4);
     width: 4px;
     min-height: 4px;
     left: 50%;
@@ -296,7 +296,7 @@
 .daysEnter {
     opacity: 0;
     position: absolute;
-    left: 0;
+    left: var(--gap-0);
 }
 .daysEnterActive {
     opacity: 1;
@@ -313,7 +313,7 @@
     transition: opacity 200ms, transform 300ms;
 }
 .bottomAddon {
-    margin: 0 auto
+    margin: var(--gap-0) auto
 }
 .bottomAddon.selected,
     .bottomAddon.selected > * {

package/calendar/moderncssm/components/month-year-header/Component.d.ts

@@ -20,6 +20,10 @@ type MonthYearHeaderProps = {
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
+    /**
+     * Мобильная версия компонента
+     */
+    mobile?: boolean;
 };
 declare const MonthYearHeader: FC<MonthYearHeaderProps>;
 export { MonthYearHeaderProps, MonthYearHeader };

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

@@ -4,6 +4,7 @@ import { ChevronDownCompactSIcon } from '@alfalab/icons-glyph/ChevronDownCompact
 import { monthName } from '../../utils.js';
 import { SelectButton } from '../select-button/Component.js';
 import styles from './index.module.css';
+import mobileStyles from './mobile.module.css';
 import 'date-fns/addDays';
 import 'date-fns/addMonths';
 import 'date-fns/eachDayOfInterval';
@@ -30,15 +31,21 @@ import '../../../../shared/moderncssm';
 import '../../../../button/moderncssm/desktop';
 import '../select-button/index.module.css';
 
-const MonthYearHeader = ({ value, className, onMonthClick, onYearClick, dataTestId, }) => {
+const MonthYearHeader = ({ value, className, onMonthClick, onYearClick, dataTestId, mobile, }) => {
     const month = value ? monthName(value) : undefined;
     const year = value ? value.getFullYear().toString() : undefined;
-    return (React.createElement("div", { className: cn(styles.component, className), "aria-live": 'polite', "data-test-id": dataTestId },
-        React.createElement(SelectButton, { view: 'filled', className: cn(styles.button, styles.month), onClick: onMonthClick },
+    return (React.createElement("div", { className: cn(styles.component, className, {
+            [mobileStyles.component]: mobile,
+        }), "aria-live": 'polite', "data-test-id": dataTestId },
+        React.createElement(SelectButton, { view: 'filled', className: cn(styles.button, styles.month, {
+                [mobileStyles.button]: mobile,
+            }), onClick: onMonthClick },
             React.createElement("span", { className: styles.buttonContent },
                 month,
                 React.createElement(ChevronDownCompactSIcon, { className: styles.upDownIcon }))),
-        React.createElement(SelectButton, { view: 'filled', className: cn(styles.button, styles.year), onClick: onYearClick },
+        React.createElement(SelectButton, { view: 'filled', className: cn(styles.button, styles.year, {
+                [mobileStyles.button]: mobile,
+            }), onClick: onYearClick },
             React.createElement("span", { className: styles.buttonContent },
                 year,
                 React.createElement(ChevronDownCompactSIcon, { className: styles.upDownIcon })))));

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

@@ -30,3 +30,4 @@ import '../select-button/Component.js';
 import '../../../../button/moderncssm/desktop';
 import '../select-button/index.module.css';
 import './index.module.css';
+import './mobile.module.css';

package/calendar/moderncssm/components/month-year-header/index.module.css

@@ -2,6 +2,7 @@
 :root {
 
     /* Кнопки выбора месяцев и годов */
+    --calendar-select-button-border-radius: var(--border-radius-4);
 
     /* Шапка */
 
@@ -29,7 +30,7 @@
     justify-content: center;
 }
 :global(.cc-calendar) .button.button {
-        border-radius: var(--border-radius-s);
+        border-radius: var(--calendar-select-button-border-radius);
     }
 .month {
     flex-basis: 65%

package/calendar/moderncssm/components/month-year-header/mobile.module.css

@@ -0,0 +1,27 @@
+:root {
+
+    /* Кнопки выбора месяцев и годов */
+    --calendar-mobile-select-button-box-shadow: none;
+
+    /* Шапка */
+
+    /* День */
+
+    /* today */
+
+    /* highlighted */
+
+    /* holidays */
+
+    /* range */
+
+    /* selected */
+
+    /* disabled */
+
+    /* marker */
+}
+
+:global(.cc-calendar) .button.button {
+        box-shadow: var(--calendar-mobile-select-button-box-shadow);
+    }

package/calendar/moderncssm/components/months-table/index.module.css

@@ -49,6 +49,7 @@
         }
 :global(.cc-calendar) .monthsTable.responsive .button {
                 width: calc(33.333% - var(--gap-4) / 1.5);
+                box-shadow: none;
             }
 :global(.cc-calendar) .monthsTable:not(.responsive) .button {
                 width: var(--calendar-select-button-width)
@@ -63,7 +64,7 @@
                     }
 
                     :global(.cc-calendar) .monthsTable:not(.responsive) .button:nth-child(2n) {
-                        margin-right: 0;
+                        margin-right: var(--gap-0);
                     }
 :global(.cc-calendar) .monthsTable:not(.responsive) .button {
 
@@ -75,7 +76,7 @@
         margin-bottom: var(--gap-8)
     }
 :global(.cc-calendar) .button:nth-child(3n) {
-            margin-right: 0;
+            margin-right: var(--gap-0);
         }
 @media (max-width: 374px) {
 :global(.cc-calendar) .button {

package/calendar/moderncssm/components/period-slider/index.module.css

@@ -52,13 +52,13 @@
 }
 .arrow {
     position: absolute;
-    top: 4px
+    top: var(--gap-4)
 }
 .arrow:first-child {
-        left: 0;
+        left: var(--gap-0);
     }
 .arrow:last-child {
-        right: 0;
+        right: var(--gap-0);
         transform: rotateY(180deg);
     }
 @media (max-width: 374px) {

package/calendar/moderncssm/components/select-button/index.module.css

@@ -3,6 +3,8 @@
 
     /* Кнопки выбора месяцев и годов */
     --calendar-select-button-selected-background: var(--color-light-accent-secondary);
+    --calendar-select-button-box-shadow: none;
+    --calendar-select-button-background-color: var(--color-light-neutral-translucent-300);
 
     /* Шапка */
 
@@ -30,16 +32,17 @@
 
         height: 40px;
         position: relative;
-        padding: 0 var(--gap-8);
+        padding: var(--gap-0) var(--gap-8);
         background-color: transparent;
-        border-radius: var(--border-radius-l)
+        border-radius: var(--border-radius-12);
+        box-shadow: var(--calendar-select-button-box-shadow)
     }
 :global(.cc-calendar) .button.button:not(:disabled):hover {
             background-color: var(--color-light-transparent-default-hover);
             color: var(--color-light-text-primary);
         }
 :global(.cc-calendar) .button.button.filled {
-            background-color: var(--color-light-neutral-translucent-300)
+            background-color: var(--calendar-select-button-background-color)
         }
 :global(.cc-calendar) .button.button.filled:not(:disabled):hover {
                 background-color: var(--color-light-neutral-translucent-300-hover);

package/calendar/moderncssm/components/years-table/index.module.css

@@ -46,10 +46,11 @@
             }
 :global(.cc-calendar) .yearsTable.responsive .button {
                 width: calc(33.333% - var(--gap-4) / 1.5);
+                box-shadow: none;
             }
 :global(.cc-calendar) .yearsTable:not(.responsive) .inner {
                 width: var(--calendar-inner-width);
-                margin: 0 auto
+                margin: var(--gap-0) auto
             }
 @media (max-width: 374px) {
 :global(.cc-calendar) .yearsTable:not(.responsive) .inner {
@@ -69,7 +70,7 @@
                     }
 
                     :global(.cc-calendar) .yearsTable:not(.responsive) .button:nth-child(2n) {
-                        margin-right: 0;
+                        margin-right: var(--gap-0);
                     }
                 }
 :global(.cc-calendar) .inner {
@@ -81,7 +82,7 @@
         margin-bottom: var(--gap-8)
     }
 :global(.cc-calendar) .button:nth-child(3n) {
-            margin-right: 0;
+            margin-right: var(--gap-0);
         }
 @media (max-width: 374px) {
 :global(.cc-calendar) .button {

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

@@ -127,6 +127,11 @@ type CalendarDesktopProps = {
      * @default false
      */
     showCurrentYearSelector?: boolean;
+    /**
+     * CalendarDesktop используется в мобильной и десктопной версии
+     * Пропс позволяет определить платформу
+     */
+    mobile?: boolean;
 };
 declare const CalendarDesktop: React.ForwardRefExoticComponent<CalendarDesktopProps & React.RefAttributes<HTMLDivElement>>;
 export { CalendarDesktopProps, CalendarDesktop };

package/calendar/moderncssm/desktop/Component.desktop.js

@@ -44,6 +44,7 @@ import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
 import '../components/select-button/Component.js';
 import '../components/select-button/index.module.css';
 import '../components/month-year-header/index.module.css';
+import '../components/month-year-header/mobile.module.css';
 import 'date-fns/isSameMonth';
 import 'date-fns/isThisMonth';
 import '../components/months-table/index.module.css';
@@ -72,7 +73,7 @@ import 'date-fns/subYears';
 import '../usePeriod.js';
 
 const { useCustomWebkitScrollbar } = hooks;
-const CalendarDesktop = forwardRef(({ className, headerClassName, contentClassName, defaultView = 'days', selectorView = 'full', mode = 'single', rangeBehavior, value, month: monthTimestamp, minDate: minDateTimestamp, maxDate: maxDateTimestamp, defaultMonth: defaultMonthTimestamp = +new Date(), selectedFrom, selectedTo, rangeComplete, offDays, events, holidays, onChange, onMonthChange, onMonthClick, onYearClick, onPeriodClick, dataTestId, hasHeader = true, responsive, dayAddons, shape = 'rounded', showCurrentYearSelector = false, }, ref) => {
+const CalendarDesktop = forwardRef(({ className, headerClassName, contentClassName, defaultView = 'days', selectorView = 'full', mode = 'single', rangeBehavior, value, month: monthTimestamp, minDate: minDateTimestamp, maxDate: maxDateTimestamp, defaultMonth: defaultMonthTimestamp = +new Date(), selectedFrom, selectedTo, rangeComplete, offDays, events, holidays, onChange, onMonthChange, onMonthClick, onYearClick, onPeriodClick, dataTestId, hasHeader = true, responsive, dayAddons, shape = 'rounded', showCurrentYearSelector = false, mobile, }, ref) => {
     const [view, setView] = useState(defaultView);
     const [scrolled, setScrolled] = useState(false);
     const scrollableNodeRef = useRef(null);
@@ -163,7 +164,7 @@ const CalendarDesktop = forwardRef(({ className, headerClassName, contentClassNa
             [styles.sixWeeks]: weeks.length === 6,
             [styles.responsive]: responsive,
         }), "data-test-id": dataTestId },
-        hasHeader && (React.createElement(Header, { view: selectorView, withShadow: scrolled, className: headerClassName }, selectorView === 'month-only' ? (React.createElement(PeriodSlider, { className: styles.period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, showCurrentYearSelector: showCurrentYearSelector, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick, onPeriodClick: onPeriodClick, dataTestId: getDataTestId(dataTestId, 'slider') })) : (React.createElement(MonthYearHeader, { className: styles.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick })))),
+        hasHeader && (React.createElement(Header, { view: selectorView, withShadow: scrolled, className: headerClassName }, selectorView === 'month-only' ? (React.createElement(PeriodSlider, { className: styles.period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, showCurrentYearSelector: showCurrentYearSelector, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick, onPeriodClick: onPeriodClick, dataTestId: getDataTestId(dataTestId, 'slider') })) : (React.createElement(MonthYearHeader, { className: styles.monthYear, value: activeMonth, mobile: mobile, onMonthClick: handleMonthClick, onYearClick: handleYearClick })))),
         React.createElement("div", { ref: scrollableNodeRef, className: cn(styles.container, {
                 [styles.customScrollbar]: view === 'years' && shouldUseCustomScrollbar,
                 [styles.nativeScrollbar]: view === 'years' && !shouldUseCustomScrollbar,

package/calendar/moderncssm/desktop/desktop.module.css

@@ -55,7 +55,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 0 var(--gap-16) var(--gap-16);
+    padding: var(--gap-0) var(--gap-16) var(--gap-16);
     box-sizing: border-box;
     flex-grow: 1;
     overflow: hidden
@@ -82,7 +82,7 @@
         background-clip: padding-box;
     }
 .container.customScrollbar::-webkit-scrollbar-thumb:vertical {
-        border-radius: var(--border-radius-circle) / 6px;
+        border-radius: var(--border-radius-circle) / var(--border-radius-6);
         min-height: 40px;
     }
 .container.customScrollbar::-webkit-scrollbar-thumb:vertical:hover {
@@ -90,7 +90,7 @@
         border-width: 4px 3px;
     }
 .container.customScrollbar::-webkit-scrollbar-thumb:horizontal {
-        border-radius: 6px / var(--border-radius-circle);
+        border-radius: var(--border-radius-6) / var(--border-radius-circle);
         min-width: 40px;
     }
 .container.customScrollbar::-webkit-scrollbar-thumb:horizontal:hover {
@@ -133,7 +133,7 @@
 .period {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
-        margin: 0 auto
+        margin: var(--gap-0) auto
 }
     }
 .monthYear {
@@ -143,6 +143,6 @@
 .monthYear {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
-        margin: 0 auto
+        margin: var(--gap-0) auto
 }
     }

package/calendar/moderncssm/desktop/index.js

@@ -41,6 +41,7 @@ import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
 import '../components/select-button/Component.js';
 import '../components/select-button/index.module.css';
 import '../components/month-year-header/index.module.css';
+import '../components/month-year-header/mobile.module.css';
 import '../components/months-table/Component.js';
 import 'date-fns/isSameMonth';
 import 'date-fns/isThisMonth';