@alfalab/core-components 41.7.0 → 41.8.0

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

@@ -49,21 +49,21 @@
     /* disabled */
 
     /* marker */
-} .cc-calendar .calendar__yearsTable_1h0bn {
+} .cc-calendar .calendar__yearsTable_71cqz {
         overflow: auto;
         overflow-x: hidden;
         width: 100%
-    } @media (max-width: 374px) { .cc-calendar .calendar__yearsTable_1h0bn {
+    } @media (max-width: 374px) { .cc-calendar .calendar__yearsTable_71cqz {
             padding-top: var(--gap-xs)
     }
-        } .cc-calendar .calendar__yearsTable_1h0bn.calendar__responsive_1h0bn {
+        } .cc-calendar .calendar__yearsTable_71cqz.calendar__responsive_71cqz {
             justify-content: space-between
-        } .cc-calendar .calendar__yearsTable_1h0bn.calendar__responsive_1h0bn .calendar__inner_1h0bn {
+        } .cc-calendar .calendar__yearsTable_71cqz.calendar__responsive_71cqz .calendar__inner_71cqz {
                 left: auto;
-            } .cc-calendar .calendar__yearsTable_1h0bn.calendar__responsive_1h0bn .calendar__button_1h0bn {
+            } .cc-calendar .calendar__yearsTable_71cqz.calendar__responsive_71cqz .calendar__button_71cqz {
                 width: 33%;
                 margin-right: 0;
-            } .cc-calendar .calendar__inner_1h0bn {
+            } .cc-calendar .calendar__inner_71cqz {
         display: flex;
         flex-wrap: wrap;
         justify-content: flex-start;
@@ -72,26 +72,26 @@
         /* (width - inner-width) / 2 */
         left: 32px;
         overflow: hidden
-    } @media (max-width: 374px) { .cc-calendar .calendar__inner_1h0bn {
+    } @media (max-width: 374px) { .cc-calendar .calendar__inner_71cqz {
             left: 16px
     }
-        } .cc-calendar .calendar__button_1h0bn {
+        } .cc-calendar .calendar__button_71cqz {
         width: var(--calendar-select-button-width);
         margin-right: var(--gap-2xs);
         margin-bottom: var(--gap-xs)
-    } .cc-calendar .calendar__button_1h0bn:nth-child(3n) {
+    } .cc-calendar .calendar__button_71cqz:nth-child(3n) {
             margin-right: 0;
-        } @media (max-width: 374px) { .cc-calendar .calendar__button_1h0bn {
+        } @media (max-width: 374px) { .cc-calendar .calendar__button_71cqz {
             width: var(--calendar-mobile-select-button-width)
     }
 
-            .cc-calendar .calendar__button_1h0bn:nth-child(3n) {
+            .cc-calendar .calendar__button_71cqz:nth-child(3n) {
                 margin-right: var(--gap-2xs);
             }
 
-            .cc-calendar .calendar__button_1h0bn:nth-child(2n) {
+            .cc-calendar .calendar__button_71cqz:nth-child(2n) {
                 margin-right: 0;
-            } .cc-calendar .calendar__button_1h0bn {
+            } .cc-calendar .calendar__button_71cqz {
 
             height: 36px
     }

package/calendar/esm/desktop.css

@@ -40,27 +40,27 @@
     /* disabled */
 
     /* marker */
-} .calendar__component_151z4 {
+} .calendar__component_79h3s {
     width: var(--calendar-width);
     height: var(--calendar-height);
     display: flex;
     flex-direction: column;
     overflow: hidden;
     outline: none
-} @media (max-width: 374px) { .calendar__component_151z4 {
+} @media (max-width: 374px) { .calendar__component_79h3s {
         align-items: center;
         width: 100%;
         height: 321px
 }
-    } .calendar__component_151z4.calendar__responsive_151z4 {
+    } .calendar__component_79h3s.calendar__responsive_79h3s {
         width: 100%
-    } .calendar__component_151z4.calendar__responsive_151z4 .calendar__period_151z4 {
+    } .calendar__component_79h3s.calendar__responsive_79h3s .calendar__period_79h3s {
             width: 100%;
-        } .calendar__component_151z4.calendar__responsive_151z4 .calendar__monthYear_151z4 {
+        } .calendar__component_79h3s.calendar__responsive_79h3s .calendar__monthYear_79h3s {
             width: 100%;
-        } .calendar__component_151z4.calendar__responsive_151z4 .calendar__container_151z4 {
+        } .calendar__component_79h3s.calendar__responsive_79h3s .calendar__container_79h3s {
             width: 100%;
-        } .calendar__container_151z4 {
+        } .calendar__container_79h3s {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -68,24 +68,24 @@
     box-sizing: border-box;
     flex-grow: 1;
     overflow: hidden
-} @media (max-width: 374px) { .calendar__container_151z4 {
+} @media (max-width: 374px) { .calendar__container_79h3s {
         width: 288px
 }
-    } .calendar__sixWeeks_151z4 {
+    } .calendar__sixWeeks_79h3s {
     height: 388px
-} @media (max-width: 374px) { .calendar__sixWeeks_151z4 {
+} @media (max-width: 374px) { .calendar__sixWeeks_79h3s {
         height: 361px
 }
-    } .calendar__period_151z4 {
+    } .calendar__period_79h3s {
     width: var(--calendar-inner-width)
-} @media (max-width: 374px) { .calendar__period_151z4 {
+} @media (max-width: 374px) { .calendar__period_79h3s {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
         margin: 0 auto
 }
-    } .calendar__monthYear_151z4 {
+    } .calendar__monthYear_79h3s {
     width: var(--calendar-inner-width)
-} @media (max-width: 374px) { .calendar__monthYear_151z4 {
+} @media (max-width: 374px) { .calendar__monthYear_79h3s {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
         margin: 0 auto

package/calendar/esm/index.js

@@ -1,5 +1,5 @@
 export { CalendarDesktop as Calendar } from './Component.desktop.js';
-export { a as CalendarMobile, C as CalendarResponsive } from './Component.responsive-f7f5de96.js';
+export { a as CalendarMobile, C as CalendarResponsive } from './Component.responsive-d4193012.js';
 export { usePeriod, usePeriodWithReset } from './usePeriod.js';
 export { useCalendar } from './useCalendar.js';
 export { PeriodSlider } from './components/period-slider/Component.js';

package/calendar/esm/mobile.js

@@ -1,4 +1,4 @@
-export { a as CalendarMobile } from './Component.responsive-f7f5de96.js';
+export { a as CalendarMobile } from './Component.responsive-d4193012.js';
 import 'tslib';
 import 'react';
 import '@alfalab/hooks';

package/calendar/esm/responsive.d.ts

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

package/calendar/esm/responsive.js

@@ -1,4 +1,4 @@
-export { C as CalendarResponsive } from './Component.responsive-f7f5de96.js';
+export { C as CalendarResponsive } from './Component.responsive-d4193012.js';
 import 'tslib';
 import 'react';
 import '@alfalab/hooks';

package/calendar/index.js

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Component_desktop = require('./Component.desktop.js');
-var components_calendarMobile_Component = require('./Component.responsive-dd3489d8.js');
+var components_calendarMobile_Component = require('./Component.responsive-c4a5d6dd.js');
 var usePeriod = require('./usePeriod.js');
 var useCalendar = require('./useCalendar.js');
 var components_periodSlider_Component = require('./components/period-slider/Component.js');

package/calendar/mobile.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_calendarMobile_Component = require('./Component.responsive-dd3489d8.js');
+var components_calendarMobile_Component = require('./Component.responsive-c4a5d6dd.js');
 require('tslib');
 require('react');
 require('@alfalab/hooks');

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

@@ -75,6 +75,10 @@ type CalendarDesktopProps = {
      * Обработчик нажатия на кнопку года
      */
     onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Обработчик нажатия на период
+     */
+    onPeriodClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
@@ -95,6 +99,11 @@ type CalendarDesktopProps = {
      * Форма ячейки дня
      */
     shape?: 'rounded' | 'rectangular';
+    /**
+     * Отображать ли текущий год, если selectorView 'month-only'
+     * @default false
+     */
+    showCurrentYearSelector?: boolean;
 };
 declare const CalendarDesktop: React.ForwardRefExoticComponent<CalendarDesktopProps & React.RefAttributes<HTMLDivElement>>;
 export { CalendarDesktopProps, CalendarDesktop };

package/calendar/modern/Component.desktop.js

@@ -59,10 +59,10 @@ import 'date-fns/setYear';
 import 'date-fns/subYears';
 import './components/period-slider/utils.js';
 
-const styles = {"component":"calendar__component_151z4","responsive":"calendar__responsive_151z4","period":"calendar__period_151z4","monthYear":"calendar__monthYear_151z4","container":"calendar__container_151z4","sixWeeks":"calendar__sixWeeks_151z4"};
+const styles = {"component":"calendar__component_79h3s","responsive":"calendar__responsive_79h3s","period":"calendar__period_79h3s","monthYear":"calendar__monthYear_79h3s","container":"calendar__container_79h3s","sixWeeks":"calendar__sixWeeks_79h3s"};
 require('./desktop.css');
 
-const CalendarDesktop = forwardRef(({ className, defaultView = 'days', selectorView = 'full', value, month: monthTimestamp, minDate: minDateTimestamp, maxDate: maxDateTimestamp, defaultMonth: defaultMonthTimestamp = +new Date(), selectedFrom, selectedTo, rangeComplete, offDays, events, holidays, onChange, onMonthChange, onMonthClick, onYearClick, dataTestId, hasHeader = true, responsive, dayAddons, shape = 'rounded', }, ref) => {
+const CalendarDesktop = forwardRef(({ className, defaultView = 'days', selectorView = 'full', value, month: monthTimestamp, minDate: minDateTimestamp, maxDate: maxDateTimestamp, defaultMonth: defaultMonthTimestamp = +new Date(), selectedFrom, selectedTo, rangeComplete, offDays, events, holidays, onChange, onMonthChange, onMonthClick, onYearClick, onPeriodClick, dataTestId, hasHeader = true, responsive, dayAddons, shape = 'rounded', showCurrentYearSelector = false, }, ref) => {
     const [view, setView] = useState(defaultView);
     const [scrolled, setScrolled] = useState(false);
     const selected = useMemo(() => (value ? new Date(value) : undefined), [value]);
@@ -128,7 +128,7 @@ const CalendarDesktop = forwardRef(({ className, defaultView = 'days', selectorV
             [styles.sixWeeks]: weeks.length === 6,
             [styles.responsive]: responsive,
         }), "data-test-id": dataTestId },
-        hasHeader && (React.createElement(Header, { view: selectorView, withShadow: scrolled }, selectorView === 'month-only' ? (React.createElement(PeriodSlider, { className: styles.period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick })) : (React.createElement(MonthYearHeader, { className: styles.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick })))),
+        hasHeader && (React.createElement(Header, { view: selectorView, withShadow: scrolled }, selectorView === 'month-only' ? (React.createElement(PeriodSlider, { className: styles.period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, showCurrentYearSelector: showCurrentYearSelector, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick, onPeriodClick: onPeriodClick })) : (React.createElement(MonthYearHeader, { className: styles.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick })))),
         React.createElement("div", { className: cn(styles.container, styles[view]) },
             view === 'days' && (React.createElement(DaysTable, { weeks: weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, responsive: responsive, shape: shape })),
             view === 'months' && (React.createElement(MonthsTable, { selectedMonth: activeMonth, months: months, getMonthProps: getMonthProps, responsive: responsive })),

package/calendar/modern/{Component.responsive-5c7d336f.js → Component.responsive-3ea14aa6.js}

@@ -64,7 +64,7 @@ import 'react-merge-refs';
 import 'date-fns/setYear';
 import 'date-fns/subYears';
 
-const styles = {"wrapper":"calendar__wrapper_14iok","withZIndex":"calendar__withZIndex_14iok","calendar":"calendar__calendar_14iok","dayNames":"calendar__dayNames_14iok","withHeader":"calendar__withHeader_14iok","month":"calendar__month_14iok","daysTable":"calendar__daysTable_14iok","dayName":"calendar__dayName_14iok"};
+const styles = {"wrapper":"calendar__wrapper_dfzyi","withZIndex":"calendar__withZIndex_dfzyi","calendar":"calendar__calendar_dfzyi","dayNames":"calendar__dayNames_dfzyi","withHeader":"calendar__withHeader_dfzyi","month":"calendar__month_dfzyi","daysTable":"calendar__daysTable_dfzyi","dayName":"calendar__dayName_dfzyi"};
 require('./components/calendar-mobile/index.css');
 
 // ResizeObserverPolyfill необходим для корректной работы react-virtuoso.

package/calendar/modern/Component.responsive.js

@@ -1,6 +1,6 @@
 import 'react';
 import '@alfalab/hooks';
-export { C as CalendarResponsive } from './Component.responsive-5c7d336f.js';
+export { C as CalendarResponsive } from './Component.responsive-3ea14aa6.js';
 import './Component.desktop.js';
 import 'react-virtuoso';
 import '@juggle/resize-observer';

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

@@ -8,7 +8,7 @@ import 'date-fns/startOfMonth';
 import '../../../../button/modern';
 import '../../../../modal/modern/mobile';
 import '../../Component.desktop.js';
-export { a as CalendarMobile } from '../../Component.responsive-5c7d336f.js';
+export { a as CalendarMobile } from '../../Component.responsive-3ea14aa6.js';
 import 'date-fns/differenceInDays';
 import '@alfalab/hooks';
 import 'react-merge-refs';

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

@@ -57,13 +57,13 @@
     /* mobile */
 
     /* paddings */
-} .calendar__wrapper_14iok {
+} .calendar__wrapper_dfzyi {
     background: var(--color-light-bg-primary);
-} .calendar__withZIndex_14iok {
+} .calendar__withZIndex_dfzyi {
     z-index: 2;
-} .calendar__calendar_14iok th {
+} .calendar__calendar_dfzyi th {
     border-bottom: 1px solid var(--color-light-border-primary);
-} .calendar__dayNames_14iok {
+} .calendar__dayNames_dfzyi {
     padding: 0 var(--gap-m);
     width: 100%;
     position: sticky;
@@ -71,11 +71,11 @@
     background: var(--modal-header-background);
     top: 0;
     height: 32px
-} .calendar__dayNames_14iok.calendar__withHeader_14iok {
+} .calendar__dayNames_dfzyi.calendar__withHeader_dfzyi {
         top: 48px;
-    } .calendar__dayNames_14iok th {
+    } .calendar__dayNames_dfzyi th {
     height: 100%;
-} .calendar__month_14iok {
+} .calendar__month_dfzyi {
     font-style: normal;
     font-weight: 700;
     font-size: 12px;
@@ -84,18 +84,18 @@
     text-transform: uppercase;
     color: var(--color-light-text-primary);
     margin-bottom: var(--gap-xs);
-} .calendar__daysTable_14iok {
+} .calendar__daysTable_dfzyi {
     display: flex;
     flex-direction: column;
     margin-top: var(--gap-2xl);
-} .calendar__dayName_14iok {
+} .calendar__dayName_dfzyi {
     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_dfzyi {
         height: 36px
 }
     }

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

@@ -1,2 +1,2 @@
-export * from "../../Component.responsive-5c7d336f";
+export * from "../../Component.responsive-3ea14aa6";
 export {};

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

@@ -1,4 +1,4 @@
-export { a as CalendarMobile } from '../../Component.responsive-5c7d336f.js';
+export { a as CalendarMobile } from '../../Component.responsive-3ea14aa6.js';
 import 'react';
 import '@alfalab/hooks';
 import 'react-virtuoso';

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

@@ -30,7 +30,7 @@ import 'date-fns/startOfYear';
 import 'date-fns/subDays';
 import 'date-fns/subMonths';
 
-const 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"};
+const styles = {"daysTable":"calendar__daysTable_1lujs","responsive":"calendar__responsive_1lujs","dayName":"calendar__dayName_1lujs","day":"calendar__day_1lujs","rounded":"calendar__rounded_1lujs","rectangular":"calendar__rectangular_1lujs","highlighted":"calendar__highlighted_1lujs","range":"calendar__range_1lujs","disabled":"calendar__disabled_1lujs","holiday":"calendar__holiday_1lujs","today":"calendar__today_1lujs","rangeComplete":"calendar__rangeComplete_1lujs","selected":"calendar__selected_1lujs","dayWrapper":"calendar__dayWrapper_1lujs","cursorPointer":"calendar__cursorPointer_1lujs","rangeEnd":"calendar__rangeEnd_1lujs","rangeStart":"calendar__rangeStart_1lujs","transitLeft":"calendar__transitLeft_1lujs","transitRight":"calendar__transitRight_1lujs","sharpTransitLeft":"calendar__sharpTransitLeft_1lujs","sharpTransitRight":"calendar__sharpTransitRight_1lujs","daysEnter":"calendar__daysEnter_1lujs","left":"calendar__left_1lujs","daysEnterActive":"calendar__daysEnterActive_1lujs","daysExit":"calendar__daysExit_1lujs","daysExitActive":"calendar__daysExitActive_1lujs","right":"calendar__right_1lujs","dayAddons":"calendar__dayAddons_1lujs","dayContent":"calendar__dayContent_1lujs","addons":"calendar__addons_1lujs","dot":"calendar__dot_1lujs","bottomAddon":"calendar__bottomAddon_1lujs"};
 require('./index.css');
 
 /* eslint-disable complexity */
@@ -105,7 +105,7 @@ const DaysTable = ({ weeks = [], activeMonth = new Date(), highlighted, selected
                     [styles.holiday]: !day.disabled && day.holiday,
                     [styles.highlighted]: dayHighlighted,
                 }) },
-                React.createElement("span", { className: cn(styles.dayContent) }, day.date.getDate()),
+                React.createElement("span", { className: cn(styles.dayContent, { [styles.today]: isToday(day.date) }) }, day.date.getDate()),
                 React.createElement("span", { className: cn(styles.addons, {
                         [styles.dot]: day.event,
                         [styles.bottomAddon]: day.dayAddon,

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

@@ -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_1lujs {
     border-collapse: separate;
     border-spacing: 0;
     position: relative
-} .calendar__daysTable_1sidm.calendar__responsive_1sidm {
+} .calendar__daysTable_1lujs.calendar__responsive_1lujs {
         width: 100%;
-    } .calendar__daysTable_1sidm th {
+    } .calendar__daysTable_1lujs th {
         padding: 0;
-    } .calendar__daysTable_1sidm td {
+    } .calendar__daysTable_1lujs td {
         padding: var(--gap-2xs) 0 0;
-    } .calendar__dayName_1sidm {
+    } .calendar__dayName_1lujs {
     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_1lujs {
         height: 36px
 }
-    } .calendar__day_1sidm {
+    } .calendar__day_1lujs {
     -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_1lujs.calendar__rounded_1lujs {
         border-radius: var(--calendar-day-border-radius);
-    } .calendar__day_1sidm.calendar__rectangular_1sidm {
+    } .calendar__day_1lujs.calendar__rectangular_1lujs {
         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_1lujs.calendar__highlighted_1lujs,
+    .calendar__day_1lujs.calendar__range_1lujs.calendar__highlighted_1lujs:not(.calendar__disabled_1lujs) {
         color: var(--calendar-highlighted-color);
         background: var(--calendar-highlighted-background);
-    } .calendar__day_1sidm.calendar__holiday_1sidm {
+    } .calendar__day_1lujs.calendar__holiday_1lujs {
         color: var(--calendar-holiday-color);
-    } .calendar__day_1sidm.calendar__disabled_1sidm {
+    } .calendar__day_1lujs.calendar__disabled_1lujs {
         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_1lujs.calendar__today_1lujs {
         color: var(--calendar-today-color);
-    } .calendar__day_1sidm.calendar__rangeComplete_1sidm {
+    } .calendar__day_1lujs.calendar__rangeComplete_1lujs {
         background: var(--calendar-range-complete-background);
-    } .calendar__day_1sidm.calendar__selected_1sidm,
-    .calendar__day_1sidm.calendar__disabled_1sidm.calendar__selected_1sidm {
+    } .calendar__day_1lujs.calendar__selected_1lujs,
+    .calendar__day_1lujs.calendar__disabled_1lujs.calendar__selected_1lujs {
         color: var(--calendar-selected-color);
         background: var(--calendar-selected-background);
     } @media (hover) {
-            .calendar__day_1sidm.calendar__selected_1sidm:hover {
+            .calendar__day_1lujs.calendar__selected_1lujs:hover {
                 background: var(--calendar-selected-hover-background);
             }
-        } .calendar__day_1sidm:focus {
+        } .calendar__day_1lujs:focus {
         z-index: 1;
-    } /* RANGE */ .calendar__dayWrapper_1sidm {
+    } /* RANGE */ .calendar__dayWrapper_1lujs {
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     position: relative
-} .calendar__dayWrapper_1sidm:before {
+} .calendar__dayWrapper_1lujs: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_1lujs:focus {
         outline: none;
-    } .calendar__dayWrapper_1sidm.calendar__cursorPointer_1sidm {
+    } .calendar__dayWrapper_1lujs.calendar__cursorPointer_1lujs {
         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_1lujs .calendar__day_1lujs:not(.calendar__selected_1lujs):not(.calendar__disabled_1lujs):not(.calendar__today_1lujs):not(.calendar__holiday_1lujs) {
         color: var(--calendar-range-color);
-    } .calendar__range_1sidm:before {
+    } .calendar__range_1lujs:before {
         background: var(--calendar-range-background);
-    } .calendar__rangeEnd_1sidm:before {
+    } .calendar__rangeEnd_1lujs: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_1lujs: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_1lujs:before {
         background: var(--calendar-range-complete-background);
-    } .calendar__transitLeft_1sidm:after, .calendar__transitRight_1sidm:after {
+    } .calendar__transitLeft_1lujs:after, .calendar__transitRight_1lujs: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_1lujs: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_1lujs:first-child:before {
             opacity: 0;
-        } .calendar__transitLeft_1sidm:first-child:after {
+        } .calendar__transitLeft_1lujs:first-child:after {
             right: 0;
-        } .calendar__transitRight_1sidm:after {
+        } .calendar__transitRight_1lujs: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_1lujs:last-child:before {
             opacity: 0;
-        } .calendar__transitRight_1sidm:last-child:after {
+        } .calendar__transitRight_1lujs:last-child:after {
             left: 0;
-        } .calendar__sharpTransitLeft_1sidm:first-child:before {
+        } .calendar__sharpTransitLeft_1lujs:first-child:before {
             opacity: 1;
-        } .calendar__sharpTransitLeft_1sidm:first-child:after {
+        } .calendar__sharpTransitLeft_1lujs:first-child:after {
             opacity: 0;
-        } .calendar__sharpTransitRight_1sidm:last-child:before {
+        } .calendar__sharpTransitRight_1lujs:last-child:before {
             opacity: 1;
-        } .calendar__sharpTransitRight_1sidm:last-child:after {
+        } .calendar__sharpTransitRight_1lujs:last-child:after {
             opacity: 0;
-        } .calendar__rangeComplete_1sidm.calendar__transitLeft_1sidm:after {
+        } .calendar__rangeComplete_1lujs.calendar__transitLeft_1lujs: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_1lujs.calendar__transitRight_1lujs: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_1lujs .calendar__dayWrapper_1lujs {
     width: 100px;
-} .calendar__left_1sidm .calendar__daysEnter_1sidm {
+} .calendar__left_1lujs .calendar__daysEnter_1lujs {
         transform: translateX(50px);
-    } .calendar__left_1sidm .calendar__daysEnterActive_1sidm {
+    } .calendar__left_1lujs .calendar__daysEnterActive_1lujs {
         transform: translateX(0);
-    } .calendar__left_1sidm .calendar__daysExit_1sidm {
+    } .calendar__left_1lujs .calendar__daysExit_1lujs {
         transform: translateX(0);
-    } .calendar__left_1sidm .calendar__daysExitActive_1sidm {
+    } .calendar__left_1lujs .calendar__daysExitActive_1lujs {
         transform: translateX(-50px);
-    } .calendar__right_1sidm .calendar__daysEnter_1sidm {
+    } .calendar__right_1lujs .calendar__daysEnter_1lujs {
         transform: translateX(-50px);
-    } .calendar__right_1sidm .calendar__daysEnterActive_1sidm {
+    } .calendar__right_1lujs .calendar__daysEnterActive_1lujs {
         transform: translateX(0);
-    } .calendar__right_1sidm .calendar__daysExit_1sidm {
+    } .calendar__right_1lujs .calendar__daysExit_1lujs {
         transform: translateX(0);
-    } .calendar__right_1sidm .calendar__daysExitActive_1sidm {
+    } .calendar__right_1lujs .calendar__daysExitActive_1lujs {
         transform: translateX(50px);
-    } .calendar__dayAddons_1sidm > span {
+    } .calendar__dayAddons_1lujs > span {
         display: flex;
         flex-direction: column;
         justify-content: flex-end;
         height: inherit;
         padding: 0 var(--gap-3xs);
-    } .calendar__dayContent_1sidm {
+    } .calendar__dayContent_1lujs {
     font-size: 16px;
     line-height: 24px;
-    font-weight: 400;
-} .calendar__addons_1sidm {
+    font-weight: 400
+} .calendar__dayContent_1lujs.calendar__today_1lujs {
+        font-weight: bold;
+    } .calendar__addons_1lujs {
     min-height: 8px;
-} .calendar__dot_1sidm {
+} .calendar__dot_1lujs {
     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_1lujs .calendar__dot_1lujs {
     background: var(--calendar-marker-selected-background);
-} .calendar__daysEnter_1sidm {
+} .calendar__daysEnter_1lujs {
     opacity: 0;
     position: absolute;
     left: 0;
-} .calendar__daysEnterActive_1sidm {
+} .calendar__daysEnterActive_1lujs {
     opacity: 1;
-} .calendar__daysExit_1sidm {
+} .calendar__daysExit_1lujs {
     pointer-events: none;
     opacity: 1;
-} .calendar__daysExitActive_1sidm {
+} .calendar__daysExitActive_1lujs {
     opacity: 0;
-} .calendar__daysEnterActive_1sidm,
-.calendar__daysExitActive_1sidm {
+} .calendar__daysEnterActive_1lujs,
+.calendar__daysExitActive_1lujs {
     transition: opacity 200ms, transform 300ms;
-} .calendar__bottomAddon_1sidm {
+} .calendar__bottomAddon_1lujs {
     margin: 0 auto
-} .calendar__bottomAddon_1sidm.calendar__selected_1sidm,
-    .calendar__bottomAddon_1sidm.calendar__selected_1sidm > * {
+} .calendar__bottomAddon_1lujs.calendar__selected_1lujs,
+    .calendar__bottomAddon_1lujs.calendar__selected_1lujs > * {
         color: var(--calendar-selected-color);
     }

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-const styles = {"header":"calendar__header_1rief","withShadow":"calendar__withShadow_1rief"};
+const styles = {"header":"calendar__header_hjfig","withShadow":"calendar__withShadow_hjfig"};
 require('./index.css');
 
 const Header = ({ view = 'full', withShadow, children }) => (React.createElement("div", { className: cn(styles.header, {