@alfalab/core-components 41.8.0 → 41.9.0-beta.1

package/day-of-month-picker/esm/useCalendar.js

@@ -0,0 +1,60 @@
+import { useState, useRef, useCallback } from 'react';
+import mergeRefs from 'react-merge-refs';
+
+function useCalendar(_a) {
+    var selected = _a.selected, onChange = _a.onChange;
+    var _b = useState(), highlighted = _b[0], setHighlighted = _b[1];
+    var dateRefs = useRef([]);
+    var rootRef = useRef(null);
+    var handleDayClick = function (event) {
+        if (event && onChange) {
+            onChange(event);
+        }
+    };
+    var handleDayMouseEnter = useCallback(function (event) {
+        var date = event.currentTarget.dataset.date;
+        setHighlighted(date ? +date : undefined);
+    }, []);
+    var handleDayMouseLeave = useCallback(function () {
+        setHighlighted(undefined);
+    }, []);
+    var handleDateRef = useCallback(function (node, index) {
+        dateRefs.current[index] = node;
+    }, []);
+    var focusableDayIsSet = false;
+    var getDayProps = function (day) {
+        var daySelected = selected === day;
+        var canFocus = daySelected;
+        // Если день не выбран — фокус должен начинаться с первого доступного дня месяца
+        if (!selected && !focusableDayIsSet) {
+            focusableDayIsSet = true;
+            canFocus = true;
+        }
+        return {
+            'data-date': day,
+            'aria-selected': daySelected,
+            tabIndex: canFocus ? 0 : -1,
+            onClick: handleDayClick,
+            selected: daySelected,
+            onMouseEnter: handleDayMouseEnter,
+            onMouseLeave: handleDayMouseLeave,
+            ref: function (node) {
+                handleDateRef(node, day - 1);
+            },
+        };
+    };
+    var getRootProps = function (_a) {
+        var _b = _a.ref, ref = _b === void 0 ? null : _b;
+        return ({
+            ref: mergeRefs([ref, rootRef]),
+            tabIndex: -1,
+        });
+    };
+    return {
+        getDayProps: getDayProps,
+        getRootProps: getRootProps,
+        highlighted: highlighted,
+    };
+}
+
+export { useCalendar };

package/day-of-month-picker/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./responsive";
+export { useCalendar } from "./useCalendar";
+export * from "./components/day-of-month-picker-mobile/index";
+export { DayOfMonthPickerDesktop as DayOfMonthPicker } from "./desktop";
+export type { DayOfMontPickerDesktopProps as DayOfMonthPickerProps } from "./desktop";

package/day-of-month-picker/index.js

@@ -0,0 +1,27 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component_responsive = require('./Component.responsive.js');
+var useCalendar = require('./useCalendar.js');
+var components_dayOfMonthPickerMobile_Component = require('./components/day-of-month-picker-mobile/Component.js');
+var Component_desktop = require('./Component.desktop.js');
+require('tslib');
+require('react');
+require('@alfalab/hooks');
+require('react-merge-refs');
+require('classnames');
+require('../modal/mobile');
+require('../icon-button');
+require('../input');
+require('../popover');
+require('../typography');
+require('@alfalab/icons-glyph/CalendarMIcon');
+require('./components/days-table/Component.js');
+require('react-transition-group');
+require('../button');
+
+
+
+exports.DayOfMonthPickerResponsive = Component_responsive.DayOfMonthPickerResponsive;
+exports.useCalendar = useCalendar.useCalendar;
+exports.DayOfMonthPickerMobile = components_dayOfMonthPickerMobile_Component.DayOfMonthPickerMobile;
+exports.DayOfMonthPicker = Component_desktop.DayOfMonthPickerDesktop;

package/day-of-month-picker/mobile.d.ts

@@ -0,0 +1 @@
+export * from "./components/day-of-month-picker-mobile/index";

package/day-of-month-picker/mobile.js

@@ -0,0 +1,22 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_dayOfMonthPickerMobile_Component = require('./components/day-of-month-picker-mobile/Component.js');
+require('react');
+require('classnames');
+require('../modal/mobile');
+require('./Component.desktop.js');
+require('tslib');
+require('../icon-button');
+require('../input');
+require('../popover');
+require('../typography');
+require('@alfalab/icons-glyph/CalendarMIcon');
+require('./components/days-table/Component.js');
+require('react-transition-group');
+require('../button');
+require('./useCalendar.js');
+require('react-merge-refs');
+
+
+
+exports.DayOfMonthPickerMobile = components_dayOfMonthPickerMobile_Component.DayOfMonthPickerMobile;

package/day-of-month-picker/modern/Component.desktop.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import React from 'react';
+type DayOfMontPickerDesktopProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Выбранный день
+     */
+    value?: number;
+    /**
+     * Обработчик выбора дня
+     */
+    onChange?: (date?: number) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Должен ли календарь подстраиваться под ширину родителя.
+     */
+    responsive?: boolean;
+};
+declare const DayOfMonthPickerDesktop: React.ForwardRefExoticComponent<DayOfMontPickerDesktopProps & React.RefAttributes<HTMLDivElement>>;
+export { DayOfMontPickerDesktopProps, DayOfMonthPickerDesktop };

package/day-of-month-picker/modern/Component.desktop.js

@@ -0,0 +1,54 @@
+import React, { forwardRef, useMemo, useState, useRef, useEffect, useCallback } from 'react';
+import cn from 'classnames';
+import { IconButton } from '../../icon-button/modern';
+import { Input } from '../../input/modern';
+import { Popover } from '../../popover/modern';
+import { Typography } from '../../typography/modern';
+import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
+import { DaysTable } from './components/days-table/Component.js';
+import { useCalendar } from './useCalendar.js';
+import 'react-transition-group';
+import '../../button/modern';
+import 'react-merge-refs';
+
+const styles = {"component":"day-of-month-picker__component_dchbr","responsive":"day-of-month-picker__responsive_dchbr","container":"day-of-month-picker__container_dchbr","calendarContainer":"day-of-month-picker__calendarContainer_dchbr","calendarResponsive":"day-of-month-picker__calendarResponsive_dchbr","lastDay":"day-of-month-picker__lastDay_dchbr","lastDaySelected":"day-of-month-picker__lastDaySelected_dchbr"};
+require('./desktop.css');
+
+const DayOfMonthPickerDesktop = forwardRef(({ className, value, onChange, dataTestId, responsive }, ref) => {
+    const selected = useMemo(() => value ?? undefined, [value]);
+    const { getDayProps, getRootProps, highlighted } = useCalendar({
+        selected,
+        onChange,
+    });
+    const [show, setShow] = useState(false);
+    const inputWrapperRef = useRef(null);
+    const popoverRef = useRef(null);
+    const handleToggle = () => {
+        setShow((prev) => !prev);
+    };
+    useEffect(() => {
+        setShow(false);
+    }, [value]);
+    const handleBlur = useCallback((event) => {
+        const target = (event.relatedTarget || document.activeElement);
+        if (popoverRef.current?.contains(target) === false) {
+            setShow(false);
+        }
+    }, []);
+    return (React.createElement("div", { onBlur: handleBlur },
+        React.createElement(Input, { wrapperRef: inputWrapperRef, value: `${value === 31 ? 'В последний день месяца' : value}`, block: true, readOnly: true, onClick: handleToggle, label: '\u041A\u0430\u043A\u043E\u0433\u043E \u0447\u0438\u0441\u043B\u0430', size: 'm', rightAddons: React.createElement(IconButton, { view: 'primary', icon: CalendarMIcon, size: 's', dataTestId: 'icon' }) }),
+        React.createElement(Popover, { ref: popoverRef, open: show, anchorElement: inputWrapperRef.current, popperClassName: cn(styles.calendarContainer, {
+                [styles.calendarResponsive]: responsive,
+            }), offset: [0, 4], withTransition: false, zIndex: 1, position: 'bottom-end' },
+            React.createElement("div", { ...getRootProps({ ref }), className: cn('cc-calendar', styles.component, className, {
+                    [styles.responsive]: responsive,
+                }), "data-test-id": dataTestId },
+                React.createElement("div", { className: cn(styles.container) },
+                    React.createElement(DaysTable, { highlighted: highlighted, getDayProps: getDayProps, responsive: responsive }),
+                    React.createElement("div", { className: cn(styles.lastDay, {
+                            [styles.lastDaySelected]: value === 31,
+                        }) },
+                        React.createElement(Typography.Text, { color: `${value === 31 ? 'primary-inverted' : 'primary'}`, onClick: () => onChange?.(31) }, "\u0412 \u043F\u043E\u0441\u043B\u0435\u0434\u043D\u0438\u0439 \u0434\u0435\u043D\u044C \u043C\u0435\u0441\u044F\u0446\u0430")))))));
+});
+
+export { DayOfMonthPickerDesktop };

package/day-of-month-picker/modern/Component.responsive.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import React from 'react';
+import { DayOfMonthPickerMobileProps } from "./components/day-of-month-picker-mobile/index";
+import { DayOfMontPickerDesktopProps } from "./Component.desktop";
+type ResponsiveDayOfMonthPickerProps = DayOfMontPickerDesktopProps & DayOfMonthPickerMobileProps & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+type CalendarMedia = 'desktop' | 'mobile';
+declare const DayOfMonthPickerResponsive: React.ForwardRefExoticComponent<DayOfMontPickerDesktopProps & {
+    open: boolean;
+    onClose?: (() => void) | undefined;
+} & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { ResponsiveDayOfMonthPickerProps, CalendarMedia, DayOfMonthPickerResponsive };

package/day-of-month-picker/modern/Component.responsive.js

@@ -0,0 +1,26 @@
+import React, { forwardRef } from 'react';
+import { useMedia } from '@alfalab/hooks';
+import { DayOfMonthPickerMobile } from './components/day-of-month-picker-mobile/Component.js';
+import { DayOfMonthPickerDesktop } from './Component.desktop.js';
+import 'classnames';
+import '../../modal/modern/mobile';
+import '../../icon-button/modern';
+import '../../input/modern';
+import '../../popover/modern';
+import '../../typography/modern';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import './components/days-table/Component.js';
+import 'react-transition-group';
+import '../../button/modern';
+import 'react-merge-refs';
+import './useCalendar.js';
+
+const DayOfMonthPickerResponsive = forwardRef(({ breakpoint = 1024, ...restProps }, ref) => {
+    const [view] = useMedia([
+        ['mobile', `(max-width: ${breakpoint - 1}px)`],
+        ['desktop', `(min-width: ${breakpoint}px)`],
+    ], 'desktop');
+    return view === 'desktop' ? (React.createElement(DayOfMonthPickerDesktop, { ...restProps, ref: ref })) : (React.createElement(DayOfMonthPickerMobile, { ...restProps, ref: ref }));
+});
+
+export { DayOfMonthPickerResponsive };

package/day-of-month-picker/modern/components/day-of-month-picker-mobile/Component.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import React from 'react';
+import { DayOfMontPickerDesktopProps } from "../../Component.desktop";
+type DayOfMonthPickerMobileProps = DayOfMontPickerDesktopProps & {
+    /**
+     * Управление видимостью модалки
+     */
+    open: boolean;
+    /**
+     * Обработчик закрытия модалки
+     */
+    onClose?: () => void;
+};
+declare const DayOfMonthPickerMobile: React.ForwardRefExoticComponent<DayOfMontPickerDesktopProps & {
+    /**
+     * Управление видимостью модалки
+     */
+    open: boolean;
+    /**
+     * Обработчик закрытия модалки
+     */
+    onClose?: (() => void) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { DayOfMonthPickerMobileProps, DayOfMonthPickerMobile };

package/day-of-month-picker/modern/components/day-of-month-picker-mobile/Component.js

@@ -0,0 +1,28 @@
+import React, { forwardRef, useRef } from 'react';
+import cn from 'classnames';
+import { ModalMobile } from '../../../../modal/modern/mobile';
+import { DayOfMonthPickerDesktop } from '../../Component.desktop.js';
+import '../../../../icon-button/modern';
+import '../../../../input/modern';
+import '../../../../popover/modern';
+import '../../../../typography/modern';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import '../days-table/Component.js';
+import 'react-transition-group';
+import '../../../../button/modern';
+import 'react-merge-refs';
+import '../../useCalendar.js';
+
+const styles = {"wrapper":"day-of-month-picker__wrapper_5fdxo","withZIndex":"day-of-month-picker__withZIndex_5fdxo","calendar":"day-of-month-picker__calendar_5fdxo"};
+require('./index.css');
+
+const DayOfMonthPickerMobile = forwardRef(({ className, value, onChange, dataTestId, open, onClose }, ref) => {
+    const modalRef = useRef(null);
+    return (React.createElement("div", { className: cn(className, styles.component), ref: ref, "data-test-id": dataTestId },
+        React.createElement(ModalMobile, { open: open, onClose: onClose, ref: modalRef, className: styles.modal, wrapperClassName: styles.wrapper },
+            React.createElement(ModalMobile.Header, { hasCloser: true, title: '\u041A\u0430\u043A\u043E\u0433\u043E \u0447\u0438\u0441\u043B\u0430', sticky: true, className: cn({ [styles.withZIndex]: true }) }),
+            React.createElement(ModalMobile.Content, { flex: true },
+                React.createElement(DayOfMonthPickerDesktop, { responsive: true, className: styles.calendar, value: value, onChange: onChange })))));
+});
+
+export { DayOfMonthPickerMobile };

package/day-of-month-picker/modern/components/day-of-month-picker-mobile/index.css

@@ -0,0 +1,47 @@
+/* hash: 1nwi4 */
+:root {
+} /* deprecated */ :root {
+    --color-light-bg-primary: #fff;
+    --color-light-border-primary: #dcdcdd; /* 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 */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} :root {
+
+    /* День */
+
+    /* highlighted */
+
+    /* selected */
+
+    /* marker */
+} :root {
+
+    /* sizes */
+
+    /* paddings */
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+
+    /* paddings */
+} .day-of-month-picker__wrapper_5fdxo {
+    background: var(--color-light-bg-primary);
+} .day-of-month-picker__withZIndex_5fdxo {
+    z-index: 2;
+} .day-of-month-picker__calendar_5fdxo th {
+    border-bottom: 1px solid var(--color-light-border-primary);
+}

package/day-of-month-picker/modern/components/day-of-month-picker-mobile/index.d.ts

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

package/day-of-month-picker/modern/components/day-of-month-picker-mobile/index.js

@@ -0,0 +1,15 @@
+export { DayOfMonthPickerMobile } from './Component.js';
+import 'react';
+import 'classnames';
+import '../../../../modal/modern/mobile';
+import '../../Component.desktop.js';
+import '../../../../icon-button/modern';
+import '../../../../input/modern';
+import '../../../../popover/modern';
+import '../../../../typography/modern';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import '../days-table/Component.js';
+import 'react-transition-group';
+import '../../../../button/modern';
+import 'react-merge-refs';
+import '../../useCalendar.js';

package/day-of-month-picker/modern/components/days-table/Component.d.ts

@@ -0,0 +1,21 @@
+import { FC, RefCallback } from 'react';
+type DaysTableProps = {
+    /**
+     * Доп. пропсы для переданного дня
+     */
+    getDayProps: (day: number) => Record<string, unknown> & {
+        ref: RefCallback<HTMLTableCellElement>;
+        onClick: (e: number) => void;
+        selected: boolean;
+    };
+    /**
+     * Должен ли календарь подстраиваться под ширину родителя.
+     */
+    responsive?: boolean;
+    /**
+     * Подсвеченный день (ховер)
+     */
+    highlighted?: number;
+};
+declare const DaysTable: FC<DaysTableProps>;
+export { DaysTableProps, DaysTable };

package/day-of-month-picker/modern/components/days-table/Component.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import cn from 'classnames';
+import { Button } from '../../../../button/modern';
+
+const styles = {"daysTable":"day-of-month-picker__daysTable_14d17","responsive":"day-of-month-picker__responsive_14d17","day":"day-of-month-picker__day_14d17","highlighted":"day-of-month-picker__highlighted_14d17","selected":"day-of-month-picker__selected_14d17","disabled":"day-of-month-picker__disabled_14d17","dayWrapper":"day-of-month-picker__dayWrapper_14d17","cursorPointer":"day-of-month-picker__cursorPointer_14d17","daysEnter":"day-of-month-picker__daysEnter_14d17","dayContent":"day-of-month-picker__dayContent_14d17","today":"day-of-month-picker__today_14d17","dot":"day-of-month-picker__dot_14d17","daysEnterActive":"day-of-month-picker__daysEnterActive_14d17","daysExit":"day-of-month-picker__daysExit_14d17","daysExitActive":"day-of-month-picker__daysExitActive_14d17"};
+require('./index.css');
+
+const DAYS_OF_MONTH = [
+    [1, 2, 3, 4, 5, 6, 7],
+    [8, 9, 10, 11, 12, 13, 14],
+    [15, 16, 17, 18, 19, 20, 21],
+    [22, 23, 24, 25, 26, 27, 28],
+    [29, 30],
+];
+const DaysTable = ({ getDayProps, responsive, highlighted }) => {
+    const renderDay = (day, dayIdx) => {
+        if (!day)
+            return React.createElement("td", { key: dayIdx });
+        const { onClick, selected, ...props } = getDayProps(day);
+        const dayHighlighted = day === highlighted;
+        const handleDayClick = (e) => {
+            onClick(e);
+        };
+        return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
+        React.createElement("td", { ...props, key: day, className: cn(styles.dayWrapper), align: 'center', onClick: () => handleDayClick(day) },
+            React.createElement(Button, { type: 'button', view: 'ghost', size: 'xs', className: cn(styles.day, {
+                    [styles.selected]: selected,
+                    [styles.highlighted]: dayHighlighted,
+                }) },
+                React.createElement("span", { className: cn(styles.dayContent) }, day))));
+    };
+    const renderWeek = (week) => React.createElement("tr", { key: week[0] }, week.map(renderDay));
+    return (React.createElement("table", { className: cn(styles.daysTable, {
+            [styles.responsive]: responsive,
+        }) },
+        React.createElement(TransitionGroup, { component: null },
+            React.createElement(CSSTransition, { timeout: 300, classNames: {
+                    enter: styles.daysEnter,
+                    enterActive: styles.daysEnterActive,
+                    exit: styles.daysExit,
+                } },
+                React.createElement("tbody", null, DAYS_OF_MONTH.map(renderWeek))))));
+};
+
+export { DaysTable };

package/day-of-month-picker/modern/components/days-table/index.css

@@ -0,0 +1,116 @@
+/* hash: 1ogx8 */
+:root {
+} /* deprecated */ :root {
+    --color-light-graphic-primary: #0e0e0e;
+    --color-light-graphic-primary-inverted: #fff;
+    --color-light-graphic-quaternary: #dcdcdd;
+    --color-light-text-primary: #0e0e0e;
+    --color-light-text-primary-inverted: #fff; /* 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 */
+    --color-light-graphic-primary-tint-15: rgb(50, 50, 50);
+} :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 */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+    --border-radius-pill: 99px;
+} :root {
+    --gap-2xs: 4px;
+} :root {
+} :root {
+} :root {
+
+    /* День */
+    --calendar-day-size: 40px;
+    --calendar-day-border-radius: var(--border-radius-pill);
+
+    /* highlighted */
+    --calendar-highlighted-color: var(--color-light-text-primary);
+    --calendar-highlighted-background: var(--color-light-graphic-quaternary);
+
+    /* selected */
+    --calendar-selected-color: var(--color-light-text-primary-inverted);
+    --calendar-selected-background: var(--color-light-graphic-primary);
+    --calendar-selected-hover-background: var(--color-light-graphic-primary-tint-15);
+
+    /* marker */
+    --calendar-marker-selected-background: var(--color-light-graphic-primary-inverted);
+} .day-of-month-picker__daysTable_14d17 {
+    border-collapse: separate;
+    border-spacing: 0;
+    position: relative
+} .day-of-month-picker__daysTable_14d17.day-of-month-picker__responsive_14d17 {
+        width: 100%;
+    } .day-of-month-picker__daysTable_14d17 th {
+        padding: 0;
+    } .day-of-month-picker__daysTable_14d17 td {
+        padding: var(--gap-2xs) 0 0;
+    } .day-of-month-picker__day_14d17 {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+    position: relative;
+    width: var(--calendar-day-size);
+    height: var(--calendar-day-size);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    box-sizing: border-box;
+    color: var(--color-light-text-primary);
+    z-index: 1;
+    border-radius: var(--calendar-day-border-radius)
+} .day-of-month-picker__day_14d17.day-of-month-picker__highlighted_14d17 {
+        color: var(--calendar-highlighted-color);
+        background: var(--calendar-highlighted-background);
+    } .day-of-month-picker__day_14d17.day-of-month-picker__selected_14d17,
+    .day-of-month-picker__day_14d17.day-of-month-picker__disabled_14d17.day-of-month-picker__selected_14d17 {
+        color: var(--calendar-selected-color);
+        background: var(--calendar-selected-background);
+    } @media (hover) {
+            .day-of-month-picker__day_14d17.day-of-month-picker__selected_14d17:hover {
+                background: var(--calendar-selected-hover-background);
+            }
+        } .day-of-month-picker__day_14d17:focus {
+        z-index: 1;
+    } /* RANGE */ .day-of-month-picker__dayWrapper_14d17 {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    position: relative
+} .day-of-month-picker__dayWrapper_14d17:before {
+        content: '';
+        display: block;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        height: var(--calendar-day-size);
+    } .day-of-month-picker__dayWrapper_14d17:focus {
+        outline: none;
+    } .day-of-month-picker__dayWrapper_14d17.day-of-month-picker__cursorPointer_14d17 {
+        cursor: pointer;
+    } /* SLIDE ANIMATION */ .day-of-month-picker__daysEnter_14d17 .day-of-month-picker__dayWrapper_14d17 {
+    width: 100px;
+} .day-of-month-picker__dayContent_14d17 {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400
+} .day-of-month-picker__dayContent_14d17.day-of-month-picker__today_14d17 {
+        font-weight: bold;
+    } .day-of-month-picker__selected_14d17 .day-of-month-picker__dot_14d17 {
+    background: var(--calendar-marker-selected-background);
+} .day-of-month-picker__daysEnter_14d17 {
+    opacity: 0;
+    position: absolute;
+    left: 0;
+} .day-of-month-picker__daysEnterActive_14d17 {
+    opacity: 1;
+} .day-of-month-picker__daysExit_14d17 {
+    pointer-events: none;
+    opacity: 1;
+} .day-of-month-picker__daysEnterActive_14d17,
+.day-of-month-picker__daysExitActive_14d17 {
+    transition: opacity 200ms, transform 300ms;
+}

package/day-of-month-picker/modern/components/days-table/index.d.ts

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

package/day-of-month-picker/modern/components/days-table/index.js

@@ -0,0 +1,5 @@
+export { DaysTable } from './Component.js';
+import 'react';
+import 'react-transition-group';
+import 'classnames';
+import '../../../../button/modern';