@hh.ru/magritte-ui-upload 1.1.0 → 2.0.0

package/FileName.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+interface FileNameProps {
+    file: File;
+    isSizeMedium?: boolean;
+}
+declare const FileName: ({ file, isSizeMedium }: FileNameProps) => ReactElement;
+export { FileName };

package/FileName.js

@@ -0,0 +1,29 @@
+import './index.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import classnames from 'classnames';
+
+var styles = {"file-name-body":"magritte-file-name-body___PTTMc_2-0-0","fileNameBody":"magritte-file-name-body___PTTMc_2-0-0","file-name-body_medium":"magritte-file-name-body_medium___sfmmq_2-0-0","fileNameBodyMedium":"magritte-file-name-body_medium___sfmmq_2-0-0","file-name":"magritte-file-name___ZSL2g_2-0-0","fileName":"magritte-file-name___ZSL2g_2-0-0"};
+
+const parse = (file) => {
+    const name = file.name;
+    const parts = name.split('.');
+    if (parts.length === 1) {
+        return {
+            name: parts[0],
+            extension: '',
+        };
+    }
+    const extension = parts.pop();
+    return {
+        // -1 из-за точки
+        name: name.substring(0, name.length - (extension?.length || 0) - 1),
+        extension: extension || '',
+    };
+};
+const FileName = ({ file, isSizeMedium = false }) => {
+    const { name, extension } = parse(file);
+    return (jsxs("div", { className: classnames(styles.fileNameBody, { [styles.fileNameBodyMedium]: isSizeMedium }), children: [jsx("div", { className: styles.fileName, children: name }), extension && jsxs("div", { children: [".", extension] })] }));
+};
+
+export { FileName };
+//# sourceMappingURL=FileName.js.map

package/FileName.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileName.js","sources":["../src/FileName.tsx"],"sourcesContent":["import { ReactElement } from 'react';\nimport classnames from 'classnames';\n\nimport styles from './file-name.less';\n\nconst parse = (file: File): { name: string; extension: string } => {\n    const name = file.name;\n    const parts = name.split('.');\n    if (parts.length === 1) {\n        return {\n            name: parts[0],\n            extension: '',\n        };\n    }\n    const extension = parts.pop();\n    return {\n        // -1 из-за точки\n        name: name.substring(0, name.length - (extension?.length || 0) - 1),\n        extension: extension || '',\n    };\n};\n\ninterface FileNameProps {\n    file: File;\n    isSizeMedium?: boolean;\n}\n\nconst FileName = ({ file, isSizeMedium = false }: FileNameProps): ReactElement => {\n    const { name, extension } = parse(file);\n    return (\n        <div className={classnames(styles.fileNameBody, { [styles.fileNameBodyMedium]: isSizeMedium })}>\n            <div className={styles.fileName}>{name}</div>\n            {extension && <div>.{extension}</div>}\n        </div>\n    );\n};\n\nexport { FileName };\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAKA,MAAM,KAAK,GAAG,CAAC,IAAU,KAAyC;AAC9D,IAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;IACvB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;AAC9B,IAAA,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QACpB,OAAO;AACH,YAAA,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;AACd,YAAA,SAAS,EAAE,EAAE;SAChB,CAAC;KACL;AACD,IAAA,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC;IAC9B,OAAO;;QAEH,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,IAAI,SAAS,EAAE,MAAM,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACnE,SAAS,EAAE,SAAS,IAAI,EAAE;KAC7B,CAAC;AACN,CAAC,CAAC;AAOI,MAAA,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,YAAY,GAAG,KAAK,EAAiB,KAAkB;IAC7E,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;AACxC,IAAA,QACIA,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,YAAY,EAAE,EAAE,CAAC,MAAM,CAAC,kBAAkB,GAAG,YAAY,EAAE,CAAC,EAAA,QAAA,EAAA,CAC1FC,aAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAG,QAAA,EAAA,IAAI,EAAO,CAAA,EAC5C,SAAS,IAAID,IAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAA,CAAA,GAAA,EAAO,SAAS,CAAO,EAAA,CAAA,CAAA,EAAA,CACnC,EACR;AACN;;;;"}

package/Upload.d.ts

@@ -1,4 +1,4 @@
 import { ReactElement } from 'react';
 import { UploadProps } from '@hh.ru/magritte-ui-upload/types';
-declare const Upload: ({ files, trls, accept, selectFileButton: _selectFileButton, deleteFileButton: _deleteFileButton, replaceImageButton: _replaceImageButton, deleteImageButton: _deleteImageButton, renderFileInfo, onDropAccepted: onDropAcceptedExternal, onDropRejected: onDropRejectedExternal, onFileDelete: onFileDeleteExternal, ...dropzoneProps }: UploadProps) => ReactElement;
+declare const Upload: ({ files, trls, size, multiple, accept, selectFileButton: _selectFileButton, deleteFileButton: _deleteFileButton, replaceImageButton: _replaceImageButton, renderFileInfo, onDropAccepted: onDropAcceptedExternal, onDropRejected: onDropRejectedExternal, onFileDelete: onFileDeleteExternal, "aria-label": ariaLabel, ...dropzoneProps }: UploadProps) => ReactElement;
 export { Upload };

package/Upload.js

@@ -3,12 +3,16 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useRef, useMemo, useEffect, useCallback, cloneElement } from 'react';
 import { useDropzone } from 'react-dropzone';
 import classnames from 'classnames';
-import { CrossOutlinedSize24, ExclamationTriangleOutlinedSize32, DocumentOutlinedSize32, VideocameraOutlinedSize32, ImageSize32, DocumentArrowUpOutlinedSize32 } from '@hh.ru/magritte-ui-icon/icon';
+import { Action } from '@hh.ru/magritte-ui-action';
+import { Avatar } from '@hh.ru/magritte-ui-avatar';
+import { ExclamationTriangleOutlinedSize16, CheckCircleOutlinedSize16, CrossOutlinedSize24, TrashOutlinedSize24, ExclamationTriangleOutlinedSize32 } from '@hh.ru/magritte-ui-icon/icon';
 import { Loader } from '@hh.ru/magritte-ui-loader';
 import { VSpacing } from '@hh.ru/magritte-ui-spacing';
 import { Text } from '@hh.ru/magritte-ui-typography';
+import { FileName } from './FileName.js';
+import { getUploadIcon } from './utils.js';
 
-var styles = {"root":"magritte-root___FV1tC_1-1-0","background":"magritte-background___RfZ0U_1-1-0","drag-active":"magritte-drag-active___dihBL_1-1-0","dragActive":"magritte-drag-active___dihBL_1-1-0","load":"magritte-load___MghDA_1-1-0","loading":"magritte-loading___9E3p-_1-1-0","invalid":"magritte-invalid___Rt10-_1-1-0","body":"magritte-body___O7ROl_1-1-0","loader":"magritte-loader___XYpWg_1-1-0","cancel":"magritte-cancel___tQ-yX_1-1-0","image-controls":"magritte-image-controls___vLf94_1-1-0","imageControls":"magritte-image-controls___vLf94_1-1-0"};
+var styles = {"root":"magritte-root___FV1tC_2-0-0","background":"magritte-background___RfZ0U_2-0-0","drag-active":"magritte-drag-active___dihBL_2-0-0","dragActive":"magritte-drag-active___dihBL_2-0-0","load":"magritte-load___MghDA_2-0-0","loading":"magritte-loading___9E3p-_2-0-0","invalid":"magritte-invalid___Rt10-_2-0-0","root_medium":"magritte-root_medium___67WJa_2-0-0","rootMedium":"magritte-root_medium___67WJa_2-0-0","body":"magritte-body___O7ROl_2-0-0","root_small":"magritte-root_small___dkUYq_2-0-0","rootSmall":"magritte-root_small___dkUYq_2-0-0","loader":"magritte-loader___XYpWg_2-0-0","cancel":"magritte-cancel___tQ-yX_2-0-0","image-controls":"magritte-image-controls___vLf94_2-0-0","imageControls":"magritte-image-controls___vLf94_2-0-0","small-controls":"magritte-small-controls___Qn9TP_2-0-0","smallControls":"magritte-small-controls___Qn9TP_2-0-0","small-file-info-container":"magritte-small-file-info-container___MIN5r_2-0-0","smallFileInfoContainer":"magritte-small-file-info-container___MIN5r_2-0-0","small-file-info":"magritte-small-file-info___cMns-_2-0-0","smallFileInfo":"magritte-small-file-info___cMns-_2-0-0"};
 
 const order = 1024 * 1024;
 const bytes2mb = (value) => {
@@ -26,61 +30,47 @@ const getAvaliableFileTypes = (accept) => {
     const avaliableType = avaliableTypes[0];
     return avaliableType.split('/')[0];
 };
-// иконка может меняться в зависимости от типа и состояния загрузки
-const getUploadIcon = (uploadType, loadedFile) => {
-    if (loadedFile) {
-        const { error, loading } = loadedFile;
-        if (loading) {
-            return null;
-        }
-        if (error) {
-            return jsx(ExclamationTriangleOutlinedSize32, { initial: "negative" });
-        }
-        // иначе надо обработать type (причем некоторые меняются)
-        if (uploadType === 'mixed' || uploadType === 'application') {
-            return jsx(DocumentOutlinedSize32, { initial: "secondary" });
-        }
-        if (uploadType === 'video') {
-            return jsx(VideocameraOutlinedSize32, { initial: "secondary" });
-        }
-        return jsx(ImageSize32, { initial: "secondary" });
-    }
-    // отличается от условий выше (для video и application)
-    if (uploadType === 'mixed' || uploadType === 'application') {
-        return jsx(DocumentArrowUpOutlinedSize32, { initial: "secondary" });
-    }
-    // video and image
-    return jsx(ImageSize32, { initial: "secondary" });
-};
 const RenderFileInfoDefault = (loadedFile) => {
     return loadedFile.fileSizeMB;
 };
 const DEFAULT_ACCEPT = {
     'image/*': ['.png', '.jpeg', '.jpg'],
 };
-const Upload = ({ files, trls, accept = DEFAULT_ACCEPT, selectFileButton: _selectFileButton, deleteFileButton: _deleteFileButton, replaceImageButton: _replaceImageButton, deleteImageButton: _deleteImageButton, renderFileInfo = RenderFileInfoDefault, onDropAccepted: onDropAcceptedExternal, onDropRejected: onDropRejectedExternal, onFileDelete: onFileDeleteExternal, ...dropzoneProps }) => {
+const Upload = ({ files, trls, size = 'medium', multiple = false, accept = DEFAULT_ACCEPT, selectFileButton: _selectFileButton, deleteFileButton: _deleteFileButton, replaceImageButton: _replaceImageButton, renderFileInfo = RenderFileInfoDefault, onDropAccepted: onDropAcceptedExternal, onDropRejected: onDropRejectedExternal, onFileDelete: onFileDeleteExternal, 'aria-label': ariaLabel, ...dropzoneProps }) => {
     const bodyUploadRef = useRef(null);
     const uploadType = getAvaliableFileTypes(accept);
     const loadedFile = files.length > 0 ? files[0] : undefined;
     const isLoad = Boolean(loadedFile);
     const isLoading = Boolean(loadedFile?.loading);
     const isInvalid = Boolean(loadedFile?.error);
+    const isSizeSmall = size === 'small';
+    const isImageType = uploadType === 'image';
     const backgroundUploadPreview = useMemo(() => {
-        if (!loadedFile || uploadType !== 'image') {
+        if (!loadedFile || !isImageType) {
             return 'none';
         }
         if (loadedFile.loading) {
             return 'none';
         }
+        if (isSizeSmall) {
+            return URL.createObjectURL(loadedFile.data);
+        }
         return `url('${URL.createObjectURL(loadedFile.data)}')`;
-    }, [loadedFile, uploadType]);
+    }, [loadedFile, isImageType, isSizeSmall]);
     useEffect(() => {
         if (!bodyUploadRef.current) {
-            return;
+            return void 0;
+        }
+        if (isSizeSmall) {
+            return void 0;
         }
         // фиксируем ширину, так как после выбора контент поменяется
-        bodyUploadRef.current.style.minHeight = `${bodyUploadRef.current.offsetHeight}px`;
-    }, []);
+        const currentElement = bodyUploadRef.current;
+        currentElement.style.minHeight = `${bodyUploadRef.current.offsetHeight}px`;
+        return () => {
+            currentElement.style.minHeight = 'auto';
+        };
+    }, [isSizeSmall]);
     const onDropAccepted = useCallback((acceptedFiles, event) => {
         const acceptedLoadFiles = acceptedFiles.map((file) => ({ data: file, loading: true, loadPercentage: 0 }));
         onDropAcceptedExternal(acceptedLoadFiles, event);
@@ -97,41 +87,44 @@ const Upload = ({ files, trls, accept = DEFAULT_ACCEPT, selectFileButton: _selec
         loadedFile && onFileDeleteExternal(loadedFile, 0);
         event.stopPropagation();
     }, [loadedFile, onFileDeleteExternal]);
-    const selectFileButton = cloneElement(_selectFileButton, {
-        key: 'selectFileButton',
-        'data-qa': 'magritte-select-file-button',
-    });
-    const deleteFileButton = cloneElement(_deleteFileButton, {
-        key: 'deleteFileButton',
-        'data-qa': 'magritte-delete-file-button',
-        onClick: (event) => {
-            onFileDelete(event);
-        },
-    });
-    const replaceImageButton = cloneElement(_replaceImageButton, {
-        key: 'replaceImageButton',
-        'data-qa': 'magritte-select-replace-image-button',
-    });
-    const deleteImageButton = cloneElement(_deleteImageButton, {
-        key: 'deleteImageButton',
-        'data-qa': 'magritte-delete-image-button',
-        onClick: (event) => {
-            onFileDelete(event);
-        },
-    });
+    const selectFileButton = _selectFileButton &&
+        cloneElement(_selectFileButton, {
+            key: 'selectFileButton',
+            'data-qa': 'magritte-select-file-button',
+        });
+    const deleteFileButton = _deleteFileButton &&
+        cloneElement(_deleteFileButton, {
+            key: 'deleteFileButton',
+            'data-qa': 'magritte-delete-file-button',
+            onClick: (event) => {
+                onFileDelete(event);
+            },
+        });
+    const replaceImageButton = _replaceImageButton &&
+        cloneElement(_replaceImageButton, {
+            key: 'replaceImageButton',
+            'data-qa': 'magritte-select-replace-image-button',
+        });
     const { getRootProps, getInputProps, isDragActive } = useDropzone({
         ...dropzoneProps,
         accept,
         onDropAccepted,
         onDropRejected,
-        multiple: false,
+        multiple,
     });
-    return (jsxs("div", { className: classnames(styles.root, { [styles.dragActive]: isDragActive }, { [styles.loading]: isLoading }, { [styles.load]: isLoad }, { [styles.invalid]: isInvalid }), ...getRootProps(), children: [jsx("div", { className: styles.background, style: { backgroundImage: backgroundUploadPreview } }), jsxs("div", { className: styles.body, ref: bodyUploadRef, children: [jsx("input", { ...getInputProps() }), isLoading && (jsxs("div", { className: styles.loader, children: [jsx(Loader, { size: 64 }), jsx("div", { className: styles.cancel, children: jsx(CrossOutlinedSize24, { initial: "accent", onClick: (event) => {
-                                        onFileDelete(event);
-                                    } }) })] })), getUploadIcon(uploadType, loadedFile), jsx(VSpacing, { default: 16 }), loadedFile && (jsxs(Fragment, { children: [jsx(Text, { typography: "label-2-regular", children: loadedFile.data.name }), jsx(VSpacing, { default: 6 }), jsx(Text, { typography: "label-4-regular", style: "secondary", children: renderFileInfo({
-                                    ...loadedFile,
-                                    fileSizeMB: bytes2mb(loadedFile.data.size),
-                                }) }), jsx(VSpacing, { default: 8 }), !loadedFile.loading && uploadType !== 'image' && (jsxs(Fragment, { children: [jsx(VSpacing, { default: 8 }), deleteFileButton] })), !loadedFile.loading && uploadType === 'image' && (jsxs("div", { className: styles.imageControls, children: [replaceImageButton, deleteImageButton] }))] })), !loadedFile && (jsxs(Fragment, { children: [jsx(Text, { typography: "label-2-regular", children: trls.title }), jsx(VSpacing, { default: 6 }), jsx(Text, { typography: "label-4-regular", style: "secondary", children: trls.subTitle }), jsx(VSpacing, { default: 16 }), selectFileButton] }))] })] }));
+    return (jsxs("div", { className: classnames(styles.root, styles[`root_${size}`], { [styles.dragActive]: isDragActive }, { [styles.loading]: isLoading }, { [styles.load]: isLoad }, { [styles.invalid]: isInvalid }), ...getRootProps(), children: [jsx("div", { className: styles.background, style: { backgroundImage: !isSizeSmall ? backgroundUploadPreview : 'none' } }), jsxs("div", { className: styles.body, ref: bodyUploadRef, children: [jsx("input", { ...getInputProps() }), isSizeSmall && (jsxs(Fragment, { children: [loadedFile && (jsxs(Fragment, { children: [jsx(Avatar, { mode: isImageType && !isLoading ? 'image' : 'icon', style: "secondary", image: backgroundUploadPreview, size: 48, icon: getUploadIcon(uploadType, loadedFile, true), "aria-label": ariaLabel || '' }), jsxs("div", { className: styles.smallFileInfoContainer, children: [jsx(FileName, { file: loadedFile.data }), jsx(VSpacing, { default: 4 }), jsxs("div", { className: styles.smallFileInfo, children: [isInvalid && jsx(ExclamationTriangleOutlinedSize16, { initial: "negative" }), isLoading && jsx(Loader, { size: 16 }), !isInvalid && !isLoading && jsx(CheckCircleOutlinedSize16, { initial: "positive" }), renderFileInfo({
+                                                        ...loadedFile,
+                                                        fileSizeMB: bytes2mb(loadedFile.data.size),
+                                                    })] })] }), jsxs("div", { className: styles.smallControls, children: [isLoading && (jsx(Action, { icon: CrossOutlinedSize24, mode: "secondary", onClick: (event) => {
+                                                    onFileDelete(event);
+                                                } })), !isLoading && (jsx(Action, { icon: TrashOutlinedSize24, mode: "secondary", onClick: (event) => {
+                                                    onFileDelete(event);
+                                                } }))] })] })), !loadedFile && (jsxs(Fragment, { children: [jsx(Avatar, { mode: "icon", style: "secondary", size: 48, icon: getUploadIcon(uploadType, loadedFile, true), "aria-label": ariaLabel }), jsxs("div", { children: [jsx(Text, { typography: "label-2-regular", children: trls.title }), jsx(VSpacing, { default: 4 }), jsx(Text, { typography: "label-4-regular", style: "secondary", children: trls.subTitle })] }), selectFileButton && jsx("div", { className: styles.smallControls, children: selectFileButton })] }))] })), !isSizeSmall && (jsxs(Fragment, { children: [isLoading && (jsxs("div", { className: styles.loader, children: [jsx(Loader, { size: 64 }), jsx("div", { className: styles.cancel, children: jsx(CrossOutlinedSize24, { initial: "accent", onClick: (event) => {
+                                                onFileDelete(event);
+                                            } }) })] })), isInvalid ? (jsx(ExclamationTriangleOutlinedSize32, { initial: "negative" })) : (getUploadIcon(uploadType, loadedFile, false)), jsx(VSpacing, { default: 16 }), loadedFile && (jsxs(Fragment, { children: [jsx(FileName, { file: loadedFile.data, isSizeMedium: true }), jsx(VSpacing, { default: 6 }), jsx(Text, { typography: "label-4-regular", style: "secondary", children: renderFileInfo({
+                                            ...loadedFile,
+                                            fileSizeMB: bytes2mb(loadedFile.data.size),
+                                        }) }), !loadedFile.loading && !isImageType && deleteFileButton && (jsxs(Fragment, { children: [jsx(VSpacing, { default: 16 }), deleteFileButton] })), !loadedFile.loading && isImageType && (replaceImageButton || deleteFileButton) && (jsxs("div", { className: styles.imageControls, children: [replaceImageButton, deleteFileButton] }))] })), !loadedFile && (jsxs(Fragment, { children: [jsx(Text, { typography: "label-2-regular", children: trls.title }), jsx(VSpacing, { default: 6 }), jsx(Text, { typography: "label-4-regular", style: "secondary", children: trls.subTitle }), selectFileButton && (jsxs(Fragment, { children: [jsx(VSpacing, { default: 16 }), selectFileButton] }))] }))] }))] })] }));
 };
 
 export { Upload };

package/Upload.js.map

@@ -1 +1 @@
-{"version":3,"file":"Upload.js","sources":["../src/Upload.tsx"],"sourcesContent":["import {\n    ReactElement,\n    useRef,\n    ReactNode,\n    useEffect,\n    useCallback,\n    cloneElement,\n    MouseEvent,\n    ComponentProps,\n    useMemo,\n} from 'react';\nimport { useDropzone, Accept, DropEvent, FileRejection } from 'react-dropzone';\nimport classnames from 'classnames';\n\nimport { Button } from '@hh.ru/magritte-ui-button';\nimport {\n    DocumentArrowUpOutlinedSize32,\n    DocumentOutlinedSize32,\n    VideocameraOutlinedSize32,\n    ImageSize32,\n    ExclamationTriangleOutlinedSize32,\n    CrossOutlinedSize24,\n} from '@hh.ru/magritte-ui-icon/icon';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { VSpacing } from '@hh.ru/magritte-ui-spacing';\nimport { Text } from '@hh.ru/magritte-ui-typography';\nimport { LoadedFile, UploadProps, UploadType, LoadedFileWithFileSize } from '@hh.ru/magritte-ui-upload/types';\n\nimport styles from './upload.less';\n\nconst order = 1024 * 1024;\nconst bytes2mb = (value: number): string => {\n    return (value / order).toFixed(2);\n};\n\n// парсим accept в нормальный формат\nconst getAvaliableFileTypes = (accept: Accept): UploadType => {\n    const avaliableTypes = Object.keys(accept);\n    if (avaliableTypes.length === 0) {\n        throw new Error(`Magritte component Upload: accept can't be empty`);\n    }\n    if (avaliableTypes.length > 1) {\n        return 'mixed';\n    }\n    const avaliableType = avaliableTypes[0];\n    return avaliableType.split('/')[0] as UploadType;\n};\n\n// иконка может меняться в зависимости от типа и состояния загрузки\nconst getUploadIcon = (uploadType: UploadType, loadedFile: LoadedFile | undefined): ReactNode => {\n    if (loadedFile) {\n        const { error, loading } = loadedFile;\n        if (loading) {\n            return null;\n        }\n        if (error) {\n            return <ExclamationTriangleOutlinedSize32 initial=\"negative\" />;\n        }\n        // иначе надо обработать type (причем некоторые меняются)\n        if (uploadType === 'mixed' || uploadType === 'application') {\n            return <DocumentOutlinedSize32 initial=\"secondary\" />;\n        }\n        if (uploadType === 'video') {\n            return <VideocameraOutlinedSize32 initial=\"secondary\" />;\n        }\n        return <ImageSize32 initial=\"secondary\" />;\n    }\n\n    // отличается от условий выше (для video и application)\n    if (uploadType === 'mixed' || uploadType === 'application') {\n        return <DocumentArrowUpOutlinedSize32 initial=\"secondary\" />;\n    }\n    // video and image\n    return <ImageSize32 initial=\"secondary\" />;\n};\n\nconst RenderFileInfoDefault = (loadedFile: LoadedFileWithFileSize): ReactNode => {\n    return loadedFile.fileSizeMB;\n};\n\nconst DEFAULT_ACCEPT: Accept = {\n    'image/*': ['.png', '.jpeg', '.jpg'],\n};\n\nconst Upload = ({\n    files,\n    trls,\n    accept = DEFAULT_ACCEPT,\n    selectFileButton: _selectFileButton,\n    deleteFileButton: _deleteFileButton,\n    replaceImageButton: _replaceImageButton,\n    deleteImageButton: _deleteImageButton,\n    renderFileInfo = RenderFileInfoDefault,\n    onDropAccepted: onDropAcceptedExternal,\n    onDropRejected: onDropRejectedExternal,\n    onFileDelete: onFileDeleteExternal,\n    ...dropzoneProps\n}: UploadProps): ReactElement => {\n    const bodyUploadRef = useRef<HTMLDivElement>(null);\n    const uploadType = getAvaliableFileTypes(accept);\n    const loadedFile = files.length > 0 ? files[0] : undefined;\n    const isLoad = Boolean(loadedFile);\n    const isLoading = Boolean(loadedFile?.loading);\n    const isInvalid = Boolean(loadedFile?.error);\n\n    const backgroundUploadPreview: string = useMemo(() => {\n        if (!loadedFile || uploadType !== 'image') {\n            return 'none';\n        }\n        if (loadedFile.loading) {\n            return 'none';\n        }\n        return `url('${URL.createObjectURL(loadedFile.data)}')`;\n    }, [loadedFile, uploadType]);\n\n    useEffect(() => {\n        if (!bodyUploadRef.current) {\n            return;\n        }\n        // фиксируем ширину, так как после выбора контент поменяется\n        bodyUploadRef.current.style.minHeight = `${bodyUploadRef.current.offsetHeight}px`;\n    }, []);\n\n    const onDropAccepted = useCallback(\n        (acceptedFiles: File[], event: DropEvent) => {\n            const acceptedLoadFiles = acceptedFiles.map((file) => ({ data: file, loading: true, loadPercentage: 0 }));\n            onDropAcceptedExternal(acceptedLoadFiles, event);\n        },\n        [onDropAcceptedExternal]\n    );\n    const onDropRejected = useCallback(\n        (fileRejections: FileRejection[], event: DropEvent) => {\n            const rejectionLoadFiles = fileRejections.map((fileRejection) => ({\n                data: fileRejection.file,\n                loading: false,\n                error: fileRejection.errors?.[0].code || '',\n            }));\n            onDropRejectedExternal?.(rejectionLoadFiles, event);\n        },\n        [onDropRejectedExternal]\n    );\n\n    const onFileDelete = useCallback(\n        (event: MouseEvent) => {\n            loadedFile && onFileDeleteExternal(loadedFile, 0);\n            event.stopPropagation();\n        },\n        [loadedFile, onFileDeleteExternal]\n    );\n\n    const selectFileButton = cloneElement(_selectFileButton, {\n        key: 'selectFileButton',\n        'data-qa': 'magritte-select-file-button',\n    } as Partial<ComponentProps<typeof Button>>);\n\n    const deleteFileButton = cloneElement(_deleteFileButton, {\n        key: 'deleteFileButton',\n        'data-qa': 'magritte-delete-file-button',\n        onClick: (event: MouseEvent) => {\n            onFileDelete(event);\n        },\n    } as Partial<ComponentProps<typeof Button>>);\n\n    const replaceImageButton = cloneElement(_replaceImageButton, {\n        key: 'replaceImageButton',\n        'data-qa': 'magritte-select-replace-image-button',\n    } as Partial<ComponentProps<typeof Button>>);\n\n    const deleteImageButton = cloneElement(_deleteImageButton, {\n        key: 'deleteImageButton',\n        'data-qa': 'magritte-delete-image-button',\n        onClick: (event: MouseEvent) => {\n            onFileDelete(event);\n        },\n    } as Partial<ComponentProps<typeof Button>>);\n\n    const { getRootProps, getInputProps, isDragActive } = useDropzone({\n        ...dropzoneProps,\n        accept,\n        onDropAccepted,\n        onDropRejected,\n        multiple: false,\n    });\n    return (\n        <div\n            className={classnames(\n                styles.root,\n                { [styles.dragActive]: isDragActive },\n                { [styles.loading]: isLoading },\n                { [styles.load]: isLoad },\n                { [styles.invalid]: isInvalid }\n            )}\n            {...getRootProps()}\n        >\n            <div className={styles.background} style={{ backgroundImage: backgroundUploadPreview }} />\n            <div className={styles.body} ref={bodyUploadRef}>\n                <input {...getInputProps()} />\n                {isLoading && (\n                    <div className={styles.loader}>\n                        <Loader size={64} />\n                        <div className={styles.cancel}>\n                            <CrossOutlinedSize24\n                                initial=\"accent\"\n                                onClick={(event) => {\n                                    onFileDelete(event);\n                                }}\n                            />\n                        </div>\n                    </div>\n                )}\n                {getUploadIcon(uploadType, loadedFile)}\n                <VSpacing default={16} />\n                {loadedFile && (\n                    <>\n                        <Text typography=\"label-2-regular\">{loadedFile.data.name}</Text>\n                        <VSpacing default={6} />\n                        <Text typography=\"label-4-regular\" style=\"secondary\">\n                            {renderFileInfo({\n                                ...loadedFile,\n                                fileSizeMB: bytes2mb(loadedFile.data.size),\n                            })}\n                        </Text>\n                        <VSpacing default={8} />\n                        {!loadedFile.loading && uploadType !== 'image' && (\n                            <>\n                                <VSpacing default={8} />\n                                {deleteFileButton}\n                            </>\n                        )}\n                        {!loadedFile.loading && uploadType === 'image' && (\n                            <div className={styles.imageControls}>\n                                {replaceImageButton}\n                                {deleteImageButton}\n                            </div>\n                        )}\n                    </>\n                )}\n                {!loadedFile && (\n                    <>\n                        <Text typography=\"label-2-regular\">{trls.title}</Text>\n                        <VSpacing default={6} />\n                        <Text typography=\"label-4-regular\" style=\"secondary\">\n                            {trls.subTitle}\n                        </Text>\n                        <VSpacing default={16} />\n                        {selectFileButton}\n                    </>\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport { Upload };\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"Upload.js","sources":["../src/Upload.tsx"],"sourcesContent":["import {\n    ReactElement,\n    useRef,\n    ReactNode,\n    useEffect,\n    useCallback,\n    cloneElement,\n    MouseEvent,\n    ComponentProps,\n    useMemo,\n} from 'react';\nimport { useDropzone, Accept, DropEvent, FileRejection } from 'react-dropzone';\nimport classnames from 'classnames';\n\nimport { Action } from '@hh.ru/magritte-ui-action';\nimport { Avatar } from '@hh.ru/magritte-ui-avatar';\nimport { Button } from '@hh.ru/magritte-ui-button';\nimport {\n    CrossOutlinedSize24,\n    CheckCircleOutlinedSize16,\n    ExclamationTriangleOutlinedSize32,\n    ExclamationTriangleOutlinedSize16,\n    TrashOutlinedSize24,\n} from '@hh.ru/magritte-ui-icon/icon';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { VSpacing } from '@hh.ru/magritte-ui-spacing';\nimport { Text } from '@hh.ru/magritte-ui-typography';\nimport { FileName } from '@hh.ru/magritte-ui-upload/FileName';\nimport { UploadProps, UploadType, LoadedFileWithFileSize } from '@hh.ru/magritte-ui-upload/types';\nimport { getUploadIcon } from '@hh.ru/magritte-ui-upload/utils';\n\nimport styles from './upload.less';\n\nconst order = 1024 * 1024;\nconst bytes2mb = (value: number): string => {\n    return (value / order).toFixed(2);\n};\n\n// парсим accept в нормальный формат\nconst getAvaliableFileTypes = (accept: Accept): UploadType => {\n    const avaliableTypes = Object.keys(accept);\n    if (avaliableTypes.length === 0) {\n        throw new Error(`Magritte component Upload: accept can't be empty`);\n    }\n    if (avaliableTypes.length > 1) {\n        return 'mixed';\n    }\n    const avaliableType = avaliableTypes[0];\n    return avaliableType.split('/')[0] as UploadType;\n};\n\nconst RenderFileInfoDefault = (loadedFile: LoadedFileWithFileSize): ReactNode => {\n    return loadedFile.fileSizeMB;\n};\n\nconst DEFAULT_ACCEPT: Accept = {\n    'image/*': ['.png', '.jpeg', '.jpg'],\n};\n\nconst Upload = ({\n    files,\n    trls,\n    size = 'medium',\n    multiple = false,\n    accept = DEFAULT_ACCEPT,\n    selectFileButton: _selectFileButton,\n    deleteFileButton: _deleteFileButton,\n    replaceImageButton: _replaceImageButton,\n    renderFileInfo = RenderFileInfoDefault,\n    onDropAccepted: onDropAcceptedExternal,\n    onDropRejected: onDropRejectedExternal,\n    onFileDelete: onFileDeleteExternal,\n    'aria-label': ariaLabel,\n    ...dropzoneProps\n}: UploadProps): ReactElement => {\n    const bodyUploadRef = useRef<HTMLDivElement>(null);\n    const uploadType = getAvaliableFileTypes(accept);\n    const loadedFile = files.length > 0 ? files[0] : undefined;\n    const isLoad = Boolean(loadedFile);\n    const isLoading = Boolean(loadedFile?.loading);\n    const isInvalid = Boolean(loadedFile?.error);\n    const isSizeSmall = size === 'small';\n    const isImageType = uploadType === 'image';\n\n    const backgroundUploadPreview: string = useMemo(() => {\n        if (!loadedFile || !isImageType) {\n            return 'none';\n        }\n        if (loadedFile.loading) {\n            return 'none';\n        }\n        if (isSizeSmall) {\n            return URL.createObjectURL(loadedFile.data);\n        }\n        return `url('${URL.createObjectURL(loadedFile.data)}')`;\n    }, [loadedFile, isImageType, isSizeSmall]);\n\n    useEffect(() => {\n        if (!bodyUploadRef.current) {\n            return void 0;\n        }\n        if (isSizeSmall) {\n            return void 0;\n        }\n        // фиксируем ширину, так как после выбора контент поменяется\n        const currentElement = bodyUploadRef.current;\n        currentElement.style.minHeight = `${bodyUploadRef.current.offsetHeight}px`;\n        return () => {\n            currentElement.style.minHeight = 'auto';\n        };\n    }, [isSizeSmall]);\n\n    const onDropAccepted = useCallback(\n        (acceptedFiles: File[], event: DropEvent) => {\n            const acceptedLoadFiles = acceptedFiles.map((file) => ({ data: file, loading: true, loadPercentage: 0 }));\n            onDropAcceptedExternal(acceptedLoadFiles, event);\n        },\n        [onDropAcceptedExternal]\n    );\n    const onDropRejected = useCallback(\n        (fileRejections: FileRejection[], event: DropEvent) => {\n            const rejectionLoadFiles = fileRejections.map((fileRejection) => ({\n                data: fileRejection.file,\n                loading: false,\n                error: fileRejection.errors?.[0].code || '',\n            }));\n            onDropRejectedExternal?.(rejectionLoadFiles, event);\n        },\n        [onDropRejectedExternal]\n    );\n    const onFileDelete = useCallback(\n        (event: MouseEvent) => {\n            loadedFile && onFileDeleteExternal(loadedFile, 0);\n            event.stopPropagation();\n        },\n        [loadedFile, onFileDeleteExternal]\n    );\n\n    const selectFileButton =\n        _selectFileButton &&\n        cloneElement(_selectFileButton, {\n            key: 'selectFileButton',\n            'data-qa': 'magritte-select-file-button',\n        } as Partial<ComponentProps<typeof Button>>);\n\n    const deleteFileButton =\n        _deleteFileButton &&\n        cloneElement(_deleteFileButton, {\n            key: 'deleteFileButton',\n            'data-qa': 'magritte-delete-file-button',\n            onClick: (event: MouseEvent) => {\n                onFileDelete(event);\n            },\n        } as Partial<ComponentProps<typeof Button>>);\n\n    const replaceImageButton =\n        _replaceImageButton &&\n        cloneElement(_replaceImageButton, {\n            key: 'replaceImageButton',\n            'data-qa': 'magritte-select-replace-image-button',\n        } as Partial<ComponentProps<typeof Button>>);\n\n    const { getRootProps, getInputProps, isDragActive } = useDropzone({\n        ...dropzoneProps,\n        accept,\n        onDropAccepted,\n        onDropRejected,\n        multiple,\n    });\n    return (\n        <div\n            className={classnames(\n                styles.root,\n                styles[`root_${size}`],\n                { [styles.dragActive]: isDragActive },\n                { [styles.loading]: isLoading },\n                { [styles.load]: isLoad },\n                { [styles.invalid]: isInvalid }\n            )}\n            {...getRootProps()}\n        >\n            <div\n                className={styles.background}\n                style={{ backgroundImage: !isSizeSmall ? backgroundUploadPreview : 'none' }}\n            />\n            <div className={styles.body} ref={bodyUploadRef}>\n                <input {...getInputProps()} />\n                {isSizeSmall && (\n                    <>\n                        {loadedFile && (\n                            <>\n                                <Avatar\n                                    mode={isImageType && !isLoading ? 'image' : 'icon'}\n                                    style=\"secondary\"\n                                    image={backgroundUploadPreview}\n                                    size={48}\n                                    icon={getUploadIcon(uploadType, loadedFile, true)}\n                                    aria-label={ariaLabel || ''}\n                                />\n                                <div className={styles.smallFileInfoContainer}>\n                                    <FileName file={loadedFile.data} />\n                                    <VSpacing default={4} />\n                                    <div className={styles.smallFileInfo}>\n                                        {isInvalid && <ExclamationTriangleOutlinedSize16 initial=\"negative\" />}\n                                        {isLoading && <Loader size={16} />}\n                                        {!isInvalid && !isLoading && <CheckCircleOutlinedSize16 initial=\"positive\" />}\n                                        {renderFileInfo({\n                                            ...loadedFile,\n                                            fileSizeMB: bytes2mb(loadedFile.data.size),\n                                        })}\n                                    </div>\n                                </div>\n                                <div className={styles.smallControls}>\n                                    {isLoading && (\n                                        <Action\n                                            icon={CrossOutlinedSize24}\n                                            mode=\"secondary\"\n                                            onClick={(event) => {\n                                                onFileDelete(event);\n                                            }}\n                                        />\n                                    )}\n                                    {!isLoading && (\n                                        <Action\n                                            icon={TrashOutlinedSize24}\n                                            mode=\"secondary\"\n                                            onClick={(event) => {\n                                                onFileDelete(event);\n                                            }}\n                                        />\n                                    )}\n                                </div>\n                            </>\n                        )}\n                        {!loadedFile && (\n                            <>\n                                <Avatar\n                                    mode=\"icon\"\n                                    style=\"secondary\"\n                                    size={48}\n                                    icon={getUploadIcon(uploadType, loadedFile, true)}\n                                    aria-label={ariaLabel as string}\n                                />\n                                <div>\n                                    <Text typography=\"label-2-regular\">{trls.title}</Text>\n                                    <VSpacing default={4} />\n                                    <Text typography=\"label-4-regular\" style=\"secondary\">\n                                        {trls.subTitle}\n                                    </Text>\n                                </div>\n                                {selectFileButton && <div className={styles.smallControls}>{selectFileButton}</div>}\n                            </>\n                        )}\n                    </>\n                )}\n                {!isSizeSmall && (\n                    <>\n                        {isLoading && (\n                            <div className={styles.loader}>\n                                <Loader size={64} />\n                                <div className={styles.cancel}>\n                                    <CrossOutlinedSize24\n                                        initial=\"accent\"\n                                        onClick={(event) => {\n                                            onFileDelete(event);\n                                        }}\n                                    />\n                                </div>\n                            </div>\n                        )}\n                        {isInvalid ? (\n                            <ExclamationTriangleOutlinedSize32 initial=\"negative\" />\n                        ) : (\n                            getUploadIcon(uploadType, loadedFile, false)\n                        )}\n                        <VSpacing default={16} />\n                        {loadedFile && (\n                            <>\n                                <FileName file={loadedFile.data} isSizeMedium />\n                                <VSpacing default={6} />\n                                <Text typography=\"label-4-regular\" style=\"secondary\">\n                                    {renderFileInfo({\n                                        ...loadedFile,\n                                        fileSizeMB: bytes2mb(loadedFile.data.size),\n                                    })}\n                                </Text>\n                                {!loadedFile.loading && !isImageType && deleteFileButton && (\n                                    <>\n                                        <VSpacing default={16} />\n                                        {deleteFileButton}\n                                    </>\n                                )}\n                                {!loadedFile.loading && isImageType && (replaceImageButton || deleteFileButton) && (\n                                    <div className={styles.imageControls}>\n                                        {replaceImageButton}\n                                        {deleteFileButton}\n                                    </div>\n                                )}\n                            </>\n                        )}\n                        {!loadedFile && (\n                            <>\n                                <Text typography=\"label-2-regular\">{trls.title}</Text>\n                                <VSpacing default={6} />\n                                <Text typography=\"label-4-regular\" style=\"secondary\">\n                                    {trls.subTitle}\n                                </Text>\n                                {selectFileButton && (\n                                    <>\n                                        <VSpacing default={16} />\n                                        {selectFileButton}\n                                    </>\n                                )}\n                            </>\n                        )}\n                    </>\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport { Upload };\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}

package/index.css

@@ -1,3 +1,556 @@
+:root{
+  --magritte-typography-title-1-semibold-font-family-v20-0-1:"hh sans";
+  --magritte-typography-title-1-semibold-font-weight-v20-0-1:500;
+  --magritte-typography-title-1-semibold-line-height-v20-0-1:60px;
+  --magritte-typography-title-1-semibold-font-size-v20-0-1:48px;
+  --magritte-typography-title-1-semibold-letter-spacing-v20-0-1:-0.02em;
+  --magritte-typography-title-1-semibold-text-indent-v20-0-1:0px;
+  --magritte-typography-title-1-semibold-text-transform-v20-0-1:none;
+  --magritte-typography-title-1-semibold-text-decoration-v20-0-1:none;
+  --magritte-typography-title-2-semibold-font-family-v20-0-1:"hh sans";
+  --magritte-typography-title-2-semibold-font-weight-v20-0-1:500;
+  --magritte-typography-title-2-semibold-line-height-v20-0-1:48px;
+  --magritte-typography-title-2-semibold-font-size-v20-0-1:36px;
+  --magritte-typography-title-2-semibold-letter-spacing-v20-0-1:-0.0175em;
+  --magritte-typography-title-2-semibold-text-indent-v20-0-1:0px;
+  --magritte-typography-title-2-semibold-text-transform-v20-0-1:none;
+  --magritte-typography-title-2-semibold-text-decoration-v20-0-1:none;
+  --magritte-typography-title-3-semibold-font-family-v20-0-1:"hh sans";
+  --magritte-typography-title-3-semibold-font-weight-v20-0-1:500;
+  --magritte-typography-title-3-semibold-line-height-v20-0-1:40px;
+  --magritte-typography-title-3-semibold-font-size-v20-0-1:28px;
+  --magritte-typography-title-3-semibold-letter-spacing-v20-0-1:-0.0125em;
+  --magritte-typography-title-3-semibold-text-indent-v20-0-1:0px;
+  --magritte-typography-title-3-semibold-text-transform-v20-0-1:none;
+  --magritte-typography-title-3-semibold-text-decoration-v20-0-1:none;
+  --magritte-typography-title-4-semibold-font-family-v20-0-1:"hh sans";
+  --magritte-typography-title-4-semibold-font-weight-v20-0-1:500;
+  --magritte-typography-title-4-semibold-line-height-v20-0-1:32px;
+  --magritte-typography-title-4-semibold-font-size-v20-0-1:22px;
+  --magritte-typography-title-4-semibold-letter-spacing-v20-0-1:-0.0075em;
+  --magritte-typography-title-4-semibold-text-indent-v20-0-1:0px;
+  --magritte-typography-title-4-semibold-text-transform-v20-0-1:none;
+  --magritte-typography-title-4-semibold-text-decoration-v20-0-1:none;
+  --magritte-typography-title-5-semibold-font-family-v20-0-1:"hh sans";
+  --magritte-typography-title-5-semibold-font-weight-v20-0-1:500;
+  --magritte-typography-title-5-semibold-line-height-v20-0-1:26px;
+  --magritte-typography-title-5-semibold-font-size-v20-0-1:18px;
+  --magritte-typography-title-5-semibold-letter-spacing-v20-0-1:0em;
+  --magritte-typography-title-5-semibold-text-indent-v20-0-1:0px;
+  --magritte-typography-title-5-semibold-text-transform-v20-0-1:none;
+  --magritte-typography-title-5-semibold-text-decoration-v20-0-1:none;
+  --magritte-typography-subtitle-1-semibold-font-family-v20-0-1:"hh sans";
+  --magritte-typography-subtitle-1-semibold-font-weight-v20-0-1:500;
+  --magritte-typography-subtitle-1-semibold-line-height-v20-0-1:22px;
+  --magritte-typography-subtitle-1-semibold-font-size-v20-0-1:16px;
+  --magritte-typography-subtitle-1-semibold-letter-spacing-v20-0-1:0em;
+  --magritte-typography-subtitle-1-semibold-text-indent-v20-0-1:0px;
+  --magritte-typography-subtitle-1-semibold-text-transform-v20-0-1:none;
+  --magritte-typography-subtitle-1-semibold-text-decoration-v20-0-1:none;
+  --magritte-typography-subtitle-2-semibold-font-family-v20-0-1:"hh sans";
+  --magritte-typography-subtitle-2-semibold-font-weight-v20-0-1:500;
+  --magritte-typography-subtitle-2-semibold-line-height-v20-0-1:20px;
+  --magritte-typography-subtitle-2-semibold-font-size-v20-0-1:14px;
+  --magritte-typography-subtitle-2-semibold-letter-spacing-v20-0-1:0.005em;
+  --magritte-typography-subtitle-2-semibold-text-indent-v20-0-1:0px;
+  --magritte-typography-subtitle-2-semibold-text-transform-v20-0-1:none;
+  --magritte-typography-subtitle-2-semibold-text-decoration-v20-0-1:none;
+  --magritte-typography-subtitle-3-semibold-font-family-v20-0-1:"hh sans";
+  --magritte-typography-subtitle-3-semibold-font-weight-v20-0-1:500;
+  --magritte-typography-subtitle-3-semibold-line-height-v20-0-1:18px;
+  --magritte-typography-subtitle-3-semibold-font-size-v20-0-1:12px;
+  --magritte-typography-subtitle-3-semibold-letter-spacing-v20-0-1:0.01em;
+  --magritte-typography-subtitle-3-semibold-text-indent-v20-0-1:0px;
+  --magritte-typography-subtitle-3-semibold-text-transform-v20-0-1:none;
+  --magritte-typography-subtitle-3-semibold-text-decoration-v20-0-1:none;
+  --magritte-typography-subtitle-4-semibold-font-family-v20-0-1:"hh sans";
+  --magritte-typography-subtitle-4-semibold-font-weight-v20-0-1:500;
+  --magritte-typography-subtitle-4-semibold-line-height-v20-0-1:16px;
+  --magritte-typography-subtitle-4-semibold-font-size-v20-0-1:10px;
+  --magritte-typography-subtitle-4-semibold-letter-spacing-v20-0-1:0.015em;
+  --magritte-typography-subtitle-4-semibold-text-indent-v20-0-1:0px;
+  --magritte-typography-subtitle-4-semibold-text-transform-v20-0-1:none;
+  --magritte-typography-subtitle-4-semibold-text-decoration-v20-0-1:none;
+  --magritte-typography-label-1-regular-font-family-v20-0-1:"hh sans";
+  --magritte-typography-label-1-regular-font-weight-v20-0-1:400;
+  --magritte-typography-label-1-regular-line-height-v20-0-1:26px;
+  --magritte-typography-label-1-regular-font-size-v20-0-1:18px;
+  --magritte-typography-label-1-regular-letter-spacing-v20-0-1:-0.005em;
+  --magritte-typography-label-1-regular-text-indent-v20-0-1:0px;
+  --magritte-typography-label-1-regular-text-transform-v20-0-1:none;
+  --magritte-typography-label-1-regular-text-decoration-v20-0-1:none;
+  --magritte-typography-label-2-regular-font-family-v20-0-1:"hh sans";
+  --magritte-typography-label-2-regular-font-weight-v20-0-1:400;
+  --magritte-typography-label-2-regular-line-height-v20-0-1:22px;
+  --magritte-typography-label-2-regular-font-size-v20-0-1:16px;
+  --magritte-typography-label-2-regular-letter-spacing-v20-0-1:0em;
+  --magritte-typography-label-2-regular-text-indent-v20-0-1:0px;
+  --magritte-typography-label-2-regular-text-transform-v20-0-1:none;
+  --magritte-typography-label-2-regular-text-decoration-v20-0-1:none;
+  --magritte-typography-label-3-regular-font-family-v20-0-1:"hh sans";
+  --magritte-typography-label-3-regular-font-weight-v20-0-1:400;
+  --magritte-typography-label-3-regular-line-height-v20-0-1:20px;
+  --magritte-typography-label-3-regular-font-size-v20-0-1:14px;
+  --magritte-typography-label-3-regular-letter-spacing-v20-0-1:0.005em;
+  --magritte-typography-label-3-regular-text-indent-v20-0-1:0px;
+  --magritte-typography-label-3-regular-text-transform-v20-0-1:none;
+  --magritte-typography-label-3-regular-text-decoration-v20-0-1:none;
+  --magritte-typography-label-4-regular-font-family-v20-0-1:"hh sans";
+  --magritte-typography-label-4-regular-font-weight-v20-0-1:400;
+  --magritte-typography-label-4-regular-line-height-v20-0-1:18px;
+  --magritte-typography-label-4-regular-font-size-v20-0-1:12px;
+  --magritte-typography-label-4-regular-letter-spacing-v20-0-1:0.01em;
+  --magritte-typography-label-4-regular-text-indent-v20-0-1:0px;
+  --magritte-typography-label-4-regular-text-transform-v20-0-1:none;
+  --magritte-typography-label-4-regular-text-decoration-v20-0-1:none;
+  --magritte-typography-label-5-regular-font-family-v20-0-1:"hh sans";
+  --magritte-typography-label-5-regular-font-weight-v20-0-1:400;
+  --magritte-typography-label-5-regular-line-height-v20-0-1:14px;
+  --magritte-typography-label-5-regular-font-size-v20-0-1:10px;
+  --magritte-typography-label-5-regular-letter-spacing-v20-0-1:0.02em;
+  --magritte-typography-label-5-regular-text-indent-v20-0-1:0px;
+  --magritte-typography-label-5-regular-text-transform-v20-0-1:none;
+  --magritte-typography-label-5-regular-text-decoration-v20-0-1:none;
+  --magritte-typography-paragraph-1-regular-font-family-v20-0-1:"hh sans";
+  --magritte-typography-paragraph-1-regular-font-weight-v20-0-1:400;
+  --magritte-typography-paragraph-1-regular-line-height-v20-0-1:28px;
+  --magritte-typography-paragraph-1-regular-font-size-v20-0-1:18px;
+  --magritte-typography-paragraph-1-regular-letter-spacing-v20-0-1:0em;
+  --magritte-typography-paragraph-1-regular-text-indent-v20-0-1:0px;
+  --magritte-typography-paragraph-1-regular-text-transform-v20-0-1:none;
+  --magritte-typography-paragraph-1-regular-text-decoration-v20-0-1:none;
+  --magritte-typography-paragraph-2-regular-font-family-v20-0-1:"hh sans";
+  --magritte-typography-paragraph-2-regular-font-weight-v20-0-1:400;
+  --magritte-typography-paragraph-2-regular-line-height-v20-0-1:26px;
+  --magritte-typography-paragraph-2-regular-font-size-v20-0-1:16px;
+  --magritte-typography-paragraph-2-regular-letter-spacing-v20-0-1:0.005em;
+  --magritte-typography-paragraph-2-regular-text-indent-v20-0-1:0px;
+  --magritte-typography-paragraph-2-regular-text-transform-v20-0-1:none;
+  --magritte-typography-paragraph-2-regular-text-decoration-v20-0-1:none;
+  --magritte-typography-paragraph-3-regular-font-family-v20-0-1:"hh sans";
+  --magritte-typography-paragraph-3-regular-font-weight-v20-0-1:400;
+  --magritte-typography-paragraph-3-regular-line-height-v20-0-1:24px;
+  --magritte-typography-paragraph-3-regular-font-size-v20-0-1:14px;
+  --magritte-typography-paragraph-3-regular-letter-spacing-v20-0-1:0.01em;
+  --magritte-typography-paragraph-3-regular-text-indent-v20-0-1:0px;
+  --magritte-typography-paragraph-3-regular-text-transform-v20-0-1:none;
+  --magritte-typography-paragraph-3-regular-text-decoration-v20-0-1:none;
+  --magritte-typography-paragraph-4-regular-font-family-v20-0-1:"hh sans";
+  --magritte-typography-paragraph-4-regular-font-weight-v20-0-1:400;
+  --magritte-typography-paragraph-4-regular-line-height-v20-0-1:22px;
+  --magritte-typography-paragraph-4-regular-font-size-v20-0-1:12px;
+  --magritte-typography-paragraph-4-regular-letter-spacing-v20-0-1:0.015em;
+  --magritte-typography-paragraph-4-regular-text-indent-v20-0-1:0px;
+  --magritte-typography-paragraph-4-regular-text-transform-v20-0-1:none;
+  --magritte-typography-paragraph-4-regular-text-decoration-v20-0-1:none;
+  --magritte-typography-_custom-1-semibold-font-family-v20-0-1:"hh sans";
+  --magritte-typography-_custom-1-semibold-font-weight-v20-0-1:500;
+  --magritte-typography-_custom-1-semibold-line-height-v20-0-1:28px;
+  --magritte-typography-_custom-1-semibold-font-size-v20-0-1:18px;
+  --magritte-typography-_custom-1-semibold-letter-spacing-v20-0-1:0em;
+  --magritte-typography-_custom-1-semibold-text-indent-v20-0-1:0px;
+  --magritte-typography-_custom-1-semibold-text-transform-v20-0-1:none;
+  --magritte-typography-_custom-1-semibold-text-decoration-v20-0-1:none;
+  --magritte-typography-_custom-2-semibold-font-family-v20-0-1:"hh sans";
+  --magritte-typography-_custom-2-semibold-font-weight-v20-0-1:500;
+  --magritte-typography-_custom-2-semibold-line-height-v20-0-1:26px;
+  --magritte-typography-_custom-2-semibold-font-size-v20-0-1:16px;
+  --magritte-typography-_custom-2-semibold-letter-spacing-v20-0-1:0.005em;
+  --magritte-typography-_custom-2-semibold-text-indent-v20-0-1:0px;
+  --magritte-typography-_custom-2-semibold-text-transform-v20-0-1:none;
+  --magritte-typography-_custom-2-semibold-text-decoration-v20-0-1:none;
+  --magritte-typography-_custom-3-semibold-font-family-v20-0-1:"hh sans";
+  --magritte-typography-_custom-3-semibold-font-weight-v20-0-1:500;
+  --magritte-typography-_custom-3-semibold-line-height-v20-0-1:24px;
+  --magritte-typography-_custom-3-semibold-font-size-v20-0-1:14px;
+  --magritte-typography-_custom-3-semibold-letter-spacing-v20-0-1:0.01em;
+  --magritte-typography-_custom-3-semibold-text-indent-v20-0-1:0px;
+  --magritte-typography-_custom-3-semibold-text-transform-v20-0-1:none;
+  --magritte-typography-_custom-3-semibold-text-decoration-v20-0-1:none;
+  --magritte-typography-_custom-4-semibold-font-family-v20-0-1:"hh sans";
+  --magritte-typography-_custom-4-semibold-font-weight-v20-0-1:400;
+  --magritte-typography-_custom-4-semibold-line-height-v20-0-1:22px;
+  --magritte-typography-_custom-4-semibold-font-size-v20-0-1:12px;
+  --magritte-typography-_custom-4-semibold-letter-spacing-v20-0-1:0.015em;
+  --magritte-typography-_custom-4-semibold-text-indent-v20-0-1:0px;
+  --magritte-typography-_custom-4-semibold-text-transform-v20-0-1:none;
+  --magritte-typography-_custom-4-semibold-text-decoration-v20-0-1:none;
+  --magritte-typography-_custom-5-semibold-font-family-v20-0-1:"hh sans";
+  --magritte-typography-_custom-5-semibold-font-weight-v20-0-1:400;
+  --magritte-typography-_custom-5-semibold-line-height-v20-0-1:12px;
+  --magritte-typography-_custom-5-semibold-font-size-v20-0-1:10px;
+  --magritte-typography-_custom-5-semibold-letter-spacing-v20-0-1:0.015em;
+  --magritte-typography-_custom-5-semibold-text-indent-v20-0-1:0px;
+  --magritte-typography-_custom-5-semibold-text-transform-v20-0-1:none;
+  --magritte-typography-_custom-5-semibold-text-decoration-v20-0-1:none;
+  --magritte-typography-_custom-1-medium-font-family-v20-0-1:"hh sans";
+  --magritte-typography-_custom-1-medium-font-weight-v20-0-1:500;
+  --magritte-typography-_custom-1-medium-line-height-v20-0-1:28px;
+  --magritte-typography-_custom-1-medium-font-size-v20-0-1:18px;
+  --magritte-typography-_custom-1-medium-letter-spacing-v20-0-1:0em;
+  --magritte-typography-_custom-1-medium-text-indent-v20-0-1:0px;
+  --magritte-typography-_custom-1-medium-text-transform-v20-0-1:none;
+  --magritte-typography-_custom-1-medium-text-decoration-v20-0-1:none;
+  --magritte-typography-_custom-2-medium-font-family-v20-0-1:"hh sans";
+  --magritte-typography-_custom-2-medium-font-weight-v20-0-1:500;
+  --magritte-typography-_custom-2-medium-line-height-v20-0-1:26px;
+  --magritte-typography-_custom-2-medium-font-size-v20-0-1:16px;
+  --magritte-typography-_custom-2-medium-letter-spacing-v20-0-1:0.005em;
+  --magritte-typography-_custom-2-medium-text-indent-v20-0-1:0px;
+  --magritte-typography-_custom-2-medium-text-transform-v20-0-1:none;
+  --magritte-typography-_custom-2-medium-text-decoration-v20-0-1:none;
+  --magritte-typography-_custom-3-medium-font-family-v20-0-1:"hh sans";
+  --magritte-typography-_custom-3-medium-font-weight-v20-0-1:500;
+  --magritte-typography-_custom-3-medium-line-height-v20-0-1:24px;
+  --magritte-typography-_custom-3-medium-font-size-v20-0-1:14px;
+  --magritte-typography-_custom-3-medium-letter-spacing-v20-0-1:0.01em;
+  --magritte-typography-_custom-3-medium-text-indent-v20-0-1:0px;
+  --magritte-typography-_custom-3-medium-text-transform-v20-0-1:none;
+  --magritte-typography-_custom-3-medium-text-decoration-v20-0-1:none;
+  --magritte-typography-_custom-4-medium-font-family-v20-0-1:"hh sans";
+  --magritte-typography-_custom-4-medium-font-weight-v20-0-1:500;
+  --magritte-typography-_custom-4-medium-line-height-v20-0-1:22px;
+  --magritte-typography-_custom-4-medium-font-size-v20-0-1:12px;
+  --magritte-typography-_custom-4-medium-letter-spacing-v20-0-1:0.015em;
+  --magritte-typography-_custom-4-medium-text-indent-v20-0-1:0px;
+  --magritte-typography-_custom-4-medium-text-transform-v20-0-1:none;
+  --magritte-typography-_custom-4-medium-text-decoration-v20-0-1:none;
+  --magritte-typography-_custom-5-medium-font-family-v20-0-1:"hh sans";
+  --magritte-typography-_custom-5-medium-font-weight-v20-0-1:500;
+  --magritte-typography-_custom-5-medium-line-height-v20-0-1:12px;
+  --magritte-typography-_custom-5-medium-font-size-v20-0-1:10px;
+  --magritte-typography-_custom-5-medium-letter-spacing-v20-0-1:0.015em;
+  --magritte-typography-_custom-5-medium-text-indent-v20-0-1:0px;
+  --magritte-typography-_custom-5-medium-text-transform-v20-0-1:none;
+  --magritte-typography-_custom-5-medium-text-decoration-v20-0-1:none;
+  --magritte-typography-_custom-1-italic-font-family-v20-0-1:"hh sans";
+  --magritte-typography-_custom-1-italic-font-weight-v20-0-1:400;
+  --magritte-typography-_custom-1-italic-line-height-v20-0-1:28px;
+  --magritte-typography-_custom-1-italic-font-size-v20-0-1:18px;
+  --magritte-typography-_custom-1-italic-letter-spacing-v20-0-1:0em;
+  --magritte-typography-_custom-1-italic-text-indent-v20-0-1:0px;
+  --magritte-typography-_custom-1-italic-text-transform-v20-0-1:none;
+  --magritte-typography-_custom-1-italic-text-decoration-v20-0-1:none;
+  --magritte-typography-_custom-2-italic-font-family-v20-0-1:"hh sans";
+  --magritte-typography-_custom-2-italic-font-weight-v20-0-1:400;
+  --magritte-typography-_custom-2-italic-line-height-v20-0-1:26px;
+  --magritte-typography-_custom-2-italic-font-size-v20-0-1:16px;
+  --magritte-typography-_custom-2-italic-letter-spacing-v20-0-1:0.005em;
+  --magritte-typography-_custom-2-italic-text-indent-v20-0-1:0px;
+  --magritte-typography-_custom-2-italic-text-transform-v20-0-1:none;
+  --magritte-typography-_custom-2-italic-text-decoration-v20-0-1:none;
+  --magritte-typography-_custom-3-italic-font-family-v20-0-1:"hh sans";
+  --magritte-typography-_custom-3-italic-font-weight-v20-0-1:400;
+  --magritte-typography-_custom-3-italic-line-height-v20-0-1:24px;
+  --magritte-typography-_custom-3-italic-font-size-v20-0-1:14px;
+  --magritte-typography-_custom-3-italic-letter-spacing-v20-0-1:0.01em;
+  --magritte-typography-_custom-3-italic-text-indent-v20-0-1:0px;
+  --magritte-typography-_custom-3-italic-text-transform-v20-0-1:none;
+  --magritte-typography-_custom-3-italic-text-decoration-v20-0-1:none;
+  --magritte-typography-_custom-4-italic-font-family-v20-0-1:"hh sans";
+  --magritte-typography-_custom-4-italic-font-weight-v20-0-1:400;
+  --magritte-typography-_custom-4-italic-line-height-v20-0-1:22px;
+  --magritte-typography-_custom-4-italic-font-size-v20-0-1:12px;
+  --magritte-typography-_custom-4-italic-letter-spacing-v20-0-1:0.015em;
+  --magritte-typography-_custom-4-italic-text-indent-v20-0-1:0px;
+  --magritte-typography-_custom-4-italic-text-transform-v20-0-1:none;
+  --magritte-typography-_custom-4-italic-text-decoration-v20-0-1:none;
+  --magritte-typography-_custom-5-italic-font-family-v20-0-1:"hh sans";
+  --magritte-typography-_custom-5-italic-font-weight-v20-0-1:400;
+  --magritte-typography-_custom-5-italic-line-height-v20-0-1:12px;
+  --magritte-typography-_custom-5-italic-font-size-v20-0-1:10px;
+  --magritte-typography-_custom-5-italic-letter-spacing-v20-0-1:0.015em;
+  --magritte-typography-_custom-5-italic-text-indent-v20-0-1:0px;
+  --magritte-typography-_custom-5-italic-text-transform-v20-0-1:none;
+  --magritte-typography-_custom-5-italic-text-decoration-v20-0-1:none;
+}
+.magritte-with-inter{
+  --magritte-typography-title-1-semibold-font-family-v20-0-1:"Inter";
+  --magritte-typography-title-1-semibold-font-weight-v20-0-1:600;
+  --magritte-typography-title-1-semibold-line-height-v20-0-1:60px;
+  --magritte-typography-title-1-semibold-font-size-v20-0-1:48px;
+  --magritte-typography-title-1-semibold-letter-spacing-v20-0-1:-0.02em;
+  --magritte-typography-title-1-semibold-text-indent-v20-0-1:0px;
+  --magritte-typography-title-1-semibold-text-transform-v20-0-1:none;
+  --magritte-typography-title-1-semibold-text-decoration-v20-0-1:none;
+  --magritte-typography-title-2-semibold-font-family-v20-0-1:"Inter";
+  --magritte-typography-title-2-semibold-font-weight-v20-0-1:600;
+  --magritte-typography-title-2-semibold-line-height-v20-0-1:48px;
+  --magritte-typography-title-2-semibold-font-size-v20-0-1:36px;
+  --magritte-typography-title-2-semibold-letter-spacing-v20-0-1:-0.0175em;
+  --magritte-typography-title-2-semibold-text-indent-v20-0-1:0px;
+  --magritte-typography-title-2-semibold-text-transform-v20-0-1:none;
+  --magritte-typography-title-2-semibold-text-decoration-v20-0-1:none;
+  --magritte-typography-title-3-semibold-font-family-v20-0-1:"Inter";
+  --magritte-typography-title-3-semibold-font-weight-v20-0-1:600;
+  --magritte-typography-title-3-semibold-line-height-v20-0-1:40px;
+  --magritte-typography-title-3-semibold-font-size-v20-0-1:28px;
+  --magritte-typography-title-3-semibold-letter-spacing-v20-0-1:-0.0125em;
+  --magritte-typography-title-3-semibold-text-indent-v20-0-1:0px;
+  --magritte-typography-title-3-semibold-text-transform-v20-0-1:none;
+  --magritte-typography-title-3-semibold-text-decoration-v20-0-1:none;
+  --magritte-typography-title-4-semibold-font-family-v20-0-1:"Inter";
+  --magritte-typography-title-4-semibold-font-weight-v20-0-1:600;
+  --magritte-typography-title-4-semibold-line-height-v20-0-1:32px;
+  --magritte-typography-title-4-semibold-font-size-v20-0-1:22px;
+  --magritte-typography-title-4-semibold-letter-spacing-v20-0-1:-0.0075em;
+  --magritte-typography-title-4-semibold-text-indent-v20-0-1:0px;
+  --magritte-typography-title-4-semibold-text-transform-v20-0-1:none;
+  --magritte-typography-title-4-semibold-text-decoration-v20-0-1:none;
+  --magritte-typography-title-5-semibold-font-family-v20-0-1:"Inter";
+  --magritte-typography-title-5-semibold-font-weight-v20-0-1:600;
+  --magritte-typography-title-5-semibold-line-height-v20-0-1:26px;
+  --magritte-typography-title-5-semibold-font-size-v20-0-1:18px;
+  --magritte-typography-title-5-semibold-letter-spacing-v20-0-1:0em;
+  --magritte-typography-title-5-semibold-text-indent-v20-0-1:0px;
+  --magritte-typography-title-5-semibold-text-transform-v20-0-1:none;
+  --magritte-typography-title-5-semibold-text-decoration-v20-0-1:none;
+  --magritte-typography-subtitle-1-semibold-font-family-v20-0-1:"Inter";
+  --magritte-typography-subtitle-1-semibold-font-weight-v20-0-1:600;
+  --magritte-typography-subtitle-1-semibold-line-height-v20-0-1:22px;
+  --magritte-typography-subtitle-1-semibold-font-size-v20-0-1:16px;
+  --magritte-typography-subtitle-1-semibold-letter-spacing-v20-0-1:0em;
+  --magritte-typography-subtitle-1-semibold-text-indent-v20-0-1:0px;
+  --magritte-typography-subtitle-1-semibold-text-transform-v20-0-1:none;
+  --magritte-typography-subtitle-1-semibold-text-decoration-v20-0-1:none;
+  --magritte-typography-subtitle-2-semibold-font-family-v20-0-1:"Inter";
+  --magritte-typography-subtitle-2-semibold-font-weight-v20-0-1:600;
+  --magritte-typography-subtitle-2-semibold-line-height-v20-0-1:20px;
+  --magritte-typography-subtitle-2-semibold-font-size-v20-0-1:14px;
+  --magritte-typography-subtitle-2-semibold-letter-spacing-v20-0-1:0.005em;
+  --magritte-typography-subtitle-2-semibold-text-indent-v20-0-1:0px;
+  --magritte-typography-subtitle-2-semibold-text-transform-v20-0-1:none;
+  --magritte-typography-subtitle-2-semibold-text-decoration-v20-0-1:none;
+  --magritte-typography-subtitle-3-semibold-font-family-v20-0-1:"Inter";
+  --magritte-typography-subtitle-3-semibold-font-weight-v20-0-1:600;
+  --magritte-typography-subtitle-3-semibold-line-height-v20-0-1:18px;
+  --magritte-typography-subtitle-3-semibold-font-size-v20-0-1:12px;
+  --magritte-typography-subtitle-3-semibold-letter-spacing-v20-0-1:0.01em;
+  --magritte-typography-subtitle-3-semibold-text-indent-v20-0-1:0px;
+  --magritte-typography-subtitle-3-semibold-text-transform-v20-0-1:none;
+  --magritte-typography-subtitle-3-semibold-text-decoration-v20-0-1:none;
+  --magritte-typography-subtitle-4-semibold-font-family-v20-0-1:"Inter";
+  --magritte-typography-subtitle-4-semibold-font-weight-v20-0-1:600;
+  --magritte-typography-subtitle-4-semibold-line-height-v20-0-1:16px;
+  --magritte-typography-subtitle-4-semibold-font-size-v20-0-1:10px;
+  --magritte-typography-subtitle-4-semibold-letter-spacing-v20-0-1:0.015em;
+  --magritte-typography-subtitle-4-semibold-text-indent-v20-0-1:0px;
+  --magritte-typography-subtitle-4-semibold-text-transform-v20-0-1:none;
+  --magritte-typography-subtitle-4-semibold-text-decoration-v20-0-1:none;
+  --magritte-typography-label-1-regular-font-family-v20-0-1:"Inter";
+  --magritte-typography-label-1-regular-font-weight-v20-0-1:400;
+  --magritte-typography-label-1-regular-line-height-v20-0-1:26px;
+  --magritte-typography-label-1-regular-font-size-v20-0-1:18px;
+  --magritte-typography-label-1-regular-letter-spacing-v20-0-1:-0.005em;
+  --magritte-typography-label-1-regular-text-indent-v20-0-1:0px;
+  --magritte-typography-label-1-regular-text-transform-v20-0-1:none;
+  --magritte-typography-label-1-regular-text-decoration-v20-0-1:none;
+  --magritte-typography-label-2-regular-font-family-v20-0-1:"Inter";
+  --magritte-typography-label-2-regular-font-weight-v20-0-1:400;
+  --magritte-typography-label-2-regular-line-height-v20-0-1:22px;
+  --magritte-typography-label-2-regular-font-size-v20-0-1:16px;
+  --magritte-typography-label-2-regular-letter-spacing-v20-0-1:0em;
+  --magritte-typography-label-2-regular-text-indent-v20-0-1:0px;
+  --magritte-typography-label-2-regular-text-transform-v20-0-1:none;
+  --magritte-typography-label-2-regular-text-decoration-v20-0-1:none;
+  --magritte-typography-label-3-regular-font-family-v20-0-1:"Inter";
+  --magritte-typography-label-3-regular-font-weight-v20-0-1:400;
+  --magritte-typography-label-3-regular-line-height-v20-0-1:20px;
+  --magritte-typography-label-3-regular-font-size-v20-0-1:14px;
+  --magritte-typography-label-3-regular-letter-spacing-v20-0-1:0.005em;
+  --magritte-typography-label-3-regular-text-indent-v20-0-1:0px;
+  --magritte-typography-label-3-regular-text-transform-v20-0-1:none;
+  --magritte-typography-label-3-regular-text-decoration-v20-0-1:none;
+  --magritte-typography-label-4-regular-font-family-v20-0-1:"Inter";
+  --magritte-typography-label-4-regular-font-weight-v20-0-1:400;
+  --magritte-typography-label-4-regular-line-height-v20-0-1:18px;
+  --magritte-typography-label-4-regular-font-size-v20-0-1:12px;
+  --magritte-typography-label-4-regular-letter-spacing-v20-0-1:0.01em;
+  --magritte-typography-label-4-regular-text-indent-v20-0-1:0px;
+  --magritte-typography-label-4-regular-text-transform-v20-0-1:none;
+  --magritte-typography-label-4-regular-text-decoration-v20-0-1:none;
+  --magritte-typography-label-5-regular-font-family-v20-0-1:"Inter";
+  --magritte-typography-label-5-regular-font-weight-v20-0-1:400;
+  --magritte-typography-label-5-regular-line-height-v20-0-1:14px;
+  --magritte-typography-label-5-regular-font-size-v20-0-1:10px;
+  --magritte-typography-label-5-regular-letter-spacing-v20-0-1:0.02em;
+  --magritte-typography-label-5-regular-text-indent-v20-0-1:0px;
+  --magritte-typography-label-5-regular-text-transform-v20-0-1:none;
+  --magritte-typography-label-5-regular-text-decoration-v20-0-1:none;
+  --magritte-typography-paragraph-1-regular-font-family-v20-0-1:"Inter";
+  --magritte-typography-paragraph-1-regular-font-weight-v20-0-1:400;
+  --magritte-typography-paragraph-1-regular-line-height-v20-0-1:28px;
+  --magritte-typography-paragraph-1-regular-font-size-v20-0-1:18px;
+  --magritte-typography-paragraph-1-regular-letter-spacing-v20-0-1:0em;
+  --magritte-typography-paragraph-1-regular-text-indent-v20-0-1:0px;
+  --magritte-typography-paragraph-1-regular-text-transform-v20-0-1:none;
+  --magritte-typography-paragraph-1-regular-text-decoration-v20-0-1:none;
+  --magritte-typography-paragraph-2-regular-font-family-v20-0-1:"Inter";
+  --magritte-typography-paragraph-2-regular-font-weight-v20-0-1:400;
+  --magritte-typography-paragraph-2-regular-line-height-v20-0-1:26px;
+  --magritte-typography-paragraph-2-regular-font-size-v20-0-1:16px;
+  --magritte-typography-paragraph-2-regular-letter-spacing-v20-0-1:0.005em;
+  --magritte-typography-paragraph-2-regular-text-indent-v20-0-1:0px;
+  --magritte-typography-paragraph-2-regular-text-transform-v20-0-1:none;
+  --magritte-typography-paragraph-2-regular-text-decoration-v20-0-1:none;
+  --magritte-typography-paragraph-3-regular-font-family-v20-0-1:"Inter";
+  --magritte-typography-paragraph-3-regular-font-weight-v20-0-1:400;
+  --magritte-typography-paragraph-3-regular-line-height-v20-0-1:24px;
+  --magritte-typography-paragraph-3-regular-font-size-v20-0-1:14px;
+  --magritte-typography-paragraph-3-regular-letter-spacing-v20-0-1:0.01em;
+  --magritte-typography-paragraph-3-regular-text-indent-v20-0-1:0px;
+  --magritte-typography-paragraph-3-regular-text-transform-v20-0-1:none;
+  --magritte-typography-paragraph-3-regular-text-decoration-v20-0-1:none;
+  --magritte-typography-paragraph-4-regular-font-family-v20-0-1:"Inter";
+  --magritte-typography-paragraph-4-regular-font-weight-v20-0-1:400;
+  --magritte-typography-paragraph-4-regular-line-height-v20-0-1:22px;
+  --magritte-typography-paragraph-4-regular-font-size-v20-0-1:12px;
+  --magritte-typography-paragraph-4-regular-letter-spacing-v20-0-1:0.015em;
+  --magritte-typography-paragraph-4-regular-text-indent-v20-0-1:0px;
+  --magritte-typography-paragraph-4-regular-text-transform-v20-0-1:none;
+  --magritte-typography-paragraph-4-regular-text-decoration-v20-0-1:none;
+  --magritte-typography-_custom-1-semibold-font-family-v20-0-1:"Inter";
+  --magritte-typography-_custom-1-semibold-font-weight-v20-0-1:600;
+  --magritte-typography-_custom-1-semibold-line-height-v20-0-1:28px;
+  --magritte-typography-_custom-1-semibold-font-size-v20-0-1:18px;
+  --magritte-typography-_custom-1-semibold-letter-spacing-v20-0-1:0em;
+  --magritte-typography-_custom-1-semibold-text-indent-v20-0-1:0px;
+  --magritte-typography-_custom-1-semibold-text-transform-v20-0-1:none;
+  --magritte-typography-_custom-1-semibold-text-decoration-v20-0-1:none;
+  --magritte-typography-_custom-2-semibold-font-family-v20-0-1:"Inter";
+  --magritte-typography-_custom-2-semibold-font-weight-v20-0-1:600;
+  --magritte-typography-_custom-2-semibold-line-height-v20-0-1:26px;
+  --magritte-typography-_custom-2-semibold-font-size-v20-0-1:16px;
+  --magritte-typography-_custom-2-semibold-letter-spacing-v20-0-1:0.005em;
+  --magritte-typography-_custom-2-semibold-text-indent-v20-0-1:0px;
+  --magritte-typography-_custom-2-semibold-text-transform-v20-0-1:none;
+  --magritte-typography-_custom-2-semibold-text-decoration-v20-0-1:none;
+  --magritte-typography-_custom-3-semibold-font-family-v20-0-1:"Inter";
+  --magritte-typography-_custom-3-semibold-font-weight-v20-0-1:600;
+  --magritte-typography-_custom-3-semibold-line-height-v20-0-1:24px;
+  --magritte-typography-_custom-3-semibold-font-size-v20-0-1:14px;
+  --magritte-typography-_custom-3-semibold-letter-spacing-v20-0-1:0.01em;
+  --magritte-typography-_custom-3-semibold-text-indent-v20-0-1:0px;
+  --magritte-typography-_custom-3-semibold-text-transform-v20-0-1:none;
+  --magritte-typography-_custom-3-semibold-text-decoration-v20-0-1:none;
+  --magritte-typography-_custom-4-semibold-font-family-v20-0-1:"Inter";
+  --magritte-typography-_custom-4-semibold-font-weight-v20-0-1:400;
+  --magritte-typography-_custom-4-semibold-line-height-v20-0-1:22px;
+  --magritte-typography-_custom-4-semibold-font-size-v20-0-1:12px;
+  --magritte-typography-_custom-4-semibold-letter-spacing-v20-0-1:0.015em;
+  --magritte-typography-_custom-4-semibold-text-indent-v20-0-1:0px;
+  --magritte-typography-_custom-4-semibold-text-transform-v20-0-1:none;
+  --magritte-typography-_custom-4-semibold-text-decoration-v20-0-1:none;
+  --magritte-typography-_custom-5-semibold-font-family-v20-0-1:"Inter";
+  --magritte-typography-_custom-5-semibold-font-weight-v20-0-1:400;
+  --magritte-typography-_custom-5-semibold-line-height-v20-0-1:12px;
+  --magritte-typography-_custom-5-semibold-font-size-v20-0-1:10px;
+  --magritte-typography-_custom-5-semibold-letter-spacing-v20-0-1:0.015em;
+  --magritte-typography-_custom-5-semibold-text-indent-v20-0-1:0px;
+  --magritte-typography-_custom-5-semibold-text-transform-v20-0-1:none;
+  --magritte-typography-_custom-5-semibold-text-decoration-v20-0-1:none;
+  --magritte-typography-_custom-1-medium-font-family-v20-0-1:"Inter";
+  --magritte-typography-_custom-1-medium-font-weight-v20-0-1:undefined;
+  --magritte-typography-_custom-1-medium-line-height-v20-0-1:28px;
+  --magritte-typography-_custom-1-medium-font-size-v20-0-1:18px;
+  --magritte-typography-_custom-1-medium-letter-spacing-v20-0-1:0em;
+  --magritte-typography-_custom-1-medium-text-indent-v20-0-1:0px;
+  --magritte-typography-_custom-1-medium-text-transform-v20-0-1:none;
+  --magritte-typography-_custom-1-medium-text-decoration-v20-0-1:none;
+  --magritte-typography-_custom-2-medium-font-family-v20-0-1:"Inter";
+  --magritte-typography-_custom-2-medium-font-weight-v20-0-1:undefined;
+  --magritte-typography-_custom-2-medium-line-height-v20-0-1:26px;
+  --magritte-typography-_custom-2-medium-font-size-v20-0-1:16px;
+  --magritte-typography-_custom-2-medium-letter-spacing-v20-0-1:0.005em;
+  --magritte-typography-_custom-2-medium-text-indent-v20-0-1:0px;
+  --magritte-typography-_custom-2-medium-text-transform-v20-0-1:none;
+  --magritte-typography-_custom-2-medium-text-decoration-v20-0-1:none;
+  --magritte-typography-_custom-3-medium-font-family-v20-0-1:"Inter";
+  --magritte-typography-_custom-3-medium-font-weight-v20-0-1:undefined;
+  --magritte-typography-_custom-3-medium-line-height-v20-0-1:24px;
+  --magritte-typography-_custom-3-medium-font-size-v20-0-1:14px;
+  --magritte-typography-_custom-3-medium-letter-spacing-v20-0-1:0.01em;
+  --magritte-typography-_custom-3-medium-text-indent-v20-0-1:0px;
+  --magritte-typography-_custom-3-medium-text-transform-v20-0-1:none;
+  --magritte-typography-_custom-3-medium-text-decoration-v20-0-1:none;
+  --magritte-typography-_custom-4-medium-font-family-v20-0-1:"Inter";
+  --magritte-typography-_custom-4-medium-font-weight-v20-0-1:undefined;
+  --magritte-typography-_custom-4-medium-line-height-v20-0-1:22px;
+  --magritte-typography-_custom-4-medium-font-size-v20-0-1:12px;
+  --magritte-typography-_custom-4-medium-letter-spacing-v20-0-1:0.015em;
+  --magritte-typography-_custom-4-medium-text-indent-v20-0-1:0px;
+  --magritte-typography-_custom-4-medium-text-transform-v20-0-1:none;
+  --magritte-typography-_custom-4-medium-text-decoration-v20-0-1:none;
+  --magritte-typography-_custom-5-medium-font-family-v20-0-1:"Inter";
+  --magritte-typography-_custom-5-medium-font-weight-v20-0-1:undefined;
+  --magritte-typography-_custom-5-medium-line-height-v20-0-1:12px;
+  --magritte-typography-_custom-5-medium-font-size-v20-0-1:10px;
+  --magritte-typography-_custom-5-medium-letter-spacing-v20-0-1:0.015em;
+  --magritte-typography-_custom-5-medium-text-indent-v20-0-1:0px;
+  --magritte-typography-_custom-5-medium-text-transform-v20-0-1:none;
+  --magritte-typography-_custom-5-medium-text-decoration-v20-0-1:none;
+  --magritte-typography-_custom-1-italic-font-family-v20-0-1:"Inter";
+  --magritte-typography-_custom-1-italic-font-weight-v20-0-1:200;
+  --magritte-typography-_custom-1-italic-line-height-v20-0-1:28px;
+  --magritte-typography-_custom-1-italic-font-size-v20-0-1:18px;
+  --magritte-typography-_custom-1-italic-letter-spacing-v20-0-1:0em;
+  --magritte-typography-_custom-1-italic-text-indent-v20-0-1:0px;
+  --magritte-typography-_custom-1-italic-text-transform-v20-0-1:none;
+  --magritte-typography-_custom-1-italic-text-decoration-v20-0-1:none;
+  --magritte-typography-_custom-2-italic-font-family-v20-0-1:"Inter";
+  --magritte-typography-_custom-2-italic-font-weight-v20-0-1:200;
+  --magritte-typography-_custom-2-italic-line-height-v20-0-1:26px;
+  --magritte-typography-_custom-2-italic-font-size-v20-0-1:16px;
+  --magritte-typography-_custom-2-italic-letter-spacing-v20-0-1:0.005em;
+  --magritte-typography-_custom-2-italic-text-indent-v20-0-1:0px;
+  --magritte-typography-_custom-2-italic-text-transform-v20-0-1:none;
+  --magritte-typography-_custom-2-italic-text-decoration-v20-0-1:none;
+  --magritte-typography-_custom-3-italic-font-family-v20-0-1:"Inter";
+  --magritte-typography-_custom-3-italic-font-weight-v20-0-1:200;
+  --magritte-typography-_custom-3-italic-line-height-v20-0-1:24px;
+  --magritte-typography-_custom-3-italic-font-size-v20-0-1:14px;
+  --magritte-typography-_custom-3-italic-letter-spacing-v20-0-1:0.01em;
+  --magritte-typography-_custom-3-italic-text-indent-v20-0-1:0px;
+  --magritte-typography-_custom-3-italic-text-transform-v20-0-1:none;
+  --magritte-typography-_custom-3-italic-text-decoration-v20-0-1:none;
+  --magritte-typography-_custom-4-italic-font-family-v20-0-1:"Inter";
+  --magritte-typography-_custom-4-italic-font-weight-v20-0-1:200;
+  --magritte-typography-_custom-4-italic-line-height-v20-0-1:22px;
+  --magritte-typography-_custom-4-italic-font-size-v20-0-1:12px;
+  --magritte-typography-_custom-4-italic-letter-spacing-v20-0-1:0.015em;
+  --magritte-typography-_custom-4-italic-text-indent-v20-0-1:0px;
+  --magritte-typography-_custom-4-italic-text-transform-v20-0-1:none;
+  --magritte-typography-_custom-4-italic-text-decoration-v20-0-1:none;
+  --magritte-typography-_custom-5-italic-font-family-v20-0-1:"Inter";
+  --magritte-typography-_custom-5-italic-font-weight-v20-0-1:200;
+  --magritte-typography-_custom-5-italic-line-height-v20-0-1:12px;
+  --magritte-typography-_custom-5-italic-font-size-v20-0-1:10px;
+  --magritte-typography-_custom-5-italic-letter-spacing-v20-0-1:0.015em;
+  --magritte-typography-_custom-5-italic-text-indent-v20-0-1:0px;
+  --magritte-typography-_custom-5-italic-text-transform-v20-0-1:none;
+  --magritte-typography-_custom-5-italic-text-decoration-v20-0-1:none;
+}
+.magritte-file-name-body___PTTMc_2-0-0{
+  display:flex;
+  width:100%;
+  overflow:hidden;
+  font-family:var(--magritte-typography-label-2-regular-font-family-v20-0-1);
+  font-weight:var(--magritte-typography-label-2-regular-font-weight-v20-0-1);
+  line-height:var(--magritte-typography-label-2-regular-line-height-v20-0-1);
+  font-size:var(--magritte-typography-label-2-regular-font-size-v20-0-1);
+  letter-spacing:var(--magritte-typography-label-2-regular-letter-spacing-v20-0-1);
+  text-indent:var(--magritte-typography-label-2-regular-text-indent-v20-0-1);
+  text-transform:var(--magritte-typography-label-2-regular-text-transform-v20-0-1);
+  text-decoration:var(--magritte-typography-label-2-regular-text-decoration-v20-0-1);
+}
+.magritte-file-name-body_medium___sfmmq_2-0-0{
+  justify-content:center;
+}
+.magritte-file-name___ZSL2g_2-0-0{
+  overflow:hidden;
+  text-overflow:ellipsis;
+}
+
 :root{
   --magritte-color-background-primary-v20-0-1:#ffffff;
   --magritte-color-stroke-neutral-v20-0-1:#DCE3EB;
@@ -270,7 +823,10 @@
   --magritte-typography-_custom-5-italic-text-indent-v20-0-1:0px;
   --magritte-typography-_custom-5-italic-text-transform-v20-0-1:none;
   --magritte-typography-_custom-5-italic-text-decoration-v20-0-1:none;
+  --magritte-static-space-100-v20-0-1:4px;
   --magritte-static-space-300-v20-0-1:12px;
+  --magritte-static-space-400-v20-0-1:16px;
+  --magritte-static-space-500-v20-0-1:20px;
   --magritte-static-space-600-v20-0-1:24px;
   --magritte-static-border-radius-600-v20-0-1:24px;
 }
@@ -547,42 +1103,56 @@
   --magritte-typography-_custom-5-italic-text-transform-v20-0-1:none;
   --magritte-typography-_custom-5-italic-text-decoration-v20-0-1:none;
 }
-.magritte-root___FV1tC_1-1-0{
+.magritte-root___FV1tC_2-0-0{
   position:relative;
   display:flex;
-  justify-content:center;
-  padding:var(--magritte-static-space-600-v20-0-1);
   overflow:hidden;
   border-radius:var(--magritte-static-border-radius-600-v20-0-1);
   background-color:var(--magritte-color-background-primary-v20-0-1);
 }
-.magritte-root___FV1tC_1-1-0:hover{
+.magritte-root___FV1tC_2-0-0:hover{
   cursor:pointer;
 }
-.magritte-root___FV1tC_1-1-0:hover .magritte-background___RfZ0U_1-1-0{
+.magritte-root___FV1tC_2-0-0:hover .magritte-background___RfZ0U_2-0-0{
   border-color:var(--magritte-color-stroke-accent-v20-0-1);
 }
-.magritte-root___FV1tC_1-1-0.magritte-drag-active___dihBL_1-1-0 .magritte-background___RfZ0U_1-1-0{
+.magritte-root___FV1tC_2-0-0.magritte-drag-active___dihBL_2-0-0 .magritte-background___RfZ0U_2-0-0{
   border-color:var(--magritte-color-stroke-accent-v20-0-1);
 }
-.magritte-root___FV1tC_1-1-0.focus-visible{
+.magritte-root___FV1tC_2-0-0.focus-visible{
   outline:var(--magritte-color-stroke-state-focused-accessible-v20-0-1) solid 4px;
 }
-.magritte-root___FV1tC_1-1-0.focus-visible .magritte-background___RfZ0U_1-1-0{
+.magritte-root___FV1tC_2-0-0.focus-visible .magritte-background___RfZ0U_2-0-0{
   border-color:var(--magritte-color-stroke-accent-v20-0-1);
 }
-.magritte-root___FV1tC_1-1-0.magritte-load___MghDA_1-1-0 .magritte-background___RfZ0U_1-1-0,
-.magritte-root___FV1tC_1-1-0.magritte-loading___9E3p-_1-1-0 .magritte-background___RfZ0U_1-1-0{
+.magritte-root___FV1tC_2-0-0.magritte-load___MghDA_2-0-0 .magritte-background___RfZ0U_2-0-0,
+.magritte-root___FV1tC_2-0-0.magritte-loading___9E3p-_2-0-0 .magritte-background___RfZ0U_2-0-0{
   border-style:solid;
   border-width:7px;
 }
-.magritte-root___FV1tC_1-1-0.magritte-invalid___Rt10-_1-1-0.focus-visible{
+.magritte-root___FV1tC_2-0-0.magritte-invalid___Rt10-_2-0-0.focus-visible{
   outline:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v20-0-1) solid 4px;
 }
-.magritte-root___FV1tC_1-1-0.magritte-invalid___Rt10-_1-1-0 .magritte-background___RfZ0U_1-1-0{
+.magritte-root___FV1tC_2-0-0.magritte-invalid___Rt10-_2-0-0 .magritte-background___RfZ0U_2-0-0{
   border-color:var(--magritte-color-stroke-neutral-v20-0-1);
 }
-.magritte-background___RfZ0U_1-1-0{
+.magritte-root_medium___67WJa_2-0-0{
+  justify-content:center;
+  padding:var(--magritte-static-space-600-v20-0-1);
+}
+.magritte-root_medium___67WJa_2-0-0 .magritte-body___O7ROl_2-0-0{
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+}
+.magritte-root_small___dkUYq_2-0-0{
+  padding:var(--magritte-static-space-400-v20-0-1) var(--magritte-static-space-500-v20-0-1) var(--magritte-static-space-400-v20-0-1) var(--magritte-static-space-400-v20-0-1);
+}
+.magritte-root_small___dkUYq_2-0-0 .magritte-body___O7ROl_2-0-0{
+  width:100%;
+  gap:var(--magritte-static-space-400-v20-0-1);
+}
+.magritte-background___RfZ0U_2-0-0{
   position:absolute;
   border-width:8px;
   border-style:dashed;
@@ -595,17 +1165,15 @@
   background-position:center;
   background-size:100%;
 }
-.magritte-body___O7ROl_1-1-0{
+.magritte-body___O7ROl_2-0-0{
   display:flex;
-  flex-direction:column;
-  align-items:center;
-  justify-content:center;
+  width:100%;
 }
-.magritte-loader___XYpWg_1-1-0{
+.magritte-loader___XYpWg_2-0-0{
   position:relative;
   display:flex;
 }
-.magritte-cancel___tQ-yX_1-1-0{
+.magritte-cancel___tQ-yX_2-0-0{
   position:absolute;
   top:0;
   left:0;
@@ -615,10 +1183,31 @@
   align-items:center;
   justify-content:center;
 }
-.magritte-image-controls___vLf94_1-1-0{
+.magritte-image-controls___vLf94_2-0-0{
   display:flex;
   position:absolute;
   right:var(--magritte-static-space-300-v20-0-1);
   bottom:var(--magritte-static-space-300-v20-0-1);
   gap:var(--magritte-static-space-300-v20-0-1);
 }
+.magritte-small-controls___Qn9TP_2-0-0{
+  display:flex;
+  align-items:center;
+  margin-left:auto;
+}
+.magritte-small-file-info-container___MIN5r_2-0-0{
+  flex-grow:1;
+  width:50px;
+}
+.magritte-small-file-info___cMns-_2-0-0{
+  display:flex;
+  gap:var(--magritte-static-space-100-v20-0-1);
+  font-family:var(--magritte-typography-label-4-regular-font-family-v20-0-1);
+  font-weight:var(--magritte-typography-label-4-regular-font-weight-v20-0-1);
+  line-height:var(--magritte-typography-label-4-regular-line-height-v20-0-1);
+  font-size:var(--magritte-typography-label-4-regular-font-size-v20-0-1);
+  letter-spacing:var(--magritte-typography-label-4-regular-letter-spacing-v20-0-1);
+  text-indent:var(--magritte-typography-label-4-regular-text-indent-v20-0-1);
+  text-transform:var(--magritte-typography-label-4-regular-text-transform-v20-0-1);
+  text-decoration:var(--magritte-typography-label-4-regular-text-decoration-v20-0-1);
+}

package/index.js

@@ -4,8 +4,12 @@ import 'react/jsx-runtime';
 import 'react';
 import 'react-dropzone';
 import 'classnames';
+import '@hh.ru/magritte-ui-action';
+import '@hh.ru/magritte-ui-avatar';
 import '@hh.ru/magritte-ui-icon/icon';
 import '@hh.ru/magritte-ui-loader';
 import '@hh.ru/magritte-ui-spacing';
 import '@hh.ru/magritte-ui-typography';
+import './FileName.js';
+import './utils.js';
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-upload",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -27,6 +27,8 @@
     "react": ">=18.2.0"
   },
   "dependencies": {
+    "@hh.ru/magritte-ui-action": "4.4.17",
+    "@hh.ru/magritte-ui-avatar": "5.0.16",
     "@hh.ru/magritte-ui-button": "5.2.9",
     "@hh.ru/magritte-ui-icon": "7.9.6",
     "@hh.ru/magritte-ui-loader": "1.3.11",
@@ -34,5 +36,5 @@
     "@hh.ru/magritte-ui-typography": "3.0.22",
     "react-dropzone": "14.3.5"
   },
-  "gitHead": "4c85532c7420dc718812510bb3635032b806eac0"
+  "gitHead": "e95d78ab1b3938b0db634e8e13c914877b35ccc5"
 }

package/types.d.ts

@@ -10,6 +10,7 @@ export interface LoadedFile {
 }
 export type ButtonElement = ReactElement<ComponentProps<typeof Button>>;
 export type UploadType = 'application' | 'image' | 'video' | 'mixed';
+export type UploadSize = 'medium' | 'small';
 export type LoadedFileWithFileSize = LoadedFile & {
     fileSizeMB: string;
 };
@@ -20,14 +21,16 @@ interface UploadTrls {
 type DropzoneOptionsHepler = Omit<DropzoneOptions, 'onDropAccepted' | 'onDropRejected'>;
 export interface UploadProps extends DropzoneOptionsHepler {
     files: LoadedFile[];
-    selectFileButton: ButtonElement;
-    deleteFileButton: ButtonElement;
-    replaceImageButton: ButtonElement;
-    deleteImageButton: ButtonElement;
     trls: UploadTrls;
+    size?: UploadSize;
+    multiple?: boolean;
+    selectFileButton?: ButtonElement;
+    deleteFileButton?: ButtonElement;
+    replaceImageButton?: ButtonElement;
     onFileDelete: (loadedFile: LoadedFile, fileIndex: number) => void;
     onDropAccepted: (files: LoadedFile[], event: DropEvent) => void;
     onDropRejected?: (files: LoadedFile[], event: DropEvent) => void;
     renderFileInfo?: (loadedFile: LoadedFileWithFileSize) => ReactNode;
+    'aria-label'?: string;
 }
 export {};

package/utils.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from 'react';
+import { LoadedFile, UploadType } from '@hh.ru/magritte-ui-upload/types';
+export declare const getUploadIcon: (uploadType: UploadType, loadedFile: LoadedFile | undefined, isSmall: boolean) => ReactElement;

package/utils.js

@@ -0,0 +1,29 @@
+import './index.css';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { ImageSize24, ImageSize32, VideocameraOutlinedSize24, VideocameraOutlinedSize32, DocumentOutlinedSize24, DocumentOutlinedSize32, DocumentArrowUpOutlinedSize24, DocumentArrowUpOutlinedSize32 } from '@hh.ru/magritte-ui-icon/icon';
+
+// иконка (тип и цвет) может меняться в зависимости от типа, размера и состояния загрузки
+const getUploadIcon = (uploadType, loadedFile, isSmall) => {
+    if (loadedFile) {
+        const { error, loading } = loadedFile;
+        if ((loading || error) && !isSmall) {
+            return jsx(Fragment, {});
+        }
+        if (uploadType === 'image') {
+            return isSmall ? jsx(ImageSize24, { initial: "accent" }) : jsx(ImageSize32, { initial: "secondary" });
+        }
+        if (uploadType === 'video') {
+            return isSmall ? (jsx(VideocameraOutlinedSize24, { initial: "accent" })) : (jsx(VideocameraOutlinedSize32, { initial: "secondary" }));
+        }
+        // mixed, application
+        return isSmall ? jsx(DocumentOutlinedSize24, { initial: "accent" }) : jsx(DocumentOutlinedSize32, { initial: "secondary" });
+    }
+    if (uploadType === 'video' || uploadType === 'image') {
+        return isSmall ? jsx(ImageSize24, { initial: "secondary" }) : jsx(ImageSize32, { initial: "secondary" });
+    }
+    // mixed, application
+    return isSmall ? (jsx(DocumentArrowUpOutlinedSize24, { initial: "secondary" })) : (jsx(DocumentArrowUpOutlinedSize32, { initial: "secondary" }));
+};
+
+export { getUploadIcon };
+//# sourceMappingURL=utils.js.map

package/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../src/utils.tsx"],"sourcesContent":["import { ReactElement } from 'react';\n\nimport {\n    DocumentArrowUpOutlinedSize32,\n    DocumentOutlinedSize32,\n    VideocameraOutlinedSize32,\n    ImageSize32,\n    DocumentArrowUpOutlinedSize24,\n    DocumentOutlinedSize24,\n    VideocameraOutlinedSize24,\n    ImageSize24,\n} from '@hh.ru/magritte-ui-icon/icon';\nimport { LoadedFile, UploadType } from '@hh.ru/magritte-ui-upload/types';\n\n// иконка (тип и цвет) может меняться в зависимости от типа, размера и состояния загрузки\nexport const getUploadIcon = (\n    uploadType: UploadType,\n    loadedFile: LoadedFile | undefined,\n    isSmall: boolean\n): ReactElement => {\n    if (loadedFile) {\n        const { error, loading } = loadedFile;\n        if ((loading || error) && !isSmall) {\n            return <></>;\n        }\n        if (uploadType === 'image') {\n            return isSmall ? <ImageSize24 initial=\"accent\" /> : <ImageSize32 initial=\"secondary\" />;\n        }\n        if (uploadType === 'video') {\n            return isSmall ? (\n                <VideocameraOutlinedSize24 initial=\"accent\" />\n            ) : (\n                <VideocameraOutlinedSize32 initial=\"secondary\" />\n            );\n        }\n        // mixed, application\n        return isSmall ? <DocumentOutlinedSize24 initial=\"accent\" /> : <DocumentOutlinedSize32 initial=\"secondary\" />;\n    }\n    if (uploadType === 'video' || uploadType === 'image') {\n        return isSmall ? <ImageSize24 initial=\"secondary\" /> : <ImageSize32 initial=\"secondary\" />;\n    }\n    // mixed, application\n    return isSmall ? (\n        <DocumentArrowUpOutlinedSize24 initial=\"secondary\" />\n    ) : (\n        <DocumentArrowUpOutlinedSize32 initial=\"secondary\" />\n    );\n};\n"],"names":["_jsx"],"mappings":";;;AAcA;AACa,MAAA,aAAa,GAAG,CACzB,UAAsB,EACtB,UAAkC,EAClC,OAAgB,KACF;IACd,IAAI,UAAU,EAAE;AACZ,QAAA,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC;QACtC,IAAI,CAAC,OAAO,IAAI,KAAK,KAAK,CAAC,OAAO,EAAE;AAChC,YAAA,OAAOA,iBAAK,CAAC;SAChB;AACD,QAAA,IAAI,UAAU,KAAK,OAAO,EAAE;YACxB,OAAO,OAAO,GAAGA,IAAC,WAAW,EAAA,EAAC,OAAO,EAAC,QAAQ,GAAG,GAAGA,GAAC,CAAA,WAAW,IAAC,OAAO,EAAC,WAAW,EAAA,CAAG,CAAC;SAC3F;AACD,QAAA,IAAI,UAAU,KAAK,OAAO,EAAE;YACxB,OAAO,OAAO,IACVA,IAAC,yBAAyB,EAAA,EAAC,OAAO,EAAC,QAAQ,EAAA,CAAG,KAE9CA,GAAC,CAAA,yBAAyB,EAAC,EAAA,OAAO,EAAC,WAAW,EAAG,CAAA,CACpD,CAAC;SACL;;QAED,OAAO,OAAO,GAAGA,IAAC,sBAAsB,EAAA,EAAC,OAAO,EAAC,QAAQ,GAAG,GAAGA,GAAC,CAAA,sBAAsB,IAAC,OAAO,EAAC,WAAW,EAAA,CAAG,CAAC;KACjH;IACD,IAAI,UAAU,KAAK,OAAO,IAAI,UAAU,KAAK,OAAO,EAAE;QAClD,OAAO,OAAO,GAAGA,IAAC,WAAW,EAAA,EAAC,OAAO,EAAC,WAAW,GAAG,GAAGA,GAAC,CAAA,WAAW,IAAC,OAAO,EAAC,WAAW,EAAA,CAAG,CAAC;KAC9F;;IAED,OAAO,OAAO,IACVA,IAAC,6BAA6B,EAAA,EAAC,OAAO,EAAC,WAAW,EAAA,CAAG,KAErDA,GAAC,CAAA,6BAA6B,EAAC,EAAA,OAAO,EAAC,WAAW,EAAG,CAAA,CACxD,CAAC;AACN;;;;"}