@ozen-ui/kit 0.8.0 → 0.9.1

package/__inner__/cjs/components/Input/Input.js

@@ -1,74 +1,53 @@
 "use strict";
 exports.__esModule = true;
-exports.Input = exports.cnInput = exports.inputTypeVariant = void 0;
+exports.Input = exports.cnInput = void 0;
 var tslib_1 = require("tslib");
 require("./Input.css");
 var react_1 = tslib_1.__importStar(require("react"));
+var useEventListener_1 = require("../../hooks/useEventListener");
 var useMultiRef_1 = require("../../hooks/useMultiRef");
 var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
+var FieldControl_1 = require("../FieldControl");
 var FieldHint_1 = require("../FieldHint");
 var FieldIcon_1 = require("../FieldIcon");
+var FieldInput_1 = require("../FieldInput");
 var FieldLabel_1 = require("../FieldLabel");
-exports.inputTypeVariant = [
-    'number',
-    'date',
-    'datetime-local',
-    'time',
-    'text',
-    'tel',
-    'password',
-    'email',
-];
+var Fieldset_1 = require("../Fieldset");
+var constants_1 = require("./constants");
 exports.cnInput = (0, classname_1.cn)('Input');
 exports.Input = (0, react_1.forwardRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({
         props: inProps,
         name: 'Input'
     });
-    var _a = props.size, size = _a === void 0 ? 'm' : _a, label = props.label, error = props.error, autoFocus = props.autoFocus, placeholder = props.placeholder, id = props.id, name = props.name, type = props.type, renderLeft = props.renderLeft, renderRight = props.renderRight, inputRef = props.inputRef, fullWidth = props.fullWidth, disabled = props.disabled, hint = props.hint, required = props.required, className = props.className, inputProps = props.inputProps, valueProp = props.value, defaultValue = props.defaultValue, onChange = props.onChange, labelRef = props.labelRef, labelProps = props.labelProps, other = tslib_1.__rest(props, ["size", "label", "error", "autoFocus", "placeholder", "id", "name", "type", "renderLeft", "renderRight", "inputRef", "fullWidth", "disabled", "hint", "required", "className", "inputProps", "value", "defaultValue", "onChange", "labelRef", "labelProps"]);
-    var isControlled = typeof valueProp !== 'undefined';
-    var _b = tslib_1.__read((0, react_1.useState)(), 2), focused = _b[0], setFocused = _b[1];
-    var fieldRef = (0, react_1.useRef)(null);
-    var _c = tslib_1.__read((0, react_1.useState)(defaultValue), 2), valueState = _c[0], setValueState = _c[1];
-    var filled = isControlled
-        ? !!valueProp || valueProp === 0
-        : !!valueState || valueState === 0;
-    var handleChange = (0, react_1.useCallback)(function (e) {
-        if (disabled)
-            return;
-        var value = e.target.value;
-        if (!isControlled) {
-            setValueState(value);
+    var _a = props.size, size = _a === void 0 ? constants_1.INPUT_DEFAULT_SIZE : _a, label = props.label, error = props.error, autoFocus = props.autoFocus, placeholder = props.placeholder, id = props.id, name = props.name, type = props.type, renderLeft = props.renderLeft, renderRight = props.renderRight, inputRef = props.inputRef, fullWidth = props.fullWidth, disabled = props.disabled, hint = props.hint, required = props.required, className = props.className, inputProps = props.inputProps, value = props.value, defaultValue = props.defaultValue, onChange = props.onChange, labelProps = props.labelProps, labelRef = props.labelRef, other = tslib_1.__rest(props, ["size", "label", "error", "autoFocus", "placeholder", "id", "name", "type", "renderLeft", "renderRight", "inputRef", "fullWidth", "disabled", "hint", "required", "className", "inputProps", "value", "defaultValue", "onChange", "labelProps", "labelRef"]);
+    var labelInnerRef = (0, react_1.useRef)(null);
+    var fieldInnerRef = (0, react_1.useRef)(null);
+    /* Хук useEventListener необходим для того, чтобы при нажатии на кнопку мыши
+     * внутри HTML-элемента label - фокус не переходил на body или на цель нажатия кнопки мыши.
+     * Если же нажатие кнопки происходит на самом HTML-элементе input, то мы ничего не делаем,
+     * так как в противном случае мы сломаем возможность выделять текст для копирования.
+     */
+    (0, useEventListener_1.useEventListener)({
+        element: labelInnerRef,
+        eventName: 'mousedown',
+        handler: function (e) {
+            var _a;
+            if (e.target !== fieldInnerRef.current) {
+                e.preventDefault();
+                (_a = fieldInnerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
         }
-        onChange === null || onChange === void 0 ? void 0 : onChange(e);
-    }, [onChange, isControlled, disabled]);
-    var handleFocus = (0, react_1.useCallback)(function (e) {
-        var _a;
-        setFocused(true);
-        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
-    }, [inputProps === null || inputProps === void 0 ? void 0 : inputProps.onFocus]);
-    var handleBlur = (0, react_1.useCallback)(function (e) {
-        var _a;
-        setFocused(false);
-        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
-    }, [inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur]);
-    return (react_1["default"].createElement("div", tslib_1.__assign({}, other, { ref: ref, className: (0, exports.cnInput)({
-            fullWidth: fullWidth,
-            size: size,
-            error: error,
-            disabled: disabled,
-            required: required,
-            hasLabel: !!label,
-            focused: focused
-        }, [className]) }),
-        react_1["default"].createElement("label", { className: (0, exports.cnInput)('Body') },
-            react_1["default"].createElement(FieldIcon_1.FieldIcon, { className: (0, exports.cnInput)('RenderLeft'), icon: renderLeft, size: size }),
+    });
+    return (react_1["default"].createElement(FieldControl_1.FieldControl, tslib_1.__assign({ size: size, error: error, disabled: disabled, required: required, fullWidth: fullWidth }, other, { ref: ref, className: (0, exports.cnInput)({}, [className]) }),
+        react_1["default"].createElement("label", { className: (0, exports.cnInput)('Body'), ref: labelInnerRef },
+            react_1["default"].createElement(FieldIcon_1.FieldIcon, { icon: renderLeft }),
             react_1["default"].createElement("div", { className: (0, exports.cnInput)('FieldContainer') },
-                label && (react_1["default"].createElement(FieldLabel_1.FieldLabel, tslib_1.__assign({ filled: filled, focused: focused, required: required, disabled: disabled, size: size }, labelProps, { className: (0, exports.cnInput)('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelRef }), label)),
-                react_1["default"].createElement("input", tslib_1.__assign({ id: id, name: name, autoFocus: autoFocus, disabled: disabled, value: valueProp, type: type, defaultValue: defaultValue, required: required, placeholder: placeholder }, inputProps, { className: (0, exports.cnInput)('Field', { filled: filled }, [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]), onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, ref: (0, useMultiRef_1.useMultiRef)([inputRef, fieldRef]) }))),
-            react_1["default"].createElement(FieldIcon_1.FieldIcon, { className: (0, exports.cnInput)('RenderRight'), icon: renderRight, size: size }),
-            react_1["default"].createElement("fieldset", { className: (0, exports.cnInput)('Fieldset') })),
-        react_1["default"].createElement(FieldHint_1.FieldHint, { size: size, error: error, disabled: disabled }, hint)));
+                react_1["default"].createElement(FieldLabel_1.FieldLabel, tslib_1.__assign({}, labelProps, { ref: labelRef || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref), className: labelProps === null || labelProps === void 0 ? void 0 : labelProps.className }), label),
+                react_1["default"].createElement(FieldInput_1.FieldInput, tslib_1.__assign({ id: id, name: name, autoFocus: autoFocus, value: value, type: type, defaultValue: defaultValue, placeholder: placeholder, onChange: onChange }, inputProps, { className: (0, exports.cnInput)('Field', [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]), ref: (0, useMultiRef_1.useMultiRef)([inputRef || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref), fieldInnerRef]) }))),
+            react_1["default"].createElement(FieldIcon_1.FieldIcon, { icon: renderRight }),
+            react_1["default"].createElement(Fieldset_1.Fieldset, null)),
+        react_1["default"].createElement(FieldHint_1.FieldHint, null, hint)));
 });
 exports.Input.displayName = 'Input';

package/__inner__/cjs/components/Input/constants.d.ts

@@ -0,0 +1 @@
+export declare const INPUT_DEFAULT_SIZE = "m";

package/__inner__/cjs/components/Input/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+exports.__esModule = true;
+exports.INPUT_DEFAULT_SIZE = void 0;
+exports.INPUT_DEFAULT_SIZE = 'm';

package/__inner__/cjs/components/Input/index.d.ts

@@ -1 +1,2 @@
 export * from './Input';
+export * from './types';

package/__inner__/cjs/components/Input/index.js

@@ -2,3 +2,4 @@
 exports.__esModule = true;
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./Input"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/Input/types.d.ts

@@ -0,0 +1,71 @@
+import type { ComponentPropsWithRef, ComponentRef, Ref } from 'react';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import type { FIELD_CONTROL_DEFAULT_TAG } from '../FieldControl';
+import type { FieldIconProps } from '../FieldIcon';
+import type { FieldLabelProps } from '../FieldLabel';
+export declare const inputTypeVariant: readonly ["number", "date", "datetime-local", "time", "text", "tel", "password", "email"];
+export type InputTypeVariant = (typeof inputTypeVariant)[number];
+export type InputSizeVariant = FormElementSizeVariant;
+type InputPropsDeprecated = {
+    /**
+     * deprecated
+     * Ссылка на FieldLabel
+     * */
+    labelRef?: FieldLabelProps['ref'];
+    /** deprecated
+     * Ссылка на элемент input
+     * */
+    inputRef?: Ref<HTMLInputElement>;
+};
+type InputElement = ComponentPropsWithRef<'input'>;
+export type InputProps = Omit<ComponentPropsWithRef<typeof FIELD_CONTROL_DEFAULT_TAG>, 'size' | 'onChange'> & {
+    /** Атрибут id для элемента input */
+    id?: string;
+    /** Атрибут name для элемента input */
+    name?: string;
+    /** Лейбл */
+    label?: string;
+    /** Размер компонента */
+    size?: InputSizeVariant;
+    /** Подсказка. Отображается, когда вариант не выбран */
+    placeholder?: string;
+    /** Если {true} устанавливает автофокус */
+    autoFocus?: boolean;
+    /** Если {true} переводит поле в состояние ошибки */
+    error?: boolean;
+    /** Если {true} растягивает поле на всю ширину */
+    fullWidth?: boolean;
+    /** Дополнительное описание к полю */
+    hint?: string | null | undefined;
+    /** Атрибут type для элемента input */
+    type?: InputTypeVariant;
+    /** Если {true} делает элемент неактивным */
+    disabled?: boolean;
+    /** Если {true} делает элемент обязательным к заполнению */
+    required?: boolean;
+    /** Минимальное количество символов разрешенных для ввода */
+    minLength?: InputElement['minLength'];
+    /** Максимальное количество символов разрешенных для ввода */
+    maxLength?: InputElement['maxLength'];
+    /** Текст или иконка слева */
+    renderLeft?: FieldIconProps['icon'];
+    /** Текст или иконка справа */
+    renderRight?: FieldIconProps['icon'];
+    /** Выбранное значение */
+    value?: InputElement['value'];
+    /** Значение по умолчанию (неконтролируемый компонент) */
+    defaultValue?: InputElement['defaultValue'];
+    /** Обработчик события на изменение значения поля */
+    onChange?: InputElement['onChange'];
+    /** Свойства элемента input */
+    inputProps?: InputElement & {
+        'data-testid'?: string;
+    };
+    /** Свойства FieldLabel */
+    labelProps?: FieldLabelProps;
+    /** Ссылка на корневой DOM-элемент компонента */
+    ref?: ComponentRef<typeof FIELD_CONTROL_DEFAULT_TAG>;
+    /** data-атрибут для тестирования */
+    'data-testid'?: string;
+} & InputPropsDeprecated;
+export {};

package/__inner__/cjs/components/Input/types.js

@@ -0,0 +1,13 @@
+"use strict";
+exports.__esModule = true;
+exports.inputTypeVariant = void 0;
+exports.inputTypeVariant = [
+    'number',
+    'date',
+    'datetime-local',
+    'time',
+    'text',
+    'tel',
+    'password',
+    'email',
+];

package/__inner__/cjs/components/InputNumber/InputNumber.css

@@ -1,9 +1,10 @@
 /* stylelint-disable */
 .InputNumber {
-  --number-input-color: var(--color-content-primary);
-  --number-input-background-color: var(--color-background-primary);
-  --number-input-border-width: var(--border-width-s);
-  --number-input-border-color: var(--color-border-main);
+  --textfield-color: var(--color-content-primary);
+  --textfield-background-color: var(--color-background-primary);
+  --textfield-border-width: var(--border-width-s);
+  --textfield-border-color: var(--color-border-main);
+  font: var(--textfield-input-font);
   cursor: text;
   display: inline-flex;
   vertical-align: top;
@@ -12,31 +13,17 @@
 .InputNumber > * {
     cursor: text;
   }
-.InputNumber-Fieldset {
-    position: absolute;
-    inset-block-end: 0;
-    inset-inline-end: 0;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    margin: 0;
-    padding: 0;
-    pointer-events: none;
-    border-radius: var(--border-radius-xs);
-    border: var(--number-input-border-width) solid
-      var(--number-input-border-color);
-    transition: border var(--transition-default);
-  }
 .InputNumber-Body {
     position: relative;
     display: flex;
-    -moz-column-gap: var(--number-input-input-gap);
-         column-gap: var(--number-input-input-gap);
+    -moz-column-gap: var(--textfield-input-gap);
+         column-gap: var(--textfield-input-gap);
     align-items: center;
     box-sizing: border-box;
-    padding: 0 4px 0 var(--number-input-gutter-x);
-    background-color: var(--number-input-background-color);
+    padding: 0 4px 0 var(--textfield-gutter-x);
+    background-color: var(--textfield-background-color);
     transition: background-color var(--transition-slow);
-    color: var(--number-input-color);
+    color: var(--textfield-color);
     border-radius: var(--border-radius-xs);
   }
 .InputNumber-FieldContainer {
@@ -53,10 +40,10 @@
     inline-size: 100%;
     padding: 0;
     background: none;
-    color: var(--number-input-color);
+    color: var(--textfield-color);
     box-sizing: border-box;
-    block-size: var(--number-input-input-height);
-    font: var(--number-input-input-font);
+    block-size: var(--textfield-input-height);
+    font: inherit;
   }
 .InputNumber-Field::placeholder {
       opacity: 1;
@@ -65,7 +52,7 @@
 .InputNumber-Field:-webkit-autofill,
     .InputNumber-Field:-webkit-autofill:hover,
     .InputNumber-Field:-webkit-autofill:focus {
-      box-shadow: 0 0 0 1000px var(--number-input-background-color) inset !important;
+      box-shadow: 0 0 0 1000px var(--textfield-background-color) inset !important;
       background-color: transparent !important;
       -webkit-text-fill-color: var(--color-content-info-dark);
     }
@@ -80,59 +67,59 @@
     flex-direction: column;
   }
 .InputNumber_size_2xs {
-      --number-input-gutter-x: 12px;
-      --number-input-input-height: 40px;
-      --number-input-input-padding: 4px 0 4px;
-      --number-input-input-font: var(--typography-text-2xs-font);
-      --number-input-input-gap: var(--space-s);
-      --number-input-button-width: 24px;
-      --number-input-button-height: 16px;
+      --textfield-gutter-x: 12px;
+      --textfield-input-height: 40px;
+      --textfield-input-padding: 4px 0 4px;
+      --textfield-input-font: var(--typography-text-2xs-font);
+      --textfield-input-gap: var(--space-s);
+      --textfield-button-width: 24px;
+      --textfield-button-height: 16px;
     }
 .InputNumber_size_2xs .FieldLabel_size_2xs {
         --field-label-top: 12px;
       }
 .InputNumber_size_xs {
-      --number-input-gutter-x: 12px;
-      --number-input-input-height: 40px;
-      --number-input-input-font: var(--typography-text-xs-font);
-      --number-input-input-padding: 19px 0 4px;
-      --number-input-input-gap: var(--space-s);
-      --number-input-button-width: 28px;
-      --number-input-button-height: 16px;
+      --textfield-gutter-x: 12px;
+      --textfield-input-height: 40px;
+      --textfield-input-font: var(--typography-text-xs-font);
+      --textfield-input-padding: 19px 0 4px;
+      --textfield-input-gap: var(--space-s);
+      --textfield-button-width: 28px;
+      --textfield-button-height: 16px;
     }
 .InputNumber_size_s {
-      --number-input-gutter-x: 16px;
-      --number-input-input-height: 48px;
-      --number-input-input-font: var(--typography-text-s-font);
-      --number-input-input-padding: 21px 0 6px;
-      --number-input-input-gap: var(--space-m);
-      --number-input-button-width: 32px;
-      --number-input-button-height: 20px;
+      --textfield-gutter-x: 16px;
+      --textfield-input-height: 48px;
+      --textfield-input-font: var(--typography-text-s-font);
+      --textfield-input-padding: 21px 0 6px;
+      --textfield-input-gap: var(--space-m);
+      --textfield-button-width: 32px;
+      --textfield-button-height: 20px;
     }
 .InputNumber_size_m {
-      --number-input-gutter-x: 20px;
-      --number-input-input-height: 56px;
-      --number-input-input-font: var(--typography-text-m-font);
-      --number-input-input-padding: 24px 0 6px;
-      --number-input-input-gap: var(--space-m);
-      --number-input-button-width: 40px;
-      --number-input-button-height: 24px;
+      --textfield-gutter-x: 20px;
+      --textfield-input-height: 56px;
+      --textfield-input-font: var(--typography-text-m-font);
+      --textfield-input-padding: 24px 0 6px;
+      --textfield-input-gap: var(--space-m);
+      --textfield-button-width: 40px;
+      --textfield-button-height: 24px;
     }
 .InputNumber_size_l {
-      --number-input-gutter-x: 24px;
-      --number-input-input-height: 64px;
-      --number-input-input-font: var(--typography-text-l-font);
-      --number-input-input-padding: 26px 0 6px;
-      --number-input-input-gap: var(--space-l);
-      --number-input-button-width: 48px;
-      --number-input-button-height: 28px;
+      --textfield-gutter-x: 24px;
+      --textfield-input-height: 64px;
+      --textfield-input-font: var(--typography-text-l-font);
+      --textfield-input-padding: 26px 0 6px;
+      --textfield-input-gap: var(--space-l);
+      --textfield-button-width: 48px;
+      --textfield-button-height: 28px;
     }
 .InputNumber_fullWidth {
     inline-size: 100%;
   }
 .InputNumber_hasLabel .InputNumber-Field {
-      padding: var(--number-input-input-padding);
-      font: var(--number-input-input-font);
+      padding: var(--textfield-input-padding);
+      font: var(--textfield-input-font);
     }
 .InputNumber_hasLabel .InputNumber-Field::placeholder {
         opacity: 0;
@@ -141,31 +128,31 @@
         opacity: 1;
       }
 .InputNumber:hover {
-    --number-input-border-color: var(--color-border-main-hover);
+    --textfield-border-color: var(--color-border-main-hover);
   }
 .InputNumber_focused,
   .InputNumber_focused:hover {
-    --number-input-border-width: var(--border-width-m);
-    --number-input-background-color: var(--color-background-main);
-    --number-input-border-color: var(--color-border-action);
+    --textfield-border-width: var(--border-width-m);
+    --textfield-background-color: var(--color-background-main);
+    --textfield-border-color: var(--color-border-action);
   }
 .InputNumber_error,
   .InputNumber_error.InputNumber:hover,
   .InputNumber_error.InputNumber_focused,
   .InputNumber_error.InputNumber_focused:hover {
-    --number-input-border-color: var(--color-border-error);
+    --textfield-border-color: var(--color-border-error);
   }
 .InputNumber_disabled {
-    --number-input-border-color: var(--color-border-disabled);
-    --number-input-background-color: var(--color-background-disabled);
-    --number-input-color: var(--color-content-secondary);
+    --textfield-border-color: var(--color-border-disabled);
+    --textfield-background-color: var(--color-background-disabled);
+    --textfield-color: var(--color-content-secondary);
     pointer-events: none;
     cursor: default;
   }
 .IconButton.InputNumber-Increment,
 .IconButton.InputNumber-Decrement {
-  inline-size: var(--number-input-button-width);
-  block-size: var(--number-input-button-height);
+  inline-size: var(--textfield-button-width);
+  block-size: var(--textfield-button-height);
 }
 .IconButton.InputNumber-Increment *, .IconButton.InputNumber-Decrement * {
     pointer-events: none;

package/__inner__/cjs/components/InputNumber/InputNumber.js

@@ -14,6 +14,7 @@ var classname_1 = require("../../utils/classname");
 var FieldHint_1 = require("../FieldHint");
 var FieldIcon_1 = require("../FieldIcon");
 var FieldLabel_1 = require("../FieldLabel");
+var Fieldset_1 = require("../Fieldset");
 var IconButton_1 = require("../IconButton");
 var constants_1 = require("./constants");
 var utils_1 = require("./utils");
@@ -145,7 +146,7 @@ exports.InputNumber = (0, react_1.forwardRef)(function (inProps, ref) {
             react_1["default"].createElement("span", { className: (0, exports.cnInputNumber)('Controls') },
                 react_1["default"].createElement(IconButton_1.IconButton, { tabIndex: -1, size: size, className: (0, exports.cnInputNumber)('Increment'), icon: icons_1.SortUpIcon, onMouseDown: handleMouseDown('increment'), disabled: disabled, "aria-label": "increment", variant: "ghost" }),
                 react_1["default"].createElement(IconButton_1.IconButton, { tabIndex: -1, size: size, icon: icons_1.SortDownIcon, className: (0, exports.cnInputNumber)('Decrement'), onMouseDown: handleMouseDown('decrement'), disabled: disabled, "aria-label": "decrement", variant: "ghost" })),
-            react_1["default"].createElement("fieldset", { className: (0, exports.cnInputNumber)('Fieldset') })),
+            react_1["default"].createElement(Fieldset_1.Fieldset, { className: (0, exports.cnInputNumber)('Fieldset') })),
         react_1["default"].createElement(FieldHint_1.FieldHint, { size: size, error: error, disabled: disabled }, hint)));
 });
 exports.InputNumber.displayName = 'InputNumber';

package/__inner__/cjs/components/InputNumber/utils.d.ts

@@ -1,5 +1,5 @@
-import { KeyboardEvent } from 'react';
-import { InputNumberValue, InputNumberCountDirection } from './types';
+import type { KeyboardEvent } from 'react';
+import type { InputNumberValue, InputNumberCountDirection } from './types';
 export declare const isValidValue: (value?: InputNumberValue) => boolean;
 export declare const isInputInvalid: (event: KeyboardEvent<HTMLInputElement>) => boolean;
 export declare const getValue: ({ value, step, min, max, countDirection, }: {

package/__inner__/cjs/components/Link/Link.d.ts

@@ -1,5 +1,5 @@
 import './Link.css';
-import { ElementType } from 'react';
+import type { ElementType } from 'react';
 import { type PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
 import { type TypographyBaseProps } from '../Typography';
 export type LinkBaseProps = Pick<TypographyBaseProps, 'variant' | 'display' | 'defaultMargin' | 'children' | 'noWrap' | 'align'>;

package/__inner__/cjs/components/List/components/ListItem/ListItem.d.ts

@@ -1,6 +1,5 @@
 import './ListItem.css';
-import { ElementType } from 'react';
-import type { ReactNode } from 'react';
+import type { ReactNode, ElementType } from 'react';
 import { type PolymorphicComponentPropsWithoutRef } from '../../../../utils/polymorphicComponentWithRef';
 import { LIST_ITEM_DEFAULT_TAG } from '../../constants';
 export declare const cnListItem: import("@bem-react/classname").ClassNameFormatter;

package/__inner__/cjs/components/List/components/ListItemButton/ListItemButton.d.ts

@@ -1,6 +1,5 @@
 import './ListItemButton.css';
-import { ElementType } from 'react';
-import type { ReactNode } from 'react';
+import type { ReactNode, ElementType } from 'react';
 import { type PolymorphicComponentPropsWithoutRef } from '../../../../utils/polymorphicComponentWithRef';
 import { LIST_ITEM_BUTTON_DEFAULT_TAG } from '../../constants';
 export declare const cnListItemButton: import("@bem-react/classname").ClassNameFormatter;

package/__inner__/cjs/components/List/types.d.ts

@@ -1,7 +1,7 @@
 import type { ElementType, ReactNode } from 'react';
-import { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
-import { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
-import { LIST_DEFAULT_TAG } from './constants';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
+import type { LIST_DEFAULT_TAG } from './constants';
 export type ListSizeVariant = FormElementSizeVariant;
 export type ListContextValue = {
     size: ListSizeVariant;

package/__inner__/cjs/components/Menu/components/MenuItem/MenuItem.d.ts

@@ -1,4 +1,4 @@
-import { ElementType } from 'react';
+import type { ElementType } from 'react';
 import { type PolymorphicComponentPropsWithoutRef } from '../../../../utils/polymorphicComponentWithRef';
 import { type ListItemButtonBaseProps } from '../../../List';
 import { LIST_ITEM_BUTTON_DEFAULT_TAG } from '../../../List/constants';

package/__inner__/cjs/components/Menu/components/MenuList/MenuList.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ListProps } from '../../../List';
+import type { ListProps } from '../../../List';
 export type MenuListProps = {
     /** Если {true} устанавливает автофокус на первый или выбранный элемент в списке */
     autoFocus?: boolean;

package/__inner__/cjs/components/Modal/Modal.d.ts

@@ -1,7 +1,7 @@
 import './Modal.css';
 import React from 'react';
 import type { ReactNode, RefObject } from 'react';
-import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
+import type { CSSTransitionProps } from 'react-transition-group/CSSTransition';
 import { type BackdropProps } from '../Backdrop';
 import { type PaperProps } from '../Paper';
 import { type PortalProps, type PortalRef } from '../Portal';

package/__inner__/cjs/components/Modal/Modal.js

@@ -72,7 +72,7 @@ exports.Modal = (0, react_1.forwardRef)(function (_a, ref) {
     });
     return (react_1["default"].createElement(react_transition_group_1.CSSTransition, tslib_1.__assign({ classNames: (0, exports.cnModal)({ animation: true }), timeout: 300 }, transitionProps, { "in": openState, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: onExited, unmountOnExit: !keepMounted, appear: true }),
         react_1["default"].createElement(Portal_1.Portal, tslib_1.__assign({}, other, { className: (0, exports.cnModal)({ hidden: keepMounted && !openState, hasBackdrop: hasBackdrop }, [className]), ref: ref }),
-            !hideBackdrop && (react_1["default"].createElement(Backdrop_1.Backdrop, tslib_1.__assign({ zIndex: -1, onClick: onClose }, backdropProps, { open: openState, className: backdropProps === null || backdropProps === void 0 ? void 0 : backdropProps.className }))),
+            !hideBackdrop && (react_1["default"].createElement(Backdrop_1.Backdrop, tslib_1.__assign({ zIndex: -1 }, backdropProps, { open: openState, className: backdropProps === null || backdropProps === void 0 ? void 0 : backdropProps.className }))),
             react_1["default"].createElement(components_1.ModalConsumer, tslib_1.__assign({}, windowProps, { open: openState && !disableScrollLock, ref: (0, useMultiRef_1.useMultiRef)([modalInnerRef, trapRef, windowProps === null || windowProps === void 0 ? void 0 : windowProps.ref]) }), children))));
 });
 exports.Modal.displayName = 'Modal';

package/__inner__/cjs/components/Modal/components/ModalConsumer.d.ts

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { PaperProps } from '../../Paper';
+import type { FC } from 'react';
+import type { PaperProps } from '../../Paper';
 export declare const ModalConsumer: FC<PaperProps & {
     open: boolean;
 }>;

package/__inner__/cjs/components/Pagination/helpers/createPaginationRange/createPaginationRange.d.ts

@@ -1,5 +1,5 @@
 import type { PaginationBaseProps } from '../../index';
-import { EllipsisType } from '../../types';
+import type { EllipsisType } from '../../types';
 type Params = Required<Pick<PaginationBaseProps, 'page' | 'pageSize' | 'totalCount' | 'siblingCount'>>;
 export declare const createPaginationRange: ({ page, pageSize, totalCount, siblingCount, }: Params) => (number | EllipsisType)[];
 export {};

package/__inner__/cjs/components/Pagination/types.d.ts

@@ -1,7 +1,7 @@
-import React, { HTMLAttributes } from 'react';
-import { PaginationItemProps } from './components';
-import { ELLIPSIS, NEXT, PREVIOUS } from './constants';
-import { GetItemAriaLabel } from './helpers/getItemAriaLabel';
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { PaginationItemProps } from './components';
+import type { ELLIPSIS, NEXT, PREVIOUS } from './constants';
+import type { GetItemAriaLabel } from './helpers/getItemAriaLabel';
 export type EllipsisType = typeof ELLIPSIS;
 export type PreviousType = typeof PREVIOUS;
 export type NextType = typeof NEXT;
@@ -33,6 +33,6 @@ export type PaginationBaseProps = {
     /** Функция форматирования атрибута aria-label. */
     getItemAriaLabel?: GetItemAriaLabel;
     /** Рендер функция, для отображения кнопок пагинации.  */
-    renderComponent?: (PagItemProps: PaginationItemProps) => React.ReactNode;
+    renderComponent?: (PagItemProps: PaginationItemProps) => ReactNode;
 };
 export type PaginationProps = PaginationBaseProps & HTMLAttributes<HTMLElement>;

package/__inner__/cjs/components/Popover/types.d.ts

@@ -1,11 +1,10 @@
-import React, { ComponentRef, ElementType } from 'react';
-import type { RefObject } from 'react';
-import PopperJS from '@popperjs/core';
+import type { RefObject, ComponentRef, ElementType, ReactNode } from 'react';
+import type PopperJS from '@popperjs/core';
 import type { CSSTransitionProps } from 'react-transition-group/CSSTransition';
 import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
 import type { PortalProps } from '../Portal';
 import type { PopoverArrowProps } from './components';
-import { POPOVER_DEFAULT_TAG } from './constants';
+import type { POPOVER_DEFAULT_TAG } from './constants';
 export type VirtualElement = {
     getBoundingClientRect: () => DOMRect;
     contextElement?: Element;
@@ -25,7 +24,7 @@ export type PopoverBaseProps = {
         y: number;
     };
     /** Контент поповера */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /** Функция обратного вызова, которая будет вызвана когда компонент запрашивает закрытие */
     onClose?: () => void;
     /** Функция обратного вызова которая будет вызвана до начала

package/__inner__/cjs/components/ProgressBar/ProgressBar.d.ts

@@ -1,6 +1,6 @@
 import './ProgressBar.css';
-import { type ElementType } from 'react';
-import { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import type { ElementType } from 'react';
+import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
 import { PROGRESSBAR_DEFAULT_TAG } from './constants';
 export declare const cnProgressBar: import("@bem-react/classname").ClassNameFormatter;
 export type ProgressBarBaseProps = {