@alfalab/core-components 23.6.0 → 23.8.1

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

@@ -1,4 +1,4 @@
-/* hash: 11gfm */
+/* hash: g8jey */
 :root {
     --shadow-s: 0 0 8px rgba(11, 31, 53, 0.04), 0 4px 8px rgba(11, 31, 53, 0.08);
 
@@ -9,27 +9,17 @@
     /* Hard up */
 }
 :root {
-    --gap-xs: 8px;
     --gap-s: 12px;
     --gap-m: 16px;
     --gap-2xl: 32px;
 }
-:root {
-    --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
-        sans-serif;
-}
 :root {
 
     /* Кнопки выбора месяцев и годов */
 
     /* Шапка */
-    --calendar-arrow-background: url('https://alfabank.gcdn.co/icons/icon_arrow-left_m_black.svg');
-    --calendar-select-icon-background: url('https://alfabank.gcdn.co/icons/icon_arrow-select_m_black.svg');
     --calendar-header-paddings: var(--gap-m) var(--gap-m) var(--gap-s);
     --calendar-month-only-header-paddings: var(--gap-m) var(--gap-2xl) var(--gap-s);
-    --calendar-month-only-header-font-family: var(--font-family-system);
-    --calendar-month-only-header-font-size: 16px;
-    --calendar-month-only-header-font-weight: 400;
 
     /* День */
 
@@ -45,93 +35,15 @@
 
     /* marker */
 }
-.calendar__header_1nie7 {
+.calendar__header_yjnz1 {
     width: 100%;
     box-sizing: border-box;
     padding: var(--calendar-header-paddings);
     transition: box-shadow 0.2s ease;
 }
-.calendar__withShadow_1nie7 {
+.calendar__withShadow_yjnz1 {
     box-shadow: var(--shadow-s);
 }
-.calendar__inner_1nie7 {
-    position: relative;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center
-}
-@media (max-width: 374px) {
-.calendar__inner_1nie7 {
-        justify-content: space-between;
-        width: 256px;
-        margin: 0 auto
-}
-    }
-.calendar__month_1nie7 {
-    width: 131px
-}
-@media (max-width: 374px) {
-.calendar__month_1nie7 {
-        width: auto;
-        flex-grow: 1
-}
-    }
-.calendar__year_1nie7 {
-    width: 105px;
-
-    margin-left: var(--gap-xs)
-}
-@media (max-width: 374px) {
-.calendar__year_1nie7 {
-        width: 90px
-}
-    }
-.calendar__buttonContent_1nie7 {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-.calendar__monthOnly_1nie7 {
-    padding: var(--calendar-month-only-header-paddings)
-}
-.calendar__monthOnly_1nie7 .calendar__month_1nie7 {
-        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);
-        line-height: 24px;
-
-        width: auto;
-    }
-.calendar__upDownIcon_1nie7 {
-    display: block;
-    background: var(--calendar-select-icon-background);
-    width: 24px;
-    height: 24px;
-    margin-left: var(--gap-xs)
-}
-@media (max-width: 374px) {
-.calendar__upDownIcon_1nie7 {
-        margin-left: auto
-}
-    }
-.calendar__arrow_1nie7 {
-    position: absolute;
-    width: 24px;
-    height: 24px;
-    top: 8px;
-    background: var(--calendar-arrow-background)
-}
-.calendar__arrow_1nie7:first-child {
-        left: 0;
-    }
-.calendar__arrow_1nie7:last-child {
-        right: 0;
-        transform: rotateY(180deg);
-    }
-@media (max-width: 374px) {
-.calendar__arrow_1nie7 {
-        display: none
+.calendar__monthOnly_yjnz1 {
+    padding: var(--calendar-month-only-header-paddings);
 }
-    }

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

@@ -1,6 +1,3 @@
-import '../../tslib.es6-1e88205b.js';
 import 'react';
 import 'classnames';
-import '../../../../button/esm';
-import '../select-button/Component.js';
 export { Header } from './Component.js';

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

@@ -1,12 +1,12 @@
-import { _ as __assign } from '../../tslib.es6-1e88205b.js';
+import { _ as __assign } from '../../tslib.es6-39f97183.js';
 import React, { useCallback } from 'react';
 import 'classnames';
 import { isSameMonth, isThisMonth } from 'date-fns';
 import '../../../../button/esm';
-import { SelectButton } from '../select-button/Component.js';
 import { monthName } from '../../utils.js';
+import { SelectButton } from '../select-button/Component.js';
 
-var styles = {"monthsTable":"calendar__monthsTable_h40o5","button":"calendar__button_h40o5"};
+var styles = {"monthsTable":"calendar__monthsTable_nofm8","button":"calendar__button_nofm8"};
 require('./index.css');
 
 var MonthsTable = function (_a) {

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

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

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

@@ -1,8 +1,8 @@
-import '../../tslib.es6-1e88205b.js';
+import '../../tslib.es6-39f97183.js';
 import 'react';
 import 'classnames';
 import 'date-fns';
 import '../../../../button/esm';
-import '../select-button/Component.js';
 import '../../utils.js';
+import '../select-button/Component.js';
 export { MonthsTable } from './Component.js';

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

@@ -0,0 +1,68 @@
+import { FC, MouseEvent } from 'react';
+type PeriodType = 'range' | 'day' | 'week' | 'month' | 'quarter' | 'year';
+type PeriodSliderProps = {
+    /**
+     * Активная дата или период
+     */
+    value: Date | [Date, Date];
+    /**
+     * Вид шапки — с кнопками выбора года и месяца или только период
+     */
+    view?: 'full' | 'period';
+    /**
+     * Тип периода
+     */
+    periodType?: PeriodType;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Отключает кнопку назад
+     */
+    prevArrowDisabled?: boolean;
+    /**
+     * Отключает кнопку вперед
+     */
+    nextArrowDisabled?: boolean;
+    /**
+     * Скрывает заблокированные кнопки
+     */
+    hideDisabledArrows?: boolean;
+    /**
+     * Функция для форматирование выбранного периода
+     */
+    periodFormatter?: (valueFrom: Date, valueTo: Date, periodType: PeriodType) => string;
+    /**
+     * Обработчик нажатия кнопки переключения на назад
+     */
+    onPrevArrowClick?: (event: MouseEvent<HTMLButtonElement>, payload: {
+        value: Date;
+        valueFrom: Date;
+        valueTo: Date;
+        periodType: PeriodType;
+    }) => void;
+    /**
+     * Обработчик нажатия кнопки переключения на вперед
+     */
+    onNextArrowClick?: (event: MouseEvent<HTMLButtonElement>, payload: {
+        value: Date;
+        valueFrom: Date;
+        valueTo: Date;
+        periodType: PeriodType;
+    }) => void;
+    /**
+     * Обработчик нажатия на кнопку месяца
+     */
+    onMonthClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Обработчик нажатия на кнопку года
+     */
+    onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const PeriodSlider: FC<PeriodSliderProps>;
+export { PeriodType, PeriodSliderProps, PeriodSlider };

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

@@ -0,0 +1,66 @@
+import '../../tslib.es6-39f97183.js';
+import React from 'react';
+import cn from 'classnames';
+import { startOfWeek, endOfWeek } from 'date-fns';
+import { Button } from '../../../../button/esm';
+import { monthName } from '../../utils.js';
+import { SelectButton } from '../select-button/Component.js';
+import { formatPeriod, shiftValues } from './utils.js';
+
+var styles = {"component":"calendar__component_1mfrw","month":"calendar__month_1mfrw","year":"calendar__year_1mfrw","buttonContent":"calendar__buttonContent_1mfrw","period":"calendar__period_1mfrw","upDownIcon":"calendar__upDownIcon_1mfrw","arrow":"calendar__arrow_1mfrw","full":"calendar__full_1mfrw"};
+require('./index.css');
+
+var PeriodSlider = function (_a) {
+    var _b, _c;
+    var value = _a.value, _d = _a.view, view = _d === void 0 ? 'month-only' : _d, _e = _a.periodType, periodType = _e === void 0 ? 'month' : _e, className = _a.className, _f = _a.periodFormatter, periodFormatter = _f === void 0 ? formatPeriod : _f, _g = _a.prevArrowDisabled, prevArrowDisabled = _g === void 0 ? false : _g, _h = _a.nextArrowDisabled, nextArrowDisabled = _h === void 0 ? false : _h, _j = _a.hideDisabledArrows, hideDisabledArrows = _j === void 0 ? false : _j, _k = _a.onPrevArrowClick, onPrevArrowClick = _k === void 0 ? function () { return null; } : _k, _l = _a.onNextArrowClick, onNextArrowClick = _l === void 0 ? function () { return null; } : _l, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, dataTestId = _a.dataTestId;
+    var valueFrom;
+    var valueTo;
+    if (Array.isArray(value)) {
+        valueFrom = value[0], valueTo = value[1];
+    }
+    else {
+        _b = [value, value], valueFrom = _b[0], valueTo = _b[1];
+        if (periodType === 'week') {
+            valueFrom = startOfWeek(valueFrom, { weekStartsOn: 1 });
+            valueTo = endOfWeek(valueFrom, { weekStartsOn: 1 });
+        }
+    }
+    var month = monthName(valueFrom);
+    var year = valueFrom.getFullYear().toString();
+    var showPrevButton = !(hideDisabledArrows && prevArrowDisabled);
+    var showNextButton = !(hideDisabledArrows && nextArrowDisabled);
+    var handleNextArrowClick = function (event) {
+        var newValues = shiftValues(valueFrom, valueTo, periodType, 'next');
+        onNextArrowClick(event, {
+            value: newValues.valueFrom,
+            valueFrom: newValues.valueFrom,
+            valueTo: newValues.valueTo,
+            periodType: periodType,
+        });
+    };
+    var handlePrevArrowClick = function (event) {
+        var newValues = shiftValues(valueFrom, valueTo, periodType, 'prev');
+        onPrevArrowClick(event, {
+            value: newValues.valueFrom,
+            valueFrom: newValues.valueFrom,
+            valueTo: newValues.valueTo,
+            periodType: periodType,
+        });
+    };
+    return (React.createElement("div", { className: cn(styles.component, className, (_c = {},
+            _c[styles.full] = view === 'full',
+            _c)), "aria-live": 'polite', "data-test-id": dataTestId },
+        showPrevButton && (React.createElement(Button, { view: 'ghost', className: styles.arrow, onClick: handlePrevArrowClick, disabled: prevArrowDisabled, "aria-label": '\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434' })),
+        view === 'full' ? (React.createElement(React.Fragment, null,
+            React.createElement(SelectButton, { view: 'filled', className: styles.month, onClick: onMonthClick },
+                React.createElement("span", { className: styles.buttonContent },
+                    month,
+                    React.createElement("span", { className: styles.upDownIcon }))),
+            React.createElement(SelectButton, { view: 'filled', className: styles.year, onClick: onYearClick },
+                React.createElement("span", { className: styles.buttonContent },
+                    year,
+                    React.createElement("span", { className: styles.upDownIcon }))))) : (React.createElement("span", { className: styles.period }, periodFormatter(valueFrom, valueTo, periodType))),
+        showNextButton && (React.createElement(Button, { view: 'ghost', className: styles.arrow, onClick: handleNextArrowClick, disabled: nextArrowDisabled, "aria-label": '\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434' }))));
+};
+
+export { PeriodSlider };

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

@@ -0,0 +1,120 @@
+/* hash: aczny */
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-xs: 8px;
+}
+:root {
+    --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
+        sans-serif;
+}
+:root {
+
+    /* Кнопки выбора месяцев и годов */
+
+    /* Шапка */
+    --calendar-arrow-background: url('https://alfabank.gcdn.co/icons/icon_arrow-left_m_black.svg');
+    --calendar-select-icon-background: url('https://alfabank.gcdn.co/icons/icon_arrow-select_m_black.svg');
+    --calendar-month-only-header-font-family: var(--font-family-system);
+    --calendar-month-only-header-font-size: 16px;
+    --calendar-month-only-header-font-weight: 400;
+
+    /* День */
+
+    /* today */
+
+    /* highlighted */
+
+    /* range */
+
+    /* selected */
+
+    /* disabled */
+
+    /* marker */
+}
+.calendar__component_1mfrw {
+    position: relative;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.calendar__month_1mfrw {
+    width: 131px
+}
+@media (max-width: 374px) {
+.calendar__month_1mfrw {
+        width: auto;
+        flex-grow: 1
+}
+    }
+.calendar__year_1mfrw {
+    width: 105px;
+
+    margin-left: var(--gap-xs)
+}
+@media (max-width: 374px) {
+.calendar__year_1mfrw {
+        width: 90px
+}
+    }
+.calendar__buttonContent_1mfrw {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.calendar__period_1mfrw {
+    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);
+    line-height: 24px;
+    text-align: center
+}
+@media (max-width: 374px) {
+.calendar__period_1mfrw {
+        width: auto;
+        flex-grow: 1
+}
+    }
+.calendar__upDownIcon_1mfrw {
+    display: block;
+    background: var(--calendar-select-icon-background);
+    width: 24px;
+    height: 24px;
+    margin-left: var(--gap-xs)
+}
+@media (max-width: 374px) {
+.calendar__upDownIcon_1mfrw {
+        margin-left: auto
+}
+    }
+.calendar__arrow_1mfrw {
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    top: 8px;
+    background: var(--calendar-arrow-background)
+}
+.calendar__arrow_1mfrw:disabled {
+        opacity: 0.3;
+    }
+.calendar__arrow_1mfrw:first-child {
+        left: 0;
+    }
+.calendar__arrow_1mfrw:last-child {
+        right: 0;
+        transform: rotateY(180deg);
+    }
+@media (max-width: 374px) {
+.calendar__full_1mfrw .calendar__arrow_1mfrw {
+        display: none
+}
+    }

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

@@ -0,0 +1 @@
+export * from "./Component";

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

@@ -0,0 +1,9 @@
+import '../../tslib.es6-39f97183.js';
+import 'react';
+import 'classnames';
+import 'date-fns';
+import '../../../../button/esm';
+import '../../utils.js';
+import '../select-button/Component.js';
+import './utils.js';
+export { PeriodSlider } from './Component.js';

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

@@ -0,0 +1,7 @@
+import { PeriodType } from "./index";
+declare const formatPeriod: (valueFrom: Date, valueTo: Date, periodType: PeriodType) => string;
+declare const shiftValues: (valueFrom: Date, valueTo: Date, periodType: PeriodType, direction: "prev" | "next") => {
+    valueFrom: Date;
+    valueTo: Date;
+};
+export { formatPeriod, shiftValues };

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

@@ -0,0 +1,58 @@
+import { isToday, isYesterday, getYear, getQuarter, startOfYear, addYears, endOfYear, startOfQuarter, addQuarters, endOfQuarter, startOfMonth, addMonths, endOfMonth, startOfWeek, addWeeks, endOfWeek, addDays } from 'date-fns';
+import { formatDate, monthName } from '../../utils.js';
+
+var formatPeriod = function (valueFrom, valueTo, periodType) {
+    if (periodType === 'day') {
+        if (isToday(valueFrom))
+            return 'Сегодня';
+        if (isYesterday(valueFrom))
+            return 'Вчера';
+        return formatDate(valueFrom);
+    }
+    if (periodType === 'month') {
+        var year = getYear(valueFrom);
+        return year === getYear(new Date())
+            ? monthName(valueFrom)
+            : monthName(valueFrom) + " " + getYear(valueFrom);
+    }
+    if (periodType === 'quarter') {
+        return getQuarter(valueFrom) + " \u043A\u0432\u0430\u0440\u0442\u0430\u043B " + getYear(valueFrom);
+    }
+    if (periodType === 'year') {
+        return getYear(valueFrom) + " \u0433\u043E\u0434";
+    }
+    return formatDate(valueFrom) + " - " + formatDate(valueTo);
+};
+var shiftValues = function (valueFrom, valueTo, periodType, direction) {
+    var newValueFrom = valueFrom;
+    var newValueTo = valueTo;
+    var amount = direction === 'next' ? 1 : -1;
+    switch (periodType) {
+        case 'day':
+            newValueFrom = addDays(valueFrom, amount);
+            newValueTo = addDays(valueFrom, amount);
+            break;
+        case 'week':
+            newValueFrom = startOfWeek(addWeeks(valueFrom, amount), { weekStartsOn: 1 });
+            newValueTo = endOfWeek(newValueFrom, { weekStartsOn: 1 });
+            break;
+        case 'month':
+            newValueFrom = startOfMonth(addMonths(valueFrom, amount));
+            newValueTo = endOfMonth(newValueFrom);
+            break;
+        case 'quarter':
+            newValueFrom = startOfQuarter(addQuarters(valueFrom, amount));
+            newValueTo = endOfQuarter(newValueFrom);
+            break;
+        case 'year':
+            newValueFrom = startOfYear(addYears(valueFrom, amount));
+            newValueTo = endOfYear(newValueFrom);
+            break;
+    }
+    return {
+        valueFrom: newValueFrom,
+        valueTo: newValueTo,
+    };
+};
+
+export { formatPeriod, shiftValues };

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

@@ -1,9 +1,9 @@
-import { a as __rest, _ as __assign } from '../../tslib.es6-1e88205b.js';
+import { a as __rest, _ as __assign } from '../../tslib.es6-39f97183.js';
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
 import { Button } from '../../../../button/esm';
 
-var styles = {"button":"calendar__button_1mmmj","filled":"calendar__filled_1mmmj","outlined":"calendar__outlined_1mmmj","selected":"calendar__selected_1mmmj"};
+var styles = {"button":"calendar__button_1uplx","filled":"calendar__filled_1uplx","outlined":"calendar__outlined_1uplx","selected":"calendar__selected_1uplx"};
 require('./index.css');
 
 var SelectButton = forwardRef(function (_a, ref) {

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

@@ -1,4 +1,4 @@
-/* hash: 1t0fy */
+/* hash: 17sjr */
 :root {
     --color-light-bg-primary-inverted: #0b1f35;
     --color-light-bg-tertiary: #e7e9eb;
@@ -42,7 +42,7 @@
 
     /* marker */
 }
-.calendar__button_1mmmj {
+.calendar__button_1uplx {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -53,28 +53,28 @@
     background-color: transparent;
     border-radius: var(--border-radius-s)
 }
-.calendar__button_1mmmj:not(:disabled):hover {
+.calendar__button_1uplx:not(:disabled):hover {
         background-color: var(--color-light-bg-tertiary);
         color: var(--color-light-text-primary);
     }
-.calendar__button_1mmmj.calendar__filled_1mmmj {
+.calendar__button_1uplx.calendar__filled_1uplx {
         background-color: var(--color-light-bg-tertiary)
     }
-.calendar__button_1mmmj.calendar__filled_1mmmj:not(:disabled):hover {
+.calendar__button_1uplx.calendar__filled_1uplx:not(:disabled):hover {
             background-color: var(--color-light-bg-tertiary-shade-7);
         }
-.calendar__button_1mmmj.calendar__outlined_1mmmj {
+.calendar__button_1uplx.calendar__outlined_1uplx {
         border: 1px solid var(--calendar-selector-button-outline-border-color);
     }
-.calendar__button_1mmmj.calendar__selected_1mmmj,
-    .calendar__button_1mmmj.calendar__selected_1mmmj:disabled {
+.calendar__button_1uplx.calendar__selected_1uplx,
+    .calendar__button_1uplx.calendar__selected_1uplx:disabled {
         background-color: var(--color-light-bg-primary-inverted);
         color: var(--color-light-text-primary-inverted)
     }
-.calendar__button_1mmmj.calendar__selected_1mmmj:not(:disabled):hover, .calendar__button_1mmmj.calendar__selected_1mmmj:disabled:not(:disabled):hover {
+.calendar__button_1uplx.calendar__selected_1uplx:not(:disabled):hover, .calendar__button_1uplx.calendar__selected_1uplx:disabled:not(:disabled):hover {
             background-color: var(--color-light-bg-primary-inverted);
             color: var(--color-light-text-primary-inverted);
         }
-.calendar__button_1mmmj > * {
+.calendar__button_1uplx > * {
         flex-grow: 1;
     }

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

@@ -1,4 +1,4 @@
-import '../../tslib.es6-1e88205b.js';
+import '../../tslib.es6-39f97183.js';
 import 'react';
 import 'classnames';
 import '../../../../button/esm';

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

@@ -1,11 +1,11 @@
-import { _ as __assign } from '../../tslib.es6-1e88205b.js';
+import { _ as __assign } from '../../tslib.es6-39f97183.js';
 import React, { useRef, useCallback, useLayoutEffect } from 'react';
 import 'classnames';
 import { isSameYear, isThisYear } from 'date-fns';
 import '../../../../button/esm';
 import { SelectButton } from '../select-button/Component.js';
 
-var styles = {"yearsTable":"calendar__yearsTable_1d0bg","inner":"calendar__inner_1d0bg","button":"calendar__button_1d0bg"};
+var styles = {"yearsTable":"calendar__yearsTable_o1l7k","inner":"calendar__inner_o1l7k","button":"calendar__button_o1l7k"};
 require('./index.css');
 
 var YearsTable = function (_a) {

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

@@ -1,4 +1,4 @@
-/* hash: 11bkq */
+/* hash: g3ojd */
 :root {
 
     /* Hard */
@@ -33,14 +33,14 @@
 
     /* marker */
 }
-.calendar__yearsTable_1d0bg {
+.calendar__yearsTable_o1l7k {
     overflow: auto;
     overflow-x: hidden;
     width: 100%;
     margin-bottom: var(--gap-m-neg);
     padding-top: 6px;
 }
-.calendar__inner_1d0bg {
+.calendar__inner_o1l7k {
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
@@ -50,15 +50,15 @@
     left: 13px;
     overflow: hidden;
 }
-.calendar__button_1d0bg {
+.calendar__button_o1l7k {
     width: var(--calendar-selector-button-width);
     margin: 0 3px var(--gap-xs)
 }
-.calendar__button_1d0bg:nth-last-child(-n + 3) {
+.calendar__button_o1l7k:nth-last-child(-n + 3) {
         margin-bottom: 0;
     }
 @media (max-width: 374px) {
-.calendar__button_1d0bg {
+.calendar__button_o1l7k {
         margin: 0 3px var(--gap-2xs);
 
         /* ширина блока, 16 боковые отступы, 2*6px между кнопками */