@alfalab/core-components 41.12.0 → 42.0.0-beta.1

package/date-range-input/modern/Component-ebda875c.d.ts

@@ -0,0 +1,167 @@
+/// <reference types="react" />
+import React from "react";
+import { FC, ForwardRefExoticComponent, RefAttributes, HTMLAttributes } from "react";
+declare const colors: readonly [
+    "tertiary",
+    "disabled",
+    "accent",
+    "primary",
+    "attention",
+    "positive",
+    "secondary",
+    "tertiary-inverted",
+    "primary-inverted",
+    "secondary-inverted",
+    "link",
+    "negative",
+    "static-primary-light",
+    "static-secondary-light",
+    "static-tertiary-light",
+    "static-primary-dark",
+    "static-secondary-dark",
+    "static-tertiary-dark",
+    "static-accent"
+];
+type Color = (typeof colors)[number];
+type TextElementType = HTMLParagraphElement | HTMLSpanElement | HTMLDivElement;
+type NativeProps = HTMLAttributes<HTMLSpanElement>;
+type TextBaseProps = {
+    /**
+     * [Вариант начертания](https://core-ds.github.io/core-components/master/?path=/docs/tokens-assets-типографика--docs)
+     */
+    view?: "primary-large" | "primary-medium" | "primary-small" | "secondary-large" | "secondary-medium" | "secondary-small" | "component" | "caps";
+    /**
+     * Цвет текста
+     */
+    color?: Color;
+    /**
+     * Толщина шрифта
+     */
+    weight?: "regular" | "medium" | "bold";
+    /**
+     * Делает цифры моноширинными
+     */
+    monospaceNumbers?: boolean;
+    /**
+     * HTML тег
+     */
+    tag?: "span" | "div";
+    /**
+     * Css-класс для стилизации (native prop)
+     */
+    className?: string;
+    /**
+     * Id компонента для тестов
+     */
+    dataTestId?: string;
+    /**
+     * Контент (native prop)
+     */
+    children?: React.ReactNode;
+    /**
+     * Добавляет отступы к тэгу 'p'
+     */
+    defaultMargins?: never;
+    /**
+     * Количество строк (не поддерживает IE)
+     */
+    rowLimit?: 1 | 2 | 3;
+};
+type TextPTagProps = Omit<TextBaseProps, "tag" | "defaultMargins"> & {
+    tag?: "p";
+    defaultMargins?: boolean;
+};
+type TextProps = Omit<NativeProps, "color"> & (TextBaseProps | TextPTagProps);
+type NativeProps$0 = HTMLAttributes<HTMLHeadingElement>;
+type TitleProps = Omit<NativeProps$0, "color"> & {
+    /**
+     * HTML тег
+     */
+    tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div";
+    /**
+     * [Вариант начертания](https://core-ds.github.io/core-components/master/?path=/docs/guidelines-typography--page)
+     */
+    view?: "xlarge" | "large" | "medium" | "small" | "xsmall";
+    /**
+     * Цвет текста
+     */
+    color?: Color;
+    /**
+     * Толщина шрифта
+     */
+    weight?: "regular" | "medium" | "bold";
+    /**
+     * Шрифт текста
+     */
+    font?: "styrene" | "system";
+    /**
+     * Добавляет отступы
+     */
+    defaultMargins?: boolean;
+    /**
+     * Css-класс для стилизации (native prop)
+     */
+    className?: string;
+    /**
+     * Id компонента для тестов
+     */
+    dataTestId?: string;
+    /**
+     * Контент (native prop)
+     */
+    children?: React.ReactNode;
+    /**
+     * Количество строк (не поддерживает IE)
+     */
+    rowLimit?: 1 | 2 | 3;
+};
+type TitleMobileProps = Omit<TitleProps, "defaultMargins">;
+declare const Typography: {
+    Title: FC<TitleProps>;
+    Text: ForwardRefExoticComponent<TextProps & RefAttributes<TextElementType>>;
+    TitleResponsive: FC<TitleProps>;
+    TitleMobile: FC<TitleMobileProps>;
+};
+declare const typographyPresets: {
+    mobile: {
+        list: {
+            text: {
+                primary: {
+                    tag: string;
+                    view: string;
+                };
+                secondary: {
+                    tag: string;
+                    color: string;
+                    view: string;
+                };
+            };
+        };
+    };
+};
+declare const TitleResponsive: FC<TitleProps>;
+interface BackArrowAddonProps extends React.HTMLAttributes<HTMLButtonElement> {
+    /**
+     * Текст после иконки
+     */
+    text?: string;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Вид компонента
+     */
+    view: 'mobile' | 'desktop';
+    /**
+     * Прозрачность текста
+     */
+    textOpacity?: number;
+    /**
+     * Обработчик клика
+     */
+    onClick?: () => void;
+}
+declare const BackArrowAddon: React.FC<BackArrowAddonProps>;
+export { Typography, typographyPresets, TitleResponsive, BackArrowAddonProps, BackArrowAddon };
+export type { TitleProps, TextProps, Color };

package/date-range-input/modern/Component.desktop-8b5756fe.d.ts

@@ -0,0 +1,197 @@
+/// <reference types="react" />
+import React from "react";
+import { FC, ReactNode, MouseEvent } from "react";
+import { SelectorView, Month, DayAddons, View } from "./typings-5684a67d";
+import { PeriodType } from "./index-f034f741";
+type HeaderProps = {
+    /**
+     * Вид шапки — месяц и год или только месяц
+     */
+    view?: SelectorView;
+    /**
+     * Отображать тень? (нужна при прокрутке)
+     */
+    withShadow?: boolean;
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+};
+declare const Header: FC<HeaderProps>;
+type MonthYearHeaderProps = {
+    /**
+     * Активная дата
+     */
+    value?: Date;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Обработчик нажатия на кнопку месяца
+     */
+    onMonthClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Обработчик нажатия на кнопку года
+     */
+    onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const MonthYearHeader: FC<MonthYearHeaderProps>;
+type MonthsTableProps = {
+    /**
+     * Массив месяцев
+     */
+    months?: Month[];
+    /**
+     * Выбранный месяц
+     */
+    selectedMonth?: Date;
+    /**
+     * Доп пропсы для переданного месяца
+     */
+    getMonthProps: (day: Month) => Record<string, unknown>;
+    /**
+     * Должен ли календарь подстраиваться под ширину родителя.
+     */
+    responsive?: boolean;
+};
+declare const MonthsTable: FC<MonthsTableProps>;
+declare const formatPeriod: (valueFrom: Date, valueTo: Date, periodType: PeriodType, showCurrentYear?: boolean) => string;
+declare const getYearSelectorValue: (valueFrom: Date | undefined, showCurrentYear: boolean) => number | "";
+declare const shiftValues: (valueFrom: Date, valueTo: Date, periodType: PeriodType, direction: "prev" | "next") => {
+    valueFrom: Date;
+    valueTo: Date;
+};
+type YearsTableProps = {
+    /**
+     * Массив лет
+     */
+    years?: Date[];
+    /**
+     * Выбранный год
+     */
+    selectedYear?: Date;
+    /**
+     * Доп. пропсы для переданного года
+     */
+    getYearProps: (year: Date) => Record<string, unknown>;
+    /**
+     * Обработчик скролла
+     */
+    onScroll: (scrollTop: number) => void;
+    /**
+     * Должен ли календарь подстраиваться под ширину родителя.
+     */
+    responsive?: boolean;
+};
+declare const YearsTable: FC<YearsTableProps>;
+type CalendarDesktopProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Вид по умолчанию (выбор дней, месяцев, лет)
+     */
+    defaultView?: View;
+    /**
+     * Вид шапки — месяц и год или только месяц
+     */
+    selectorView?: SelectorView;
+    /**
+     * Выбранная дата (timestamp)
+     */
+    value?: number;
+    /**
+     * Открытый месяц (timestamp)
+     */
+    month?: number;
+    /**
+     * Месяц, открытый по умолчанию (timestamp)
+     */
+    defaultMonth?: number;
+    /**
+     * Минимальная дата, доступная для выбора (timestamp)
+     */
+    minDate?: number;
+    /**
+     * Максимальная дата, доступная для выбора (timestamp)
+     */
+    maxDate?: number;
+    /**
+     * Начало выделенного периода (timestamp)
+     */
+    selectedFrom?: number;
+    /**
+     * Конец выделенного периода (timestamp)
+     */
+    selectedTo?: number;
+    /**
+     * Индикатор, что выбран полный период
+     */
+    rangeComplete?: boolean;
+    /**
+     * Список событий
+     */
+    events?: Array<Date | number>;
+    /**
+     * Список отключенных для выбора дней.
+     */
+    offDays?: Array<Date | number>;
+    /**
+     * Список выходных
+     */
+    holidays?: Array<Date | number>;
+    /**
+     * Обработчик изменения месяца (или года)
+     */
+    onMonthChange?: (month: number) => void;
+    /**
+     * Обработчик выбора даты
+     */
+    onChange?: (date?: number) => void;
+    /**
+     * Обработчик нажатия на кнопку месяца
+     */
+    onMonthClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Обработчик нажатия на кнопку года
+     */
+    onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Обработчик нажатия на период
+     */
+    onPeriodClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Нужно ли рендерить шапку календаря
+     */
+    hasHeader?: boolean;
+    /**
+     * Должен ли календарь подстраиваться под ширину родителя.
+     */
+    responsive?: boolean;
+    /**
+     * Дополнительный контент под числом
+     */
+    dayAddons?: DayAddons[];
+    /**
+     * Форма ячейки дня
+     */
+    shape?: 'rounded' | 'rectangular';
+    /**
+     * Отображать ли текущий год, если selectorView 'month-only'
+     * @default false
+     */
+    showCurrentYearSelector?: boolean;
+};
+declare const CalendarDesktop: React.ForwardRefExoticComponent<CalendarDesktopProps & React.RefAttributes<HTMLDivElement>>;
+export { HeaderProps, Header, MonthYearHeaderProps, MonthYearHeader, MonthsTableProps, MonthsTable, formatPeriod, getYearSelectorValue, shiftValues, YearsTableProps, YearsTable, CalendarDesktopProps, CalendarDesktop };
+export * from "./Component-ebda875c";

package/date-range-input/modern/Component.desktop.js

@@ -1,10 +1,11 @@
 import React, { forwardRef } from 'react';
+import { CalendarDesktop } from '../../calendar/modern/desktop';
 import { DateRangeInput } from './components/date-range-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
 import 'date-fns';
 import 'date-fns/isValid';
-import '../../calendar/modern';
+import '../../calendar/modern/shared';
 import '../../icon-button/modern';
 import '../../input/modern';
 import '../../popover/modern';
@@ -13,6 +14,6 @@ import '@alfalab/icons-glyph/CalendarMIcon';
 import 'date-fns/parse';
 import './utils/format.js';
 
-const DateRangeInputDesktop = forwardRef((props, ref) => React.createElement(DateRangeInput, { ...props, ref: ref }));
+const DateRangeInputDesktop = forwardRef((props, ref) => React.createElement(DateRangeInput, { Calendar: CalendarDesktop, ...props, ref: ref }));
 
 export { DateRangeInputDesktop };

package/date-range-input/modern/Component.mobile.js

@@ -1,10 +1,11 @@
 import React, { forwardRef } from 'react';
-import { CalendarMobile } from '../../calendar/modern';
+import { CalendarMobile } from '../../calendar/modern/mobile';
 import { DateRangeInput } from './components/date-range-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
 import 'date-fns';
 import 'date-fns/isValid';
+import '../../calendar/modern/shared';
 import '../../icon-button/modern';
 import '../../input/modern';
 import '../../popover/modern';

package/date-range-input/modern/Component.responsive.js

@@ -2,17 +2,19 @@ import React, { forwardRef } from 'react';
 import { useMedia } from '@alfalab/hooks';
 import { DateRangeInputDesktop } from './Component.desktop.js';
 import { DateRangeInputMobile } from './Component.mobile.js';
+import '../../calendar/modern/desktop';
 import './components/date-range-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
 import 'date-fns';
 import 'date-fns/isValid';
-import '../../calendar/modern';
+import '../../calendar/modern/shared';
 import '../../icon-button/modern';
 import '../../input/modern';
 import '../../popover/modern';
 import '@alfalab/icons-glyph/CalendarMIcon';
 import 'date-fns/parse';
+import '../../calendar/modern/mobile';
 import './utils/format.js';
 
 const DateRangeInputResponsive = forwardRef(({ breakpoint = 1024, ...restProps }, ref) => {

package/date-range-input/modern/components/date-range-input/Component.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import React from 'react';
 import { ChangeEvent, ElementType } from "react";
-import { CalendarMobileProps, CalendarProps } from "../../../../calendar";
+import { CalendarDesktopProps } from "../../desktop-63dec22f";
+import { CalendarMobileProps } from "../../mobile-c219f8ca";
 import { InputProps } from "../../../../input";
 import { PopoverProps } from "../../../../popover";
 type ConditionalProps = {
@@ -53,7 +54,7 @@ type DateRangeInputProps = Omit<InputProps, 'onChange'> & ConditionalProps & {
     /**
      * Доп. пропсы для календаря
      */
-    calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarMobileProps & Record<string, unknown>);
+    calendarProps?: (CalendarDesktopProps & Record<string, unknown>) | (CalendarMobileProps & Record<string, unknown>);
     /**
      * Месяц в календаре по умолчанию (timestamp)
      */

package/date-range-input/modern/components/date-range-input/Component.js

@@ -3,7 +3,7 @@ import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 import { startOfMonth } from 'date-fns';
 import dateFnsIsValid from 'date-fns/isValid';
-import { usePeriod, Calendar } from '../../../../calendar/modern';
+import { usePeriod } from '../../../../calendar/modern/shared';
 import { IconButton } from '../../../../icon-button/modern';
 import { Input } from '../../../../input/modern';
 import { Popover } from '../../../../popover/modern';
@@ -16,7 +16,7 @@ const styles = {"component":"date-range-input__component_1qgri","calendarContain
 require('./index.css');
 
 /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
-const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverClassName, disabled, readOnly, picker, defaultValue = '', value: propValue, onChange, onComplete, onClose, rightAddons, useAnchorWidth, block, popoverPosition = 'bottom-start', zIndexPopover, preventFlip, Calendar: Calendar$1 = Calendar, calendarProps = {}, defaultMonth, minDate = calendarProps.minDate, maxDate = calendarProps.maxDate, offDays = calendarProps.offDays || [], events = calendarProps.events || [], defaultOpen = false, view = 'desktop', ...restProps }, ref) => {
+const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverClassName, disabled, readOnly, picker, defaultValue = '', value: propValue, onChange, onComplete, onClose, rightAddons, useAnchorWidth, block, popoverPosition = 'bottom-start', zIndexPopover, preventFlip, Calendar, calendarProps = {}, defaultMonth, minDate = calendarProps.minDate, maxDate = calendarProps.maxDate, offDays = calendarProps.offDays || [], events = calendarProps.events || [], defaultOpen = false, view = 'desktop', ...restProps }, ref) => {
     const inputRef = useRef(null);
     const iconRef = useRef(null);
     const calendarRef = useRef(null);
@@ -192,10 +192,10 @@ const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverCla
     const renderCalendar = () => {
         const activeMonth = (selectedTo && startOfMonth(selectedTo)) ||
             (selectedFrom && startOfMonth(selectedFrom));
-        return (
+        return Calendar ? (
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions
         React.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
-            React.createElement(Calendar$1, { ...calendarProps, responsive: calendarResponsive, open: open, onClose: handleCalendarClose, ref: calendarRef, defaultMonth: activeMonth || defaultMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })));
+            React.createElement(Calendar, { ...calendarProps, responsive: calendarResponsive, open: open, onClose: handleCalendarClose, ref: calendarRef, defaultMonth: activeMonth || defaultMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events }))) : null;
     };
     return (React.createElement("div", { className: cn(styles.component, className, {
             [styles.block]: block,

package/date-range-input/modern/components/date-range-input/index.js

@@ -4,7 +4,7 @@ import 'react-merge-refs';
 import 'classnames';
 import 'date-fns';
 import 'date-fns/isValid';
-import '../../../../calendar/modern';
+import '../../../../calendar/modern/shared';
 import '../../../../icon-button/modern';
 import '../../../../input/modern';
 import '../../../../popover/modern';

package/date-range-input/modern/desktop-63dec22f.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.desktop-8b5756fe";
+export {};

package/date-range-input/modern/desktop.js

@@ -1,11 +1,12 @@
 export { DateRangeInputDesktop } from './Component.desktop.js';
 import 'react';
+import '../../calendar/modern/desktop';
 import './components/date-range-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
 import 'date-fns';
 import 'date-fns/isValid';
-import '../../calendar/modern';
+import '../../calendar/modern/shared';
 import '../../icon-button/modern';
 import '../../input/modern';
 import '../../popover/modern';

package/date-range-input/modern/index-89a3cf4c.d.ts

@@ -0,0 +1,3 @@
+declare const isClient: () => boolean;
+declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
+export { isClient, getDataTestId };

package/date-range-input/modern/index-ebda875c.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import React from "react";
+import { ButtonHTMLAttributes, ElementType, FC } from "react";
+interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Вид компонента
+     */
+    view: "desktop" | "mobile";
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Позиция крестика
+     */
+    align?: "left" | "right";
+    /**
+     * Фиксирует крестик
+     */
+    sticky?: boolean;
+    /**
+     * Иконка
+     */
+    icon?: ElementType;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Коллбэк закрытия.
+     */
+    onClose?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick") => void;
+}
+declare const Closer: FC<CloserProps>;
+export { CloserProps, Closer };

package/date-range-input/modern/index-f034f741.d.ts

@@ -0,0 +1,80 @@
+import { FC, MouseEvent } from "react";
+type PeriodType = "range" | "day" | "week" | "month" | "quarter" | "year";
+type PeriodSliderProps = {
+    /**
+     * Активная дата или период
+     */
+    value?: Date | [
+        Date,
+        Date
+    ];
+    /**
+     * Тип периода
+     */
+    periodType?: PeriodType;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Отключает кнопку назад
+     */
+    prevArrowDisabled?: boolean;
+    /**
+     * Отключает кнопку вперед
+     */
+    nextArrowDisabled?: boolean;
+    /**
+     * Скрывает заблокированные кнопки
+     */
+    hideDisabledArrows?: boolean;
+    /**
+     * Возможность выбора месяца и года, если periodType 'month'
+     */
+    isMonthAndYearSelectable?: boolean;
+    /**
+     * Отображать ли текущий год, если isMonthAndYearSelectable true
+     */
+    showCurrentYearSelector?: 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;
+    /**
+     * Обработчик нажатия на период
+     */
+    onPeriodClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const PeriodSlider: FC<PeriodSliderProps>;
+export { PeriodType, PeriodSliderProps, PeriodSlider };
+export { shiftValues } from "./Component.desktop-8b5756fe";

package/date-range-input/modern/index.d.ts

@@ -1,2 +1,3 @@
-export { DateRangeInputResponsive as DateRangeInput } from "./responsive";
-export type { DateRangeInputResponsiveProps as DateRangeInputProps } from "./responsive";
+export { DateRangeInputResponsive as DateRangeInput } from "./Component.responsive";
+export type { DateRangeInputResponsiveProps as DateRangeInputProps } from "./Component.responsive";
+export {};

package/date-range-input/modern/index.js

@@ -2,16 +2,18 @@ export { DateRangeInputResponsive as DateRangeInput } from './Component.responsi
 import 'react';
 import '@alfalab/hooks';
 import './Component.desktop.js';
+import '../../calendar/modern/desktop';
 import './components/date-range-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
 import 'date-fns';
 import 'date-fns/isValid';
-import '../../calendar/modern';
+import '../../calendar/modern/shared';
 import '../../icon-button/modern';
 import '../../input/modern';
 import '../../popover/modern';
 import '@alfalab/icons-glyph/CalendarMIcon';
 import 'date-fns/parse';
 import './Component.mobile.js';
+import '../../calendar/modern/mobile';
 import './utils/format.js';

package/date-range-input/modern/mobile-c219f8ca.d.ts

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

package/date-range-input/modern/mobile.js

@@ -1,11 +1,12 @@
 export { DateRangeInputMobile } from './Component.mobile.js';
 import 'react';
-import '../../calendar/modern';
+import '../../calendar/modern/mobile';
 import './components/date-range-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
 import 'date-fns';
 import 'date-fns/isValid';
+import '../../calendar/modern/shared';
 import '../../icon-button/modern';
 import '../../input/modern';
 import '../../popover/modern';