kamotive_ui 1.2.1 → 1.2.2

package/dist/components/Dropdown/Dropdown.js

@@ -5,22 +5,23 @@ import { ChevronDown10 } from '../../Icons/ChevronDown/ChevronDown10';
 import { ChevronUp10 } from '../../Icons/ChevronUp/ChevronUp10';
 import { IconCheck10 } from '../../Icons/IconCheck/IconCheck10';
 export const DropdownListItem = ({ item, size = 'md', selectedItem, style, onChange }) => {
+    var _a;
     const handleItemClick = (item, disabled) => {
         if (!disabled) {
             onChange(item);
         }
     };
-    const itemClassess = classNames(styles[`item-block`], styles[`button--${size}`], { [styles['item-block--selected']]: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) === item.value }, { [styles['item-block--disabled']]: item.disabled });
-    const itemBlock = classNames(styles[`item-block`], styles[`item-block-${style}`], { [styles[`item-block-${style}--selected`]]: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) === item.value }, { [styles[`item-block--disabled`]]: item.disabled });
+    const itemClassess = classNames(styles[`item-block`], styles[`button--${size}`], { 'item-block--selected': (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) === (item === null || item === void 0 ? void 0 : item.value) || (typeof selectedItem === 'string' || typeof selectedItem === 'number') && selectedItem === item }, { 'item-block--disabled': item === null || item === void 0 ? void 0 : item.disabled });
+    const itemBlock = classNames(styles[`item-block`], styles[`item-block-${style}`], { [`item-block-${style}--selected`]: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) === item.value }, { 'item-block--disabled': item.disabled });
     return (React.createElement("div", { className: styles[`item--container`] },
-        React.createElement("div", { className: itemClassess, onClick: () => handleItemClick(item, item.disabled) },
+        React.createElement("div", { className: styles[itemClassess], onClick: () => handleItemClick(item, item.disabled) },
             React.createElement("div", { className: itemBlock },
                 style === 'default' && item.icon && React.cloneElement(item.icon, { strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0' }),
-                React.createElement("div", { className: styles.item },
-                    React.createElement("span", null, item.value)),
+                React.createElement("div", { className: styles["item"] },
+                    React.createElement("span", null, (item === null || item === void 0 ? void 0 : item.value) || item)),
                 (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) === item.value && React.createElement(IconCheck10, { strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0', htmlColor: '#0D99FF' })),
-            item.isDivider && React.createElement("div", { className: styles.divider })),
-        item.children && (React.createElement("div", { className: styles.nestedMenu }, item.children.map(child => (React.createElement(DropdownListItem, { key: child.key, item: child, size: size, selectedItem: selectedItem, onChange: onChange })))))));
+            item.isDivider && React.createElement("div", { className: styles["divider"] })),
+        (item === null || item === void 0 ? void 0 : item.children) && (React.createElement("div", { className: styles["nestedMenu"] }, (_a = item.children) === null || _a === void 0 ? void 0 : _a.map((child, index) => (React.createElement(DropdownListItem, { key: index, item: child, size: size, selectedItem: selectedItem, onChange: onChange })))))));
 };
 export const Dropdown = ({ id, name, label, size = 'md', disabled, className, defaultValue, items, isOpened = false, style = 'default', readOnly = false, isLeftLabel = false }) => {
     const [isOpen, setIsOpen] = useState(isOpened);
@@ -41,27 +42,57 @@ export const Dropdown = ({ id, name, label, size = 'md', disabled, className, de
         }
     };
     const wrapperClassess = classNames(styles[`dropdown--container`], {
-        [styles['wrapper--left']]: isLeftLabel,
+        'wrapper--left': isLeftLabel,
     });
-    const buttonClassess = classNames(styles.button, className, styles[`button--${size}`], { [styles['button-item--selected']]: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) && !disabled }, { [styles['button--readOnly']]: readOnly }, { [styles['button--disabled']]: disabled });
-    const dropdownClassess = classNames(styles.dropdown, className, {
-        [styles['dropdown--disabled']]: disabled,
+    const buttonClassess = classNames(styles['button'], className, styles[`button--${size}`], { 'button-item--selected': (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) && !disabled }, { 'button--readOnly': readOnly }, { 'button--disabled': disabled });
+    const dropdownClassess = classNames(styles['dropdown'], className, {
+        'dropdown--disabled': disabled,
     });
-    const labelClasses = classNames(styles.label, { [styles['label--default']]: !isLeftLabel,
-        [styles['label--left']]: isLeftLabel,
+    const labelClasses = classNames(styles['label'], { 'label--default': !isLeftLabel,
+        'label--left': isLeftLabel,
     });
+    const checkItem = (item) => {
+        if (typeof item === 'object') {
+            if (item.value) {
+                return item;
+            }
+            else if (item.name && !item.value) {
+                return Object.assign(Object.assign({}, item), { value: name });
+            }
+            else if (item.description && !item.value) {
+                return Object.assign(Object.assign({}, item), { value: item.description });
+            }
+            else {
+                const keys = Object.keys(item);
+                if (keys.length) {
+                    const firstValue = item[keys[0]];
+                    return Object.assign(Object.assign({}, item), { value: firstValue });
+                }
+            }
+        }
+        else if (typeof item === 'string' || typeof item === 'number') {
+            return { value: item };
+        }
+        else {
+            return null;
+        }
+    };
     const getDropdownMenu = () => {
         // const menu = withPortal ? (
         //   ReactDOM.createPortal(<DropdownMenu withPortal >{children}</DropdownMenu>, portalContainer)
         // ) : <DropdownMenu>{children}</DropdownMenu>
-        const menu = isOpen && React.createElement("div", { className: dropdownClassess }, items.map(item => (React.createElement(DropdownListItem, { key: item.key, item: item, size: size, selectedItem: selectedItem, style: style, onChange: onChange }))));
+        const menu = isOpen && React.createElement("div", { className: styles[dropdownClassess] }, items === null || items === void 0 ? void 0 : items.map((item, index) => {
+            var _a;
+            const modifiedItem = checkItem(item);
+            return (React.createElement(DropdownListItem, { key: (_a = item === null || item === void 0 ? void 0 : item.key) !== null && _a !== void 0 ? _a : index, item: modifiedItem, size: size, selectedItem: selectedItem, style: style, onChange: onChange }));
+        }));
         return isOpen ? menu : null;
     };
     useEffect(() => {
         if (containerRef.current) {
-            const textWidth = Math.max(name.length, (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value.length) || 0);
+            const textWidth = Math.max(name === null || name === void 0 ? void 0 : name.length, (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value.length) || 0);
             let newWidth;
-            if (textWidth === name.length) {
+            if (textWidth === (name === null || name === void 0 ? void 0 : name.length)) {
                 const inPixel = size === 'sm' ? 11 : size === 'md' ? 12 : 14;
                 newWidth = selectedItem ? textWidth * inPixel : textWidth * inPixel;
             }
@@ -72,7 +103,7 @@ export const Dropdown = ({ id, name, label, size = 'md', disabled, className, de
             setContainerWidth(newWidth);
         }
     }, [selectedItem, name, isOpen, size]);
-    return (React.createElement("div", { className: wrapperClassess, ref: containerRef, style: { width: containerWidth ? `${containerWidth}px` : 'auto' } },
+    return (React.createElement("div", { className: styles[wrapperClassess], ref: containerRef, style: { width: containerWidth ? `${containerWidth}px` : 'auto' } },
         selectedItem && label && (React.createElement("label", { className: labelClasses, htmlFor: id }, label)),
         React.createElement("button", { className: buttonClassess, onClick: readOnly ? undefined : handleToggle, disabled: disabled },
             React.createElement("div", { className: style === 'default' && (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon) ? styles[`button--default--item-selected`] : '' },

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

@@ -1,4 +1,4 @@
-.story--wrapper {
+.story--wrapper-dropdown {
   background-color: var(--white);
   padding: 30px;
   border-radius: 10px;

package/dist/components/Input/Input.js

@@ -10,28 +10,28 @@ export const Input = ({ id, className, value, label, placeholder, size = 'md', o
             onChange(e);
         }
     };
-    const wrapperClassess = classNames(styles.wrapper, {
-        [styles['wrapper--left']]: isLeftLabel,
+    const wrapperClassess = classNames(styles['wrapper'], {
+        'wrapper--left': isLeftLabel,
     });
-    const inputWrapperClassess = classNames(styles[`wrapper--input `]);
-    const inputClassess = classNames(styles.input, styles[size], className, {
-        [styles['input--error']]: hasError,
-        [styles['readOnly']]: readOnly,
-        [styles['input--withIcon']]: icon,
-        [styles['textarea']]: multiline,
-        [styles['resize']]: resize,
+    const inputWrapperClassess = classNames(styles['wrapper--input']);
+    const inputClassess = classNames(styles['inputText'], size, className, {
+        'input--error': hasError,
+        'readOnly': readOnly,
+        'input--withIcon': icon,
+        'textarea': multiline,
+        'resize': resize,
     });
-    const labelClasses = classNames(styles.label, {
-        [styles['label--default']]: !isLeftLabel,
-        [styles['label--left']]: isLeftLabel,
+    const labelClasses = classNames(styles['label'], {
+        'label--default': !isLeftLabel,
+        'label--left': isLeftLabel,
     });
-    const iconClassess = classNames(styles.icon, {
-        [styles['input--withIcon']]: multiline,
+    const iconClassess = classNames(styles['icon'], {
+        'input--withIcon': multiline,
     });
     return (React.createElement("div", { className: wrapperClassess },
         ((value && !isLeftLabel) || isLeftLabel) && (React.createElement("label", { className: labelClasses, htmlFor: id }, label)),
         React.createElement("div", { className: inputWrapperClassess },
             icon && React.createElement("div", { className: iconClassess }, icon),
             multiline ? (React.createElement("textarea", { id: id, className: inputClassess, value: value, placeholder: placeholder, onChange: handleChange, disabled: disabled })) : (React.createElement("input", { id: id, className: inputClassess, value: value, placeholder: placeholder, onChange: handleChange, disabled: disabled, readOnly: readOnly }))),
-        hasError && helperText && React.createElement("div", { className: styles.helperText }, helperText)));
+        hasError && helperText && React.createElement("div", { className: "helperText" }, helperText)));
 };

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

@@ -1,4 +1,4 @@
-.story--wrapper {
+.story--wrapper-iput {
   background-color: var(--white);
   padding: 30px;
   border-radius: 10px;
@@ -21,7 +21,7 @@
 .wrapper--input {
   position: relative;
 }
-.input {
+.inputText {
   font-family: 'Raleway';
   font-style: normal;
   font-weight: 400;
@@ -35,6 +35,7 @@
   outline: none;
   border: 1px solid var(--grey-light);
   border-radius: 10px;
+  /* width: fit-content; */
 }
 /* Стили при наведении мыши */
 .input:hover {
@@ -61,17 +62,17 @@
 .resize {
   resize: both;
 }
-.lg {
-  /* height: 40px; */
-  height: 25px;
+.inputText.lg {
+  height: 40px;
+  /* height: 25px; */
 }
-.md {
-  /* height: 35px; */
-  height: 20px;
+.inputText.md {
+  height: 35px;
+  /* height: 20px; */
 }
-.sm {
+.inputText.sm {
   /* height: 30px; */
-  height: 15px;
+  height: 25px;
 }
 
 .filled {
@@ -163,14 +164,13 @@
 /* Стили для Иконок */
 .input--withIcon {
   padding-left: 35px;
+  top: 5%;
 }
 
 .icon {
   position: absolute;
   z-index: 1;
-  top: 25%;
+  top: 25%;;
   left: 10px;
 }
-.input--withIcon {
-  top: 5%;
-}
+

package/dist/components/ProgressBar/ProgressBar.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import styles from './ProgressBar.module.css';
 import { Typography } from '../Typography/Typography';
+import styles from './ProgressBar.module.css';
 import classNames from 'classnames';
 /**
  * Компонент ProgressBar отображает прогресс в виде заполненной полосы.
@@ -8,9 +8,9 @@ import classNames from 'classnames';
 export const ProgressBar = ({ value = 0, max = 100, size = 'md', showValue = true, animated = false, }) => {
     const [percent, setPercent] = useState(value);
     const validPercentage = Math.min(Math.max(value, 0), max);
-    const progeressBarClassess = classNames(styles['progress-bar'], styles[size], {
-        [styles['progress-bar--animated']]: animated,
-        [styles['progress-bar--static']]: !animated,
+    const progressBarClasses = classNames(styles['progress-bar'], size, {
+        'progress-bar--animated': animated,
+        'progress-bar--static': !animated,
     });
     useEffect(() => {
         if (animated) {
@@ -33,9 +33,9 @@ export const ProgressBar = ({ value = 0, max = 100, size = 'md', showValue = tru
             setPercent(validPercentage);
         }
     }, [animated, validPercentage]);
-    return (React.createElement("div", { className: styles[`progress-bar--wrapper`] },
-        React.createElement("progress", { id: "linear-progress", className: progeressBarClassess, value: percent, max: max }),
-        React.createElement("label", { htmlFor: "progress", className: styles['progress-percentage'] }, showValue && (React.createElement(Typography, { variant: "Subheading3", color: '#9CA0A7', style: { fontWeight: '300' }, className: styles['progress-percentage'] },
+    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: "Subheading3", color: '#9CA0A7', style: { fontWeight: '300' }, className: styles["progress-bar-percentage"] },
             percent,
             "%")))));
 };

package/dist/components/ProgressBar/ProgressBar.module.css

@@ -1,4 +1,4 @@
-.story--wrapper {
+.story--wrapper-progressbar {
   background-color: var(--white);
   padding: 30px;
   border-radius: 10px;
@@ -11,25 +11,25 @@
 }
 .progress-bar--wrapper {
   display: flex;
-  align-items: center;
-  gap: 20px;
+  gap: 40px;
 }
 
 .progress-bar {
   border: none;
   border-radius: 11px;
+  width: 330px;
 }
-.sm {
-  width: 20vw;
-  height: 1vh;
+.progress-bar.sm {
+  /* width: 20px; */
+  height: 4px;
 }
-.md {
-  width: 25vw;
-  height: 2vh;
+.progress-bar.md {
+  /* width: 25vw; */
+  height: 6px;
 }
-.lg {
-  width: 30vw;
-  height: 3vh;
+.progress-bar.lg {
+  /* width: 30vw; */
+  height: 8px;
 }
 
 .progress-bar::-webkit-progress-bar {
@@ -47,3 +47,10 @@
 .progress-bar--static {
   transition: none;
 }
+.progress-bar-percentage {
+  /* position: absolute; */
+  /* top: 50%; */
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+

package/dist/components/ProgressLoader/ProgressLoader.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import styles from './ProgressLoader.module.css';
 import { Typography } from '../Typography/Typography';
+import styles from './ProgressLoader.module.css';
 import classNames from 'classnames';
 /**
  * Компонент ProgressLoader отображает прогресс загрузки.
@@ -23,7 +23,7 @@ export const ProgressLoader = ({ value = 0, size = 'xl', showValue = true, anima
     const circumference = 2 * Math.PI * radius;
     const dashArray = circumference;
     const dashOffset = circumference * (1 - fillPercentage);
-    const progressLoaderWrapperClasses = classNames(styles['progress-loader-wrapper'], styles[size]);
+    const progressLoaderWrapperClasses = classNames(styles['progress-loader-wrapper'], size);
     const getTypographySize = () => {
         switch (size) {
             case 'md':
@@ -54,7 +54,7 @@ export const ProgressLoader = ({ value = 0, size = 'xl', showValue = true, anima
         }
     }, [animated, validPercentage]);
     return (React.createElement("div", { className: progressLoaderWrapperClasses, style: { width: spinnerSize, height: spinnerSize } },
-        React.createElement("svg", { id: "svg1", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, className: styles['progress-loader'] },
+        React.createElement("svg", { id: "svg1", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, className: styles["progress-loader"] },
             React.createElement("circle", { cx: center, cy: center, r: radius, stroke: "#e5e5ea", strokeWidth: strokeWidth, fill: "none", style: { strokeLinecap: 'round' } }),
             React.createElement("circle", { cx: center, cy: center, r: radius, stroke: 'var(--blue-main)', strokeWidth: strokeWidth, fill: "none", style: {
                     strokeDasharray: `${dashArray}`,
@@ -64,8 +64,8 @@ export const ProgressLoader = ({ value = 0, size = 'xl', showValue = true, anima
                     transformOrigin: '50% 50%',
                     //transition: animated ? 'stroke-dashoffset 0.5s ease-in-out' : 'none',
                 } }, animated && (React.createElement("animate", { attributeName: "stroke-dashoffset", dur: `${animationDuration / 1000}`, values: `${circumference}; ${percent / 100}`, fill: "freeze" })))),
-        showValue && size !== 'sm' && (React.createElement("div", { className: styles['progress-percentage'] },
-            React.createElement(Typography, { variant: "Subheading2", color: '#9CA0A7', style: { fontSize: getTypographySize(), fontWeight: '300' }, className: styles['progress-percentage'] },
+        showValue && size !== 'sm' && (React.createElement("div", { className: styles["progress-percentage"] },
+            React.createElement(Typography, { variant: "Subheading2", color: '#9CA0A7', style: { fontSize: getTypographySize(), fontWeight: '300' }, className: styles["progress-percentage"] },
                 percent,
                 "%")))));
 };

package/dist/components/ProgressLoader/ProgressLoader.module.css

@@ -1,4 +1,4 @@
-.story--wrapper {
+.story--wrapper-progress-loader {
   background-color: var(--white);
   padding: 30px;
   border-radius: 10px;
@@ -10,7 +10,7 @@
   justify-content: center;
   position: relative;
 }
-.progress-bar--default-story {
+.progress-loader--default-story {
   display: flex;
   gap: 30px;
 }
@@ -20,7 +20,7 @@
 }
 .progress-percentage {
   position: absolute;
-  top: 50%;
+  /* top: 50%; */
   left: 50%;
   transform: translate(-50%, -50%);
 }

package/dist/components/RadioButton/RadioButton.js

@@ -7,7 +7,7 @@ export const RadioButton = ({ value, label, checked, onChange, disabled = false,
             onChange(e);
         }
     };
-    return (React.createElement("label", { className: styles.radio },
-        React.createElement("input", { type: "radio", checked: checked, value: value, onChange: handleChange, disabled: disabled, className: classNames(styles.input, styles[size]) }),
+    return (React.createElement("label", { className: styles["radio"] },
+        React.createElement("input", { type: "radio", checked: checked, value: value, onChange: handleChange, disabled: disabled, className: classNames(styles['input'], size) }),
         label));
 };

package/dist/components/RadioButton/RadioButton.module.css

@@ -1,4 +1,4 @@
-.story--wrapper {
+.story--wrapper-radio {
   background-color: var(--white);
   padding: 30px;
   border-radius: 10px;
@@ -18,12 +18,12 @@
   color: var(--text-dark);
 }
 
-.sm {
+.radio.sm {
   width: 12px;
   height: 12px;
 }
 
-.md {
+.radio.md {
   width: 16px;
   height: 16px;
 }

package/dist/components/SettingTag/SettingTag.js

@@ -1,13 +1,13 @@
 import React, { useState } from 'react';
 import { Tag } from '../Tag/Tag';
 import ColorPicker from '../ColorPicker/ColorPicker';
-import styles from '../Tag/Tag.module.css';
+import styles from './SettingTag.module.css';
 export const SettingTag = ({ label, color, onChange }) => {
     const [isHovered, setIsHovered] = useState(false);
     const colorsOptions = ['red', 'orange', 'yellow', 'green', 'purple', 'indigo', 'blue', 'teal', 'pink'];
     return (React.createElement("div", { style: { display: 'flex', gap: '10px', flexDirection: 'row', alignItems: 'center' } },
         React.createElement(Tag, { label: label, color: color }),
-        !isHovered ? (React.createElement("div", { className: styles.circle, onMouseEnter: () => setIsHovered(true), style: {
+        !isHovered ? (React.createElement("div", { className: styles['circle'], onMouseEnter: () => setIsHovered(true), style: {
                 width: 10,
                 height: 10,
                 backgroundColor: (color === null || color === void 0 ? void 0 : color.startsWith('#')) ? color : `var(--${color})`,

package/dist/components/SettingTag/SettingTag.module.css

@@ -0,0 +1,16 @@
+.story--wrapper-tag {
+    background-color: var(--white);
+    padding: 30px;
+    border-radius: 10px;
+    width: 300px;
+    height: 300px; 
+}
+
+
+.circle {
+    border-radius: 50%;
+    cursor: pointer;
+    transition: transform 0.2s ease;
+    position: relative;
+  }
+  

package/dist/components/Snackbar/Snackbar.d.ts

@@ -1,4 +1,5 @@
-import React, { FC, ReactNode } from 'react';
+import React, { FC } from 'react';
+import { SnackbarProps } from 'kamotive_ui';
 /**
 * @description Snackbar компонент для отображения всплывающих уведомлений
 * @component
@@ -22,11 +23,4 @@ export declare const title: {
     warning: string;
     info: string;
 };
-export type SnackbarProps = {
-    children: ReactNode;
-    type: 'success' | 'error' | 'warning' | 'info';
-    icon?: boolean;
-    duration: number;
-    onClose?: () => void;
-};
 export declare const Snackbar: FC<SnackbarProps>;

package/dist/components/Snackbar/Snackbar.js

@@ -43,13 +43,13 @@ export const Snackbar = ({ children, type, duration = 10000, icon = true, onClos
     };
     if (!isVisible)
         return null;
-    const snackbarClasses = classNames(styles['snackbar-wrapper'], styles[`snackbar--${type}`]);
+    const snackbarClasses = classNames(styles['snackbar-wrapper'], type ? `snackbar--${type}` : '');
     return (React.createElement("div", { className: snackbarClasses },
-        React.createElement("div", { className: styles[`snackbar-textAndIcon`] },
+        React.createElement("div", { className: styles['snackbar-textAndIcon'] },
             icon && icons[type],
-            React.createElement("div", { className: styles[`snackbar-text`] },
+            React.createElement("div", { className: styles['snackbar-text'] },
                 React.createElement(Typography, { variant: "Body2-Medium", color: 'var(--text-dark)' }, title[type]),
                 React.createElement(Typography, { variant: "Caption", color: 'var(--text-btn-light)' }, children))),
-        React.createElement("button", { className: styles.button, onClick: handleClose },
+        React.createElement("button", { className: styles['button'], onClick: handleClose },
             React.createElement(IconClose10, { htmlColor: 'var(--text-btn-light)' }))));
 };

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

@@ -1,3 +1,10 @@
+.story--wrapper-snackbar {
+  background-color: var(--white);
+  padding: 30px;
+  border-radius: 10px;
+  width: 300px;
+  height: 300px; 
+}
 .snackbar-wrapper {
   display: flex;
   justify-content: space-between;
@@ -7,7 +14,8 @@
   box-sizing: border-box;
   position: relative;
   min-width: 340px;
-  max-width: 640px;
+  max-width: 500px;
+
   border-radius: 15px;
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
   min-height: 48px;
@@ -23,6 +31,7 @@
 .snackbar-text {
   display: flex;
   flex-direction: column;
+  width: 100%;
 }
 .snackbar--success {
   background-color: rgba(52, 199, 89, 0.15);
@@ -41,7 +50,7 @@
   border: none;
   background-color: transparent;
   display: flex;
-  justify-content: center;
+  justify-content: end;
   align-items: center;
   padding: 5px;
   margin-top: 3px;

package/dist/components/Tab/Tab.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from '../Tabs/Tabs.module.css';
+import styles from './Tab.module.css';
 import classNames from 'classnames';
 export const Tab = ({ value, onClick, label, selected, disabled = false }) => {
     const handleClick = (e) => {
@@ -7,8 +7,8 @@ export const Tab = ({ value, onClick, label, selected, disabled = false }) => {
             onClick(value);
         }
     };
-    return (React.createElement("button", { role: "tab", "aria-selected": selected, "aria-disabled": disabled, value: value, className: classNames(styles.tab, {
-            [styles.selected]: selected,
-            [styles.disabled]: disabled,
+    return (React.createElement("button", { role: "tab", "aria-selected": selected, "aria-disabled": disabled, value: value, className: classNames(styles['tab'], {
+            'selected': selected,
+            'disabled': disabled,
         }), onClick: handleClick }, label));
 };

package/dist/components/Tab/Tab.module.css

@@ -0,0 +1,45 @@
+.story--wrapper-tab {
+  background-color: var(--white);
+  padding: 30px;
+  border-radius: 10px;
+}
+
+.tab {
+  width: 126px;
+  height: 24px;
+  padding: 3px 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--tab-extraLight);
+  border: none;
+
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.tab:hover {
+  background-color: var(--tab-medium);
+  border-radius: 7px;
+}
+
+.selected {
+  border: 0.5px solid var(--tab-medium);
+  border-radius: 7px;
+  font-weight: 600;
+  background-color: var(--white);
+  box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.04);
+}
+
+.selected:hover {
+  background-color: var(--tab-light);
+}
+
+.tab.disabled {
+  cursor: not-allowed;
+  color: var(--text-btn);
+  background-color: transparent;
+}

package/dist/components/Tabs/Tabs.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import styles from './Tabs.module.css';
-import classNames from 'classnames';
 export const Tabs = ({ value, onChange, children }) => {
     var _a;
     const selectedTabContent = (_a = children === null || children === void 0 ? void 0 : children.find((child) => child.props.value === value)) === null || _a === void 0 ? void 0 : _a.props.children;
@@ -10,7 +9,7 @@ export const Tabs = ({ value, onChange, children }) => {
         }
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { role: "tablist", className: classNames(styles.tabs) }, children === null || children === void 0 ? void 0 : children.map((child, index) => React.cloneElement(child, {
+        React.createElement("div", { role: "tablist", className: styles['tabs'] }, children === null || children === void 0 ? void 0 : children.map((child, index) => React.cloneElement(child, {
             key: index,
             selected: child.props.value === value,
             disabled: child.props.disabled,

package/dist/components/Tabs/Tabs.module.css

@@ -1,4 +1,4 @@
-.story--wrapper {
+.story--wrapper-tabs {
   background-color: var(--white);
   padding: 30px;
   border-radius: 10px;
@@ -11,6 +11,7 @@
   padding: 2px;
   border-radius: 9px;
   background-color: var(--tab-extraLight);
+  width: fit-content;
 }
 
 .tab {

package/dist/components/Tag/Tag.js

@@ -9,7 +9,7 @@ export const Tag = ({ label, color = 'red', closeButton = false, onClick }) => {
         const b = parseInt(hex.slice(5, 7), 16);
         return `rgba(${r}, ${g}, ${b}, ${alpha})`;
     };
-    return (React.createElement("span", { className: classNames(styles.tag, !color.startsWith('#') && styles[color]), style: color.startsWith('#')
+    return (React.createElement("span", { className: classNames(styles['tag'], !color.startsWith('#') ? `${color}` : ''), style: color.startsWith('#')
             ? {
                 color: color,
                 border: `1px solid ${color}`,