@ozen-ui/kit 0.41.0 → 0.43.0

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

@@ -1,6 +1,7 @@
-import type { Ref, HTMLAttributes, MouseEvent, KeyboardEvent, ChangeEventHandler, ReactNode, ComponentPropsWithRef } from 'react';
+import type { ChangeEventHandler, ComponentPropsWithRef, HTMLAttributes, KeyboardEvent, MouseEvent, ReactNode, Ref } from 'react';
 import type { ExtendableProps } from '../../types/ExtendableProps';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import type { FieldHintProps } from '../FieldHint';
 import type { FieldIconProps } from '../FieldIcon';
 import type { FieldLabelProps } from '../FieldLabel';
 export type FilePickerSizeVariant = FormElementSizeVariant;
@@ -61,6 +62,8 @@ export type FilePickerBaseProps = {
     disabled?: boolean;
     /** Свойства FieldLabel */
     labelProps?: FieldLabelProps;
+    /** Cвойства FieldHint */
+    hintProps?: Omit<FieldHintProps, 'children'>;
     /** Функция  */
     renderValue?: FilePickerRenderValue;
     /** Текст для кнопки очистки поля */

package/__inner__/cjs/components/IconButton/IconButton.css

@@ -12,11 +12,11 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  border-radius: var(--border-radius-xs);
   border: none;
   color: var(--icon-button-font-color);
   background-color: var(--icon-button-bg-color);
   opacity: 1;
+  border-radius: var(--icon-button-border-radius);
   transition:
     background-color var(--transition-default),
     box-shadow var(--transition-default),
@@ -27,6 +27,7 @@
 
   .IconButton_size_2xs {
     --icon-button-size: 32px;
+    --icon-button-border-radius: var(--border-radius-m);
   }
 
   .IconButton_size_2xs.IconButton_compressed:not(.IconButton_variant_function) {
@@ -35,6 +36,7 @@
 
   .IconButton_size_xs {
     --icon-button-size: 40px;
+    --icon-button-border-radius: var(--border-radius-m);
   }
 
   .IconButton_size_xs.IconButton_compressed:not(.IconButton_variant_function) {
@@ -43,6 +45,7 @@
 
   .IconButton_size_s {
     --icon-button-size: 48px;
+    --icon-button-border-radius: var(--border-radius-l);
   }
 
   .IconButton_size_s.IconButton_compressed:not(.IconButton_variant_function) {
@@ -51,6 +54,7 @@
 
   .IconButton_size_m {
     --icon-button-size: 56px;
+    --icon-button-border-radius: var(--border-radius-l);
   }
 
   .IconButton_size_m.IconButton_compressed:not(.IconButton_variant_function) {
@@ -59,6 +63,7 @@
 
   .IconButton_size_l {
     --icon-button-size: 64px;
+    --icon-button-border-radius: var(--border-radius-l);
   }
 
   .IconButton_size_l.IconButton_compressed:not(.IconButton_variant_function) {
@@ -116,6 +121,7 @@
 
   .IconButton_variant_function {
     --icon-button-size: auto;
+    --icon-button-border-radius: var(--border-radius-xs);
   }
 
   .IconButton_variant_function:hover {

package/__inner__/cjs/components/IconButtonNext/IconButton.css

@@ -12,11 +12,11 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  border-radius: var(--border-radius-xs);
   border: none;
   color: var(--icon-button-font-color);
   background-color: var(--icon-button-bg-color);
   opacity: 1;
+  border-radius: var(--icon-button-border-radius);
   transition:
     background-color var(--transition-default),
     box-shadow var(--transition-default),
@@ -27,6 +27,7 @@
 
   .IconButtonNext_size_2xs {
     --icon-button-size: 32px;
+    --icon-button-border-radius: var(--border-radius-m);
   }
 
   .IconButtonNext_size_2xs.IconButtonNext_compressed:not(.IconButtonNext_variant_function) {
@@ -35,6 +36,7 @@
 
   .IconButtonNext_size_xs {
     --icon-button-size: 40px;
+    --icon-button-border-radius: var(--border-radius-m);
   }
 
   .IconButtonNext_size_xs.IconButtonNext_compressed:not(.IconButtonNext_variant_function) {
@@ -43,6 +45,7 @@
 
   .IconButtonNext_size_s {
     --icon-button-size: 48px;
+    --icon-button-border-radius: var(--border-radius-l);
   }
 
   .IconButtonNext_size_s.IconButtonNext_compressed:not(.IconButtonNext_variant_function) {
@@ -51,6 +54,7 @@
 
   .IconButtonNext_size_m {
     --icon-button-size: 56px;
+    --icon-button-border-radius: var(--border-radius-l);
   }
 
   .IconButtonNext_size_m.IconButtonNext_compressed:not(.IconButtonNext_variant_function) {
@@ -59,6 +63,7 @@
 
   .IconButtonNext_size_l {
     --icon-button-size: 64px;
+    --icon-button-border-radius: var(--border-radius-m);
   }
 
   .IconButtonNext_size_l.IconButtonNext_compressed:not(.IconButtonNext_variant_function) {
@@ -209,6 +214,7 @@
 
   .IconButtonNext_variant_function {
     --icon-button-size: auto;
+    --icon-button-border-radius: var(--border-radius-xs);
   }
 
   .IconButtonNext_variant_function.IconButtonNext_color_primary,
@@ -258,6 +264,7 @@
     --icon-button-bg-color: var(--color-background-main);
     --icon-button-bg-color-hover: var(--color-background-main-hover);
     --icon-button-bg-color-active: var(--color-background-main-pressed);
+    --icon-button-bg-color-focus: var(--color-background-main);
     --icon-button-font-color: var(--color-content-primary);
     --icon-button-font-color-active: var(--color-content-primary);
     --icon-button-font-color-focus: var(--color-content-primary);
@@ -325,6 +332,7 @@
   .IconButtonNext:focus:not(:focus-visible, :active, :hover) {
     box-shadow: none;
     color: var(--icon-button-font-color);
+    background-color: var(--icon-button-bg-color);
   }
 
   .IconButtonNext:focus {

package/__inner__/cjs/components/IconButtonNext/IconButton.d.ts

@@ -12,7 +12,7 @@ export type IconButtonColorVariant = (typeof iconButtonColorVariant)[number];
 export type IconButtonIcon = RenderContentType<IconProps & {
     size?: IconSize;
 }>['content'];
-type IconButtonBaseProps = {
+export type IconButtonBaseProps = {
     /** Иконка */
     icon: IconButtonIcon;
     /** Вариант представления компонента */
@@ -38,4 +38,3 @@ type IconButtonBaseProps = {
 export type IconButtonProps<As extends ElementType = typeof ICON_BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<IconButtonBaseProps, As>;
 export declare const cnIconButton: import("@bem-react/classname").ClassNameFormatter;
 export declare const IconButton: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<IconButtonBaseProps, "button">;
-export {};

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

@@ -23,7 +23,7 @@ export declare const Indicator: React.ForwardRefExoticComponent<{
     /** Цветовой вариант индикатор
      * @default success
      * */
-    variant?: "warning" | "error" | "info" | "success" | "neutral" | undefined;
+    variant?: "error" | "info" | "success" | "warning" | "neutral" | undefined;
     /** Размер
      * @default m
      * */

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

@@ -21,7 +21,7 @@ exports.Input = (0, react_1.forwardRef)(function (inProps, ref) {
         props: inProps,
         name: 'Input',
     });
-    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, fullWidth = props.fullWidth, disabled = props.disabled, hint = props.hint, required = props.required, className = props.className, value = props.value, defaultValue = props.defaultValue, onChange = props.onChange, inputProps = props.inputProps, bodyProps = props.bodyProps, labelProps = props.labelProps, maxLength = props.maxLength, minLength = props.minLength, inputRef = props.inputRef, labelRef = props.labelRef, other = tslib_1.__rest(props, ["size", "label", "error", "autoFocus", "placeholder", "id", "name", "type", "renderLeft", "renderRight", "fullWidth", "disabled", "hint", "required", "className", "value", "defaultValue", "onChange", "inputProps", "bodyProps", "labelProps", "maxLength", "minLength", "inputRef", "labelRef"]);
+    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, fullWidth = props.fullWidth, disabled = props.disabled, hint = props.hint, required = props.required, className = props.className, value = props.value, defaultValue = props.defaultValue, onChange = props.onChange, inputProps = props.inputProps, bodyProps = props.bodyProps, labelProps = props.labelProps, hintProps = props.hintProps, maxLength = props.maxLength, minLength = props.minLength, inputRef = props.inputRef, labelRef = props.labelRef, other = tslib_1.__rest(props, ["size", "label", "error", "autoFocus", "placeholder", "id", "name", "type", "renderLeft", "renderRight", "fullWidth", "disabled", "hint", "required", "className", "value", "defaultValue", "onChange", "inputProps", "bodyProps", "labelProps", "hintProps", "maxLength", "minLength", "inputRef", "labelRef"]);
     var bodyInnerRef = (0, react_1.useRef)(null);
     var fieldInnerRef = (0, react_1.useRef)(null);
     /* Хук useEventListener необходим для того, чтобы при нажатии на кнопку мыши
@@ -48,6 +48,6 @@ exports.Input = (0, react_1.forwardRef)(function (inProps, ref) {
                 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, maxLength: maxLength, minLength: minLength }, 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)));
+        react_1.default.createElement(FieldHint_1.FieldHint, tslib_1.__assign({}, hintProps), hint)));
 });
 exports.Input.displayName = 'Input';

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

@@ -1,6 +1,7 @@
 import type { ComponentPropsWithRef, Ref } from 'react';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { FIELD_CONTROL_DEFAULT_TAG } from '../FieldControl';
+import type { FieldHintProps } from '../FieldHint';
 import type { FieldIconProps } from '../FieldIcon';
 import type { FieldLabelProps } from '../FieldLabel';
 export declare const inputTypeVariant: readonly ["number", "date", "datetime-local", "time", "text", "tel", "password", "email"];
@@ -66,6 +67,8 @@ export type InputProps = Omit<ComponentPropsWithRef<typeof FIELD_CONTROL_DEFAULT
     labelProps?: FieldLabelProps;
     /** Cвойства Body */
     bodyProps?: ComponentPropsWithRef<'label'>;
+    /** Cвойства FieldHint */
+    hintProps?: Omit<FieldHintProps, 'children'>;
     /** data-атрибут для тестирования */
     'data-testid'?: string;
 } & InputPropsDeprecated;

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

@@ -94,12 +94,12 @@
     row-gap: var(--input-number-button-gap);
   }
 
-.IconButton.InputNumber-Increment,
-.IconButton.InputNumber-Decrement {
+.IconButtonNext.InputNumber-Increment,
+.IconButtonNext.InputNumber-Decrement {
   inline-size: var(--input-number-button-inline-size);
   block-size: var(--input-number-button-block-size);
 }
 
-.IconButton.InputNumber-Increment *, .IconButton.InputNumber-Decrement * {
+.IconButtonNext.InputNumber-Increment *, .IconButtonNext.InputNumber-Decrement * {
     pointer-events: none;
   }

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

@@ -18,7 +18,7 @@ var FieldIcon_1 = require("../FieldIcon");
 var FieldInput_1 = require("../FieldInput");
 var FieldLabel_1 = require("../FieldLabel");
 var Fieldset_1 = require("../Fieldset");
-var IconButton_1 = require("../IconButton");
+var IconButtonNext_1 = require("../IconButtonNext");
 var constants_1 = require("./constants");
 var utils_1 = require("./utils");
 exports.cnInputNumber = (0, classname_1.cn)('InputNumber');
@@ -27,7 +27,7 @@ exports.InputNumber = (0, react_1.forwardRef)(function (inProps, ref) {
         props: inProps,
         name: 'InputNumber',
     });
-    var _a = props.size, size = _a === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_SIZE : _a, _b = props.step, step = _b === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_STEP : _b, _c = props.autoFocus, autoFocus = _c === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_AUTO_FOCUS : _c, _d = props.error, error = _d === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_ERROR : _d, _e = props.required, required = _e === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_REQUIRED : _e, _f = props.disabled, disabled = _f === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_DISABLED : _f, _g = props.fullWidth, fullWidth = _g === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_FULL_WIDTH : _g, _h = props.defaultValue, defaultValue = _h === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_VALUE : _h, _j = props.min, min = _j === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_MIN : _j, _k = props.max, max = _k === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_MAX : _k, label = props.label, placeholder = props.placeholder, id = props.id, name = props.name, renderLeft = props.renderLeft, renderRight = props.renderRight, hint = props.hint, className = props.className, inputProps = props.inputProps, valueProp = props.value, onChange = props.onChange, labelRef = props.labelRef, labelProps = props.labelProps, bodyProps = props.bodyProps, incrementButtonText = props.incrementButtonText, decrementButtonText = props.decrementButtonText, other = tslib_1.__rest(props, ["size", "step", "autoFocus", "error", "required", "disabled", "fullWidth", "defaultValue", "min", "max", "label", "placeholder", "id", "name", "renderLeft", "renderRight", "hint", "className", "inputProps", "value", "onChange", "labelRef", "labelProps", "bodyProps", "incrementButtonText", "decrementButtonText"]);
+    var _a = props.size, size = _a === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_SIZE : _a, _b = props.step, step = _b === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_STEP : _b, _c = props.autoFocus, autoFocus = _c === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_AUTO_FOCUS : _c, _d = props.error, error = _d === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_ERROR : _d, _e = props.required, required = _e === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_REQUIRED : _e, _f = props.disabled, disabled = _f === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_DISABLED : _f, _g = props.fullWidth, fullWidth = _g === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_FULL_WIDTH : _g, _h = props.defaultValue, defaultValue = _h === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_VALUE : _h, _j = props.min, min = _j === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_MIN : _j, _k = props.max, max = _k === void 0 ? constants_1.INPUT_NUMBER_DEFAULT_MAX : _k, label = props.label, placeholder = props.placeholder, id = props.id, name = props.name, renderLeft = props.renderLeft, renderRight = props.renderRight, hint = props.hint, className = props.className, inputProps = props.inputProps, valueProp = props.value, onChange = props.onChange, labelRef = props.labelRef, labelProps = props.labelProps, bodyProps = props.bodyProps, hintProps = props.hintProps, incrementButtonText = props.incrementButtonText, decrementButtonText = props.decrementButtonText, other = tslib_1.__rest(props, ["size", "step", "autoFocus", "error", "required", "disabled", "fullWidth", "defaultValue", "min", "max", "label", "placeholder", "id", "name", "renderLeft", "renderRight", "hint", "className", "inputProps", "value", "onChange", "labelRef", "labelProps", "bodyProps", "hintProps", "incrementButtonText", "decrementButtonText"]);
     var _l = tslib_1.__read((0, useBoolean_1.useBoolean)(false), 2), focused = _l[0], _m = _l[1], onFocus = _m.on, offFocus = _m.off;
     var _o = tslib_1.__read((0, react_1.useState)(null), 2), timeoutId = _o[0], setTimeoutId = _o[1];
     var _p = tslib_1.__read((0, react_1.useState)(null), 2), countDirection = _p[0], setCountDirection = _p[1];
@@ -137,9 +137,9 @@ exports.InputNumber = (0, react_1.forwardRef)(function (inProps, ref) {
                 react_1.default.createElement(FieldInput_1.FieldInput, tslib_1.__assign({ id: id, min: min, max: max, step: step, name: name, type: "number", value: valueState, autoFocus: autoFocus, placeholder: placeholder }, inputProps, { onBlur: handleBlur, onFocus: handleFocus, onChange: handleChange, onKeyDown: handleKeyDown, ref: (0, useMultiRef_1.useMultiRef)([inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref, fieldInnerRef]), className: (0, exports.cnInputNumber)('Field', [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]) }))),
             react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderRight }),
             react_1.default.createElement("span", { className: (0, exports.cnInputNumber)('Controls') },
-                react_1.default.createElement(IconButton_1.IconButton, { size: size, type: "button", tabIndex: -1, variant: "ghost", icon: icons_1.SortUpIcon, disabled: disabled, "aria-label": incrementButtonText, className: (0, exports.cnInputNumber)('Increment'), onMouseDown: handleMouseDown('increment') }),
-                react_1.default.createElement(IconButton_1.IconButton, { size: size, tabIndex: -1, type: "button", variant: "ghost", icon: icons_1.SortDownIcon, disabled: disabled, "aria-label": decrementButtonText, className: (0, exports.cnInputNumber)('Decrement'), onMouseDown: handleMouseDown('decrement') })),
+                react_1.default.createElement(IconButtonNext_1.IconButton, { size: size, type: "button", tabIndex: -1, variant: "ghost", icon: icons_1.SortUpIcon, disabled: disabled, "aria-label": incrementButtonText, className: (0, exports.cnInputNumber)('Increment'), onMouseDown: handleMouseDown('increment') }),
+                react_1.default.createElement(IconButtonNext_1.IconButton, { size: size, tabIndex: -1, type: "button", variant: "ghost", icon: icons_1.SortDownIcon, disabled: disabled, "aria-label": decrementButtonText, className: (0, exports.cnInputNumber)('Decrement'), onMouseDown: handleMouseDown('decrement') })),
             react_1.default.createElement(Fieldset_1.Fieldset, { className: (0, exports.cnInputNumber)('Fieldset') })),
-        react_1.default.createElement(FieldHint_1.FieldHint, null, hint)));
+        react_1.default.createElement(FieldHint_1.FieldHint, tslib_1.__assign({}, hintProps), hint)));
 });
 exports.InputNumber.displayName = 'InputNumber';

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

@@ -1,5 +1,6 @@
-import type { HTMLAttributes, Ref, ComponentPropsWithRef, ChangeEvent, MouseEvent } from 'react';
+import type { ChangeEvent, ComponentPropsWithRef, HTMLAttributes, MouseEvent, Ref } from 'react';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import type { FieldHintProps } from '../FieldHint';
 import type { FieldIconProps } from '../FieldIcon';
 import type { FieldLabelProps } from '../FieldLabel';
 type InputNumberPropsDeprecated = {
@@ -59,6 +60,8 @@ export type InputNumberProps = {
     labelProps?: FieldLabelProps;
     /** Cвойства Body */
     bodyProps?: ComponentPropsWithRef<'label'>;
+    /** Cвойства FieldHint */
+    hintProps?: Omit<FieldHintProps, 'children'>;
     /** Шаг инкремента/декремента */
     step?: number;
     /** Минимально допустимое значение */

package/__inner__/cjs/components/List/List.css

@@ -1,11 +1,10 @@
 .List {
-  --list-item-color: var(--color-content-primary);
-  --list-item-border-radius: var(--border-radius-xs);
   --list-item-bg-color: transparent;
+  --list-item-color: var(--color-content-primary);
+  --list-pipka-bg-color: var(--color-content-action);
+  --list-item-bg-color-disabled: var(--color-content-tertiary);
   --list-item-bg-color-hover: var(--color-background-main-hover);
   --list-item-bg-color-active: var(--color-background-main-pressed);
-  --list-item-bg-color-disabled: var(--color-content-tertiary);
-  --list-pipka-bg-color: var(--color-content-action);
   --list-pipka-border-radius: 0 var(--border-radius-xs) var(--border-radius-xs)
     0;
   display: flex;
@@ -30,57 +29,62 @@
 
   .List_size_2xs {
       --list-gutter: var(--spacing-3xs);
-      --list-item-min-height: 32px;
+      --list-item-min-height: var(--control-height-2xs);
       --list-item-icon-min-width: 16px;
       --list-item-avatar-min-width: 16px;
       --list-item-padding: 0 8px;
       --list-item-children-margin-right: 8px;
       --list-pipka-height: 32px;
       --list-pipka-width: 4px;
+      --list-item-border-radius: var(--border-radius-m);
     }
 
   .List_size_xs {
       --list-gutter: var(--spacing-3xs);
-      --list-item-min-height: 40px;
+      --list-item-min-height: var(--control-height-xs);
       --list-item-icon-min-width: 16px;
       --list-item-avatar-min-width: 24px;
       --list-item-padding: 4px 8px;
       --list-item-children-margin-right: 8px;
       --list-pipka-height: 40px;
       --list-pipka-width: 4px;
+      --list-item-border-radius: var(--border-radius-m);
     }
 
   .List_size_s {
       --list-gutter: var(--spacing-3xs);
-      --list-item-min-height: 48px;
+      --list-item-min-height: var(--control-height-s);
       --list-item-icon-min-width: 16px;
       --list-item-avatar-min-width: 32px;
       --list-item-padding: 6px 12px;
       --list-item-children-margin-right: 12px;
       --list-pipka-height: 40px;
       --list-pipka-width: 4px;
+      --list-item-border-radius: var(--border-radius-l);
     }
 
   .List_size_m {
       --list-gutter: var(--spacing-2xs);
-      --list-item-min-height: 56px;
+      --list-item-min-height: var(--control-height-m);
       --list-item-icon-min-width: 24px;
       --list-item-avatar-min-width: 40px;
       --list-item-padding: 8px 12px;
       --list-item-children-margin-right: 12px;
       --list-pipka-height: 48px;
       --list-pipka-width: 4px;
+      --list-item-border-radius: var(--border-radius-l);
     }
 
   .List_size_l {
       --list-gutter: var(--spacing-2xs);
-      --list-item-min-height: 64px;
+      --list-item-min-height: var(--control-height-l);
       --list-item-icon-min-width: 24px;
       --list-item-avatar-min-width: 48px;
       --list-item-padding: 8px 16px;
       --list-item-children-margin-right: 16px;
       --list-pipka-height: 48px;
       --list-pipka-width: 4px;
+      --list-item-border-radius: var(--border-radius-l);
     }
 
   .List_disablePadding,

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

@@ -1,6 +1,7 @@
 import './Menu.css';
 import React from 'react';
 import type { RefObject, ComponentPropsWithRef } from 'react';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import { type PopoverBaseProps } from '../Popover';
 import type { PORTAL_DEFAULT_TAG } from '../Portal';
 import { type MenuListProps } from './components';
@@ -8,6 +9,12 @@ export declare const cnMenu: import("@bem-react/classname").ClassNameFormatter;
 export type MenuProps = {
     /** Свойства компонента MenuList */
     menuListProps?: Omit<MenuListProps, 'children'>;
+    /**
+     * Ссылка на компонент MenuList
+     * @deprecated Используйте menuListProps.ref
+     * */
     menuListRef?: RefObject<HTMLDivElement>;
+    /** Размер компонента */
+    size?: FormElementSizeVariant;
 } & Omit<PopoverBaseProps, 'disableEnforceFocus'> & ComponentPropsWithRef<typeof PORTAL_DEFAULT_TAG>;
 export declare const Menu: React.ForwardRefExoticComponent<Omit<MenuProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/cjs/components/Menu/Menu.js

@@ -4,15 +4,18 @@ exports.Menu = exports.cnMenu = void 0;
 var tslib_1 = require("tslib");
 require("./Menu.css");
 var react_1 = tslib_1.__importStar(require("react"));
+var logger_1 = require("@ozen-ui/logger");
 var useEventListener_1 = require("../../hooks/useEventListener");
 var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
+var getPaperSizeToFormElement_1 = require("../../utils/getPaperSizeToFormElement");
 var isKey_1 = require("../../utils/isKey");
 var Popover_1 = require("../Popover");
 var components_1 = require("./components");
+var constants_1 = require("./constants");
 exports.cnMenu = (0, classname_1.cn)('Menu');
 var MenuContextConsumer = function (_a) {
-    var children = _a.children, menuListRef = _a.menuListRef, onClose = _a.onClose, menuListProps = _a.menuListProps;
+    var children = _a.children, onClose = _a.onClose, menuListProps = _a.menuListProps;
     var isTop = (0, Popover_1.usePopover)().isTop;
     var docRef = (0, react_1.useRef)(document);
     (0, useEventListener_1.useEventListener)({
@@ -26,12 +29,16 @@ var MenuContextConsumer = function (_a) {
         element: docRef,
         active: isTop,
     });
-    return (react_1.default.createElement(components_1.MenuList, tslib_1.__assign({}, menuListProps, { ref: menuListRef, autoFocus: true }), children));
+    return (react_1.default.createElement(components_1.MenuList, tslib_1.__assign({}, menuListProps, { autoFocus: true }), children));
 };
 exports.Menu = (0, react_1.forwardRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Menu' });
-    var open = props.open, menuListProps = props.menuListProps, menuListRef = props.menuListRef, onClose = props.onClose, children = props.children, className = props.className, other = tslib_1.__rest(props, ["open", "menuListProps", "menuListRef", "onClose", "children", "className"]);
-    return (react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ offset: [0, 4], className: (0, exports.cnMenu)('', [className]) }, other, { open: open, onClose: onClose, disableEnforceFocus: true, ref: ref }),
-        react_1.default.createElement(MenuContextConsumer, { onClose: onClose, menuListRef: menuListRef, menuListProps: menuListProps }, children)));
+    var _a = props.size, size = _a === void 0 ? constants_1.MENU_DEFAULT_SIZE : _a, open = props.open, menuListProps = props.menuListProps, menuListRef = props.menuListRef, onClose = props.onClose, children = props.children, className = props.className, other = tslib_1.__rest(props, ["size", "open", "menuListProps", "menuListRef", "onClose", "children", "className"]);
+    var radius = (0, getPaperSizeToFormElement_1.getPaperSizeToFormElement)(size);
+    if (process.env.NODE_ENV !== 'production' && menuListRef) {
+        (0, logger_1.deprecate)('Свойство «menuListRef» устарело. Для замены используйте «menuListProps.ref».');
+    }
+    return (react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ offset: [0, 4], radius: radius }, other, { open: open, onClose: onClose, className: (0, exports.cnMenu)('', [className]), disableEnforceFocus: true, ref: ref }),
+        react_1.default.createElement(MenuContextConsumer, { onClose: onClose, menuListRef: menuListRef, menuListProps: tslib_1.__assign(tslib_1.__assign({ size: size }, menuListProps), { ref: menuListRef || (menuListProps === null || menuListProps === void 0 ? void 0 : menuListProps.ref) }) }, children)));
 });
 exports.Menu.displayName = 'Menu';

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

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

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MENU_DEFAULT_SIZE = void 0;
+exports.MENU_DEFAULT_SIZE = 'm';

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

@@ -7,6 +7,6 @@ var Paper_1 = require("../../Paper");
 var index_1 = require("../index");
 exports.ModalConsumer = (0, react_1.forwardRef)(function (_a, ref) {
     var children = _a.children, className = _a.className, other = tslib_1.__rest(_a, ["children", "className"]);
-    return (react_1.default.createElement(Paper_1.Paper, tslib_1.__assign({ radius: "s", background: "main" }, other, { className: (0, index_1.cnModal)('Window', [className]), tabIndex: -1, ref: ref }), children));
+    return (react_1.default.createElement(Paper_1.Paper, tslib_1.__assign({ radius: "l", background: "main" }, other, { className: (0, index_1.cnModal)('Window', [className]), tabIndex: -1, ref: ref }), children));
 });
 exports.ModalConsumer.displayName = 'ModalConsumer';

package/__inner__/cjs/components/Pagination/Pagination.css

@@ -2,12 +2,12 @@
   display: block;
 }
 
-.Pagination-List {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 2px;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
+  .Pagination-List {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    align-items: center;
+    gap: var(--spacing-4xs);
+  }

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

@@ -1,4 +1,4 @@
-import React from 'react';
 import './Pagination.css';
+import type { PaginationBaseProps } from './types';
 export declare const cnPagination: import("@bem-react/classname").ClassNameFormatter;
-export declare const Pagination: React.ForwardRefExoticComponent<import("./types").PaginationBaseProps & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+export declare const Pagination: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<PaginationBaseProps, "nav">;

package/__inner__/cjs/components/Pagination/Pagination.js

@@ -2,35 +2,36 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Pagination = exports.cnPagination = void 0;
 var tslib_1 = require("tslib");
+require("./Pagination.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
 var isNumber_1 = require("../../utils/isNumber");
+var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
 var components_1 = require("./components");
 var constants_1 = require("./constants");
 var createPaginationRange_1 = require("./helpers/createPaginationRange");
 var getItemAriaLabel_1 = require("./helpers/getItemAriaLabel");
 var withNavigationButtons_1 = require("./helpers/withNavigationButtons/withNavigationButtons");
-require("./Pagination.css");
 exports.cnPagination = (0, classname_1.cn)('Pagination');
-exports.Pagination = (0, react_1.forwardRef)(function (inProps, ref) {
+exports.Pagination = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Pagination' });
-    var _a = props.page, page = _a === void 0 ? constants_1.PAGINATION_DEFAULT_PAGE : _a, _b = props.size, size = _b === void 0 ? constants_1.PAGINATION_DEFAULT_SIZE : _b, _c = props.siblingCount, siblingCount = _c === void 0 ? constants_1.PAGINATION_DEFAULT_SIBLING_COUNT : _c, pageSize = props.pageSize, totalCount = props.totalCount, className = props.className, onPageChange = props.onPageChange, _d = props.getItemAriaLabel, getItemAriaLabel = _d === void 0 ? getItemAriaLabel_1.getItemAriaLabel : _d, 
+    var _a = props.as, Tag = _a === void 0 ? constants_1.PAGINATION_DEFAULT_TAG : _a, _b = props.page, page = _b === void 0 ? constants_1.PAGINATION_DEFAULT_PAGE : _b, _c = props.size, size = _c === void 0 ? constants_1.PAGINATION_DEFAULT_SIZE : _c, _d = props.siblingCount, siblingCount = _d === void 0 ? constants_1.PAGINATION_DEFAULT_SIBLING_COUNT : _d, pageSize = props.pageSize, totalCount = props.totalCount, className = props.className, disabledProp = props.disabled, onPageChange = props.onPageChange, _e = props.getItemAriaLabel, getItemAriaLabel = _e === void 0 ? getItemAriaLabel_1.getItemAriaLabel : _e, 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    _e = props.renderComponent, 
+    _f = props.renderComponent, 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    renderComponent = _e === void 0 ? function (_a) {
+    renderComponent = _f === void 0 ? function (_a) {
         var className = _a.className, rest = tslib_1.__rest(_a, ["className"]);
         return (react_1.default.createElement(components_1.PaginationItem, tslib_1.__assign({}, rest)));
-    } : _e, otherProps = tslib_1.__rest(props, ["page", "size", "siblingCount", "pageSize", "totalCount", "className", "onPageChange", "getItemAriaLabel", "renderComponent"]);
-    var _f = (0, react_1.useMemo)(function () {
+    } : _f, otherProps = tslib_1.__rest(props, ["as", "page", "size", "siblingCount", "pageSize", "totalCount", "className", "disabled", "onPageChange", "getItemAriaLabel", "renderComponent"]);
+    var _g = (0, react_1.useMemo)(function () {
         var selected = page + 1;
         return {
             selected: selected,
             previous: selected - 1,
             next: selected + 1,
         };
-    }, [page]), selected = _f.selected, previous = _f.previous, next = _f.next;
+    }, [page]), selected = _g.selected, previous = _g.previous, next = _g.next;
     var range = (0, react_1.useMemo)(function () {
         return (0, createPaginationRange_1.createPaginationRange)({
             page: selected,
@@ -63,7 +64,7 @@ exports.Pagination = (0, react_1.forwardRef)(function (inProps, ref) {
                 size: size,
                 selected: isSelected,
                 page: mapper[type],
-                disabled: mapperDisabled[type],
+                disabled: disabledProp || mapperDisabled[type],
                 'aria-label': getItemAriaLabel({
                     page: mapper[type],
                     selected: isSelected,
@@ -73,8 +74,17 @@ exports.Pagination = (0, react_1.forwardRef)(function (inProps, ref) {
                 className: (0, components_1.cnPaginationItem)({ size: size, selected: isSelected }),
             };
         });
-    }, [range, selected, previous, next, size, getItemAriaLabel, onPageChange]);
-    return (react_1.default.createElement("nav", tslib_1.__assign({ "aria-label": "\u043D\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044F \u043F\u043E \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430\u043C", className: (0, exports.cnPagination)({}, [className]), ref: ref }, otherProps),
+    }, [
+        range,
+        selected,
+        disabledProp,
+        previous,
+        next,
+        size,
+        getItemAriaLabel,
+        onPageChange,
+    ]);
+    return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnPagination)({}, [className]), ref: ref }, otherProps),
         react_1.default.createElement("ul", { className: (0, exports.cnPagination)('List') }, paginationPropsRange.map(function (item, index) { return (react_1.default.createElement("li", { key: item.type === constants_1.ELLIPSIS ? index : item.page + item.type }, renderComponent(item))); }))));
 });
 exports.Pagination.displayName = 'Pagination';

package/__inner__/cjs/components/Pagination/components/PaginationItem/PaginationItem.css

@@ -1,37 +1,36 @@
 /* stylelint-disable */
 .PaginationItem {
   --pagination-item-background: transparent;
-  --pagination-item-border-width: var(--border-width-s);
+  outline: none;
   display: flex;
+  cursor: pointer;
+  text-align: center;
   align-items: center;
-  justify-content: center;
+  text-decoration: none;
   box-sizing: border-box;
-  min-inline-size: var(--pagination-item-size);
+  justify-content: center;
+  color: var(--color-content-primary);
   block-size: var(--pagination-item-size);
-  border: var(--pagination-item-border-width) solid transparent;
+  min-inline-size: var(--pagination-item-size);
   border-radius: var(--pagination-item-border-radius);
-  color: var(--color-content-primary);
   background-color: var(--pagination-item-background);
-  cursor: pointer;
-  text-decoration: none;
-  text-align: center;
-  outline: none;
+  border: var(--border-width-s) solid var(--pagination-item-border-color);
 }
 .PaginationItem_size_s {
       font: var(--typography-text-s-font);
       letter-spacing: var(--typography-text-s-letter_spacing, 0);
       text-transform: var(--typography-text-s-text_transform, none);
 
-      --pagination-item-size: 32px;
-      --pagination-item-border-radius: var(--border-radius-xs);
+      --pagination-item-size: var(--control-height-2xs);
+      --pagination-item-border-radius: var(--border-radius-m);
     }
 .PaginationItem_size_l {
       font: var(--typography-text-l-font);
       letter-spacing: var(--typography-text-l-letter_spacing, 0);
       text-transform: var(--typography-text-l-text_transform, none);
 
-      --pagination-item-size: 56px;
-      --pagination-item-border-radius: var(--border-radius-s);
+      --pagination-item-size: var(--control-height-m);
+      --pagination-item-border-radius: var(--border-radius-l);
     }
 .PaginationItem:hover:not(.PaginationItem_selected) {
     --pagination-item-background: var(--color-background-primary-hover);
@@ -46,7 +45,14 @@
       box-shadow: none;
     }
 .PaginationItem_selected {
-    border: var(--pagination-item-border-width) solid
-      var(--color-background-action);
+    --pagination-item-border-color: var(--color-border-action);
     cursor: initial;
   }
+.PaginationItem_disabled {
+    cursor: auto;
+    pointer-events: none;
+    color: var(--color-content-disabled);
+  }
+.PaginationItem_disabled.PaginationItem_selected {
+    --pagination-item-border-color: var(--color-border-disabled);
+  }