@alfalab/core-components 27.9.0 → 27.12.0

package/calendar/cssm/components/days-table/Component.d.ts

@@ -1,4 +1,6 @@
-import { FC, RefCallback } from 'react';
+/// <reference types="react" />
+import React from 'react';
+import { FC, RefCallback } from "react";
 import { Day } from "../../typings";
 type DaysTableProps = {
     /**
@@ -29,8 +31,17 @@ type DaysTableProps = {
      * Доп. пропсы для переданного дня
      */
     getDayProps: (day: Day) => Record<string, unknown> & {
-        ref: RefCallback<HTMLButtonElement>;
+        ref: RefCallback<HTMLTableDataCellElement>;
+        onClick: (e: React.MouseEvent<HTMLTableDataCellElement>) => void;
     };
+    /**
+     * Нужно ли рендерить шапку
+     */
+    hasHeader?: boolean;
+    /**
+     * Должен ли календарь подстраиваться под ширину родителя.
+     */
+    responsive?: boolean;
 };
 declare const DaysTable: FC<DaysTableProps>;
 export { DaysTableProps, DaysTable };

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

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-ce870b46.js');
+var tslib_es6 = require('../../tslib.es6-f8106a15.js');
 var React = require('react');
 var cn = require('classnames');
 require('date-fns/startOfDay');
@@ -47,7 +47,8 @@ var isWithinInterval__default = /*#__PURE__*/_interopDefaultLegacy(isWithinInter
 var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 
 var DaysTable = function (_a) {
-    var _b = _a.weeks, weeks = _b === void 0 ? [] : _b, _c = _a.activeMonth, activeMonth = _c === void 0 ? new Date() : _c, highlighted = _a.highlighted, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, _d = _a.rangeComplete, rangeComplete = _d === void 0 ? selectedFrom && selectedTo : _d, getDayProps = _a.getDayProps;
+    var _b;
+    var _c = _a.weeks, weeks = _c === void 0 ? [] : _c, _d = _a.activeMonth, activeMonth = _d === void 0 ? new Date() : _d, highlighted = _a.highlighted, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, _e = _a.rangeComplete, rangeComplete = _e === void 0 ? selectedFrom && selectedTo : _e, getDayProps = _a.getDayProps, _f = _a.hasHeader, hasHeader = _f === void 0 ? true : _f, responsive = _a.responsive;
     var activeMonthRef = React.useRef(activeMonth);
     activeMonthRef.current = activeMonth;
     var prevActiveMonth = hooks.usePrevious(activeMonth);
@@ -65,42 +66,67 @@ var DaysTable = function (_a) {
             (selectedTo && isSameDay__default['default'](day.date, selectedTo));
         var dayHighlighted = highlighted && isEqual__default['default'](day.date, highlighted);
         var inRange = selection && isWithinInterval__default['default'](day.date, selection);
-        var firstDay = day.date.getDate() === 1;
-        var lastDay = isLastDayOfMonth__default['default'](day.date);
-        var transitLeft = firstDay && inRange && selection && day.date > selection.start;
-        var transitRight = lastDay && inRange && selection && day.date < selection.end;
+        var firstDayOfMonth = day.date.getDate() === 1;
+        var lastDayOfMonth = isLastDayOfMonth__default['default'](day.date);
+        var firstDayOfWeek = utils.russianWeekDay(day.date) === 0;
+        var lastDayOfWeek = utils.russianWeekDay(day.date) === 6;
+        var transitLeft = firstDayOfMonth && inRange && selection && day.date > selection.start;
+        var transitRight = lastDayOfMonth && inRange && selection && day.date < selection.end;
         var rangeStart = selection && isSameDay__default['default'](day.date, selection.start);
         var rangeEnd = selection && isSameDay__default['default'](day.date, selection.end);
+        var sharpTransitLeft = firstDayOfWeek &&
+            firstDayOfMonth &&
+            inRange &&
+            selection &&
+            (isSameDay__default['default'](day.date, selection.start) || isSameDay__default['default'](day.date, selection.end));
+        var sharpTransitRight = lastDayOfWeek &&
+            lastDayOfMonth &&
+            inRange &&
+            selection &&
+            (isSameDay__default['default'](day.date, selection.start) || isSameDay__default['default'](day.date, selection.end));
         var dayProps = getDayProps(day);
-        return (React__default['default'].createElement("td", { key: day.date.getTime(), className: cn__default['default'](styles__default['default'].dayWrapper, (_a = {},
+        var onClick = dayProps.onClick;
+        var handleDayClick = function (e) {
+            if (!day.disabled)
+                onClick(e);
+        };
+        return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+        React__default['default'].createElement("td", tslib_es6.__assign({}, dayProps, { key: day.date.getTime(), className: cn__default['default'](styles__default['default'].dayWrapper, (_a = {},
                 _a[styles__default['default'].range] = inRange,
                 _a[styles__default['default'].rangeComplete] = inRange && rangeComplete,
                 _a[styles__default['default'].transitLeft] = transitLeft,
                 _a[styles__default['default'].transitRight] = transitRight,
+                _a[styles__default['default'].sharpTransitLeft] = sharpTransitLeft,
+                _a[styles__default['default'].sharpTransitRight] = sharpTransitRight,
                 _a[styles__default['default'].rangeStart] = rangeStart,
                 _a[styles__default['default'].rangeEnd] = rangeEnd,
-                _a)) },
-            React__default['default'].createElement(coreComponentsButton.Button, tslib_es6.__assign({}, dayProps, { ref: function (node) {
-                    /**
-                     * После анимации реф-коллбэк вызывается еще раз, и в него передается null и старый activeMonth.
-                     * Поэтому приходится хранить актуальный месяц в рефе и сравнивать с ним.
-                     */
-                    if (startOfMonth__default['default'](day.date).getTime() === activeMonthRef.current.getTime()) {
-                        dayProps.ref(node);
-                    }
-                }, type: 'button', view: 'ghost', size: 'xs', disabled: day.disabled, className: cn__default['default'](styles__default['default'].day, (_b = {},
+                _a[styles__default['default'].cursorPointer] = !day.disabled,
+                _a)), align: 'center', ref: function (node) {
+                /**
+                 * После анимации реф-коллбэк вызывается еще раз, и в него передается null и старый activeMonth.
+                 * Поэтому приходится хранить актуальный месяц в рефе и сравнивать с ним.
+                 */
+                if (startOfMonth__default['default'](day.date).getTime() === activeMonthRef.current.getTime()) {
+                    dayProps.ref(node);
+                }
+            }, onClick: handleDayClick }),
+            React__default['default'].createElement(coreComponentsButton.Button, { type: 'button', view: 'ghost', size: 'xs', disabled: day.disabled, className: cn__default['default'](styles__default['default'].day, (_b = {},
                     _b[styles__default['default'].selected] = daySelected,
                     _b[styles__default['default'].today] = isToday__default['default'](day.date),
                     _b[styles__default['default'].disabled] = day.disabled,
+                    _b[styles__default['default'].holiday] = !day.disabled && day.holiday,
                     _b[styles__default['default'].highlighted] = dayHighlighted,
-                    _b)) }),
+                    _b)) },
                 day.event && React__default['default'].createElement("span", { className: styles__default['default'].dot }),
                 day.date.getDate())));
     };
     var renderWeek = function (week, weekIdx) { return (React__default['default'].createElement("tr", { key: weekIdx }, week.map(renderDay))); };
-    return (React__default['default'].createElement("table", { className: cn__default['default'](styles__default['default'].daysTable, direction && styles__default['default'][direction]) },
-        React__default['default'].createElement("thead", null,
-            React__default['default'].createElement("tr", null, renderHeader())),
+    return (React__default['default'].createElement("table", { className: cn__default['default'](styles__default['default'].daysTable, direction && styles__default['default'][direction], (_b = {},
+            _b[styles__default['default'].responsive] = responsive,
+            _b)) },
+        hasHeader && (React__default['default'].createElement("thead", null,
+            React__default['default'].createElement("tr", null, renderHeader()))),
         React__default['default'].createElement(reactTransitionGroup.TransitionGroup, { component: null },
             React__default['default'].createElement(reactTransitionGroup.CSSTransition, { key: activeMonth.getTime(), timeout: 300, classNames: {
                     enter: styles__default['default'].daysEnter,

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

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-ce870b46.js');
+require('../../tslib.es6-f8106a15.js');
 require('react');
 require('classnames');
 require('date-fns/startOfDay');

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

@@ -702,6 +702,7 @@
     --border-radius-m: 8px;
     --border-radius-l: 12px;
     --border-radius-xl: 16px;
+    --border-radius-xxl: 20px;
     --border-radius-circle: 50%;
     --border-radius-pill: 99px;
 }
@@ -725,8 +726,18 @@
     --calendar-width: 344px;
     --calendar-inner-width: 280px;
     --calendar-mobile-inner-width: 256px;
+    --calendar-inner-third-part-width: calc(var(--calendar-inner-width) / 3);
+    --calendar-mobile-inner-half-width: calc(var(--calendar-mobile-inner-width) / 2);
 
     /* Кнопки выбора месяцев и годов */
+    --calendar-select-button-gap: calc(var(--gap-xs) / 3);
+    --calendar-mobile-select-button-gap: calc(var(--gap-2xs) / 2);
+    --calendar-mobile-select-button-width: calc(
+        var(--calendar-mobile-inner-half-width) - var(--calendar-mobile-select-button-gap)
+    );
+    --calendar-select-button-width: calc(
+        var(--calendar-inner-third-part-width) - var(--calendar-select-button-gap)
+    );
     --calendar-select-button-today-border-color: var(--color-light-border-key);
     --calendar-select-button-selected-background: var(--color-light-bg-primary-inverted);
 
@@ -746,6 +757,9 @@
     --calendar-highlighted-color: var(--color-light-text-primary);
     --calendar-highlighted-background: var(--color-light-graphic-quaternary);
 
+    /* holidays */
+    --calendar-holiday-color: var(--color-light-text-accent);
+
     /* range */
     --calendar-range-color: var(--color-light-text-primary);
     --calendar-range-background: var(--color-light-specialbg-component);
@@ -769,6 +783,9 @@
     border-spacing: 0;
     position: relative
 }
+.daysTable.responsive {
+        width: 100%;
+    }
 .daysTable th {
         padding: 0;
     }
@@ -793,6 +810,8 @@
     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);
@@ -816,6 +835,9 @@
         color: var(--calendar-highlighted-color);
         background: var(--calendar-highlighted-background);
     }
+.day.holiday {
+        color: var(--calendar-holiday-color);
+    }
 .day.disabled {
         pointer-events: none;
         color: var(--calendar-disabled-color);
@@ -835,14 +857,17 @@
         color: var(--calendar-selected-color);
         background: var(--calendar-selected-background);
     }
-.day.selected:hover {
-            background: var(--calendar-selected-hover-background);
+@media (hover) {
+            .day.selected:hover {
+                background: var(--calendar-selected-hover-background);
+            }
         }
 .day:focus {
         z-index: 1;
     }
 /* RANGE */
 .dayWrapper {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     position: relative
 }
 .dayWrapper:before {
@@ -854,29 +879,29 @@
         width: 100%;
         height: var(--calendar-day-size);
     }
-.range .day:not(.selected):not(.disabled):not(.today) {
+.dayWrapper:focus {
+        outline: none;
+    }
+.dayWrapper.cursorPointer {
+        cursor: pointer;
+    }
+.range .day:not(.selected):not(.disabled):not(.today):not(.holiday) {
         color: var(--calendar-range-color);
     }
 .range:before {
         background: var(--calendar-range-background);
     }
 .rangeEnd:before {
-        border-bottom-right-radius: 50%;
-        border-top-right-radius: 50%;
-        width: var(--calendar-day-size);
-    }
-.rangeEnd:after {
-        opacity: 0;
+        width: calc(50% + 20px);
+        border-top-right-radius: var(--calendar-day-border-radius);
+        border-bottom-right-radius: var(--calendar-day-border-radius);
     }
 .rangeStart:before {
         left: auto;
         right: 0;
-        border-bottom-left-radius: 50%;
-        border-top-left-radius: 50%;
-        width: var(--calendar-day-size);
-    }
-.rangeStart: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);
     }
 .rangeComplete:before {
         background: var(--calendar-range-complete-background);
@@ -918,6 +943,18 @@
 .transitRight:last-child:after {
             left: 0;
         }
+.sharpTransitLeft:first-child:before {
+            opacity: 1;
+        }
+.sharpTransitLeft:first-child:after {
+            opacity: 0;
+        }
+.sharpTransitRight:last-child:before {
+            opacity: 1;
+        }
+.sharpTransitRight:last-child:after {
+            opacity: 0;
+        }
 .rangeComplete.transitLeft:after {
         background: linear-gradient(
             270deg,
@@ -933,29 +970,32 @@
         );
     }
 /* SLIDE ANIMATION */
+.daysEnter .dayWrapper {
+    width: 100px;
+}
 .left .daysEnter {
-        transform: translateX(var(--calendar-day-size));
+        transform: translateX(50px);
     }
 .left .daysEnterActive {
-        transform: translateX(0%);
+        transform: translateX(0);
     }
 .left .daysExit {
-        transform: translateX(0%);
+        transform: translateX(0);
     }
 .left .daysExitActive {
-        transform: translateX(calc(-1 * var(--calendar-day-size)));
+        transform: translateX(-50px);
     }
 .right .daysEnter {
-        transform: translateX(calc(-1 * var(--calendar-day-size)));
+        transform: translateX(-50px);
     }
 .right .daysEnterActive {
-        transform: translateX(0%);
+        transform: translateX(0);
     }
 .right .daysExit {
-        transform: translateX(0%);
+        transform: translateX(0);
     }
 .right .daysExitActive {
-        transform: translateX(var(--calendar-day-size));
+        transform: translateX(50px);
     }
 .dot {
     display: block;
@@ -988,5 +1028,5 @@
 }
 .daysEnterActive,
 .daysExitActive {
-    transition: opacity 300ms, transform 300ms;
+    transition: opacity 200ms, transform 300ms;
 }

package/calendar/cssm/components/header/index.module.css

@@ -702,6 +702,7 @@
     --border-radius-m: 8px;
     --border-radius-l: 12px;
     --border-radius-xl: 16px;
+    --border-radius-xxl: 20px;
     --border-radius-circle: 50%;
     --border-radius-pill: 99px;
 }
@@ -725,8 +726,18 @@
     --calendar-width: 344px;
     --calendar-inner-width: 280px;
     --calendar-mobile-inner-width: 256px;
+    --calendar-inner-third-part-width: calc(var(--calendar-inner-width) / 3);
+    --calendar-mobile-inner-half-width: calc(var(--calendar-mobile-inner-width) / 2);
 
     /* Кнопки выбора месяцев и годов */
+    --calendar-select-button-gap: calc(var(--gap-xs) / 3);
+    --calendar-mobile-select-button-gap: calc(var(--gap-2xs) / 2);
+    --calendar-mobile-select-button-width: calc(
+        var(--calendar-mobile-inner-half-width) - var(--calendar-mobile-select-button-gap)
+    );
+    --calendar-select-button-width: calc(
+        var(--calendar-inner-third-part-width) - var(--calendar-select-button-gap)
+    );
     --calendar-select-button-today-border-color: var(--color-light-border-key);
     --calendar-select-button-selected-background: var(--color-light-bg-primary-inverted);
 
@@ -746,6 +757,9 @@
     --calendar-highlighted-color: var(--color-light-text-primary);
     --calendar-highlighted-background: var(--color-light-graphic-quaternary);
 
+    /* holidays */
+    --calendar-holiday-color: var(--color-light-text-accent);
+
     /* range */
     --calendar-range-color: var(--color-light-text-primary);
     --calendar-range-background: var(--color-light-specialbg-component);

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

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-ce870b46.js');
+require('../../tslib.es6-f8106a15.js');
 var React = require('react');
 var cn = require('classnames');
 require('date-fns/startOfDay');

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

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-ce870b46.js');
+require('../../tslib.es6-f8106a15.js');
 require('react');
 require('classnames');
 require('date-fns/startOfDay');

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

@@ -702,6 +702,7 @@
     --border-radius-m: 8px;
     --border-radius-l: 12px;
     --border-radius-xl: 16px;
+    --border-radius-xxl: 20px;
     --border-radius-circle: 50%;
     --border-radius-pill: 99px;
 }
@@ -725,8 +726,18 @@
     --calendar-width: 344px;
     --calendar-inner-width: 280px;
     --calendar-mobile-inner-width: 256px;
+    --calendar-inner-third-part-width: calc(var(--calendar-inner-width) / 3);
+    --calendar-mobile-inner-half-width: calc(var(--calendar-mobile-inner-width) / 2);
 
     /* Кнопки выбора месяцев и годов */
+    --calendar-select-button-gap: calc(var(--gap-xs) / 3);
+    --calendar-mobile-select-button-gap: calc(var(--gap-2xs) / 2);
+    --calendar-mobile-select-button-width: calc(
+        var(--calendar-mobile-inner-half-width) - var(--calendar-mobile-select-button-gap)
+    );
+    --calendar-select-button-width: calc(
+        var(--calendar-inner-third-part-width) - var(--calendar-select-button-gap)
+    );
     --calendar-select-button-today-border-color: var(--color-light-border-key);
     --calendar-select-button-selected-background: var(--color-light-bg-primary-inverted);
 
@@ -746,6 +757,9 @@
     --calendar-highlighted-color: var(--color-light-text-primary);
     --calendar-highlighted-background: var(--color-light-graphic-quaternary);
 
+    /* holidays */
+    --calendar-holiday-color: var(--color-light-text-accent);
+
     /* range */
     --calendar-range-color: var(--color-light-text-primary);
     --calendar-range-background: var(--color-light-specialbg-component);

package/calendar/cssm/components/months-table/Component.d.ts

@@ -13,6 +13,10 @@ type MonthsTableProps = {
      * Доп пропсы для переданного месяца
      */
     getMonthProps: (day: Month) => Record<string, unknown>;
+    /**
+     * Должен ли календарь подстраиваться под ширину родителя.
+     */
+    responsive?: boolean;
 };
 declare const MonthsTable: FC<MonthsTableProps>;
 export { MonthsTableProps, MonthsTable };

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

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-ce870b46.js');
+var tslib_es6 = require('../../tslib.es6-f8106a15.js');
 var React = require('react');
-require('classnames');
+var cn = require('classnames');
 require('date-fns/startOfDay');
 require('date-fns/startOfMonth');
 require('../../../../button/cssm');
@@ -35,12 +35,14 @@ var styles = require('./index.module.css');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var isSameMonth__default = /*#__PURE__*/_interopDefaultLegacy(isSameMonth);
 var isThisMonth__default = /*#__PURE__*/_interopDefaultLegacy(isThisMonth);
 var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 
 var MonthsTable = function (_a) {
-    var selectedMonth = _a.selectedMonth, _b = _a.months, months = _b === void 0 ? [] : _b, getMonthProps = _a.getMonthProps;
+    var _b;
+    var selectedMonth = _a.selectedMonth, _c = _a.months, months = _c === void 0 ? [] : _c, getMonthProps = _a.getMonthProps, responsive = _a.responsive;
     var view = React.useCallback(function (month) {
         if (selectedMonth && isSameMonth__default['default'](selectedMonth, month.date))
             return 'selected';
@@ -48,7 +50,7 @@ var MonthsTable = function (_a) {
             return 'outlined';
         return 'default';
     }, [selectedMonth]);
-    return (React__default['default'].createElement("div", { className: styles__default['default'].monthsTable }, months.map(function (month) { return (React__default['default'].createElement(components_selectButton_Component.SelectButton, tslib_es6.__assign({}, getMonthProps(month), { key: month.date.getTime(), className: styles__default['default'].button, view: view(month) }), utils.monthName(month.date))); })));
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].monthsTable, (_b = {}, _b[styles__default['default'].responsive] = responsive, _b)) }, months.map(function (month) { return (React__default['default'].createElement(components_selectButton_Component.SelectButton, tslib_es6.__assign({}, getMonthProps(month), { key: month.date.getTime(), className: styles__default['default'].button, view: view(month) }), utils.monthName(month.date))); })));
 };
 
 exports.MonthsTable = MonthsTable;

package/calendar/cssm/components/months-table/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-ce870b46.js');
+require('../../tslib.es6-f8106a15.js');
 require('react');
 require('classnames');
 require('date-fns/startOfDay');

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

@@ -702,6 +702,7 @@
     --border-radius-m: 8px;
     --border-radius-l: 12px;
     --border-radius-xl: 16px;
+    --border-radius-xxl: 20px;
     --border-radius-circle: 50%;
     --border-radius-pill: 99px;
 }
@@ -725,8 +726,18 @@
     --calendar-width: 344px;
     --calendar-inner-width: 280px;
     --calendar-mobile-inner-width: 256px;
+    --calendar-inner-third-part-width: calc(var(--calendar-inner-width) / 3);
+    --calendar-mobile-inner-half-width: calc(var(--calendar-mobile-inner-width) / 2);
 
     /* Кнопки выбора месяцев и годов */
+    --calendar-select-button-gap: calc(var(--gap-xs) / 3);
+    --calendar-mobile-select-button-gap: calc(var(--gap-2xs) / 2);
+    --calendar-mobile-select-button-width: calc(
+        var(--calendar-mobile-inner-half-width) - var(--calendar-mobile-select-button-gap)
+    );
+    --calendar-select-button-width: calc(
+        var(--calendar-inner-third-part-width) - var(--calendar-select-button-gap)
+    );
     --calendar-select-button-today-border-color: var(--color-light-border-key);
     --calendar-select-button-selected-background: var(--color-light-bg-primary-inverted);
 
@@ -746,6 +757,9 @@
     --calendar-highlighted-color: var(--color-light-text-primary);
     --calendar-highlighted-background: var(--color-light-graphic-quaternary);
 
+    /* holidays */
+    --calendar-holiday-color: var(--color-light-text-accent);
+
     /* range */
     --calendar-range-color: var(--color-light-text-primary);
     --calendar-range-background: var(--color-light-specialbg-component);
@@ -764,19 +778,27 @@
     --calendar-marker-background: var(--color-light-graphic-primary);
     --calendar-marker-selected-background: var(--color-light-graphic-primary-inverted);
 }
-.monthsTable {
-    display: flex;
-    flex-wrap: wrap;
-    width: var(--calendar-inner-width);
-    justify-content: flex-start
-}
+:global(.cc-calendar) .monthsTable {
+        display: flex;
+        flex-wrap: wrap;
+        width: var(--calendar-inner-width);
+        justify-content: flex-start
+    }
 @media (max-width: 374px) {
-.monthsTable {
-        width: var(--calendar-mobile-inner-width)
-}
+:global(.cc-calendar) .monthsTable {
+            width: var(--calendar-mobile-inner-width)
     }
+        }
+:global(.cc-calendar) .monthsTable.responsive {
+            width: 100%;
+            justify-content: space-between
+        }
+:global(.cc-calendar) .monthsTable.responsive .button {
+                width: 33%;
+                margin-right: 0;
+            }
 :global(.cc-calendar) .button {
-        width: calc((var(--calendar-inner-width) / 3) - (var(--gap-xs) / 3));
+        width: var(--calendar-select-button-width);
         margin-right: var(--gap-2xs);
         margin-bottom: var(--gap-xs)
     }
@@ -785,7 +807,7 @@
         }
 @media (max-width: 374px) {
 :global(.cc-calendar) .button {
-            width: calc((var(--calendar-mobile-inner-width) / 2) - (var(--gap-2xs) / 2))
+            width: var(--calendar-mobile-select-button-width)
     }
 
             :global(.cc-calendar) .button:nth-child(3n) {

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

@@ -702,6 +702,7 @@
     --border-radius-m: 8px;
     --border-radius-l: 12px;
     --border-radius-xl: 16px;
+    --border-radius-xxl: 20px;
     --border-radius-circle: 50%;
     --border-radius-pill: 99px;
 }
@@ -725,8 +726,18 @@
     --calendar-width: 344px;
     --calendar-inner-width: 280px;
     --calendar-mobile-inner-width: 256px;
+    --calendar-inner-third-part-width: calc(var(--calendar-inner-width) / 3);
+    --calendar-mobile-inner-half-width: calc(var(--calendar-mobile-inner-width) / 2);
 
     /* Кнопки выбора месяцев и годов */
+    --calendar-select-button-gap: calc(var(--gap-xs) / 3);
+    --calendar-mobile-select-button-gap: calc(var(--gap-2xs) / 2);
+    --calendar-mobile-select-button-width: calc(
+        var(--calendar-mobile-inner-half-width) - var(--calendar-mobile-select-button-gap)
+    );
+    --calendar-select-button-width: calc(
+        var(--calendar-inner-third-part-width) - var(--calendar-select-button-gap)
+    );
     --calendar-select-button-today-border-color: var(--color-light-border-key);
     --calendar-select-button-selected-background: var(--color-light-bg-primary-inverted);
 
@@ -746,6 +757,9 @@
     --calendar-highlighted-color: var(--color-light-text-primary);
     --calendar-highlighted-background: var(--color-light-graphic-quaternary);
 
+    /* holidays */
+    --calendar-holiday-color: var(--color-light-text-accent);
+
     /* range */
     --calendar-range-color: var(--color-light-text-primary);
     --calendar-range-background: var(--color-light-specialbg-component);

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

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-ce870b46.js');
+var tslib_es6 = require('../../tslib.es6-f8106a15.js');
 var React = require('react');
 var cn = require('classnames');
 var coreComponentsButton = require('../../../../button/cssm');

package/calendar/cssm/components/select-button/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-ce870b46.js');
+require('../../tslib.es6-f8106a15.js');
 require('react');
 require('classnames');
 require('../../../../button/cssm');

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

@@ -702,6 +702,7 @@
     --border-radius-m: 8px;
     --border-radius-l: 12px;
     --border-radius-xl: 16px;
+    --border-radius-xxl: 20px;
     --border-radius-circle: 50%;
     --border-radius-pill: 99px;
 }
@@ -725,8 +726,18 @@
     --calendar-width: 344px;
     --calendar-inner-width: 280px;
     --calendar-mobile-inner-width: 256px;
+    --calendar-inner-third-part-width: calc(var(--calendar-inner-width) / 3);
+    --calendar-mobile-inner-half-width: calc(var(--calendar-mobile-inner-width) / 2);
 
     /* Кнопки выбора месяцев и годов */
+    --calendar-select-button-gap: calc(var(--gap-xs) / 3);
+    --calendar-mobile-select-button-gap: calc(var(--gap-2xs) / 2);
+    --calendar-mobile-select-button-width: calc(
+        var(--calendar-mobile-inner-half-width) - var(--calendar-mobile-select-button-gap)
+    );
+    --calendar-select-button-width: calc(
+        var(--calendar-inner-third-part-width) - var(--calendar-select-button-gap)
+    );
     --calendar-select-button-today-border-color: var(--color-light-border-key);
     --calendar-select-button-selected-background: var(--color-light-bg-primary-inverted);
 
@@ -746,6 +757,9 @@
     --calendar-highlighted-color: var(--color-light-text-primary);
     --calendar-highlighted-background: var(--color-light-graphic-quaternary);
 
+    /* holidays */
+    --calendar-holiday-color: var(--color-light-text-accent);
+
     /* range */
     --calendar-range-color: var(--color-light-text-primary);
     --calendar-range-background: var(--color-light-specialbg-component);