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

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

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-1a7a0fc2.js');
+var tslib_es6 = require('../../tslib.es6-7e766274.js');
 var React = require('react');
 var cn = require('classnames');
 require('date-fns/startOfDay');
@@ -44,11 +44,11 @@ var isSameDay__default = /*#__PURE__*/_interopDefaultLegacy(isSameDay);
 var isToday__default = /*#__PURE__*/_interopDefaultLegacy(isToday);
 var isWithinInterval__default = /*#__PURE__*/_interopDefaultLegacy(isWithinInterval);
 
-var styles = {"daysTable":"calendar__daysTable_9klfi","dayName":"calendar__dayName_9klfi","day":"calendar__day_9klfi","highlighted":"calendar__highlighted_9klfi","range":"calendar__range_9klfi","disabled":"calendar__disabled_9klfi","today":"calendar__today_9klfi","rangeComplete":"calendar__rangeComplete_9klfi","selected":"calendar__selected_9klfi","dayWrapper":"calendar__dayWrapper_9klfi","rangeEnd":"calendar__rangeEnd_9klfi","rangeStart":"calendar__rangeStart_9klfi","transitLeft":"calendar__transitLeft_9klfi","transitRight":"calendar__transitRight_9klfi","left":"calendar__left_9klfi","daysEnter":"calendar__daysEnter_9klfi","daysEnterActive":"calendar__daysEnterActive_9klfi","daysExit":"calendar__daysExit_9klfi","daysExitActive":"calendar__daysExitActive_9klfi","right":"calendar__right_9klfi","dot":"calendar__dot_9klfi"};
+var styles = {"daysTable":"calendar__daysTable_1j1lb","dayName":"calendar__dayName_1j1lb","day":"calendar__day_1j1lb","highlighted":"calendar__highlighted_1j1lb","range":"calendar__range_1j1lb","disabled":"calendar__disabled_1j1lb","today":"calendar__today_1j1lb","rangeComplete":"calendar__rangeComplete_1j1lb","selected":"calendar__selected_1j1lb","dayWrapper":"calendar__dayWrapper_1j1lb","rangeEnd":"calendar__rangeEnd_1j1lb","rangeStart":"calendar__rangeStart_1j1lb","transitLeft":"calendar__transitLeft_1j1lb","transitRight":"calendar__transitRight_1j1lb","sharpTransitLeft":"calendar__sharpTransitLeft_1j1lb","sharpTransitRight":"calendar__sharpTransitRight_1j1lb","daysEnter":"calendar__daysEnter_1j1lb","left":"calendar__left_1j1lb","daysEnterActive":"calendar__daysEnterActive_1j1lb","daysExit":"calendar__daysExit_1j1lb","daysExitActive":"calendar__daysExitActive_1j1lb","right":"calendar__right_1j1lb","dot":"calendar__dot_1j1lb"};
 require('./index.css');
 
 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 = _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, _e = _a.hasHeader, hasHeader = _e === void 0 ? true : _e;
     var activeMonthRef = React.useRef(activeMonth);
     activeMonthRef.current = activeMonth;
     var prevActiveMonth = hooks.usePrevious(activeMonth);
@@ -66,44 +66,65 @@ 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.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.dayWrapper, (_a = {},
                 _a[styles.range] = inRange,
                 _a[styles.rangeComplete] = inRange && rangeComplete,
                 _a[styles.transitLeft] = transitLeft,
                 _a[styles.transitRight] = transitRight,
+                _a[styles.sharpTransitLeft] = sharpTransitLeft,
+                _a[styles.sharpTransitRight] = sharpTransitRight,
                 _a[styles.rangeStart] = rangeStart,
                 _a[styles.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.day, (_b = {},
+                _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.day, (_b = {},
                     _b[styles.selected] = daySelected,
                     _b[styles.today] = isToday__default['default'](day.date),
                     _b[styles.disabled] = day.disabled,
                     _b[styles.highlighted] = dayHighlighted,
-                    _b)) }),
+                    _b)) },
                 day.event && React__default['default'].createElement("span", { className: styles.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.daysTable, direction && styles[direction]) },
-        React__default['default'].createElement("thead", null,
-            React__default['default'].createElement("tr", null, renderHeader())),
+        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: {
+            React__default['default'].createElement(reactTransitionGroup.CSSTransition, { key: activeMonth.getTime(), timeout: 250, classNames: {
                     enter: styles.daysEnter,
                     enterActive: styles.daysEnterActive,
                     exit: styles.daysExit,

package/calendar/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_9klfi {
+.calendar__daysTable_1j1lb {
     border-collapse: separate;
     border-spacing: 0;
-    position: relative
+    position: relative;
+    width: 100%
 }
-.calendar__daysTable_9klfi th {
+.calendar__daysTable_1j1lb th {
         padding: 0;
     }
-.calendar__daysTable_9klfi td {
+.calendar__daysTable_1j1lb td {
         padding: var(--gap-2xs) 0 0;
     }
-.calendar__dayName_9klfi {
+.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_9klfi {
+.calendar__dayName_1j1lb {
         height: 36px
 }
     }
-.calendar__day_9klfi {
+.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_9klfi {
+.calendar__day_1j1lb {
         width: 36px;
         height: 36px
 }
     }
-.calendar__day_9klfi.calendar__highlighted_9klfi,
-    .calendar__day_9klfi.calendar__range_9klfi.calendar__highlighted_9klfi:not(.calendar__disabled_9klfi) {
+.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_9klfi.calendar__disabled_9klfi {
+.calendar__day_1j1lb.calendar__disabled_1j1lb {
         pointer-events: none;
         color: var(--calendar-disabled-color);
 
         background: var(--calendar-disabled-background);
         cursor: default;
     }
-.calendar__day_9klfi.calendar__today_9klfi {
+.calendar__day_1j1lb.calendar__today_1j1lb {
         font-weight: bold;
         color: var(--calendar-today-color);
     }
-.calendar__day_9klfi.calendar__rangeComplete_9klfi {
+.calendar__day_1j1lb.calendar__rangeComplete_1j1lb {
         background: var(--calendar-range-complete-background);
     }
-.calendar__day_9klfi.calendar__selected_9klfi,
-    .calendar__day_9klfi.calendar__disabled_9klfi.calendar__selected_9klfi {
+.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_9klfi.calendar__selected_9klfi:hover {
-            background: var(--calendar-selected-hover-background);
+@media (hover) {
+            .calendar__day_1j1lb.calendar__selected_1j1lb:hover {
+                background: var(--calendar-selected-hover-background);
+            }
         }
-.calendar__day_9klfi: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_9klfi {
-    position: relative
+.calendar__dayWrapper_1j1lb {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    position: relative;
+    cursor: pointer
 }
-.calendar__dayWrapper_9klfi:before {
+.calendar__dayWrapper_1j1lb:before {
         content: '';
         display: block;
         position: absolute;
@@ -155,34 +165,31 @@
         width: 100%;
         height: var(--calendar-day-size);
     }
-.calendar__range_9klfi .calendar__day_9klfi:not(.calendar__selected_9klfi):not(.calendar__disabled_9klfi):not(.calendar__today_9klfi) {
+.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_9klfi:before {
+.calendar__range_1j1lb:before {
         background: var(--calendar-range-background);
     }
-.calendar__rangeEnd_9klfi:before {
-        border-bottom-right-radius: 50%;
-        border-top-right-radius: 50%;
-        width: var(--calendar-day-size);
-    }
-.calendar__rangeEnd_9klfi: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_9klfi: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_9klfi: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_9klfi:before {
+.calendar__rangeComplete_1j1lb:before {
         background: var(--calendar-range-complete-background);
     }
-.calendar__transitLeft_9klfi:after, .calendar__transitRight_9klfi: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_9klfi:after {
+.calendar__transitLeft_1j1lb:after {
         right: 100%;
         background: linear-gradient(
             270deg,
@@ -199,13 +206,13 @@
             var(--color-light-specialbg-nulled) 100%
         );
     }
-.calendar__transitLeft_9klfi:first-child:before {
+.calendar__transitLeft_1j1lb:first-child:before {
             opacity: 0;
         }
-.calendar__transitLeft_9klfi:first-child:after {
+.calendar__transitLeft_1j1lb:first-child:after {
             right: 0;
         }
-.calendar__transitRight_9klfi:after {
+.calendar__transitRight_1j1lb:after {
         left: 100%;
         background: linear-gradient(
             270deg,
@@ -213,20 +220,32 @@
             var(--calendar-range-background) 100%
         );
     }
-.calendar__transitRight_9klfi:last-child:before {
+.calendar__transitRight_1j1lb:last-child:before {
             opacity: 0;
         }
-.calendar__transitRight_9klfi:last-child:after {
+.calendar__transitRight_1j1lb:last-child:after {
             left: 0;
         }
-.calendar__rangeComplete_9klfi.calendar__transitLeft_9klfi: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_9klfi.calendar__transitRight_9klfi: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_9klfi .calendar__daysEnter_9klfi {
+.calendar__daysEnter_1j1lb .calendar__dayWrapper_1j1lb {
+    width: 100px;
+}
+.calendar__left_1j1lb .calendar__daysEnter_1j1lb {
         transform: translateX(var(--calendar-day-size));
     }
-.calendar__left_9klfi .calendar__daysEnterActive_9klfi {
+.calendar__left_1j1lb .calendar__daysEnterActive_1j1lb {
         transform: translateX(0%);
     }
-.calendar__left_9klfi .calendar__daysExit_9klfi {
+.calendar__left_1j1lb .calendar__daysExit_1j1lb {
         transform: translateX(0%);
     }
-.calendar__left_9klfi .calendar__daysExitActive_9klfi {
-        transform: translateX(calc(-1 * var(--calendar-day-size)));
+.calendar__left_1j1lb .calendar__daysExitActive_1j1lb {
+        transform: translateX(-1 * var(--calendar-day-size));
     }
-.calendar__right_9klfi .calendar__daysEnter_9klfi {
-        transform: translateX(calc(-1 * var(--calendar-day-size)));
+.calendar__right_1j1lb .calendar__daysEnter_1j1lb {
+        transform: translateX(-1 * var(--calendar-day-size));
     }
-.calendar__right_9klfi .calendar__daysEnterActive_9klfi {
+.calendar__right_1j1lb .calendar__daysEnterActive_1j1lb {
         transform: translateX(0%);
     }
-.calendar__right_9klfi .calendar__daysExit_9klfi {
+.calendar__right_1j1lb .calendar__daysExit_1j1lb {
         transform: translateX(0%);
     }
-.calendar__right_9klfi .calendar__daysExitActive_9klfi {
+.calendar__right_1j1lb .calendar__daysExitActive_1j1lb {
         transform: translateX(var(--calendar-day-size));
     }
-.calendar__dot_9klfi {
+.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_9klfi .calendar__dot_9klfi {
+.calendar__selected_1j1lb .calendar__dot_1j1lb {
     background: var(--calendar-marker-selected-background);
 }
-.calendar__daysEnter_9klfi {
+.calendar__daysEnter_1j1lb {
     opacity: 0;
     position: absolute;
     left: 0;
 }
-.calendar__daysEnterActive_9klfi {
+.calendar__daysEnterActive_1j1lb {
     opacity: 1;
 }
-.calendar__daysExit_9klfi {
+.calendar__daysExit_1j1lb {
     pointer-events: none;
     opacity: 1;
 }
-.calendar__daysExitActive_9klfi {
+.calendar__daysExitActive_1j1lb {
     opacity: 0;
 }
-.calendar__daysEnterActive_9klfi,
-.calendar__daysExitActive_9klfi {
-    transition: opacity 300ms, transform 300ms;
+.calendar__daysEnterActive_1j1lb,
+.calendar__daysExitActive_1j1lb {
+    transition: opacity 250ms, transform 250ms;
 }

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

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

package/calendar/components/header/Component.js

@@ -8,7 +8,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"header":"calendar__header_1r694","withShadow":"calendar__withShadow_1r694"};
+var styles = {"header":"calendar__header_103kj","withShadow":"calendar__withShadow_103kj"};
 require('./index.css');
 
 var Header = function (_a) {

package/calendar/components/header/index.css

@@ -32,7 +32,7 @@
 
     /* marker */
 }
-.calendar__header_1r694 {
+.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_1r694 {
+.calendar__withShadow_103kj {
     box-shadow: var(--shadow-s);
 }

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

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-1a7a0fc2.js');
+require('../../tslib.es6-7e766274.js');
 var React = require('react');
 var cn = require('classnames');
 require('date-fns/startOfDay');
@@ -34,7 +34,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"component":"calendar__component_3bshs","button":"calendar__button_3bshs","month":"calendar__month_3bshs","year":"calendar__year_3bshs","buttonContent":"calendar__buttonContent_3bshs","upDownIcon":"calendar__upDownIcon_3bshs"};
+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');
 
 var MonthYearHeader = function (_a) {

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

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

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

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

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

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-1a7a0fc2.js');
+var tslib_es6 = require('../../tslib.es6-7e766274.js');
 var React = require('react');
 require('classnames');
 require('date-fns/startOfDay');
@@ -36,7 +36,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var isSameMonth__default = /*#__PURE__*/_interopDefaultLegacy(isSameMonth);
 var isThisMonth__default = /*#__PURE__*/_interopDefaultLegacy(isThisMonth);
 
-var styles = {"monthsTable":"calendar__monthsTable_1u2yi","button":"calendar__button_1u2yi"};
+var styles = {"monthsTable":"calendar__monthsTable_14iuc","button":"calendar__button_14iuc"};
 require('./index.css');
 
 var MonthsTable = function (_a) {

package/calendar/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_1u2yi {
+.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_1u2yi {
+.calendar__monthsTable_14iuc {
         width: var(--calendar-mobile-inner-width)
 }
     }
-.calendar__button_1u2yi {
-    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_1u2yi:nth-child(3n) {
+.calendar__button_14iuc:nth-child(3n) {
         margin-right: 0;
     }
 @media (max-width: 374px) {
-.calendar__button_1u2yi {
+.calendar__button_14iuc {
         width: calc((var(--calendar-mobile-inner-width) / 2) - (var(--gap-2xs) / 2))
 }
 
-        .calendar__button_1u2yi:nth-child(3n) {
+        .calendar__button_14iuc:nth-child(3n) {
             margin-right: var(--gap-2xs);
         }
 
-        .calendar__button_1u2yi:nth-child(2n) {
+        .calendar__button_14iuc:nth-child(2n) {
             margin-right: 0;
         }
-.calendar__button_1u2yi {
+.calendar__button_14iuc {
 
         height: 36px
 }

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

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

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

@@ -46,7 +46,7 @@ var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var endOfWeek__default = /*#__PURE__*/_interopDefaultLegacy(endOfWeek);
 var startOfWeek__default = /*#__PURE__*/_interopDefaultLegacy(startOfWeek);
 
-var styles = {"component":"calendar__component_g18zw","period":"calendar__period_g18zw","empty":"calendar__empty_g18zw","arrow":"calendar__arrow_g18zw","full":"calendar__full_g18zw","yearSelectorButton":"calendar__yearSelectorButton_g18zw"};
+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');
 
 var PeriodSlider = function (_a) {