@alfalab/core-components 41.7.0 → 41.9.0-beta.0

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

@@ -1,4 +1,4 @@
-/* hash: h2w34 */
+/* hash: 1fucq */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff;
@@ -17,7 +17,6 @@
 } :root {
 } :root {
     --gap-xs: 8px;
-    --gap-m: 16px;
     --gap-2xl: 32px;
 } :root {
 } :root {
@@ -57,25 +56,23 @@
     /* mobile */
 
     /* paddings */
-} .calendar__wrapper_14iok {
+} .calendar__wrapper_1n08x {
     background: var(--color-light-bg-primary);
-} .calendar__withZIndex_14iok {
+} .calendar__withZIndex_1n08x {
     z-index: 2;
-} .calendar__calendar_14iok th {
+} .calendar__calendar_1n08x th {
     border-bottom: 1px solid var(--color-light-border-primary);
-} .calendar__dayNames_14iok {
-    padding: 0 var(--gap-m);
+} .calendar__dayNames_1n08x {
     width: 100%;
     position: sticky;
-    border-bottom: 1px solid var(--color-light-border-primary);
     background: var(--modal-header-background);
     top: 0;
     height: 32px
-} .calendar__dayNames_14iok.calendar__withHeader_14iok {
+} .calendar__dayNames_1n08x.calendar__withHeader_1n08x {
         top: 48px;
-    } .calendar__dayNames_14iok th {
+    } .calendar__dayNames_1n08x th {
     height: 100%;
-} .calendar__month_14iok {
+} .calendar__month_1n08x {
     font-style: normal;
     font-weight: 700;
     font-size: 12px;
@@ -84,18 +81,18 @@
     text-transform: uppercase;
     color: var(--color-light-text-primary);
     margin-bottom: var(--gap-xs);
-} .calendar__daysTable_14iok {
+} .calendar__daysTable_1n08x {
     display: flex;
     flex-direction: column;
     margin-top: var(--gap-2xl);
-} .calendar__dayName_14iok {
+} .calendar__dayName_1n08x {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
 
     height: var(--calendar-day-size);
     color: var(--color-light-text-secondary)
-} @media (max-width: 374px) { .calendar__dayName_14iok {
+} @media (max-width: 374px) { .calendar__dayName_1n08x {
         height: 36px
 }
     }

package/calendar/esm/components/calendar-mobile/index.d.ts

@@ -1,2 +1,2 @@
-export * from "../../Component.responsive-f7f5de96";
+export * from "../../Component.responsive-638dadc8";
 export {};

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

@@ -1,4 +1,4 @@
-export { a as CalendarMobile } from '../../Component.responsive-f7f5de96.js';
+export { a as CalendarMobile } from '../../Component.responsive-638dadc8.js';
 import 'tslib';
 import 'react';
 import '@alfalab/hooks';
@@ -6,6 +6,7 @@ import 'react-virtuoso';
 import '@juggle/resize-observer';
 import 'classnames';
 import 'date-fns/endOfDay';
+import 'date-fns/getMonth';
 import 'date-fns/startOfDay';
 import 'date-fns/startOfMonth';
 import '../../../../button/esm';

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

@@ -31,7 +31,7 @@ import 'date-fns/startOfYear';
 import 'date-fns/subDays';
 import 'date-fns/subMonths';
 
-var styles = {"daysTable":"calendar__daysTable_1sidm","responsive":"calendar__responsive_1sidm","dayName":"calendar__dayName_1sidm","day":"calendar__day_1sidm","rounded":"calendar__rounded_1sidm","rectangular":"calendar__rectangular_1sidm","highlighted":"calendar__highlighted_1sidm","range":"calendar__range_1sidm","disabled":"calendar__disabled_1sidm","holiday":"calendar__holiday_1sidm","today":"calendar__today_1sidm","rangeComplete":"calendar__rangeComplete_1sidm","selected":"calendar__selected_1sidm","dayWrapper":"calendar__dayWrapper_1sidm","cursorPointer":"calendar__cursorPointer_1sidm","rangeEnd":"calendar__rangeEnd_1sidm","rangeStart":"calendar__rangeStart_1sidm","transitLeft":"calendar__transitLeft_1sidm","transitRight":"calendar__transitRight_1sidm","sharpTransitLeft":"calendar__sharpTransitLeft_1sidm","sharpTransitRight":"calendar__sharpTransitRight_1sidm","daysEnter":"calendar__daysEnter_1sidm","left":"calendar__left_1sidm","daysEnterActive":"calendar__daysEnterActive_1sidm","daysExit":"calendar__daysExit_1sidm","daysExitActive":"calendar__daysExitActive_1sidm","right":"calendar__right_1sidm","dayAddons":"calendar__dayAddons_1sidm","dayContent":"calendar__dayContent_1sidm","addons":"calendar__addons_1sidm","dot":"calendar__dot_1sidm","bottomAddon":"calendar__bottomAddon_1sidm"};
+var styles = {"daysTable":"calendar__daysTable_1s32e","responsive":"calendar__responsive_1s32e","dayName":"calendar__dayName_1s32e","day":"calendar__day_1s32e","rounded":"calendar__rounded_1s32e","rectangular":"calendar__rectangular_1s32e","highlighted":"calendar__highlighted_1s32e","range":"calendar__range_1s32e","disabled":"calendar__disabled_1s32e","holiday":"calendar__holiday_1s32e","today":"calendar__today_1s32e","rangeComplete":"calendar__rangeComplete_1s32e","selected":"calendar__selected_1s32e","dayWrapper":"calendar__dayWrapper_1s32e","cursorPointer":"calendar__cursorPointer_1s32e","rangeEnd":"calendar__rangeEnd_1s32e","rangeStart":"calendar__rangeStart_1s32e","transitLeft":"calendar__transitLeft_1s32e","transitRight":"calendar__transitRight_1s32e","sharpTransitLeft":"calendar__sharpTransitLeft_1s32e","sharpTransitRight":"calendar__sharpTransitRight_1s32e","daysEnter":"calendar__daysEnter_1s32e","left":"calendar__left_1s32e","daysEnterActive":"calendar__daysEnterActive_1s32e","daysExit":"calendar__daysExit_1s32e","daysExitActive":"calendar__daysExitActive_1s32e","right":"calendar__right_1s32e","dayAddons":"calendar__dayAddons_1s32e","dayContent":"calendar__dayContent_1s32e","addons":"calendar__addons_1s32e","dot":"calendar__dot_1s32e","bottomAddon":"calendar__bottomAddon_1s32e"};
 require('./index.css');
 
 var DaysTable = function (_a) {
@@ -49,7 +49,7 @@ var DaysTable = function (_a) {
         return WEEKDAYS.map(function (dayName) { return (React.createElement("th", { className: styles.dayName, key: dayName }, dayName)); });
     }, []);
     var renderDay = function (day, dayIdx) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         if (!day)
             return React.createElement("td", { key: dayIdx });
         var daySelected = day.selected ||
@@ -110,12 +110,12 @@ var DaysTable = function (_a) {
                     _b[styles.holiday] = !day.disabled && day.holiday,
                     _b[styles.highlighted] = dayHighlighted,
                     _b)) },
-                React.createElement("span", { className: cn(styles.dayContent) }, day.date.getDate()),
-                React.createElement("span", { className: cn(styles.addons, (_c = {},
-                        _c[styles.dot] = day.event,
-                        _c[styles.bottomAddon] = day.dayAddon,
-                        _c[styles.selected] = daySelected,
-                        _c)) }, day.dayAddon))));
+                React.createElement("span", { className: cn(styles.dayContent, (_c = {}, _c[styles.today] = isToday(day.date), _c)) }, day.date.getDate()),
+                React.createElement("span", { className: cn(styles.addons, (_d = {},
+                        _d[styles.dot] = day.event,
+                        _d[styles.bottomAddon] = day.dayAddon,
+                        _d[styles.selected] = daySelected,
+                        _d)) }, day.dayAddon))));
     };
     var renderWeek = function (week, weekIdx) { return (React.createElement("tr", { key: weekIdx }, week.map(renderDay))); };
     return (React.createElement("table", { className: cn(styles.daysTable, directionRef.current && styles[directionRef.current], (_b = {},

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

@@ -1,4 +1,4 @@
-/* hash: mijsp */
+/* hash: 195zj */
 :root {
 } /* deprecated */ :root {
     --color-light-graphic-primary: #0e0e0e;
@@ -69,27 +69,27 @@
     /* marker */
     --calendar-marker-background: var(--color-light-graphic-primary);
     --calendar-marker-selected-background: var(--color-light-graphic-primary-inverted);
-} .calendar__daysTable_1sidm {
+} .calendar__daysTable_1s32e {
     border-collapse: separate;
     border-spacing: 0;
     position: relative
-} .calendar__daysTable_1sidm.calendar__responsive_1sidm {
+} .calendar__daysTable_1s32e.calendar__responsive_1s32e {
         width: 100%;
-    } .calendar__daysTable_1sidm th {
+    } .calendar__daysTable_1s32e th {
         padding: 0;
-    } .calendar__daysTable_1sidm td {
+    } .calendar__daysTable_1s32e td {
         padding: var(--gap-2xs) 0 0;
-    } .calendar__dayName_1sidm {
+    } .calendar__dayName_1s32e {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
 
     height: var(--calendar-day-size);
     color: var(--color-light-text-secondary)
-} @media (max-width: 374px) { .calendar__dayName_1sidm {
+} @media (max-width: 374px) { .calendar__dayName_1s32e {
         height: 36px
 }
-    } .calendar__day_1sidm {
+    } .calendar__day_1s32e {
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
     position: relative;
@@ -102,42 +102,41 @@
     box-sizing: border-box;
     color: var(--color-light-text-primary);
     z-index: 1
-} .calendar__day_1sidm.calendar__rounded_1sidm {
+} .calendar__day_1s32e.calendar__rounded_1s32e {
         border-radius: var(--calendar-day-border-radius);
-    } .calendar__day_1sidm.calendar__rectangular_1sidm {
+    } .calendar__day_1s32e.calendar__rectangular_1s32e {
         border-radius: var(--border-radius-m);
         width: 44px;
-    } .calendar__day_1sidm.calendar__highlighted_1sidm,
-    .calendar__day_1sidm.calendar__range_1sidm.calendar__highlighted_1sidm:not(.calendar__disabled_1sidm) {
+    } .calendar__day_1s32e.calendar__highlighted_1s32e,
+    .calendar__day_1s32e.calendar__range_1s32e.calendar__highlighted_1s32e:not(.calendar__disabled_1s32e) {
         color: var(--calendar-highlighted-color);
         background: var(--calendar-highlighted-background);
-    } .calendar__day_1sidm.calendar__holiday_1sidm {
+    } .calendar__day_1s32e.calendar__holiday_1s32e {
         color: var(--calendar-holiday-color);
-    } .calendar__day_1sidm.calendar__disabled_1sidm {
+    } .calendar__day_1s32e.calendar__disabled_1s32e {
         pointer-events: none;
         color: var(--calendar-disabled-color);
 
         background: var(--calendar-disabled-background);
         cursor: default;
-    } .calendar__day_1sidm.calendar__today_1sidm {
-        font-weight: bold;
+    } .calendar__day_1s32e.calendar__today_1s32e {
         color: var(--calendar-today-color);
-    } .calendar__day_1sidm.calendar__rangeComplete_1sidm {
+    } .calendar__day_1s32e.calendar__rangeComplete_1s32e {
         background: var(--calendar-range-complete-background);
-    } .calendar__day_1sidm.calendar__selected_1sidm,
-    .calendar__day_1sidm.calendar__disabled_1sidm.calendar__selected_1sidm {
+    } .calendar__day_1s32e.calendar__selected_1s32e,
+    .calendar__day_1s32e.calendar__disabled_1s32e.calendar__selected_1s32e {
         color: var(--calendar-selected-color);
         background: var(--calendar-selected-background);
     } @media (hover) {
-            .calendar__day_1sidm.calendar__selected_1sidm:hover {
+            .calendar__day_1s32e.calendar__selected_1s32e:hover {
                 background: var(--calendar-selected-hover-background);
             }
-        } .calendar__day_1sidm:focus {
+        } .calendar__day_1s32e:focus {
         z-index: 1;
-    } /* RANGE */ .calendar__dayWrapper_1sidm {
+    } /* RANGE */ .calendar__dayWrapper_1s32e {
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     position: relative
-} .calendar__dayWrapper_1sidm:before {
+} .calendar__dayWrapper_1s32e:before {
         content: '';
         display: block;
         position: absolute;
@@ -145,27 +144,27 @@
         bottom: 0;
         width: 100%;
         height: var(--calendar-day-size);
-    } .calendar__dayWrapper_1sidm:focus {
+    } .calendar__dayWrapper_1s32e:focus {
         outline: none;
-    } .calendar__dayWrapper_1sidm.calendar__cursorPointer_1sidm {
+    } .calendar__dayWrapper_1s32e.calendar__cursorPointer_1s32e {
         cursor: pointer;
-    } .calendar__range_1sidm .calendar__day_1sidm:not(.calendar__selected_1sidm):not(.calendar__disabled_1sidm):not(.calendar__today_1sidm):not(.calendar__holiday_1sidm) {
+    } .calendar__range_1s32e .calendar__day_1s32e:not(.calendar__selected_1s32e):not(.calendar__disabled_1s32e):not(.calendar__today_1s32e):not(.calendar__holiday_1s32e) {
         color: var(--calendar-range-color);
-    } .calendar__range_1sidm:before {
+    } .calendar__range_1s32e:before {
         background: var(--calendar-range-background);
-    } .calendar__rangeEnd_1sidm:before {
+    } .calendar__rangeEnd_1s32e: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_1sidm:before {
+    } .calendar__rangeStart_1s32e:before {
         left: auto;
         right: 0;
         width: calc(50% + 20px);
         border-top-left-radius: var(--calendar-day-border-radius);
         border-bottom-left-radius: var(--calendar-day-border-radius);
-    } .calendar__rangeComplete_1sidm:before {
+    } .calendar__rangeComplete_1s32e:before {
         background: var(--calendar-range-complete-background);
-    } .calendar__transitLeft_1sidm:after, .calendar__transitRight_1sidm:after {
+    } .calendar__transitLeft_1s32e:after, .calendar__transitRight_1s32e:after {
         content: '';
         position: absolute;
         display: block;
@@ -173,79 +172,81 @@
         height: var(--calendar-day-size);
         bottom: 0;
         pointer-events: none;
-    } .calendar__transitLeft_1sidm:after {
+    } .calendar__transitLeft_1s32e:after {
         right: 100%;
         background: linear-gradient(
             270deg,
             var(--calendar-range-background) 0%,
             var(--color-light-specialbg-nulled) 100%
         );
-    } .calendar__transitLeft_1sidm:first-child:before {
+    } .calendar__transitLeft_1s32e:first-child:before {
             opacity: 0;
-        } .calendar__transitLeft_1sidm:first-child:after {
+        } .calendar__transitLeft_1s32e:first-child:after {
             right: 0;
-        } .calendar__transitRight_1sidm:after {
+        } .calendar__transitRight_1s32e:after {
         left: 100%;
         background: linear-gradient(
             270deg,
             var(--color-light-specialbg-nulled) 0%,
             var(--calendar-range-background) 100%
         );
-    } .calendar__transitRight_1sidm:last-child:before {
+    } .calendar__transitRight_1s32e:last-child:before {
             opacity: 0;
-        } .calendar__transitRight_1sidm:last-child:after {
+        } .calendar__transitRight_1s32e:last-child:after {
             left: 0;
-        } .calendar__sharpTransitLeft_1sidm:first-child:before {
+        } .calendar__sharpTransitLeft_1s32e:first-child:before {
             opacity: 1;
-        } .calendar__sharpTransitLeft_1sidm:first-child:after {
+        } .calendar__sharpTransitLeft_1s32e:first-child:after {
             opacity: 0;
-        } .calendar__sharpTransitRight_1sidm:last-child:before {
+        } .calendar__sharpTransitRight_1s32e:last-child:before {
             opacity: 1;
-        } .calendar__sharpTransitRight_1sidm:last-child:after {
+        } .calendar__sharpTransitRight_1s32e:last-child:after {
             opacity: 0;
-        } .calendar__rangeComplete_1sidm.calendar__transitLeft_1sidm:after {
+        } .calendar__rangeComplete_1s32e.calendar__transitLeft_1s32e:after {
         background: linear-gradient(
             270deg,
             var(--calendar-range-complete-background) 0%,
             var(--color-light-specialbg-nulled) 100%
         );
-    } .calendar__rangeComplete_1sidm.calendar__transitRight_1sidm:after {
+    } .calendar__rangeComplete_1s32e.calendar__transitRight_1s32e:after {
         background: linear-gradient(
             270deg,
             var(--color-light-specialbg-nulled) 0%,
             var(--calendar-range-complete-background) 100%
         );
-    } /* SLIDE ANIMATION */ .calendar__daysEnter_1sidm .calendar__dayWrapper_1sidm {
+    } /* SLIDE ANIMATION */ .calendar__daysEnter_1s32e .calendar__dayWrapper_1s32e {
     width: 100px;
-} .calendar__left_1sidm .calendar__daysEnter_1sidm {
+} .calendar__left_1s32e .calendar__daysEnter_1s32e {
         transform: translateX(50px);
-    } .calendar__left_1sidm .calendar__daysEnterActive_1sidm {
+    } .calendar__left_1s32e .calendar__daysEnterActive_1s32e {
         transform: translateX(0);
-    } .calendar__left_1sidm .calendar__daysExit_1sidm {
+    } .calendar__left_1s32e .calendar__daysExit_1s32e {
         transform: translateX(0);
-    } .calendar__left_1sidm .calendar__daysExitActive_1sidm {
+    } .calendar__left_1s32e .calendar__daysExitActive_1s32e {
         transform: translateX(-50px);
-    } .calendar__right_1sidm .calendar__daysEnter_1sidm {
+    } .calendar__right_1s32e .calendar__daysEnter_1s32e {
         transform: translateX(-50px);
-    } .calendar__right_1sidm .calendar__daysEnterActive_1sidm {
+    } .calendar__right_1s32e .calendar__daysEnterActive_1s32e {
         transform: translateX(0);
-    } .calendar__right_1sidm .calendar__daysExit_1sidm {
+    } .calendar__right_1s32e .calendar__daysExit_1s32e {
         transform: translateX(0);
-    } .calendar__right_1sidm .calendar__daysExitActive_1sidm {
+    } .calendar__right_1s32e .calendar__daysExitActive_1s32e {
         transform: translateX(50px);
-    } .calendar__dayAddons_1sidm > span {
+    } .calendar__dayAddons_1s32e > span {
         display: flex;
         flex-direction: column;
         justify-content: flex-end;
         height: inherit;
         padding: 0 var(--gap-3xs);
-    } .calendar__dayContent_1sidm {
+    } .calendar__dayContent_1s32e {
     font-size: 16px;
     line-height: 24px;
-    font-weight: 400;
-} .calendar__addons_1sidm {
+    font-weight: 400
+} .calendar__dayContent_1s32e.calendar__today_1s32e {
+        font-weight: bold;
+    } .calendar__addons_1s32e {
     min-height: 8px;
-} .calendar__dot_1sidm {
+} .calendar__dot_1s32e {
     display: block;
     position: absolute;
     bottom: 4px;
@@ -255,25 +256,25 @@
     transform: translateX(-50%);
     border-radius: var(--border-radius-circle);
     background: var(--calendar-marker-background);
-} .calendar__selected_1sidm .calendar__dot_1sidm {
+} .calendar__selected_1s32e .calendar__dot_1s32e {
     background: var(--calendar-marker-selected-background);
-} .calendar__daysEnter_1sidm {
+} .calendar__daysEnter_1s32e {
     opacity: 0;
     position: absolute;
     left: 0;
-} .calendar__daysEnterActive_1sidm {
+} .calendar__daysEnterActive_1s32e {
     opacity: 1;
-} .calendar__daysExit_1sidm {
+} .calendar__daysExit_1s32e {
     pointer-events: none;
     opacity: 1;
-} .calendar__daysExitActive_1sidm {
+} .calendar__daysExitActive_1s32e {
     opacity: 0;
-} .calendar__daysEnterActive_1sidm,
-.calendar__daysExitActive_1sidm {
+} .calendar__daysEnterActive_1s32e,
+.calendar__daysExitActive_1s32e {
     transition: opacity 200ms, transform 300ms;
-} .calendar__bottomAddon_1sidm {
+} .calendar__bottomAddon_1s32e {
     margin: 0 auto
-} .calendar__bottomAddon_1sidm.calendar__selected_1sidm,
-    .calendar__bottomAddon_1sidm.calendar__selected_1sidm > * {
+} .calendar__bottomAddon_1s32e.calendar__selected_1s32e,
+    .calendar__bottomAddon_1s32e.calendar__selected_1s32e > * {
         color: var(--calendar-selected-color);
     }

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"header":"calendar__header_1rief","withShadow":"calendar__withShadow_1rief"};
+var styles = {"header":"calendar__header_s4cnn","withShadow":"calendar__withShadow_s4cnn"};
 require('./index.css');
 
 var Header = function (_a) {

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

@@ -1,4 +1,4 @@
-/* hash: 18tdq */
+/* hash: nu134 */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -39,13 +39,13 @@
     /* disabled */
 
     /* marker */
-} .calendar__header_1rief {
+} .calendar__header_s4cnn {
     width: 100%;
     box-sizing: border-box;
-    padding: var(--gap-m) 0 var(--gap-s);
+    padding: var(--gap-m) var(--gap-m) var(--gap-s);
     transition: box-shadow 0.2s ease;
     display: flex;
     justify-content: center;
-} .calendar__withShadow_1rief {
+} .calendar__withShadow_s4cnn {
     box-shadow: var(--shadow-s);
 }

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

@@ -27,7 +27,7 @@ import 'date-fns/subMonths';
 import 'tslib';
 import '../../../../button/esm';
 
-var styles = {"component":"calendar__component_qz8av","button":"calendar__button_qz8av","month":"calendar__month_qz8av","year":"calendar__year_qz8av","buttonContent":"calendar__buttonContent_qz8av","upDownIcon":"calendar__upDownIcon_qz8av"};
+var styles = {"component":"calendar__component_m5aqp","button":"calendar__button_m5aqp","month":"calendar__month_m5aqp","year":"calendar__year_m5aqp","buttonContent":"calendar__buttonContent_m5aqp","upDownIcon":"calendar__upDownIcon_m5aqp"};
 require('./index.css');
 
 var MonthYearHeader = function (_a) {

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

@@ -1,4 +1,4 @@
-/* hash: 1pkia */
+/* hash: to00a */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -37,33 +37,33 @@
     /* disabled */
 
     /* marker */
-} .calendar__component_qz8av {
+} .calendar__component_m5aqp {
     position: relative;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
-} .cc-calendar .calendar__button_qz8av {
+} .cc-calendar .calendar__button_m5aqp {
         border-radius: var(--border-radius-s);
-    } .calendar__month_qz8av {
+    } .calendar__month_m5aqp {
     flex-basis: 65%
-} @media (max-width: 374px) { .calendar__month_qz8av {
+} @media (max-width: 374px) { .calendar__month_m5aqp {
         flex-grow: 1
 }
-    } .calendar__year_qz8av {
+    } .calendar__year_m5aqp {
     flex-basis: 35%;
     margin-left: var(--gap-xs)
-} @media (max-width: 374px) { .calendar__year_qz8av {
+} @media (max-width: 374px) { .calendar__year_m5aqp {
         width: 90px
 }
-    } .calendar__buttonContent_qz8av {
+    } .calendar__buttonContent_m5aqp {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
-} .calendar__upDownIcon_qz8av {
+} .calendar__upDownIcon_m5aqp {
     margin-left: var(--gap-xs)
-} @media (max-width: 374px) { .calendar__upDownIcon_qz8av {
+} @media (max-width: 374px) { .calendar__upDownIcon_m5aqp {
         margin-left: auto
 }
     }

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

@@ -28,7 +28,7 @@ import 'date-fns/subDays';
 import 'date-fns/subMonths';
 import '../../../../button/esm';
 
-var styles = {"monthsTable":"calendar__monthsTable_1tqt7","responsive":"calendar__responsive_1tqt7","button":"calendar__button_1tqt7"};
+var styles = {"monthsTable":"calendar__monthsTable_s1zu9","responsive":"calendar__responsive_s1zu9","button":"calendar__button_s1zu9"};
 require('./index.css');
 
 var MonthsTable = function (_a) {

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

@@ -1,4 +1,4 @@
-/* hash: 13mnb */
+/* hash: 1avro */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -49,38 +49,38 @@
     /* disabled */
 
     /* marker */
-} .cc-calendar .calendar__monthsTable_1tqt7 {
+} .cc-calendar .calendar__monthsTable_s1zu9 {
         display: flex;
         flex-wrap: wrap;
         width: var(--calendar-inner-width);
         justify-content: flex-start
-    } @media (max-width: 374px) { .cc-calendar .calendar__monthsTable_1tqt7 {
+    } @media (max-width: 374px) { .cc-calendar .calendar__monthsTable_s1zu9 {
             width: var(--calendar-mobile-inner-width);
             padding-top: var(--gap-xs)
     }
-        } .cc-calendar .calendar__monthsTable_1tqt7.calendar__responsive_1tqt7 {
+        } .cc-calendar .calendar__monthsTable_s1zu9.calendar__responsive_s1zu9 {
             width: 100%;
             justify-content: space-between
-        } .cc-calendar .calendar__monthsTable_1tqt7.calendar__responsive_1tqt7 .calendar__button_1tqt7 {
+        } .cc-calendar .calendar__monthsTable_s1zu9.calendar__responsive_s1zu9 .calendar__button_s1zu9 {
                 width: 33%;
                 margin-right: 0;
-            } .cc-calendar .calendar__button_1tqt7 {
+            } .cc-calendar .calendar__button_s1zu9 {
         width: var(--calendar-select-button-width);
         margin-right: var(--gap-2xs);
         margin-bottom: var(--gap-xs)
-    } .cc-calendar .calendar__button_1tqt7:nth-child(3n) {
+    } .cc-calendar .calendar__button_s1zu9:nth-child(3n) {
             margin-right: 0;
-        } @media (max-width: 374px) { .cc-calendar .calendar__button_1tqt7 {
+        } @media (max-width: 374px) { .cc-calendar .calendar__button_s1zu9 {
             width: var(--calendar-mobile-select-button-width)
     }
 
-            .cc-calendar .calendar__button_1tqt7:nth-child(3n) {
+            .cc-calendar .calendar__button_s1zu9:nth-child(3n) {
                 margin-right: var(--gap-2xs);
             }
 
-            .cc-calendar .calendar__button_1tqt7:nth-child(2n) {
+            .cc-calendar .calendar__button_s1zu9:nth-child(2n) {
                 margin-right: 0;
-            } .cc-calendar .calendar__button_1tqt7 {
+            } .cc-calendar .calendar__button_s1zu9 {
 
             height: 36px
     }

package/calendar/esm/components/period-slider/Component.d.ts

@@ -63,6 +63,10 @@ type PeriodSliderProps = {
      * Обработчик нажатия на селектор года
      */
     onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Обработчик нажатия на период
+     */
+    onPeriodClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

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

@@ -37,11 +37,11 @@ import 'date-fns/isToday';
 import 'date-fns/isYesterday';
 import 'date-fns/startOfQuarter';
 
-var styles = {"component":"calendar__component_nxi94","period":"calendar__period_nxi94","empty":"calendar__empty_nxi94","arrow":"calendar__arrow_nxi94","full":"calendar__full_nxi94","yearSelectorButton":"calendar__yearSelectorButton_nxi94"};
+var styles = {"component":"calendar__component_1az9l","period":"calendar__period_1az9l","clicablePeriod":"calendar__clicablePeriod_1az9l","empty":"calendar__empty_1az9l","arrow":"calendar__arrow_1az9l","full":"calendar__full_1az9l","yearSelectorButton":"calendar__yearSelectorButton_1az9l"};
 require('./index.css');
 
 var PeriodSlider = function (_a) {
-    var value = _a.value, _b = _a.periodType, periodType = _b === void 0 ? 'month' : _b, className = _a.className, _c = _a.periodFormatter, periodFormatter = _c === void 0 ? formatPeriod : _c, _d = _a.prevArrowDisabled, prevArrowDisabled = _d === void 0 ? false : _d, _e = _a.nextArrowDisabled, nextArrowDisabled = _e === void 0 ? false : _e, _f = _a.hideDisabledArrows, hideDisabledArrows = _f === void 0 ? false : _f, _g = _a.isMonthAndYearSelectable, isMonthAndYearSelectable = _g === void 0 ? false : _g, _h = _a.showCurrentYearSelector, showCurrentYearSelector = _h === void 0 ? false : _h, _j = _a.onPrevArrowClick, onPrevArrowClick = _j === void 0 ? function () { return null; } : _j, _k = _a.onNextArrowClick, onNextArrowClick = _k === void 0 ? function () { return null; } : _k, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, dataTestId = _a.dataTestId;
+    var value = _a.value, _b = _a.periodType, periodType = _b === void 0 ? 'month' : _b, className = _a.className, _c = _a.periodFormatter, periodFormatter = _c === void 0 ? formatPeriod : _c, _d = _a.prevArrowDisabled, prevArrowDisabled = _d === void 0 ? false : _d, _e = _a.nextArrowDisabled, nextArrowDisabled = _e === void 0 ? false : _e, _f = _a.hideDisabledArrows, hideDisabledArrows = _f === void 0 ? false : _f, _g = _a.isMonthAndYearSelectable, isMonthAndYearSelectable = _g === void 0 ? false : _g, _h = _a.showCurrentYearSelector, showCurrentYearSelector = _h === void 0 ? false : _h, _j = _a.onPrevArrowClick, onPrevArrowClick = _j === void 0 ? function () { return null; } : _j, _k = _a.onNextArrowClick, onNextArrowClick = _k === void 0 ? function () { return null; } : _k, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, onPeriodClick = _a.onPeriodClick, dataTestId = _a.dataTestId;
     var _l = useMemo(function () {
         var _a;
         var from;
@@ -94,9 +94,17 @@ var PeriodSlider = function (_a) {
         if (!(valueFrom && valueTo)) {
             return React.createElement("span", { className: cn(styles.period, styles.empty) }, "\u0423\u043A\u0430\u0436\u0438\u0442\u0435 \u043F\u0435\u0440\u0438\u043E\u0434");
         }
-        return periodType === 'month' && isMonthAndYearSelectable ? (React.createElement("div", null,
-            React.createElement(Button, { className: styles.period, view: 'ghost', size: 'l', onClick: onMonthClick }, monthName(valueFrom)),
-            yearSelectorValue && (React.createElement(Button, { className: cn(styles.yearSelectorButton, styles.period), view: 'ghost', size: 'l', onClick: onYearClick }, yearSelectorValue)))) : (React.createElement("span", { className: styles.period }, periodFormatter(valueFrom, valueTo, periodType)));
+        if (periodType === 'month' && isMonthAndYearSelectable) {
+            return (React.createElement("div", null,
+                React.createElement(Button, { className: styles.period, view: 'ghost', size: 'l', onClick: onMonthClick }, monthName(valueFrom)),
+                yearSelectorValue && (React.createElement(Button, { className: cn(styles.yearSelectorButton, styles.period), view: 'ghost', size: 'l', onClick: onYearClick }, yearSelectorValue))));
+        }
+        if (onPeriodClick) {
+            return (
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+            React.createElement("a", { role: 'button', tabIndex: 0, onClick: onPeriodClick, className: cn(styles.period, styles.clicablePeriod) }, periodFormatter(valueFrom, valueTo, periodType, showCurrentYearSelector)));
+        }
+        return (React.createElement("span", { className: styles.period }, periodFormatter(valueFrom, valueTo, periodType, showCurrentYearSelector)));
     };
     return (React.createElement("div", { className: cn(styles.component, className), "aria-live": 'polite', "data-test-id": dataTestId },
         showArrow('prev') && (React.createElement(IconButton, { size: 'xs', className: styles.arrow, icon: ChevronBackMIcon, onClick: handlePrevArrowClick, disabled: prevArrowDisabled || !valueFrom, "aria-label": '\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434' })),