@hh.ru/magritte-ui-upload 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/Upload.d.ts +4 -0
  2. package/Upload.js +138 -0
  3. package/Upload.js.map +1 -0
  4. package/index.css +624 -0
  5. package/index.d.ts +2 -0
  6. package/index.js +11 -0
  7. package/index.js.map +1 -0
  8. package/package.json +38 -0
  9. package/types.d.ts +33 -0
  10. package/types.js +3 -0
  11. package/types.js.map +1 -0
package/Upload.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { ReactElement } from 'react';
2
+ import { UploadProps } from '@hh.ru/magritte-ui-upload/types';
3
+ declare const Upload: ({ files, trls, accept, selectFileButton: _selectFileButton, deleteFileButton: _deleteFileButton, replaceImageButton: _replaceImageButton, deleteImageButton: _deleteImageButton, renderFileInfo, onDropAccepted: onDropAcceptedExternal, onDropRejected: onDropRejectedExternal, onFileDelete: onFileDeleteExternal, ...dropzoneProps }: UploadProps) => ReactElement;
4
+ export { Upload };
package/Upload.js ADDED
@@ -0,0 +1,138 @@
1
+ import './index.css';
2
+ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
3
+ import { useRef, useMemo, useEffect, useCallback, cloneElement } from 'react';
4
+ import { useDropzone } from 'react-dropzone';
5
+ import classnames from 'classnames';
6
+ import { CrossOutlinedSize24, ExclamationTriangleOutlinedSize32, DocumentOutlinedSize32, VideocameraOutlinedSize32, ImageSize32, DocumentArrowUpOutlinedSize32 } from '@hh.ru/magritte-ui-icon/icon';
7
+ import { Loader } from '@hh.ru/magritte-ui-loader';
8
+ import { VSpacing } from '@hh.ru/magritte-ui-spacing';
9
+ import { Text } from '@hh.ru/magritte-ui-typography';
10
+
11
+ 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"};
12
+
13
+ const order = 1024 * 1024;
14
+ const bytes2mb = (value) => {
15
+ return (value / order).toFixed(2);
16
+ };
17
+ // парсим accept в нормальный формат
18
+ const getAvaliableFileTypes = (accept) => {
19
+ const avaliableTypes = Object.keys(accept);
20
+ if (avaliableTypes.length === 0) {
21
+ throw new Error(`Magritte component Upload: accept can't be empty`);
22
+ }
23
+ if (avaliableTypes.length > 1) {
24
+ return 'mixed';
25
+ }
26
+ const avaliableType = avaliableTypes[0];
27
+ return avaliableType.split('/')[0];
28
+ };
29
+ // иконка может меняться в зависимости от типа и состояния загрузки
30
+ const getUploadIcon = (uploadType, loadedFile) => {
31
+ if (loadedFile) {
32
+ const { error, loading } = loadedFile;
33
+ if (loading) {
34
+ return null;
35
+ }
36
+ if (error) {
37
+ return jsx(ExclamationTriangleOutlinedSize32, { initial: "negative" });
38
+ }
39
+ // иначе надо обработать type (причем некоторые меняются)
40
+ if (uploadType === 'mixed' || uploadType === 'application') {
41
+ return jsx(DocumentOutlinedSize32, { initial: "secondary" });
42
+ }
43
+ if (uploadType === 'video') {
44
+ return jsx(VideocameraOutlinedSize32, { initial: "secondary" });
45
+ }
46
+ return jsx(ImageSize32, { initial: "secondary" });
47
+ }
48
+ // отличается от условий выше (для video и application)
49
+ if (uploadType === 'mixed' || uploadType === 'application') {
50
+ return jsx(DocumentArrowUpOutlinedSize32, { initial: "secondary" });
51
+ }
52
+ // video and image
53
+ return jsx(ImageSize32, { initial: "secondary" });
54
+ };
55
+ const RenderFileInfoDefault = (loadedFile) => {
56
+ return loadedFile.fileSizeMB;
57
+ };
58
+ const DEFAULT_ACCEPT = {
59
+ 'image/*': ['.png', '.jpeg', '.jpg'],
60
+ };
61
+ const Upload = ({ files, trls, accept = DEFAULT_ACCEPT, selectFileButton: _selectFileButton, deleteFileButton: _deleteFileButton, replaceImageButton: _replaceImageButton, deleteImageButton: _deleteImageButton, renderFileInfo = RenderFileInfoDefault, onDropAccepted: onDropAcceptedExternal, onDropRejected: onDropRejectedExternal, onFileDelete: onFileDeleteExternal, ...dropzoneProps }) => {
62
+ const bodyUploadRef = useRef(null);
63
+ const uploadType = getAvaliableFileTypes(accept);
64
+ const loadedFile = files.length > 0 ? files[0] : undefined;
65
+ const isLoad = Boolean(loadedFile);
66
+ const isLoading = Boolean(loadedFile?.loading);
67
+ const isInvalid = Boolean(loadedFile?.error);
68
+ const backgroundUploadPreview = useMemo(() => {
69
+ if (!loadedFile || uploadType !== 'image') {
70
+ return 'none';
71
+ }
72
+ if (loadedFile.loading) {
73
+ return 'none';
74
+ }
75
+ return `url('${URL.createObjectURL(loadedFile.data)}')`;
76
+ }, [loadedFile, uploadType]);
77
+ useEffect(() => {
78
+ if (!bodyUploadRef.current) {
79
+ return;
80
+ }
81
+ // фиксируем ширину, так как после выбора контент поменяется
82
+ bodyUploadRef.current.style.minHeight = `${bodyUploadRef.current.offsetHeight}px`;
83
+ }, []);
84
+ const onDropAccepted = useCallback((acceptedFiles, event) => {
85
+ const acceptedLoadFiles = acceptedFiles.map((file) => ({ data: file, loading: true, loadPercentage: 0 }));
86
+ onDropAcceptedExternal(acceptedLoadFiles, event);
87
+ }, [onDropAcceptedExternal]);
88
+ const onDropRejected = useCallback((fileRejections, event) => {
89
+ const rejectionLoadFiles = fileRejections.map((fileRejection) => ({
90
+ data: fileRejection.file,
91
+ loading: false,
92
+ error: fileRejection.errors?.[0].code || '',
93
+ }));
94
+ onDropRejectedExternal?.(rejectionLoadFiles, event);
95
+ }, [onDropRejectedExternal]);
96
+ const onFileDelete = useCallback((event) => {
97
+ loadedFile && onFileDeleteExternal(loadedFile, 0);
98
+ event.stopPropagation();
99
+ }, [loadedFile, onFileDeleteExternal]);
100
+ const selectFileButton = cloneElement(_selectFileButton, {
101
+ key: 'selectFileButton',
102
+ 'data-qa': 'magritte-select-file-button',
103
+ });
104
+ const deleteFileButton = cloneElement(_deleteFileButton, {
105
+ key: 'deleteFileButton',
106
+ 'data-qa': 'magritte-delete-file-button',
107
+ onClick: (event) => {
108
+ onFileDelete(event);
109
+ },
110
+ });
111
+ const replaceImageButton = cloneElement(_replaceImageButton, {
112
+ key: 'replaceImageButton',
113
+ 'data-qa': 'magritte-select-replace-image-button',
114
+ });
115
+ const deleteImageButton = cloneElement(_deleteImageButton, {
116
+ key: 'deleteImageButton',
117
+ 'data-qa': 'magritte-delete-image-button',
118
+ onClick: (event) => {
119
+ onFileDelete(event);
120
+ },
121
+ });
122
+ const { getRootProps, getInputProps, isDragActive } = useDropzone({
123
+ ...dropzoneProps,
124
+ accept,
125
+ onDropAccepted,
126
+ onDropRejected,
127
+ multiple: false,
128
+ });
129
+ 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) => {
130
+ onFileDelete(event);
131
+ } }) })] })), 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({
132
+ ...loadedFile,
133
+ fileSizeMB: bytes2mb(loadedFile.data.size),
134
+ }) }), 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] }))] })] }));
135
+ };
136
+
137
+ export { Upload };
138
+ //# sourceMappingURL=Upload.js.map
package/Upload.js.map ADDED
@@ -0,0 +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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"}
package/index.css ADDED
@@ -0,0 +1,624 @@
1
+ :root{
2
+ --magritte-color-background-primary-v20-0-1:#ffffff;
3
+ --magritte-color-stroke-neutral-v20-0-1:#DCE3EB;
4
+ --magritte-color-stroke-accent-v20-0-1:#0070ff;
5
+ --magritte-color-stroke-state-focused-accessible-v20-0-1:#0070ff7a;
6
+ --magritte-color-component-input-stroke-state-negative-focused-accessible-v20-0-1:#ff4d3a7a;
7
+ }
8
+ :root{
9
+ --magritte-typography-title-1-semibold-font-family-v20-0-1:"hh sans";
10
+ --magritte-typography-title-1-semibold-font-weight-v20-0-1:500;
11
+ --magritte-typography-title-1-semibold-line-height-v20-0-1:60px;
12
+ --magritte-typography-title-1-semibold-font-size-v20-0-1:48px;
13
+ --magritte-typography-title-1-semibold-letter-spacing-v20-0-1:-0.02em;
14
+ --magritte-typography-title-1-semibold-text-indent-v20-0-1:0px;
15
+ --magritte-typography-title-1-semibold-text-transform-v20-0-1:none;
16
+ --magritte-typography-title-1-semibold-text-decoration-v20-0-1:none;
17
+ --magritte-typography-title-2-semibold-font-family-v20-0-1:"hh sans";
18
+ --magritte-typography-title-2-semibold-font-weight-v20-0-1:500;
19
+ --magritte-typography-title-2-semibold-line-height-v20-0-1:48px;
20
+ --magritte-typography-title-2-semibold-font-size-v20-0-1:36px;
21
+ --magritte-typography-title-2-semibold-letter-spacing-v20-0-1:-0.0175em;
22
+ --magritte-typography-title-2-semibold-text-indent-v20-0-1:0px;
23
+ --magritte-typography-title-2-semibold-text-transform-v20-0-1:none;
24
+ --magritte-typography-title-2-semibold-text-decoration-v20-0-1:none;
25
+ --magritte-typography-title-3-semibold-font-family-v20-0-1:"hh sans";
26
+ --magritte-typography-title-3-semibold-font-weight-v20-0-1:500;
27
+ --magritte-typography-title-3-semibold-line-height-v20-0-1:40px;
28
+ --magritte-typography-title-3-semibold-font-size-v20-0-1:28px;
29
+ --magritte-typography-title-3-semibold-letter-spacing-v20-0-1:-0.0125em;
30
+ --magritte-typography-title-3-semibold-text-indent-v20-0-1:0px;
31
+ --magritte-typography-title-3-semibold-text-transform-v20-0-1:none;
32
+ --magritte-typography-title-3-semibold-text-decoration-v20-0-1:none;
33
+ --magritte-typography-title-4-semibold-font-family-v20-0-1:"hh sans";
34
+ --magritte-typography-title-4-semibold-font-weight-v20-0-1:500;
35
+ --magritte-typography-title-4-semibold-line-height-v20-0-1:32px;
36
+ --magritte-typography-title-4-semibold-font-size-v20-0-1:22px;
37
+ --magritte-typography-title-4-semibold-letter-spacing-v20-0-1:-0.0075em;
38
+ --magritte-typography-title-4-semibold-text-indent-v20-0-1:0px;
39
+ --magritte-typography-title-4-semibold-text-transform-v20-0-1:none;
40
+ --magritte-typography-title-4-semibold-text-decoration-v20-0-1:none;
41
+ --magritte-typography-title-5-semibold-font-family-v20-0-1:"hh sans";
42
+ --magritte-typography-title-5-semibold-font-weight-v20-0-1:500;
43
+ --magritte-typography-title-5-semibold-line-height-v20-0-1:26px;
44
+ --magritte-typography-title-5-semibold-font-size-v20-0-1:18px;
45
+ --magritte-typography-title-5-semibold-letter-spacing-v20-0-1:0em;
46
+ --magritte-typography-title-5-semibold-text-indent-v20-0-1:0px;
47
+ --magritte-typography-title-5-semibold-text-transform-v20-0-1:none;
48
+ --magritte-typography-title-5-semibold-text-decoration-v20-0-1:none;
49
+ --magritte-typography-subtitle-1-semibold-font-family-v20-0-1:"hh sans";
50
+ --magritte-typography-subtitle-1-semibold-font-weight-v20-0-1:500;
51
+ --magritte-typography-subtitle-1-semibold-line-height-v20-0-1:22px;
52
+ --magritte-typography-subtitle-1-semibold-font-size-v20-0-1:16px;
53
+ --magritte-typography-subtitle-1-semibold-letter-spacing-v20-0-1:0em;
54
+ --magritte-typography-subtitle-1-semibold-text-indent-v20-0-1:0px;
55
+ --magritte-typography-subtitle-1-semibold-text-transform-v20-0-1:none;
56
+ --magritte-typography-subtitle-1-semibold-text-decoration-v20-0-1:none;
57
+ --magritte-typography-subtitle-2-semibold-font-family-v20-0-1:"hh sans";
58
+ --magritte-typography-subtitle-2-semibold-font-weight-v20-0-1:500;
59
+ --magritte-typography-subtitle-2-semibold-line-height-v20-0-1:20px;
60
+ --magritte-typography-subtitle-2-semibold-font-size-v20-0-1:14px;
61
+ --magritte-typography-subtitle-2-semibold-letter-spacing-v20-0-1:0.005em;
62
+ --magritte-typography-subtitle-2-semibold-text-indent-v20-0-1:0px;
63
+ --magritte-typography-subtitle-2-semibold-text-transform-v20-0-1:none;
64
+ --magritte-typography-subtitle-2-semibold-text-decoration-v20-0-1:none;
65
+ --magritte-typography-subtitle-3-semibold-font-family-v20-0-1:"hh sans";
66
+ --magritte-typography-subtitle-3-semibold-font-weight-v20-0-1:500;
67
+ --magritte-typography-subtitle-3-semibold-line-height-v20-0-1:18px;
68
+ --magritte-typography-subtitle-3-semibold-font-size-v20-0-1:12px;
69
+ --magritte-typography-subtitle-3-semibold-letter-spacing-v20-0-1:0.01em;
70
+ --magritte-typography-subtitle-3-semibold-text-indent-v20-0-1:0px;
71
+ --magritte-typography-subtitle-3-semibold-text-transform-v20-0-1:none;
72
+ --magritte-typography-subtitle-3-semibold-text-decoration-v20-0-1:none;
73
+ --magritte-typography-subtitle-4-semibold-font-family-v20-0-1:"hh sans";
74
+ --magritte-typography-subtitle-4-semibold-font-weight-v20-0-1:500;
75
+ --magritte-typography-subtitle-4-semibold-line-height-v20-0-1:16px;
76
+ --magritte-typography-subtitle-4-semibold-font-size-v20-0-1:10px;
77
+ --magritte-typography-subtitle-4-semibold-letter-spacing-v20-0-1:0.015em;
78
+ --magritte-typography-subtitle-4-semibold-text-indent-v20-0-1:0px;
79
+ --magritte-typography-subtitle-4-semibold-text-transform-v20-0-1:none;
80
+ --magritte-typography-subtitle-4-semibold-text-decoration-v20-0-1:none;
81
+ --magritte-typography-label-1-regular-font-family-v20-0-1:"hh sans";
82
+ --magritte-typography-label-1-regular-font-weight-v20-0-1:400;
83
+ --magritte-typography-label-1-regular-line-height-v20-0-1:26px;
84
+ --magritte-typography-label-1-regular-font-size-v20-0-1:18px;
85
+ --magritte-typography-label-1-regular-letter-spacing-v20-0-1:-0.005em;
86
+ --magritte-typography-label-1-regular-text-indent-v20-0-1:0px;
87
+ --magritte-typography-label-1-regular-text-transform-v20-0-1:none;
88
+ --magritte-typography-label-1-regular-text-decoration-v20-0-1:none;
89
+ --magritte-typography-label-2-regular-font-family-v20-0-1:"hh sans";
90
+ --magritte-typography-label-2-regular-font-weight-v20-0-1:400;
91
+ --magritte-typography-label-2-regular-line-height-v20-0-1:22px;
92
+ --magritte-typography-label-2-regular-font-size-v20-0-1:16px;
93
+ --magritte-typography-label-2-regular-letter-spacing-v20-0-1:0em;
94
+ --magritte-typography-label-2-regular-text-indent-v20-0-1:0px;
95
+ --magritte-typography-label-2-regular-text-transform-v20-0-1:none;
96
+ --magritte-typography-label-2-regular-text-decoration-v20-0-1:none;
97
+ --magritte-typography-label-3-regular-font-family-v20-0-1:"hh sans";
98
+ --magritte-typography-label-3-regular-font-weight-v20-0-1:400;
99
+ --magritte-typography-label-3-regular-line-height-v20-0-1:20px;
100
+ --magritte-typography-label-3-regular-font-size-v20-0-1:14px;
101
+ --magritte-typography-label-3-regular-letter-spacing-v20-0-1:0.005em;
102
+ --magritte-typography-label-3-regular-text-indent-v20-0-1:0px;
103
+ --magritte-typography-label-3-regular-text-transform-v20-0-1:none;
104
+ --magritte-typography-label-3-regular-text-decoration-v20-0-1:none;
105
+ --magritte-typography-label-4-regular-font-family-v20-0-1:"hh sans";
106
+ --magritte-typography-label-4-regular-font-weight-v20-0-1:400;
107
+ --magritte-typography-label-4-regular-line-height-v20-0-1:18px;
108
+ --magritte-typography-label-4-regular-font-size-v20-0-1:12px;
109
+ --magritte-typography-label-4-regular-letter-spacing-v20-0-1:0.01em;
110
+ --magritte-typography-label-4-regular-text-indent-v20-0-1:0px;
111
+ --magritte-typography-label-4-regular-text-transform-v20-0-1:none;
112
+ --magritte-typography-label-4-regular-text-decoration-v20-0-1:none;
113
+ --magritte-typography-label-5-regular-font-family-v20-0-1:"hh sans";
114
+ --magritte-typography-label-5-regular-font-weight-v20-0-1:400;
115
+ --magritte-typography-label-5-regular-line-height-v20-0-1:14px;
116
+ --magritte-typography-label-5-regular-font-size-v20-0-1:10px;
117
+ --magritte-typography-label-5-regular-letter-spacing-v20-0-1:0.02em;
118
+ --magritte-typography-label-5-regular-text-indent-v20-0-1:0px;
119
+ --magritte-typography-label-5-regular-text-transform-v20-0-1:none;
120
+ --magritte-typography-label-5-regular-text-decoration-v20-0-1:none;
121
+ --magritte-typography-paragraph-1-regular-font-family-v20-0-1:"hh sans";
122
+ --magritte-typography-paragraph-1-regular-font-weight-v20-0-1:400;
123
+ --magritte-typography-paragraph-1-regular-line-height-v20-0-1:28px;
124
+ --magritte-typography-paragraph-1-regular-font-size-v20-0-1:18px;
125
+ --magritte-typography-paragraph-1-regular-letter-spacing-v20-0-1:0em;
126
+ --magritte-typography-paragraph-1-regular-text-indent-v20-0-1:0px;
127
+ --magritte-typography-paragraph-1-regular-text-transform-v20-0-1:none;
128
+ --magritte-typography-paragraph-1-regular-text-decoration-v20-0-1:none;
129
+ --magritte-typography-paragraph-2-regular-font-family-v20-0-1:"hh sans";
130
+ --magritte-typography-paragraph-2-regular-font-weight-v20-0-1:400;
131
+ --magritte-typography-paragraph-2-regular-line-height-v20-0-1:26px;
132
+ --magritte-typography-paragraph-2-regular-font-size-v20-0-1:16px;
133
+ --magritte-typography-paragraph-2-regular-letter-spacing-v20-0-1:0.005em;
134
+ --magritte-typography-paragraph-2-regular-text-indent-v20-0-1:0px;
135
+ --magritte-typography-paragraph-2-regular-text-transform-v20-0-1:none;
136
+ --magritte-typography-paragraph-2-regular-text-decoration-v20-0-1:none;
137
+ --magritte-typography-paragraph-3-regular-font-family-v20-0-1:"hh sans";
138
+ --magritte-typography-paragraph-3-regular-font-weight-v20-0-1:400;
139
+ --magritte-typography-paragraph-3-regular-line-height-v20-0-1:24px;
140
+ --magritte-typography-paragraph-3-regular-font-size-v20-0-1:14px;
141
+ --magritte-typography-paragraph-3-regular-letter-spacing-v20-0-1:0.01em;
142
+ --magritte-typography-paragraph-3-regular-text-indent-v20-0-1:0px;
143
+ --magritte-typography-paragraph-3-regular-text-transform-v20-0-1:none;
144
+ --magritte-typography-paragraph-3-regular-text-decoration-v20-0-1:none;
145
+ --magritte-typography-paragraph-4-regular-font-family-v20-0-1:"hh sans";
146
+ --magritte-typography-paragraph-4-regular-font-weight-v20-0-1:400;
147
+ --magritte-typography-paragraph-4-regular-line-height-v20-0-1:22px;
148
+ --magritte-typography-paragraph-4-regular-font-size-v20-0-1:12px;
149
+ --magritte-typography-paragraph-4-regular-letter-spacing-v20-0-1:0.015em;
150
+ --magritte-typography-paragraph-4-regular-text-indent-v20-0-1:0px;
151
+ --magritte-typography-paragraph-4-regular-text-transform-v20-0-1:none;
152
+ --magritte-typography-paragraph-4-regular-text-decoration-v20-0-1:none;
153
+ --magritte-typography-_custom-1-semibold-font-family-v20-0-1:"hh sans";
154
+ --magritte-typography-_custom-1-semibold-font-weight-v20-0-1:500;
155
+ --magritte-typography-_custom-1-semibold-line-height-v20-0-1:28px;
156
+ --magritte-typography-_custom-1-semibold-font-size-v20-0-1:18px;
157
+ --magritte-typography-_custom-1-semibold-letter-spacing-v20-0-1:0em;
158
+ --magritte-typography-_custom-1-semibold-text-indent-v20-0-1:0px;
159
+ --magritte-typography-_custom-1-semibold-text-transform-v20-0-1:none;
160
+ --magritte-typography-_custom-1-semibold-text-decoration-v20-0-1:none;
161
+ --magritte-typography-_custom-2-semibold-font-family-v20-0-1:"hh sans";
162
+ --magritte-typography-_custom-2-semibold-font-weight-v20-0-1:500;
163
+ --magritte-typography-_custom-2-semibold-line-height-v20-0-1:26px;
164
+ --magritte-typography-_custom-2-semibold-font-size-v20-0-1:16px;
165
+ --magritte-typography-_custom-2-semibold-letter-spacing-v20-0-1:0.005em;
166
+ --magritte-typography-_custom-2-semibold-text-indent-v20-0-1:0px;
167
+ --magritte-typography-_custom-2-semibold-text-transform-v20-0-1:none;
168
+ --magritte-typography-_custom-2-semibold-text-decoration-v20-0-1:none;
169
+ --magritte-typography-_custom-3-semibold-font-family-v20-0-1:"hh sans";
170
+ --magritte-typography-_custom-3-semibold-font-weight-v20-0-1:500;
171
+ --magritte-typography-_custom-3-semibold-line-height-v20-0-1:24px;
172
+ --magritte-typography-_custom-3-semibold-font-size-v20-0-1:14px;
173
+ --magritte-typography-_custom-3-semibold-letter-spacing-v20-0-1:0.01em;
174
+ --magritte-typography-_custom-3-semibold-text-indent-v20-0-1:0px;
175
+ --magritte-typography-_custom-3-semibold-text-transform-v20-0-1:none;
176
+ --magritte-typography-_custom-3-semibold-text-decoration-v20-0-1:none;
177
+ --magritte-typography-_custom-4-semibold-font-family-v20-0-1:"hh sans";
178
+ --magritte-typography-_custom-4-semibold-font-weight-v20-0-1:400;
179
+ --magritte-typography-_custom-4-semibold-line-height-v20-0-1:22px;
180
+ --magritte-typography-_custom-4-semibold-font-size-v20-0-1:12px;
181
+ --magritte-typography-_custom-4-semibold-letter-spacing-v20-0-1:0.015em;
182
+ --magritte-typography-_custom-4-semibold-text-indent-v20-0-1:0px;
183
+ --magritte-typography-_custom-4-semibold-text-transform-v20-0-1:none;
184
+ --magritte-typography-_custom-4-semibold-text-decoration-v20-0-1:none;
185
+ --magritte-typography-_custom-5-semibold-font-family-v20-0-1:"hh sans";
186
+ --magritte-typography-_custom-5-semibold-font-weight-v20-0-1:400;
187
+ --magritte-typography-_custom-5-semibold-line-height-v20-0-1:12px;
188
+ --magritte-typography-_custom-5-semibold-font-size-v20-0-1:10px;
189
+ --magritte-typography-_custom-5-semibold-letter-spacing-v20-0-1:0.015em;
190
+ --magritte-typography-_custom-5-semibold-text-indent-v20-0-1:0px;
191
+ --magritte-typography-_custom-5-semibold-text-transform-v20-0-1:none;
192
+ --magritte-typography-_custom-5-semibold-text-decoration-v20-0-1:none;
193
+ --magritte-typography-_custom-1-medium-font-family-v20-0-1:"hh sans";
194
+ --magritte-typography-_custom-1-medium-font-weight-v20-0-1:500;
195
+ --magritte-typography-_custom-1-medium-line-height-v20-0-1:28px;
196
+ --magritte-typography-_custom-1-medium-font-size-v20-0-1:18px;
197
+ --magritte-typography-_custom-1-medium-letter-spacing-v20-0-1:0em;
198
+ --magritte-typography-_custom-1-medium-text-indent-v20-0-1:0px;
199
+ --magritte-typography-_custom-1-medium-text-transform-v20-0-1:none;
200
+ --magritte-typography-_custom-1-medium-text-decoration-v20-0-1:none;
201
+ --magritte-typography-_custom-2-medium-font-family-v20-0-1:"hh sans";
202
+ --magritte-typography-_custom-2-medium-font-weight-v20-0-1:500;
203
+ --magritte-typography-_custom-2-medium-line-height-v20-0-1:26px;
204
+ --magritte-typography-_custom-2-medium-font-size-v20-0-1:16px;
205
+ --magritte-typography-_custom-2-medium-letter-spacing-v20-0-1:0.005em;
206
+ --magritte-typography-_custom-2-medium-text-indent-v20-0-1:0px;
207
+ --magritte-typography-_custom-2-medium-text-transform-v20-0-1:none;
208
+ --magritte-typography-_custom-2-medium-text-decoration-v20-0-1:none;
209
+ --magritte-typography-_custom-3-medium-font-family-v20-0-1:"hh sans";
210
+ --magritte-typography-_custom-3-medium-font-weight-v20-0-1:500;
211
+ --magritte-typography-_custom-3-medium-line-height-v20-0-1:24px;
212
+ --magritte-typography-_custom-3-medium-font-size-v20-0-1:14px;
213
+ --magritte-typography-_custom-3-medium-letter-spacing-v20-0-1:0.01em;
214
+ --magritte-typography-_custom-3-medium-text-indent-v20-0-1:0px;
215
+ --magritte-typography-_custom-3-medium-text-transform-v20-0-1:none;
216
+ --magritte-typography-_custom-3-medium-text-decoration-v20-0-1:none;
217
+ --magritte-typography-_custom-4-medium-font-family-v20-0-1:"hh sans";
218
+ --magritte-typography-_custom-4-medium-font-weight-v20-0-1:500;
219
+ --magritte-typography-_custom-4-medium-line-height-v20-0-1:22px;
220
+ --magritte-typography-_custom-4-medium-font-size-v20-0-1:12px;
221
+ --magritte-typography-_custom-4-medium-letter-spacing-v20-0-1:0.015em;
222
+ --magritte-typography-_custom-4-medium-text-indent-v20-0-1:0px;
223
+ --magritte-typography-_custom-4-medium-text-transform-v20-0-1:none;
224
+ --magritte-typography-_custom-4-medium-text-decoration-v20-0-1:none;
225
+ --magritte-typography-_custom-5-medium-font-family-v20-0-1:"hh sans";
226
+ --magritte-typography-_custom-5-medium-font-weight-v20-0-1:500;
227
+ --magritte-typography-_custom-5-medium-line-height-v20-0-1:12px;
228
+ --magritte-typography-_custom-5-medium-font-size-v20-0-1:10px;
229
+ --magritte-typography-_custom-5-medium-letter-spacing-v20-0-1:0.015em;
230
+ --magritte-typography-_custom-5-medium-text-indent-v20-0-1:0px;
231
+ --magritte-typography-_custom-5-medium-text-transform-v20-0-1:none;
232
+ --magritte-typography-_custom-5-medium-text-decoration-v20-0-1:none;
233
+ --magritte-typography-_custom-1-italic-font-family-v20-0-1:"hh sans";
234
+ --magritte-typography-_custom-1-italic-font-weight-v20-0-1:400;
235
+ --magritte-typography-_custom-1-italic-line-height-v20-0-1:28px;
236
+ --magritte-typography-_custom-1-italic-font-size-v20-0-1:18px;
237
+ --magritte-typography-_custom-1-italic-letter-spacing-v20-0-1:0em;
238
+ --magritte-typography-_custom-1-italic-text-indent-v20-0-1:0px;
239
+ --magritte-typography-_custom-1-italic-text-transform-v20-0-1:none;
240
+ --magritte-typography-_custom-1-italic-text-decoration-v20-0-1:none;
241
+ --magritte-typography-_custom-2-italic-font-family-v20-0-1:"hh sans";
242
+ --magritte-typography-_custom-2-italic-font-weight-v20-0-1:400;
243
+ --magritte-typography-_custom-2-italic-line-height-v20-0-1:26px;
244
+ --magritte-typography-_custom-2-italic-font-size-v20-0-1:16px;
245
+ --magritte-typography-_custom-2-italic-letter-spacing-v20-0-1:0.005em;
246
+ --magritte-typography-_custom-2-italic-text-indent-v20-0-1:0px;
247
+ --magritte-typography-_custom-2-italic-text-transform-v20-0-1:none;
248
+ --magritte-typography-_custom-2-italic-text-decoration-v20-0-1:none;
249
+ --magritte-typography-_custom-3-italic-font-family-v20-0-1:"hh sans";
250
+ --magritte-typography-_custom-3-italic-font-weight-v20-0-1:400;
251
+ --magritte-typography-_custom-3-italic-line-height-v20-0-1:24px;
252
+ --magritte-typography-_custom-3-italic-font-size-v20-0-1:14px;
253
+ --magritte-typography-_custom-3-italic-letter-spacing-v20-0-1:0.01em;
254
+ --magritte-typography-_custom-3-italic-text-indent-v20-0-1:0px;
255
+ --magritte-typography-_custom-3-italic-text-transform-v20-0-1:none;
256
+ --magritte-typography-_custom-3-italic-text-decoration-v20-0-1:none;
257
+ --magritte-typography-_custom-4-italic-font-family-v20-0-1:"hh sans";
258
+ --magritte-typography-_custom-4-italic-font-weight-v20-0-1:400;
259
+ --magritte-typography-_custom-4-italic-line-height-v20-0-1:22px;
260
+ --magritte-typography-_custom-4-italic-font-size-v20-0-1:12px;
261
+ --magritte-typography-_custom-4-italic-letter-spacing-v20-0-1:0.015em;
262
+ --magritte-typography-_custom-4-italic-text-indent-v20-0-1:0px;
263
+ --magritte-typography-_custom-4-italic-text-transform-v20-0-1:none;
264
+ --magritte-typography-_custom-4-italic-text-decoration-v20-0-1:none;
265
+ --magritte-typography-_custom-5-italic-font-family-v20-0-1:"hh sans";
266
+ --magritte-typography-_custom-5-italic-font-weight-v20-0-1:400;
267
+ --magritte-typography-_custom-5-italic-line-height-v20-0-1:12px;
268
+ --magritte-typography-_custom-5-italic-font-size-v20-0-1:10px;
269
+ --magritte-typography-_custom-5-italic-letter-spacing-v20-0-1:0.015em;
270
+ --magritte-typography-_custom-5-italic-text-indent-v20-0-1:0px;
271
+ --magritte-typography-_custom-5-italic-text-transform-v20-0-1:none;
272
+ --magritte-typography-_custom-5-italic-text-decoration-v20-0-1:none;
273
+ --magritte-static-space-300-v20-0-1:12px;
274
+ --magritte-static-space-600-v20-0-1:24px;
275
+ --magritte-static-border-radius-600-v20-0-1:24px;
276
+ }
277
+ .magritte-night-theme{
278
+ --magritte-color-background-primary-v20-0-1:#1B1B1B;
279
+ --magritte-color-stroke-neutral-v20-0-1:#303030;
280
+ --magritte-color-stroke-accent-v20-0-1:#2b7fff;
281
+ --magritte-color-stroke-state-focused-accessible-v20-0-1:#0070ff7a;
282
+ --magritte-color-component-input-stroke-state-negative-focused-accessible-v20-0-1:#ff4d3a7a;
283
+ }
284
+ .magritte-with-inter{
285
+ --magritte-typography-title-1-semibold-font-family-v20-0-1:"Inter";
286
+ --magritte-typography-title-1-semibold-font-weight-v20-0-1:600;
287
+ --magritte-typography-title-1-semibold-line-height-v20-0-1:60px;
288
+ --magritte-typography-title-1-semibold-font-size-v20-0-1:48px;
289
+ --magritte-typography-title-1-semibold-letter-spacing-v20-0-1:-0.02em;
290
+ --magritte-typography-title-1-semibold-text-indent-v20-0-1:0px;
291
+ --magritte-typography-title-1-semibold-text-transform-v20-0-1:none;
292
+ --magritte-typography-title-1-semibold-text-decoration-v20-0-1:none;
293
+ --magritte-typography-title-2-semibold-font-family-v20-0-1:"Inter";
294
+ --magritte-typography-title-2-semibold-font-weight-v20-0-1:600;
295
+ --magritte-typography-title-2-semibold-line-height-v20-0-1:48px;
296
+ --magritte-typography-title-2-semibold-font-size-v20-0-1:36px;
297
+ --magritte-typography-title-2-semibold-letter-spacing-v20-0-1:-0.0175em;
298
+ --magritte-typography-title-2-semibold-text-indent-v20-0-1:0px;
299
+ --magritte-typography-title-2-semibold-text-transform-v20-0-1:none;
300
+ --magritte-typography-title-2-semibold-text-decoration-v20-0-1:none;
301
+ --magritte-typography-title-3-semibold-font-family-v20-0-1:"Inter";
302
+ --magritte-typography-title-3-semibold-font-weight-v20-0-1:600;
303
+ --magritte-typography-title-3-semibold-line-height-v20-0-1:40px;
304
+ --magritte-typography-title-3-semibold-font-size-v20-0-1:28px;
305
+ --magritte-typography-title-3-semibold-letter-spacing-v20-0-1:-0.0125em;
306
+ --magritte-typography-title-3-semibold-text-indent-v20-0-1:0px;
307
+ --magritte-typography-title-3-semibold-text-transform-v20-0-1:none;
308
+ --magritte-typography-title-3-semibold-text-decoration-v20-0-1:none;
309
+ --magritte-typography-title-4-semibold-font-family-v20-0-1:"Inter";
310
+ --magritte-typography-title-4-semibold-font-weight-v20-0-1:600;
311
+ --magritte-typography-title-4-semibold-line-height-v20-0-1:32px;
312
+ --magritte-typography-title-4-semibold-font-size-v20-0-1:22px;
313
+ --magritte-typography-title-4-semibold-letter-spacing-v20-0-1:-0.0075em;
314
+ --magritte-typography-title-4-semibold-text-indent-v20-0-1:0px;
315
+ --magritte-typography-title-4-semibold-text-transform-v20-0-1:none;
316
+ --magritte-typography-title-4-semibold-text-decoration-v20-0-1:none;
317
+ --magritte-typography-title-5-semibold-font-family-v20-0-1:"Inter";
318
+ --magritte-typography-title-5-semibold-font-weight-v20-0-1:600;
319
+ --magritte-typography-title-5-semibold-line-height-v20-0-1:26px;
320
+ --magritte-typography-title-5-semibold-font-size-v20-0-1:18px;
321
+ --magritte-typography-title-5-semibold-letter-spacing-v20-0-1:0em;
322
+ --magritte-typography-title-5-semibold-text-indent-v20-0-1:0px;
323
+ --magritte-typography-title-5-semibold-text-transform-v20-0-1:none;
324
+ --magritte-typography-title-5-semibold-text-decoration-v20-0-1:none;
325
+ --magritte-typography-subtitle-1-semibold-font-family-v20-0-1:"Inter";
326
+ --magritte-typography-subtitle-1-semibold-font-weight-v20-0-1:600;
327
+ --magritte-typography-subtitle-1-semibold-line-height-v20-0-1:22px;
328
+ --magritte-typography-subtitle-1-semibold-font-size-v20-0-1:16px;
329
+ --magritte-typography-subtitle-1-semibold-letter-spacing-v20-0-1:0em;
330
+ --magritte-typography-subtitle-1-semibold-text-indent-v20-0-1:0px;
331
+ --magritte-typography-subtitle-1-semibold-text-transform-v20-0-1:none;
332
+ --magritte-typography-subtitle-1-semibold-text-decoration-v20-0-1:none;
333
+ --magritte-typography-subtitle-2-semibold-font-family-v20-0-1:"Inter";
334
+ --magritte-typography-subtitle-2-semibold-font-weight-v20-0-1:600;
335
+ --magritte-typography-subtitle-2-semibold-line-height-v20-0-1:20px;
336
+ --magritte-typography-subtitle-2-semibold-font-size-v20-0-1:14px;
337
+ --magritte-typography-subtitle-2-semibold-letter-spacing-v20-0-1:0.005em;
338
+ --magritte-typography-subtitle-2-semibold-text-indent-v20-0-1:0px;
339
+ --magritte-typography-subtitle-2-semibold-text-transform-v20-0-1:none;
340
+ --magritte-typography-subtitle-2-semibold-text-decoration-v20-0-1:none;
341
+ --magritte-typography-subtitle-3-semibold-font-family-v20-0-1:"Inter";
342
+ --magritte-typography-subtitle-3-semibold-font-weight-v20-0-1:600;
343
+ --magritte-typography-subtitle-3-semibold-line-height-v20-0-1:18px;
344
+ --magritte-typography-subtitle-3-semibold-font-size-v20-0-1:12px;
345
+ --magritte-typography-subtitle-3-semibold-letter-spacing-v20-0-1:0.01em;
346
+ --magritte-typography-subtitle-3-semibold-text-indent-v20-0-1:0px;
347
+ --magritte-typography-subtitle-3-semibold-text-transform-v20-0-1:none;
348
+ --magritte-typography-subtitle-3-semibold-text-decoration-v20-0-1:none;
349
+ --magritte-typography-subtitle-4-semibold-font-family-v20-0-1:"Inter";
350
+ --magritte-typography-subtitle-4-semibold-font-weight-v20-0-1:600;
351
+ --magritte-typography-subtitle-4-semibold-line-height-v20-0-1:16px;
352
+ --magritte-typography-subtitle-4-semibold-font-size-v20-0-1:10px;
353
+ --magritte-typography-subtitle-4-semibold-letter-spacing-v20-0-1:0.015em;
354
+ --magritte-typography-subtitle-4-semibold-text-indent-v20-0-1:0px;
355
+ --magritte-typography-subtitle-4-semibold-text-transform-v20-0-1:none;
356
+ --magritte-typography-subtitle-4-semibold-text-decoration-v20-0-1:none;
357
+ --magritte-typography-label-1-regular-font-family-v20-0-1:"Inter";
358
+ --magritte-typography-label-1-regular-font-weight-v20-0-1:400;
359
+ --magritte-typography-label-1-regular-line-height-v20-0-1:26px;
360
+ --magritte-typography-label-1-regular-font-size-v20-0-1:18px;
361
+ --magritte-typography-label-1-regular-letter-spacing-v20-0-1:-0.005em;
362
+ --magritte-typography-label-1-regular-text-indent-v20-0-1:0px;
363
+ --magritte-typography-label-1-regular-text-transform-v20-0-1:none;
364
+ --magritte-typography-label-1-regular-text-decoration-v20-0-1:none;
365
+ --magritte-typography-label-2-regular-font-family-v20-0-1:"Inter";
366
+ --magritte-typography-label-2-regular-font-weight-v20-0-1:400;
367
+ --magritte-typography-label-2-regular-line-height-v20-0-1:22px;
368
+ --magritte-typography-label-2-regular-font-size-v20-0-1:16px;
369
+ --magritte-typography-label-2-regular-letter-spacing-v20-0-1:0em;
370
+ --magritte-typography-label-2-regular-text-indent-v20-0-1:0px;
371
+ --magritte-typography-label-2-regular-text-transform-v20-0-1:none;
372
+ --magritte-typography-label-2-regular-text-decoration-v20-0-1:none;
373
+ --magritte-typography-label-3-regular-font-family-v20-0-1:"Inter";
374
+ --magritte-typography-label-3-regular-font-weight-v20-0-1:400;
375
+ --magritte-typography-label-3-regular-line-height-v20-0-1:20px;
376
+ --magritte-typography-label-3-regular-font-size-v20-0-1:14px;
377
+ --magritte-typography-label-3-regular-letter-spacing-v20-0-1:0.005em;
378
+ --magritte-typography-label-3-regular-text-indent-v20-0-1:0px;
379
+ --magritte-typography-label-3-regular-text-transform-v20-0-1:none;
380
+ --magritte-typography-label-3-regular-text-decoration-v20-0-1:none;
381
+ --magritte-typography-label-4-regular-font-family-v20-0-1:"Inter";
382
+ --magritte-typography-label-4-regular-font-weight-v20-0-1:400;
383
+ --magritte-typography-label-4-regular-line-height-v20-0-1:18px;
384
+ --magritte-typography-label-4-regular-font-size-v20-0-1:12px;
385
+ --magritte-typography-label-4-regular-letter-spacing-v20-0-1:0.01em;
386
+ --magritte-typography-label-4-regular-text-indent-v20-0-1:0px;
387
+ --magritte-typography-label-4-regular-text-transform-v20-0-1:none;
388
+ --magritte-typography-label-4-regular-text-decoration-v20-0-1:none;
389
+ --magritte-typography-label-5-regular-font-family-v20-0-1:"Inter";
390
+ --magritte-typography-label-5-regular-font-weight-v20-0-1:400;
391
+ --magritte-typography-label-5-regular-line-height-v20-0-1:14px;
392
+ --magritte-typography-label-5-regular-font-size-v20-0-1:10px;
393
+ --magritte-typography-label-5-regular-letter-spacing-v20-0-1:0.02em;
394
+ --magritte-typography-label-5-regular-text-indent-v20-0-1:0px;
395
+ --magritte-typography-label-5-regular-text-transform-v20-0-1:none;
396
+ --magritte-typography-label-5-regular-text-decoration-v20-0-1:none;
397
+ --magritte-typography-paragraph-1-regular-font-family-v20-0-1:"Inter";
398
+ --magritte-typography-paragraph-1-regular-font-weight-v20-0-1:400;
399
+ --magritte-typography-paragraph-1-regular-line-height-v20-0-1:28px;
400
+ --magritte-typography-paragraph-1-regular-font-size-v20-0-1:18px;
401
+ --magritte-typography-paragraph-1-regular-letter-spacing-v20-0-1:0em;
402
+ --magritte-typography-paragraph-1-regular-text-indent-v20-0-1:0px;
403
+ --magritte-typography-paragraph-1-regular-text-transform-v20-0-1:none;
404
+ --magritte-typography-paragraph-1-regular-text-decoration-v20-0-1:none;
405
+ --magritte-typography-paragraph-2-regular-font-family-v20-0-1:"Inter";
406
+ --magritte-typography-paragraph-2-regular-font-weight-v20-0-1:400;
407
+ --magritte-typography-paragraph-2-regular-line-height-v20-0-1:26px;
408
+ --magritte-typography-paragraph-2-regular-font-size-v20-0-1:16px;
409
+ --magritte-typography-paragraph-2-regular-letter-spacing-v20-0-1:0.005em;
410
+ --magritte-typography-paragraph-2-regular-text-indent-v20-0-1:0px;
411
+ --magritte-typography-paragraph-2-regular-text-transform-v20-0-1:none;
412
+ --magritte-typography-paragraph-2-regular-text-decoration-v20-0-1:none;
413
+ --magritte-typography-paragraph-3-regular-font-family-v20-0-1:"Inter";
414
+ --magritte-typography-paragraph-3-regular-font-weight-v20-0-1:400;
415
+ --magritte-typography-paragraph-3-regular-line-height-v20-0-1:24px;
416
+ --magritte-typography-paragraph-3-regular-font-size-v20-0-1:14px;
417
+ --magritte-typography-paragraph-3-regular-letter-spacing-v20-0-1:0.01em;
418
+ --magritte-typography-paragraph-3-regular-text-indent-v20-0-1:0px;
419
+ --magritte-typography-paragraph-3-regular-text-transform-v20-0-1:none;
420
+ --magritte-typography-paragraph-3-regular-text-decoration-v20-0-1:none;
421
+ --magritte-typography-paragraph-4-regular-font-family-v20-0-1:"Inter";
422
+ --magritte-typography-paragraph-4-regular-font-weight-v20-0-1:400;
423
+ --magritte-typography-paragraph-4-regular-line-height-v20-0-1:22px;
424
+ --magritte-typography-paragraph-4-regular-font-size-v20-0-1:12px;
425
+ --magritte-typography-paragraph-4-regular-letter-spacing-v20-0-1:0.015em;
426
+ --magritte-typography-paragraph-4-regular-text-indent-v20-0-1:0px;
427
+ --magritte-typography-paragraph-4-regular-text-transform-v20-0-1:none;
428
+ --magritte-typography-paragraph-4-regular-text-decoration-v20-0-1:none;
429
+ --magritte-typography-_custom-1-semibold-font-family-v20-0-1:"Inter";
430
+ --magritte-typography-_custom-1-semibold-font-weight-v20-0-1:600;
431
+ --magritte-typography-_custom-1-semibold-line-height-v20-0-1:28px;
432
+ --magritte-typography-_custom-1-semibold-font-size-v20-0-1:18px;
433
+ --magritte-typography-_custom-1-semibold-letter-spacing-v20-0-1:0em;
434
+ --magritte-typography-_custom-1-semibold-text-indent-v20-0-1:0px;
435
+ --magritte-typography-_custom-1-semibold-text-transform-v20-0-1:none;
436
+ --magritte-typography-_custom-1-semibold-text-decoration-v20-0-1:none;
437
+ --magritte-typography-_custom-2-semibold-font-family-v20-0-1:"Inter";
438
+ --magritte-typography-_custom-2-semibold-font-weight-v20-0-1:600;
439
+ --magritte-typography-_custom-2-semibold-line-height-v20-0-1:26px;
440
+ --magritte-typography-_custom-2-semibold-font-size-v20-0-1:16px;
441
+ --magritte-typography-_custom-2-semibold-letter-spacing-v20-0-1:0.005em;
442
+ --magritte-typography-_custom-2-semibold-text-indent-v20-0-1:0px;
443
+ --magritte-typography-_custom-2-semibold-text-transform-v20-0-1:none;
444
+ --magritte-typography-_custom-2-semibold-text-decoration-v20-0-1:none;
445
+ --magritte-typography-_custom-3-semibold-font-family-v20-0-1:"Inter";
446
+ --magritte-typography-_custom-3-semibold-font-weight-v20-0-1:600;
447
+ --magritte-typography-_custom-3-semibold-line-height-v20-0-1:24px;
448
+ --magritte-typography-_custom-3-semibold-font-size-v20-0-1:14px;
449
+ --magritte-typography-_custom-3-semibold-letter-spacing-v20-0-1:0.01em;
450
+ --magritte-typography-_custom-3-semibold-text-indent-v20-0-1:0px;
451
+ --magritte-typography-_custom-3-semibold-text-transform-v20-0-1:none;
452
+ --magritte-typography-_custom-3-semibold-text-decoration-v20-0-1:none;
453
+ --magritte-typography-_custom-4-semibold-font-family-v20-0-1:"Inter";
454
+ --magritte-typography-_custom-4-semibold-font-weight-v20-0-1:400;
455
+ --magritte-typography-_custom-4-semibold-line-height-v20-0-1:22px;
456
+ --magritte-typography-_custom-4-semibold-font-size-v20-0-1:12px;
457
+ --magritte-typography-_custom-4-semibold-letter-spacing-v20-0-1:0.015em;
458
+ --magritte-typography-_custom-4-semibold-text-indent-v20-0-1:0px;
459
+ --magritte-typography-_custom-4-semibold-text-transform-v20-0-1:none;
460
+ --magritte-typography-_custom-4-semibold-text-decoration-v20-0-1:none;
461
+ --magritte-typography-_custom-5-semibold-font-family-v20-0-1:"Inter";
462
+ --magritte-typography-_custom-5-semibold-font-weight-v20-0-1:400;
463
+ --magritte-typography-_custom-5-semibold-line-height-v20-0-1:12px;
464
+ --magritte-typography-_custom-5-semibold-font-size-v20-0-1:10px;
465
+ --magritte-typography-_custom-5-semibold-letter-spacing-v20-0-1:0.015em;
466
+ --magritte-typography-_custom-5-semibold-text-indent-v20-0-1:0px;
467
+ --magritte-typography-_custom-5-semibold-text-transform-v20-0-1:none;
468
+ --magritte-typography-_custom-5-semibold-text-decoration-v20-0-1:none;
469
+ --magritte-typography-_custom-1-medium-font-family-v20-0-1:"Inter";
470
+ --magritte-typography-_custom-1-medium-font-weight-v20-0-1:undefined;
471
+ --magritte-typography-_custom-1-medium-line-height-v20-0-1:28px;
472
+ --magritte-typography-_custom-1-medium-font-size-v20-0-1:18px;
473
+ --magritte-typography-_custom-1-medium-letter-spacing-v20-0-1:0em;
474
+ --magritte-typography-_custom-1-medium-text-indent-v20-0-1:0px;
475
+ --magritte-typography-_custom-1-medium-text-transform-v20-0-1:none;
476
+ --magritte-typography-_custom-1-medium-text-decoration-v20-0-1:none;
477
+ --magritte-typography-_custom-2-medium-font-family-v20-0-1:"Inter";
478
+ --magritte-typography-_custom-2-medium-font-weight-v20-0-1:undefined;
479
+ --magritte-typography-_custom-2-medium-line-height-v20-0-1:26px;
480
+ --magritte-typography-_custom-2-medium-font-size-v20-0-1:16px;
481
+ --magritte-typography-_custom-2-medium-letter-spacing-v20-0-1:0.005em;
482
+ --magritte-typography-_custom-2-medium-text-indent-v20-0-1:0px;
483
+ --magritte-typography-_custom-2-medium-text-transform-v20-0-1:none;
484
+ --magritte-typography-_custom-2-medium-text-decoration-v20-0-1:none;
485
+ --magritte-typography-_custom-3-medium-font-family-v20-0-1:"Inter";
486
+ --magritte-typography-_custom-3-medium-font-weight-v20-0-1:undefined;
487
+ --magritte-typography-_custom-3-medium-line-height-v20-0-1:24px;
488
+ --magritte-typography-_custom-3-medium-font-size-v20-0-1:14px;
489
+ --magritte-typography-_custom-3-medium-letter-spacing-v20-0-1:0.01em;
490
+ --magritte-typography-_custom-3-medium-text-indent-v20-0-1:0px;
491
+ --magritte-typography-_custom-3-medium-text-transform-v20-0-1:none;
492
+ --magritte-typography-_custom-3-medium-text-decoration-v20-0-1:none;
493
+ --magritte-typography-_custom-4-medium-font-family-v20-0-1:"Inter";
494
+ --magritte-typography-_custom-4-medium-font-weight-v20-0-1:undefined;
495
+ --magritte-typography-_custom-4-medium-line-height-v20-0-1:22px;
496
+ --magritte-typography-_custom-4-medium-font-size-v20-0-1:12px;
497
+ --magritte-typography-_custom-4-medium-letter-spacing-v20-0-1:0.015em;
498
+ --magritte-typography-_custom-4-medium-text-indent-v20-0-1:0px;
499
+ --magritte-typography-_custom-4-medium-text-transform-v20-0-1:none;
500
+ --magritte-typography-_custom-4-medium-text-decoration-v20-0-1:none;
501
+ --magritte-typography-_custom-5-medium-font-family-v20-0-1:"Inter";
502
+ --magritte-typography-_custom-5-medium-font-weight-v20-0-1:undefined;
503
+ --magritte-typography-_custom-5-medium-line-height-v20-0-1:12px;
504
+ --magritte-typography-_custom-5-medium-font-size-v20-0-1:10px;
505
+ --magritte-typography-_custom-5-medium-letter-spacing-v20-0-1:0.015em;
506
+ --magritte-typography-_custom-5-medium-text-indent-v20-0-1:0px;
507
+ --magritte-typography-_custom-5-medium-text-transform-v20-0-1:none;
508
+ --magritte-typography-_custom-5-medium-text-decoration-v20-0-1:none;
509
+ --magritte-typography-_custom-1-italic-font-family-v20-0-1:"Inter";
510
+ --magritte-typography-_custom-1-italic-font-weight-v20-0-1:200;
511
+ --magritte-typography-_custom-1-italic-line-height-v20-0-1:28px;
512
+ --magritte-typography-_custom-1-italic-font-size-v20-0-1:18px;
513
+ --magritte-typography-_custom-1-italic-letter-spacing-v20-0-1:0em;
514
+ --magritte-typography-_custom-1-italic-text-indent-v20-0-1:0px;
515
+ --magritte-typography-_custom-1-italic-text-transform-v20-0-1:none;
516
+ --magritte-typography-_custom-1-italic-text-decoration-v20-0-1:none;
517
+ --magritte-typography-_custom-2-italic-font-family-v20-0-1:"Inter";
518
+ --magritte-typography-_custom-2-italic-font-weight-v20-0-1:200;
519
+ --magritte-typography-_custom-2-italic-line-height-v20-0-1:26px;
520
+ --magritte-typography-_custom-2-italic-font-size-v20-0-1:16px;
521
+ --magritte-typography-_custom-2-italic-letter-spacing-v20-0-1:0.005em;
522
+ --magritte-typography-_custom-2-italic-text-indent-v20-0-1:0px;
523
+ --magritte-typography-_custom-2-italic-text-transform-v20-0-1:none;
524
+ --magritte-typography-_custom-2-italic-text-decoration-v20-0-1:none;
525
+ --magritte-typography-_custom-3-italic-font-family-v20-0-1:"Inter";
526
+ --magritte-typography-_custom-3-italic-font-weight-v20-0-1:200;
527
+ --magritte-typography-_custom-3-italic-line-height-v20-0-1:24px;
528
+ --magritte-typography-_custom-3-italic-font-size-v20-0-1:14px;
529
+ --magritte-typography-_custom-3-italic-letter-spacing-v20-0-1:0.01em;
530
+ --magritte-typography-_custom-3-italic-text-indent-v20-0-1:0px;
531
+ --magritte-typography-_custom-3-italic-text-transform-v20-0-1:none;
532
+ --magritte-typography-_custom-3-italic-text-decoration-v20-0-1:none;
533
+ --magritte-typography-_custom-4-italic-font-family-v20-0-1:"Inter";
534
+ --magritte-typography-_custom-4-italic-font-weight-v20-0-1:200;
535
+ --magritte-typography-_custom-4-italic-line-height-v20-0-1:22px;
536
+ --magritte-typography-_custom-4-italic-font-size-v20-0-1:12px;
537
+ --magritte-typography-_custom-4-italic-letter-spacing-v20-0-1:0.015em;
538
+ --magritte-typography-_custom-4-italic-text-indent-v20-0-1:0px;
539
+ --magritte-typography-_custom-4-italic-text-transform-v20-0-1:none;
540
+ --magritte-typography-_custom-4-italic-text-decoration-v20-0-1:none;
541
+ --magritte-typography-_custom-5-italic-font-family-v20-0-1:"Inter";
542
+ --magritte-typography-_custom-5-italic-font-weight-v20-0-1:200;
543
+ --magritte-typography-_custom-5-italic-line-height-v20-0-1:12px;
544
+ --magritte-typography-_custom-5-italic-font-size-v20-0-1:10px;
545
+ --magritte-typography-_custom-5-italic-letter-spacing-v20-0-1:0.015em;
546
+ --magritte-typography-_custom-5-italic-text-indent-v20-0-1:0px;
547
+ --magritte-typography-_custom-5-italic-text-transform-v20-0-1:none;
548
+ --magritte-typography-_custom-5-italic-text-decoration-v20-0-1:none;
549
+ }
550
+ .magritte-root___FV1tC_1-1-0{
551
+ position:relative;
552
+ display:flex;
553
+ justify-content:center;
554
+ padding:var(--magritte-static-space-600-v20-0-1);
555
+ overflow:hidden;
556
+ border-radius:var(--magritte-static-border-radius-600-v20-0-1);
557
+ background-color:var(--magritte-color-background-primary-v20-0-1);
558
+ }
559
+ .magritte-root___FV1tC_1-1-0:hover{
560
+ cursor:pointer;
561
+ }
562
+ .magritte-root___FV1tC_1-1-0:hover .magritte-background___RfZ0U_1-1-0{
563
+ border-color:var(--magritte-color-stroke-accent-v20-0-1);
564
+ }
565
+ .magritte-root___FV1tC_1-1-0.magritte-drag-active___dihBL_1-1-0 .magritte-background___RfZ0U_1-1-0{
566
+ border-color:var(--magritte-color-stroke-accent-v20-0-1);
567
+ }
568
+ .magritte-root___FV1tC_1-1-0.focus-visible{
569
+ outline:var(--magritte-color-stroke-state-focused-accessible-v20-0-1) solid 4px;
570
+ }
571
+ .magritte-root___FV1tC_1-1-0.focus-visible .magritte-background___RfZ0U_1-1-0{
572
+ border-color:var(--magritte-color-stroke-accent-v20-0-1);
573
+ }
574
+ .magritte-root___FV1tC_1-1-0.magritte-load___MghDA_1-1-0 .magritte-background___RfZ0U_1-1-0,
575
+ .magritte-root___FV1tC_1-1-0.magritte-loading___9E3p-_1-1-0 .magritte-background___RfZ0U_1-1-0{
576
+ border-style:solid;
577
+ border-width:7px;
578
+ }
579
+ .magritte-root___FV1tC_1-1-0.magritte-invalid___Rt10-_1-1-0.focus-visible{
580
+ outline:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v20-0-1) solid 4px;
581
+ }
582
+ .magritte-root___FV1tC_1-1-0.magritte-invalid___Rt10-_1-1-0 .magritte-background___RfZ0U_1-1-0{
583
+ border-color:var(--magritte-color-stroke-neutral-v20-0-1);
584
+ }
585
+ .magritte-background___RfZ0U_1-1-0{
586
+ position:absolute;
587
+ border-width:8px;
588
+ border-style:dashed;
589
+ border-color:var(--magritte-color-stroke-neutral-v20-0-1);
590
+ top:-6px;
591
+ bottom:-6px;
592
+ left:-6px;
593
+ right:-6px;
594
+ border-radius:calc(var(--magritte-static-border-radius-600-v20-0-1) + 6px);
595
+ background-position:center;
596
+ background-size:100%;
597
+ }
598
+ .magritte-body___O7ROl_1-1-0{
599
+ display:flex;
600
+ flex-direction:column;
601
+ align-items:center;
602
+ justify-content:center;
603
+ }
604
+ .magritte-loader___XYpWg_1-1-0{
605
+ position:relative;
606
+ display:flex;
607
+ }
608
+ .magritte-cancel___tQ-yX_1-1-0{
609
+ position:absolute;
610
+ top:0;
611
+ left:0;
612
+ width:100%;
613
+ height:100%;
614
+ display:flex;
615
+ align-items:center;
616
+ justify-content:center;
617
+ }
618
+ .magritte-image-controls___vLf94_1-1-0{
619
+ display:flex;
620
+ position:absolute;
621
+ right:var(--magritte-static-space-300-v20-0-1);
622
+ bottom:var(--magritte-static-space-300-v20-0-1);
623
+ gap:var(--magritte-static-space-300-v20-0-1);
624
+ }
package/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from '@hh.ru/magritte-ui-upload/Upload';
2
+ export * from '@hh.ru/magritte-ui-upload/types';
package/index.js ADDED
@@ -0,0 +1,11 @@
1
+ import './index.css';
2
+ export { Upload } from './Upload.js';
3
+ import 'react/jsx-runtime';
4
+ import 'react';
5
+ import 'react-dropzone';
6
+ import 'classnames';
7
+ import '@hh.ru/magritte-ui-icon/icon';
8
+ import '@hh.ru/magritte-ui-loader';
9
+ import '@hh.ru/magritte-ui-spacing';
10
+ import '@hh.ru/magritte-ui-typography';
11
+ //# sourceMappingURL=index.js.map
package/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
package/package.json ADDED
@@ -0,0 +1,38 @@
1
+ {
2
+ "name": "@hh.ru/magritte-ui-upload",
3
+ "version": "1.1.0",
4
+ "main": "index.js",
5
+ "types": "index.d.ts",
6
+ "sideEffects": [
7
+ "index.css"
8
+ ],
9
+ "scripts": {
10
+ "build": "yarn root:build $(pwd)",
11
+ "build-test-branch": "yarn root:build-test-branch $(pwd)",
12
+ "changelog": "yarn root:changelog $(pwd)",
13
+ "prepack": "yarn root:prepack $(pwd)",
14
+ "postpublish": "yarn root:postpublish $(pwd)",
15
+ "stylelint-test": "yarn root:stylelint-test $(pwd)",
16
+ "eslint-test": "yarn root:eslint-test $(pwd)",
17
+ "ts-config": "yarn root:ts-config $(pwd)",
18
+ "ts-check": "yarn root:ts-check $(pwd)",
19
+ "test": "yarn root:test $(pwd)",
20
+ "watch": "yarn root:watch $(pwd)"
21
+ },
22
+ "publishConfig": {
23
+ "access": "public"
24
+ },
25
+ "peerDependencies": {
26
+ "classnames": ">=2.3.2",
27
+ "react": ">=18.2.0"
28
+ },
29
+ "dependencies": {
30
+ "@hh.ru/magritte-ui-button": "5.2.9",
31
+ "@hh.ru/magritte-ui-icon": "7.9.6",
32
+ "@hh.ru/magritte-ui-loader": "1.3.11",
33
+ "@hh.ru/magritte-ui-spacing": "2.0.34",
34
+ "@hh.ru/magritte-ui-typography": "3.0.22",
35
+ "react-dropzone": "14.3.5"
36
+ },
37
+ "gitHead": "4c85532c7420dc718812510bb3635032b806eac0"
38
+ }
package/types.d.ts ADDED
@@ -0,0 +1,33 @@
1
+ import { ReactNode, ComponentProps, ReactElement } from 'react';
2
+ import { DropzoneOptions, DropEvent } from 'react-dropzone';
3
+ import { Button } from '@hh.ru/magritte-ui-button';
4
+ export interface LoadedFile {
5
+ data: File;
6
+ loading: boolean;
7
+ error?: string;
8
+ loadTime?: number;
9
+ loadPercentage?: number;
10
+ }
11
+ export type ButtonElement = ReactElement<ComponentProps<typeof Button>>;
12
+ export type UploadType = 'application' | 'image' | 'video' | 'mixed';
13
+ export type LoadedFileWithFileSize = LoadedFile & {
14
+ fileSizeMB: string;
15
+ };
16
+ interface UploadTrls {
17
+ title: ReactNode;
18
+ subTitle: ReactNode;
19
+ }
20
+ type DropzoneOptionsHepler = Omit<DropzoneOptions, 'onDropAccepted' | 'onDropRejected'>;
21
+ export interface UploadProps extends DropzoneOptionsHepler {
22
+ files: LoadedFile[];
23
+ selectFileButton: ButtonElement;
24
+ deleteFileButton: ButtonElement;
25
+ replaceImageButton: ButtonElement;
26
+ deleteImageButton: ButtonElement;
27
+ trls: UploadTrls;
28
+ onFileDelete: (loadedFile: LoadedFile, fileIndex: number) => void;
29
+ onDropAccepted: (files: LoadedFile[], event: DropEvent) => void;
30
+ onDropRejected?: (files: LoadedFile[], event: DropEvent) => void;
31
+ renderFileInfo?: (loadedFile: LoadedFileWithFileSize) => ReactNode;
32
+ }
33
+ export {};
package/types.js ADDED
@@ -0,0 +1,3 @@
1
+ import './index.css';
2
+
3
+ //# sourceMappingURL=types.js.map
package/types.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}