@ozen-ui/kit 0.0.1

package/__inner__/cjs/components/FieldLabel/FieldLabel.js

@@ -0,0 +1,20 @@
+"use strict";
+exports.__esModule = true;
+exports.FieldLabel = exports.cnFieldLabel = exports.fieldLabelSizeVariant = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var React = tslib_1.__importStar(require("react"));
+var classname_1 = require("../../utils/classname");
+require("./FieldLabel.css");
+exports.fieldLabelSizeVariant = ['2xs', 'xs', 's', 'm', 'l'];
+exports.cnFieldLabel = (0, classname_1.cn)('FieldLabel');
+exports.FieldLabel = (0, react_1.forwardRef)(function (_a, ref) {
+    var focused = _a.focused, children = _a.children, filled = _a.filled, shrink = _a.shrink, required = _a.required, disabled = _a.disabled, className = _a.className, size = _a.size;
+    return (React.createElement("span", { className: (0, exports.cnFieldLabel)({ filled: filled, shrink: shrink, focused: focused, disabled: disabled, size: size }, [
+            className,
+        ]), ref: ref },
+        children,
+        " ",
+        required && React.createElement("sup", null, "*")));
+});
+exports.FieldLabel.displayName = 'FieldLabel';

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

@@ -0,0 +1 @@
+export * from './FieldLabel';

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

@@ -0,0 +1,4 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./FieldLabel"), exports);

package/__inner__/cjs/components/File/File.css

@@ -0,0 +1,26 @@
+/* stylelint-disable */
+.File {
+  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(--space-3xl);
+  block-size: var(--space-3xl);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--border-radius-xs);
+  overflow: hidden;
+  transition: background-color var(--transition-default);
+}
+.File_color_main {
+      background-color: var(--color-background-primary);
+    }
+.File_color_primary {
+      background-color: var(--color-background-secondary);
+    }
+.File_error {
+    background-color: var(--color-background-error-light);
+  }
+.File_loading {
+    background-color: var(--color-background-disabled);
+  }

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

@@ -0,0 +1,22 @@
+import './File.css';
+import type { ReactNode, ElementType } from 'react';
+import { type PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import { FILE_DEFAULT_TAG } from './constants';
+export declare const cnFile: import("@bem-react/classname").ClassNameFormatter;
+export declare const fileColorVariant: readonly ["main", "primary"];
+export type FileColorVariant = (typeof fileColorVariant)[number];
+export type FileBaseProps = {
+    /** Содержимое */
+    children: ReactNode;
+    /**
+     * Цвет
+     * @default main
+     * */
+    color?: FileColorVariant;
+    /** Если {true} отображает иконку загрузки и изменяет стилизацию */
+    loading?: boolean;
+    /** Если {true} отображает иконку ошибки и изменяет стилизацию */
+    error?: boolean;
+};
+export type FileProps<As extends ElementType = typeof FILE_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<FileBaseProps, As>;
+export declare const File: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<FileBaseProps, "div">;

package/__inner__/cjs/components/File/File.js

@@ -0,0 +1,29 @@
+"use strict";
+exports.__esModule = true;
+exports.File = exports.fileColorVariant = exports.cnFile = void 0;
+var tslib_1 = require("tslib");
+require("./File.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var icons_1 = require("@ozen-ui/icons");
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var classname_1 = require("../../utils/classname");
+var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var Loader_1 = require("../Loader");
+var constants_1 = require("./constants");
+exports.cnFile = (0, classname_1.cn)('File');
+exports.fileColorVariant = ['main', 'primary'];
+exports.File = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'File' });
+    var _a = props.as, Tag = _a === void 0 ? constants_1.FILE_DEFAULT_TAG : _a, _b = props.color, color = _b === void 0 ? constants_1.FILE_DEFAULT_COLOR : _b, error = props.error, loading = props.loading, className = props.className, children = props.children, other = tslib_1.__rest(props, ["as", "color", "error", "loading", "className", "children"]);
+    var resolvedChildren = (0, react_1.useMemo)(function () {
+        if (loading) {
+            return react_1["default"].createElement(Loader_1.Loader, { color: "var(--color-content-disabled)", size: "s" });
+        }
+        if (error) {
+            return (react_1["default"].createElement(icons_1.WarningTriangleOutlineIcon, { color: "var(--color-content-error)", size: "s" }));
+        }
+        return children;
+    }, [children, loading, error]);
+    return (react_1["default"].createElement(Tag, tslib_1.__assign({ className: (0, exports.cnFile)({ error: error, loading: loading, color: color }, [className]) }, other, { ref: ref }), resolvedChildren));
+});
+exports.File.displayName = 'File';

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

@@ -0,0 +1,2 @@
+export declare const FILE_DEFAULT_COLOR = "main";
+export declare const FILE_DEFAULT_TAG = "div";

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

@@ -0,0 +1,5 @@
+"use strict";
+exports.__esModule = true;
+exports.FILE_DEFAULT_TAG = exports.FILE_DEFAULT_COLOR = void 0;
+exports.FILE_DEFAULT_COLOR = 'main';
+exports.FILE_DEFAULT_TAG = 'div';

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

@@ -0,0 +1 @@
+export * from './File';

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

@@ -0,0 +1,4 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./File"), exports);

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

@@ -0,0 +1,141 @@
+/* stylelint-disable */
+.FilePicker {
+  --file-picker-color: var(--color-content-tertiary);
+  --file-picker-background-color: var(--color-background-primary);
+  --file-picker-border-width: var(--border-width-s);
+  --file-picker-border-color: var(--color-border-main);
+  display: inline-flex;
+  vertical-align: top;
+  flex-direction: column;
+}
+.FilePicker-Body {
+    position: relative;
+    display: flex;
+    -moz-column-gap: var(--file-picker-input-gap);
+         column-gap: var(--file-picker-input-gap);
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0 var(--file-picker-gutter-x);
+    background-color: var(--file-picker-background-color);
+    transition: background-color var(--transition-slow);
+    color: var(--file-picker-color);
+    border-radius: var(--border-radius-xs);
+    cursor: pointer;
+  }
+.FilePicker-FieldContainer {
+    inline-size: 100%;
+    min-inline-size: 0;
+    position: relative;
+    overflow: hidden;
+  }
+.FilePicker-FileName,
+  .FilePicker-Placeholder {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    border: none;
+    outline: none;
+    position: relative;
+    display: flex;
+    align-items: center;
+    inline-size: 100%;
+    padding: 0;
+    background: none;
+    box-sizing: border-box;
+    color: var(--file-picker-color);
+    block-size: var(--file-picker-input-height);
+    font: var(--file-picker-input-font);
+  }
+.FilePicker-Input {
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+    inline-size: 100%;
+  }
+.FilePicker-Input:focus + .FilePicker-Placeholder {
+      opacity: 1;
+    }
+.FilePicker-Fieldset {
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    padding: 0;
+    pointer-events: none;
+    border-radius: var(--border-radius-xs);
+    border: var(--file-picker-border-width) solid
+      var(--file-picker-border-color);
+    transition: border var(--transition-default);
+  }
+.FilePicker_size_2xs {
+      --file-picker-gutter-x: 12px;
+      --file-picker-input-height: 32px;
+      --file-picker-input-font: var(--typography-text-2xs-font);
+      --file-picker-input-padding: 8px 0 8px;
+      --file-picker-input-gap: var(--space-s);
+    }
+.FilePicker_size_xs {
+      --file-picker-gutter-x: 12px;
+      --file-picker-input-height: 40px;
+      --file-picker-input-font: var(--typography-text-xs-font);
+      --file-picker-input-padding: 19px 0 4px;
+      --file-picker-input-gap: var(--space-s);
+    }
+.FilePicker_size_s {
+      --file-picker-gutter-x: 16px;
+      --file-picker-input-height: 48px;
+      --file-picker-input-font: var(--typography-text-s-font);
+      --file-picker-input-padding: 21px 0 6px;
+      --file-picker-input-gap: var(--space-m);
+    }
+.FilePicker_size_m {
+      --file-picker-gutter-x: 20px;
+      --file-picker-input-height: 56px;
+      --file-picker-input-font: var(--typography-text-m-font);
+      --file-picker-input-padding: 24px 0 6px;
+      --file-picker-input-gap: var(--space-m);
+    }
+.FilePicker_size_l {
+      --file-picker-gutter-x: 24px;
+      --file-picker-input-height: 64px;
+      --file-picker-input-font: var(--typography-text-l-font);
+      --file-picker-input-padding: 26px 0 6px;
+      --file-picker-input-gap: var(--space-l);
+    }
+.FilePicker_fullWidth {
+    inline-size: 100%;
+  }
+.FilePicker_hasValue {
+    --file-picker-color: var(--color-content-primary);
+  }
+.FilePicker_hasLabel .FilePicker-Placeholder {
+      opacity: 0;
+    }
+.FilePicker_hasLabel .FilePicker-FileName,
+    .FilePicker_hasLabel .FilePicker-Placeholder {
+      padding: var(--file-picker-input-padding);
+      font: var(--file-picker-input-font);
+    }
+.FilePicker:hover {
+    --file-picker-border-color: var(--color-border-main-hover);
+  }
+.FilePicker_focused,
+  .FilePicker_focused:hover {
+    --file-picker-border-width: var(--border-width-m);
+    --file-picker-background-color: var(--color-background-main);
+    --file-picker-border-color: var(--color-border-action);
+  }
+.FilePicker_error,
+  .FilePicker_error.FilePicker:hover,
+  .FilePicker_error.FilePicker_focused,
+  .FilePicker_error.FilePicker_focused:hover {
+    --file-picker-border-color: var(--color-border-error);
+  }
+.FilePicker_disabled {
+    --file-picker-border-color: var(--color-border-disabled);
+    --file-picker-background-color: var(--color-background-disabled);
+    --file-picker-color: var(--color-content-secondary);
+    pointer-events: none;
+    cursor: default;
+  }

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

@@ -0,0 +1,4 @@
+import './FilePicker.css';
+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>>;

package/__inner__/cjs/components/FilePicker/FilePicker.js

@@ -0,0 +1,78 @@
+"use strict";
+exports.__esModule = true;
+exports.FilePicker = exports.cnFilePicker = void 0;
+var tslib_1 = require("tslib");
+require("./FilePicker.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var icons_1 = require("@ozen-ui/icons");
+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 FieldHint_1 = require("../FieldHint");
+var FieldIcon_1 = require("../FieldIcon");
+var FieldLabel_1 = require("../FieldLabel");
+var IconButton_1 = require("../IconButton");
+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.placeholder, placeholder = _c === void 0 ? constants_1.FILE_PICKER_DEFAULT_PLACEHOLDER : _c, _d = _a.disabled, disabled = _d === void 0 ? constants_1.FILE_PICKER_DEFAULT_DISABLED : _d, _e = _a.required, required = _e === void 0 ? constants_1.FILE_PICKER_DEFAULT_REQUIRED : _e, _f = _a.fullWidth, fullWidth = _f === void 0 ? constants_1.FILE_PICKER_DEFAULT_FULL_WIDTH : _f, _g = _a.disableTruncate, disableTruncate = _g === void 0 ? constants_1.FILE_PICKER_DEFAULT_DISABLE_TRUNCATE : _g, _h = _a.multiple, multiple = _h === void 0 ? constants_1.FILE_PICKER_DEFAULT_MULTIPLE : _h, _j = _a.clearText, clearText = _j === void 0 ? constants_1.FILE_PICKER_DEFAULT_MULTIPLE_CLEAR_TEXT : _j, _k = _a.renderRight, renderRight = _k === void 0 ? icons_1.AttachmentIcon : _k, 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", "placeholder", "disabled", "required", "fullWidth", "disableTruncate", "multiple", "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);
+    var _l = tslib_1.__read((0, react_1.useState)(false), 2), focused = _l[0], setFocused = _l[1];
+    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);
+        setFocused(true);
+    };
+    var handleBlur = function (e) {
+        var _a;
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+        setFocused(false);
+    };
+    var onChange = function (e) {
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e);
+        if (inputRef.current) {
+            inputRef.current.value = '';
+        }
+    };
+    var onClear = function (e) {
+        e.preventDefault();
+        onClearProp === null || onClearProp === void 0 ? void 0 : onClearProp(e, { name: name });
+    };
+    var onKeyDown = function (e) {
+        if ((0, isKey_1.isKey)(e, 'Backspace')) {
+            onClearProp === null || onClearProp === void 0 ? void 0 : onClearProp(e, { name: name });
+        }
+    };
+    var renderValue = function (file, disableTruncate) {
+        return renderValueProp
+            ? 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]) }),
+        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("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.CloseIcon })),
+            react_1["default"].createElement(FieldIcon_1.FieldIcon, { className: (0, exports.cnFilePicker)('RenderRight'), icon: renderRight, size: size }),
+            react_1["default"].createElement("fieldset", { className: (0, exports.cnFilePicker)('Fieldset') })),
+        react_1["default"].createElement(FieldHint_1.FieldHint, { size: size, error: error, disabled: disabled }, hint)));
+});
+exports.FilePicker.displayName = 'FilePicker';

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

@@ -0,0 +1,9 @@
+export declare const FILE_PICKER_DEFAULT_SIZE = "m";
+export declare const FILE_PICKER_DEFAULT_PLACEHOLDER = "\u0424\u0430\u0439\u043B \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D";
+export declare const FILE_PICKER_DEFAULT_DISABLED = false;
+export declare const FILE_PICKER_DEFAULT_REQUIRED = false;
+export declare const FILE_PICKER_DEFAULT_FULL_WIDTH = false;
+export declare const FILE_PICKER_DEFAULT_DISABLE_TRUNCATE = false;
+export declare const FILE_PICKER_DEFAULT_MULTIPLE = false;
+export declare const FILE_PICKER_DEFAULT_MULTIPLE_CLEAR_TEXT = "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u043F\u043E\u043B\u0435";
+export declare const FILE_PICKER_DEFAULT_VALUE_RENDERER: (files: File[], disableTruncate?: boolean) => string;

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

@@ -0,0 +1,24 @@
+"use strict";
+exports.__esModule = true;
+exports.FILE_PICKER_DEFAULT_VALUE_RENDERER = exports.FILE_PICKER_DEFAULT_MULTIPLE_CLEAR_TEXT = exports.FILE_PICKER_DEFAULT_MULTIPLE = exports.FILE_PICKER_DEFAULT_DISABLE_TRUNCATE = exports.FILE_PICKER_DEFAULT_FULL_WIDTH = exports.FILE_PICKER_DEFAULT_REQUIRED = exports.FILE_PICKER_DEFAULT_DISABLED = exports.FILE_PICKER_DEFAULT_PLACEHOLDER = exports.FILE_PICKER_DEFAULT_SIZE = void 0;
+var tslib_1 = require("tslib");
+exports.FILE_PICKER_DEFAULT_SIZE = 'm';
+exports.FILE_PICKER_DEFAULT_PLACEHOLDER = 'Файл не выбран';
+exports.FILE_PICKER_DEFAULT_DISABLED = false;
+exports.FILE_PICKER_DEFAULT_REQUIRED = false;
+exports.FILE_PICKER_DEFAULT_FULL_WIDTH = false;
+exports.FILE_PICKER_DEFAULT_DISABLE_TRUNCATE = false;
+exports.FILE_PICKER_DEFAULT_MULTIPLE = false;
+exports.FILE_PICKER_DEFAULT_MULTIPLE_CLEAR_TEXT = 'Очистить поле';
+var FILE_PICKER_DEFAULT_VALUE_RENDERER = function (files, disableTruncate) {
+    if (disableTruncate === void 0) { disableTruncate = false; }
+    if (Array.isArray(files) && files.length > 1) {
+        return "\u0424\u0430\u0439\u043B\u043E\u0432 \u0432\u044B\u0431\u0440\u0430\u043D\u043E: ".concat(files.length);
+    }
+    var _a = tslib_1.__read(files, 1), file = _a[0];
+    if (disableTruncate || file.name.length <= 20) {
+        return file.name;
+    }
+    return "".concat(file.name.slice(0, 9), "...").concat(file.name.slice(-9));
+};
+exports.FILE_PICKER_DEFAULT_VALUE_RENDERER = FILE_PICKER_DEFAULT_VALUE_RENDERER;

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

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

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

@@ -0,0 +1,5 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./types"), exports);
+tslib_1.__exportStar(require("./FilePicker"), exports);

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

@@ -0,0 +1,69 @@
+import type { Ref, HTMLAttributes, InputHTMLAttributes, MouseEvent, KeyboardEvent, ChangeEventHandler, ReactNode } from 'react';
+import type { ExtendableProps } from '../../types/ExtendableProps';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+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>;
+export type FilePickerBaseProps = {
+    /** Атрибут id для элемента input */
+    id?: string;
+    /** Атрибут name для элемента input */
+    name?: string;
+    /** Размер компонента */
+    size?: FilePickerSizeVariant;
+    /** Лейбл */
+    label?: string;
+    /** Строка описывающая допустимые расширения файлов для загрузки */
+    accept?: string;
+    /** Подсказка. Отображается, когда вариант не выбран */
+    placeholder?: string;
+    /** Функция обратного вызова, которая будет вызвана при выборе файла */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /** Если {true} можно выбрать несколько файлов */
+    multiple?: boolean;
+    /** Список выбранных файлов */
+    fileList?: File[];
+    /** Если {true} растягивает поле на всю ширину */
+    fullWidth?: boolean;
+    /** Если {true} устанавливает автофокус */
+    autoFocus?: boolean;
+    /** Свойства элемента input */
+    inputProps?: InputElement & {
+        'data-testid'?: string;
+    };
+    /** Ссылка на элемент input */
+    inputRef?: Ref<HTMLInputElement>;
+    /** Если {true} отключает сокращение длинного названия файла */
+    disableTruncate?: boolean;
+    /** Если {true} делает элемент обязательным к заполнению */
+    required?: boolean;
+    /** Текст или иконка слева */
+    renderLeft?: FieldIconProps['icon'];
+    /** Текст или иконка справа */
+    renderRight?: FieldIconProps['icon'];
+    /** Дополнительное описание к полю */
+    hint?: string | null;
+    /** Если {true} переводит поле в состояние ошибки */
+    error?: boolean;
+    /** Если {true} делает элемент неактивным */
+    disabled?: boolean;
+    /** Свойства FieldLabel */
+    labelProps?: FieldLabelProps;
+    /** Ссылка на FieldLabel */
+    labelRef?: FieldLabelProps['ref'];
+    /** Функция  */
+    renderValue?: FilePickerRenderValue;
+    /** Текст для кнопки очистки поля */
+    clearText?: string;
+    /** Функция обратного вызова, которая вызывается при очистке значения поля */
+    onClear?: (e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLInputElement>, payload: {
+        name?: string;
+    }) => void;
+    /** Дополнительные css-классы */
+    className?: string;
+    'data-testid'?: string;
+};
+export type FilePickerProps = ExtendableProps<HTMLAttributes<HTMLDivElement>, FilePickerBaseProps>;
+export {};

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

@@ -0,0 +1,2 @@
+"use strict";
+exports.__esModule = true;

package/__inner__/cjs/components/FormControlLabel/FormControlLabel.css

@@ -0,0 +1,78 @@
+/* stylelint-disable */
+.FormControlLabel {
+  --form-control-label-gap: 0;
+  display: inline-flex;
+  cursor: pointer;
+  vertical-align: top;
+}
+.FormControlLabel::after {
+    display: inline-block;
+    inline-size: 0;
+    overflow: hidden;
+    content: '\a0';
+  }
+.FormControlLabel-Content {
+    margin: 0;
+  }
+.FormControlLabel_size_2xs {
+      font: var(--typography-text-3xs-font);
+      letter-spacing: var(--typography-text-3xs-letter_spacing, 0);
+      text-transform: var(--typography-text-3xs-text_transform, none);
+
+      --form-control-label-gap: var(--space-s);
+    }
+.FormControlLabel_size_xs {
+      font: var(--typography-text-xs-font);
+      letter-spacing: var(--typography-text-xs-letter_spacing, 0);
+      text-transform: var(--typography-text-xs-text_transform, none);
+
+      --form-control-label-gap: var(--space-s);
+    }
+.FormControlLabel_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);
+
+      --form-control-label-gap: var(--space-s);
+    }
+.FormControlLabel_size_m {
+      font: var(--typography-text-m-font);
+      letter-spacing: var(--typography-text-m-letter_spacing, 0);
+      text-transform: var(--typography-text-m-text_transform, none);
+
+      --form-control-label-gap: var(--space-l);
+    }
+.FormControlLabel_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);
+
+      --form-control-label-gap: var(--space-l);
+    }
+.FormControlLabel_align_top {
+      align-items: flex-start;
+    }
+.FormControlLabel_align_bottom {
+      align-items: flex-end;
+    }
+.FormControlLabel_align_center {
+      align-items: center;
+    }
+.FormControlLabel_labelPlacement_left {
+      flex-direction: row-reverse;
+    }
+.FormControlLabel_labelPlacement_left .FormControlLabel-Content {
+        margin-inline-end: var(--form-control-label-gap);
+      }
+.FormControlLabel_labelPlacement_right {
+      flex-direction: row;
+    }
+.FormControlLabel_labelPlacement_right .FormControlLabel-Content {
+        margin-inline-start: var(--form-control-label-gap);
+      }
+.FormControlLabel_disabled {
+    cursor: default;
+  }
+.FormControlLabel_disabled .FormControlLabel-Content {
+      color: var(--color-content-disabled);
+    }

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

@@ -0,0 +1,28 @@
+import './FormControlLabel.css';
+import type { ReactNode, ElementType } from 'react';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import { type PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+export type FormControlLabelSizeVariant = FormElementSizeVariant;
+export declare const formControlLabelAlignVariant: readonly ["top", "bottom", "center"];
+export type FormControlLabelAlignVariant = (typeof formControlLabelAlignVariant)[number];
+export declare const formControlLabelLabelPlacementVariant: readonly ["left", "right"];
+export type FormControlLabelLabelPlacementVariant = (typeof formControlLabelLabelPlacementVariant)[number];
+export type FormControlLabelBaseProps = {
+    /** Лейбл */
+    label?: ReactNode;
+    /** Содержимое компонента */
+    children?: ReactNode;
+    /** Расположение лейбла относительно содержимого компонента */
+    labelPlacement?: FormControlLabelLabelPlacementVariant;
+    /** Вертикальное выравнивание лейбла относительно содержимого компонента */
+    align?: FormControlLabelAlignVariant;
+    /** Размер (влияет на шрифт лейбла и отступ между лейблом и содержимым компонента) */
+    size?: FormControlLabelSizeVariant;
+    /** Если {true} визуализирует компонент как заблокированный */
+    disabled?: boolean;
+    /** Дополнительные CSS-классы */
+    className?: string;
+};
+export type FormControlLabelProps<As extends ElementType = 'label'> = PolymorphicComponentPropsWithoutRef<FormControlLabelBaseProps, As>;
+export declare const cnFormControlLabel: import("@bem-react/classname").ClassNameFormatter;
+export declare const FormControlLabel: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<FormControlLabelBaseProps, "label">;

package/__inner__/cjs/components/FormControlLabel/FormControlLabel.js

@@ -0,0 +1,28 @@
+"use strict";
+exports.__esModule = true;
+exports.FormControlLabel = exports.cnFormControlLabel = exports.formControlLabelLabelPlacementVariant = exports.formControlLabelAlignVariant = void 0;
+var tslib_1 = require("tslib");
+require("./FormControlLabel.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var classname_1 = require("../../utils/classname");
+var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var constants_1 = require("./constants");
+exports.formControlLabelAlignVariant = [
+    'top',
+    'bottom',
+    'center',
+];
+exports.formControlLabelLabelPlacementVariant = ['left', 'right'];
+exports.cnFormControlLabel = (0, classname_1.cn)('FormControlLabel');
+exports.FormControlLabel = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (_a, ref) {
+    var _b = _a.size, size = _b === void 0 ? constants_1.FORM_CONTROL_DEFAULT_SIZE : _b, _c = _a.as, Tag = _c === void 0 ? constants_1.FORM_CONTROL_DEFAULT_AS : _c, _d = _a.labelPlacement, labelPlacement = _d === void 0 ? constants_1.FORM_CONTROL_DEFAULT_LABEL_PLACEMENT : _d, children = _a.children, label = _a.label, align = _a.align, disabled = _a.disabled, className = _a.className, other = tslib_1.__rest(_a, ["size", "as", "labelPlacement", "children", "label", "align", "disabled", "className"]);
+    return (react_1["default"].createElement(Tag, tslib_1.__assign({ className: (0, exports.cnFormControlLabel)({
+            align: align,
+            labelPlacement: labelPlacement,
+            disabled: disabled,
+            size: size
+        }, [className]), ref: ref }, other),
+        children,
+        label !== null && label !== undefined && (react_1["default"].createElement("span", { className: (0, exports.cnFormControlLabel)('Content') }, label))));
+});
+exports.FormControlLabel.displayName = 'FormControlLabel';

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

@@ -0,0 +1,3 @@
+export declare const FORM_CONTROL_DEFAULT_SIZE = "m";
+export declare const FORM_CONTROL_DEFAULT_AS = "label";
+export declare const FORM_CONTROL_DEFAULT_LABEL_PLACEMENT = "right";

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

@@ -0,0 +1,6 @@
+"use strict";
+exports.__esModule = true;
+exports.FORM_CONTROL_DEFAULT_LABEL_PLACEMENT = exports.FORM_CONTROL_DEFAULT_AS = exports.FORM_CONTROL_DEFAULT_SIZE = void 0;
+exports.FORM_CONTROL_DEFAULT_SIZE = 'm';
+exports.FORM_CONTROL_DEFAULT_AS = 'label';
+exports.FORM_CONTROL_DEFAULT_LABEL_PLACEMENT = 'right';

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

@@ -0,0 +1 @@
+export * from './FormControlLabel';

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

@@ -0,0 +1,4 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./FormControlLabel"), exports);