@alfalab/core-components 41.11.0-beta.0 → 41.11.0-beta.1

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

@@ -1,58 +1,55 @@
-import { __assign } from 'tslib';
-import React, { forwardRef, useMemo, useState, useRef, useEffect, useCallback } from 'react';
-import cn from 'classnames';
-import { IconButton } from '../../icon-button/esm';
-import { Input } from '../../input/esm';
+import React, { forwardRef, useState, useRef, useEffect, useCallback } from 'react';
 import { Popover } from '../../popover/esm';
-import { Typography } from '../../typography/esm';
-import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
+import { DayInputField } from './components/day-input-field/DayInputField.js';
 import { DaysTable } from './components/days-table/Component.js';
-import { useCalendar } from './useCalendar.js';
-import 'react-transition-group';
+import '../../icon-button/esm';
+import '../../input/esm';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import 'classnames';
 import '../../button/esm';
-import 'react-merge-refs';
+import '../../typography/esm';
 
-var styles = {"component":"day-of-month-picker__component_189mh","responsive":"day-of-month-picker__responsive_189mh","container":"day-of-month-picker__container_189mh","calendarContainer":"day-of-month-picker__calendarContainer_189mh","calendarResponsive":"day-of-month-picker__calendarResponsive_189mh","lastDay":"day-of-month-picker__lastDay_189mh","lastDaySelected":"day-of-month-picker__lastDaySelected_189mh"};
+var styles = {"component":"day-of-month-picker__component_189mh","container":"day-of-month-picker__container_189mh","calendarContainer":"day-of-month-picker__calendarContainer_189mh"};
 require('./desktop.css');
 
 var DayOfMonthPickerDesktop = forwardRef(function (_a, ref) {
-    var _b, _c, _d;
-    var className = _a.className, value = _a.value, onChange = _a.onChange, dataTestId = _a.dataTestId, responsive = _a.responsive;
-    var selected = useMemo(function () { return value !== null && value !== void 0 ? value : undefined; }, [value]);
-    var _e = useCalendar({
-        selected: selected,
-        onChange: onChange,
-    }), getDayProps = _e.getDayProps, getRootProps = _e.getRootProps, highlighted = _e.highlighted;
-    var _f = useState(false), show = _f[0], setShow = _f[1];
+    var className = _a.className, value = _a.value, onChange = _a.onChange, dataTestId = _a.dataTestId, error = _a.error, hint = _a.hint;
+    var _b = useState(false), show = _b[0], setShow = _b[1];
     var inputWrapperRef = useRef(null);
     var popoverRef = useRef(null);
-    var handleToggle = function () {
-        setShow(function (prev) { return !prev; });
+    var handleOpenCalendar = function () {
+        setShow(true);
     };
     useEffect(function () {
         setShow(false);
     }, [value]);
     var handleBlur = useCallback(function (event) {
         var _a;
-        var target = (event.relatedTarget || document.activeElement);
-        if (((_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.contains(target)) === false) {
+        var target = event.relatedTarget || document.activeElement;
+        if (!((_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))) {
             setShow(false);
         }
     }, []);
-    return (React.createElement("div", { onBlur: handleBlur },
-        React.createElement(Input, { wrapperRef: inputWrapperRef, value: "".concat(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, (_b = {},
-                _b[styles.calendarResponsive] = responsive,
-                _b)), offset: [0, 4], withTransition: false, zIndex: 1, position: 'bottom-end' },
-            React.createElement("div", __assign({}, getRootProps({ ref: ref }), { className: cn('cc-calendar', styles.component, className, (_c = {},
-                    _c[styles.responsive] = responsive,
-                    _c)), "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, (_d = {},
-                            _d[styles.lastDaySelected] = value === 31,
-                            _d)) },
-                        React.createElement(Typography.Text, { color: "".concat(value === 31 ? 'primary-inverted' : 'primary'), onClick: function () { return onChange(31); } }, "\u0412 \u043F\u043E\u0441\u043B\u0435\u0434\u043D\u0438\u0439 \u0434\u0435\u043D\u044C \u043C\u0435\u0441\u044F\u0446\u0430")))))));
+    var handleFocus = useCallback(function (event) {
+        setShow(true);
+        if (!show && event.target.tagName !== 'INPUT' && popoverRef.current) {
+            popoverRef.current.focus();
+        }
+    }, [show]);
+    var handleKeyDown = useCallback(function (event) {
+        if (event.target.tagName === 'INPUT' && event.key === 'Enter') {
+            setShow(!show);
+        }
+        if (event.key === 'Escape') {
+            setShow(false);
+        }
+    }, [show]);
+    return (React.createElement("div", { ref: ref, className: className, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, role: 'button', tabIndex: 0 },
+        React.createElement(DayInputField, { inputWrapperRef: inputWrapperRef, value: value !== null && value !== void 0 ? value : '', handleToggle: handleOpenCalendar, error: error, hint: hint }),
+        React.createElement(Popover, { dataTestId: 'day-of-month-popover', ref: popoverRef, open: show, anchorElement: inputWrapperRef.current, popperClassName: styles.calendarContainer, offset: [0, 4], withTransition: false, zIndex: 1, position: 'bottom-end' },
+            React.createElement("div", { className: styles.component, "data-test-id": dataTestId },
+                React.createElement("div", { className: styles.container },
+                    React.createElement(DaysTable, { onClick: onChange, selectedDay: value }))))));
 });
 
 export { DayOfMonthPickerDesktop };

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

@@ -1,23 +1,19 @@
 /// <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 & {
+type ResponsiveDayOfMonthPickerProps = DayOfMontPickerDesktopProps & {
     /**
      * Контрольная точка, с нее начинается desktop версия
      * @default 1024
      */
     breakpoint?: number;
 };
-type CalendarMedia = 'desktop' | 'mobile';
+type DayOfMontPickerMedia = '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 };
+export { ResponsiveDayOfMonthPickerProps, DayOfMontPickerMedia, DayOfMonthPickerResponsive };

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

@@ -3,18 +3,16 @@ 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/esm/mobile';
+import '../../bottom-sheet/esm';
 import '../../icon-button/esm';
 import '../../input/esm';
-import '../../popover/esm';
-import '../../typography/esm';
 import '@alfalab/icons-glyph/CalendarMIcon';
 import './components/days-table/Component.js';
-import 'react-transition-group';
+import 'classnames';
 import '../../button/esm';
-import 'react-merge-refs';
-import './useCalendar.js';
+import '../../typography/esm';
+import '../../popover/esm';
+import './components/day-input-field/DayInputField.js';
 
 var DayOfMonthPickerResponsive = forwardRef(function (_a, ref) {
     var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = __rest(_a, ["breakpoint"]);

package/day-of-month-picker/esm/components/day-input-field/DayInputField.d.ts

@@ -0,0 +1,10 @@
+import { FC, ReactNode, Ref } from 'react';
+type DayInputFieldProps = {
+    inputWrapperRef: Ref<HTMLDivElement> | undefined;
+    value: number | string;
+    handleToggle: () => void;
+    error?: ReactNode;
+    hint?: ReactNode;
+};
+declare const DayInputField: FC<DayInputFieldProps>;
+export { DayInputField };

package/day-of-month-picker/esm/components/day-input-field/DayInputField.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { IconButton } from '../../../../icon-button/esm';
+import { Input } from '../../../../input/esm';
+import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
+
+var DayInputField = function (_a) {
+    var inputWrapperRef = _a.inputWrapperRef, value = _a.value, handleToggle = _a.handleToggle, error = _a.error, hint = _a.hint;
+    return (React.createElement(Input, { dataTestId: 'day-input-field', wrapperRef: inputWrapperRef, value: "".concat(value === 31 ? 'В последний день месяца' : value), block: true, readOnly: true, onClick: handleToggle, label: '\u041A\u0430\u043A\u043E\u0433\u043E \u0447\u0438\u0441\u043B\u0430', size: 'm', error: error, rightAddons: React.createElement(IconButton, { view: 'primary', icon: CalendarMIcon, size: 's', dataTestId: 'icon' }), hint: hint }));
+};
+
+export { DayInputField };

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

@@ -1,24 +1,5 @@
 /// <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 };
+declare const DayOfMonthPickerMobile: React.ForwardRefExoticComponent<DayOfMontPickerDesktopProps & React.RefAttributes<HTMLDivElement>>;
+export { DayOfMonthPickerMobile };

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

@@ -1,31 +1,29 @@
-import React, { forwardRef, useRef } from 'react';
-import cn from 'classnames';
-import { ModalMobile } from '../../../../modal/esm/mobile';
-import { DayOfMonthPickerDesktop } from '../../Component.desktop.js';
-import 'tslib';
+import React, { forwardRef, useState, useRef } from 'react';
+import { BottomSheet } from '../../../../bottom-sheet/esm';
+import { DayInputField } from '../day-input-field/DayInputField.js';
+import { DaysTable } from '../days-table/Component.js';
 import '../../../../icon-button/esm';
 import '../../../../input/esm';
-import '../../../../popover/esm';
-import '../../../../typography/esm';
 import '@alfalab/icons-glyph/CalendarMIcon';
-import '../days-table/Component.js';
-import 'react-transition-group';
+import 'classnames';
 import '../../../../button/esm';
-import 'react-merge-refs';
-import '../../useCalendar.js';
-
-var styles = {"wrapper":"day-of-month-picker__wrapper_hvseu","withZIndex":"day-of-month-picker__withZIndex_hvseu","calendar":"day-of-month-picker__calendar_hvseu"};
-require('./index.css');
+import '../../../../typography/esm';
 
 var DayOfMonthPickerMobile = forwardRef(function (_a, ref) {
-    var _b;
-    var className = _a.className, value = _a.value, onChange = _a.onChange, dataTestId = _a.dataTestId, open = _a.open, onClose = _a.onClose;
-    var 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((_b = {}, _b[styles.withZIndex] = true, _b)) }),
-            React.createElement(ModalMobile.Content, { flex: true },
-                React.createElement(DayOfMonthPickerDesktop, { responsive: true, className: styles.calendar, value: value, onChange: onChange })))));
+    var className = _a.className, value = _a.value, onChange = _a.onChange, dataTestId = _a.dataTestId, error = _a.error, hint = _a.hint;
+    var _b = useState(false), show = _b[0], setShow = _b[1];
+    var inputWrapperRef = useRef(null);
+    var handleToggle = function () {
+        setShow(function (prev) { return !prev; });
+    };
+    var handleChangeDay = function (day) {
+        onChange(day);
+        setShow(false);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DayInputField, { inputWrapperRef: inputWrapperRef, value: value !== null && value !== void 0 ? value : '', handleToggle: handleToggle, error: error, hint: hint }),
+        React.createElement(BottomSheet, { open: show, onClose: function () { return setShow(false); }, className: className, title: '\u041A\u0430\u043A\u043E\u0433\u043E \u0447\u0438\u0441\u043B\u0430', stickyHeader: true, hasCloser: true, ref: ref, dataTestId: dataTestId },
+            React.createElement(DaysTable, { selectedDay: value, onClick: handleChangeDay }))));
 });
 
 export { DayOfMonthPickerMobile };

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

@@ -1,16 +1,11 @@
 export { DayOfMonthPickerMobile } from './Component.js';
 import 'react';
-import 'classnames';
-import '../../../../modal/esm/mobile';
-import '../../Component.desktop.js';
-import 'tslib';
+import '../../../../bottom-sheet/esm';
 import '../../../../icon-button/esm';
 import '../../../../input/esm';
-import '../../../../popover/esm';
-import '../../../../typography/esm';
 import '@alfalab/icons-glyph/CalendarMIcon';
 import '../days-table/Component.js';
-import 'react-transition-group';
+import 'classnames';
 import '../../../../button/esm';
-import 'react-merge-refs';
-import '../../useCalendar.js';
+import '../../../../typography/esm';
+import '../day-input-field/DayInputField.js';

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

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

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

@@ -1,10 +1,9 @@
-import { __rest, __assign } from 'tslib';
-import React from 'react';
-import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import React, { useCallback } from 'react';
 import cn from 'classnames';
 import { Button } from '../../../../button/esm';
+import { Typography } from '../../../../typography/esm';
 
-var styles = {"daysTable":"day-of-month-picker__daysTable_rlws9","responsive":"day-of-month-picker__responsive_rlws9","day":"day-of-month-picker__day_rlws9","highlighted":"day-of-month-picker__highlighted_rlws9","selected":"day-of-month-picker__selected_rlws9","disabled":"day-of-month-picker__disabled_rlws9","dayWrapper":"day-of-month-picker__dayWrapper_rlws9","cursorPointer":"day-of-month-picker__cursorPointer_rlws9","daysEnter":"day-of-month-picker__daysEnter_rlws9","dayContent":"day-of-month-picker__dayContent_rlws9","today":"day-of-month-picker__today_rlws9","dot":"day-of-month-picker__dot_rlws9","daysEnterActive":"day-of-month-picker__daysEnterActive_rlws9","daysExit":"day-of-month-picker__daysExit_rlws9","daysExitActive":"day-of-month-picker__daysExitActive_rlws9"};
+var styles = {"daysTable":"day-of-month-picker__daysTable_rlws9","responsive":"day-of-month-picker__responsive_rlws9","day":"day-of-month-picker__day_rlws9","highlighted":"day-of-month-picker__highlighted_rlws9","lastDay":"day-of-month-picker__lastDay_rlws9"};
 require('./index.css');
 
 var DAYS_OF_MONTH = [
@@ -14,38 +13,38 @@ var DAYS_OF_MONTH = [
     [22, 23, 24, 25, 26, 27, 28],
     [29, 30],
 ];
+var LAST_DAY = 31;
 var DaysTable = function (_a) {
-    var _b;
-    var getDayProps = _a.getDayProps, responsive = _a.responsive, highlighted = _a.highlighted;
-    var renderDay = function (day, dayIdx) {
+    var onClick = _a.onClick, selectedDay = _a.selectedDay;
+    var handleMouseDown = useCallback(function (event) {
+        // Не дает терять фокус при выборе дня
+        event.preventDefault();
+    }, []);
+    var renderDay = function (day) {
         var _a;
-        if (!day)
-            return React.createElement("td", { key: dayIdx });
-        var _b = getDayProps(day), onClick = _b.onClick, selected = _b.selected, props = __rest(_b, ["onClick", "selected"]);
-        var dayHighlighted = day === highlighted;
-        var handleDayClick = function (e) {
-            onClick(e);
-        };
         return (
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
-        React.createElement("td", __assign({}, props, { key: day, className: cn(styles.dayWrapper), align: 'center', onClick: function () { return handleDayClick(day); } }),
+        // eslint-disable-next-line jsx-a11y/role-supports-aria-props
+        React.createElement("td", { key: day, align: 'center', onClick: function () { return onClick(day); }, role: 'presentation', "aria-selected": selectedDay === day, "data-day": day, onMouseDown: handleMouseDown },
             React.createElement(Button, { type: 'button', view: 'ghost', size: 'xs', className: cn(styles.day, (_a = {},
-                    _a[styles.selected] = selected,
-                    _a[styles.highlighted] = dayHighlighted,
+                    _a[styles.highlighted] = selectedDay === day,
                     _a)) },
                 React.createElement("span", { className: cn(styles.dayContent) }, day))));
     };
-    var renderWeek = function (week) { return React.createElement("tr", { key: week[0] }, week.map(renderDay)); };
-    return (React.createElement("table", { className: cn(styles.daysTable, (_b = {},
-            _b[styles.responsive] = responsive,
-            _b)) },
-        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))))));
+    var renderLastDay = function () {
+        var _a;
+        var isLastDay = selectedDay === LAST_DAY;
+        var handleClick = function () {
+            onClick(LAST_DAY);
+        };
+        return (React.createElement(Button, { dataTestId: 'last-day-button', type: 'button', view: 'ghost', size: 'xs', className: cn(styles.lastDay, (_a = {},
+                _a[styles.highlighted] = isLastDay,
+                _a)), onClick: handleClick, onMouseDown: handleMouseDown },
+            React.createElement(Typography.Text, { color: "".concat(isLastDay ? 'primary-inverted' : 'primary') }, "\u0412 \u043F\u043E\u0441\u043B\u0435\u0434\u043D\u0438\u0439 \u0434\u0435\u043D\u044C \u043C\u0435\u0441\u044F\u0446\u0430")));
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("table", { className: styles.daysTable },
+            React.createElement("tbody", null, DAYS_OF_MONTH.map(function (week) { return (React.createElement("tr", { key: week[0] }, week.map(renderDay))); }))),
+        renderLastDay()));
 };
 
 export { DaysTable };

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

@@ -2,7 +2,6 @@
 :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 */
@@ -17,6 +16,7 @@
 
     /* Hard up */
 } :root {
+    --border-radius-l: 12px;
     --border-radius-pill: 99px;
 } :root {
     --gap-2xs: 4px;
@@ -24,21 +24,8 @@
 } :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 */
+    --day-of-month-picker-day-size: 40px;
 } .day-of-month-picker__daysTable_rlws9 {
     border-collapse: separate;
     border-spacing: 0;
@@ -50,11 +37,9 @@
     } .day-of-month-picker__daysTable_rlws9 td {
         padding: var(--gap-2xs) 0 0;
     } .day-of-month-picker__day_rlws9 {
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-
     position: relative;
-    width: var(--calendar-day-size);
-    height: var(--calendar-day-size);
+    width: var(--day-of-month-picker-day-size);
+    height: var(--day-of-month-picker-day-size);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -62,55 +47,31 @@
     box-sizing: border-box;
     color: var(--color-light-text-primary);
     z-index: 1;
-    border-radius: var(--calendar-day-border-radius)
+    border-radius: var(--border-radius-pill)
 } .day-of-month-picker__day_rlws9.day-of-month-picker__highlighted_rlws9 {
-        color: var(--calendar-highlighted-color);
-        background: var(--calendar-highlighted-background);
-    } .day-of-month-picker__day_rlws9.day-of-month-picker__selected_rlws9,
-    .day-of-month-picker__day_rlws9.day-of-month-picker__disabled_rlws9.day-of-month-picker__selected_rlws9 {
-        color: var(--calendar-selected-color);
-        background: var(--calendar-selected-background);
+        color: var(--color-light-text-primary-inverted);
+        background: var(--color-light-graphic-primary);
+    } .day-of-month-picker__day_rlws9:hover {
+        background: var(--color-light-graphic-quaternary);
     } @media (hover) {
-            .day-of-month-picker__day_rlws9.day-of-month-picker__selected_rlws9:hover {
-                background: var(--calendar-selected-hover-background);
+            .day-of-month-picker__day_rlws9.day-of-month-picker__highlighted_rlws9:hover {
+                background: var(--color-light-graphic-primary-tint-15);
             }
         } .day-of-month-picker__day_rlws9:focus {
         z-index: 1;
-    } /* RANGE */ .day-of-month-picker__dayWrapper_rlws9 {
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    position: relative
-} .day-of-month-picker__dayWrapper_rlws9:before {
-        content: '';
-        display: block;
-        position: absolute;
-        left: 0;
-        bottom: 0;
-        width: 100%;
-        height: var(--calendar-day-size);
-    } .day-of-month-picker__dayWrapper_rlws9:focus {
-        outline: none;
-    } .day-of-month-picker__dayWrapper_rlws9.day-of-month-picker__cursorPointer_rlws9 {
-        cursor: pointer;
-    } /* SLIDE ANIMATION */ .day-of-month-picker__daysEnter_rlws9 .day-of-month-picker__dayWrapper_rlws9 {
-    width: 100px;
-} .day-of-month-picker__dayContent_rlws9 {
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 400
-} .day-of-month-picker__dayContent_rlws9.day-of-month-picker__today_rlws9 {
-        font-weight: bold;
-    } .day-of-month-picker__selected_rlws9 .day-of-month-picker__dot_rlws9 {
-    background: var(--calendar-marker-selected-background);
-} .day-of-month-picker__daysEnter_rlws9 {
-    opacity: 0;
-    position: absolute;
-    left: 0;
-} .day-of-month-picker__daysEnterActive_rlws9 {
-    opacity: 1;
-} .day-of-month-picker__daysExit_rlws9 {
-    pointer-events: none;
-    opacity: 1;
-} .day-of-month-picker__daysEnterActive_rlws9,
-.day-of-month-picker__daysExitActive_rlws9 {
-    transition: opacity 200ms, transform 300ms;
-}
+    } .day-of-month-picker__lastDay_rlws9 {
+    border-radius: var(--border-radius-l);
+    height: var(--day-of-month-picker-day-size);
+    cursor: pointer;
+    width: 100%;
+    margin: var(--gap-2xs) 0 0
+} .day-of-month-picker__lastDay_rlws9.day-of-month-picker__highlighted_rlws9 {
+        color: var(--color-light-text-primary-inverted);
+        background: var(--color-light-graphic-primary);
+    } .day-of-month-picker__lastDay_rlws9:hover {
+        background: var(--color-light-graphic-quaternary);
+    } @media (hover) {
+            .day-of-month-picker__lastDay_rlws9.day-of-month-picker__highlighted_rlws9:hover {
+                background: var(--color-light-graphic-primary-tint-15);
+            }
+        }

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

@@ -1,6 +1,5 @@
 export { DaysTable } from './Component.js';
-import 'tslib';
 import 'react';
-import 'react-transition-group';
 import 'classnames';
 import '../../../../button/esm';
+import '../../../../typography/esm';

package/day-of-month-picker/esm/desktop.css

@@ -12,25 +12,19 @@
 
     /* Hard up */
 } :root {
-    --border-radius-l: 12px;
+    --border-radius-m: 8px;
 } :root {
     --gap-m: 16px;
 } :root {
 } :root {
 } :root {
-    --calendar-height: 290px;
-    --calendar-width: 312px;
+    --day-of-month-picker-height: 290px;
+    --day-of-month-picker-width: 312px;
 
-    /* День */
-
-    /* highlighted */
-
-    /* selected */
-
-    /* marker */
+    /* day */
 } .day-of-month-picker__component_189mh {
-    width: var(--calendar-width);
-    height: var(--calendar-height);
+    width: var(--day-of-month-picker-width);
+    height: var(--day-of-month-picker-height);
     display: flex;
     flex-direction: column;
     overflow: hidden;
@@ -40,11 +34,7 @@
         width: 100%;
         height: 321px
 }
-    } .day-of-month-picker__component_189mh.day-of-month-picker__responsive_189mh {
-        width: 100%
-    } .day-of-month-picker__component_189mh.day-of-month-picker__responsive_189mh .day-of-month-picker__container_189mh {
-            width: 100%;
-        } .day-of-month-picker__container_189mh {
+    } .day-of-month-picker__container_189mh {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -58,27 +48,10 @@
     } .day-of-month-picker__calendarContainer_189mh {
     display: inline-block;
     box-sizing: border-box;
-    border-radius: var(--calendar-input-popover-border-radius);
+    border-radius: var(--border-radius-m);
     border: 1px solid var(--color-light-border-secondary)
 } @media (max-width: 374px) { .day-of-month-picker__calendarContainer_189mh {
         width: 100%;
         min-width: 288px
 }
-    } .day-of-month-picker__calendarResponsive_189mh {
-    width: var(--calendar-width);
-} .day-of-month-picker__lastDay_189mh {
-    border-radius: var(--border-radius-l);
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 10px 0;
-    grid-gap: 10px;
-    grid-gap: 10px;
-    gap: 10px;
-    width: 280px;
-    height: 40px;
-    cursor: pointer;
-} .day-of-month-picker__lastDaySelected_189mh {
-    background: #121212;
-}
+    }

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

@@ -1,14 +1,11 @@
 export { DayOfMonthPickerDesktop } from './Component.desktop.js';
-import 'tslib';
 import 'react';
-import 'classnames';
+import '../../popover/esm';
 import '../../icon-button/esm';
 import '../../input/esm';
-import '../../popover/esm';
-import '../../typography/esm';
 import '@alfalab/icons-glyph/CalendarMIcon';
 import './components/days-table/Component.js';
-import 'react-transition-group';
+import 'classnames';
 import '../../button/esm';
-import 'react-merge-refs';
-import './useCalendar.js';
+import '../../typography/esm';
+import './components/day-input-field/DayInputField.js';

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

@@ -1,5 +1,4 @@
 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";