@ozen-ui/kit 0.40.0 → 0.42.0

package/README.md

@@ -6,7 +6,7 @@
 
 Установите библиотеку компонентов с помощью одной из следующих команд:
 
-```
+```bash
 # npm
 npm install --save @ozen-ui/kit
 

package/__inner__/cjs/components/Autocomplete/helper.d.ts

@@ -80,6 +80,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     } & {
         'data-testid'?: string | undefined;
     }) | undefined;
+    hintProps?: Omit<import("../FieldHint").FieldHintProps, "children"> | undefined;
 } & {
     open?: boolean | undefined;
     defaultOpen?: undefined;
@@ -176,6 +177,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     } & {
         'data-testid'?: string | undefined;
     }) | undefined;
+    hintProps?: Omit<import("../FieldHint").FieldHintProps, "children"> | undefined;
 } & {
     open?: undefined;
     defaultOpen?: boolean | undefined;

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

@@ -1,4 +1,4 @@
-import type { SyntheticEvent, ChangeEvent, ReactElement, ReactNode } from 'react';
+import type { ChangeEvent, ReactElement, ReactNode, SyntheticEvent } from 'react';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { DataListProps } from '../DataList';
 import type { InputProps } from '../Input';
@@ -31,7 +31,7 @@ type AutocompleteOpenUncontrolledProps = {
     /** Состояние открытие по умолчанию (неконтролируемый компонент) */
     defaultOpen?: boolean;
 };
-type AutocompleteInputProps = Pick<InputProps, 'placeholder' | 'autoFocus' | 'fullWidth' | 'disabled' | 'label' | 'required' | 'style' | 'error' | 'hint' | 'renderLeft' | 'renderRight' | 'className' | 'inputProps' | 'onKeyDown'>;
+type AutocompleteInputProps = Pick<InputProps, 'placeholder' | 'autoFocus' | 'fullWidth' | 'disabled' | 'label' | 'required' | 'style' | 'error' | 'hint' | 'renderLeft' | 'renderRight' | 'className' | 'inputProps' | 'hintProps' | 'onKeyDown'>;
 type AutocompleteDataListProps = Partial<Omit<DataListProps, 'onClose' | 'open' | 'anchorRef' | 'multiple' | 'selected' | 'onSelect'>>;
 export type AutocompleteProps<OPTION = AutocompleteDefaultOption> = {
     /** Список вариантов выбора (опции) */

package/__inner__/cjs/components/FieldControl/FieldControl.css

@@ -1,22 +1,24 @@
 /* stylelint-disable */
 .FieldControl {
   --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);
+  --textfield-placeholder-color: var(--color-content-tertiary);
+  --textfield-background-color: var(--color-background-primary);
   cursor: text;
-  display: inline-flex;
   vertical-align: top;
+  display: inline-flex;
   flex-direction: column;
 }
 .FieldControl > * {
     cursor: text;
   }
 .FieldControl_size_2xs {
-      --textfield-gutter-x: 12px;
-      --textfield-input-height: 32px;
       --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-input-height: var(--control-height-2xs);
 
       font: var(--typography-text-2xs-font);
 
@@ -25,10 +27,11 @@
       text-transform: var(--typography-text-2xs-text_transform, none);
     }
 .FieldControl_size_xs {
-      --textfield-gutter-x: 12px;
-      --textfield-input-height: 40px;
       --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-input-height: var(--control-height-xs);
 
       font: var(--typography-text-xs-font);
 
@@ -37,10 +40,11 @@
       text-transform: var(--typography-text-xs-text_transform, none);
     }
 .FieldControl_size_s {
-      --textfield-gutter-x: 16px;
-      --textfield-input-height: 48px;
       --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-input-height: var(--control-height-s);
 
       font: var(--typography-text-s-font);
 
@@ -49,10 +53,11 @@
       text-transform: var(--typography-text-s-text_transform, none);
     }
 .FieldControl_size_m {
-      --textfield-gutter-x: 20px;
-      --textfield-input-height: 56px;
       --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-input-height: var(--control-height-m);
 
       font: var(--typography-text-m-font);
 
@@ -61,10 +66,11 @@
       text-transform: var(--typography-text-m-text_transform, none);
     }
 .FieldControl_size_l {
-      --textfield-gutter-x: 24px;
-      --textfield-input-height: 64px;
       --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-input-height: var(--control-height-l);
 
       font: var(--typography-text-l-font);
 
@@ -76,16 +82,16 @@
         --textfield-input-padding: 8px 0 8px;
       }
 .FieldControl_hasLabel.FieldControl_size_xs {
-        --textfield-input-padding: 19px 0 4px;
+        --textfield-input-padding: 20px 0 4px;
       }
 .FieldControl_hasLabel.FieldControl_size_s {
-        --textfield-input-padding: 21px 0 6px;
+        --textfield-input-padding: 22px 0 6px;
       }
 .FieldControl_hasLabel.FieldControl_size_m {
-        --textfield-input-padding: 24px 0 6px;
+        --textfield-input-padding: 24px 0 8px;
       }
 .FieldControl_hasLabel.FieldControl_size_l {
-        --textfield-input-padding: 26px 0 6px;
+        --textfield-input-padding: 28px 0 8px;
       }
 .FieldControl_hasLabel .FieldInput::placeholder {
         opacity: 0;
@@ -102,8 +108,8 @@
 .FieldControl_focused,
   .FieldControl_focused:hover {
     --textfield-border-width: var(--border-width-m);
-    --textfield-background-color: var(--color-background-main);
     --textfield-border-color: var(--color-border-action);
+    --textfield-background-color: var(--color-background-main);
   }
 .FieldControl_error,
   .FieldControl_error.FieldControl:hover,
@@ -112,9 +118,9 @@
     --textfield-border-color: var(--color-border-error);
   }
 .FieldControl_disabled {
+    --textfield-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;
+    pointer-events: none;
   }

package/__inner__/cjs/components/FieldLabel/FieldLabel.css

@@ -48,22 +48,22 @@
   .FieldLabel_size_s {
       --field-label-font: var(--typography-text-s-font);
       --field-label-scaled: var(--typography-text-3xs-font);
-      --field-label-translate_y: -9px;
+      --field-label-translate_y: -8px;
       --field-label-top: 14px;
     }
 
   .FieldLabel_size_m {
       --field-label-font: var(--typography-text-m-font);
-      --field-label-scaled: var(--typography-text-s-font);
-      --field-label-translate_y: -10px;
-      --field-label-top: 15px;
+      --field-label-scaled: var(--typography-text-xs-font);
+      --field-label-translate_y: -8px;
+      --field-label-top: 16px;
     }
 
   .FieldLabel_size_l {
       --field-label-font: var(--typography-text-l-font);
       --field-label-scaled: var(--typography-text-s-font);
-      --field-label-translate_y: -9px;
-      --field-label-top: 17px;
+      --field-label-translate_y: -10px;
+      --field-label-top: 18px;
     }
 
   .FieldLabel_disabled {

package/__inner__/cjs/components/Fieldset/Fieldset.css

@@ -4,7 +4,7 @@
   margin: 0;
   padding: 0;
   pointer-events: none;
-  border-radius: var(--border-radius-xs);
+  border-radius: var(--textfield-border-radius);
   border: var(--textfield-border-width) solid var(--textfield-border-color);
   transition: border var(--transition-default);
 }

package/__inner__/cjs/components/FilePicker/FilePicker.css

@@ -1,130 +1,70 @@
-/* stylelint-disable */
-.FilePicker {
-  --textfield-color: var(--color-content-tertiary);
-  --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);
-  display: inline-flex;
-  vertical-align: top;
-  flex-direction: column;
-}
 .FilePicker-Body {
-    position: relative;
     display: flex;
-    -moz-column-gap: var(--textfield-input-gap);
-         column-gap: var(--textfield-input-gap);
+    cursor: pointer;
+    position: relative;
     align-items: center;
     box-sizing: border-box;
+    color: var(--textfield-color);
     padding: 0 var(--textfield-gutter-x);
+    -moz-column-gap: var(--textfield-input-gap);
+         column-gap: var(--textfield-input-gap);
+    border-radius: var(--textfield-border-radius);
     background-color: var(--textfield-background-color);
     transition: background-color var(--transition-slow);
-    color: var(--textfield-color);
-    border-radius: var(--border-radius-xs);
-    cursor: pointer;
   }
-.FilePicker-FieldContainer {
+  .FilePicker-FieldContainer {
+    overflow: hidden;
     inline-size: 100%;
     min-inline-size: 0;
     position: relative;
-    overflow: hidden;
   }
-.FilePicker-FileName,
+  .FilePicker-FileName,
   .FilePicker-Placeholder {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
+    padding: 0;
     border: none;
-    outline: none;
-    position: relative;
     display: flex;
-    align-items: center;
+    outline: none;
+    overflow: hidden;
     inline-size: 100%;
-    padding: 0;
     background: none;
+    position: relative;
+    align-items: center;
+    white-space: nowrap;
     box-sizing: border-box;
-    color: var(--textfield-color);
+    text-overflow: ellipsis;
     block-size: var(--textfield-input-height);
   }
-.FilePicker-Input {
+  .FilePicker-Placeholder {
+    color: var(--textfield-placeholder-color);
+  }
+  .FilePicker-Input {
+    opacity: 0;
+    inline-size: 100%;
     inset-block-end: 0;
-    inset-inline-start: 0;
     position: absolute;
-    opacity: 0;
     pointer-events: none;
-    inline-size: 100%;
+    inset-inline-start: 0;
   }
-.FilePicker-Input:focus + .FilePicker-Placeholder {
+  .FilePicker-Input:focus + .FilePicker-Placeholder {
       opacity: 1;
     }
-.FilePicker_size_2xs {
-      --textfield-gutter-x: 12px;
-      --textfield-input-height: 32px;
-      --textfield-input-font: var(--typography-text-2xs-font);
-      --textfield-input-padding: 8px 0 8px;
-      --textfield-input-gap: var(--spacing-2xs);
-    }
-.FilePicker_size_xs {
-      --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(--spacing-2xs);
-    }
-.FilePicker_size_s {
-      --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(--spacing-xs);
-    }
-.FilePicker_size_m {
-      --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(--spacing-xs);
-    }
-.FilePicker_size_l {
-      --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(--spacing-s);
-    }
-.FilePicker_fullWidth {
-    inline-size: 100%;
+  .FilePicker-ClearButton {
+    visibility: hidden;
+    transition: visibility var(--transition-default);
   }
-.FilePicker_hasValue {
-    --textfield-color: var(--color-content-primary);
+  .FilePicker-ClearButton_visibility {
+      visibility: visible;
+    }
+  .FilePicker-RenderRight {
+    display: flex;
+    gap: var(--spacing-2xs);
   }
-.FilePicker_hasLabel .FilePicker-Placeholder {
+
+.FieldControl_hasLabel .FilePicker-Placeholder {
       opacity: 0;
     }
-.FilePicker_hasLabel .FilePicker-FileName,
-    .FilePicker_hasLabel .FilePicker-Placeholder {
+
+.FieldControl_hasLabel .FilePicker-FileName,
+    .FieldControl_hasLabel .FilePicker-Placeholder {
       padding: var(--textfield-input-padding);
-      font: var(--textfield-input-font);
     }
-.FilePicker:hover {
-    --textfield-border-color: var(--color-border-main-hover);
-  }
-.FilePicker_focused,
-  .FilePicker_focused:hover {
-    --textfield-border-width: var(--border-width-m);
-    --textfield-background-color: var(--color-background-main);
-    --textfield-border-color: var(--color-border-action);
-  }
-.FilePicker_error,
-  .FilePicker_error.FilePicker:hover,
-  .FilePicker_error.FilePicker_focused,
-  .FilePicker_error.FilePicker_focused:hover {
-    --textfield-border-color: var(--color-border-error);
-  }
-.FilePicker_disabled {
-    --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;
-  }

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

@@ -1,4 +1,74 @@
 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<import("./types").FilePickerBaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, keyof import("./types").FilePickerBaseProps> & React.RefAttributes<HTMLDivElement>>;
+export declare const FilePicker: React.ForwardRefExoticComponent<{
+    id?: string | undefined;
+    name?: string | undefined;
+    size?: "s" | "m" | "l" | "2xs" | "xs" | undefined;
+    label?: string | undefined;
+    accept?: string | undefined;
+    placeholder?: string | undefined;
+    onChange?: React.ChangeEventHandler<HTMLInputElement> | undefined;
+    multiple?: boolean | undefined;
+    fileList?: File[] | undefined;
+    fullWidth?: boolean | undefined;
+    autoFocus?: boolean | undefined;
+    inputProps?: (Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+        ref?: ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | null | undefined;
+    } & {
+        'data-testid'?: string | undefined;
+    }) | undefined;
+    disableTruncate?: boolean | undefined;
+    required?: boolean | undefined;
+    renderLeft?: string | number | React.FC<React.SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: React.Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }> | React.ReactElement<React.SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: React.Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }, string | React.JSXElementConstructor<any>> | (() => React.ReactElement<React.SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: React.Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }, string | React.JSXElementConstructor<any>>) | undefined;
+    renderRight?: string | number | React.FC<React.SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: React.Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }> | React.ReactElement<React.SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: React.Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }, string | React.JSXElementConstructor<any>> | (() => React.ReactElement<React.SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: React.Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }, string | React.JSXElementConstructor<any>>) | undefined;
+    hint?: string | null | undefined;
+    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: KeyboardEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement, globalThis.MouseEvent>, payload: {
+        name?: string | undefined;
+    }) => void) | undefined;
+    className?: string | undefined;
+    'data-testid'?: string | undefined;
+} & {
+    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" | "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__/cjs/components/FilePicker/FilePicker.js

@@ -5,26 +5,33 @@ var tslib_1 = require("tslib");
 require("./FilePicker.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var icons_1 = require("@ozen-ui/icons");
+var logger_1 = require("@ozen-ui/logger");
 var useMultiRef_1 = require("../../hooks/useMultiRef");
 var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
 var isKey_1 = require("../../utils/isKey");
+var FieldControl_1 = require("../FieldControl");
 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 IconButtonNext_1 = require("../IconButtonNext");
 var constants_1 = require("./constants");
 exports.cnFilePicker = (0, classname_1.cn)('FilePicker');
 exports.FilePicker = (0, react_1.forwardRef)(function (inProps, ref) {
     var _a = (0, useThemeProps_1.useThemeProps)({
         props: inProps,
         name: 'FilePicker',
-    }), _b = _a.size, size = _b === void 0 ? constants_1.FILE_PICKER_DEFAULT_SIZE : _b, _c = _a.disabled, disabled = _c === void 0 ? constants_1.FILE_PICKER_DEFAULT_DISABLED : _c, _d = _a.required, required = _d === void 0 ? constants_1.FILE_PICKER_DEFAULT_REQUIRED : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? constants_1.FILE_PICKER_DEFAULT_FULL_WIDTH : _e, _f = _a.disableTruncate, disableTruncate = _f === void 0 ? constants_1.FILE_PICKER_DEFAULT_DISABLE_TRUNCATE : _f, _g = _a.multiple, multiple = _g === void 0 ? constants_1.FILE_PICKER_DEFAULT_MULTIPLE : _g, placeholder = _a.placeholder, clearText = _a.clearText, _h = _a.renderRight, renderRight = _h === void 0 ? icons_1.AttachmentIcon : _h, renderValueProp = _a.renderValue, onChangeProp = _a.onChange, onClearProp = _a.onClear, inputRefProp = _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 = tslib_1.__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"]);
-    var fieldRef = (0, react_1.useRef)(null);
-    var inputRef = (0, react_1.useRef)(null);
-    var clearRef = (0, react_1.useRef)(null);
+    }), _b = _a.size, size = _b === void 0 ? constants_1.FILE_PICKER_DEFAULT_SIZE : _b, _c = _a.disabled, disabled = _c === void 0 ? constants_1.FILE_PICKER_DEFAULT_DISABLED : _c, _d = _a.required, required = _d === void 0 ? constants_1.FILE_PICKER_DEFAULT_REQUIRED : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? constants_1.FILE_PICKER_DEFAULT_FULL_WIDTH : _e, _f = _a.disableTruncate, disableTruncate = _f === void 0 ? constants_1.FILE_PICKER_DEFAULT_DISABLE_TRUNCATE : _f, _g = _a.multiple, multiple = _g === void 0 ? constants_1.FILE_PICKER_DEFAULT_MULTIPLE : _g, placeholder = _a.placeholder, clearText = _a.clearText, _h = _a.renderRight, renderRight = _h === void 0 ? icons_1.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 = tslib_1.__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) {
+        (0, logger_1.deprecate)('Свойство «labelRef» устарело. Для замены используйте «labelProps.ref».');
+    }
+    if (process.env.NODE_ENV !== 'production' && inputRef) {
+        (0, logger_1.deprecate)('Свойство «inputRef» устарело. Для замены используйте «inputProps.ref».');
+    }
+    var inputInnerRef = (0, react_1.useRef)(null);
     var _j = tslib_1.__read((0, react_1.useState)(false), 2), focused = _j[0], setFocused = _j[1];
+    var hasFiles = !!(fileList === null || fileList === void 0 ? void 0 : fileList.length);
     var handleFocus = function (e) {
         var _a;
         (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
@@ -37,8 +44,8 @@ exports.FilePicker = (0, react_1.forwardRef)(function (inProps, ref) {
     };
     var onChange = function (e) {
         onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e);
-        if (inputRef.current) {
-            inputRef.current.value = '';
+        if (inputInnerRef.current) {
+            inputInnerRef.current.value = '';
         }
     };
     var onClear = function (e) {
@@ -55,25 +62,19 @@ exports.FilePicker = (0, react_1.forwardRef)(function (inProps, ref) {
             ? renderValueProp(file)
             : (0, constants_1.FILE_PICKER_DEFAULT_VALUE_RENDERER)(file, disableTruncate);
     };
-    return (react_1.default.createElement("div", tslib_1.__assign({}, other, { className: (0, exports.cnFilePicker)('', {
-            hasLabel: !!label,
-            hasValue: !!(fileList === null || fileList === void 0 ? void 0 : fileList.length),
-            size: size,
-            error: error,
-            focused: focused,
-            disabled: disabled,
-            required: required,
-            fullWidth: fullWidth,
-        }, [className]), ref: (0, useMultiRef_1.useMultiRef)([fieldRef, ref]) }),
+    return (react_1.default.createElement(FieldControl_1.FieldControl, tslib_1.__assign({ size: size, error: error, focused: focused, disabled: disabled, required: required, fullWidth: fullWidth, filled: hasFiles }, other, { className: (0, exports.cnFilePicker)('', [className]), ref: ref }),
         react_1.default.createElement("label", { className: (0, exports.cnFilePicker)('Body') },
-            react_1.default.createElement(FieldIcon_1.FieldIcon, { className: (0, exports.cnFilePicker)('RenderLeft'), icon: renderLeft, size: size }),
+            react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderLeft }),
             react_1.default.createElement("div", { className: (0, exports.cnFilePicker)('FieldContainer') },
-                label && (react_1.default.createElement(FieldLabel_1.FieldLabel, tslib_1.__assign({ filled: !!(fileList === null || fileList === void 0 ? void 0 : fileList.length), focused: focused, required: required, disabled: disabled, size: size }, labelProps, { className: (0, exports.cnFilePicker)('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, onFocus: handleFocus, onBlur: handleBlur, className: (0, exports.cnFilePicker)('Input'), required: required, disabled: disabled, accept: accept, multiple: multiple }, inputProps, { onChange: onChange, onKeyDown: onKeyDown, ref: (0, useMultiRef_1.useMultiRef)([inputRef, inputRefProp]), type: "file" })),
-                (fileList === null || fileList === void 0 ? void 0 : fileList.length) ? (react_1.default.createElement("span", { className: (0, exports.cnFilePicker)('FileName') }, renderValue(fileList, disableTruncate))) : (react_1.default.createElement("span", { "aria-placeholder": placeholder, className: (0, exports.cnFilePicker)('Placeholder') }, placeholder))),
-            !!(fileList === null || fileList === void 0 ? void 0 : fileList.length) && onClearProp && (react_1.default.createElement(IconButton_1.IconButton, { tabIndex: -1, variant: "function", "aria-label": clearText, ref: clearRef, onClick: onClear, size: size, icon: icons_1.CrossIcon })),
-            react_1.default.createElement(FieldIcon_1.FieldIcon, { className: (0, exports.cnFilePicker)('RenderRight'), icon: renderRight, size: size }),
-            react_1.default.createElement(Fieldset_1.Fieldset, { className: (0, exports.cnFilePicker)('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: (0, exports.cnFilePicker)('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]) }), label),
+                react_1.default.createElement("input", tslib_1.__assign({ id: id, name: name, accept: accept, multiple: multiple, onBlur: handleBlur, required: required, disabled: disabled, autoFocus: autoFocus, onFocus: handleFocus, className: (0, exports.cnFilePicker)('Input') }, inputProps, { type: "file", onChange: onChange, onKeyDown: onKeyDown, ref: (0, useMultiRef_1.useMultiRef)([inputRef || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref), inputInnerRef]) })),
+                hasFiles ? (react_1.default.createElement("span", { className: (0, exports.cnFilePicker)('FileName') }, renderValue(fileList, disableTruncate))) : (react_1.default.createElement("span", { "aria-placeholder": placeholder, className: (0, exports.cnFilePicker)('Placeholder') }, placeholder))),
+            react_1.default.createElement("div", { className: (0, exports.cnFilePicker)('RenderRight') },
+                onClearProp && (react_1.default.createElement(IconButtonNext_1.IconButton, { size: size, tabIndex: -1, icon: icons_1.CrossIcon, onClick: onClear, variant: "function", "aria-label": clearText, className: (0, exports.cnFilePicker)('ClearButton', {
+                        visibility: hasFiles,
+                    }) })),
+                react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderRight })),
+            react_1.default.createElement(Fieldset_1.Fieldset, null)),
+        react_1.default.createElement(FieldHint_1.FieldHint, tslib_1.__assign({}, hintProps), hint)));
 });
 exports.FilePicker.displayName = 'FilePicker';

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

@@ -1,11 +1,24 @@
-import type { Ref, HTMLAttributes, InputHTMLAttributes, MouseEvent, KeyboardEvent, ChangeEventHandler, ReactNode } 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;
 export type FilePickerRenderValue = (value: File[]) => ReactNode | null;
-type InputElement = InputHTMLAttributes<HTMLInputElement>;
+type InputElement = ComponentPropsWithRef<'input'>;
+type FilePickerPropsDeprecated = {
+    /**
+     * Ссылка на FieldLabel
+     * @deprecated Используйте labelProps.ref
+     * */
+    labelRef?: FieldLabelProps['ref'];
+    /**
+     * Ссылка на элемент input
+     * @deprecated Используйте inputProps.ref
+     * */
+    inputRef?: Ref<HTMLInputElement>;
+};
 export type FilePickerBaseProps = {
     /** Атрибут id для элемента input */
     id?: string;
@@ -33,8 +46,6 @@ export type FilePickerBaseProps = {
     inputProps?: InputElement & {
         'data-testid'?: string;
     };
-    /** Ссылка на элемент input */
-    inputRef?: Ref<HTMLInputElement>;
     /** Если {true} отключает сокращение длинного названия файла */
     disableTruncate?: boolean;
     /** Если {true} делает элемент обязательным к заполнению */
@@ -51,8 +62,8 @@ export type FilePickerBaseProps = {
     disabled?: boolean;
     /** Свойства FieldLabel */
     labelProps?: FieldLabelProps;
-    /** Ссылка на FieldLabel */
-    labelRef?: FieldLabelProps['ref'];
+    /** Cвойства FieldHint */
+    hintProps?: Omit<FieldHintProps, 'children'>;
     /** Функция  */
     renderValue?: FilePickerRenderValue;
     /** Текст для кнопки очистки поля */
@@ -63,7 +74,8 @@ export type FilePickerBaseProps = {
     }) => void;
     /** Дополнительные css-классы */
     className?: string;
+    /** data-атрибут для тестирования */
     'data-testid'?: string;
-};
+} & FilePickerPropsDeprecated;
 export type FilePickerProps = ExtendableProps<HTMLAttributes<HTMLDivElement>, FilePickerBaseProps>;
 export {};

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

@@ -325,6 +325,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/Input/Input.css

@@ -9,7 +9,7 @@
     background-color: var(--textfield-background-color);
     transition: background-color var(--transition-slow);
     color: var(--textfield-color);
-    border-radius: var(--border-radius-xs);
+    border-radius: var(--textfield-border-radius);
   }
   .Input-FieldContainer {
     inline-size: 100%;
@@ -29,7 +29,7 @@
   }
   .Input-Field::placeholder {
       opacity: 1;
-      color: var(--color-content-tertiary);
+      color: var(--textfield-placeholder-color);
     }
   .Input-Field:-webkit-autofill,
     .Input-Field:-webkit-autofill:hover,