@alfalab/core-components-date-range-input 3.0.10 → 3.0.12

package/esm/Component.responsive.js

@@ -8,8 +8,8 @@ import '@alfalab/core-components-input/esm/desktop';
 import './components/date-range-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
-import 'date-fns';
 import 'date-fns/isValid';
+import 'date-fns/startOfMonth';
 import '@alfalab/core-components-calendar/esm/shared';
 import '@alfalab/core-components-icon-button/esm';
 import '@alfalab/core-components-popover/esm';

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

@@ -2,8 +2,8 @@ import { __rest, __assign } from 'tslib';
 import React, { useRef, useState, useEffect } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
-import { startOfMonth } from 'date-fns';
 import dateFnsIsValid from 'date-fns/isValid';
+import startOfMonth from 'date-fns/startOfMonth';
 import { usePeriod } from '@alfalab/core-components-calendar/esm/shared';
 import { IconButton } from '@alfalab/core-components-icon-button/esm';
 import { Popover } from '@alfalab/core-components-popover/esm';
@@ -12,7 +12,7 @@ import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
 import { parseTimestampToDate, DATE_FORMAT, format, parseDateString, DATE_MASK, isCompleteDateInput, isValid } from '../../utils/format.js';
 import 'date-fns/parse';
 
-var styles = {"component":"date-range-input__component_anmtt","calendarContainer":"date-range-input__calendarContainer_anmtt","calendarResponsive":"date-range-input__calendarResponsive_anmtt","block":"date-range-input__block_anmtt","calendarIcon":"date-range-input__calendarIcon_anmtt"};
+var styles = {"component":"date-range-input__component_1hqhh","calendarContainer":"date-range-input__calendarContainer_1hqhh","calendarResponsive":"date-range-input__calendarResponsive_1hqhh","block":"date-range-input__block_1hqhh","calendarIcon":"date-range-input__calendarIcon_1hqhh"};
 require('./index.css')
 
 var DateRangeInput = React.forwardRef(function (_a, ref) {
@@ -203,12 +203,13 @@ var DateRangeInput = React.forwardRef(function (_a, ref) {
     return (React.createElement("div", { className: cn(styles.component, className, (_b = {},
             _b[styles.block] = block,
             _b)), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
-        InputComponent ? (React.createElement(InputComponent, __assign({}, restProps, { block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, disableUserInput: disableUserInput, rightAddons: React.createElement(React.Fragment, null,
+        InputComponent ? (React.createElement(InputComponent, __assign({ autoComplete: picker ? 'off' : undefined }, restProps, { block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, disableUserInput: disableUserInput, rightAddons: React.createElement(React.Fragment, null,
                 rightAddons,
                 picker && (React.createElement(IconButton, { className: styles.calendarIcon, ref: iconRef, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 's' }))) }))) : null,
-        picker && (React.createElement(Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn(styles.calendarContainer, (_c = {},
-                _c[styles.calendarResponsive] = calendarResponsive,
-                _c)), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
+        picker &&
+            (view === 'desktop' ? (React.createElement(Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn(styles.calendarContainer, (_c = {},
+                    _c[styles.calendarResponsive] = calendarResponsive,
+                    _c)), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar())) : (renderCalendar()))));
 });
 
 export { DateRangeInput };

package/esm/components/date-range-input/index.css

@@ -1,4 +1,4 @@
-/* hash: 1iaxs */
+/* hash: 1vwf3 */
 :root {
 } /* deprecated */ :root {
     --color-light-border-secondary: #e9e9eb; /* 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 */
@@ -41,24 +41,24 @@
     /* marker */
 } :root {
     --calendar-popover-border-radius: var(--border-radius-m);
-} .date-range-input__component_anmtt {
+} .date-range-input__component_1hqhh {
     display: inline-block;
     outline: none;
     position: relative;
-} .date-range-input__calendarContainer_anmtt {
+} .date-range-input__calendarContainer_1hqhh {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-popover-border-radius);
     border: 1px solid var(--color-light-border-secondary)
-} @media (max-width: 374px) { .date-range-input__calendarContainer_anmtt {
+} @media (max-width: 374px) { .date-range-input__calendarContainer_1hqhh {
         width: 100%;
         min-width: 288px
 }
-    } .date-range-input__calendarResponsive_anmtt {
+    } .date-range-input__calendarResponsive_1hqhh {
     width: var(--calendar-width);
-} .date-range-input__block_anmtt {
+} .date-range-input__block_1hqhh {
     width: 100%;
-} .date-range-input__calendarIcon_anmtt {
+} .date-range-input__calendarIcon_1hqhh {
     margin-right: var(--gap-s-neg);
     height: 100%;
 }

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

@@ -3,8 +3,8 @@ import 'tslib';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';
-import 'date-fns';
 import 'date-fns/isValid';
+import 'date-fns/startOfMonth';
 import '@alfalab/core-components-calendar/esm/shared';
 import '@alfalab/core-components-icon-button/esm';
 import '@alfalab/core-components-popover/esm';

package/esm/desktop-63dec22f.d.ts

@@ -1,2 +1,2 @@
-export * from "./Component.desktop-2e2b2125";
+export * from "./Component.desktop-b5b4c59f";
 export {};

package/esm/desktop-69921c40.d.ts

@@ -0,0 +1,2 @@
+export { ButtonDesktop } from "./Component.desktop-0aa4e915";
+export type { CommonButtonProps as ButtonDesktopProps } from "./typings-89f0cb07";

package/esm/desktop.js

@@ -6,8 +6,8 @@ import '@alfalab/core-components-input/esm/desktop';
 import './components/date-range-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
-import 'date-fns';
 import 'date-fns/isValid';
+import 'date-fns/startOfMonth';
 import '@alfalab/core-components-calendar/esm/shared';
 import '@alfalab/core-components-icon-button/esm';
 import '@alfalab/core-components-popover/esm';

package/{index-72308007.d.ts → esm/index-10db897e.d.ts}

@@ -10,10 +10,6 @@ declare function easeInOutQuad(x: number): number;
 declare const easingFns: {
     easeInOutQuad: typeof easeInOutQuad;
 };
-declare function disableUserInput<T>(disabled: boolean | undefined, event: React.KeyboardEvent<T>): void;
-declare const inputUtils: {
-    disableUserInput: typeof disableUserInput;
-};
 /**
  * Возвращает true, если значение равно null или undefined
  */
@@ -51,4 +47,4 @@ declare const maskUtils: {
     prefixPostprocessor: typeof prefixPostprocessor;
     caretGuard: typeof caretGuard;
 };
-export { isClient, getDataTestId, createPaddingStyle, easingFns, inputUtils, fnUtils, maskUtils };
+export { isClient, getDataTestId, createPaddingStyle, easingFns, fnUtils, maskUtils };

package/{cssm/Component.responsive-2e2b2125.d.ts → esm/index-3109f463.d.ts}

@@ -1,7 +1,4 @@
-/// <reference types="react" />
-import React from "react";
 import { FC, ReactNode } from "react";
-import { ButtonProps } from "./typings-9211a437";
 type MqProps = {
     /**
      * Media выражение или кастомный запрос из `mq.json`, например `--mobile`.
@@ -62,5 +59,4 @@ declare const _exports: {
     "--desktop-xl": string;
     "--desktop": string;
 };
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
-export { _exports as default, MqProps, Mq, useMatchMedia, getMatchMedia, releaseMatchMedia, isPointerEventsSupported, isTouchSupported, Button };
+export { _exports as default, MqProps, Mq, useMatchMedia, getMatchMedia, releaseMatchMedia, isPointerEventsSupported, isTouchSupported };

package/esm/index-89f0cb07.d.ts

@@ -0,0 +1,2 @@
+export { Button } from "./Component.responsive-0aa4e915";
+export type { ButtonProps } from "./typings-89f0cb07";

package/esm/index-ebda875c.d.ts

@@ -1,35 +1,2 @@
 /// <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 };
+export * from "./Component-10db897e";

package/esm/index-f034f741.d.ts

@@ -76,5 +76,8 @@ type PeriodSliderProps = {
     dataTestId?: string;
 };
 declare const PeriodSlider: FC<PeriodSliderProps>;
-export { PeriodType, PeriodSliderProps, PeriodSlider };
-export { shiftValues } from "./Component.desktop-8b5756fe";
+declare const shiftValues: (valueFrom: Date, valueTo: Date, periodType: PeriodType, direction: "prev" | "next") => {
+    valueFrom: Date;
+    valueTo: Date;
+};
+export { PeriodType, PeriodSliderProps, PeriodSlider, shiftValues };

package/esm/index.js

@@ -8,8 +8,8 @@ import '@alfalab/core-components-input/esm/desktop';
 import './components/date-range-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
-import 'date-fns';
 import 'date-fns/isValid';
+import 'date-fns/startOfMonth';
 import '@alfalab/core-components-calendar/esm/shared';
 import '@alfalab/core-components-icon-button/esm';
 import '@alfalab/core-components-popover/esm';

package/esm/mobile-c219f8ca.d.ts

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

package/esm/mobile.js

@@ -6,8 +6,8 @@ import '@alfalab/core-components-input/esm/mobile';
 import './components/date-range-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
-import 'date-fns';
 import 'date-fns/isValid';
+import 'date-fns/startOfMonth';
 import '@alfalab/core-components-calendar/esm/shared';
 import '@alfalab/core-components-icon-button/esm';
 import '@alfalab/core-components-popover/esm';

package/{cssm/types-83e2bd9e.d.ts → esm/types-1c79e231.d.ts}

@@ -14,7 +14,7 @@ type NavigationBarProps = {
     /**
      * Подзаголовок (доступен только в мобильной версии)
      */
-    subtitle?: string;
+    subtitle?: ReactNode;
     /**
      * Размер заголовка (compact доступен только в мобильной версии)
      */

package/{typings-9211a437.d.ts → esm/typings-89f0cb07.d.ts}

@@ -69,6 +69,8 @@ type ComponentProps = {
      * Дочерние элементы.
      */
     children?: ReactNode;
+};
+type PrivateButtonProps = {
     /**
      * Основные стили компонента.
      */
@@ -80,16 +82,12 @@ type ComponentProps = {
      */
     colorStylesMap: StyleColors;
 };
-type AnchorBaseButtonProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
-type NativeBaseButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
-type BaseButtonProps = Partial<AnchorBaseButtonProps | NativeBaseButtonProps>;
-type AnchorButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & AnchorHTMLAttributes<HTMLAnchorElement>;
-type NativeButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & ButtonHTMLAttributes<HTMLButtonElement>;
-type ButtonProps = Partial<AnchorButtonProps | NativeButtonProps> & {
+type CommonButtonProps = ComponentProps & Partial<AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>>;
+type ButtonProps = CommonButtonProps & {
     /**
      * Контрольная точка, с нее начинается desktop версия
      * @default 1024
      */
     breakpoint?: number;
 };
-export { StyleColors, ComponentProps, AnchorBaseButtonProps, NativeBaseButtonProps, BaseButtonProps, AnchorButtonProps, NativeButtonProps, ButtonProps };
+export { StyleColors, ComponentProps, PrivateButtonProps, CommonButtonProps, ButtonProps };

package/{cssm/index-72308007.d.ts → index-10db897e.d.ts}

@@ -10,10 +10,6 @@ declare function easeInOutQuad(x: number): number;
 declare const easingFns: {
     easeInOutQuad: typeof easeInOutQuad;
 };
-declare function disableUserInput<T>(disabled: boolean | undefined, event: React.KeyboardEvent<T>): void;
-declare const inputUtils: {
-    disableUserInput: typeof disableUserInput;
-};
 /**
  * Возвращает true, если значение равно null или undefined
  */
@@ -51,4 +47,4 @@ declare const maskUtils: {
     prefixPostprocessor: typeof prefixPostprocessor;
     caretGuard: typeof caretGuard;
 };
-export { isClient, getDataTestId, createPaddingStyle, easingFns, inputUtils, fnUtils, maskUtils };
+export { isClient, getDataTestId, createPaddingStyle, easingFns, fnUtils, maskUtils };

package/{modern/Component.responsive-2e2b2125.d.ts → index-3109f463.d.ts}

@@ -1,7 +1,4 @@
-/// <reference types="react" />
-import React from "react";
 import { FC, ReactNode } from "react";
-import { ButtonProps } from "./typings-9211a437";
 type MqProps = {
     /**
      * Media выражение или кастомный запрос из `mq.json`, например `--mobile`.
@@ -62,5 +59,4 @@ declare const _exports: {
     "--desktop-xl": string;
     "--desktop": string;
 };
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
-export { _exports as default, MqProps, Mq, useMatchMedia, getMatchMedia, releaseMatchMedia, isPointerEventsSupported, isTouchSupported, Button };
+export { _exports as default, MqProps, Mq, useMatchMedia, getMatchMedia, releaseMatchMedia, isPointerEventsSupported, isTouchSupported };

package/index-89f0cb07.d.ts

@@ -0,0 +1,2 @@
+export { Button } from "./Component.responsive-0aa4e915";
+export type { ButtonProps } from "./typings-89f0cb07";

package/index-f034f741.d.ts

@@ -77,4 +77,4 @@ type PeriodSliderProps = {
 };
 declare const PeriodSlider: FC<PeriodSliderProps>;
 export { PeriodType, PeriodSliderProps, PeriodSlider };
-export { shiftValues } from "./Component.desktop-8b5756fe";
+export { shiftValues } from "./Component.desktop-b5b4c59f";

package/index.js

@@ -12,8 +12,8 @@ require('@alfalab/core-components-input/desktop');
 require('./components/date-range-input/Component.js');
 require('react-merge-refs');
 require('classnames');
-require('date-fns');
 require('date-fns/isValid');
+require('date-fns/startOfMonth');
 require('@alfalab/core-components-calendar/shared');
 require('@alfalab/core-components-icon-button');
 require('@alfalab/core-components-popover');

package/mobile-c219f8ca.d.ts

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

package/mobile.js

@@ -10,8 +10,8 @@ require('@alfalab/core-components-input/mobile');
 require('./components/date-range-input/Component.js');
 require('react-merge-refs');
 require('classnames');
-require('date-fns');
 require('date-fns/isValid');
+require('date-fns/startOfMonth');
 require('@alfalab/core-components-calendar/shared');
 require('@alfalab/core-components-icon-button');
 require('@alfalab/core-components-popover');

package/{cssm/Component-72308007.d.ts → modern/Component-10db897e.d.ts}

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-import { NavigationBarProps } from "./types-83e2bd9e";
+import { NavigationBarProps } from "./types-1c79e231";
 declare const NavigationBar: React.ForwardRefExoticComponent<NavigationBarProps & React.RefAttributes<HTMLDivElement>>;
-export * from "./Component-63dec22f";
+export * from "./Component-69921c40";
 export { NavigationBar };

package/modern/Component-89f0cb07.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import React from "react";
+import { FC } from "react";
+import { CommonButtonProps, PrivateButtonProps } from "./typings-89f0cb07";
+type SpinnerProps = {
+    /**
+     * Управление видимостью компонента
+     */
+    visible?: boolean;
+    /**
+     * Размер компонента
+     */
+    size?: "xs" | "s" | "m";
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Идентификатор компонента в DOM
+     */
+    id?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Палитра, в контексте которой используется спиннер
+     */
+    colors?: "default" | "inverted";
+};
+declare const Spinner: FC<SpinnerProps>;
+/**
+ * Минимальное время отображения лоадера - 500мс,
+ * чтобы при быстрых ответах от сервера кнопка не «моргала».
+ */
+declare const LOADER_MIN_DISPLAY_INTERVAL = 500;
+declare const BaseButton: React.ForwardRefExoticComponent<(CommonButtonProps & PrivateButtonProps) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { SpinnerProps, Spinner, LOADER_MIN_DISPLAY_INTERVAL, BaseButton };

package/modern/{Component-8b5756fe.d.ts → Component-b5b4c59f.d.ts}

@@ -4,8 +4,8 @@ import React from "react";
 import { ReactNode, FC, KeyboardEvent, MouseEvent, MutableRefObject, Ref, RefObject } from "react";
 import { TransitionProps } from "react-transition-group/Transition";
 import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
-import { NavigationBarProps } from "./types-83e2bd9e";
-import { CalendarDesktopProps } from "./Component.desktop-8b5756fe";
+import { NavigationBarProps } from "./types-1c79e231";
+import { CalendarDesktopProps } from "./Component.desktop-b5b4c59f";
 type BackdropProps = Partial<TransitionProps> & {
     /**
      * Прозрачный бэкдроп
@@ -383,6 +383,7 @@ declare const CalendarMobile: React.ForwardRefExoticComponent<CalendarDesktopPro
      */
     allowSelectionFromEmptyRange?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
-export * from "./Component.mobile-755fbaa3";
+export { ButtonMobile } from "./Component.mobile-16b1285a";
+export type { CommonButtonProps as ButtonMobileProps } from "./typings-89f0cb07";
 export { ModalMobile, ModalMobileProps, Content, ResponsiveContext, Modal, ModalContext, stackingOrder, StackingContext, StackProps, Stack, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef, getModalStore, GlobalStore, CalendarMobileProps, CalendarMobile };
 export type { SavedStyle };

package/modern/Component.desktop-0aa4e915.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { CommonButtonProps } from "./typings-89f0cb07";
+declare const ButtonDesktop: React.ForwardRefExoticComponent<CommonButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { ButtonDesktop };

package/modern/Component.desktop-785df74d.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseFormControlProps } from "./index-ebda875c";
+type FormControlDesktopProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'>;
+declare const FormControlDesktop: React.ForwardRefExoticComponent<FormControlDesktopProps & React.RefAttributes<HTMLDivElement>>;
+export { FormControlDesktopProps, FormControlDesktop };

package/modern/{Component.desktop-8b5756fe.d.ts → Component.desktop-b5b4c59f.d.ts}

@@ -16,6 +16,10 @@ type HeaderProps = {
      * Дочерние элементы.
      */
     children?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
 };
 declare const Header: FC<HeaderProps>;
 type MonthYearHeaderProps = {
@@ -79,10 +83,6 @@ type YearsTableProps = {
      * Доп. пропсы для переданного года
      */
     getYearProps: (year: Date) => Record<string, unknown>;
-    /**
-     * Обработчик скролла
-     */
-    onScroll: (scrollTop: number) => void;
     /**
      * Должен ли календарь подстраиваться под ширину родителя.
      */
@@ -94,6 +94,14 @@ type CalendarDesktopProps = {
      * Дополнительный класс
      */
     className?: string;
+    /**
+     * Дополнительный класс шапки десктопного календаря
+     */
+    headerClassName?: string;
+    /**
+     * Дополнительный класс контента десктопного календаря
+     */
+    contentClassName?: string;
     /**
      * Вид по умолчанию (выбор дней, месяцев, лет)
      */
@@ -194,4 +202,4 @@ type CalendarDesktopProps = {
 };
 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-63dec22f";
+export * from "./Component-69921c40";

package/modern/Component.desktop.js

@@ -4,8 +4,8 @@ import { InputDesktop } from '@alfalab/core-components-input/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 'date-fns/startOfMonth';
 import '@alfalab/core-components-calendar/modern/shared';
 import '@alfalab/core-components-icon-button/modern';
 import '@alfalab/core-components-popover/modern';

package/modern/Component.mobile-16b1285a.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { CommonButtonProps } from "./typings-89f0cb07";
+declare const ButtonMobile: React.ForwardRefExoticComponent<CommonButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { ButtonMobile };

package/modern/Component.mobile-d7e9f69d.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseFormControlProps } from "./index-ebda875c";
+type FormControlMobileProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'>;
+declare const FormControlMobile: React.ForwardRefExoticComponent<FormControlMobileProps & React.RefAttributes<HTMLDivElement>>;
+export { FormControlMobileProps, FormControlMobile };

package/modern/Component.mobile-ebda875c.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import React from 'react';
-import { BaseFormControlProps } from "./index-ebda875c";
-type FormControlMobileProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'>;
-declare const FormControlMobile: React.ForwardRefExoticComponent<FormControlMobileProps & React.RefAttributes<HTMLDivElement>>;
-export { FormControlMobileProps, FormControlMobile };
+import { BaseInputProps } from "./index-ebda875c";
+type InputMobileProps = Omit<BaseInputProps, 'FormControlComponent' | 'colorStyles'>;
+declare const InputMobile: React.ForwardRefExoticComponent<InputMobileProps & React.RefAttributes<HTMLInputElement>>;
+export * from "./Component.mobile-d7e9f69d";
+export { InputMobileProps, InputMobile };

package/modern/Component.mobile.js

@@ -4,8 +4,8 @@ import { InputMobile } from '@alfalab/core-components-input/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 'date-fns/startOfMonth';
 import '@alfalab/core-components-calendar/modern/shared';
 import '@alfalab/core-components-icon-button/modern';
 import '@alfalab/core-components-popover/modern';

package/modern/Component.responsive-0aa4e915.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { ButtonProps } from "./typings-89f0cb07";
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { Button };

package/modern/Component.responsive-785df74d.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseFormControlProps } from "./index-ebda875c";
+type FormControlProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+};
+declare const FormControl: React.ForwardRefExoticComponent<Omit<BaseFormControlProps, "styles" | "colorStyles"> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number | undefined;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { FormControlProps, FormControl };

package/modern/Component.responsive.js

@@ -7,8 +7,8 @@ import '@alfalab/core-components-input/modern/desktop';
 import './components/date-range-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
-import 'date-fns';
 import 'date-fns/isValid';
+import 'date-fns/startOfMonth';
 import '@alfalab/core-components-calendar/modern/shared';
 import '@alfalab/core-components-icon-button/modern';
 import '@alfalab/core-components-popover/modern';

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

@@ -1,8 +1,8 @@
 import React, { useRef, useState, useEffect } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
-import { startOfMonth } from 'date-fns';
 import dateFnsIsValid from 'date-fns/isValid';
+import startOfMonth from 'date-fns/startOfMonth';
 import { usePeriod } from '@alfalab/core-components-calendar/modern/shared';
 import { IconButton } from '@alfalab/core-components-icon-button/modern';
 import { Popover } from '@alfalab/core-components-popover/modern';
@@ -11,7 +11,7 @@ import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
 import { parseTimestampToDate, DATE_FORMAT, format, parseDateString, DATE_MASK, isCompleteDateInput, isValid } from '../../utils/format.js';
 import 'date-fns/parse';
 
-const styles = {"component":"date-range-input__component_anmtt","calendarContainer":"date-range-input__calendarContainer_anmtt","calendarResponsive":"date-range-input__calendarResponsive_anmtt","block":"date-range-input__block_anmtt","calendarIcon":"date-range-input__calendarIcon_anmtt"};
+const styles = {"component":"date-range-input__component_1hqhh","calendarContainer":"date-range-input__calendarContainer_1hqhh","calendarResponsive":"date-range-input__calendarResponsive_1hqhh","block":"date-range-input__block_1hqhh","calendarIcon":"date-range-input__calendarIcon_1hqhh"};
 require('./index.css')
 
 /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
@@ -197,12 +197,13 @@ const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverCla
     return (React.createElement("div", { className: cn(styles.component, className, {
             [styles.block]: block,
         }), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
-        InputComponent ? (React.createElement(InputComponent, { ...restProps, block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, disableUserInput: disableUserInput, rightAddons: React.createElement(React.Fragment, null,
+        InputComponent ? (React.createElement(InputComponent, { autoComplete: picker ? 'off' : undefined, ...restProps, block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, disableUserInput: disableUserInput, rightAddons: React.createElement(React.Fragment, null,
                 rightAddons,
                 picker && (React.createElement(IconButton, { className: styles.calendarIcon, ref: iconRef, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 's' }))) })) : null,
-        picker && (React.createElement(Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn(styles.calendarContainer, {
-                [styles.calendarResponsive]: calendarResponsive,
-            }), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
+        picker &&
+            (view === 'desktop' ? (React.createElement(Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn(styles.calendarContainer, {
+                    [styles.calendarResponsive]: calendarResponsive,
+                }), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar())) : (renderCalendar()))));
 });
 
 export { DateRangeInput };