kamotive_ui 1.2.1 → 1.2.2

package/dist/Icons/ChevronDown/ChevronDown10.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import styles from '../Icons.module.css';
 export const ChevronDown10 = ({ 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: `${styles.icon} ${color && styles[color]}` },
+    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" })));
 };

package/dist/Icons/ChevronUp/ChevronUp10.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import styles from '../Icons.module.css';
 export const ChevronUp10 = ({ 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: `${styles.icon} ${color && styles[color]}` },
+    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,15.41L11.5,9.75L17.16,15.41L16.45,16.11L11.5,11.16L6.55,16.11L5.84,15.41Z" })));
 };

package/dist/Icons/IconAccount/IconAccount10.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import styles from '../Icons.module.css';
 export const IconAccount10 = ({ 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: `${styles.icon} ${color && styles[color]}` },
+    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: "M11.5,14C15.64,14 19,15.57 19,17.5V20H4V17.5C4,15.57 7.36,14 11.5,14M18,17.5C18,16.12 15.09,15 11.5,15C7.91,15 5,16.12 5,17.5V19H18V17.5M11.5,5C13.43,5 15,6.57 15,8.5C15,10.43 13.43,12 11.5,12C9.57,12 8,10.43 8,8.5C8,6.57 9.57,5 11.5,5M11.5,6C10.12,6 9,7.12 9,8.5C9,9.88 10.12,11 11.5,11C12.88,11 14,9.88 14,8.5C14,7.12 12.88,6 11.5,6Z" })));
 };

package/dist/Icons/IconAlarm/IconAlarm10.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import styles from '../Icons.module.css';
 export const IconAlarm10 = ({ 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: `${styles.icon} ${color && styles[color]}` },
+    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: "M11.5,6C15.64,6 19,9.36 19,13.5C19,17.64 15.64,21 11.5,21C7.36,21 4,17.64 4,13.5C4,9.36 7.36,6 11.5,6M11.5,7C7.91,7 5,9.91 5,13.5C5,17.09 7.91,20 11.5,20C15.09,20 18,17.09 18,13.5C18,9.91 15.09,7 11.5,7M11,9H12V13.36L15.05,14.78L14.63,15.69L11,14V9M15.25,5.25L15.89,4.5L19.72,7.7L19.08,8.46L15.25,5.25M7.75,5.25L3.92,8.46L3.28,7.7L7.11,4.5L7.75,5.25Z" })));
 };

package/dist/Icons/IconBank/IconBank10.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import styles from '../Icons.module.css';
 export const IconBank10 = ({ 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: `${styles.icon} ${color && styles[color]}` },
+    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: "M11,2.5L20,7V9H2V7L11,2.5M15,10H19V18H15V10M2,22V19H20V22H2M9,10H13V18H9V10M3,10H7V18H3V10M3,20V21H19V20H3M4,11V17H6V11H4M10,11V17H12V11H10M16,11V17H18V11H16M3,8H19V7.6L11,3.58L3,7.6V8Z" })));
 };

package/dist/Icons/IconBell/IconBell10.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import styles from '../Icons.module.css';
 export const IconBell10 = ({ 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: `${styles.icon} ${color && styles[color]}` },
+    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', color: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: strokeWidth || '0', d: "M12,4.5C12,4.22 11.78,4 11.5,4C11.22,4 11,4.22 11,4.5V6.03C8.75,6.28 7,8.18 7,10.5V16.41L5.41,18H17.59L16,16.41V10.5C16,8.18 14.25,6.28 12,6.03V4.5M11.5,3C12.33,3 13,3.67 13,4.5V5.21C15.31,5.86 17,8 17,10.5V16L20,19H3L6,16V10.5C6,8 7.69,5.86 10,5.21V4.5C10,3.67 10.67,3 11.5,3M11.5,22C10.29,22 9.28,21.14 9.05,20H10.09C10.29,20.58 10.85,21 11.5,21C12.15,21 12.71,20.58 12.91,20H13.95C13.72,21.14 12.71,22 11.5,22Z" })));
 };

package/dist/Icons/IconBriefcase/IconBriefcase10.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import styles from '../Icons.module.css';
 export const IconBriefcase10 = ({ 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: `${styles.icon} ${color && styles[color]}` },
+    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,7H8V5L10,3H13L15,5V7H18C19.66,7 21,8.34 21,10V18C21,19.66 19.66,21 18,21H5C3.34,21 2,19.66 2,18V10C2,8.34 3.34,7 5,7M10.41,4L9,5.41V7H14V5.41L12.59,4H10.41M5,8C3.9,8 3,8.9 3,10V18C3,19.1 3.9,20 5,20H18C19.1,20 20,19.1 20,18V10C20,8.9 19.1,8 18,8H5Z" })));
 };

package/dist/Icons/IconCalendar/IconCalendar10.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import styles from '../Icons.module.css';
 export const IconCalendar10 = ({ 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 && styles[color]}` },
+    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: "M7,2H8C8.55,2 9,2.45 9,3V4H14V3C14,2.45 14.45,2 15,2H16C16.55,2 17,2.45 17,3V4C18.66,4 20,5.34 20,7V18C20,19.66 18.66,21 17,21H6C4.34,21 3,19.66 3,18V7C3,5.34 4.34,4 6,4V3C6,2.45 6.45,2 7,2M15,4H16V3H15V4M8,4V3H7V4H8M6,5C4.9,5 4,5.9 4,7V8H19V7C19,5.9 18.1,5 17,5H6M4,18C4,19.1 4.9,20 6,20H17C18.1,20 19,19.1 19,18V9H4V18M12,13H17V18H12V13M13,14V17H16V14H13Z" })));
 };

package/dist/Icons/IconCheck/IconCheck10.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import styles from '../Icons.module.css';
 export const IconCheck10 = ({ 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: `${styles.icon} ${color && styles[color]}` },
+    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: "M18.9,8.1L9,18L4.05,13.05L4.76,12.34L9,16.59L18.19,7.39L18.9,8.1Z" })));
 };

package/dist/Icons/IconClose/IconClose10.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import styles from '../Icons.module.css';
 export const IconClose10 = ({ color = 'inherit', htmlColor, strokeWidth, }) => {
-    return (React.createElement("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: `${styles.icon} ${color && styles[color]}` },
+    return (React.createElement("svg", { width: "15", height: "15", 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: "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" })));
 };

package/dist/Icons/IconColorPicker/IconColorPicker10.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import styles from '../Icons.module.css';
 export const IconColorPicker10 = ({ color = 'inherit', htmlColor, strokeWidth, className, }) => {
-    return (React.createElement("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: `${styles.icon} ${color && styles[color]} ${className}` },
+    return (React.createElement("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: `${color} ${className}` },
         React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: 0, strokeLinejoin: "round", d: "M6.92,19L5,17.08L13.06,9L15,10.94M20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L13.84,6.41L11.91,4.5L10.5,5.91L11.92,7.33L3,16.25V21H7.75L16.67,12.08L18.09,13.5L19.5,12.09L17.58,10.17L20.7,7.05C21.1,6.65 21.1,6 20.71,5.63Z" })));
 };

package/dist/Icons/IconError/IconError10.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import styles from '../Icons.module.css';
 export const IconError10 = ({ 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: `${styles.icon} ${color && styles[color]}` },
+    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', strokeLinejoin: "round", d: "M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z" })));
 };

package/dist/Icons/IconEyeOff/IconEyeOff10.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import styles from '../Icons.module.css';
 export const IconEyeOff10 = ({ 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: `${styles.icon} ${color && styles[color]}` },
+    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: "M2.54,4.71L3.25,4L20,20.75L19.29,21.46L15.95,18.11C14.58,18.68 13.08,19 11.5,19C6.94,19 3,16.35 1.14,12.5C2.11,10.5 3.63,8.83 5.5,7.68L2.54,4.71M11.5,18C12.79,18 14.03,17.77 15.17,17.34L14.05,16.21C13.32,16.71 12.45,17 11.5,17C9,17 7,15 7,12.5C7,11.55 7.29,10.68 7.79,9.95L6.24,8.41C4.57,9.38 3.19,10.8 2.26,12.5C4.04,15.78 7.5,18 11.5,18M20.74,12.5C18.96,9.22 15.5,7 11.5,7C10.35,7 9.23,7.19 8.19,7.53L7.41,6.75C8.68,6.26 10.06,6 11.5,6C16.06,6 20,8.65 21.86,12.5C20.95,14.39 19.53,16 17.79,17.13L17.07,16.4C18.6,15.44 19.87,14.1 20.74,12.5M11.5,8C14,8 16,10 16,12.5C16,13.32 15.78,14.08 15.4,14.74L14.66,14C14.88,13.54 15,13.04 15,12.5C15,10.57 13.43,9 11.5,9C10.96,9 10.46,9.12 10,9.34L9.26,8.6C9.92,8.22 10.68,8 11.5,8M8,12.5C8,14.43 9.57,16 11.5,16C12.17,16 12.79,15.81 13.32,15.5L8.5,10.68C8.19,11.21 8,11.83 8,12.5Z" })));
 };

package/dist/Icons/IconInfo/IconInfo10.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import styles from '../Icons.module.css';
 export const IconInfo10 = ({ 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: `${styles.icon} ${color && styles[color]}` },
+    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: "M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z" })));
 };

package/dist/Icons/IconSuccess/IconSuccess10.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import styles from '../Icons.module.css';
 export const IconSuccess10 = ({ 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: `${styles.icon} ${color && styles[color]}` },
+    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: "M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z" })));
 };

package/dist/Icons/IconWarning/IconWarning10.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import styles from '../Icons.module.css';
 export const IconWarning10 = ({ 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: `${styles.icon} ${color && styles[color]}` },
+    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', strokeLinejoin: "round", d: "M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16" })));
 };

package/dist/components/Button/Button.js

@@ -5,9 +5,9 @@ import classNames from 'classnames';
  * Компонент Button представляет собой кнопку, которую можно настроить с помощью различных параметров (размер, иконки, стили, состояние).
  */
 export const Button = ({ label, variant = 'fill', size = 'md', style = 'text', condition = 'default', icon, disabled = false, onClick, }) => {
-    const buttonClassess = classNames(styles.button, styles[`button--${variant}-${condition}`], styles[`button--${size}`], styles[`button--${style}`]
+    const buttonClasses = classNames(styles['button'], styles[`button--${variant}-${condition}`], styles[`button--${size}`], styles[`button--${style}`]
     // {
-    //   [styles['button--disabled']]: disabled,
+    //   ['button--disabled']: disabled,
     // }
     );
     const iconColorFn = () => {
@@ -39,7 +39,7 @@ export const Button = ({ label, variant = 'fill', size = 'md', style = 'text', c
         }
     };
     const iconColorStyle = iconColorFn();
-    return (React.createElement("button", { className: buttonClassess, onClick: onClick, disabled: disabled },
+    return (React.createElement("button", { className: buttonClasses, onClick: onClick, disabled: disabled },
         icon &&
             React.cloneElement(icon, {
                 htmlColor: iconColorStyle,

package/dist/components/Button/Button.module.css

@@ -1,4 +1,4 @@
-.story--wrapper {
+.story--wrapper-btn {
   background-color: var(--white);
   padding: 30px;
   border-radius: 10px;
@@ -9,16 +9,13 @@
   font-family: 'Raleway';
   font-style: normal;
   font-weight: 400;
-  /* font-size: 12px; */
   line-height: 16.5px;
-
-  /* padding: 0.5em 1.5em;
-  border: none;*/
   border-radius: 10px;
   padding: 5px 10px;
   cursor: pointer;
   padding: 0.5em 1.5em;
-  /* transition: all 0.3s ease; */
+  width: fit-content;
+ 
 }
 
 /* Стили для дефолтных кнопок */
@@ -136,7 +133,7 @@
 /* Стили для outline кнопок */
 /* синяя */
 .button--outline-default {
-  background-color: var(--white);
+  background-color: transparent;
   color: var(--blue-main);
   border: 1px solid var(--blue-main);
 }
@@ -151,14 +148,14 @@
   border: 1px solid var(--blue-main);
 }
 .button--outline-default:disabled {
-  background-color: var(--white);
+  background-color: transparent;
   color: var(--blue-disabled);
   border: 1px solid var(--blue-disabled);
   cursor: not-allowed;
 }
 /* ошибка */
 .button--outline-error {
-  background-color: var(--white);
+  background-color: transparent;
   color: var(--error-main);
   border: 1px solid var(--error-main);
 }
@@ -173,14 +170,14 @@
   border: 1px solid var(--error-main);
 }
 .button--outline-error:disabled {
-  background-color: var(--white);
+  background-color: transparent;
   color: var(--error-disabled);
   border: 1px solid var(--error-disabled);
   cursor: not-allowed;
 }
 /* success */
 .button--outline-success {
-  background-color: var(--white);
+  background-color: transparent;
   color: var(--success-main);
   border: 1px solid var(--success-main);
 }
@@ -195,14 +192,14 @@
   border: 1px solid var(--success-dark);
 }
 .button--outline-success:disabled {
-  background-color: var(--white);
+  background-color: transparent;
   color: var(--success-disabled);
   border: 1px solid var(--success-disabled);
   cursor: not-allowed;
 }
 /* warning */
 .button--outline-warning {
-  background-color: var(--white);
+  background-color: transparent;
   color: var(--warning-main);
   border: 1px solid var(--warning-main);
 }
@@ -217,14 +214,14 @@
   border: 1px solid var(--warning-dark);
 }
 .button--outline-warning:disabled {
-  background-color: var(--white);
+  background-color: transparent;
   color: var(--warning-disabled);
   border: 1px solid var(--warning-disabled);
   cursor: not-allowed;
 }
 /* info */
 .button--outline-info {
-  background-color: var(--white);
+  background-color: transparent;
   color: var(--text-btn);
   border: 1px solid var(--text-btn);
 }
@@ -239,7 +236,7 @@
   border: 1px solid var(--text-btn);
 }
 .button--outline-info:disabled {
-  background-color: var(--white);
+  background-color: transparent;
   color: var(--text-btn-light);
   border: 1px solid var(--text-btn-light);
   cursor: not-allowed;

package/dist/components/Checkbox/Checkbox.js

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

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

@@ -1,4 +1,4 @@
-.story--wrapper {
+.story--wrapper-checkbox {
   background-color: var(--white);
   padding: 30px;
   border-radius: 10px;
@@ -18,12 +18,12 @@
   color: var(--text-dark);
 }
 
-.sm {
+.checkbox.sm {
   width: 12px;
   height: 12px;
 }
 
-.md {
+.checkbox.md {
   width: 16px;
   height: 16px;
 }
@@ -40,6 +40,7 @@
   background-clip: content-box;
   position: relative;
   cursor: pointer;
+
 }
 
 .input[type="checkbox"]:hover,

package/dist/components/ColorPicker/ColorPicker.d.ts

@@ -1,37 +1,7 @@
 import { FC } from 'react';
-export interface ColorPickerProps {
-    /**
-     * @description Цвет выбранный пользователем
-     */
-    color?: string;
-    /**
-    * @description Основной цвет
-    */
-    mainColor?: string;
-    /**
-     * @description Последние использованные цвета
-    */
-    recentColors?: string[];
-    /**
-      * @description Флаг наведения на меню
-     */
-    setIsHovered: (isHover: boolean) => void;
-    /**
-     * @description Ширина ColorPicker
-     */
-    width?: number;
-    /**
-     * @description Высота ColorPicker
-     */
-    height?: number;
-    /**
-     * @description Автофокус ColorPicker
-     */
-    autoOpen?: boolean;
-    /**
-     * @description Функция обработки изменения цвета
-     */
-    onChange?: (color: string) => void;
-}
+import { ColorPickerProps } from 'kamotive_ui';
+/**
+ * Компонент ColorPicker представляет собой элемент управления для выбора цвета.
+ */
 export declare const ColorPicker: FC<ColorPickerProps>;
 export default ColorPicker;

package/dist/components/ColorPicker/ColorPicker.js

@@ -5,6 +5,9 @@ import { Chrome } from '@uiw/react-color';
 import EditableInput from '@uiw/react-color-editable-input';
 import { GithubPlacement } from '@uiw/react-color-github';
 import { IconColorPicker10 } from '../../Icons';
+/**
+ * Компонент ColorPicker представляет собой элемент управления для выбора цвета.
+ */
 export const ColorPicker = ({ color = '#ffffff', mainColor, recentColors, setIsHovered, width = 10, height = 10, autoOpen = false, onChange, }) => {
     const [colorValue, setColorValue] = useState(mainColor);
     const [selectedColor, setSelectedColor] = useState(color);
@@ -47,14 +50,14 @@ export const ColorPicker = ({ color = '#ffffff', mainColor, recentColors, setIsH
             !autoOpen && document.removeEventListener('mousedown', handleClickOutside);
         };
     }, [isOpen]);
-    const mainColorClasses = classNames(styles.circle, {
-        [styles['mainColor']]: mainColor,
+    const mainColorClasses = classNames(styles['circle'], {
+        'mainColor': mainColor,
     });
-    const colorCircleDefaultClasses = classNames(styles.circle, {
-        [styles.colorCircleDefault]: color === '#ffffff' && !isColorChanged || isColorChanged && selectedColor !== colorValue
+    const colorCircleDefaultClasses = classNames(styles['circle'], {
+        'colorCircleDefault': color === '#ffffff' && !isColorChanged || isColorChanged && selectedColor !== colorValue
     });
-    const popoverClassess = classNames(styles.popover, {
-        [styles[`popover--${popoverPosition}`]]: true,
+    const popoverClassess = classNames(styles['popover'], {
+        [`popover--${popoverPosition}`]: true,
     });
     // Функция для преобразования HEXA в HEX
     const hexaToHex = (hexa = 'fff') => {
@@ -83,30 +86,29 @@ export const ColorPicker = ({ color = '#ffffff', mainColor, recentColors, setIsH
     useEffect(() => {
         setSelectedColor(color);
     }, [color]);
-    return (React.createElement("div", { className: (mainColor || recentColors) && styles.colorPickerWrapper, onMouseLeave: () => setIsHovered && setIsHovered(false) },
+    return (React.createElement("div", { className: (mainColor || recentColors) ? 'colorPickerWrapper' : '', onMouseLeave: () => setIsHovered && setIsHovered(false) },
         mainColor && React.createElement("div", { className: mainColorClasses, style: {
                 width: `${width}px`,
                 height: `${height}px`,
                 backgroundColor: (colorValue === null || colorValue === void 0 ? void 0 : colorValue.startsWith('#')) ? colorValue : `var(--${colorValue})`,
             }, onClick: () => setIsHovered && setIsHovered(false) }),
-        recentColors && recentColors.map((color, index) => (React.createElement("div", { key: index, className: styles.circle, style: {
+        recentColors && recentColors.map((color, index) => (React.createElement("div", { key: index, className: "circle", style: {
                 width: `${width}px`,
                 height: `${height}px`,
                 backgroundColor: color.startsWith('#') ? color : `var(--${color})`,
             }, onClick: () => colorChangeHandler(color) }))),
-        React.createElement("div", { className: styles.colorPicker },
+        React.createElement("div", { className: "colorPicker" },
             React.createElement("div", { ref: circleRef, className: colorCircleDefaultClasses, onClick: () => setIsOpen(!isOpen), style: {
                     width: `${width}px`,
                     height: `${height}px`,
                     backgroundColor: selectedColor.startsWith('#') ? selectedColor : `var(--${selectedColor})`,
                 } }),
             isOpen && (React.createElement("div", { ref: popoverRef, className: popoverClassess },
-                isOpen && React.createElement(IconColorPicker10, { className: styles.colorPickerIcon, htmlColor: 'var(--white)' }),
-                React.createElement(Chrome, { color: selectedColor, placement: GithubPlacement.Right, onChange: colorChangeHandler, className: styles.customChrome, showEyeDropper: false }),
-                React.createElement("div", { className: styles.hex, style: { padding: '0 10px 0 20px' } },
+                isOpen && React.createElement(IconColorPicker10, { className: "colorPickerIcon", htmlColor: 'var(--white)' }),
+                React.createElement(Chrome, { color: selectedColor, placement: GithubPlacement.Right, onChange: colorChangeHandler, className: "customChrome", showEyeDropper: false }),
+                React.createElement("div", { className: "hex", style: { padding: '0 10px 0 20px' } },
                     React.createElement(EditableInput, { value: hexaToHex(selectedColor), style: { width: 68, alignItems: 'flex-start' }, onChange: (e, color) => {
                             const formattedColor = hexaToHex(color.toString());
-                            // colorChangeHandler(`#${ formattedColor }`)
                             colorChangeHandler(formattedColor);
                         } })))))));
 };

package/dist/components/ColorPicker/ColorPicker.module.css

@@ -1,15 +1,13 @@
-.story--wrapper {
+.story--wrapper-colorpicker {
   background-color: var(--white);
   padding: 30px;
   border-radius: 10px;
   width: 900px;
 }
 
-
-
-
 .colorPicker {
   -webkit-appearance: none;
+  appearance: none;
   border-radius: 50%;
   border: none;
   position: relative;
@@ -145,7 +143,7 @@
   z-index: 100;
 }
 
-:global(.w-color-swatch){
+.w-color-swatch{
   padding: 10px !important;
   border-radius: 10px !important;
   width: fit-content !important;
@@ -156,31 +154,31 @@
   --github-border: 0px !important;
 }
 
-:global(.w-color-swatch) > div:nth-child(1),
-:global(.w-color-swatch) > div:nth-child(2){
+.w-color-swatch > div:nth-child(1),
+.w-color-swatch > div:nth-child(2){
  display: none !important;
 }
-:global(.w-color-swatch) > div:nth-child(3) {
+.w-color-swatch > div:nth-child(3) {
   width: 195px !important;
   height: 195px !important;
   border-radius: 10px !important;
 }
 
-:global(.w-color-swatch) > div:nth-child(4){
+.w-color-swatch > div:nth-child(4){
   gap: 15px !important;
   padding: 10px 0 !important;
   /* width: 80%; */
 }
-:global(.w-color-swatch) > div:nth-child(5){
+.w-color-swatch > div:nth-child(5){
   padding: 0 !important;
 
 }
-:global(.w-color-swatch) > div:nth-child(5) > div:nth-child(2){
+.w-color-swatch > div:nth-child(5) > div:nth-child(2){
   display: none !important;
   /* width: 80%; */
 }
 /* Для всех инпутов в пикере */
-:global(.w-color-chrome) :global(.w-color-editable-input) input {
+.w-color-chrome .w-color-editable-input input {
   font-family: 'Raleway' !important;
   font-style: normal !important;
   font-weight: 400 !important;
@@ -188,41 +186,41 @@
   font-size: 12px !important;
   margin: 0 !important;
 }
-:global(.w-color-editable-input){
+.w-color-editable-input{
   margin: 0 !important;
   max-width: 30px !important;
+  flex-direction: column-reverse !important;
+  --editable-input-box-shadow : none !important;
 }
-:global(.w-color-editable-input-rgba){
+.w-color-editable-input-rgba{
   justify-content: end !important;
 }
-:global(.w-color-editable-input){
-  flex-direction: column-reverse !important;
-}
-:global(.w-color-editable-input) > span {
+
+.w-color-editable-input > span {
   padding-top: 0 !important;
 }
-:global(.w-color-editable-input:nth-child(1))> input{
+.w-color-editable-input:nth-child(1)> input{
   border-radius: 10px 0 0 10px !important;
 border: 1px solid var(--grey-light) !important;
 }
-:global(.w-color-editable-input:nth-child(2))> input{
+.w-color-editable-input:nth-child(2)> input{
   border-radius: 0 0 0 0px !important;
 border: 1px solid var(--grey-light) !important;
 border-left: none !important;
 }
-:global(.w-color-editable-input:nth-child(3))> input{
+.w-color-editable-input:nth-child(3)> input{
   border-radius: 0 0 0 0px !important;
 
   border: 1px solid var(--grey-light) !important;
   border-left: none !important; 
 }
-:global(.w-color-editable-input:nth-child(4))> input{
+.w-color-editable-input:nth-child(4)> input{
   border-radius: 0px 10px 10px 0px !important;
   border: 1px solid var(--grey-light) !important;
   border-left: none !important; 
 }
 /* Для лейблов */
-:global(.w-color-chrome-fields) :global(.w-color-editable-input) label {
+.w-color-chrome-fields.w-color-editable-input label {
   font-family: 'Raleway' !important;
   font-style: normal !important;
   font-weight: 400 !important;
@@ -230,13 +228,13 @@ border-left: none !important;
   font-size: 16px !important;
 }
 
-:global(.w-color-alpha-horizontal > div.w-color-interactive){
+.w-color-alpha-horizontal > div.w-color-interactive{
   border-radius: 8px !important;
 }
-:global(.w-color-alpha-horizontal:first-of-type > div:first-child){
+.w-color-alpha-horizontal:first-of-type > div:first-child{
   border-radius: 50px !important;
 }
-:global(.w-color-alpha-horizontal:nth-of-type(2) > div:first-child){
+.w-color-alpha-horizontal:nth-of-type(2) > div:first-child{
   border-radius: 50px !important;
 }
 
@@ -248,19 +246,15 @@ border-left: none !important;
   padding: 10px;
 }
 
-:global(.w-color-editable-input){
-  --editable-input-box-shadow : none !important;
-}
-
 .hex{
   position: absolute;
   bottom: 20px;
   left: -10px;
 }
-.hex :global(.w-color-editable-input){
+.hex .w-color-editable-input{
     border-radius: 10px !important; 
 }
-.hex > :global(.w-color-editable-input) > input {
+.hex > .w-color-editable-input > input {
   /* padding: 0 !important; */
   font-size: 12px !important;
   font-family: 'Raleway' !important;

package/dist/components/Dropdown/Dropdown.d.ts

@@ -6,7 +6,7 @@ import { DropdownProps } from 'kamotive_ui';
 export interface DropdownListItemProps {
     item: DropdownProps['items'][number];
     size: 'sm' | 'md' | 'lg';
-    selectedItem: DropdownProps['items'][number] | null;
+    selectedItem: DropdownProps['items'][number] | null | string | number;
     style?: 'default' | 'text';
     onChange: (value: DropdownProps['items'][number]) => void;
 }