@ozen-ui/kit 0.68.0 → 0.69.0

package/__inner__/esm/components/BottomSheetBase/constants.d.ts

@@ -8,3 +8,4 @@ export type BottomSheetBaseCSSVariable = (typeof BOTTOM_SHEET_BASE_CSS_VARIABLE)
 export declare const BOTTOM_SHEET_BASE_CLOSABLE = true;
 export declare const BOTTOM_SHEET_BASE_HIDE_BACKDROP = false;
 export declare const BOTTOM_SHEET_BASE_DISABLE_SCROLL_LOCK = false;
+export declare const BOTTOM_SHEET_BASE_PORTAL_CONTAINER: () => HTMLElement;

package/__inner__/esm/components/BottomSheetBase/constants.js

@@ -7,3 +7,6 @@ export var BOTTOM_SHEET_BASE_CSS_VARIABLE = {
 export var BOTTOM_SHEET_BASE_CLOSABLE = true;
 export var BOTTOM_SHEET_BASE_HIDE_BACKDROP = false;
 export var BOTTOM_SHEET_BASE_DISABLE_SCROLL_LOCK = false;
+export var BOTTOM_SHEET_BASE_PORTAL_CONTAINER = (function () {
+    return window.document.body;
+});

package/__inner__/esm/components/BottomSheetBase/context/BottomSheetBaseContext.js

@@ -1,5 +1,5 @@
 import { createContext, useContext } from 'react';
-import { IS_DEV } from '../../../constants/environment';
+import { isDev } from '../../../constants/environment';
 export var BottomSheetBaseContext = createContext({
     rootRef: {
         current: null,
@@ -40,6 +40,6 @@ export var useBottomSheetBaseContext = function () {
     return useContext(BottomSheetBaseContext);
 };
 // Именованный провайдер
-if (IS_DEV) {
+if (isDev) {
     BottomSheetBaseContext.displayName = 'BottomSheetBaseContext';
 }

package/__inner__/esm/components/BottomSheetBase/modules/BottomSheetBaseBackdrop/BottomSheetBaseBackdrop.js

@@ -21,3 +21,4 @@ export var BottomSheetBaseBackdrop = polymorphicComponentWithRef(function (_a, r
             draggable: expandOnDrag,
         }, [className]) })));
 });
+BottomSheetBaseBackdrop.displayName = 'BottomSheetBaseBackdrop';

package/__inner__/esm/components/Button/Button.js

@@ -1,8 +1,8 @@
 import { __assign, __rest } from "tslib";
 import './Button.css';
 import React, { useRef } from 'react';
-import { deprecate } from '@ozen-ui/logger';
 import { CSSTransition } from 'react-transition-group';
+import { useDeprecatedComponent } from '../../hooks/useDeprecated';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { getIconSizeToFormElement } from '../../utils/getIconSizeToFormElement';
@@ -32,9 +32,7 @@ export var Button = polymorphicComponentWithRef(function (inProps, ref) {
         name: 'Button',
     });
     var loaderRef = useRef(null);
-    if (process.env.NODE_ENV !== 'production') {
-        deprecate('Компонент «Button» устарел. Для замены используйте компонент «ButtonNext».');
-    }
+    useDeprecatedComponent('Button');
     var _a = props.as, Tag = _a === void 0 ? BUTTON_DEFAULT_TAG : _a, _b = props.variant, variant = _b === void 0 ? BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? BUTTON_DEFAULT_COLOR : _c, _d = props.size, size = _d === void 0 ? BUTTON_DEFAULT_SIZE : _d, iconLeft = props.iconLeft, iconRight = props.iconRight, loading = props.loading, children = props.children, disabled = props.disabled, className = props.className, fullWidth = props.fullWidth, labelProps = props.labelProps, onClick = props.onClick, other = __rest(props, ["as", "variant", "color", "size", "iconLeft", "iconRight", "loading", "children", "disabled", "className", "fullWidth", "labelProps", "onClick"]);
     var iconSize = getIconSizeToFormElement(size);
     var handleClick = function (event) {

package/__inner__/esm/components/Calendar/Calendar.js

@@ -10,7 +10,6 @@ var typeMap = {
     range: CalendarModeRange,
     single: CalendarModeSingle,
 };
-// eslint-disable-next-line react/display-name
 export var Calendar = forwardRef(function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,
@@ -21,3 +20,4 @@ export var Calendar = forwardRef(function (inProps, ref) {
     var Component = getByMap(typeMap, mode);
     return (React.createElement(Component, __assign({ size: size, startDay: startDay, calendars: calendars, getPeriodSwitchAriaLabel: getPeriodSwitchAriaLabel }, other, { ref: ref })));
 });
+Calendar.displayName = 'Calendar';

package/__inner__/esm/components/Calendar/components/CalendarModeRange/CalendarModeRange.js

@@ -7,7 +7,6 @@ import { CalendarContext } from '../../CalendarContext';
 import { cnCalendar } from '../../utils';
 import { Calendars } from '../index';
 import { CalendarAdditionalControls } from './components';
-// eslint-disable-next-line react/display-name
 export var CalendarModeRange = forwardRef(function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,
@@ -70,3 +69,4 @@ export var CalendarModeRange = forwardRef(function (inProps, ref) {
                 React.createElement(Calendars, { onCalendarsChange: onCalendarsChange }),
                 React.createElement(CalendarAdditionalControls, { renderAdditionalControls: renderAdditionalControls })))));
 });
+CalendarModeRange.displayName = 'CalendarModeRange';

package/__inner__/esm/components/Calendar/components/CalendarModeSingle/CalendarModeSingle.js

@@ -6,7 +6,6 @@ import { CalendarContext } from '../../CalendarContext';
 import { cnCalendar } from '../../utils';
 import { Calendars } from '../index';
 import { CalendarAdditionalControls } from './components';
-// eslint-disable-next-line react/display-name
 export var CalendarModeSingle = forwardRef(function (props, ref) {
     var size = props.size, startDay = props.startDay, renderAdditionalControls = props.renderAdditionalControls, locale = props.locale, onChangeProp = props.onChange, onOffsetDateChangeProp = props.onOffsetDateChange, onMonthClick = props.onMonthClick, onDayClick = props.onDayClick, onYearClick = props.onYearClick, valueProp = props.value, defaultValue = props.defaultValue, offsetDateProp = props.offsetDate, onCalendarsChange = props.onCalendarsChange, defaultOffsetDate = props.defaultOffsetDate, exclude = props.exclude, minDate = props.minDate, maxDate = props.maxDate, calendars = props.calendars, className = props.className, getPeriodSwitchAriaLabel = props.getPeriodSwitchAriaLabel, other = __rest(props, ["size", "startDay", "renderAdditionalControls", "locale", "onChange", "onOffsetDateChange", "onMonthClick", "onDayClick", "onYearClick", "value", "defaultValue", "offsetDate", "onCalendarsChange", "defaultOffsetDate", "exclude", "minDate", "maxDate", "calendars", "className", "getPeriodSwitchAriaLabel"]);
     var _a = __read(useControlled({
@@ -61,3 +60,4 @@ export var CalendarModeSingle = forwardRef(function (props, ref) {
                 React.createElement(Calendars, { onCalendarsChange: onCalendarsChange }),
                 React.createElement(CalendarAdditionalControls, { renderAdditionalControls: renderAdditionalControls })))));
 });
+CalendarModeSingle.displayName = 'CalendarModeSingle';

package/__inner__/esm/components/Calendar/types.d.ts

@@ -1,6 +1,7 @@
 import type { MouseEvent, ReactElement, ReactNode } from 'react';
 import type { DPExcludeConfig, DPDayInteger } from '@rehookify/datepicker';
 import type { ExtendableComponentPropsWithRef } from '../../types/ExtendableComponentPropsWithRef';
+import type { WithDisplayName } from '../../types/react';
 import type { CALENDAR_DEFAULT_MODE } from './constants';
 export declare const calendarStepVariant: readonly ["days", "months", "years"];
 export declare const calendarSizeVariant: readonly ["s", "m", "l"];
@@ -89,5 +90,5 @@ export type CalendarProps<MODE extends CalendarModeVariant = typeof CALENDAR_DEF
     calendars?: CalendarPropCalendars;
     children?: never;
 }, 'div'>;
-export type CalendarComponent = <MODE extends CalendarModeVariant = typeof CALENDAR_DEFAULT_MODE>(props: CalendarProps<MODE>) => ReactNode;
-export type CalendarModeComponent<MODE extends CalendarModeVariant> = (props: Omit<CalendarProps<MODE>, 'mode'>) => ReactNode;
+export type CalendarComponent = WithDisplayName<(<MODE extends CalendarModeVariant = typeof CALENDAR_DEFAULT_MODE>(props: CalendarProps<MODE>) => ReactNode)>;
+export type CalendarModeComponent<MODE extends CalendarModeVariant> = WithDisplayName<(props: Omit<CalendarProps<MODE>, 'mode'>) => ReactNode>;

package/__inner__/esm/components/Checkbox/Checkbox.js

@@ -1,6 +1,7 @@
 import { __assign, __rest } from "tslib";
 import './Checkbox.css';
 import React, { forwardRef, useContext } from 'react';
+import { useDeprecatedComponent } from '../../hooks/useDeprecated';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { CheckboxGroupContext } from '../CheckboxGroup/CheckboxGroupContext';
@@ -12,6 +13,7 @@ export var cnCheckbox = cn('Checkbox');
  * @deprecated Компонент устарел. Для замены используйте компонент CheckboxNext
  */
 export var Checkbox = forwardRef(function (inProps, ref) {
+    useDeprecatedComponent('Checkbox');
     var props = useThemeProps({
         props: inProps,
         name: 'Checkbox',

package/__inner__/esm/components/CheckboxGroup/CheckboxGroup.js

@@ -2,6 +2,7 @@ import { __assign, __read, __rest, __spreadArray } from "tslib";
 import './CheckboxGroup.css';
 import React from 'react';
 import { useControlled } from '../../hooks/useControlled';
+import { useDeprecatedComponent } from '../../hooks/useDeprecated';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
@@ -14,6 +15,7 @@ export var cnCheckboxGroup = cn('CheckboxGroup');
  * @deprecated Компонент устарел. Для замены используйте компонент CheckboxGroupNext
  */
 export var CheckboxGroup = polymorphicComponentWithRef(function (inProps, ref) {
+    useDeprecatedComponent('CheckboxGroup');
     var props = useThemeProps({
         props: inProps,
         name: 'CheckboxGroup',

package/__inner__/esm/components/CheckboxGroupNext/CheckboxGroupContext.js

@@ -1,8 +1,8 @@
 import { useContext, createContext } from 'react';
-import { IS_DEV } from '../../constants/environment';
+import { isDev } from '../../constants/environment';
 export var CheckboxGroupContext = createContext(undefined);
 export var useCheckboxGroupContext = function () { return useContext(CheckboxGroupContext); };
 // Именованный провайдер
-if (IS_DEV) {
+if (isDev) {
     CheckboxGroupContext.displayName = 'CheckboxGroupContext';
 }

package/__inner__/esm/components/CheckboxNext/Checkbox.css

@@ -86,8 +86,8 @@
 
   .CheckboxNext-Box {
     position: relative;
-    inline-size: var(--checkbox-size, 20px);
-    block-size: var(--checkbox-size, 20px);
+    inline-size: var(--checkbox-size);
+    block-size: var(--checkbox-size);
     border-radius: var(--border-radius-xs);
     flex-shrink: 0;
   }

package/__inner__/esm/components/Chip/Chip.js

@@ -1,7 +1,7 @@
 import { __assign, __rest } from "tslib";
 import './Chip.css';
 import React, { forwardRef, useMemo } from 'react';
-import { deprecate } from '@ozen-ui/logger';
+import { useDeprecatedComponent } from '../../hooks/useDeprecated';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { getIconSizeToFormElement } from '../../utils/getIconSizeToFormElement';
@@ -15,9 +15,7 @@ export var chipColorVariant = ['primary', 'secondary'];
 export var Chip = forwardRef(function (inProps, ref) {
     var _a = useThemeProps({ name: 'Chip', props: inProps }), _b = _a.size, size = _b === void 0 ? CHIP_DEFAULT_SIZE : _b, _c = _a.color, color = _c === void 0 ? CHIP_DEFAULT_VARIANT : _c, _d = _a.disabled, disabled = _d === void 0 ? CHIP_DEFAULT_DISABLED : _d, IconLeft = _a.iconLeft, IconRight = _a.iconRight, labelProps = _a.labelProps, inputRef = _a.inputRef, className = _a.className, children = _a.children, dataTestId = _a["data-testid"], other = __rest(_a, ["size", "color", "disabled", "iconLeft", "iconRight", "labelProps", "inputRef", "className", "children", 'data-testid']);
     var iconSize = useMemo(function () { return getIconSizeToFormElement(size); }, [size]);
-    if (process.env.NODE_ENV !== 'production') {
-        deprecate("\u041A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u00ABChip\u00BB \u0443\u0441\u0442\u0430\u0440\u0435\u043B. \u0414\u043B\u044F \u0437\u0430\u043C\u0435\u043D\u044B \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u00ABChipNext\u00BB.");
-    }
+    useDeprecatedComponent('Chip');
     return (React.createElement("label", __assign({ ref: ref, className: cnChip('', { size: size, disabled: disabled, color: color }, [className]), "data-testid": dataTestId }, labelProps),
         React.createElement("input", __assign({ ref: inputRef, className: cnChip('Input'), disabled: disabled, type: "checkbox" }, other)),
         React.createElement("span", { className: cnChip('Content') },

package/__inner__/esm/components/ChipNext/Chip.js

@@ -2,7 +2,7 @@ import { __assign, __read, __rest } from "tslib";
 import './Chip.css';
 import React, { useContext } from 'react';
 import { logger } from '@ozen-ui/logger';
-import { IS_DEV } from '../../constants/environment';
+import { isDev } from '../../constants/environment';
 import { useControlled } from '../../hooks/useControlled';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
@@ -20,7 +20,7 @@ export var Chip = polymorphicComponentWithRef(function (inProps, ref) {
     var color = colorProp;
     var chipGroup = useContext(ChipGroupContext);
     if (chipGroup) {
-        if (IS_DEV && value === undefined) {
+        if (isDev && value === undefined) {
             logger.error('Отсутствует параметр "value" для Chip, находящегося в ChipGroup.');
         }
         if (checked === undefined && chipGroup.value) {

package/__inner__/esm/components/DataList/DataList.js

@@ -144,3 +144,4 @@ var DataListRender = function (inProps, ref) {
         React.createElement(List, __assign({ as: "ul", size: size }, listProps, { onMouseDown: handleOnMouseDownList, ref: useMultiRef([listRef, listProps === null || listProps === void 0 ? void 0 : listProps.ref]) }), renderChildren)));
 };
 export var DataList = polymorphicComponentWithRef(DataListRender);
+DataList.displayName = 'DataList';

package/__inner__/esm/components/DataList/types.d.ts

@@ -1,6 +1,7 @@
 import type { ReactNode, ElementType, SyntheticEvent } from 'react';
 import type React from 'react';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import type { WithDisplayName } from '../../types/react';
 import type { PolymorphicComponentPropsWithRef, PolymorphicComponentRef } from '../../utils/polymorphicComponentWithRef';
 import type { ListProps } from '../List';
 import type { PopoverBaseProps } from '../Popover';
@@ -36,4 +37,4 @@ export type DataListBaseProps<MULTIPLE extends boolean = false> = {
 } & Omit<PopoverBaseProps, 'onSelect'>;
 export type DataListRef = PolymorphicComponentRef<typeof DATA_LIST_DEFAULT_TAG>;
 export type DataListProps<As extends ElementType = typeof DATA_LIST_DEFAULT_TAG, MULTIPLE extends boolean = false> = PolymorphicComponentPropsWithRef<DataListBaseProps<MULTIPLE>, As>;
-export type DataListComponent = <As extends ElementType = typeof DATA_LIST_DEFAULT_TAG, MULTIPLE extends boolean = false>(props: PolymorphicComponentPropsWithRef<DataListBaseProps<MULTIPLE>, As>) => React.ReactElement | null;
+export type DataListComponent = WithDisplayName<(<As extends ElementType = typeof DATA_LIST_DEFAULT_TAG, MULTIPLE extends boolean = false>(props: PolymorphicComponentPropsWithRef<DataListBaseProps<MULTIPLE>, As>) => React.ReactElement | null)>;

package/__inner__/esm/components/DatePicker/DatePicker.js

@@ -11,7 +11,6 @@ var typeMap = {
     'date-range': DatePickerModeDateRange,
 };
 export var cnDatePicker = cn('DatePicker');
-// eslint-disable-next-line react/display-name
 export var DatePicker = forwardRef(function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,
@@ -21,3 +20,4 @@ export var DatePicker = forwardRef(function (inProps, ref) {
     var Component = getByMap(typeMap, mode);
     return React.createElement(Component, __assign({ size: size }, other, { ref: ref }));
 });
+DatePicker.displayName = 'DatePicker';

package/__inner__/esm/components/DatePicker/components/DatePickerModeDate/DatePickerModeDate.js

@@ -8,7 +8,6 @@ import { Popover } from '../../../Popover';
 import { cnDatePicker } from '../../index';
 import { formatDateToString, formatStringToDate, getCommonCalendarProps, getCommonPopoverProps, isInExclude, isValidDateString, isOutOfRange, useCalendarKeyboard, } from '../../utils';
 import { DateInput, DatePickerRenderRight } from '../index';
-// eslint-disable-next-line react/display-name
 export var DatePickerModeDate = forwardRef(function (props, ref) {
     var size = props.size, valueProp = props.value, label = props.label, defaultValue = props.defaultValue, openProp = props.open, onCloseProp = props.onClose, onOpenProp = props.onOpen, onInputChange = props.onInputChange, clearText = props.clearText, defaultOpen = props.defaultOpen, disabled = props.disabled, minDate = props.minDate, maxDate = props.maxDate, exclude = props.exclude, inputProps = props.inputProps, renderRight = props.renderRight, className = props.className, _a = props.calendars, calendars = _a === void 0 ? 1 : _a, disableClearButton = props.disableClearButton, onChange = props.onChange, onKeyDown = props.onKeyDown, autoFocus = props.autoFocus, disableCloseOnSelect = props.disableCloseOnSelect, popoverPropsProp = props.popoverProps, calendarPropsProp = props.calendarProps, onError = props.onError, other = __rest(props, ["size", "value", "label", "defaultValue", "open", "onClose", "onOpen", "onInputChange", "clearText", "defaultOpen", "disabled", "minDate", "maxDate", "exclude", "inputProps", "renderRight", "className", "calendars", "disableClearButton", "onChange", "onKeyDown", "autoFocus", "disableCloseOnSelect", "popoverProps", "calendarProps", "onError"]);
     var anchorRef = useRef(null);
@@ -154,3 +153,4 @@ export var DatePickerModeDate = forwardRef(function (props, ref) {
         React.createElement(Popover, __assign({ open: open, anchorRef: anchorRef, onClose: handleClose }, popoverProps, { disableEnforceFocus: !enableEnforceFocus, onExited: handleExited }),
             React.createElement(Calendar, __assign({ calendars: calendars }, calendarProps, { mode: "single", value: value || null, offsetDate: offsetDate, onOffsetDateChange: onOffsetDateChange, onChange: handleChangeCalendar })))));
 });
+DatePickerModeDate.displayName = 'DatePickerModeDate';

package/__inner__/esm/components/DatePicker/components/DatePickerModeDateRange/DatePickerModeDateRange.js

@@ -14,9 +14,7 @@ import { cnDatePicker } from '../../index';
 import { formatDateToString, formatStringToDate, getCommonCalendarProps, getCommonPopoverProps, isValidDateString, useCalendarKeyboard, } from '../../utils';
 import { DateInput, DatePickerRenderRight } from '../index';
 import { formatDateForCalendar, getOffsetDateInRange, getValueForDoubleProp, } from './utils';
-export var DatePickerModeDateRange = 
-// eslint-disable-next-line react/display-name
-forwardRef(function (props, ref) {
+export var DatePickerModeDateRange = forwardRef(function (props, ref) {
     var size = props.size, error = props.error, openProp = props.open, label = props.label, onKeyDown = props.onKeyDown, onInputChange = props.onInputChange, renderLeft = props.renderLeft, renderRight = props.renderRight, required = props.required, fullWidth = props.fullWidth, placeholder = props.placeholder, hint = props.hint, disableStroke = props.disableStroke, hintProps = props.hintProps, onChange = props.onChange, labelProps = props.labelProps, popoverPropsProp = props.popoverProps, calendarPropsProp = props.calendarProps, defaultOpen = props.defaultOpen, onCloseProp = props.onClose, defaultValue = props.defaultValue, valueProp = props.value, inputProps = props.inputProps, disabled = props.disabled, className = props.className, _a = props.calendars, calendars = _a === void 0 ? 2 : _a, onError = props.onError, clearText = props.clearText, disableCloseOnSelect = props.disableCloseOnSelect, disableClearButton = props.disableClearButton, onOpenProp = props.onOpen, fieldsProps = props.fieldsProps, other = __rest(props, ["size", "error", "open", "label", "onKeyDown", "onInputChange", "renderLeft", "renderRight", "required", "fullWidth", "placeholder", "hint", "disableStroke", "hintProps", "onChange", "labelProps", "popoverProps", "calendarProps", "defaultOpen", "onClose", "defaultValue", "value", "inputProps", "disabled", "className", "calendars", "onError", "clearText", "disableCloseOnSelect", "disableClearButton", "onOpen", "fieldsProps"]);
     var _b = __read(getValueForDoubleProp(label), 2), labelFrom = _b[0], labelTo = _b[1];
     var _c = __read(getValueForDoubleProp(renderLeft), 2), renderLeftFrom = _c[0], renderLeftTo = _c[1];
@@ -242,3 +240,4 @@ forwardRef(function (props, ref) {
         React.createElement(Popover, __assign({ open: open, anchorRef: anchorRef, onClose: handleClose }, popoverProps, { onExited: handleExited, ignoreClickOutsideRefs: [containerRef], disableEnforceFocus: disableEnforceFocus }),
             React.createElement(Calendar, __assign({ calendars: calendars }, calendarProps, { mode: "range", offsetDate: offsetDate, onChange: handleChangeCalendar, value: formatDateForCalendar(value), onCalendarsChange: onCalendarsChange, onOffsetDateChange: onOffsetDateChange })))));
 });
+DatePickerModeDateRange.displayName = 'DatePickerModeDateRange';

package/__inner__/esm/components/DatePicker/types.d.ts

@@ -1,5 +1,6 @@
 import type { ChangeEvent, ComponentRef, ReactNode } from 'react';
 import type { ExtendableComponentPropsWithRef } from '../../types/ExtendableComponentPropsWithRef';
+import type { WithDisplayName } from '../../types/react';
 import type { CalendarProps } from '../Calendar';
 import type { FieldHintProps } from '../FieldHint';
 import type { FieldInputProps } from '../FieldInput';
@@ -109,6 +110,6 @@ export type DatePickerProps<MODE extends DatePickerModeVariant = typeof DATE_PIC
     /** Количество отображаемых календарей в компоненте: один или два */
     calendars?: 1 | 2;
 } & Pick<CalendarProps, 'minDate' | 'maxDate' | 'exclude'> & Pick<InputProps, 'onKeyDown'>, 'div'>;
-export type DatePickerComponent = <MODE extends DatePickerModeVariant = typeof DATE_PICKER_DEFAULT_MODE>(props: DatePickerProps<MODE>) => ReactNode;
-export type DatePickerModeComponent<MODE extends DatePickerModeVariant> = (props: Omit<DatePickerProps<MODE>, 'mode'>) => ReactNode;
+export type DatePickerComponent = WithDisplayName<(<MODE extends DatePickerModeVariant = typeof DATE_PICKER_DEFAULT_MODE>(props: DatePickerProps<MODE>) => ReactNode)>;
+export type DatePickerModeComponent<MODE extends DatePickerModeVariant> = WithDisplayName<(props: Omit<DatePickerProps<MODE>, 'mode'>) => ReactNode>;
 export {};

package/__inner__/esm/components/Dialog/Dialog.d.ts

@@ -34,6 +34,8 @@ export declare const Dialog: React.ForwardRefExoticComponent<{
     className?: string;
     'data-testid'?: string;
     ignoreClickOutsideRefs?: React.RefObject<HTMLElement>[];
-} & import("../Portal").PortalBaseProps & {
+} & {
+    container?: import("../../hooks/usePortalContainer").PortalContainer;
+} & Omit<import("../PortalBase").PortalBaseBaseProps, "container"> & {
     as?: "div" | undefined;
-} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof import("../Portal").PortalBaseProps> & React.RefAttributes<HTMLDivElement>>;
+} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "data-testid" | "container" | "disablePortal"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/Dialog/Dialog.js

@@ -2,6 +2,7 @@ import { __assign, __rest } from "tslib";
 import './Dialog.css';
 import React, { forwardRef } from 'react';
 import { CrossIcon } from '@ozen-ui/icons';
+import { useDeprecatedComponent } from '../../hooks/useDeprecated';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { IconButton } from '../IconButtonNext';
@@ -13,6 +14,7 @@ export var cnDialog = cn('Dialog');
  * @deprecated Компонент устарел. Для замены используйте компонент DialogNext
  */
 export var Dialog = forwardRef(function (inProps, ref) {
+    useDeprecatedComponent('Dialog');
     var props = useThemeProps({
         props: inProps,
         name: 'Dialog',

package/__inner__/esm/components/DialogNext/DialogContext.js

@@ -1,5 +1,5 @@
 import { useContext, createContext } from 'react';
-import { IS_DEV } from '../../constants/environment';
+import { isDev } from '../../constants/environment';
 import { DIALOG_DEFAULT_DEVICE_TYPE, DIALOG_DEFAULT_SIZE, DIALOG_DEFAULT_VARIANT, } from './constants';
 export var DialogContextDefaultValue = {
     size: DIALOG_DEFAULT_SIZE,
@@ -14,6 +14,6 @@ export var useDialogContext = function () {
     return useContext(DialogContext);
 };
 // Именованный провайдер
-if (IS_DEV) {
+if (isDev) {
     DialogContext.displayName = 'DialogContext';
 }

package/__inner__/esm/components/DialogNext/components/DialogModal/DialogModal.d.ts

@@ -30,6 +30,8 @@ export declare const DialogModal: React.ForwardRefExoticComponent<{
     className?: string;
     'data-testid'?: string;
     ignoreClickOutsideRefs?: React.RefObject<HTMLElement>[];
-} & import("../../../Portal").PortalBaseProps & {
+} & {
+    container?: import("../../../../hooks/usePortalContainer").PortalContainer;
+} & Omit<import("../../../PortalBase").PortalBaseBaseProps, "container"> & {
     as?: "div" | undefined;
-} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof import("../../../Portal").PortalBaseProps> & React.RefAttributes<HTMLDivElement>>;
+} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "data-testid" | "container" | "disablePortal"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/DialogNext/modules/DialogCloseButton/DialogCloseButton.js

@@ -16,3 +16,4 @@ export var DialogCloseButton = polymorphicComponentWithRef(function (_a, ref) {
     };
     return (React.createElement(IconButton, __assign({ variant: variant, name: name, as: as, size: size, ref: ref, className: cnDialogCloseButton('', [className]), onClick: onClick, icon: icon, compressed: true }, other)));
 });
+DialogCloseButton.displayName = 'DialogCloseButton';

package/__inner__/esm/components/DialogNext/modules/DialogFooterButton/DialogFooterButton.js

@@ -11,3 +11,4 @@ export var DialogFooterButton = polymorphicComponentWithRef(function (_a, ref) {
     var size = useDialogContext().size;
     return (React.createElement(Button, __assign({}, other, { as: as, ref: ref, className: cnDialogFooterButton('', [className]), size: size }), children));
 });
+DialogFooterButton.displayName = 'DialogFooterButton';

package/__inner__/esm/components/Drawer/Drawer.d.ts

@@ -35,6 +35,8 @@ export declare const Drawer: React.ForwardRefExoticComponent<{
     className?: string;
     'data-testid'?: string;
     ignoreClickOutsideRefs?: React.RefObject<HTMLElement>[];
-} & import("../Portal").PortalBaseProps & {
+} & {
+    container?: import("../../hooks/usePortalContainer").PortalContainer;
+} & Omit<import("../PortalBase").PortalBaseBaseProps, "container"> & {
     as?: "div" | undefined;
-} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof import("../Portal").PortalBaseProps> & React.RefAttributes<HTMLDivElement>>;
+} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "data-testid" | "container" | "disablePortal"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/Drawer/Drawer.js

@@ -2,6 +2,7 @@ import { __assign, __rest } from "tslib";
 import './Drawer.css';
 import React, { forwardRef } from 'react';
 import { CrossIcon } from '@ozen-ui/icons';
+import { useDeprecatedComponent } from '../../hooks/useDeprecated';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { IconButton } from '../IconButtonNext';
@@ -13,6 +14,7 @@ export var cnDrawer = cn('Drawer');
  * @deprecated Компонент устарел. Для замены используйте компонент DrawerNext
  */
 export var Drawer = forwardRef(function (inProps, ref) {
+    useDeprecatedComponent('Drawer');
     var props = useThemeProps({
         props: inProps,
         name: 'Drawer',

package/__inner__/esm/components/DrawerNext/DrawerContext.js

@@ -1,5 +1,5 @@
 import { useContext, createContext } from 'react';
-import { IS_DEV } from '../../constants/environment';
+import { isDev } from '../../constants/environment';
 import { DRAWER_DEFAULT_DEVICE_TYPE, DRAWER_DEFAULT_SIZE, DRAWER_DEFAULT_VARIANT, } from './constants';
 export var DrawerContextDefaultValue = {
     size: DRAWER_DEFAULT_SIZE,
@@ -12,6 +12,6 @@ export var useDrawerContext = function () {
     return useContext(DrawerContext);
 };
 // Именованный провайдер
-if (IS_DEV) {
+if (isDev) {
     DrawerContext.displayName = 'DrawerContext';
 }

package/__inner__/esm/components/DrawerNext/modules/DrawerCloseButton/DrawerCloseButton.js

@@ -16,3 +16,4 @@ export var DrawerCloseButton = polymorphicComponentWithRef(function (_a, ref) {
     };
     return (React.createElement(IconButton, __assign({ variant: variant, name: name, as: as, size: size, ref: ref, className: cnDrawerCloseButton('', [className]), onClick: onClick, icon: icon, compressed: true }, other)));
 });
+DrawerCloseButton.displayName = 'DrawerCloseButton';

package/__inner__/esm/components/DrawerNext/modules/DrawerFooterButton/DrawerFooterButton.js

@@ -10,3 +10,4 @@ export var DrawerFooterButton = polymorphicComponentWithRef(function (_a, ref) {
     var size = useDrawerContext().size;
     return (React.createElement(Button, __assign({}, other, { as: as, ref: ref, size: size, className: cnDrawerFooterButton('', [className]) }), children));
 });
+DrawerFooterButton.displayName = 'DrawerFooterButton';

package/__inner__/esm/components/FieldHint/FieldHint.d.ts

@@ -10,6 +10,7 @@ export type FieldHintProps = ExtendableComponentPropsWithRef<{
     error?: boolean;
     disabled?: boolean;
     size?: FormElementSizeVariant;
+    'data-testid'?: string;
 }, typeof FIELD_HINT_DEFAULT_TAG>;
 export declare const cnFieldHint: import("@bem-react/classname").ClassNameFormatter;
 export declare const FieldHint: React.ForwardRefExoticComponent<Omit<FieldHintProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/FieldIcon/FieldIcon.d.ts

@@ -11,6 +11,7 @@ export type FieldIconProps = ExtendableComponentPropsWithRef<{
     icon?: RenderContentType<IconProps>['content'];
     size?: FormElementSizeVariant;
     children?: never;
+    'data-testid'?: string;
 }, typeof FIELD_ICON_DEFAULT_TAG>;
 export declare const cnFieldIcon: import("@bem-react/classname").ClassNameFormatter;
 export declare const FieldIcon: React.ForwardRefExoticComponent<Omit<FieldIconProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/FilePicker/FilePicker.js

@@ -2,7 +2,7 @@ import { __assign, __read, __rest } from "tslib";
 import './FilePicker.css';
 import React, { forwardRef, useRef, useState } from 'react';
 import { AttachmentIcon, CrossIcon } from '@ozen-ui/icons';
-import { deprecate } from '@ozen-ui/logger';
+import { useDeprecatedProperty } from '../../hooks/useDeprecated';
 import { useMultiRef } from '../../hooks/useMultiRef';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
@@ -20,12 +20,8 @@ export var FilePicker = forwardRef(function (inProps, ref) {
         props: inProps,
         name: 'FilePicker',
     }), _b = _a.size, size = _b === void 0 ? FILE_PICKER_DEFAULT_SIZE : _b, _c = _a.disabled, disabled = _c === void 0 ? FILE_PICKER_DEFAULT_DISABLED : _c, _d = _a.required, required = _d === void 0 ? FILE_PICKER_DEFAULT_REQUIRED : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? FILE_PICKER_DEFAULT_FULL_WIDTH : _e, _f = _a.disableTruncate, disableTruncate = _f === void 0 ? FILE_PICKER_DEFAULT_DISABLE_TRUNCATE : _f, _g = _a.multiple, multiple = _g === void 0 ? FILE_PICKER_DEFAULT_MULTIPLE : _g, placeholder = _a.placeholder, clearText = _a.clearText, _h = _a.renderRight, renderRight = _h === void 0 ? AttachmentIcon : _h, renderValueProp = _a.renderValue, onChangeProp = _a.onChange, onClearProp = _a.onClear, inputRef = _a.inputRef, fileList = _a.fileList, accept = _a.accept, id = _a.id, name = _a.name, label = _a.label, autoFocus = _a.autoFocus, error = _a.error, hint = _a.hint, renderLeft = _a.renderLeft, labelProps = _a.labelProps, inputProps = _a.inputProps, hintProps = _a.hintProps, labelRef = _a.labelRef, className = _a.className, other = __rest(_a, ["size", "disabled", "required", "fullWidth", "disableTruncate", "multiple", "placeholder", "clearText", "renderRight", "renderValue", "onChange", "onClear", "inputRef", "fileList", "accept", "id", "name", "label", "autoFocus", "error", "hint", "renderLeft", "labelProps", "inputProps", "hintProps", "labelRef", "className"]);
-    if (process.env.NODE_ENV !== 'production' && labelRef) {
-        deprecate('Свойство «labelRef» устарело. Для замены используйте «labelProps.ref».');
-    }
-    if (process.env.NODE_ENV !== 'production' && inputRef) {
-        deprecate('Свойство «inputRef» устарело. Для замены используйте «inputProps.ref».');
-    }
+    useDeprecatedProperty(!!labelRef, 'labelRef', 'labelProps.ref');
+    useDeprecatedProperty(!!inputRef, 'inputRef', 'inputProps.ref');
     var inputInnerRef = useRef(null);
     var _j = __read(useState(false), 2), focused = _j[0], setFocused = _j[1];
     var hasFiles = !!(fileList === null || fileList === void 0 ? void 0 : fileList.length);

package/__inner__/esm/components/FormControlCarcass/FormControlCarcass.css

@@ -1,9 +1,10 @@
 /* stylelint-disable */
 .FormControlCarcass {
-  --form-control-carcass-control-block-padding: 0;
-  --form-control-carcass-after-block-padding: 0;
-  --form-control-content-gap: 0;
+  --form-control-carcass-control-block-margin: 0px;
+  --form-control-carcass-after-block-margin: 0px;
+  --form-control-content-gap: 0px;
   --form-control-label-color: var(--color-content-primary);
+  box-sizing: border-box;
   display: inline-flex;
   cursor: pointer;
   vertical-align: top;
@@ -29,8 +30,8 @@
       text-transform: var(--typography-text-s-text_transform, none);
 
       --form-control-content-gap: var(--spacing-xs);
-      --form-control-carcass-control-block-padding: var(--spacing-4xs);
-      --form-control-carcass-after-block-padding: var(--spacing-4xs);
+      --form-control-carcass-control-block-margin: var(--spacing-4xs);
+      --form-control-carcass-after-block-margin: var(--spacing-4xs);
     }
 .FormControlCarcass_size_m {
       font: var(--typography-text-m-font);
@@ -38,7 +39,7 @@
       text-transform: var(--typography-text-m-text_transform, none);
 
       --form-control-content-gap: var(--spacing-xs);
-      --form-control-carcass-control-block-padding: var(--spacing-4xs);
+      --form-control-carcass-control-block-margin: var(--spacing-4xs);
     }
 .FormControlCarcass_size_l {
       font: var(--typography-text-l-font);
@@ -46,8 +47,8 @@
       text-transform: var(--typography-text-l-text_transform, none);
 
       --form-control-content-gap: var(--spacing-s);
-      --form-control-carcass-control-block-padding: var(--spacing-3xs);
-      --form-control-carcass-after-block-padding: var(--spacing-4xs);
+      --form-control-carcass-control-block-margin: var(--spacing-3xs);
+      --form-control-carcass-after-block-margin: var(--spacing-4xs);
     }
 .FormControlCarcass_align_top {
       align-items: flex-start;
@@ -71,8 +72,9 @@
     content: '\a0';
   }
 .FormControlCarcass-Control {
+    box-sizing: border-box;
     flex-shrink: 0;
-    padding-block: var(--form-control-carcass-control-block-padding);
+    margin-block: var(--form-control-carcass-control-block-margin);
   }
 .FormControlCarcass-Content {
     margin-inline-start: var(--form-control-content-gap);
@@ -80,10 +82,11 @@
     transition: color var(--transition-default);
   }
 .FormControlCarcass-After {
+    box-sizing: border-box;
     display: inline-flex;
     align-items: center;
     margin-inline-start: var(--form-control-content-gap);
-    padding-block: var(--form-control-carcass-after-block-padding);
+    margin-block: var(--form-control-carcass-after-block-margin);
   }
 .FormControlCarcass_disabled {
     --form-control-label-color: var(--color-content-disabled);

package/__inner__/esm/components/FormControlCarcass/FormControlCarcassContext.js

@@ -1,5 +1,5 @@
 import { useContext, createContext } from 'react';
-import { IS_DEV } from '../../constants/environment';
+import { isDev } from '../../constants/environment';
 import { FORM_CONTROL_CARCASS_DEFAULT_DISABLED, FORM_CONTROL_CARCASS_DEFAULT_SIZE, FORM_CONTROL_CARCASS_DEFAULT_VARIANT, } from './constants';
 export var FormControlCarcassContextDefaultValue = {
     size: FORM_CONTROL_CARCASS_DEFAULT_SIZE,
@@ -11,6 +11,6 @@ export var useFormControlCarcassContext = function () {
     return useContext(FormControlCarcassContext);
 };
 // Именованный провайдер
-if (IS_DEV) {
+if (isDev) {
     FormControlCarcassContext.displayName = 'FormControlCarcassContext';
 }

package/__inner__/esm/components/IconButton/IconButton.js

@@ -1,7 +1,7 @@
 import { __assign, __rest } from "tslib";
 import './IconButton.css';
 import React, { useMemo } from 'react';
-import { deprecate } from '@ozen-ui/logger';
+import { useDeprecatedComponent } from '../../hooks/useDeprecated';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { getIconSizeToFormElement } from '../../utils/getIconSizeToFormElement';
@@ -33,9 +33,7 @@ export var IconButton = polymorphicComponentWithRef(function (inProps, ref) {
         props: inProps,
         name: 'IconButton',
     });
-    if (process.env.NODE_ENV !== 'production') {
-        deprecate('Компонент «IconButton» устарел. Для замены используйте компонент «IconButtonNext».');
-    }
+    useDeprecatedComponent('IconButton');
     var _a = props.size, size = _a === void 0 ? ICON_BUTTON_DEFAULT_SIZE : _a, _b = props.variant, variant = _b === void 0 ? ICON_BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? ICON_BUTTON_DEFAULT_COLOR : _c, _d = props.as, Tag = _d === void 0 ? ICON_BUTTON_DEFAULT_TAG : _d, iconColor = props.iconColor, compressed = props.compressed, loading = props.loading, disabled = props.disabled, className = props.className, icon = props.icon, onClick = props.onClick, rounded = props.rounded, other = __rest(props, ["size", "variant", "color", "as", "iconColor", "compressed", "loading", "disabled", "className", "icon", "onClick", "rounded"]);
     var isInteractionPrevented = disabled || loading;
     var handleClick = function (event) {

package/__inner__/esm/components/InputOTP/InputOTP.js

@@ -174,3 +174,4 @@ export var InputOTP = polymorphicComponentWithRef(function (inProps, ref) {
                 React.createElement(Fieldset, null))));
     })));
 });
+InputOTP.displayName = 'InputOTP';