@ozen-ui/kit 0.41.0 → 0.43.0

package/__inner__/esm/components/Drawer/Drawer.css

@@ -7,7 +7,6 @@
     inline-size: 100%;
     max-inline-size: var(--drawer-width);
     block-size: 100%;
-    border-radius: var(--drawer-border-radius);
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
@@ -106,18 +105,24 @@
       }
 .Drawer_placement_right {
       --drawer-start-position: 100%;
-      --drawer-border-radius: var(--border-radius-m) 0 0 var(--border-radius-m);
       justify-content: flex-end;
     }
+.Drawer_placement_right .Modal-Window {
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+      }
 .Drawer_placement_left {
       --drawer-start-position: -100%;
-      --drawer-border-radius: 0 var(--border-radius-m) var(--border-radius-m) 0;
       justify-content: flex-start;
     }
+.Drawer_placement_left .Modal-Window {
+        border-start-start-radius: 0;
+        border-end-start-radius: 0;
+      }
 .Drawer_hasCloseButton {
     --drawer-header-item-padding-right: 24px;
   }
-.IconButton.Drawer-CloseButton {
+.IconButtonNext.Drawer-CloseButton {
   position: absolute;
   inset-block-start: 8px;
   inset-inline-end: 8px;

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

@@ -1,6 +1,6 @@
 import './Drawer.css';
 import React from 'react';
-import { type IconButtonProps } from '../IconButton';
+import { type IconButtonProps } from '../IconButtonNext';
 import { type ModalProps } from '../Modal';
 export declare const cnDrawer: import("@bem-react/classname").ClassNameFormatter;
 export declare const drawerVariant: readonly ["little", "medium", "large"];

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

@@ -4,7 +4,7 @@ import React, { forwardRef } from 'react';
 import { CrossIcon } from '@ozen-ui/icons';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
-import { IconButton } from '../IconButton';
+import { IconButton } from '../IconButtonNext';
 import { Modal } from '../Modal';
 import { DRAWER_DEFAULT_HIDE_CLOSE_BUTTON, DRAWER_DEFAULT_PLACEMENT, DRAWER_DEFAULT_SIZE, DRAWER_DEFAULT_VARIANT, } from './constants';
 export var cnDrawer = cn('Drawer');
@@ -20,9 +20,9 @@ export var Drawer = forwardRef(function (inProps, ref) {
         props: inProps,
         name: 'Drawer',
     });
-    var _a = props.variant, variant = _a === void 0 ? DRAWER_DEFAULT_VARIANT : _a, _b = props.size, size = _b === void 0 ? DRAWER_DEFAULT_SIZE : _b, _c = props.placement, placement = _c === void 0 ? DRAWER_DEFAULT_PLACEMENT : _c, _d = props.hideCloseButton, hideCloseButton = _d === void 0 ? DRAWER_DEFAULT_HIDE_CLOSE_BUTTON : _d, open = props.open, onClose = props.onClose, children = props.children, className = props.className, transitionProps = props.transitionProps, closeButtonProps = props.closeButtonProps, other = __rest(props, ["variant", "size", "placement", "hideCloseButton", "open", "onClose", "children", "className", "transitionProps", "closeButtonProps"]);
+    var _a = props.variant, variant = _a === void 0 ? DRAWER_DEFAULT_VARIANT : _a, _b = props.size, size = _b === void 0 ? DRAWER_DEFAULT_SIZE : _b, _c = props.placement, placement = _c === void 0 ? DRAWER_DEFAULT_PLACEMENT : _c, _d = props.hideCloseButton, hideCloseButton = _d === void 0 ? DRAWER_DEFAULT_HIDE_CLOSE_BUTTON : _d, open = props.open, onClose = props.onClose, children = props.children, className = props.className, windowProps = props.windowProps, transitionProps = props.transitionProps, closeButtonProps = props.closeButtonProps, other = __rest(props, ["variant", "size", "placement", "hideCloseButton", "open", "onClose", "children", "className", "windowProps", "transitionProps", "closeButtonProps"]);
     var _e = closeButtonProps || {}, closeButtonClassName = _e.className, closeButtonRestProps = __rest(_e, ["className"]);
-    return (React.createElement(Modal, __assign({}, other, { open: open, onClose: onClose, className: cnDrawer({ variant: variant, size: size, placement: placement, hasCloseButton: !hideCloseButton }, [className]), transitionProps: __assign({ classNames: cnDrawer({ animation: true }) }, transitionProps), ref: ref }),
+    return (React.createElement(Modal, __assign({}, other, { open: open, onClose: onClose, windowProps: __assign({ radius: size === 's' ? 'l' : 'xl' }, windowProps), className: cnDrawer({ variant: variant, size: size, placement: placement, hasCloseButton: !hideCloseButton }, [className]), transitionProps: __assign({ classNames: cnDrawer({ animation: true }) }, transitionProps), ref: ref }),
         !hideCloseButton && (React.createElement(IconButton, __assign({ size: iconButtonSizeMapper[size], variant: "ghost", name: "close" }, closeButtonRestProps, { className: cnDrawer('CloseButton', [closeButtonClassName]), onClick: onClose, icon: CrossIcon, compressed: true }))),
         React.createElement("div", { className: cnDrawer('InnerContainer') }, children)));
 });

package/__inner__/esm/components/FieldControl/FieldControl.css

@@ -17,7 +17,7 @@
       --textfield-input-padding: 8px 0;
       --textfield-input-gap: var(--spacing-2xs);
       --textfield-gutter-x: var(--control-padding-xs);
-      --textfield-border-radius: var(--border-radius-xs);
+      --textfield-border-radius: var(--border-radius-m);
       --textfield-input-height: var(--control-height-2xs);
 
       font: var(--typography-text-2xs-font);
@@ -30,7 +30,7 @@
       --textfield-input-padding: 12px 0;
       --textfield-input-gap: var(--spacing-2xs);
       --textfield-gutter-x: var(--control-padding-xs);
-      --textfield-border-radius: var(--border-radius-xs);
+      --textfield-border-radius: var(--border-radius-m);
       --textfield-input-height: var(--control-height-xs);
 
       font: var(--typography-text-xs-font);
@@ -43,7 +43,7 @@
       --textfield-input-padding: 14px 0;
       --textfield-input-gap: var(--spacing-xs);
       --textfield-gutter-x: var(--control-padding-s);
-      --textfield-border-radius: var(--border-radius-xs);
+      --textfield-border-radius: var(--border-radius-l);
       --textfield-input-height: var(--control-height-s);
 
       font: var(--typography-text-s-font);
@@ -56,7 +56,7 @@
       --textfield-input-padding: 16px 0;
       --textfield-input-gap: var(--spacing-xs);
       --textfield-gutter-x: var(--control-padding-m);
-      --textfield-border-radius: var(--border-radius-xs);
+      --textfield-border-radius: var(--border-radius-l);
       --textfield-input-height: var(--control-height-m);
 
       font: var(--typography-text-m-font);
@@ -69,7 +69,7 @@
       --textfield-input-padding: 18px 0;
       --textfield-input-gap: var(--spacing-s);
       --textfield-gutter-x: var(--control-padding-l);
-      --textfield-border-radius: var(--border-radius-xs);
+      --textfield-border-radius: var(--border-radius-l);
       --textfield-input-height: var(--control-height-l);
 
       font: var(--typography-text-l-font);
@@ -107,7 +107,7 @@
   }
 .FieldControl_focused,
   .FieldControl_focused:hover {
-    --textfield-border-width: var(--border-width-m);
+    --textfield-border-width: var(--border-width-s);
     --textfield-border-color: var(--color-border-action);
     --textfield-background-color: var(--color-background-main);
   }

package/__inner__/esm/components/File/File.css

@@ -3,12 +3,12 @@
   font: var(--typography-text-s_1-font);
   letter-spacing: var(--typography-text-s_1-letter_spacing, 0);
   text-transform: var(--typography-text-s_1-text_transform, none);
-  inline-size: var(--spacing-xl);
-  block-size: var(--spacing-xl);
+  inline-size: var(--control-height-xs);
+  block-size: var(--control-height-xs);
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--border-radius-xs);
+  border-radius: var(--border-radius-m);
   overflow: hidden;
   transition: background-color var(--transition-default);
 }

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

@@ -1,4 +1,5 @@
 import './FilePicker.css';
+import type { KeyboardEvent, MouseEvent } from 'react';
 import React from 'react';
 export declare const cnFilePicker: import("@bem-react/classname").ClassNameFormatter;
 export declare const FilePicker: React.ForwardRefExoticComponent<{
@@ -56,9 +57,10 @@ export declare const FilePicker: React.ForwardRefExoticComponent<{
     error?: boolean | undefined;
     disabled?: boolean | undefined;
     labelProps?: import("../FieldLabel").FieldLabelProps | undefined;
+    hintProps?: Omit<import("../FieldHint").FieldHintProps, "children"> | undefined;
     renderValue?: import("./types").FilePickerRenderValue | undefined;
     clearText?: string | undefined;
-    onClear?: ((e: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent>, payload: {
+    onClear?: ((e: KeyboardEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement, globalThis.MouseEvent>, payload: {
         name?: string | undefined;
     }) => void) | undefined;
     className?: string | undefined;
@@ -66,7 +68,7 @@ export declare const FilePicker: React.ForwardRefExoticComponent<{
 } & {
     labelRef?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
     inputRef?: React.Ref<HTMLInputElement> | undefined;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "name" | "label" | "className" | "id" | "onChange" | "autoFocus" | "disabled" | "accept" | "multiple" | "placeholder" | "required" | "size" | "error" | "fullWidth" | "labelProps" | "data-testid" | "hint" | "renderLeft" | "renderRight" | "inputProps" | "clearText" | "onClear" | "fileList" | "disableTruncate" | "renderValue" | keyof {
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "name" | "label" | "className" | "id" | "onChange" | "autoFocus" | "disabled" | "accept" | "multiple" | "placeholder" | "required" | "size" | "error" | "fullWidth" | "labelProps" | "data-testid" | "hint" | "renderLeft" | "renderRight" | "inputProps" | "hintProps" | "clearText" | "onClear" | "fileList" | "disableTruncate" | "renderValue" | keyof {
     labelRef?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
     inputRef?: React.Ref<HTMLInputElement> | undefined;
 }> & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,6 +1,6 @@
 import { __assign, __read, __rest } from "tslib";
 import './FilePicker.css';
-import React, { forwardRef, useState, useRef } from 'react';
+import React, { forwardRef, useRef, useState } from 'react';
 import { AttachmentIcon, CrossIcon } from '@ozen-ui/icons';
 import { deprecate } from '@ozen-ui/logger';
 import { useMultiRef } from '../../hooks/useMultiRef';
@@ -13,13 +13,13 @@ import { FieldIcon } from '../FieldIcon';
 import { FieldLabel } from '../FieldLabel';
 import { Fieldset } from '../Fieldset';
 import { IconButton } from '../IconButtonNext';
-import { FILE_PICKER_DEFAULT_SIZE, FILE_PICKER_DEFAULT_DISABLED, FILE_PICKER_DEFAULT_REQUIRED, FILE_PICKER_DEFAULT_FULL_WIDTH, FILE_PICKER_DEFAULT_DISABLE_TRUNCATE, FILE_PICKER_DEFAULT_VALUE_RENDERER, FILE_PICKER_DEFAULT_MULTIPLE, } from './constants';
+import { FILE_PICKER_DEFAULT_DISABLE_TRUNCATE, FILE_PICKER_DEFAULT_DISABLED, FILE_PICKER_DEFAULT_FULL_WIDTH, FILE_PICKER_DEFAULT_MULTIPLE, FILE_PICKER_DEFAULT_REQUIRED, FILE_PICKER_DEFAULT_SIZE, FILE_PICKER_DEFAULT_VALUE_RENDERER, } from './constants';
 export var cnFilePicker = cn('FilePicker');
 export var FilePicker = forwardRef(function (inProps, ref) {
     var _a = useThemeProps({
         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, 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", "labelRef", "className"]);
+    }), _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».');
     }
@@ -72,6 +72,6 @@ export var FilePicker = forwardRef(function (inProps, ref) {
                     }) })),
                 React.createElement(FieldIcon, { icon: renderRight })),
             React.createElement(Fieldset, null)),
-        React.createElement(FieldHint, null, hint)));
+        React.createElement(FieldHint, __assign({}, hintProps), hint)));
 });
 FilePicker.displayName = 'FilePicker';

package/__inner__/esm/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__/esm/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__/esm/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__/esm/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__/esm/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__/esm/components/Input/Input.js

@@ -18,7 +18,7 @@ export var Input = forwardRef(function (inProps, ref) {
         props: inProps,
         name: 'Input',
     });
-    var _a = props.size, size = _a === void 0 ? 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 = __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 ? 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 = __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 = useRef(null);
     var fieldInnerRef = useRef(null);
     /* Хук useEventListener необходим для того, чтобы при нажатии на кнопку мыши
@@ -45,6 +45,6 @@ export var Input = forwardRef(function (inProps, ref) {
                 React.createElement(FieldInput, __assign({ id: id, name: name, autoFocus: autoFocus, value: value, type: type, defaultValue: defaultValue, placeholder: placeholder, onChange: onChange, maxLength: maxLength, minLength: minLength }, inputProps, { className: cnInput('Field', [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]), ref: useMultiRef([inputRef || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref), fieldInnerRef]) }))),
             React.createElement(FieldIcon, { icon: renderRight }),
             React.createElement(Fieldset, null)),
-        React.createElement(FieldHint, null, hint)));
+        React.createElement(FieldHint, __assign({}, hintProps), hint)));
 });
 Input.displayName = 'Input';

package/__inner__/esm/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__/esm/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__/esm/components/InputNumber/InputNumber.js

@@ -1,7 +1,7 @@
 import { __assign, __read, __rest } from "tslib";
 import './InputNumber.css';
-import React, { useState, useRef, forwardRef } from 'react';
-import { SortUpIcon, SortDownIcon } from '@ozen-ui/icons';
+import React, { forwardRef, useRef, useState } from 'react';
+import { SortDownIcon, SortUpIcon } from '@ozen-ui/icons';
 import { useBoolean } from '../../hooks/useBoolean';
 import { useControlled } from '../../hooks/useControlled';
 import { useEventListener } from '../../hooks/useEventListener';
@@ -15,8 +15,8 @@ import { FieldIcon } from '../FieldIcon';
 import { FieldInput } from '../FieldInput';
 import { FieldLabel } from '../FieldLabel';
 import { Fieldset } from '../Fieldset';
-import { IconButton } from '../IconButton';
-import { INPUT_NUMBER_DEFAULT_STEP, INPUT_NUMBER_DEFAULT_SIZE, INPUT_NUMBER_DEFAULT_AUTO_FOCUS, INPUT_NUMBER_DEFAULT_ERROR, INPUT_NUMBER_DEFAULT_REQUIRED, INPUT_NUMBER_DEFAULT_DISABLED, INPUT_NUMBER_DEFAULT_FULL_WIDTH, INPUT_NUMBER_DEFAULT_VALUE, INPUT_NUMBER_DEFAULT_MIN, INPUT_NUMBER_DEFAULT_MAX, } from './constants';
+import { IconButton } from '../IconButtonNext';
+import { INPUT_NUMBER_DEFAULT_AUTO_FOCUS, INPUT_NUMBER_DEFAULT_DISABLED, INPUT_NUMBER_DEFAULT_ERROR, INPUT_NUMBER_DEFAULT_FULL_WIDTH, INPUT_NUMBER_DEFAULT_MAX, INPUT_NUMBER_DEFAULT_MIN, INPUT_NUMBER_DEFAULT_REQUIRED, INPUT_NUMBER_DEFAULT_SIZE, INPUT_NUMBER_DEFAULT_STEP, INPUT_NUMBER_DEFAULT_VALUE, } from './constants';
 import { getValue, isInputInvalid, isValidValue } from './utils';
 export var cnInputNumber = cn('InputNumber');
 export var InputNumber = forwardRef(function (inProps, ref) {
@@ -24,7 +24,7 @@ export var InputNumber = forwardRef(function (inProps, ref) {
         props: inProps,
         name: 'InputNumber',
     });
-    var _a = props.size, size = _a === void 0 ? INPUT_NUMBER_DEFAULT_SIZE : _a, _b = props.step, step = _b === void 0 ? INPUT_NUMBER_DEFAULT_STEP : _b, _c = props.autoFocus, autoFocus = _c === void 0 ? INPUT_NUMBER_DEFAULT_AUTO_FOCUS : _c, _d = props.error, error = _d === void 0 ? INPUT_NUMBER_DEFAULT_ERROR : _d, _e = props.required, required = _e === void 0 ? INPUT_NUMBER_DEFAULT_REQUIRED : _e, _f = props.disabled, disabled = _f === void 0 ? INPUT_NUMBER_DEFAULT_DISABLED : _f, _g = props.fullWidth, fullWidth = _g === void 0 ? INPUT_NUMBER_DEFAULT_FULL_WIDTH : _g, _h = props.defaultValue, defaultValue = _h === void 0 ? INPUT_NUMBER_DEFAULT_VALUE : _h, _j = props.min, min = _j === void 0 ? INPUT_NUMBER_DEFAULT_MIN : _j, _k = props.max, max = _k === void 0 ? 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 = __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 ? INPUT_NUMBER_DEFAULT_SIZE : _a, _b = props.step, step = _b === void 0 ? INPUT_NUMBER_DEFAULT_STEP : _b, _c = props.autoFocus, autoFocus = _c === void 0 ? INPUT_NUMBER_DEFAULT_AUTO_FOCUS : _c, _d = props.error, error = _d === void 0 ? INPUT_NUMBER_DEFAULT_ERROR : _d, _e = props.required, required = _e === void 0 ? INPUT_NUMBER_DEFAULT_REQUIRED : _e, _f = props.disabled, disabled = _f === void 0 ? INPUT_NUMBER_DEFAULT_DISABLED : _f, _g = props.fullWidth, fullWidth = _g === void 0 ? INPUT_NUMBER_DEFAULT_FULL_WIDTH : _g, _h = props.defaultValue, defaultValue = _h === void 0 ? INPUT_NUMBER_DEFAULT_VALUE : _h, _j = props.min, min = _j === void 0 ? INPUT_NUMBER_DEFAULT_MIN : _j, _k = props.max, max = _k === void 0 ? 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 = __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 = __read(useBoolean(false), 2), focused = _l[0], _m = _l[1], onFocus = _m.on, offFocus = _m.off;
     var _o = __read(useState(null), 2), timeoutId = _o[0], setTimeoutId = _o[1];
     var _p = __read(useState(null), 2), countDirection = _p[0], setCountDirection = _p[1];
@@ -137,6 +137,6 @@ export var InputNumber = forwardRef(function (inProps, ref) {
                 React.createElement(IconButton, { size: size, type: "button", tabIndex: -1, variant: "ghost", icon: SortUpIcon, disabled: disabled, "aria-label": incrementButtonText, className: cnInputNumber('Increment'), onMouseDown: handleMouseDown('increment') }),
                 React.createElement(IconButton, { size: size, tabIndex: -1, type: "button", variant: "ghost", icon: SortDownIcon, disabled: disabled, "aria-label": decrementButtonText, className: cnInputNumber('Decrement'), onMouseDown: handleMouseDown('decrement') })),
             React.createElement(Fieldset, { className: cnInputNumber('Fieldset') })),
-        React.createElement(FieldHint, null, hint)));
+        React.createElement(FieldHint, __assign({}, hintProps), hint)));
 });
 InputNumber.displayName = 'InputNumber';

package/__inner__/esm/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__/esm/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__/esm/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>>;