kamotive_ui 1.2.15 → 1.2.17

package/dist/components/Dropdown/Dropdown.module.css

@@ -208,7 +208,7 @@
 
 .label {
   transition: 0.3ms ease-out;
-  font-weight: 500;
+  font-weight: 500 !important;
   /* color: var(--text-grey); */
 }
 .label--readOnly {
@@ -225,13 +225,13 @@
   text-overflow: ellipsis;
   max-width: calc(100% - 32px);
   color: var(--text-dark);
-  font-weight: var(--font-weight-semiBold);
+  /* font-weight: var(--font-weight-semiBold); */
 }
 .label--default.lg {
-  font-size: 12px;
+  font-size: 12px !important;
 }
 .label--default.md {
-  font-size: 10px;
+  font-size: 10px !important;
 }
 
 .label--left {
@@ -239,24 +239,18 @@
   min-width: fit-content;
 }
 .label--left.lg {
-  font-size: 14px;
+  font-size: 14px !important;
 }
 .label--left.md {
-  font-size: 12px;
+  font-size: 12px !important;
 }
 /* Стили для обязательного поля */
-/* .label--default.label--required {
-  position: relative;
-  top: 0;
-} */
 .label--required::after {
   content: '*';
   color: var(--error-main);
-  /* position: absolute; */
   margin-left: 2px;
   top: 2px;
-  /* font-size: 22px; */
-  font-size: 12px;
+  font-size: 12px !important;
 }
 
 .item-selected {

package/dist/components/FileAttach/FileAttach.js

@@ -1,80 +1,17 @@
-import React, { useState } from 'react';
-import { useDropzone } from 'react-dropzone';
+import React from 'react';
 import styles from './FileAttach.module.css';
-import { Typography } from '../Typography/Typography';
-import { IconUpload } from '../../Icons';
-import { FileItem } from '../FileItem/FileItem';
 import classNames from 'classnames';
-export const FileAttach = ({ maxFileSize = 2, maxFileCount = 10, acceptedFormats = {
+import { FileLoader } from '../FileLoader/FileLoader';
+import { FileListAttaсhed } from '../FileListAttached/FileListAttaсhed';
+export const FileAttach = ({ filesList = [], maxFileSize = 2, maxFileCount = 10, acceptedFormats = {
     'image/*': ['.png', '.gif', '.jpeg', '.jpg'],
     'application/pdf': ['.pdf'],
     'application/msword': ['.doc', '.docx'],
-}, addedFiles, setAddedFiles, onDownload, disabled = false, className, style, }) => {
-    const [errorFiles, setErrorFiles] = useState([]);
-    const fileValidator = (file) => {
-        if (file.size > maxFileSize * 1024 * 1024 * 1024) {
-            return {
-                code: 'name-too-large',
-                message: `Максимальный размер файла ${maxFileSize.toFixed(0)} ГБ`,
-            };
-        }
-        if (addedFiles.find((addedFile) => addedFile.name === file.name)) {
-            return {
-                code: 'repeating-file-name',
-                message: `Файл уже добавлен`,
-            };
-        }
-        if (addedFiles.length > maxFileCount - 1) {
-            return {
-                code: 'files-count-too-large',
-                message: `Максимальное количество файлов ${maxFileCount}`,
-            };
-        }
-        return null;
-    };
-    const { getRootProps, getInputProps } = useDropzone({
-        onDrop: (acceptedFiles, fileRejections) => {
-            setAddedFiles([...addedFiles, ...acceptedFiles]);
-            setErrorFiles([...errorFiles, ...fileRejections]);
-        },
-        validator: fileValidator,
-        accept: acceptedFormats,
-        maxFiles: maxFileCount,
-        disabled: disabled,
+}, addedFiles, setAddedFiles, onDownload, onDelete, canAdd = true, canDelete = true, canDownload = true, position = 'bottom', lng = 'ru', className, style, }) => {
+    const fileAttachClasses = classNames(styles['fileAttach'], className, {
+        [styles[`fileAttach_position_${position}`]]: position,
     });
-    const acceptedFileItems = addedFiles.map((file, index) => (React.createElement(FileItem, { name: file.name, size: file.size, onDelete: () => deleteAcceptedFile(addedFiles, setAddedFiles, file.name), onDownload: onDownload, key: index })));
-    const fileRejectionItems = errorFiles.map(({ file, errors }) => (React.createElement(FileItem, { name: file.name, size: file.size, error: errors[0].message, onDelete: () => deleteRejectedFile(errorFiles, setErrorFiles, file.name), key: file.path })));
-    const deleteAcceptedFile = (addedFiles, setAddedFiles, fileName) => {
-        setAddedFiles(addedFiles.filter((file) => file.name !== fileName));
-    };
-    const deleteRejectedFile = (errorFiles, setErrorFiles, fileName) => {
-        setErrorFiles(errorFiles.filter(({ file }) => file.name !== fileName));
-    };
-    // Функция для получения всех доступных форматов в виде строки
-    const getAcceptedFormatsString = (acceptedFormats) => {
-        const formats = [];
-        for (const key in acceptedFormats) {
-            if (acceptedFormats.hasOwnProperty(key)) {
-                formats.push(...acceptedFormats[key].map((format) => format.replace('.', '')));
-            }
-        }
-        return formats.join(', ');
-    };
-    return (React.createElement("section", { className: classNames(styles['fileAttach'], className), style: style },
-        React.createElement("div", Object.assign({}, getRootProps({ className: `${styles['dropzone']} ${disabled ? styles['disabled'] : ''}` })),
-            React.createElement("input", Object.assign({}, getInputProps())),
-            React.createElement(IconUpload, { htmlColor: disabled ? 'var(--grey-medium)' : 'var(--icons-grey)' }),
-            React.createElement(Typography, { variant: "Body1", color: disabled ? 'var(--grey-medium)' : 'var(--icons-grey)' },
-                React.createElement("span", { style: { textDecoration: 'underline' } }, "\u041D\u0430\u0436\u043C\u0438\u0442\u0435 \u043D\u0430 \u043E\u0431\u043B\u0430\u0441\u0442\u044C"),
-                React.createElement("span", null, " \u0438\u043B\u0438 \u043F\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u0444\u0430\u0439\u043B\u044B")),
-            React.createElement("div", null,
-                maxFileSize && (React.createElement(Typography, { variant: "Caption", color: "var(--grey-medium)" },
-                    `Максимальный размер файла ${maxFileSize.toFixed(0)} ГБ`,
-                    " ",
-                    React.createElement("br", null))),
-                maxFileCount && (React.createElement(Typography, { variant: "Caption", color: "var(--grey-medium)" }, `За раз можно загрузить ${maxFileCount} ${maxFileCount > 1 ? `файлов` : `файл`}`)))),
-        acceptedFormats && (React.createElement(Typography, { variant: "Caption", color: "var(--grey-medium)" }, `Поддерживаемые форматы: ${getAcceptedFormatsString(acceptedFormats)}`)),
-        (addedFiles === null || addedFiles === void 0 ? void 0 : addedFiles.length) > 0 || (errorFiles === null || errorFiles === void 0 ? void 0 : errorFiles.length) > 0 ? (React.createElement("div", { className: styles['addedFiles'] },
-            acceptedFileItems,
-            fileRejectionItems)) : (React.createElement(Typography, { variant: "Caption", color: "var(--text-dark)" }, "\u0424\u0430\u0439\u043B\u044B \u043D\u0435 \u0434\u043E\u0431\u0430\u0432\u043B\u0435\u043D\u044B"))));
+    return (React.createElement("div", { className: fileAttachClasses, style: style },
+        React.createElement(FileLoader, { maxFileSize: maxFileSize, maxFileCount: maxFileCount, acceptedFormats: acceptedFormats, addedFiles: addedFiles, setAddedFiles: setAddedFiles, canAdd: canAdd, lng: lng }),
+        React.createElement(FileListAttaсhed, { filesList: filesList, onDelete: onDelete, onDownload: onDownload, canDelete: canDelete, canDownload: canDownload, lng: lng })));
 };

package/dist/components/FileAttach/FileAttach.module.css

@@ -1,36 +1,21 @@
 .fileAttach {
-    display: flex;
-    flex-direction: column;
-    height: inherit;
-    gap: 10px; 
+  display: flex;
+  gap: 15px;
+  min-width: 260px;
+  flex: 1;
+  max-width: 100%;
+}
+.fileAttach_position_left {
+  flex-direction: row;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.fileAttach_position_right {
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  flex-wrap: wrap;
 }
 
-.dropzone {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-
-    gap: 10px; 
-    padding: 30px 20px;
-    border: 1px dashed var(--blue-main);
-    border-radius: 15px;
-    cursor: pointer;
-  }
-
-  .dropzone:hover {
-    background-color: var(--fills-active);
-  }
-
-  .dropzone.disabled {
-    background-color: var(--fills-disabled);
-    border-color: var(--grey-medium);
-    cursor: not-allowed;
-  }
-
-  .addedFiles {
-    display: flex;
-    flex-direction: column;
-    gap: 10px; 
-    overflow-y: auto;
-  }
+.fileAttach_position_bottom {
+  flex-direction: column;
+}

package/dist/components/FileItem/FileItem.js

@@ -1,20 +1,111 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import styles from './FileItem.module.css';
 import { Typography } from '../Typography/Typography';
 import { ProgressBar } from '../ProgressBar/ProgressBar';
 import { IconButton } from '../IconButton/IconButton';
 import { IconClose10, IconDownload, IconFile } from '../../Icons';
-export const FileItem = ({ name, size = 0, loading = false, error = '', onDownload, onDelete, style }) => {
-    return (React.createElement("div", { className: `${styles['fileItem']} ${error ? styles['error'] : ''}`, style: style },
+import { Tooltip } from '../Tooltip/Tooltip';
+import classNames from 'classnames';
+export const FileItem = ({ file, loading = false, error = '', onDownload, onDelete, canDelete = true, canDownload = true, style, isAddedFile, isRejectedFile, }) => {
+    const [isLoadingFinished, setIsLoadingFinished] = useState(false);
+    const [animationDuration, setAnimationDuration] = useState(0);
+    const [maxLength, setMaxLength] = useState(30);
+    const fileItemRef = useRef(null);
+    const fileNameRef = useRef(null);
+    const calculateMaxLength = () => {
+        if (fileItemRef.current && fileNameRef.current) {
+            const containerWidth = fileItemRef.current.clientWidth;
+            const iconsWidth = 100; // Примерная ширина для иконок и отступов
+            const availableWidth = containerWidth - iconsWidth; // Доступная ширина для текста
+            const charWidth = 8;
+            const calculatedMaxLength = Math.floor(availableWidth / charWidth);
+            const newMaxLength = Math.max(calculatedMaxLength, 20);
+            setMaxLength(newMaxLength);
+        }
+    };
+    const croppedName = (filename) => {
+        if (filename.length <= maxLength) {
+            return filename;
+        }
+        const lastDotIndex = filename.lastIndexOf('.');
+        let name, extension;
+        if (lastDotIndex === -1) {
+            name = filename;
+            extension = '';
+        }
+        else {
+            name = filename.slice(0, lastDotIndex);
+            extension = filename.slice(lastDotIndex);
+        }
+        const availableLength = maxLength - extension.length;
+        if (availableLength <= 3) {
+            return filename.slice(0, maxLength - 3) + '...';
+        }
+        const charsFromStart = Math.ceil((availableLength - 3) / 2);
+        const charsFromEnd = Math.floor((availableLength - 3) / 2);
+        return name.slice(0, charsFromStart) + '...' + name.slice(name.length - charsFromEnd) + extension;
+    };
+    // Для расчета ширины контейнера и обновления maxLength при изменении размера окна
+    useEffect(() => {
+        calculateMaxLength();
+        window.addEventListener('resize', calculateMaxLength);
+        return () => {
+            window.removeEventListener('resize', calculateMaxLength);
+        };
+    }, []);
+    // Расчет длительности анимации в зависимости от размера файла
+    useEffect(() => {
+        if (!file.size)
+            return;
+        const baseDuration = 2000; // для маленьких файлов (до 100 КБ) 1 секунда
+        const fileSizeKB = file.size / 1024; // Размер файла в КБ
+        let calculatedDuration;
+        if (fileSizeKB <= 100) {
+            calculatedDuration = baseDuration;
+        }
+        else if (fileSizeKB <= 1024) {
+            const ratio = (fileSizeKB - 100) / (1024 - 100);
+            calculatedDuration = baseDuration + ratio * 2000; // от 2 до 4 секунд
+        }
+        else if (fileSizeKB <= 10240) {
+            const ratio = (fileSizeKB - 1024) / (10240 - 1024);
+            calculatedDuration = 4000 + ratio * 4000; // от 4 до 8 секунд
+        }
+        else {
+            const ratio = Math.min((fileSizeKB - 10240) / (102400 - 10240), 1);
+            calculatedDuration = 10000 + ratio * 3000; // от 8 до 13 секунд
+        }
+        setAnimationDuration(calculatedDuration);
+    }, [file]);
+    const fileItemClasses = classNames(styles['fileItem'], {
+        [styles['loading']]: loading,
+        [styles['error']]: error,
+        [styles[`fileItem_attached`]]: !(isAddedFile || isRejectedFile),
+    });
+    const handleDeleteClick = (e, id) => {
+        e.stopPropagation();
+        if (onDelete && id) {
+            onDelete(id);
+        }
+    };
+    const handleDownloadClick = (e, file) => {
+        e.stopPropagation();
+        if (onDownload && file) {
+            onDownload(file);
+        }
+    };
+    return (React.createElement("div", { className: fileItemClasses, style: style, ref: fileItemRef, onClick: () => !(isAddedFile || isRejectedFile) && canDownload && file && onDownload && onDownload(file) },
         React.createElement("div", { className: styles['fileItemFile'] },
             React.createElement("div", { className: styles['fileItemInfo'] },
                 React.createElement("div", { className: styles['fileItemIcon'] },
                     React.createElement(IconFile, { htmlColor: 'var(--icons-grey)' })),
-                React.createElement("div", { className: styles['fileItemName'] },
-                    React.createElement(Typography, { variant: "Body1", color: "var(--text-dark)" }, name),
-                    size !== 0 && (React.createElement(Typography, { variant: "Caption", color: "var(--grey-medium)" }, `${(size / 1024).toFixed(1)} кБ`)))),
-            onDownload && (React.createElement(IconButton, { icon: React.createElement(IconDownload, null), onClick: onDownload, color: 'var(--icons-grey)', className: styles['fileIcon'] })),
-            onDelete && (React.createElement(IconButton, { icon: React.createElement(IconClose10, null), onClick: onDelete, color: 'var(--icons-grey)' }))),
-        loading && React.createElement(ProgressBar, { animated: true, size: "sm", value: 100 }),
+                React.createElement("div", { className: styles['fileItemName'], ref: fileNameRef },
+                    file.filename.length > maxLength ? (React.createElement(Tooltip, { label: file.filename, position: "bottom-center", displayDelay: 300 },
+                        React.createElement(Typography, { variant: "Body1", color: "var(--text-dark)" }, croppedName(file.filename)))) : (React.createElement(Typography, { variant: "Body1", color: "var(--text-dark)" }, croppedName(file.filename))),
+                    file.size !== 0 && (React.createElement(Typography, { variant: "Caption", color: "var(--grey-medium)" }, `${file.size ? (file.size / 1024).toFixed(1) : 0} кБ`)))),
+            React.createElement("div", { className: styles['fileItemActions'] },
+                !(isAddedFile || isRejectedFile) && canDownload && (React.createElement(IconButton, { icon: React.createElement(IconDownload, null), onClick: (e) => handleDownloadClick(e, file), color: "var(--icons-grey)" })),
+                canDelete && (React.createElement(IconButton, { icon: React.createElement(IconClose10, null), onClick: (e) => handleDeleteClick(e, file.id || ''), color: "var(--icons-grey)" })))),
+        loading && !isLoadingFinished && (React.createElement(ProgressBar, { animated: true, size: "sm", value: 100, setIsLoadingFinished: setIsLoadingFinished, animationDuration: animationDuration })),
         error && (React.createElement(Typography, { variant: "Caption", color: "var(--error-main)" }, error))));
 };

package/dist/components/FileItem/FileItem.module.css

@@ -1,45 +1,67 @@
-
 .fileItem {
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-    justify-content: space-between;
-    
-    padding: 10px 15px;
-    border: 1px solid var(--info-secondary);
-    border-radius: 10px;
-
-  }
-  .error {
-    border-color: var(--error-main);
-  }
-
-  .fileItemFile{
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-  .fileItemInfo {
-    display: flex;
-    flex-direction: row;
-    gap: 5px;
-    flex-grow: 1; 
-    align-items: flex-start;
-    overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  justify-content: space-between;
+  padding: 10px 15px;
+  border: 1px solid var(--info-secondary);
+  border-radius: 10px;
+}
+.error {
+  border-color: var(--error-main);
+}
+
+.fileItemFile {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.fileItemInfo {
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+  flex-grow: 1;
+  align-items: flex-start;
+  overflow: hidden;
 }
 
 .fileItemIcon {
-    flex-shrink: 0
+  flex-shrink: 0;
 }
 
 .fileItemName {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1; 
-    align-items: flex-start;
-    overflow: auto;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  align-items: flex-start;
+  overflow: auto;
 }
 
 .fileIcon svg path {
-    stroke-width: 0.8;
+  stroke-width: 0.8;
+}
+
+.fileItem_attached {
+  cursor: pointer;
+  transition: all 0.15s ease-in-out;
+}
+
+.fileItem_attached:hover {
+  background-color: rgba(0, 0, 0, 0.03);
+  transform: translateY(-1px);
+}
+
+.fileItem_attached .fileIcon,
+.fileItem_attached button {
+  background-color: transparent;
+  transition: background-color 0.15s ease-in-out;
+  border-radius: 50%;
+  height: 28px;
+}
+
+.fileItemActions {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 3px;
 }

package/dist/components/FileListAttached/FileListAttached.module.css

@@ -0,0 +1,47 @@
+.fileList {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 260px;
+  max-height: 100%;
+  overflow-y: auto;
+  position: relative;
+}
+.fileListHeader {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  margin-bottom: 5px;
+  font-weight: 500 !important;
+}
+.fileListFiles {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  overflow-y: auto;
+}
+
+/* Стилизация скроллбара для WebKit (Chrome, Safari, новые версии Edge) */
+.fileList::-webkit-scrollbar {
+  width: 6px; /* Ширина скроллбара */
+}
+
+.fileList::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.03); /* Светлый фон для трека */
+  border-radius: 10px;
+}
+
+.fileList::-webkit-scrollbar-thumb {
+  background: var(--grey-medium, #c4c4c4); /* Цвет ползунка */
+  border-radius: 10px;
+}
+
+.fileList::-webkit-scrollbar-thumb:hover {
+  background: var(--grey-dark, #a0a0a0); /* Цвет ползунка при наведении */
+}
+
+/* Стилизация скроллбара для Firefox */
+.fileList {
+  scrollbar-width: thin; /* "auto", "thin" или "none" */
+  scrollbar-color: var(--grey-medium, #c4c4c4) rgba(0, 0, 0, 0.03); /* цвет ползунка и трека */
+}

package/dist/components/FileListAttached/FileListAtta/321/201hed.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { FileListAttaсhedProps } from '../../types';
+export declare const FileListAttaсhed: FC<FileListAttaсhedProps>;

package/dist/components/FileListAttached/FileListAtta/321/201hed.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import styles from './FileListAttached.module.css';
+import { Typography } from '../Typography/Typography';
+import { FileItem } from '../FileItem/FileItem';
+import classNames from 'classnames';
+export const FileListAttaсhed = ({ filesList, onDelete, onDownload, canDelete, canDownload, isInfoShown = true, lng = 'ru', className, style, }) => {
+    if (!filesList || filesList.length === 0) {
+        return lng === 'ru' || lng.includes('ru') ? (React.createElement(Typography, { variant: "Body2-SemiBold", color: "var(--grey-medium)", style: { marginTop: '5px' } }, "\u041D\u0435\u0442 \u043F\u0440\u0438\u043A\u0440\u0435\u043F\u043B\u0435\u043D\u043D\u044B\u0445 \u0444\u0430\u0439\u043B\u043E\u0432")) : (React.createElement(Typography, { variant: "Body2-SemiBold", color: "var(--grey-medium)", style: { marginTop: '5px' } }, "No attached files"));
+    }
+    return (React.createElement("div", { className: classNames(styles['fileList'], className), style: style },
+        isInfoShown &&
+            (lng === 'ru' || lng.includes('ru') ? (React.createElement(Typography, { variant: "Body2-SemiBold", color: "var(--text-dark)", style: { lineHeight: '20px' }, className: styles['fileListHeader'] }, `Прикрепленные файлы (${filesList.length})`)) : (React.createElement(Typography, { variant: "Body2-SemiBold", color: "var(--text-dark)", style: { lineHeight: '20px' }, className: styles['fileListHeader'] }, `Attached files (${filesList.length})`))),
+        React.createElement("div", { className: styles['fileListFiles'] }, filesList.map((file) => (React.createElement(FileItem, { key: file.id, file: file, onDownload: onDownload, onDelete: onDelete, canDelete: canDelete, canDownload: canDownload }))))));
+};

package/dist/components/FileLoader/FileLoader.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { FileLoaderProps } from '../../types';
+export declare const FileLoader: FC<FileLoaderProps>;

package/dist/components/FileLoader/FileLoader.js

@@ -0,0 +1,162 @@
+import React, { useEffect, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import styles from './FileLoader.module.css';
+import { Typography } from '../Typography/Typography';
+import { IconUpload } from '../../Icons';
+import { FileItem } from '../FileItem/FileItem';
+import classNames from 'classnames';
+export const FileLoader = ({ maxFileSize = 2, maxFileCount = 10, acceptedFormats = {
+    'image/*': ['.png', '.gif', '.jpeg', '.jpg'],
+    'application/pdf': ['.pdf'],
+    'application/msword': ['.doc', '.docx'],
+}, addedFiles, setAddedFiles, canAdd = true, lng = 'ru', className, style, }) => {
+    const [isLoadingFiles, setIsLoadingFiles] = useState(false);
+    const [loadingFilesNames, setLoadingFilesNames] = useState([]);
+    const [errorFiles, setErrorFiles] = useState([]);
+    const [addedFilesFormated, setAddedFilesFormatted] = useState([]);
+    const fileValidator = (file) => {
+        if (file.size > maxFileSize * 1024 * 1024 * 1024) {
+            return {
+                code: 'name-too-large',
+                message: lng === 'ru' || lng.includes('ru')
+                    ? `Максимальный размер файла ${maxFileSize.toFixed(0)} ГБ`
+                    : `Maximum file size ${maxFileSize.toFixed(0)} GB`,
+            };
+        }
+        if (addedFiles.find((addedFile) => addedFile.name === file.name)) {
+            return {
+                code: 'repeating-file-name',
+                message: lng === 'ru' || lng.includes('ru') ? `Файл уже добавлен` : `File already added`,
+            };
+        }
+        if (addedFiles.length > maxFileCount - 1) {
+            return {
+                code: 'files-count-too-large',
+                message: lng === 'ru' || lng.includes('ru') ? `Максимальное количество файлов ${maxFileCount}` : `Maximum number of files ${maxFileCount}`,
+            };
+        }
+        return null;
+    };
+    const { getRootProps, getInputProps } = useDropzone({
+        onDrop: (acceptedFiles, fileRejections) => {
+            setAddedFiles([...addedFiles, ...acceptedFiles]);
+            //преобразование типа файлов для отрисовки в списке
+            const newFormatAttachments = acceptedFiles.map((file) => {
+                return {
+                    id: `file-${file.name}`,
+                    filename: file.name,
+                    size: file.size,
+                    type: file.type,
+                };
+            });
+            setLoadingFilesNames(newFormatAttachments.map((file) => file.filename));
+            setIsLoadingFiles(true);
+            setAddedFilesFormatted([...addedFilesFormated, ...newFormatAttachments]);
+            let formattedRejections = [];
+            // Проверяем, есть ли ошибка превышения количества файлов
+            const hasTooManyFilesError = fileRejections.some((rejection) => rejection.errors.some((error) => error.code === 'too-many-files'));
+            if (hasTooManyFilesError) {
+                const remainingFiles = Math.max(0, maxFileCount - addedFiles.length);
+                const filesToAdd = fileRejections.slice(0, remainingFiles).map((rejection) => rejection.file);
+                setAddedFiles([...addedFiles, ...filesToAdd]);
+                const newFormatFilesToAdd = filesToAdd.map((rejectionAdd) => ({
+                    id: Math.random().toString(36).substring(2, 9),
+                    filename: rejectionAdd.name,
+                    size: rejectionAdd.size,
+                    type: rejectionAdd.type,
+                }));
+                setAddedFilesFormatted([...addedFilesFormated, ...newFormatFilesToAdd]);
+                const filesToReject = fileRejections.slice(remainingFiles);
+                formattedRejections = filesToReject.map((rejection) => ({
+                    errors: [
+                        {
+                            code: 'files-count-too-large',
+                            message: lng === 'ru' || lng.includes('ru')
+                                ? `Максимальное количество файлов ${maxFileCount}`
+                                : `Maximum number of files ${maxFileCount}`,
+                        },
+                    ],
+                    file: {
+                        id: Math.random().toString(36).substring(2, 9),
+                        filename: rejection.file.name,
+                        size: rejection.file.size,
+                        path: rejection.file.path,
+                    },
+                }));
+                setErrorFiles([...errorFiles, ...formattedRejections]);
+            }
+            else {
+                formattedRejections = fileRejections.map((rejection) => ({
+                    errors: rejection.errors,
+                    file: {
+                        id: Math.random().toString(36).substring(2, 9),
+                        filename: rejection.file.name,
+                        size: rejection.file.size,
+                        path: rejection.file.path,
+                    },
+                }));
+                setErrorFiles([...errorFiles, ...formattedRejections]);
+            }
+        },
+        validator: fileValidator,
+        accept: acceptedFormats,
+        maxFiles: maxFileCount,
+        disabled: !canAdd,
+    });
+    const handleDeleteFiles = (id) => {
+        var _a;
+        const filename = (_a = addedFilesFormated.find((file) => file.id === id)) === null || _a === void 0 ? void 0 : _a.filename;
+        setAddedFiles(addedFiles.filter((file) => file.name !== filename));
+        setAddedFilesFormatted(addedFilesFormated.filter((file) => file.filename !== filename));
+        setLoadingFilesNames(loadingFilesNames.filter((id) => id !== id));
+    };
+    const acceptedFileItems = addedFilesFormated.map((file) => {
+        return (React.createElement(FileItem, { key: file.id, file: file, loading: loadingFilesNames.includes(file.filename), onDelete: handleDeleteFiles, isAddedFile: true }));
+    });
+    const handleDeleteRejectedFile = (id) => {
+        setErrorFiles(errorFiles.filter((rejection) => rejection.file.id !== id));
+    };
+    const fileRejectionItems = errorFiles.map(({ file, errors }) => (React.createElement(FileItem, { key: file.id, file: file, error: errors[0].message, onDelete: handleDeleteRejectedFile, isRejectedFile: true })));
+    // Функция для получения всех доступных форматов в виде строки
+    const getAcceptedFormatsString = (acceptedFormats) => {
+        const formats = [];
+        for (const key in acceptedFormats) {
+            if (acceptedFormats.hasOwnProperty(key)) {
+                formats.push(...acceptedFormats[key].map((format) => format.replace('.', '')));
+            }
+        }
+        return formats.join(', ');
+    };
+    useEffect(() => {
+        if (loadingFilesNames.length === 0 && isLoadingFiles) {
+            setIsLoadingFiles(false);
+        }
+    }, [loadingFilesNames, isLoadingFiles]);
+    return (React.createElement("section", { className: classNames(styles['fileLoader'], className), style: style },
+        React.createElement("div", Object.assign({}, getRootProps({ className: `${styles['dropzone']} ${!canAdd ? styles['disabled'] : ''}` })),
+            React.createElement("input", Object.assign({}, getInputProps())),
+            React.createElement(IconUpload, { htmlColor: !canAdd ? 'var(--grey-medium)' : 'var(--icons-grey)' }),
+            React.createElement(Typography, { variant: "Body1", color: !canAdd ? 'var(--grey-medium)' : 'var(--icons-grey)', style: { textAlign: 'center' } }, lng === 'ru' || lng.includes('ru') ? (React.createElement(React.Fragment, null,
+                React.createElement("span", { style: { textDecoration: 'underline' } }, "\u041D\u0430\u0436\u043C\u0438\u0442\u0435 \u043D\u0430 \u043E\u0431\u043B\u0430\u0441\u0442\u044C"),
+                " ",
+                React.createElement("span", null, " \u0438\u043B\u0438 \u043F\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u0444\u0430\u0439\u043B\u044B"))) : (React.createElement(React.Fragment, null,
+                React.createElement("span", { style: { textDecoration: 'underline' } }, "\u0421lick on this area"),
+                " ",
+                React.createElement("span", null, "or drag files here")))),
+            React.createElement("div", null,
+                maxFileSize &&
+                    (lng === 'ru' || lng.includes('ru') ? (React.createElement(Typography, { variant: "Body2", color: "var(--grey-medium)" },
+                        `Максимальный размер файла ${maxFileSize.toFixed(0)} ГБ`,
+                        " ",
+                        React.createElement("br", null))) : (React.createElement(Typography, { variant: "Body2", color: "var(--grey-medium)" },
+                        `Maximum file size ${maxFileSize.toFixed(0)} GB`,
+                        " ",
+                        React.createElement("br", null)))),
+                maxFileCount &&
+                    (lng === 'ru' || lng.includes('ru') ? (React.createElement(Typography, { variant: "Body2", color: "var(--grey-medium)" }, `За раз можно загрузить ${maxFileCount} ${maxFileCount > 1 ? `файлов` : `файл`}`)) : (React.createElement(Typography, { variant: "Body2", color: "var(--grey-medium)" }, `You can upload ${maxFileCount} ${maxFileCount > 1 ? `files` : `file`}`))))),
+        acceptedFormats &&
+            (lng === 'ru' || lng.includes('ru') ? (React.createElement(Typography, { variant: "Body2", color: "var(--grey-medium)" }, `Поддерживаемые форматы: ${getAcceptedFormatsString(acceptedFormats)}`)) : (React.createElement(Typography, { variant: "Body2", color: "var(--grey-medium)" }, `Supported formats: ${getAcceptedFormatsString(acceptedFormats)}`))),
+        (addedFiles === null || addedFiles === void 0 ? void 0 : addedFiles.length) > 0 || (errorFiles === null || errorFiles === void 0 ? void 0 : errorFiles.length) > 0 ? (React.createElement("div", { className: styles['addedFiles'] },
+            acceptedFileItems,
+            fileRejectionItems)) : lng === 'ru' || lng.includes('ru') ? (React.createElement(Typography, { variant: "Body2-SemiBold", color: "var(--grey-medium)", style: { marginTop: '5px' } }, "\u0424\u0430\u0439\u043B\u044B \u043D\u0435 \u0434\u043E\u0431\u0430\u0432\u043B\u0435\u043D\u044B")) : (React.createElement(Typography, { variant: "Body2-SemiBold", color: "var(--grey-medium)", style: { marginTop: '5px' } }, "Files not added"))));
+};

package/dist/components/FileLoader/FileLoader.module.css

@@ -0,0 +1,69 @@
+.fileLoader {
+  display: flex;
+  flex-direction: column;
+  height: inherit;
+  gap: 5px;
+  min-width: 260px;
+  flex: 1;
+  max-width: 100%;
+}
+
+.dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  gap: 10px;
+  padding: 30px 20px;
+  border: 1px dashed var(--blue-main);
+  border-radius: 15px;
+  cursor: pointer;
+  margin-right: 10px;
+}
+
+.dropzone:hover {
+  background-color: var(--fills-active);
+}
+
+.dropzone.disabled {
+  background-color: var(--fills-disabled);
+  border-color: var(--grey-medium);
+  cursor: not-allowed;
+}
+
+.addedFiles {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 260px;
+  flex: 1;
+  max-height: 100%;
+  overflow-y: auto;
+  padding-right: 10px;
+  margin-top: 10px;
+}
+/* Стилизация скроллбара для WebKit (Chrome, Safari, новые версии Edge) */
+.addedFiles::-webkit-scrollbar {
+  width: 6px; /* Ширина скроллбара */
+}
+
+.addedFiles::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.03); /* Светлый фон для трека */
+  border-radius: 10px;
+}
+
+.addedFiles::-webkit-scrollbar-thumb {
+  background: var(--grey-medium, #c4c4c4); /* Цвет ползунка */
+  border-radius: 10px;
+}
+
+.addedFiles::-webkit-scrollbar-thumb:hover {
+  background: var(--grey-dark, #a0a0a0); /* Цвет ползунка при наведении */
+}
+
+/* Стилизация скроллбара для Firefox */
+.addedFiles {
+  scrollbar-width: thin; /* "auto", "thin" или "none" */
+  scrollbar-color: var(--grey-medium, #c4c4c4) rgba(0, 0, 0, 0.03); /* цвет ползунка и трека */
+}

package/dist/components/IconButton/IconButton.js

@@ -1,10 +1,15 @@
 import React from 'react';
 import classNames from 'classnames';
 import styles from './IconButton.module.css';
-export const IconButton = ({ icon, size = 'md', color, style, disabled = false, onClick, children, className }) => {
-    const validChildren = React.Children.toArray(children).filter(child => React.isValidElement(child));
+export const IconButton = ({ icon, size = 'md', color, style, disabled = false, onClick, children, className, }) => {
+    const validChildren = React.Children.toArray(children).filter((child) => React.isValidElement(child));
     const renderIcon = icon || validChildren[0];
-    return (React.createElement("button", { className: classNames(styles['iconButton'], styles[`iconButton--${size}`], className), disabled: disabled, "aria-disabled": disabled, type: "button", onClick: onClick, style: style }, (renderIcon) &&
+    const combinedStyle = Object.assign(Object.assign(Object.assign({}, style), ((style === null || style === void 0 ? void 0 : style.backgroundColor) && {
+        '--hover-background': `color-mix(in ${style.backgroundColor} 85%, black)`,
+    })), ((style === null || style === void 0 ? void 0 : style.borderRadius) && {
+        '--hover-border-radius': style.borderRadius,
+    }));
+    return (React.createElement("button", { className: classNames(styles['iconButton'], styles[`iconButton--${size}`], className), disabled: disabled, "aria-disabled": disabled, type: "button", onClick: (e) => onClick(e), style: combinedStyle }, renderIcon &&
         React.cloneElement(renderIcon, {
             htmlColor: color,
             strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0',

package/dist/components/IconButton/IconButton.module.css

@@ -1,26 +1,36 @@
 .iconButton {
-    cursor: pointer;
-    box-sizing: border-box;
-    background-color: var(--white);
-    border: none;
+  cursor: pointer;
+  box-sizing: border-box;
+  background-color: var(--white);
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1 / 1;
 }
 
-.iconButton--sm svg{
-    width: 14px;
-    height: 14px;
+.iconButton--sm svg {
+  width: 14px;
+  height: 14px;
 }
 
-.iconButton--md svg{
-    width: 16px;
-    height: 16px;
+.iconButton--md svg {
+  width: 16px;
+  height: 16px;
 }
 
-.iconButton--lg svg{
-    width: 18px;
-    height: 18px;
+.iconButton--lg svg {
+  width: 18px;
+  height: 18px;
 }
 
 .iconButton:disabled {
-    cursor: not-allowed;
-    box-shadow: none;
-}
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.iconButton:hover {
+  background-color: var(--hover-background, var(--grey-extraLight));
+  border-radius: var(--hover-border-radius, 50%);
+  filter: brightness(var(--hover-brightness, 0.97));
+}

package/dist/components/Input/Input.module.css

@@ -128,7 +128,7 @@
 
 .label {
   line-height: 14px;
-  font-weight: 500;
+  font-weight: 500 !important;
   transition: 0.3ms ease-out;
   /* color: var(--text-grey); */
 }
@@ -140,30 +140,30 @@
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: calc(100% - 32px);
-  color: var(--text-dark);
-  font-weight: var(--font-weight-semiBold);
+  color: var(--text-dark) !important;;
+  /* font-weight: var(--font-weight-semiBold) !important;; */
 }
-.label--default .lg {
-  font-size: 12px;
+.label--default.lg {
+  font-size: 12px !important;;
 }
 .label--default.md {
-  font-size: 10px;
+  font-size: 10px !important;;
 }
-.label--default .sm {
-  font-size: 16px;
+.label--default.sm {
+  font-size: 16px !important;;
 }
 .label--left {
-  color: var(--text-dark);
+  color: var(--text-dark) !important;;
   text-wrap-mode: nowrap;
 }
 .label--left.lg {
-  font-size: 14px;
+  font-size: 14px !important;;
 }
-.label--left .md {
-  font-size: 12px;
+.label--left.md {
+  font-size: 12px !important;;
 }
-.label--left .sm {
-  font-size: 10px;
+.label--left.sm {
+  font-size: 10px !important;;
 }
 
 /* Стили для обязательного input */
@@ -193,13 +193,13 @@
 }
 
 .helperText.md {
-  font-size: 10px;
+  font-size: 10px !important;
 }
 .helperText.sm {
-  font-size: 8px;
+  font-size: 8px !important;
 }
 .helperText.lg {
-  font-size: 12px;
+  font-size: 12px !important;
 }
 .helperText {
   position: absolute;
@@ -211,13 +211,13 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: var(--error-main);
+  color: var(--error-main) !important;
 }
 
 /* Стили для disabled */
 .input:disabled {
   background-color: rgba(120, 120, 128, 0.08);
-  color: var(--text-grey);
+  color: var(--text-grey) !important;
   cursor: not-allowed;
   border: none;
   box-shadow: none;

package/dist/components/ProgressBar/ProgressBar.js

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 /**
  * Компонент ProgressBar отображает прогресс в виде заполненной полосы.
  */
-export const ProgressBar = ({ value = 0, max = 100, size = 'md', showValue = true, animated = false, }) => {
+export const ProgressBar = ({ value = 0, max = 100, size = 'md', showValue = true, animated = false, animationDuration = 8000, setIsLoadingFinished, }) => {
     const [percent, setPercent] = useState(value);
     const validPercentage = Math.min(Math.max(value, 0), max);
     const progressBarClasses = classNames(styles['progress-bar'], styles[size], {
@@ -15,7 +15,7 @@ export const ProgressBar = ({ value = 0, max = 100, size = 'md', showValue = tru
     useEffect(() => {
         if (animated) {
             const targetPercent = validPercentage;
-            const animationDuration = 8000; // Длительность анимации в миллисекундах
+            // const animationDuration = animationDuration ?? 8000; // Длительность анимации в миллисекундах
             const stepTime = 100; // Интервал обновления в миллисекундах
             const totalSteps = animationDuration / stepTime;
             const increment = targetPercent / totalSteps;
@@ -25,6 +25,10 @@ export const ProgressBar = ({ value = 0, max = 100, size = 'md', showValue = tru
                 setPercent(Math.round(currentPercent));
                 if (currentPercent >= targetPercent) {
                     clearInterval(intervalId);
+                    // Вызываем callback, когда прогресс достиг 100%
+                    if (setIsLoadingFinished) {
+                        setIsLoadingFinished(true);
+                    }
                 }
             }, stepTime);
             return () => clearInterval(intervalId);
@@ -32,8 +36,8 @@ export const ProgressBar = ({ value = 0, max = 100, size = 'md', showValue = tru
         else {
             setPercent(validPercentage);
         }
-    }, [animated, validPercentage]);
-    return (React.createElement("div", { className: styles["progress-bar--wrapper"] },
+    }, [animated, validPercentage, setIsLoadingFinished, animationDuration]);
+    return (React.createElement("div", { className: styles['progress-bar--wrapper'] },
         React.createElement("progress", { id: "linear-progress", className: progressBarClasses, value: percent, max: max }),
         React.createElement("label", { htmlFor: "progress", className: styles['progress-bar-percentage'] }, showValue && (React.createElement(Typography, { variant: "Body1", color: '#9CA0A7', className: styles['progress-bar-percentage'] },
             percent,

package/dist/components/Snackbar/Snackbar.js

@@ -26,7 +26,7 @@ export const title = {
     warning: 'Внимание',
     info: 'Информация',
 };
-export const Snackbar = ({ children, type, duration = 10000, icon = true, onClose }) => {
+export const Snackbar = ({ children, type, duration = 10000, icon = true, onClose, style }) => {
     const [isVisible, setIsVisible] = useState(true);
     useEffect(() => {
         if (duration > 0) {
@@ -44,7 +44,7 @@ export const Snackbar = ({ children, type, duration = 10000, icon = true, onClos
     if (!isVisible)
         return null;
     const snackbarClasses = classNames(styles['snackbar-wrapper'], styles[`snackbar--${type}`]);
-    return (React.createElement("div", { className: snackbarClasses },
+    return (React.createElement("div", { className: snackbarClasses, style: style },
         React.createElement("div", { className: styles['snackbar-textAndIcon'] },
             icon && icons[type],
             React.createElement("div", { className: styles['snackbar-text'] },

package/dist/components/Snackbar/Snackbar.module.css

@@ -5,12 +5,19 @@
   padding: 10px 25px;
   gap: 20px;
   box-sizing: border-box;
-  position: relative;
+  /* position: relative; */
+  position: fixed;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1000;
+
   min-width: 340px;
   max-width: 500px;
 
   border-radius: 15px;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1)
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  background-color: var(--white);
 }
 .snackbar-textAndIcon {
   gap: 10px;
@@ -26,16 +33,16 @@
   width: 100%;
 }
 .snackbar--success {
-  background-color: rgba(52, 199, 89, 0.15);
+  background-color: rgba(216, 244, 223, 0.9);
 }
 .snackbar--error {
-  background-color: rgba(255, 59, 48, 0.15);
+  background-color: rgba(255, 214, 212, 0.9);
 }
 .snackbar--warning {
-  background-color: rgba(255, 204, 0, 0.15);
+  background-color: rgba(255, 240, 195, 0.9);
 }
 .snackbar--info {
-  background-color: var(--white);
+  background-color: rgba(244, 244, 244, 0.9);
   border: 1px solid #f2f2f7;
 }
 .button {

package/dist/index.d.ts

@@ -14,8 +14,10 @@ export { Tabs as Tabs } from './components/Tabs/Tabs';
 export { Tag as Tag } from './components/Tag/Tag';
 export { ToggleButton as ToggleButton } from './components/ToggleButton/ToggleButton';
 export { Typography as Typography } from './components/Typography/Typography';
-export { FileItem as FileItem } from './components/FileItem/FileItem';
 export { FileAttach as FileAttach } from './components/FileAttach/FileAttach';
+export { FileListAttaсhed as FileListAttaсhed } from './components/FileListAttached/FileListAttaсhed';
+export { FileItem as FileItem } from './components/FileItem/FileItem';
+export { FileLoader as FileLoader } from './components/FileLoader/FileLoader';
 export { Spinner as Spinner } from './components/Spinner/Spinner';
 export { Dialog as Dialog } from './components/Dialog/Dialog';
 export { IconButton as IconButton } from './components/IconButton/IconButton';
@@ -24,5 +26,6 @@ export { ListItem as ListItem } from './components/ListItem/ListItem';
 export { Breadcrumb as Breadcrumb } from './components/Breadcrumb/Breadcrumb';
 export { Breadcrumbs as Breadcrumbs } from './components/Breadcrumbs/Breadcrumbs';
 export { Tooltip as Tooltip } from './components/Tooltip/Tooltip';
-export type { ButtonProps, InputProps, DateInputProps, TagProps, SettingTagProps, ToggleButtonProps, BaseOptions, TOptions, DropdownProps, TypographyProps, ProgressBarProps, ProgressLoaderProps, RadioProps, TabsProps, ColorPickerProps, SnackbarProps, FileItemProps, FileAttachProps, SpinnerProps, DialogProps, IconButtonProps, BaseListProps, ListProps, ListItemProps, BreadcrumbProps, BreadcrumbsProps, TooltipProps, } from './types';
+export type { ButtonProps, InputProps, DateInputProps, TagProps, SettingTagProps, ToggleButtonProps, BaseOptions, TOptions, DropdownProps, TypographyProps, ProgressBarProps, ProgressLoaderProps, RadioProps, TabsProps, ColorPickerProps, SnackbarProps, FileAttachProps, FileListAttaсhedProps, FileItemProps, FileLoaderProps, SpinnerProps, DialogProps, IconButtonProps, BaseListProps, ListProps, ListItemProps, BreadcrumbProps, BreadcrumbsProps, TooltipProps, } from './types';
 import './fonts.css';
+import './colors.css';

package/dist/index.js

@@ -14,8 +14,10 @@ export { Tabs as Tabs } from './components/Tabs/Tabs';
 export { Tag as Tag } from './components/Tag/Tag';
 export { ToggleButton as ToggleButton } from './components/ToggleButton/ToggleButton';
 export { Typography as Typography } from './components/Typography/Typography';
-export { FileItem as FileItem } from './components/FileItem/FileItem';
 export { FileAttach as FileAttach } from './components/FileAttach/FileAttach';
+export { FileListAttaсhed as FileListAttaсhed } from './components/FileListAttached/FileListAttaсhed';
+export { FileItem as FileItem } from './components/FileItem/FileItem';
+export { FileLoader as FileLoader } from './components/FileLoader/FileLoader';
 export { Spinner as Spinner } from './components/Spinner/Spinner';
 export { Dialog as Dialog } from './components/Dialog/Dialog';
 export { IconButton as IconButton } from './components/IconButton/IconButton';
@@ -25,3 +27,4 @@ export { Breadcrumb as Breadcrumb } from './components/Breadcrumb/Breadcrumb';
 export { Breadcrumbs as Breadcrumbs } from './components/Breadcrumbs/Breadcrumbs';
 export { Tooltip as Tooltip } from './components/Tooltip/Tooltip';
 import './fonts.css';
+import './colors.css';

package/dist/types/index.d.ts

@@ -252,6 +252,10 @@ export interface ProgressBarProps {
     showValue?: boolean;
     /** Анимация */
     animated?: boolean;
+    /** Длительность анимации */
+    animationDuration?: number;
+    /**Для выставления флага окончания загрузки */
+    setIsLoadingFinished?: (value: boolean) => void;
 }
 export interface ProgressLoaderProps {
     /** Значение */
@@ -348,27 +352,94 @@ export type SnackbarProps = {
     /** Иконка */
     icon?: boolean;
     /** Длительность показа сообщения */
-    duration: number;
+    duration?: number;
     /** Функция обработки закрытия сообщения */
     onClose?: () => void;
+    /** Стили передаваемые напрямую */
+    style?: CSSProperties;
 };
-export interface FileItemProps {
-    /** Название файла */
-    name?: string;
-    /** Размер файла */
+export type TAttachments = {
+    id: string;
+    filename: string;
+    uri?: string;
     size?: number;
+    createDateTime?: string;
+    updateDateTime?: string;
+};
+export interface FileAttachProps {
+    filesList: TAttachments[];
+    /** Максимальный размер файла */
+    maxFileSize?: number;
+    /** Максимальное количество файлов */
+    maxFileCount?: number;
+    /**Поддерживаемые форматы файлов */
+    acceptedFormats?: Accept;
+    /**Добавленные файлы */
+    addedFiles: File[];
+    /**Сосотояние для добавления файлов */
+    setAddedFiles: (addedFiles: File[]) => void;
+    /** Функция обработки скачивания файла */
+    onDownload?: (file: TAttachments) => void;
+    /** Функция обработки удаления файла */
+    onDelete?: (id: string) => void;
+    /**Разрешени на добавление файлов*/
+    canAdd?: boolean;
+    /**Разрешение на удаление файлов */
+    canDelete?: boolean;
+    /**Разрешение на скачивание файлов */
+    canDownload?: boolean;
+    /**Позиционирование блока прикрепленных файлов */
+    position?: 'left' | 'right' | 'bottom';
+    /** Язык */
+    lng?: string;
+    /** Дополнительный класс */
+    className?: string;
+    /** Стили передаваемые напрямую */
+    style?: React.CSSProperties;
+}
+export interface FileListAttaсhedProps {
+    /** Список прикрепленных файлов */
+    filesList: TAttachments[] | [] | undefined;
+    /** Функция обработки удаления файла */
+    onDelete?: (id: string) => void;
+    /** Функция обработки скачивания файла */
+    onDownload?: (file: TAttachments) => void;
+    /**Разрешение на удаление файлов */
+    canDelete?: boolean;
+    /**Разрешение на скачивание файлов */
+    canDownload?: boolean;
+    /**Флаг для показа информационного текста */
+    isInfoShown?: boolean;
+    /** Язык */
+    lng?: string;
+    /** Дополнительный класс */
+    className?: string;
+    /** Стили передаваемые напрямую */
+    style?: React.CSSProperties;
+}
+export interface FileItemProps {
+    /** Файл */
+    file: TAttachments;
     /** Флаг загрузки файла */
     loading?: boolean;
     /** Текст ошибки загрузки файла */
     error?: string;
     /** Функция обработки скачивания файла */
-    onDownload?: () => void;
+    onDownload?: (file: TAttachments) => void;
     /** Функция обработки удаления файла */
-    onDelete?: () => void;
+    onDelete?: (id: string) => void;
+    /**Разрешение на удаление файлов */
+    canDelete?: boolean;
+    /**Разрешение на скачивание файлов */
+    canDownload?: boolean;
     /** Стили передаваемые напрямую */
     style?: CSSProperties;
+    /** Флаг добавленного файла */
+    isAddedFile?: boolean;
+    /** Флаг отклоненного файла */
+    isRejectedFile?: boolean;
 }
-export interface FileAttachProps {
+export interface FileLoaderProps {
     /** Максимальный размер файла */
     maxFileSize?: number;
     /** Максимальное количество файлов */
@@ -379,10 +450,10 @@ export interface FileAttachProps {
     addedFiles: File[];
     /**Сосотояние для добавления файлов */
     setAddedFiles: (addedFiles: File[]) => void;
-    /** Функция обработки скачивания файла */
-    onDownload?: () => void;
-    /**Заблокировано добавление файлов*/
-    disabled?: boolean;
+    /**Разрешени на добавление файлов*/
+    canAdd?: boolean;
+    /** Язык */
+    lng?: string;
     /** Дополнительный класс */
     className?: string;
     /** Стили передаваемые напрямую */
@@ -416,7 +487,7 @@ export interface IconButtonProps {
     /** Заблокированная кнопка */
     disabled?: boolean;
     /** Callback, который будет вызван при клике по кнопке */
-    onClick: () => void;
+    onClick: (e: React.MouseEvent) => void;
     /** Дочерние элементы */
     children?: ReactNode;
     /** Дополнительный класс */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kamotive_ui",
-  "version": "1.2.15",
+  "version": "1.2.17",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [