@alfalab/core-components 27.3.0 → 27.5.0-beta.0

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

@@ -65,18 +65,19 @@
     --calendar-marker-background: var(--color-light-graphic-primary);
     --calendar-marker-selected-background: var(--color-light-graphic-primary-inverted);
 }
-.calendar__daysTable_18zvy {
+.calendar__daysTable_1j1lb {
     border-collapse: separate;
     border-spacing: 0;
-    position: relative
+    position: relative;
+    width: 100%
 }
-.calendar__daysTable_18zvy th {
+.calendar__daysTable_1j1lb th {
         padding: 0;
     }
-.calendar__daysTable_18zvy td {
+.calendar__daysTable_1j1lb td {
         padding: var(--gap-2xs) 0 0;
     }
-.calendar__dayName_18zvy {
+.calendar__dayName_1j1lb {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
@@ -85,15 +86,17 @@
     color: var(--color-light-text-secondary)
 }
 @media (max-width: 374px) {
-.calendar__dayName_18zvy {
+.calendar__dayName_1j1lb {
         height: 36px
 }
     }
-.calendar__day_18zvy {
+.calendar__day_1j1lb {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
 
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
     position: relative;
     width: var(--calendar-day-size);
     height: var(--calendar-day-size);
@@ -107,46 +110,53 @@
     z-index: 1
 }
 @media (max-width: 374px) {
-.calendar__day_18zvy {
+.calendar__day_1j1lb {
         width: 36px;
         height: 36px
 }
     }
-.calendar__day_18zvy.calendar__highlighted_18zvy,
-    .calendar__day_18zvy.calendar__range_18zvy.calendar__highlighted_18zvy:not(.calendar__disabled_18zvy) {
+.calendar__day_1j1lb.calendar__highlighted_1j1lb,
+    .calendar__day_1j1lb.calendar__range_1j1lb.calendar__highlighted_1j1lb:not(.calendar__disabled_1j1lb) {
         color: var(--calendar-highlighted-color);
         background: var(--calendar-highlighted-background);
     }
-.calendar__day_18zvy.calendar__disabled_18zvy {
+.calendar__day_1j1lb.calendar__disabled_1j1lb {
         pointer-events: none;
         color: var(--calendar-disabled-color);
 
         background: var(--calendar-disabled-background);
         cursor: default;
     }
-.calendar__day_18zvy.calendar__today_18zvy {
+.calendar__day_1j1lb.calendar__today_1j1lb {
         font-weight: bold;
         color: var(--calendar-today-color);
     }
-.calendar__day_18zvy.calendar__rangeComplete_18zvy {
+.calendar__day_1j1lb.calendar__rangeComplete_1j1lb {
         background: var(--calendar-range-complete-background);
     }
-.calendar__day_18zvy.calendar__selected_18zvy,
-    .calendar__day_18zvy.calendar__disabled_18zvy.calendar__selected_18zvy {
+.calendar__day_1j1lb.calendar__selected_1j1lb,
+    .calendar__day_1j1lb.calendar__disabled_1j1lb.calendar__selected_1j1lb {
         color: var(--calendar-selected-color);
         background: var(--calendar-selected-background);
     }
-.calendar__day_18zvy.calendar__selected_18zvy:hover {
-            background: var(--calendar-selected-hover-background);
+@media (hover) {
+            .calendar__day_1j1lb.calendar__selected_1j1lb:hover {
+                background: var(--calendar-selected-hover-background);
+            }
         }
-.calendar__day_18zvy:focus {
+.calendar__day_1j1lb:not(.calendar__selected_1j1lb):hover {
+        color: var(--color-light-text-primary);
+    }
+.calendar__day_1j1lb:focus {
         z-index: 1;
     }
 /* RANGE */
-.calendar__dayWrapper_18zvy {
-    position: relative
+.calendar__dayWrapper_1j1lb {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    position: relative;
+    cursor: pointer
 }
-.calendar__dayWrapper_18zvy:before {
+.calendar__dayWrapper_1j1lb:before {
         content: '';
         display: block;
         position: absolute;
@@ -155,34 +165,31 @@
         width: 100%;
         height: var(--calendar-day-size);
     }
-.calendar__range_18zvy .calendar__day_18zvy:not(.calendar__selected_18zvy):not(.calendar__disabled_18zvy):not(.calendar__today_18zvy) {
+.calendar__dayWrapper_1j1lb:focus {
+        outline: none;
+    }
+.calendar__range_1j1lb .calendar__day_1j1lb:not(.calendar__selected_1j1lb):not(.calendar__disabled_1j1lb):not(.calendar__today_1j1lb) {
         color: var(--calendar-range-color);
     }
-.calendar__range_18zvy:before {
+.calendar__range_1j1lb:before {
         background: var(--calendar-range-background);
     }
-.calendar__rangeEnd_18zvy:before {
-        border-bottom-right-radius: 50%;
-        border-top-right-radius: 50%;
-        width: var(--calendar-day-size);
-    }
-.calendar__rangeEnd_18zvy:after {
-        opacity: 0;
+.calendar__rangeEnd_1j1lb: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_18zvy:before {
+.calendar__rangeStart_1j1lb:before {
         left: auto;
         right: 0;
-        border-bottom-left-radius: 50%;
-        border-top-left-radius: 50%;
-        width: var(--calendar-day-size);
-    }
-.calendar__rangeStart_18zvy:after {
-        opacity: 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_18zvy:before {
+.calendar__rangeComplete_1j1lb:before {
         background: var(--calendar-range-complete-background);
     }
-.calendar__transitLeft_18zvy:after, .calendar__transitRight_18zvy:after {
+.calendar__transitLeft_1j1lb:after, .calendar__transitRight_1j1lb:after {
         content: '';
         position: absolute;
         display: block;
@@ -191,7 +198,7 @@
         bottom: 0;
         pointer-events: none;
     }
-.calendar__transitLeft_18zvy:after {
+.calendar__transitLeft_1j1lb:after {
         right: 100%;
         background: linear-gradient(
             270deg,
@@ -199,13 +206,13 @@
             var(--color-light-specialbg-nulled) 100%
         );
     }
-.calendar__transitLeft_18zvy:first-child:before {
+.calendar__transitLeft_1j1lb:first-child:before {
             opacity: 0;
         }
-.calendar__transitLeft_18zvy:first-child:after {
+.calendar__transitLeft_1j1lb:first-child:after {
             right: 0;
         }
-.calendar__transitRight_18zvy:after {
+.calendar__transitRight_1j1lb:after {
         left: 100%;
         background: linear-gradient(
             270deg,
@@ -213,20 +220,32 @@
             var(--calendar-range-background) 100%
         );
     }
-.calendar__transitRight_18zvy:last-child:before {
+.calendar__transitRight_1j1lb:last-child:before {
             opacity: 0;
         }
-.calendar__transitRight_18zvy:last-child:after {
+.calendar__transitRight_1j1lb:last-child:after {
             left: 0;
         }
-.calendar__rangeComplete_18zvy.calendar__transitLeft_18zvy:after {
+.calendar__sharpTransitLeft_1j1lb:first-child:before {
+            opacity: 1;
+        }
+.calendar__sharpTransitLeft_1j1lb:first-child:after {
+            opacity: 0;
+        }
+.calendar__sharpTransitRight_1j1lb:last-child:before {
+            opacity: 1;
+        }
+.calendar__sharpTransitRight_1j1lb:last-child:after {
+            opacity: 0;
+        }
+.calendar__rangeComplete_1j1lb.calendar__transitLeft_1j1lb:after {
         background: linear-gradient(
             270deg,
             var(--calendar-range-complete-background) 0%,
             var(--color-light-specialbg-nulled) 100%
         );
     }
-.calendar__rangeComplete_18zvy.calendar__transitRight_18zvy:after {
+.calendar__rangeComplete_1j1lb.calendar__transitRight_1j1lb:after {
         background: linear-gradient(
             270deg,
             var(--color-light-specialbg-nulled) 0%,
@@ -234,31 +253,34 @@
         );
     }
 /* SLIDE ANIMATION */
-.calendar__left_18zvy .calendar__daysEnter_18zvy {
+.calendar__daysEnter_1j1lb .calendar__dayWrapper_1j1lb {
+    width: 100px;
+}
+.calendar__left_1j1lb .calendar__daysEnter_1j1lb {
         transform: translateX(var(--calendar-day-size));
     }
-.calendar__left_18zvy .calendar__daysEnterActive_18zvy {
+.calendar__left_1j1lb .calendar__daysEnterActive_1j1lb {
         transform: translateX(0%);
     }
-.calendar__left_18zvy .calendar__daysExit_18zvy {
+.calendar__left_1j1lb .calendar__daysExit_1j1lb {
         transform: translateX(0%);
     }
-.calendar__left_18zvy .calendar__daysExitActive_18zvy {
-        transform: translateX(calc(-1 * var(--calendar-day-size)));
+.calendar__left_1j1lb .calendar__daysExitActive_1j1lb {
+        transform: translateX(-1 * var(--calendar-day-size));
     }
-.calendar__right_18zvy .calendar__daysEnter_18zvy {
-        transform: translateX(calc(-1 * var(--calendar-day-size)));
+.calendar__right_1j1lb .calendar__daysEnter_1j1lb {
+        transform: translateX(-1 * var(--calendar-day-size));
     }
-.calendar__right_18zvy .calendar__daysEnterActive_18zvy {
+.calendar__right_1j1lb .calendar__daysEnterActive_1j1lb {
         transform: translateX(0%);
     }
-.calendar__right_18zvy .calendar__daysExit_18zvy {
+.calendar__right_1j1lb .calendar__daysExit_1j1lb {
         transform: translateX(0%);
     }
-.calendar__right_18zvy .calendar__daysExitActive_18zvy {
+.calendar__right_1j1lb .calendar__daysExitActive_1j1lb {
         transform: translateX(var(--calendar-day-size));
     }
-.calendar__dot_18zvy {
+.calendar__dot_1j1lb {
     display: block;
     position: absolute;
     bottom: 4px;
@@ -269,25 +291,25 @@
     border-radius: var(--border-radius-circle);
     background: var(--calendar-marker-background);
 }
-.calendar__selected_18zvy .calendar__dot_18zvy {
+.calendar__selected_1j1lb .calendar__dot_1j1lb {
     background: var(--calendar-marker-selected-background);
 }
-.calendar__daysEnter_18zvy {
+.calendar__daysEnter_1j1lb {
     opacity: 0;
     position: absolute;
     left: 0;
 }
-.calendar__daysEnterActive_18zvy {
+.calendar__daysEnterActive_1j1lb {
     opacity: 1;
 }
-.calendar__daysExit_18zvy {
+.calendar__daysExit_1j1lb {
     pointer-events: none;
     opacity: 1;
 }
-.calendar__daysExitActive_18zvy {
+.calendar__daysExitActive_1j1lb {
     opacity: 0;
 }
-.calendar__daysEnterActive_18zvy,
-.calendar__daysExitActive_18zvy {
-    transition: opacity 300ms, transform 300ms;
+.calendar__daysEnterActive_1j1lb,
+.calendar__daysExitActive_1j1lb {
+    transition: opacity 250ms, transform 250ms;
 }

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"header":"calendar__header_1r21x","withShadow":"calendar__withShadow_1r21x"};
+var styles = {"header":"calendar__header_103kj","withShadow":"calendar__withShadow_103kj"};
 require('./index.css');
 
 const Header = ({ view = 'full', withShadow, children }) => {

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

@@ -32,7 +32,7 @@
 
     /* marker */
 }
-.calendar__header_1r21x {
+.calendar__header_103kj {
     width: 100%;
     box-sizing: border-box;
     padding: var(--gap-m) 0 var(--gap-s);
@@ -40,6 +40,6 @@
     display: flex;
     justify-content: center;
 }
-.calendar__withShadow_1r21x {
+.calendar__withShadow_103kj {
     box-shadow: var(--shadow-s);
 }

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

@@ -26,7 +26,7 @@ import '../../../../button/modern';
 import { monthName } from '../../utils.js';
 import { SelectButton } from '../select-button/Component.js';
 
-var styles = {"component":"calendar__component_r339o","button":"calendar__button_r339o","month":"calendar__month_r339o","year":"calendar__year_r339o","buttonContent":"calendar__buttonContent_r339o","upDownIcon":"calendar__upDownIcon_r339o"};
+var styles = {"component":"calendar__component_1ngou","button":"calendar__button_1ngou","month":"calendar__month_1ngou","year":"calendar__year_1ngou","buttonContent":"calendar__buttonContent_1ngou","upDownIcon":"calendar__upDownIcon_1ngou"};
 require('./index.css');
 
 const MonthYearHeader = ({ value, className, onMonthClick, onYearClick, dataTestId, }) => {

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

@@ -33,44 +33,44 @@
 
     /* marker */
 }
-.calendar__component_r339o {
+.calendar__component_1ngou {
     position: relative;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
 }
-.calendar__button_r339o {
+.calendar__button_1ngou {
     border-radius: var(--border-radius-s);
 }
-.calendar__month_r339o {
+.calendar__month_1ngou {
     flex-basis: 65%
 }
 @media (max-width: 374px) {
-.calendar__month_r339o {
+.calendar__month_1ngou {
         flex-grow: 1
 }
     }
-.calendar__year_r339o {
+.calendar__year_1ngou {
     flex-basis: 35%;
     margin-left: var(--gap-xs)
 }
 @media (max-width: 374px) {
-.calendar__year_r339o {
+.calendar__year_1ngou {
         width: 90px
 }
     }
-.calendar__buttonContent_r339o {
+.calendar__buttonContent_1ngou {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }
-.calendar__upDownIcon_r339o {
+.calendar__upDownIcon_1ngou {
     margin-left: var(--gap-xs)
 }
 @media (max-width: 374px) {
-.calendar__upDownIcon_r339o {
+.calendar__upDownIcon_1ngou {
         margin-left: auto
 }
     }

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

@@ -27,7 +27,7 @@ import '../../../../button/modern';
 import { monthName } from '../../utils.js';
 import { SelectButton } from '../select-button/Component.js';
 
-var styles = {"monthsTable":"calendar__monthsTable_r1j31","button":"calendar__button_r1j31"};
+var styles = {"monthsTable":"calendar__monthsTable_14iuc","button":"calendar__button_14iuc"};
 require('./index.css');
 
 const MonthsTable = ({ selectedMonth, months = [], getMonthProps, }) => {

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

@@ -12,7 +12,6 @@
     --gap-xs: 8px;
 }
 :root {
-    --calendar-inner-width: 280px;
     --calendar-mobile-inner-width: 256px;
 
     /* Кнопки выбора месяцев и годов */
@@ -33,38 +32,37 @@
 
     /* marker */
 }
-.calendar__monthsTable_r1j31 {
+.calendar__monthsTable_14iuc {
     display: flex;
     flex-wrap: wrap;
-    width: var(--calendar-inner-width);
-    justify-content: flex-start
+    width: 100%;
+    justify-content: space-between
 }
 @media (max-width: 374px) {
-.calendar__monthsTable_r1j31 {
+.calendar__monthsTable_14iuc {
         width: var(--calendar-mobile-inner-width)
 }
     }
-.calendar__button_r1j31 {
-    width: calc((var(--calendar-inner-width) / 3) - (var(--gap-xs) / 3));
-    margin-right: var(--gap-2xs);
+.calendar__button_14iuc {
+    width: 33%;
     margin-bottom: var(--gap-xs)
 }
-.calendar__button_r1j31:nth-child(3n) {
+.calendar__button_14iuc:nth-child(3n) {
         margin-right: 0;
     }
 @media (max-width: 374px) {
-.calendar__button_r1j31 {
+.calendar__button_14iuc {
         width: calc((var(--calendar-mobile-inner-width) / 2) - (var(--gap-2xs) / 2))
 }
 
-        .calendar__button_r1j31:nth-child(3n) {
+        .calendar__button_14iuc:nth-child(3n) {
             margin-right: var(--gap-2xs);
         }
 
-        .calendar__button_r1j31:nth-child(2n) {
+        .calendar__button_14iuc:nth-child(2n) {
             margin-right: 0;
         }
-.calendar__button_r1j31 {
+.calendar__button_14iuc {
 
         height: 36px
 }

package/calendar/modern/components/period-slider/Component.js

@@ -37,7 +37,7 @@ import { monthName } from '../../utils.js';
 import { IconButton } from '../../../../icon-button/modern';
 import { formatPeriod, getYearSelectorValue, shiftValues } from './utils.js';
 
-var styles = {"component":"calendar__component_1ava3","period":"calendar__period_1ava3","empty":"calendar__empty_1ava3","arrow":"calendar__arrow_1ava3","full":"calendar__full_1ava3","yearSelectorButton":"calendar__yearSelectorButton_1ava3"};
+var styles = {"component":"calendar__component_1nzog","period":"calendar__period_1nzog","empty":"calendar__empty_1nzog","arrow":"calendar__arrow_1nzog","full":"calendar__full_1nzog","yearSelectorButton":"calendar__yearSelectorButton_1nzog"};
 require('./index.css');
 
 const PeriodSlider = ({ value, periodType = 'month', className, periodFormatter = formatPeriod, prevArrowDisabled = false, nextArrowDisabled = false, hideDisabledArrows = false, isMonthAndYearSelectable = false, showCurrentYearSelector = false, onPrevArrowClick = () => null, onNextArrowClick = () => null, onMonthClick, onYearClick, dataTestId, }) => {

package/calendar/modern/components/period-slider/index.css

@@ -40,14 +40,14 @@
 
     /* marker */
 }
-.calendar__component_1ava3 {
+.calendar__component_1nzog {
     position: relative;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
 }
-.calendar__period_1ava3 {
+.calendar__period_1nzog {
     font-family: var(--calendar-month-only-header-font-family);
     font-size: var(--calendar-month-only-header-font-size);
     font-weight: var(--calendar-month-only-header-font-weight);
@@ -55,30 +55,30 @@
     text-align: center
 }
 @media (max-width: 374px) {
-.calendar__period_1ava3 {
+.calendar__period_1nzog {
         width: auto;
         flex-grow: 1
 }
     }
-.calendar__empty_1ava3 {
+.calendar__empty_1nzog {
     color: var(--color-light-text-secondary);
 }
-.calendar__arrow_1ava3 {
+.calendar__arrow_1nzog {
     position: absolute;
     top: 4px
 }
-.calendar__arrow_1ava3:first-child {
+.calendar__arrow_1nzog:first-child {
         left: 0;
     }
-.calendar__arrow_1ava3:last-child {
+.calendar__arrow_1nzog:last-child {
         right: 0;
         transform: rotateY(180deg);
     }
 @media (max-width: 374px) {
-.calendar__full_1ava3 .calendar__arrow_1ava3 {
+.calendar__full_1nzog .calendar__arrow_1nzog {
         display: none
 }
     }
-.calendar__yearSelectorButton_1ava3 {
+.calendar__yearSelectorButton_1nzog {
     margin-left: var(--gap-xs);
 }

package/calendar/modern/components/select-button/Component.js

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 import cn from 'classnames';
 import { Button } from '../../../../button/modern';
 
-var styles = {"button":"calendar__button_78zoe","filled":"calendar__filled_78zoe","outlined":"calendar__outlined_78zoe","selected":"calendar__selected_78zoe"};
+var styles = {"button":"calendar__button_b0c6d","filled":"calendar__filled_b0c6d","outlined":"calendar__outlined_b0c6d","selected":"calendar__selected_b0c6d"};
 require('./index.css');
 
 const SelectButton = forwardRef(({ className, children, view = 'default', ...restProps }, ref) => (React.createElement(Button, Object.assign({}, restProps, { ref: ref, view: 'ghost', size: 'xs', className: cn(styles.button, styles[view], className) }), children)));

package/calendar/modern/components/select-button/index.css

@@ -43,7 +43,7 @@
 
     /* marker */
 }
-.calendar__button_78zoe {
+.calendar__button_b0c6d {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -54,28 +54,28 @@
     background-color: transparent;
     border-radius: var(--border-radius-l)
 }
-.calendar__button_78zoe:not(:disabled):hover {
+.calendar__button_b0c6d:not(:disabled):hover {
         background-color: var(--color-light-bg-tertiary);
         color: var(--color-light-text-primary);
     }
-.calendar__button_78zoe.calendar__filled_78zoe {
+.calendar__button_b0c6d.calendar__filled_b0c6d {
         background-color: var(--color-light-bg-tertiary)
     }
-.calendar__button_78zoe.calendar__filled_78zoe:not(:disabled):hover {
+.calendar__button_b0c6d.calendar__filled_b0c6d:not(:disabled):hover {
             background-color: var(--color-light-bg-tertiary-shade-7);
         }
-.calendar__button_78zoe.calendar__outlined_78zoe {
+.calendar__button_b0c6d.calendar__outlined_b0c6d {
         border: 1px solid var(--calendar-select-button-today-border-color);
     }
-.calendar__button_78zoe.calendar__selected_78zoe,
-    .calendar__button_78zoe.calendar__selected_78zoe:disabled {
+.calendar__button_b0c6d.calendar__selected_b0c6d,
+    .calendar__button_b0c6d.calendar__selected_b0c6d:disabled {
         background-color: var(--calendar-select-button-selected-background);
         color: var(--color-light-text-primary-inverted)
     }
-.calendar__button_78zoe.calendar__selected_78zoe:not(:disabled):hover, .calendar__button_78zoe.calendar__selected_78zoe:disabled:not(:disabled):hover {
+.calendar__button_b0c6d.calendar__selected_b0c6d:not(:disabled):hover, .calendar__button_b0c6d.calendar__selected_b0c6d:disabled:not(:disabled):hover {
             background-color: var(--calendar-select-button-selected-background);
             color: var(--color-light-text-primary-inverted);
         }
-.calendar__button_78zoe > * {
+.calendar__button_b0c6d > * {
         flex-grow: 1;
     }

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

@@ -5,7 +5,7 @@ import isThisYear from 'date-fns/isThisYear';
 import '../../../../button/modern';
 import { SelectButton } from '../select-button/Component.js';
 
-var styles = {"yearsTable":"calendar__yearsTable_1gjz5","inner":"calendar__inner_1gjz5","button":"calendar__button_1gjz5"};
+var styles = {"yearsTable":"calendar__yearsTable_plhrj","inner":"calendar__inner_plhrj","button":"calendar__button_plhrj"};
 require('./index.css');
 
 const YearsTable = ({ selectedYear, years = [], getYearProps, onScroll, }) => {

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

@@ -12,7 +12,6 @@
     --gap-xs: 8px;
 }
 :root {
-    --calendar-inner-width: 280px;
     --calendar-mobile-inner-width: 256px;
 
     /* Кнопки выбора месяцев и годов */
@@ -33,48 +32,47 @@
 
     /* marker */
 }
-.calendar__yearsTable_1gjz5 {
+.calendar__yearsTable_plhrj {
     overflow: auto;
     overflow-x: hidden;
     width: 100%;
+    justify-content: space-between;
 }
-.calendar__inner_1gjz5 {
+.calendar__inner_plhrj {
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
     position: relative;
 
     /* (width - inner-width) / 2 */
-    left: 32px;
     overflow: hidden
 }
 @media (max-width: 374px) {
-.calendar__inner_1gjz5 {
+.calendar__inner_plhrj {
         left: 16px
 }
     }
-.calendar__button_1gjz5 {
+.calendar__button_plhrj {
     /* 3 колонки с равными отступами */
-    width: calc((var(--calendar-inner-width) / 3) - (var(--gap-xs) / 3));
-    margin-right: var(--gap-2xs);
+    width: 33%;
     margin-bottom: var(--gap-xs)
 }
-.calendar__button_1gjz5:nth-child(3n) {
+.calendar__button_plhrj:nth-child(3n) {
         margin-right: 0;
     }
 @media (max-width: 374px) {
-.calendar__button_1gjz5 {
+.calendar__button_plhrj {
         width: calc((var(--calendar-mobile-inner-width) / 2) - (var(--gap-2xs) / 2))
 }
 
-        .calendar__button_1gjz5:nth-child(3n) {
+        .calendar__button_plhrj:nth-child(3n) {
             margin-right: var(--gap-2xs);
         }
 
-        .calendar__button_1gjz5:nth-child(2n) {
+        .calendar__button_plhrj:nth-child(2n) {
             margin-right: 0;
         }
-.calendar__button_1gjz5 {
+.calendar__button_plhrj {
 
         height: 36px
 }