@alfalab/core-components 48.8.0-beta.0 → 48.9.0-beta.0

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

@@ -8,9 +8,10 @@ import { Input } from '../../../../input/modern';
 import { Popover } from '../../../../popover/modern';
 import { getDataTestId } from '../../../../shared/modern';
 import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
+import { CalendarSIcon } from '@alfalab/icons-glyph/CalendarSIcon';
 import { DATE_RANGE_SEPARATOR, DEFAULT_MAX_DATE, DEFAULT_MIN_DATE } from '../../consts.js';
 import { getValidRange, formatDate, formatDateRange, isCompleteDateRange, preventDefault, isCompleteDate, parseDateString, updateRange } from '../../utils/index.js';
-import { s as styles } from '../../index.module-c93d399c.js';
+import { s as styles } from '../../index.module-b946f738.js';
 import 'date-fns/differenceInDays';
 import 'date-fns/format';
 import 'date-fns/isSameDay';
@@ -121,13 +122,14 @@ const DateRangeInput = forwardRef(({ autoCorrection, breakpoint, wrapperClassNam
         }
         return null;
     };
+    const CalendarIcon = restProps.size === 40 ? CalendarSIcon : CalendarMIcon;
     return (React.createElement("div", { ...wrapperHandlers, className: cn(styles.wrapper, wrapperClassName, {
             [styles.block]: block,
         }), tabIndex: -1, "data-test-id": getDataTestId(dataTestId, 'wrapper') },
         React.createElement(Input, { ...restProps, clear: clear && isCompleteDateRange(inputValue), onClear: valueProp === undefined ? handleClear : onClear, dataTestId: dataTestId, breakpoint: breakpoint, wrapperRef: mergeRefs([inputWrapperRef, inputWrapperRefProp]), ref: mergeRefs([ref, inputRef]), value: inputValue, inputMode: 'decimal', onInput: handleInputChange, onBlur: handleBlur, error: error || getInnerError(), block: true, rightAddons: React.createElement(React.Fragment, null,
                 rightAddons,
-                picker && (React.createElement(CalendarMIcon, { onClick: onPickerClick, className: styles.calendarIcon, onMouseDown: preventDefault }))) }),
-        platform === 'desktop' ? (React.createElement(Popover, { offset: [0, 4], position: 'bottom-start', dataTestId: getDataTestId(dataTestId, 'popover'), ...popoverProps, open: open, anchorElement: inputWrapperRef, popperClassName: cn(styles.calendarContainer, popoverProps?.popperClassName), withTransition: false }, renderCalendar())) : (renderCalendar())));
+                picker && (React.createElement(CalendarIcon, { onClick: onPickerClick, className: cn(styles.calendarIcon, styles[`size-${restProps.size}`]), onMouseDown: preventDefault }))) }),
+        platform === 'desktop' ? (React.createElement(Popover, { offset: [0, 4], position: 'bottom-start', dataTestId: getDataTestId(dataTestId, 'popover'), ...popoverProps, open: open, anchorElement: inputWrapperRef.current, popperClassName: cn(styles.calendarContainer, popoverProps?.popperClassName), withTransition: false }, renderCalendar())) : (renderCalendar())));
 });
 
 export { DateRangeInput };

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

@@ -9,6 +9,7 @@ import '../../../../input/modern';
 import '../../../../popover/modern';
 import '../../../../shared/modern';
 import '@alfalab/icons-glyph/CalendarMIcon';
+import '@alfalab/icons-glyph/CalendarSIcon';
 import '../../consts.js';
 import '../../utils/index.js';
 import 'date-fns/differenceInDays';
@@ -16,4 +17,4 @@ import 'date-fns/format';
 import 'date-fns/isSameDay';
 import 'date-fns/parse';
 import 'date-fns/startOfDay';
-import '../../index.module-c93d399c.js';
+import '../../index.module-b946f738.js';

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

@@ -24,7 +24,8 @@ import '../components/date-input/Component.js';
 import '../../../input/modern';
 import '../../../popover/modern';
 import '@alfalab/icons-glyph/CalendarMIcon';
-import '../index.module-c93d399c.js';
+import '@alfalab/icons-glyph/CalendarSIcon';
+import '../index.module-b946f738.js';
 import '../components/date-range-input/Component.js';
 import 'date-fns/isAfter';
 import 'date-fns/startOfMonth';

package/universal-date-input/modern/desktop/index.js

@@ -25,7 +25,8 @@ import '../components/date-input/Component.js';
 import '../../../input/modern';
 import '../../../popover/modern';
 import '@alfalab/icons-glyph/CalendarMIcon';
-import '../index.module-c93d399c.js';
+import '@alfalab/icons-glyph/CalendarSIcon';
+import '../index.module-b946f738.js';
 import '../components/date-range-input/Component.js';
 import 'date-fns/isAfter';
 import 'date-fns/startOfMonth';

package/universal-date-input/modern/index-5712fce2.d.ts

@@ -1,10 +1,75 @@
-/// <reference types="react" />
 /// <reference types="react-transition-group" />
+/// <reference types="react" />
 import React from "react";
-import { FC, ReactNode, ComponentType, KeyboardEvent, MouseEvent, MutableRefObject, Ref, ButtonHTMLAttributes, ElementType, RefObject } from "react";
+import { FC, ReactNode, ComponentType, KeyboardEvent, MouseEvent, MutableRefObject, Ref, ButtonHTMLAttributes, ElementType, RefObject, ForwardRefExoticComponent, RefAttributes, HTMLAttributes } from "react";
 import { CalendarDesktopProps } from "./index-63dec22f";
 import { TransitionProps } from "react-transition-group/Transition";
 import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
+import { Color } from "./colors-facf1d2a";
+import { TextElementType, TextSkeletonProps } from "./types-1328ead9";
+import { Title, TitleProps } from "./index-03d088c4";
+import { TitleMobile, TitleMobileProps } from "./index-281accb7";
+type OmittedCalendarProps = "headerClassName" | "contentClassName";
+type OmittedCalendarContentProps = "className" | "defaultView" | "selectorView" | "rangeComplete" | "onMonthChange" | "onYearClick" | "onPeriodClick" | "dataTestId" | "hasHeader" | "responsive" | "showCurrentYearSelector";
+type CalendarContentProps = {
+    /**
+     * Обработчик клика на название месяца в мобильном календаре
+     */
+    onMonthTitleClick?: (event: React.MouseEvent<HTMLSpanElement>) => void;
+    /**
+     * Количество лет для генерации в обе стороны от текущего года
+     */
+    yearsAmount?: number;
+    /**
+     * Родительский контейнер для отслеживания скролла
+     */
+    scrollableContainer?: HTMLElement;
+} & Omit<CalendarDesktopProps, OmittedCalendarContentProps | OmittedCalendarProps>;
+type CalendarMobileProps = {
+    /**
+     * Заголовок календаря
+     */
+    title?: string;
+    /**
+     * Управление видимостью модалки
+     */
+    open: boolean;
+    /**
+     * Обработчик закрытия модалки
+     */
+    onClose?: () => void;
+    /**
+     * Разрешить выбор из недозаполненного диапазона дат.
+     */
+    allowSelectionFromEmptyRange?: boolean;
+    /**
+     * Нужно ли рендерить шапку
+     */
+    hasHeader?: boolean;
+    /**
+     * Обработчик клика на кнопку выбрать
+     */
+    onApply?: () => void;
+    /**
+     * При клике на месяц будут выбраны все доступные дни месяца
+     */
+    clickableMonth?: boolean;
+    /**
+     * Контент кнопки "Отмена"
+     * @default Отмена
+     */
+    cancelButtonContent?: string;
+    /**
+     * Контент кнопки "Выбрать"
+     * @default Выбрать
+     */
+    selectButtonContent?: string;
+    /**
+     * Контент кнопки "Сбросить"
+     * @default Сбросить
+     */
+    resetButtonContent?: string;
+} & CalendarContentProps & Pick<CalendarDesktopProps, OmittedCalendarContentProps>;
 type ResponsiveCalendarProps = CalendarDesktopProps & CalendarMobileProps & {
     /**
      * Контрольная точка, с нее начинается desktop версия
@@ -567,5 +632,87 @@ declare class GlobalStore {
     constructor();
     getModalStore: () => ModalStore;
 }
-export { ResponsiveCalendarProps, ResponsiveCalendarProps as CalendarProps, CalendarResponsive, CalendarResponsive as Calendar, ModalMobile, ModalMobileComponent as ModalComponentMobile, Content as ContentMobile, Header as HeaderMobile, Footer as FooterMobile, ControlsMobile, ModalMobileProps, Modal, ResponsiveContext, ModalContext, SIZE_TO_CLASSNAME_MAP, StackProps, Stack, usePortalContainer, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef, getModalStore, GlobalStore };
-export type { SavedStyle };
+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" | "component-primary" | "component-secondary" | "caps" | "tagline";
+    /**
+     * Цвет текста
+     */
+    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;
+    /**
+     * Количество строк
+     */
+    rowLimit?: 1 | 2 | 3;
+    /**
+     * Показать скелетон
+     */
+    showSkeleton?: boolean;
+    /**
+     * Пропы для скелетона
+     */
+    skeletonProps?: TextSkeletonProps;
+};
+type TextPTagProps = Omit<TextBaseProps, "tag" | "defaultMargins"> & {
+    tag?: "p";
+    defaultMargins?: boolean;
+};
+type TextProps = Omit<NativeProps, "color"> & (TextBaseProps | TextPTagProps);
+declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<TextElementType>>;
+declare const Typography: {
+    Title: FC<TitleProps>;
+    Text: ForwardRefExoticComponent<TextProps & RefAttributes<TextElementType>>;
+    TitleResponsive: FC<TitleResponsiveProps>;
+    TitleMobile: FC<TitleMobileProps>;
+};
+declare const typographyPresets: {
+    mobile: {
+        list: {
+            text: {
+                primary: {
+                    tag: string;
+                    view: string;
+                };
+                secondary: {
+                    tag: string;
+                    color: string;
+                    view: string;
+                };
+            };
+        };
+    };
+};
+export { ResponsiveCalendarProps, ResponsiveCalendarProps as CalendarProps, CalendarResponsive, CalendarResponsive as Calendar, ModalMobile, ModalMobileComponent as ModalComponentMobile, Content as ContentMobile, Header as HeaderMobile, Footer as FooterMobile, ControlsMobile, ModalMobileProps, Modal, ResponsiveContext, ModalContext, SIZE_TO_CLASSNAME_MAP, StackProps, Stack, usePortalContainer, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef, getModalStore, GlobalStore, Typography, Text, Title as TitleDesktop, TitleResponsive, TitleMobile, typographyPresets };
+export type { SavedStyle, TextProps };
+export type { TitleProps } from "./index-03d088c4";
+export type { Color } from "./colors-facf1d2a";

package/universal-date-input/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1wiwl */
+/* hash: 14cws */
 :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 */ /* 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 */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-neutral-300: #e7e8eb;
@@ -50,27 +50,29 @@
 
     /* border */
     --calendar-popover-border-radius: var(--border-radius-8);
-} .universal-date-input__wrapper_5rl11 {
+} .universal-date-input__wrapper_1i5qd {
     display: inline-block;
     outline: none;
     position: relative;
-} .universal-date-input__block_5rl11 {
+} .universal-date-input__block_1i5qd {
     width: 100%;
-} .universal-date-input__calendarIcon_5rl11 {
+} .universal-date-input__calendarIcon_1i5qd {
     width: 24px;
     height: 100%;
     display: block;
-    color: var(--calendar-icon-color);
-} .universal-date-input__calendarContainer_5rl11 {
+    color: var(--calendar-icon-color)
+} .universal-date-input__calendarIcon_1i5qd.universal-date-input__size-40_1i5qd {
+        width: 16px;
+    } .universal-date-input__calendarContainer_1i5qd {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-popover-border-radius);
     border: 1px solid var(--color-light-neutral-300);
     width: var(--calendar-width)
-} @media (max-width: 374px) { .universal-date-input__calendarContainer_5rl11 {
+} @media (max-width: 374px) { .universal-date-input__calendarContainer_1i5qd {
         width: 100%;
         min-width: 288px
 }
-    } .universal-date-input__blink_5rl11.universal-date-input__blink_5rl11.universal-date-input__blink_5rl11 {
+    } .universal-date-input__blink_1i5qd.universal-date-input__blink_1i5qd.universal-date-input__blink_1i5qd {
     background-color: var(--color-light-status-muted-negative);
 }

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

@@ -26,7 +26,8 @@ import './components/date-input/Component.js';
 import '../../input/modern';
 import '../../popover/modern';
 import '@alfalab/icons-glyph/CalendarMIcon';
-import './index.module-c93d399c.js';
+import '@alfalab/icons-glyph/CalendarSIcon';
+import './index.module-b946f738.js';
 import './components/date-range-input/Component.js';
 import 'date-fns/isAfter';
 import 'date-fns/startOfMonth';

package/universal-date-input/modern/index.module-b946f738.js

@@ -0,0 +1,4 @@
+const styles = {"wrapper":"universal-date-input__wrapper_1i5qd","block":"universal-date-input__block_1i5qd","calendarIcon":"universal-date-input__calendarIcon_1i5qd","size-40":"universal-date-input__size-40_1i5qd","calendarContainer":"universal-date-input__calendarContainer_1i5qd","blink":"universal-date-input__blink_1i5qd"};
+require('./index.css');
+
+export { styles as s };

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

@@ -24,7 +24,8 @@ import '../components/date-input/Component.js';
 import '../../../input/modern';
 import '../../../popover/modern';
 import '@alfalab/icons-glyph/CalendarMIcon';
-import '../index.module-c93d399c.js';
+import '@alfalab/icons-glyph/CalendarSIcon';
+import '../index.module-b946f738.js';
 import '../components/date-range-input/Component.js';
 import 'date-fns/isAfter';
 import 'date-fns/startOfMonth';

package/universal-date-input/modern/mobile/index.js

@@ -25,7 +25,8 @@ import '../components/date-input/Component.js';
 import '../../../input/modern';
 import '../../../popover/modern';
 import '@alfalab/icons-glyph/CalendarMIcon';
-import '../index.module-c93d399c.js';
+import '@alfalab/icons-glyph/CalendarSIcon';
+import '../index.module-b946f738.js';
 import '../components/date-range-input/Component.js';
 import 'date-fns/isAfter';
 import 'date-fns/startOfMonth';

package/universal-date-input/moderncssm/Component.responsive.js

@@ -25,6 +25,7 @@ import './components/date-input/Component.js';
 import '../../input/moderncssm';
 import '../../popover/moderncssm';
 import '@alfalab/icons-glyph/CalendarMIcon';
+import '@alfalab/icons-glyph/CalendarSIcon';
 import './index.module.css';
 import './components/date-input/date-input.desktop.module.css';
 import './components/date-range-input/Component.js';

package/universal-date-input/moderncssm/components/base-universal-date-input/Component.js

@@ -27,6 +27,7 @@ import '../../../../shared/moderncssm';
 import '../../../../input/moderncssm';
 import '../../../../popover/moderncssm';
 import '@alfalab/icons-glyph/CalendarMIcon';
+import '@alfalab/icons-glyph/CalendarSIcon';
 import '../date-input/date-input.desktop.module.css';
 import 'date-fns/isAfter';
 import 'date-fns/startOfMonth';

package/universal-date-input/moderncssm/components/base-universal-date-input/index.js

@@ -24,6 +24,7 @@ import '../date-input/Component.js';
 import '../../../../input/moderncssm';
 import '../../../../popover/moderncssm';
 import '@alfalab/icons-glyph/CalendarMIcon';
+import '@alfalab/icons-glyph/CalendarSIcon';
 import '../../index.module.css';
 import '../date-input/date-input.desktop.module.css';
 import '../date-range-input/Component.js';

package/universal-date-input/moderncssm/components/date-input/Component.js

@@ -6,6 +6,7 @@ import { Input } from '../../../../input/moderncssm';
 import { Popover } from '../../../../popover/moderncssm';
 import { getDataTestId } from '../../../../shared/moderncssm';
 import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
+import { CalendarSIcon } from '@alfalab/icons-glyph/CalendarSIcon';
 import { DATE_TIME_SEPARATOR, DEFAULT_MIN_DATE, DEFAULT_MAX_DATE, DATE_TIME_FORMAT, DATE_FORMAT } from '../../consts.js';
 import { isValidDate, isCompleteTime, formatDate, isCompleteDate, preventDefault, parseDateString } from '../../utils/index.js';
 import styles from '../../index.module.css';
@@ -117,13 +118,14 @@ const DateInput = forwardRef(({ autoCorrection, open, value: valueProp, inputWra
         }
         return null;
     };
+    const CalendarIcon = restProps.size === 40 ? CalendarSIcon : CalendarMIcon;
     return (React.createElement("div", { ...wrapperHandlers, className: cn(styles.wrapper, wrapperClassName, {
             [styles.block]: block,
         }), tabIndex: -1, "data-test-id": getDataTestId(dataTestId, 'wrapper') },
         React.createElement(Input, { ...restProps, clear: clear && isCompleteDate(inputDate) && isCompleteTime(inputTime, withTime), onClear: valueProp === undefined ? handleClear : onClear, breakpoint: breakpoint, dataTestId: dataTestId, wrapperRef: mergeRefs([inputWrapperRef, inputWrapperRefProp]), ref: mergeRefs([ref, inputRef]), value: inputValue, inputMode: 'decimal', onInput: handleInputChange, onBlur: handleBlur, error: error || getInnerError(), block: true, rightAddons: React.createElement(React.Fragment, null,
                 rightAddons,
-                picker && (React.createElement(CalendarMIcon, { onClick: onPickerClick, className: styles.calendarIcon, onMouseDown: preventDefault }))) }),
-        platform === 'desktop' ? (React.createElement(Popover, { offset: [0, 4], position: 'bottom-start', dataTestId: getDataTestId(dataTestId, 'popover'), ...popoverProps, open: open, anchorElement: inputWrapperRef, popperClassName: cn(styles.calendarContainer, popoverProps?.popperClassName, desktopStyles.calendarContainer), withTransition: false }, renderCalendar())) : (renderCalendar())));
+                picker && (React.createElement(CalendarIcon, { onClick: onPickerClick, className: cn(styles.calendarIcon, styles[`size-${restProps.size}`]), onMouseDown: preventDefault }))) }),
+        platform === 'desktop' ? (React.createElement(Popover, { offset: [0, 4], position: 'bottom-start', dataTestId: getDataTestId(dataTestId, 'popover'), ...popoverProps, open: open, anchorElement: inputWrapperRef.current, popperClassName: cn(styles.calendarContainer, popoverProps?.popperClassName, desktopStyles.calendarContainer), withTransition: false }, renderCalendar())) : (renderCalendar())));
 });
 
 export { DateInput };

package/universal-date-input/moderncssm/components/date-input/index.js

@@ -7,6 +7,7 @@ import '../../../../input/moderncssm';
 import '../../../../popover/moderncssm';
 import '../../../../shared/moderncssm';
 import '@alfalab/icons-glyph/CalendarMIcon';
+import '@alfalab/icons-glyph/CalendarSIcon';
 import '../../consts.js';
 import '../../utils/index.js';
 import 'date-fns/differenceInDays';

package/universal-date-input/moderncssm/components/date-range-input/Component.js

@@ -8,6 +8,7 @@ import { Input } from '../../../../input/moderncssm';
 import { Popover } from '../../../../popover/moderncssm';
 import { getDataTestId } from '../../../../shared/moderncssm';
 import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
+import { CalendarSIcon } from '@alfalab/icons-glyph/CalendarSIcon';
 import { DATE_RANGE_SEPARATOR, DEFAULT_MAX_DATE, DEFAULT_MIN_DATE } from '../../consts.js';
 import { getValidRange, formatDate, formatDateRange, isCompleteDateRange, preventDefault, isCompleteDate, parseDateString, updateRange } from '../../utils/index.js';
 import styles from '../../index.module.css';
@@ -121,13 +122,14 @@ const DateRangeInput = forwardRef(({ autoCorrection, breakpoint, wrapperClassNam
         }
         return null;
     };
+    const CalendarIcon = restProps.size === 40 ? CalendarSIcon : CalendarMIcon;
     return (React.createElement("div", { ...wrapperHandlers, className: cn(styles.wrapper, wrapperClassName, {
             [styles.block]: block,
         }), tabIndex: -1, "data-test-id": getDataTestId(dataTestId, 'wrapper') },
         React.createElement(Input, { ...restProps, clear: clear && isCompleteDateRange(inputValue), onClear: valueProp === undefined ? handleClear : onClear, dataTestId: dataTestId, breakpoint: breakpoint, wrapperRef: mergeRefs([inputWrapperRef, inputWrapperRefProp]), ref: mergeRefs([ref, inputRef]), value: inputValue, inputMode: 'decimal', onInput: handleInputChange, onBlur: handleBlur, error: error || getInnerError(), block: true, rightAddons: React.createElement(React.Fragment, null,
                 rightAddons,
-                picker && (React.createElement(CalendarMIcon, { onClick: onPickerClick, className: styles.calendarIcon, onMouseDown: preventDefault }))) }),
-        platform === 'desktop' ? (React.createElement(Popover, { offset: [0, 4], position: 'bottom-start', dataTestId: getDataTestId(dataTestId, 'popover'), ...popoverProps, open: open, anchorElement: inputWrapperRef, popperClassName: cn(styles.calendarContainer, popoverProps?.popperClassName), withTransition: false }, renderCalendar())) : (renderCalendar())));
+                picker && (React.createElement(CalendarIcon, { onClick: onPickerClick, className: cn(styles.calendarIcon, styles[`size-${restProps.size}`]), onMouseDown: preventDefault }))) }),
+        platform === 'desktop' ? (React.createElement(Popover, { offset: [0, 4], position: 'bottom-start', dataTestId: getDataTestId(dataTestId, 'popover'), ...popoverProps, open: open, anchorElement: inputWrapperRef.current, popperClassName: cn(styles.calendarContainer, popoverProps?.popperClassName), withTransition: false }, renderCalendar())) : (renderCalendar())));
 });
 
 export { DateRangeInput };

package/universal-date-input/moderncssm/components/date-range-input/index.js

@@ -9,6 +9,7 @@ import '../../../../input/moderncssm';
 import '../../../../popover/moderncssm';
 import '../../../../shared/moderncssm';
 import '@alfalab/icons-glyph/CalendarMIcon';
+import '@alfalab/icons-glyph/CalendarSIcon';
 import '../../consts.js';
 import '../../utils/index.js';
 import 'date-fns/differenceInDays';

package/universal-date-input/moderncssm/desktop/Component.desktop.js

@@ -24,6 +24,7 @@ import '../components/date-input/Component.js';
 import '../../../input/moderncssm';
 import '../../../popover/moderncssm';
 import '@alfalab/icons-glyph/CalendarMIcon';
+import '@alfalab/icons-glyph/CalendarSIcon';
 import '../index.module.css';
 import '../components/date-input/date-input.desktop.module.css';
 import '../components/date-range-input/Component.js';

package/universal-date-input/moderncssm/desktop/index.js

@@ -25,6 +25,7 @@ import '../components/date-input/Component.js';
 import '../../../input/moderncssm';
 import '../../../popover/moderncssm';
 import '@alfalab/icons-glyph/CalendarMIcon';
+import '@alfalab/icons-glyph/CalendarSIcon';
 import '../index.module.css';
 import '../components/date-input/date-input.desktop.module.css';
 import '../components/date-range-input/Component.js';

package/universal-date-input/moderncssm/index-5712fce2.d.ts

@@ -1,10 +1,75 @@
-/// <reference types="react" />
 /// <reference types="react-transition-group" />
+/// <reference types="react" />
 import React from "react";
-import { FC, ReactNode, ComponentType, KeyboardEvent, MouseEvent, MutableRefObject, Ref, ButtonHTMLAttributes, ElementType, RefObject } from "react";
+import { FC, ReactNode, ComponentType, KeyboardEvent, MouseEvent, MutableRefObject, Ref, ButtonHTMLAttributes, ElementType, RefObject, ForwardRefExoticComponent, RefAttributes, HTMLAttributes } from "react";
 import { CalendarDesktopProps } from "./index-63dec22f";
 import { TransitionProps } from "react-transition-group/Transition";
 import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
+import { Color } from "./colors-facf1d2a";
+import { TextElementType, TextSkeletonProps } from "./types-1328ead9";
+import { Title, TitleProps } from "./index-03d088c4";
+import { TitleMobile, TitleMobileProps } from "./index-281accb7";
+type OmittedCalendarProps = "headerClassName" | "contentClassName";
+type OmittedCalendarContentProps = "className" | "defaultView" | "selectorView" | "rangeComplete" | "onMonthChange" | "onYearClick" | "onPeriodClick" | "dataTestId" | "hasHeader" | "responsive" | "showCurrentYearSelector";
+type CalendarContentProps = {
+    /**
+     * Обработчик клика на название месяца в мобильном календаре
+     */
+    onMonthTitleClick?: (event: React.MouseEvent<HTMLSpanElement>) => void;
+    /**
+     * Количество лет для генерации в обе стороны от текущего года
+     */
+    yearsAmount?: number;
+    /**
+     * Родительский контейнер для отслеживания скролла
+     */
+    scrollableContainer?: HTMLElement;
+} & Omit<CalendarDesktopProps, OmittedCalendarContentProps | OmittedCalendarProps>;
+type CalendarMobileProps = {
+    /**
+     * Заголовок календаря
+     */
+    title?: string;
+    /**
+     * Управление видимостью модалки
+     */
+    open: boolean;
+    /**
+     * Обработчик закрытия модалки
+     */
+    onClose?: () => void;
+    /**
+     * Разрешить выбор из недозаполненного диапазона дат.
+     */
+    allowSelectionFromEmptyRange?: boolean;
+    /**
+     * Нужно ли рендерить шапку
+     */
+    hasHeader?: boolean;
+    /**
+     * Обработчик клика на кнопку выбрать
+     */
+    onApply?: () => void;
+    /**
+     * При клике на месяц будут выбраны все доступные дни месяца
+     */
+    clickableMonth?: boolean;
+    /**
+     * Контент кнопки "Отмена"
+     * @default Отмена
+     */
+    cancelButtonContent?: string;
+    /**
+     * Контент кнопки "Выбрать"
+     * @default Выбрать
+     */
+    selectButtonContent?: string;
+    /**
+     * Контент кнопки "Сбросить"
+     * @default Сбросить
+     */
+    resetButtonContent?: string;
+} & CalendarContentProps & Pick<CalendarDesktopProps, OmittedCalendarContentProps>;
 type ResponsiveCalendarProps = CalendarDesktopProps & CalendarMobileProps & {
     /**
      * Контрольная точка, с нее начинается desktop версия
@@ -567,5 +632,87 @@ declare class GlobalStore {
     constructor();
     getModalStore: () => ModalStore;
 }
-export { ResponsiveCalendarProps, ResponsiveCalendarProps as CalendarProps, CalendarResponsive, CalendarResponsive as Calendar, ModalMobile, ModalMobileComponent as ModalComponentMobile, Content as ContentMobile, Header as HeaderMobile, Footer as FooterMobile, ControlsMobile, ModalMobileProps, Modal, ResponsiveContext, ModalContext, SIZE_TO_CLASSNAME_MAP, StackProps, Stack, usePortalContainer, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef, getModalStore, GlobalStore };
-export type { SavedStyle };
+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" | "component-primary" | "component-secondary" | "caps" | "tagline";
+    /**
+     * Цвет текста
+     */
+    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;
+    /**
+     * Количество строк
+     */
+    rowLimit?: 1 | 2 | 3;
+    /**
+     * Показать скелетон
+     */
+    showSkeleton?: boolean;
+    /**
+     * Пропы для скелетона
+     */
+    skeletonProps?: TextSkeletonProps;
+};
+type TextPTagProps = Omit<TextBaseProps, "tag" | "defaultMargins"> & {
+    tag?: "p";
+    defaultMargins?: boolean;
+};
+type TextProps = Omit<NativeProps, "color"> & (TextBaseProps | TextPTagProps);
+declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<TextElementType>>;
+declare const Typography: {
+    Title: FC<TitleProps>;
+    Text: ForwardRefExoticComponent<TextProps & RefAttributes<TextElementType>>;
+    TitleResponsive: FC<TitleResponsiveProps>;
+    TitleMobile: FC<TitleMobileProps>;
+};
+declare const typographyPresets: {
+    mobile: {
+        list: {
+            text: {
+                primary: {
+                    tag: string;
+                    view: string;
+                };
+                secondary: {
+                    tag: string;
+                    color: string;
+                    view: string;
+                };
+            };
+        };
+    };
+};
+export { ResponsiveCalendarProps, ResponsiveCalendarProps as CalendarProps, CalendarResponsive, CalendarResponsive as Calendar, ModalMobile, ModalMobileComponent as ModalComponentMobile, Content as ContentMobile, Header as HeaderMobile, Footer as FooterMobile, ControlsMobile, ModalMobileProps, Modal, ResponsiveContext, ModalContext, SIZE_TO_CLASSNAME_MAP, StackProps, Stack, usePortalContainer, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef, getModalStore, GlobalStore, Typography, Text, Title as TitleDesktop, TitleResponsive, TitleMobile, typographyPresets };
+export type { SavedStyle, TextProps };
+export type { TitleProps } from "./index-03d088c4";
+export type { Color } from "./colors-facf1d2a";

package/universal-date-input/moderncssm/index.js

@@ -26,6 +26,7 @@ import './components/date-input/Component.js';
 import '../../input/moderncssm';
 import '../../popover/moderncssm';
 import '@alfalab/icons-glyph/CalendarMIcon';
+import '@alfalab/icons-glyph/CalendarSIcon';
 import './index.module.css';
 import './components/date-input/date-input.desktop.module.css';
 import './components/date-range-input/Component.js';

package/universal-date-input/moderncssm/index.module.css

@@ -40,8 +40,11 @@
     width: 24px;
     height: 100%;
     display: block;
-    color: var(--calendar-icon-color);
+    color: var(--calendar-icon-color)
 }
+.calendarIcon.size-40 {
+        width: 16px;
+    }
 .calendarContainer {
     display: inline-block;
     box-sizing: border-box;

package/universal-date-input/moderncssm/mobile/Component.mobile.js

@@ -24,6 +24,7 @@ import '../components/date-input/Component.js';
 import '../../../input/moderncssm';
 import '../../../popover/moderncssm';
 import '@alfalab/icons-glyph/CalendarMIcon';
+import '@alfalab/icons-glyph/CalendarSIcon';
 import '../index.module.css';
 import '../components/date-input/date-input.desktop.module.css';
 import '../components/date-range-input/Component.js';