@alfalab/core-components 23.10.0 → 23.12.0

package/calendar/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1rcs1 */
+/* hash: oojpp */
 :root {
 
     /* Hard */
@@ -32,7 +32,7 @@
 
     /* marker */
 }
-.calendar__component_b5h6h {
+.calendar__component_1iu3c {
     width: var(--calendar-width);
     height: var(--calendar-height);
     display: flex;
@@ -41,13 +41,13 @@
     outline: none
 }
 @media (max-width: 374px) {
-.calendar__component_b5h6h {
+.calendar__component_1iu3c {
         align-items: center;
         width: 100%;
         height: 320px
 }
     }
-.calendar__container_b5h6h {
+.calendar__container_1iu3c {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -57,20 +57,20 @@
     overflow: hidden
 }
 @media (max-width: 374px) {
-.calendar__container_b5h6h {
+.calendar__container_1iu3c {
         width: 288px
 }
     }
-.calendar__sixWeeks_b5h6h {
+.calendar__sixWeeks_1iu3c {
     height: 379px
 }
 @media (max-width: 374px) {
-.calendar__sixWeeks_b5h6h {
+.calendar__sixWeeks_1iu3c {
         height: 360px
 }
     }
 @media (max-width: 374px) {
-.calendar__period_b5h6h {
+.calendar__period_1iu3c {
         justify-content: space-between;
         width: 256px;
         margin: 0 auto

package/calendar/esm/index.js

@@ -1,4 +1,4 @@
-import './tslib.es6-dee81fee.js';
+import './tslib.es6-368b8455.js';
 import 'react';
 import 'classnames';
 import 'date-fns';

package/calendar/index.css

@@ -1,4 +1,4 @@
-/* hash: 1rcs1 */
+/* hash: oojpp */
 :root {
 
     /* Hard */
@@ -32,7 +32,7 @@
 
     /* marker */
 }
-.calendar__component_b5h6h {
+.calendar__component_1iu3c {
     width: var(--calendar-width);
     height: var(--calendar-height);
     display: flex;
@@ -41,13 +41,13 @@
     outline: none
 }
 @media (max-width: 374px) {
-.calendar__component_b5h6h {
+.calendar__component_1iu3c {
         align-items: center;
         width: 100%;
         height: 320px
 }
     }
-.calendar__container_b5h6h {
+.calendar__container_1iu3c {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -57,20 +57,20 @@
     overflow: hidden
 }
 @media (max-width: 374px) {
-.calendar__container_b5h6h {
+.calendar__container_1iu3c {
         width: 288px
 }
     }
-.calendar__sixWeeks_b5h6h {
+.calendar__sixWeeks_1iu3c {
     height: 379px
 }
 @media (max-width: 374px) {
-.calendar__sixWeeks_b5h6h {
+.calendar__sixWeeks_1iu3c {
         height: 360px
 }
     }
 @media (max-width: 374px) {
-.calendar__period_b5h6h {
+.calendar__period_1iu3c {
         justify-content: space-between;
         width: 256px;
         margin: 0 auto

package/calendar/index.js

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

package/calendar/modern/Component.js

@@ -15,7 +15,7 @@ import './components/period-slider/utils.js';
 import { PeriodSlider } from './components/period-slider/Component.js';
 import { useCalendar } from './useCalendar.js';
 
-var styles = {"component":"calendar__component_b5h6h","container":"calendar__container_b5h6h","sixWeeks":"calendar__sixWeeks_b5h6h","period":"calendar__period_b5h6h"};
+var styles = {"component":"calendar__component_1iu3c","container":"calendar__container_1iu3c","sixWeeks":"calendar__sixWeeks_1iu3c","period":"calendar__period_1iu3c"};
 require('./index.css');
 
 const Calendar = forwardRef(({ className, defaultView = 'days', selectorView = 'full', value, month: monthTimestamp, minDate: minDateTimestamp, maxDate: maxDateTimestamp, defaultMonth: defaultMonthTimestamp = +new Date(), selectedFrom, selectedTo, offDays, events, onChange, onMonthChange, dataTestId, }, ref) => {

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

@@ -6,7 +6,7 @@ import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { Button } from '../../../../button/modern';
 import { getSelectionRange, WEEKDAYS } from '../../utils.js';
 
-var styles = {"daysTable":"calendar__daysTable_1o7rb","transitLeft":"calendar__transitLeft_1o7rb","transitRight":"calendar__transitRight_1o7rb","dayName":"calendar__dayName_1o7rb","day":"calendar__day_1o7rb","event":"calendar__event_1o7rb","today":"calendar__today_1o7rb","highlighted":"calendar__highlighted_1o7rb","disabled":"calendar__disabled_1o7rb","range":"calendar__range_1o7rb","selected":"calendar__selected_1o7rb","rangeStart":"calendar__rangeStart_1o7rb","firstDay":"calendar__firstDay_1o7rb","lastDay":"calendar__lastDay_1o7rb","left":"calendar__left_1o7rb","daysEnter":"calendar__daysEnter_1o7rb","daysEnterActive":"calendar__daysEnterActive_1o7rb","daysExit":"calendar__daysExit_1o7rb","daysExitActive":"calendar__daysExitActive_1o7rb","right":"calendar__right_1o7rb"};
+var styles = {"daysTable":"calendar__daysTable_tpmkv","transitLeft":"calendar__transitLeft_tpmkv","transitRight":"calendar__transitRight_tpmkv","dayName":"calendar__dayName_tpmkv","day":"calendar__day_tpmkv","event":"calendar__event_tpmkv","today":"calendar__today_tpmkv","highlighted":"calendar__highlighted_tpmkv","disabled":"calendar__disabled_tpmkv","range":"calendar__range_tpmkv","selected":"calendar__selected_tpmkv","rangeStart":"calendar__rangeStart_tpmkv","firstDay":"calendar__firstDay_tpmkv","lastDay":"calendar__lastDay_tpmkv","left":"calendar__left_tpmkv","daysEnter":"calendar__daysEnter_tpmkv","daysEnterActive":"calendar__daysEnterActive_tpmkv","daysExit":"calendar__daysExit_tpmkv","daysExitActive":"calendar__daysExitActive_tpmkv","right":"calendar__right_tpmkv"};
 require('./index.css');
 
 const DaysTable = ({ weeks = [], activeMonth = new Date(), highlighted, selectedFrom, selectedTo, getDayProps, }) => {

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

@@ -1,4 +1,4 @@
-/* hash: jnp63 */
+/* hash: 127ld */
 :root {
     --color-static-graphic-solitude: #e8f2fe;
 }
@@ -60,38 +60,38 @@
     /* marker */
     --calendar-marker-background: var(--color-light-graphic-tertiary);
 }
-.calendar__daysTable_1o7rb {
+.calendar__daysTable_tpmkv {
     border-collapse: separate;
     border-spacing: 0;
     position: relative
 }
-.calendar__daysTable_1o7rb th {
+.calendar__daysTable_tpmkv th {
         padding: 0;
     }
-.calendar__daysTable_1o7rb td {
+.calendar__daysTable_tpmkv td {
         padding: var(--gap-2xs) 0 0
     }
-.calendar__daysTable_1o7rb td:first-child .calendar__transitLeft_1o7rb {
+.calendar__daysTable_tpmkv td:first-child .calendar__transitLeft_tpmkv {
             background: linear-gradient(
                 270deg,
                 var(--calendar-range-background) 0%,
                 var(--color-light-specialbg-nulled) 100%
             )
         }
-.calendar__daysTable_1o7rb td:first-child .calendar__transitLeft_1o7rb:after {
+.calendar__daysTable_tpmkv td:first-child .calendar__transitLeft_tpmkv:after {
                 display: none;
             }
-.calendar__daysTable_1o7rb td:last-child .calendar__transitRight_1o7rb {
+.calendar__daysTable_tpmkv td:last-child .calendar__transitRight_tpmkv {
             background: linear-gradient(
                 270deg,
                 var(--color-light-specialbg-nulled) 0%,
                 var(--calendar-range-background) 100%
             )
         }
-.calendar__daysTable_1o7rb td:last-child .calendar__transitRight_1o7rb:after {
+.calendar__daysTable_tpmkv td:last-child .calendar__transitRight_tpmkv:after {
                 display: none;
             }
-.calendar__dayName_1o7rb {
+.calendar__dayName_tpmkv {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
@@ -100,11 +100,11 @@
     color: var(--color-light-text-secondary)
 }
 @media (max-width: 374px) {
-.calendar__dayName_1o7rb {
+.calendar__dayName_tpmkv {
         height: 36px
 }
     }
-.calendar__day_1o7rb {
+.calendar__day_tpmkv {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -121,12 +121,12 @@
     color: var(--color-light-text-primary)
 }
 @media (max-width: 374px) {
-.calendar__day_1o7rb {
+.calendar__day_tpmkv {
         width: 36px;
         height: 36px
 }
     }
-.calendar__day_1o7rb.calendar__event_1o7rb:before {
+.calendar__day_tpmkv.calendar__event_tpmkv:before {
             content: '';
             display: block;
             position: absolute;
@@ -136,10 +136,10 @@
             border-radius: var(--border-radius-circle);
             background: var(--calendar-marker-background);
         }
-.calendar__day_1o7rb.calendar__today_1o7rb {
+.calendar__day_tpmkv.calendar__today_tpmkv {
         font-weight: bold
     }
-.calendar__day_1o7rb.calendar__today_1o7rb span:after {
+.calendar__day_tpmkv.calendar__today_tpmkv span:after {
             content: '';
             border: 1px solid var(--calendar-today-border-color);
             position: absolute;
@@ -150,32 +150,32 @@
             border-radius: var(--calendar-day-border-radius);
             box-sizing: border-box;
         }
-.calendar__day_1o7rb.calendar__highlighted_1o7rb {
+.calendar__day_tpmkv.calendar__highlighted_tpmkv {
         color: var(--calendar-highlighted-color);
         background: var(--calendar-highlighted-background);
     }
-.calendar__day_1o7rb.calendar__disabled_1o7rb {
+.calendar__day_tpmkv.calendar__disabled_tpmkv {
         pointer-events: none;
         color: var(--calendar-disabled-color);
 
         background: var(--calendar-disabled-background);
         cursor: default;
     }
-.calendar__day_1o7rb.calendar__range_1o7rb {
+.calendar__day_tpmkv.calendar__range_tpmkv {
         color: var(--calendar-range-color);
         background: var(--calendar-range-background);
         border-radius: 0;
     }
-.calendar__day_1o7rb.calendar__selected_1o7rb,
-    .calendar__day_1o7rb.calendar__disabled_1o7rb.calendar__selected_1o7rb {
+.calendar__day_tpmkv.calendar__selected_tpmkv,
+    .calendar__day_tpmkv.calendar__disabled_tpmkv.calendar__selected_tpmkv {
         color: var(--calendar-selected-color);
         background: var(--calendar-selected-background);
         cursor: default;
     }
-.calendar__day_1o7rb.calendar__rangeStart_1o7rb {
+.calendar__day_tpmkv.calendar__rangeStart_tpmkv {
         cursor: pointer;
     }
-.calendar__day_1o7rb.calendar__firstDay_1o7rb:after, .calendar__day_1o7rb.calendar__lastDay_1o7rb:after {
+.calendar__day_tpmkv.calendar__firstDay_tpmkv:after, .calendar__day_tpmkv.calendar__lastDay_tpmkv:after {
             transition: opacity 0.2s ease;
             content: '';
             position: absolute;
@@ -185,7 +185,7 @@
             opacity: 0;
             pointer-events: none;
         }
-.calendar__day_1o7rb.calendar__firstDay_1o7rb:after {
+.calendar__day_tpmkv.calendar__firstDay_tpmkv:after {
             right: 100%;
             background: linear-gradient(
                 270deg,
@@ -193,7 +193,7 @@
                 var(--color-light-specialbg-nulled) 100%
             );
         }
-.calendar__day_1o7rb.calendar__lastDay_1o7rb:after {
+.calendar__day_tpmkv.calendar__lastDay_tpmkv:after {
             left: 100%;
             background: linear-gradient(
                 270deg,
@@ -201,52 +201,52 @@
                 var(--calendar-range-background) 100%
             );
         }
-.calendar__day_1o7rb.calendar__transitLeft_1o7rb:after, .calendar__day_1o7rb.calendar__transitRight_1o7rb:after {
+.calendar__day_tpmkv.calendar__transitLeft_tpmkv:after, .calendar__day_tpmkv.calendar__transitRight_tpmkv:after {
             opacity: 1;
         }
-.calendar__day_1o7rb:focus {
+.calendar__day_tpmkv:focus {
         z-index: 1;
     }
-.calendar__left_1o7rb .calendar__daysEnter_1o7rb {
+.calendar__left_tpmkv .calendar__daysEnter_tpmkv {
         transform: translateX(var(--calendar-day-size));
     }
-.calendar__left_1o7rb .calendar__daysEnterActive_1o7rb {
+.calendar__left_tpmkv .calendar__daysEnterActive_tpmkv {
         transform: translateX(0%);
     }
-.calendar__left_1o7rb .calendar__daysExit_1o7rb {
+.calendar__left_tpmkv .calendar__daysExit_tpmkv {
         transform: translateX(0%);
     }
-.calendar__left_1o7rb .calendar__daysExitActive_1o7rb {
+.calendar__left_tpmkv .calendar__daysExitActive_tpmkv {
         transform: translateX(calc(-1 * var(--calendar-day-size)));
     }
-.calendar__right_1o7rb .calendar__daysEnter_1o7rb {
+.calendar__right_tpmkv .calendar__daysEnter_tpmkv {
         transform: translateX(calc(-1 * var(--calendar-day-size)));
     }
-.calendar__right_1o7rb .calendar__daysEnterActive_1o7rb {
+.calendar__right_tpmkv .calendar__daysEnterActive_tpmkv {
         transform: translateX(0%);
     }
-.calendar__right_1o7rb .calendar__daysExit_1o7rb {
+.calendar__right_tpmkv .calendar__daysExit_tpmkv {
         transform: translateX(0%);
     }
-.calendar__right_1o7rb .calendar__daysExitActive_1o7rb {
+.calendar__right_tpmkv .calendar__daysExitActive_tpmkv {
         transform: translateX(var(--calendar-day-size));
     }
-.calendar__daysEnter_1o7rb {
+.calendar__daysEnter_tpmkv {
     opacity: 0;
     position: absolute;
     left: 0;
 }
-.calendar__daysEnterActive_1o7rb {
+.calendar__daysEnterActive_tpmkv {
     opacity: 1;
 }
-.calendar__daysExit_1o7rb {
+.calendar__daysExit_tpmkv {
     pointer-events: none;
     opacity: 1;
 }
-.calendar__daysExitActive_1o7rb {
+.calendar__daysExitActive_tpmkv {
     opacity: 0;
 }
-.calendar__daysEnterActive_1o7rb,
-.calendar__daysExitActive_1o7rb {
+.calendar__daysEnterActive_tpmkv,
+.calendar__daysExitActive_tpmkv {
     transition: opacity 300ms, transform 300ms;
 }

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"header":"calendar__header_os3r8","withShadow":"calendar__withShadow_os3r8","monthOnly":"calendar__monthOnly_os3r8"};
+var styles = {"header":"calendar__header_1vkbd","withShadow":"calendar__withShadow_1vkbd","monthOnly":"calendar__monthOnly_1vkbd"};
 require('./index.css');
 
 const Header = ({ view = 'full', withShadow, children }) => {

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

@@ -1,4 +1,4 @@
-/* hash: b4lh5 */
+/* hash: 1wp43 */
 :root {
     --shadow-s: 0 0 8px rgba(11, 31, 53, 0.04), 0 4px 8px rgba(11, 31, 53, 0.08);
 
@@ -35,15 +35,15 @@
 
     /* marker */
 }
-.calendar__header_os3r8 {
+.calendar__header_1vkbd {
     width: 100%;
     box-sizing: border-box;
     padding: var(--calendar-header-paddings);
     transition: box-shadow 0.2s ease;
 }
-.calendar__withShadow_os3r8 {
+.calendar__withShadow_1vkbd {
     box-shadow: var(--shadow-s);
 }
-.calendar__monthOnly_os3r8 {
+.calendar__monthOnly_1vkbd {
     padding: var(--calendar-month-only-header-paddings);
 }

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

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

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

@@ -1,4 +1,4 @@
-/* hash: 10rsp */
+/* hash: 1jbow */
 :root {
 
     /* Hard */
@@ -32,7 +32,7 @@
 
     /* marker */
 }
-.calendar__monthsTable_vx2lh {
+.calendar__monthsTable_1k9dx {
     display: flex;
     flex-wrap: wrap;
     width: 318px;
@@ -40,20 +40,20 @@
     justify-content: flex-start
 }
 @media (max-width: 374px) {
-.calendar__monthsTable_vx2lh {
+.calendar__monthsTable_1k9dx {
         /* 2 кнопки по 125px + 2 отступа по 6px */
         width: 262px
 }
     }
-.calendar__button_vx2lh {
+.calendar__button_1k9dx {
     width: var(--calendar-selector-button-width);
     margin: 0 3px var(--gap-xs)
 }
-.calendar__button_vx2lh:nth-last-child(-n + 3) {
+.calendar__button_1k9dx:nth-last-child(-n + 3) {
         margin-bottom: 0;
     }
 @media (max-width: 374px) {
-.calendar__button_vx2lh {
+.calendar__button_1k9dx {
         margin: 0 3px var(--gap-2xs);
         width: 125px;
         height: 36px

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

@@ -6,7 +6,7 @@ import { monthName } from '../../utils.js';
 import { SelectButton } from '../select-button/Component.js';
 import { formatPeriod, shiftValues } from './utils.js';
 
-var styles = {"component":"calendar__component_1co7o","month":"calendar__month_1co7o","year":"calendar__year_1co7o","buttonContent":"calendar__buttonContent_1co7o","period":"calendar__period_1co7o","upDownIcon":"calendar__upDownIcon_1co7o","arrow":"calendar__arrow_1co7o","full":"calendar__full_1co7o"};
+var styles = {"component":"calendar__component_vi43g","month":"calendar__month_vi43g","year":"calendar__year_vi43g","buttonContent":"calendar__buttonContent_vi43g","period":"calendar__period_vi43g","upDownIcon":"calendar__upDownIcon_vi43g","arrow":"calendar__arrow_vi43g","full":"calendar__full_vi43g"};
 require('./index.css');
 
 const PeriodSlider = ({ value, view = 'month-only', periodType = 'month', className, periodFormatter = formatPeriod, prevArrowDisabled = false, nextArrowDisabled = false, hideDisabledArrows = false, onPrevArrowClick = () => null, onNextArrowClick = () => null, onMonthClick, onYearClick, dataTestId, }) => {

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

@@ -1,4 +1,4 @@
-/* hash: 17qtl */
+/* hash: 1l7f0 */
 :root {
 
     /* Hard */
@@ -39,39 +39,39 @@
 
     /* marker */
 }
-.calendar__component_1co7o {
+.calendar__component_vi43g {
     position: relative;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
 }
-.calendar__month_1co7o {
+.calendar__month_vi43g {
     width: 131px
 }
 @media (max-width: 374px) {
-.calendar__month_1co7o {
+.calendar__month_vi43g {
         width: auto;
         flex-grow: 1
 }
     }
-.calendar__year_1co7o {
+.calendar__year_vi43g {
     width: 105px;
 
     margin-left: var(--gap-xs)
 }
 @media (max-width: 374px) {
-.calendar__year_1co7o {
+.calendar__year_vi43g {
         width: 90px
 }
     }
-.calendar__buttonContent_1co7o {
+.calendar__buttonContent_vi43g {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }
-.calendar__period_1co7o {
+.calendar__period_vi43g {
     font-family: var(--calendar-month-only-header-font-family);
     font-size: var(--calendar-month-only-header-font-size);
     font-weight: var(--calendar-month-only-header-font-weight);
@@ -79,12 +79,12 @@
     text-align: center
 }
 @media (max-width: 374px) {
-.calendar__period_1co7o {
+.calendar__period_vi43g {
         width: auto;
         flex-grow: 1
 }
     }
-.calendar__upDownIcon_1co7o {
+.calendar__upDownIcon_vi43g {
     display: block;
     background: var(--calendar-select-icon-background);
     width: 24px;
@@ -92,29 +92,29 @@
     margin-left: var(--gap-xs)
 }
 @media (max-width: 374px) {
-.calendar__upDownIcon_1co7o {
+.calendar__upDownIcon_vi43g {
         margin-left: auto
 }
     }
-.calendar__arrow_1co7o {
+.calendar__arrow_vi43g {
     position: absolute;
     width: 24px;
     height: 24px;
     top: 8px;
     background: var(--calendar-arrow-background)
 }
-.calendar__arrow_1co7o:disabled {
+.calendar__arrow_vi43g:disabled {
         opacity: 0.3;
     }
-.calendar__arrow_1co7o:first-child {
+.calendar__arrow_vi43g:first-child {
         left: 0;
     }
-.calendar__arrow_1co7o:last-child {
+.calendar__arrow_vi43g:last-child {
         right: 0;
         transform: rotateY(180deg);
     }
 @media (max-width: 374px) {
-.calendar__full_1co7o .calendar__arrow_1co7o {
+.calendar__full_vi43g .calendar__arrow_vi43g {
         display: none
 }
     }

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

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 import cn from 'classnames';
 import { Button } from '../../../../button/modern';
 
-var styles = {"button":"calendar__button_1ky1p","filled":"calendar__filled_1ky1p","outlined":"calendar__outlined_1ky1p","selected":"calendar__selected_1ky1p"};
+var styles = {"button":"calendar__button_tgl82","filled":"calendar__filled_tgl82","outlined":"calendar__outlined_tgl82","selected":"calendar__selected_tgl82"};
 require('./index.css');
 
 const SelectButton = forwardRef(({ className, children, view = 'default', ...restProps }, ref) => (React.createElement(Button, Object.assign({}, restProps, { ref: ref, view: 'ghost', size: 'xs', className: cn(styles.button, styles[view], className) }), children)));

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

@@ -1,4 +1,4 @@
-/* hash: 12olt */
+/* hash: p80e8 */
 :root {
     --color-light-bg-primary-inverted: #0b1f35;
     --color-light-bg-tertiary: #e7e9eb;
@@ -42,7 +42,7 @@
 
     /* marker */
 }
-.calendar__button_1ky1p {
+.calendar__button_tgl82 {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -53,28 +53,28 @@
     background-color: transparent;
     border-radius: var(--border-radius-s)
 }
-.calendar__button_1ky1p:not(:disabled):hover {
+.calendar__button_tgl82:not(:disabled):hover {
         background-color: var(--color-light-bg-tertiary);
         color: var(--color-light-text-primary);
     }
-.calendar__button_1ky1p.calendar__filled_1ky1p {
+.calendar__button_tgl82.calendar__filled_tgl82 {
         background-color: var(--color-light-bg-tertiary)
     }
-.calendar__button_1ky1p.calendar__filled_1ky1p:not(:disabled):hover {
+.calendar__button_tgl82.calendar__filled_tgl82:not(:disabled):hover {
             background-color: var(--color-light-bg-tertiary-shade-7);
         }
-.calendar__button_1ky1p.calendar__outlined_1ky1p {
+.calendar__button_tgl82.calendar__outlined_tgl82 {
         border: 1px solid var(--calendar-selector-button-outline-border-color);
     }
-.calendar__button_1ky1p.calendar__selected_1ky1p,
-    .calendar__button_1ky1p.calendar__selected_1ky1p:disabled {
+.calendar__button_tgl82.calendar__selected_tgl82,
+    .calendar__button_tgl82.calendar__selected_tgl82:disabled {
         background-color: var(--color-light-bg-primary-inverted);
         color: var(--color-light-text-primary-inverted)
     }
-.calendar__button_1ky1p.calendar__selected_1ky1p:not(:disabled):hover, .calendar__button_1ky1p.calendar__selected_1ky1p:disabled:not(:disabled):hover {
+.calendar__button_tgl82.calendar__selected_tgl82:not(:disabled):hover, .calendar__button_tgl82.calendar__selected_tgl82:disabled:not(:disabled):hover {
             background-color: var(--color-light-bg-primary-inverted);
             color: var(--color-light-text-primary-inverted);
         }
-.calendar__button_1ky1p > * {
+.calendar__button_tgl82 > * {
         flex-grow: 1;
     }

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

@@ -4,7 +4,7 @@ import { isSameYear, isThisYear } from 'date-fns';
 import '../../../../button/modern';
 import { SelectButton } from '../select-button/Component.js';
 
-var styles = {"yearsTable":"calendar__yearsTable_ea0zr","inner":"calendar__inner_ea0zr","button":"calendar__button_ea0zr"};
+var styles = {"yearsTable":"calendar__yearsTable_1x176","inner":"calendar__inner_1x176","button":"calendar__button_1x176"};
 require('./index.css');
 
 const YearsTable = ({ selectedYear, years = [], getYearProps, onScroll, }) => {