kamotive_ui 1.2.14 → 1.2.16

package/dist/Icons/IconAdd/IconAdd.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+export declare const IconAdd: FC<{
+    color?: string;
+    htmlColor?: string;
+    strokeWidth?: string;
+}>;

package/dist/Icons/IconAdd/IconAdd.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const IconAdd = ({ color = 'inherit', htmlColor, strokeWidth, }) => {
+    return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: color },
+        React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: strokeWidth || '0', d: "M5,13V12H11V6H12V12H18V13H12V19H11V13H5Z" })));
+};

package/dist/Icons/index.d.ts

@@ -19,3 +19,4 @@ export { IconColorPicker10 } from './IconColorPicker/IconColorPicker10';
 export { IconFile } from './IconFile/IconFile';
 export { IconUpload } from './IconUpload/IconUpload';
 export { IconDownload } from './IconDownload/IconDownload';
+export { IconAdd } from './IconAdd/IconAdd';

package/dist/Icons/index.js

@@ -19,3 +19,4 @@ export { IconColorPicker10 } from './IconColorPicker/IconColorPicker10';
 export { IconFile } from './IconFile/IconFile';
 export { IconUpload } from './IconUpload/IconUpload';
 export { IconDownload } from './IconDownload/IconDownload';
+export { IconAdd } from './IconAdd/IconAdd';

package/dist/components/Checkbox/Checkbox.stories.d.ts

@@ -0,0 +1,66 @@
+import { ChangeEventHandler } from 'react';
+import type { Meta } from '@storybook/react';
+export interface CheckboxProps {
+    /** Идентификатор */
+    checked?: boolean;
+    /** Обработчик изменения состояния */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /** Заблокированный чекбокс */
+    disabled?: boolean;
+    /** Размер чекбокса */
+    size?: 'sm' | 'md';
+    /** Текст лейбла */
+    label?: string;
+}
+declare const meta: Meta<CheckboxProps>;
+export default meta;
+export declare const CheckboxOff: {
+    (argTypes: CheckboxProps): JSX.Element;
+    storyName: string;
+};
+export declare const CheckboxLabel: {
+    (argTypes: CheckboxProps): JSX.Element;
+    storyName: string;
+    args: {
+        label: string;
+    };
+};
+export declare const CheckboxChecked: {
+    (argTypes: CheckboxProps): JSX.Element;
+    storyName: string;
+    args: {
+        checked: boolean;
+        disabled: boolean;
+    };
+};
+export declare const CheckboxDisabled: {
+    (argTypes: CheckboxProps): JSX.Element;
+    storyName: string;
+    args: {
+        checked: boolean;
+        disabled: boolean;
+    };
+};
+export declare const CheckboxCheckedDisabled: {
+    (argTypes: CheckboxProps): JSX.Element;
+    storyName: string;
+    args: {
+        checked: boolean;
+        disabled: boolean;
+    };
+};
+export declare const CheckboxCustomColor: {
+    (argTypes: CheckboxProps): JSX.Element;
+    storyName: string;
+    args: {
+        color: string;
+    };
+};
+export declare const CheckboxCustomColorFilled: {
+    (argTypes: CheckboxProps): JSX.Element;
+    storyName: string;
+    args: {
+        color: string;
+        filled: boolean;
+    };
+};

package/dist/components/Checkbox/Checkbox.stories.js

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import { Checkbox } from './Checkbox';
+const meta = {
+    component: Checkbox,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    decorators: [
+        (Story) => (React.createElement("div", { style: {
+                backgroundColor: 'var(--white)',
+                padding: '30px',
+                borderRadius: '10px',
+                width: '900px'
+            } },
+            React.createElement(Story, null))),
+    ],
+    args: {
+        size: 'sm',
+        disabled: false,
+    },
+    argTypes: {
+        size: {
+            description: 'Свойство, позволяющее регулировать размер чекбокса',
+            control: { type: 'radio' },
+            options: ['sm', 'md'],
+        },
+        disabled: { description: 'Устанавливает атрибут disabled', control: { type: 'boolean' } },
+        checked: { description: 'Задаёт включённое состояние для компонента' },
+        label: { description: 'Текст лейбла чекбокса', type: 'string' },
+    },
+};
+export default meta;
+export const CheckboxOff = (argTypes) => {
+    const [checked, setChecked] = useState(false);
+    const handleChange = () => {
+        setChecked(prev => !prev);
+    };
+    return (React.createElement(Checkbox, Object.assign({ checked: checked, onChange: handleChange }, argTypes)));
+};
+CheckboxOff.storyName = 'Checkbox по умолчанию';
+export const CheckboxLabel = (argTypes) => React.createElement(Checkbox, Object.assign({}, argTypes));
+CheckboxLabel.storyName = 'Checkbox c label';
+CheckboxLabel.args = {
+    label: 'Чекбокс',
+};
+export const CheckboxChecked = (argTypes) => React.createElement(Checkbox, Object.assign({}, argTypes));
+CheckboxChecked.storyName = 'Checkbox выбран';
+CheckboxChecked.args = {
+    checked: true,
+    disabled: false,
+};
+export const CheckboxDisabled = (argTypes) => React.createElement(Checkbox, Object.assign({}, argTypes));
+CheckboxDisabled.storyName = 'Checkbox заблокирован';
+CheckboxDisabled.args = {
+    checked: false,
+    disabled: true,
+};
+export const CheckboxCheckedDisabled = (argTypes) => React.createElement(Checkbox, Object.assign({}, argTypes));
+CheckboxCheckedDisabled.storyName = 'Checkbox выбран и заблокирован';
+CheckboxCheckedDisabled.args = {
+    checked: true,
+    disabled: true,
+};
+export const CheckboxCustomColor = (argTypes) => React.createElement(Checkbox, Object.assign({}, argTypes));
+CheckboxCustomColor.storyName = 'Checkbox с кастомным цветом';
+CheckboxCustomColor.args = {
+    color: 'red',
+};
+export const CheckboxCustomColorFilled = (argTypes) => React.createElement(Checkbox, Object.assign({}, argTypes));
+CheckboxCustomColorFilled.storyName = 'Checkbox с кастомным цветом заполненный';
+CheckboxCustomColorFilled.args = {
+    color: 'red',
+    filled: true,
+};

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 }) => {
-    return (React.createElement("div", { className: `${styles['fileItem']} ${error ? styles['error'] : ''}` },
+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-Medium", 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,46 @@
+.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;
+}
+.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' ? (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' ? (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>;