kamotive_ui 1.2.13 → 1.2.15

package/dist/Icons/ChevronDown/ChevronDown10.d.ts

@@ -3,4 +3,5 @@ export declare const ChevronDown10: FC<{
     color?: string;
     htmlColor?: string;
     strokeWidth?: string;
+    rotation?: number;
 }>;

package/dist/Icons/ChevronDown/ChevronDown10.js

@@ -1,5 +1,6 @@
 import React from 'react';
-export const ChevronDown10 = ({ color = 'inherit', htmlColor, strokeWidth, }) => {
+export const ChevronDown10 = ({ color = 'inherit', htmlColor, strokeWidth, rotation = 0, }) => {
     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.84,9.59L11.5,15.25L17.16,9.59L16.45,8.89L11.5,13.84L6.55,8.89L5.84,9.59Z" })));
+        React.createElement("g", { transform: `rotate(${rotation}, 12, 12)` },
+            React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: strokeWidth || '0', d: "M5.84,9.59L11.5,15.25L17.16,9.59L16.45,8.89L11.5,13.84L6.55,8.89L5.84,9.59Z" }))));
 };

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/IconDownload/IconDownload.d.ts

@@ -0,0 +1,7 @@
+import React, { FC } from 'react';
+export declare const IconDownload: FC<{
+    color?: string;
+    htmlColor?: string;
+    strokeWidth?: string;
+    onClick?: (event: React.MouseEvent<SVGSVGElement>) => void;
+}>;

package/dist/Icons/IconDownload/IconDownload.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const IconDownload = ({ color = 'inherit', htmlColor, strokeWidth, onClick, }) => {
+    return (React.createElement("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: color, onClick: onClick },
+        React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: strokeWidth || '0', d: "M12,4V16.25L17.25,11L18,11.66L11.5,18.16L5,11.66L5.75,11L11,16.25V4H12M3,19H4V21H19V19H20V22H3V19Z" })));
+};

package/dist/Icons/index.d.ts

@@ -18,3 +18,5 @@ export { IconClose10 } from './IconClose/IconClose10';
 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

@@ -18,3 +18,5 @@ export { IconClose10 } from './IconClose/IconClose10';
 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.js

@@ -3,13 +3,25 @@ import styles from './Checkbox.module.css';
 import classNames from 'classnames';
 ;
 import { Typography } from '../Typography/Typography';
-export const Checkbox = ({ checked, onChange, disabled = false, size = 'sm', label }) => {
+export const Checkbox = ({ checked, onChange, disabled = false, size = 'sm', label, color, filled }) => {
     const handleChange = (e) => {
         if (onChange) {
             onChange(e);
         }
     };
-    return (React.createElement("label", { className: styles.checkbox },
+    const checkboxStyles = {
+        '--border-color': color || 'var(--icons-active)',
+        '--border-color-hover': color ? 'color-mix(in srgb, var(--border-color) 60%, white)' : 'var(--blue-main)',
+        '--border-color-checked': color || 'var(--icons-medium)',
+        '--border-color-disabled': color ? 'color-mix(in srgb, var(--border-color) 30%, white)' : 'var(--icons-light)',
+        '--background-color-hover': filled ? 'var(--border-color-hover)' : 'var(--white)',
+        '--background-color-checked': filled ? 'var(--border-color-checked)' : 'var(--white)',
+        '--background-color-disabled': filled ? 'var(--border-color-disabled)' : 'var(--white)',
+        '--arrow-color': filled ? 'var(--white)' : 'var(--border-color-checked)',
+        '--arrow-color-hover': filled ? 'var(--white)' : 'var(--border-color-hover)',
+        '--arrow-color-disabled': filled ? 'var(--white)' : 'var(--border-color-disabled)',
+    };
+    return (React.createElement("label", { className: styles.checkbox, style: checkboxStyles },
         React.createElement("input", { type: "checkbox", checked: checked, onChange: handleChange, disabled: disabled, className: classNames(styles.input, styles[size]) }),
         React.createElement(Typography, { variant: 'Body2' }, label)));
 };

package/dist/components/Checkbox/Checkbox.module.css

@@ -23,23 +23,26 @@
   display: inline-block;
   padding: 6px;
 
-  border: 1px solid var(--icons-active);
+  border: 1px solid var(--border-color);
   border-radius: 3px;
   background-color: var(--white);
-  background-clip: content-box;
   position: relative;
   cursor: pointer;
 
 }
 
-.input[type="checkbox"]:hover,
-.input[type="checkbox"]:checked:hover,
-.input[type="checkbox"]:checked:hover::after {
-  border-color: var(--blue-main);
+.input[type="checkbox"]:hover {
+  border-color: var(--border-color-hover);
 }
 
 .input[type="checkbox"]:checked {
-  border-color: var(--icons-medium);
+  border-color: var(--border-color-checked);
+  background-color: var(--background-color-checked);
+}
+
+.input[type="checkbox"]:checked:hover {
+  border-color: var(--border-color-hover);
+  background-color: var(--background-color-hover);
 }
 
 .input[type="checkbox"]:checked::after {
@@ -52,16 +55,26 @@
   width: 40%;
   height: 75%;
 
-  border: solid var(--icons-medium);
+  border: solid var(--arrow-color);
   border-width: 0 2px 2px 0;
   background-color: none;
 }
 
-.input[type="checkbox"]:disabled,
-.input[type="checkbox"]:disabled:checked,
-.input[type="checkbox"]:disabled:checked:after {
+.input[type="checkbox"]:checked:hover::after {
+  border-color: var(--arrow-color-hover);
+}
+
+.input[type="checkbox"]:disabled {
   background-color: var(--white);
-  border-color: var(--icons-light);
+  border-color: var(--border-color-disabled);
   cursor: not-allowed;
   box-shadow: none;
 }
+
+.input[type="checkbox"]:disabled:checked {
+  background-color: var(--background-color-disabled);
+}
+
+.input[type="checkbox"]:disabled:checked:after {
+  border-color: var(--arrow-color-disabled);
+}

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

@@ -3,13 +3,13 @@ import { useDropzone } from 'react-dropzone';
 import styles from './FileAttach.module.css';
 import { Typography } from '../Typography/Typography';
 import { IconUpload } from '../../Icons';
-import { Loader } from '../Loader/Loader';
+import { FileItem } from '../FileItem/FileItem';
 import classNames from 'classnames';
 export const FileAttach = ({ maxFileSize = 2, maxFileCount = 10, acceptedFormats = {
     'image/*': ['.png', '.gif', '.jpeg', '.jpg'],
     'application/pdf': ['.pdf'],
     'application/msword': ['.doc', '.docx'],
-}, addedFiles, setAddedFiles, disabled = false, className, style, }) => {
+}, addedFiles, setAddedFiles, onDownload, disabled = false, className, style, }) => {
     const [errorFiles, setErrorFiles] = useState([]);
     const fileValidator = (file) => {
         if (file.size > maxFileSize * 1024 * 1024 * 1024) {
@@ -42,8 +42,8 @@ export const FileAttach = ({ maxFileSize = 2, maxFileCount = 10, acceptedFormats
         maxFiles: maxFileCount,
         disabled: disabled,
     });
-    const acceptedFileItems = addedFiles.map((file, index) => (React.createElement(Loader, { name: file.name, size: file.size, onClick: () => deleteAcceptedFile(addedFiles, setAddedFiles, file.name), key: index })));
-    const fileRejectionItems = errorFiles.map(({ file, errors }) => (React.createElement(Loader, { name: file.name, size: file.size, error: errors[0].message, onClick: () => deleteRejectedFile(errorFiles, setErrorFiles, file.name), key: file.path })));
+    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));
     };

package/dist/components/FileItem/FileItem.d.ts

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

package/dist/components/FileItem/FileItem.js

@@ -0,0 +1,20 @@
+import React 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 },
+        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 }),
+        error && (React.createElement(Typography, { variant: "Caption", color: "var(--error-main)" }, error))));
+};

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

@@ -0,0 +1,45 @@
+
+.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;
+}
+
+.fileItemIcon {
+    flex-shrink: 0
+}
+
+.fileItemName {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1; 
+    align-items: flex-start;
+    overflow: auto;
+}
+
+.fileIcon svg path {
+    stroke-width: 0.8;
+}

package/dist/components/IconButton/IconButton.js

@@ -1,9 +1,11 @@
 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, }) => {
-    return (React.createElement("button", { className: classNames(styles['iconButton'], styles[`iconButton--${size}`]), disabled: disabled, "aria-disabled": disabled, type: "button", onClick: onClick, style: style }, (icon || (typeof children === 'object' && children)) &&
-        React.cloneElement(icon, {
+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) &&
+        React.cloneElement(renderIcon, {
             htmlColor: color,
             strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0',
         })));

package/dist/components/List/List.d.ts

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

package/dist/components/List/List.js

@@ -0,0 +1,91 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import styles from './List.module.css';
+import { Typography } from '../Typography/Typography';
+import { Checkbox } from '../Checkbox/Checkbox';
+import { RadioButton } from '../RadioButton/RadioButton';
+import { ChevronDown10 } from '../../Icons';
+export const List = ({ onClick, onCheck, onRadioSelect, checked = false, selected = false, disabled = false, label, id, style, className, collapsible = false, open = false, withCheckbox = false, checkboxColor, checkboxFilled, withRadioButton = false, customBullet, customItemBullet, bulletClassName, children, isHeader = false, parentChecked = false, }) => {
+    const [isOpen, setIsOpen] = useState(open);
+    const [isChecked, setIsChecked] = useState(checked || parentChecked);
+    const childIds = [];
+    React.Children.forEach(children, (child) => {
+        if (React.isValidElement(child) && child.props.id) {
+            childIds.push(child.props.id);
+        }
+    });
+    const handleClick = (e) => {
+        if (collapsible) {
+            setIsOpen(!isOpen);
+        }
+        if (onClick) {
+            onClick();
+        }
+    };
+    const handleChildCheck = (childId, isChecked) => {
+        if (onCheck) {
+            onCheck(childId, isChecked);
+        }
+    };
+    const handleChildRadioSelect = (childId) => {
+        if (onRadioSelect) {
+            onRadioSelect(childId);
+        }
+    };
+    const handleCheckboxClick = (e) => {
+        e.stopPropagation();
+        const newCheckedState = !isChecked;
+        setIsChecked(newCheckedState);
+        if (onCheck) {
+            onCheck(id || "", newCheckedState);
+        }
+        if (childIds.length > 0 && onCheck) {
+            childIds.forEach((childId) => {
+                onCheck(childId, newCheckedState);
+            });
+        }
+    };
+    const handleRadioClick = (e) => {
+        e.stopPropagation();
+        if (id && onRadioSelect) {
+            onRadioSelect(id);
+        }
+    };
+    useEffect(() => {
+        setIsChecked(parentChecked || checked);
+    }, [parentChecked, checked]);
+    const headerClassNames = classNames(styles.header, className);
+    const contentClassNames = classNames(styles.content, isOpen ? styles['content--expanded'] : styles['content--collapsed']);
+    return (React.createElement("div", { className: styles.collapsibleList },
+        label && (React.createElement("div", { className: headerClassNames, onClick: handleClick, style: style },
+            !isHeader && (React.createElement("div", null,
+                withCheckbox && (React.createElement("span", { onClick: handleCheckboxClick },
+                    React.createElement(Checkbox, { checked: isChecked, color: checkboxColor, filled: checkboxFilled, disabled: disabled }))),
+                withRadioButton && (React.createElement("span", { onClick: handleRadioClick },
+                    React.createElement(RadioButton, { checked: selected, value: id, disabled: disabled }))),
+                customBullet && React.createElement("span", { className: classNames(styles.bullet, bulletClassName) }, customBullet))),
+            React.createElement(Typography, { variant: "Body1" }, label),
+            collapsible && (React.createElement("span", { className: styles.indicator }, isOpen ? React.createElement(ChevronDown10, null) : React.createElement(ChevronDown10, { rotation: 270 }))))),
+        React.createElement("div", { className: collapsible ? contentClassNames : styles.content, style: { paddingLeft: !label ? 0 : '16px' } }, React.Children.map(children, (child) => {
+            if (React.isValidElement(child)) {
+                return React.cloneElement(child, {
+                    bulletClassName: classNames(styles.bullet, child.props.bulletClassName || bulletClassName),
+                    customBullet: child.props.customBullet !== undefined
+                        ? child.props.customBullet
+                        : customItemBullet !== undefined
+                            ? customItemBullet
+                            : customBullet,
+                    withCheckbox: child.props.withCheckbox !== undefined ? child.props.withCheckbox : withCheckbox,
+                    checkboxFilled: child.props.checkboxFilled !== undefined ? child.props.checkboxFilled : checkboxFilled,
+                    withRadioButton: child.props.withRadioButton !== undefined ? child.props.withRadioButton : withRadioButton,
+                    onCheck: handleChildCheck,
+                    onRadioSelect: handleChildRadioSelect,
+                    parentChecked: isChecked,
+                    selected: child.props.selected,
+                    style: child.props.style || style,
+                    className: child.props.className,
+                });
+            }
+            return child;
+        }))));
+};

package/dist/components/List/List.module.css

@@ -0,0 +1,40 @@
+.collapsibleList {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+	padding: 8px;
+}
+
+.checkbox--active {
+	font-weight: bold;
+}
+
+.content {
+	transition: max-height 0.3s ease-out;
+	overflow: hidden;
+}
+
+.content--expanded {
+	max-height: fit-content;
+}
+
+.content--collapsed {
+	max-height: 0;
+}
+
+.bullet {
+	margin-right: 10px;
+}
+
+.indicator {
+	margin-left: auto;
+	font-size: 12px;
+	display: flex;
+	justify-content: center;
+}

package/dist/components/ListItem/ListItem.d.ts

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

package/dist/components/ListItem/ListItem.js

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import styles from './ListItem.module.css';
+import { Typography } from '../Typography/Typography';
+import { Checkbox } from '../Checkbox/Checkbox';
+import { RadioButton } from '../RadioButton/RadioButton';
+export const ListItem = ({ id, onClick, onCheck, onRadioSelect, checked = false, selected = false, disabled = false, label, style, className, withCheckbox = false, checkboxColor, checkboxFilled, withRadioButton = false, customBullet, bulletClassName, children, parentChecked, }) => {
+    const [isChecked, setIsChecked] = useState(checked || parentChecked);
+    const itemClassNames = classNames(className, styles.listItem);
+    const handleClick = (e) => {
+        if (onClick) {
+            e.stopPropagation();
+            onClick();
+        }
+    };
+    const handleCheckboxClick = (e) => {
+        e.stopPropagation();
+        const newCheckedState = !isChecked;
+        setIsChecked(newCheckedState);
+        if (onCheck) {
+            onCheck(id || "", newCheckedState);
+        }
+    };
+    const handleRadioClick = (e) => {
+        e.stopPropagation();
+        if (id && onRadioSelect) {
+            onRadioSelect(id);
+        }
+    };
+    useEffect(() => {
+        setIsChecked(parentChecked || checked);
+    }, [parentChecked, checked]);
+    return (React.createElement("div", { className: itemClassNames, style: style, onClick: handleClick },
+        withCheckbox && (React.createElement("span", { className: styles.icon, onClick: handleCheckboxClick },
+            React.createElement(Checkbox, { checked: isChecked, color: checkboxColor, filled: checkboxFilled, disabled: disabled }))),
+        withRadioButton && (React.createElement("span", { className: styles.icon, onClick: handleRadioClick },
+            React.createElement(RadioButton, { checked: selected, value: id, disabled: disabled }))),
+        customBullet && React.createElement("span", { className: bulletClassName }, customBullet),
+        React.createElement(Typography, { variant: "Body1" }, label),
+        children));
+};

package/dist/components/ListItem/ListItem.module.css

@@ -0,0 +1,6 @@
+.listItem {
+	display: flex;
+	align-items: center;
+	padding: 8px;
+	cursor: pointer;
+}

package/dist/components/Tag/Tag.d.ts

@@ -1,3 +1,4 @@
 import { FC } from 'react';
 import { TagProps } from '../../types';
+export declare const hexToRgba: (hex: string, alpha: number) => string;
 export declare const Tag: FC<TagProps>;

package/dist/components/Tag/Tag.js

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 ;
 import styles from './Tag.module.css';
 import classNames from 'classnames';
-const hexToRgba = (hex, alpha) => {
+export const hexToRgba = (hex, alpha) => {
     //преобразуем в rgba для заднего фона
     const r = parseInt(hex.slice(1, 3), 16);
     const g = parseInt(hex.slice(3, 5), 16);

package/dist/components/Tooltip/Tooltip.d.ts

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

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,198 @@
+import React, { useEffect, useRef, useState } from 'react';
+import styles from './Tooltip.module.css';
+import { Typography } from '../Typography/Typography';
+import classNames from 'classnames';
+import ReactDOM from 'react-dom';
+import { hexToRgba } from '../Tag/Tag';
+export const Tooltip = ({ label, children, className, style, overlayChildren = false, textSize = 'sm', position = 'none', displayDelay = 750, hideDelay = 500, opacity = 0.4, color, followCursor = false, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isVisible, setIsVisible] = useState(false);
+    const [coords, setCoords] = useState({ x: 0, y: 0 });
+    const [childrenRect, setChildrenRect] = useState({
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+        contentX: 0,
+        contentY: 0,
+        contentWidth: 0,
+        contentHeight: 0,
+    });
+    const timeoutRef = useRef(null);
+    const mousePositionRef = useRef({ x: 0, y: 0 });
+    const childrenRef = useRef(null);
+    const tooltipElementRef = useRef(null);
+    const updateContainerRect = () => {
+        if (childrenRef.current) {
+            const childElement = childrenRef.current.firstElementChild;
+            const rect = childElement.getBoundingClientRect();
+            const computedStyle = window.getComputedStyle(childElement);
+            const paddingTop = parseFloat(computedStyle.paddingTop);
+            const paddingBottom = parseFloat(computedStyle.paddingBottom);
+            const paddingLeft = parseFloat(computedStyle.paddingLeft);
+            const paddingRight = parseFloat(computedStyle.paddingRight);
+            const contentX = rect.left + paddingLeft;
+            const contentY = rect.top + paddingTop;
+            const contentHeight = rect.height - paddingTop - paddingBottom;
+            const contentWidth = rect.width - paddingLeft - paddingRight;
+            setChildrenRect({
+                x: rect.left,
+                y: rect.top,
+                width: rect.width,
+                height: rect.height,
+                contentX: contentX,
+                contentY: contentY,
+                contentWidth: contentWidth,
+                contentHeight: contentHeight,
+            });
+        }
+    };
+    useEffect(() => {
+        updateContainerRect();
+        window.addEventListener('resize', updateContainerRect);
+        window.addEventListener('scroll', updateContainerRect);
+        return () => {
+            window.removeEventListener('resize', updateContainerRect);
+            window.removeEventListener('scroll', updateContainerRect);
+        };
+    }, []);
+    const adjustToViewPort = (posX, posY) => {
+        if (tooltipElementRef.current) {
+            const OFFSET = 15;
+            const tooltipWidth = tooltipElementRef.current.offsetWidth;
+            const tooltipHeight = tooltipElementRef.current.offsetHeight;
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            if (posX + tooltipWidth > viewportWidth) {
+                posX = viewportWidth - tooltipWidth - OFFSET;
+            }
+            if (posY + tooltipHeight > viewportHeight) {
+                posY = mousePositionRef.current.y - tooltipHeight - OFFSET;
+            }
+        }
+        return [posX, posY];
+    };
+    const updateCoords = (mouseX, mouseY) => {
+        const OFFSET_X = 8;
+        const OFFSET_Y = 15;
+        const CONTENT_OFFSET_Y = 5;
+        const cursorX = mouseX !== undefined ? mouseX : mousePositionRef.current.x;
+        const cursorY = mouseY !== undefined ? mouseY : mousePositionRef.current.y;
+        // Если followCursor активен, всегда используем позицию курсора
+        if (followCursor) {
+            let posX = cursorX + OFFSET_X;
+            let posY = cursorY + OFFSET_Y;
+            // Проверяем границы экрана
+            [posX, posY] = adjustToViewPort(posX, posY);
+            setCoords({
+                x: posX,
+                y: posY
+            });
+        }
+        else {
+            // Оригинальная логика позиционирования
+            let posX = cursorX + OFFSET_X;
+            let posY = overlayChildren || cursorY > childrenRect.contentY + childrenRect.contentHeight
+                ? cursorY + OFFSET_Y
+                : childrenRect.contentY + childrenRect.contentHeight + CONTENT_OFFSET_Y;
+            if (position === 'bottom-center' || position === 'bottom-right' || position === 'bottom-left') {
+                posY = childrenRect.contentY + childrenRect.contentHeight + CONTENT_OFFSET_Y;
+            }
+            else if (position !== 'none') {
+                posY = childrenRect.contentY - childrenRect.contentHeight - CONTENT_OFFSET_Y;
+            }
+            setCoords({
+                x: posX,
+                y: posY
+            });
+        }
+        if (!isOpen) {
+            setIsOpen(true);
+            setTimeout(() => {
+                setIsVisible(true);
+            }, 10);
+        }
+        if (!followCursor) {
+            /** положение подсказки
+             * x - всегда зависит от положения курсора в момент наведения
+             * y - если пропс overlayChildren true, подсказка будет поверх дочерних компонентов в месте наведения,
+             * в ином случае подсказка всплывает под дочерним элементом
+             */
+            let posX = mousePositionRef.current.x + OFFSET_X;
+            let posY = overlayChildren || mousePositionRef.current.y > childrenRect.contentY + childrenRect.contentHeight
+                ? mousePositionRef.current.y + OFFSET_Y
+                : childrenRect.contentY + childrenRect.contentHeight + CONTENT_OFFSET_Y;
+            if (position === 'bottom-center' || position === 'bottom-right' || position === 'bottom-left') {
+                posY = childrenRect.contentY + childrenRect.contentHeight + CONTENT_OFFSET_Y;
+            }
+            else if (position !== 'none') {
+                posY = childrenRect.contentY - childrenRect.contentHeight - CONTENT_OFFSET_Y;
+            }
+            setCoords({
+                x: posX,
+                y: posY
+            });
+            setIsOpen(true);
+            setTimeout(() => {
+                setIsVisible(true);
+            }, 10);
+            setTimeout(() => {
+                if (tooltipElementRef.current) {
+                    const tooltipWidth = tooltipElementRef.current.offsetWidth;
+                    if (position === 'bottom-center' || position === 'top-center') {
+                        posX = childrenRect.x + (childrenRect.width - tooltipWidth) / 2;
+                    }
+                    else if (position === 'bottom-right' || position === 'top-right') {
+                        posX = childrenRect.contentX + childrenRect.contentWidth - tooltipWidth;
+                    }
+                    else if (position !== 'none') {
+                        posX = childrenRect.contentX;
+                    }
+                    adjustToViewPort(posX, posY);
+                    setCoords({
+                        x: posX,
+                        y: posY
+                    });
+                }
+            }, 0);
+        }
+    };
+    const handleMouseEnter = (e) => {
+        updateContainerRect();
+        mousePositionRef.current = {
+            x: e.clientX,
+            y: e.clientY,
+        };
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = window.setTimeout(() => {
+            updateCoords();
+        }, displayDelay);
+    };
+    const handleMouseLeave = () => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        setIsVisible(false);
+        setTimeout(() => {
+            setIsOpen(false);
+        }, hideDelay);
+    };
+    const handleMouseMove = (e) => {
+        mousePositionRef.current = {
+            x: e.clientX,
+            y: e.clientY,
+        };
+        if (isOpen && followCursor) {
+            updateCoords(e.clientX, e.clientY);
+        }
+    };
+    const tooltipStyles = Object.assign(Object.assign({}, style), { position: 'fixed', left: `${coords.x}px`, top: `${coords.y}px`, backgroundColor: color ? hexToRgba(color, opacity) : `rgba(0, 0, 0, ${opacity})`, zIndex: 1000 });
+    const tooltipClassNames = classNames(styles.tooltip, isVisible && styles['tooltip--visible'], className);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove, className: styles.wrapper, ref: childrenRef }, children),
+        isOpen && ReactDOM.createPortal(React.createElement("div", { ref: tooltipElementRef, className: tooltipClassNames, style: tooltipStyles },
+            React.createElement(Typography, { variant: textSize === 'sm' ? "Caption-Medium" : textSize === 'md' ? "Body2-Medium" : "Body1-Medium" }, label)), document.body)));
+};

package/dist/components/Tooltip/Tooltip.module.css

@@ -0,0 +1,22 @@
+.tooltip {
+	backdrop-filter: blur(5px);
+	border-radius: 8px;
+	padding: 5px 8px;
+	width: fit-content;
+	font-family: var(--font-family-content);
+	color: white;
+	display: flex;
+	align-items: center;
+	pointer-events: none;
+	box-shadow: 0 4px 14.9px -3px rgba(0, 0, 0, 0.3);
+	opacity: 0;
+  	transition: opacity 0.1s ease-out;
+}
+
+.tooltip--visible {
+	opacity: 1;
+}
+
+.wrapper {
+	width: fit-content;
+}

package/dist/components/Typography/Typography.module.css

@@ -81,7 +81,7 @@
 .typography--variant-Body-Medium {
   font-family: var(--font-family-content);
   font-size: var(--font-size-16);
-  font-weight: var(--font-weight-meduim);
+  font-weight: var(--font-weight-medium);
   line-height: var(--lineHeight-16);
   letter-spacing: var(--letterSpacing);
   text-decoration: none;
@@ -161,7 +161,7 @@
 .typography--variant-Body2-Medium {
   font-family: var(--font-family-content);
   font-size: var(--font-size-12);
-  font-weight: var(--font-weight-meduim);
+  font-weight: var(--font-weight-medium);
   line-height: var(--lineHeight-12);
   letter-spacing: var(--letterSpacing);
   text-decoration: none;
@@ -184,25 +184,25 @@
 }
 .typography--variant-Caption {
   font-family: var(--font-family-content);
-  font-size: var(--font-size-12);
+  font-size: var(--font-size-10);
   font-weight: var(--font-weight-regular);
-  line-height: var(--lineHeight-12);
+  line-height: var(--lineHeight-10);
   letter-spacing: var(--letterSpacing);
   text-decoration: none;
 }
 .typography--variant-Caption-Medium {
   font-family: var(--font-family-content);
-  font-size: var(--font-size-12);
-  font-weight: var(--font-weight-meduim);
-  line-height: var(--lineHeight-12);
+  font-size: var(--font-size-10);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--lineHeight-10);
   letter-spacing: var(--letterSpacing);
   text-decoration: none;
 }
 .typography--variant-Caption-Bold {
   font-family: var(--font-family-content);
-  font-size: var(--font-size-12);
+  font-size: var(--font-size-10);
   font-weight: var(--font-weight-bold);
-  line-height: var(--lineHeight-12);
+  line-height: var(--lineHeight-10);
   letter-spacing: var(--letterSpacing);
   text-decoration: none;
 }

package/dist/index.d.ts

@@ -14,10 +14,15 @@ 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 { Loader as Loader } from './components/Loader/Loader';
+export { FileItem as FileItem } from './components/FileItem/FileItem';
 export { FileAttach as FileAttach } from './components/FileAttach/FileAttach';
 export { Spinner as Spinner } from './components/Spinner/Spinner';
 export { Dialog as Dialog } from './components/Dialog/Dialog';
 export { IconButton as IconButton } from './components/IconButton/IconButton';
-export type { ButtonProps, InputProps, DateInputProps, TagProps, SettingTagProps, ToggleButtonProps, BaseOptions, TOptions, DropdownProps, TypographyProps, ProgressBarProps, ProgressLoaderProps, RadioProps, TabsProps, ColorPickerProps, SnackbarProps, LoaderProps, FileAttachProps, SpinnerProps, DialogProps, IconButtonProps, } from './types';
+export { List as List } from './components/List/List';
+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';
 import './fonts.css';

package/dist/index.js

@@ -14,9 +14,14 @@ 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 { Loader as Loader } from './components/Loader/Loader';
+export { FileItem as FileItem } from './components/FileItem/FileItem';
 export { FileAttach as FileAttach } from './components/FileAttach/FileAttach';
 export { Spinner as Spinner } from './components/Spinner/Spinner';
 export { Dialog as Dialog } from './components/Dialog/Dialog';
 export { IconButton as IconButton } from './components/IconButton/IconButton';
+export { List as List } from './components/List/List';
+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';
 import './fonts.css';

package/dist/types/index.d.ts

@@ -278,6 +278,10 @@ export interface CheckboxProps {
     size?: 'sm' | 'md';
     /** Текст лейбла */
     label?: string;
+    /** Цвет чекбока */
+    color?: string;
+    /** Заливка */
+    filled?: boolean;
 }
 export interface RadioProps {
     /** Значение */
@@ -348,7 +352,7 @@ export type SnackbarProps = {
     /** Функция обработки закрытия сообщения */
     onClose?: () => void;
 };
-export interface LoaderProps {
+export interface FileItemProps {
     /** Название файла */
     name?: string;
     /** Размер файла */
@@ -357,8 +361,12 @@ export interface LoaderProps {
     loading?: boolean;
     /** Текст ошибки загрузки файла */
     error?: string;
-    /** Функция обработки */
-    onClick?: () => void;
+    /** Функция обработки скачивания файла */
+    onDownload?: () => void;
+    /** Функция обработки удаления файла */
+    onDelete?: () => void;
+    /** Стили передаваемые напрямую */
+    style?: CSSProperties;
 }
 export interface FileAttachProps {
     /** Максимальный размер файла */
@@ -369,14 +377,16 @@ export interface FileAttachProps {
     acceptedFormats?: Accept;
     /**Добавленные файлы */
     addedFiles: File[];
-    /**Состояние для добавления файлов */
+    /**Сосотояние для добавления файлов */
     setAddedFiles: (addedFiles: File[]) => void;
+    /** Функция обработки скачивания файла */
+    onDownload?: () => void;
     /**Заблокировано добавление файлов*/
     disabled?: boolean;
     /** Дополнительный класс */
     className?: string;
     /** Стили передаваемые напрямую */
-    style?: CSSProperties;
+    style?: React.CSSProperties;
 }
 export interface DialogProps {
     /** Флаг открытия окна */
@@ -409,4 +419,84 @@ export interface IconButtonProps {
     onClick: () => void;
     /** Дочерние элементы */
     children?: ReactNode;
+    /** Дополнительный класс */
+    className?: string;
+}
+export interface BaseListProps {
+    /** Идентификатор */
+    id?: string;
+    /** Стиль элемента списка */
+    style?: CSSProperties;
+    /** Дополнительный класс */
+    className?: string;
+    /** Обработчик клика */
+    onClick?: () => void;
+    /** Обработчик выбора чекбокса */
+    onCheck?: (activeId: string | string[], isChecked: boolean) => void;
+    /** Заблокированный чекбокс/RadioButton */
+    disabled?: boolean;
+    /** Кастомный цвет чекбокса */
+    checkboxColor?: string;
+    /** Заливка чекбокса */
+    checkboxFilled?: boolean;
+    /** Обработчик выбора RadioButton */
+    onRadioSelect?: (id: string) => void;
+    /** Активный чекбокс */
+    checked?: boolean;
+    /** Активный чекбокс родительского компонента */
+    parentChecked?: boolean;
+    /** Выбранный RadioButton */
+    selected?: boolean;
+    /** Отображаемый текст */
+    label?: string;
+    /** Добавлен чекбокс */
+    withCheckbox?: boolean;
+    /** Добавлен RadioButton */
+    withRadioButton?: boolean;
+    /** Кастомный буллит */
+    customBullet?: React.ReactNode;
+    /** Стиль кастомного буллита */
+    bulletClassName?: string;
+}
+export interface ListItemProps extends BaseListProps {
+    /** Дочерние элементы */
+    children?: ReactNode;
+}
+export interface ListProps extends BaseListProps {
+    /** Дочерние элементы */
+    children: React.ReactElement<ListItemProps> | React.ReactElement<ListItemProps>[];
+    /** Возможность раскрытия списка */
+    collapsible?: boolean;
+    /** Кастомный буллит дочернего компонента */
+    customItemBullet?: React.ReactNode;
+    /** Внешний компонент без буллитов/чекбоксов */
+    isHeader?: boolean;
+    /** Раскрытый список */
+    open?: boolean;
+}
+export interface TooltipProps {
+    /** Текст подсказки */
+    label: string;
+    /** Дочерние элементы */
+    children: React.ReactNode;
+    /** Дополнительный класс */
+    className?: string;
+    /** Стиль подсказки */
+    style?: CSSProperties;
+    /** Положение подсказки */
+    overlayChildren?: boolean;
+    /** Размер текста */
+    textSize?: 'sm' | 'md' | 'lg';
+    /** Позиция подсказки */
+    position?: 'none' | 'bottom-center' | 'bottom-right' | 'bottom-left' | 'top-center' | 'top-right' | 'top-left';
+    /** Время, через которое будет показана подсказка */
+    displayDelay?: number;
+    /** Время, через которое будет скрыта подсказка */
+    hideDelay?: number;
+    /** Прозрачность подсказки (значение от 0 до 1) */
+    opacity?: number;
+    /** Цвет подсказки */
+    color?: string;
+    /** Подсказка, следующая за курсором */
+    followCursor?: boolean;
 }

package/package.json

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

package/dist/components/Loader/Loader.d.ts

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

package/dist/components/Loader/Loader.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import styles from './Loader.module.css';
-import { Typography } from '../Typography/Typography';
-import { IconFile } from '../../Icons/IconFile/IconFile';
-import { ProgressBar } from '../ProgressBar/ProgressBar';
-export const Loader = ({ name, size = 0, loading = false, error = '', onClick }) => {
-    return (React.createElement("div", { className: `${styles['loader']} ${error ? styles['error'] : ''}` },
-        React.createElement("div", { className: styles['loaderFile'] },
-            React.createElement("div", { className: styles['loaderInfo'] },
-                React.createElement("div", { className: styles['loaderIcon'] },
-                    React.createElement(IconFile, { htmlColor: 'var(--icons-grey)' })),
-                React.createElement("div", { className: styles['loaderName'] },
-                    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)} кБ`)))),
-            React.createElement("button", { type: "button", "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", title: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0444\u0430\u0439\u043B", onClick: onClick })),
-        loading && React.createElement(ProgressBar, { animated: true, size: "sm", value: 100 }),
-        error && (React.createElement(Typography, { variant: "Caption", color: "var(--error-main)" }, error))));
-};

package/dist/components/Loader/Loader.module.css

@@ -1,75 +0,0 @@
-
-.loader {
-    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);
-  }
-
-  .loaderFile{
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 5px;
-  }
-  .loaderInfo {
-    display: flex;
-    flex-direction: row;
-    gap: 5px;
-    flex-grow: 1; 
-    align-items: flex-start;
-    overflow: hidden;
-}
-
-.loaderIcon {
-    flex-shrink: 0
-}
-
-.loaderName {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1; 
-    align-items: flex-start;
-    overflow: auto;
-}
-
-.loaderButton{
-    position: absolute;
-    left: 50%;
-}
-
-.loader button[aria-label="Закрыть"] {
-    background: none;
-    border: none;
-    padding: 0;
-    cursor: pointer;
-    position: relative;
-    width: 10px;
-    height: 10px;
-    flex-shrink: 0
-}
-
-.loader button[aria-label="Закрыть"]::before,
-.loader button[aria-label="Закрыть"]::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%) rotate(45deg);
-    height: 1px;
-    width: 100%;
-    background-color: var(--icons-grey); 
-}
-
-.loader button[aria-label="Закрыть"]::after {
-    transform: translate(-50%, -50%) rotate(-45deg);
-}
-