kamotive_ui 1.2.3 → 1.2.4

package/dist/Icons/IconFile/IconFile.d.ts

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

package/dist/Icons/IconFile/IconFile.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const IconFile = ({ color = 'inherit', htmlColor, strokeWidth, }) => {
+    return (React.createElement("svg", { width: "25", height: "30", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", className: color },
+        React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: strokeWidth || '0', strokeLinejoin: "round", d: "M14,11C12.34,11 11,9.66 11,8V4H7C5.9,4 5,4.9 5,6V19C5,20.1 5.9,21 7,21H16C17.1,21 18,20.1 18,19V11H14M12,8C12,9.1 12.9,10 14,10H17.59L12,4.41V8M7,3H12L19,10V19C19,20.66 17.66,22 16,22H7C5.34,22 4,20.66 4,19V6C4,4.34 5.34,3 7,3Z" })));
+};

package/dist/Icons/IconUpload/IconUpload.d.ts

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

package/dist/Icons/IconUpload/IconUpload.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const IconUpload = ({ color = 'inherit', htmlColor, strokeWidth, }) => {
+    return (React.createElement("svg", { width: "45", height: "45", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", className: color },
+        React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: strokeWidth || '0', strokeLinejoin: "round", d: "M5.5,20C2.46,20 0,17.54 0,14.5C0,11.46 2.46,9 5.5,9C6.5,6.65 8.8,5 11.5,5C14.93,5 17.74,7.66 18,11.03L18.5,11C21,11 23,13 23,15.5C23,18 21,20 18.5,20H5.5M5.5,10C3,10 1,12 1,14.5C1,17 3,19 5.5,19H18.5C20.43,19 22,17.43 22,15.5C22,13.57 20.43,12 18.5,12C17.94,12 17.4,12.13 16.93,12.37L17,11.5C17,8.46 14.54,6 11.5,6C8.96,6 6.83,7.72 6.19,10.05L5.5,10M12,17V11.75L14.25,14L15,13.34L11.5,9.84L8,13.34L8.75,14L11,11.75V17H12Z" })));
+};

package/dist/Icons/index.d.ts

@@ -14,3 +14,5 @@ export { IconWarning10 } from './IconWarning/IconWarning10';
 export { IconError10 } from './IconError/IconError10';
 export { IconClose10 } from './IconClose/IconClose10';
 export { IconColorPicker10 } from './IconColorPicker/IconColorPicker10';
+export { IconFile } from './IconFile/IconFile';
+export { IconUpload } from './IconUpload/IconUpload';

package/dist/Icons/index.js

@@ -14,3 +14,5 @@ export { IconWarning10 } from './IconWarning/IconWarning10';
 export { IconError10 } from './IconError/IconError10';
 export { IconClose10 } from './IconClose/IconClose10';
 export { IconColorPicker10 } from './IconColorPicker/IconColorPicker10';
+export { IconFile } from './IconFile/IconFile';
+export { IconUpload } from './IconUpload/IconUpload';

package/dist/colors.css

@@ -1,7 +1,7 @@
 :root {
   --white: #ffffff;
 
-  --grey-medium: #d1d1d6;
+  --grey-medium: #aeaeb2;
   --grey-light: #e5e5ea;
   --grey-extraLight: #f2f2f7;
 
@@ -10,6 +10,7 @@
   --text-dark: #2a3336;
   --text-btn: #6f6f6f;
   --text-btn-light: #9ca0a7;
+  --icons-grey: #828286;
   --icons-medium: #5a5d61;
   --icons-light: #dce4f0;
   --icons-active: #bfd0eb;
@@ -32,6 +33,9 @@
   --info-main: #f2f2f7;
   --info-secondary: #e5e5ea;
 
+  --fills-active: #eef8ff;
+  --fills-disabled: #f5f5f5;
+
   --info-dark: rgb(209, 209, 214);
   
   --green:#34c759;

package/dist/components/Button/Button.js

@@ -1,46 +1,101 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import styles from './Button.module.css';
 import classNames from 'classnames';
 import { Typography } from '../Typography/Typography';
 /**
  * Компонент Button представляет собой кнопку, которую можно настроить с помощью различных параметров (размер, иконки, стили, состояние).
  */
-export const Button = ({ label, variant = 'fill', size = 'md', style = 'text', condition = 'default', icon, disabled = false, onClick, }) => {
-    const buttonClasses = classNames(styles['button'], styles[`button--${variant}-${condition}`], styles[`button--${size}`], styles[`button--${style}`]);
+export const Button = ({ label, variant = 'fill', size = 'md', style, condition, icon, disabled = false, onClick, children, error, color, name, type = 'button', form }) => {
+    const [buttonStyle, setButtonStyle] = useState('');
+    const [buttonCondition, setButtonCondition] = useState(condition);
+    const buttonClasses = classNames(styles['button'], styles[`button--${size}`], styles[`button--${buttonStyle}`], {
+        [styles[`button--${variant}-${buttonCondition}`]]: buttonCondition && !color,
+        [styles[`button--${variant}-custom`]]: color && !error
+    });
     const iconColorFn = () => {
-        switch (condition) {
-            case 'default':
-                if (variant === 'outline') {
-                    return disabled ? '#8dc6ef' : '#0d99ff';
-                }
-                return disabled ? 'var(--blue-disabled)' : '#FFFFFF';
-            case 'error':
-                if (variant === 'outline') {
-                    return disabled ? '#ff8d87' : '#ff3b30';
-                }
-                return disabled ? 'var(--red-disabled)' : '#FFFFFF';
-            case 'success':
-                if (variant === 'outline') {
-                    return disabled ? '#8ac99a' : '#34c759';
+        if (buttonCondition && !color) {
+            switch (buttonCondition) {
+                case 'default':
+                    if (variant === 'outline') {
+                        return disabled ? '#8dc6ef' : '#0d99ff';
+                    }
+                    return '#FFFFFF';
+                case 'error':
+                    if (variant === 'outline') {
+                        return disabled ? '#ff8d87' : '#ff3b30';
+                    }
+                    return '#FFFFFF';
+                case 'success':
+                    if (variant === 'outline') {
+                        return disabled ? '#8ac99a' : '#34c759';
+                    }
+                    return '#FFFFFF';
+                case 'warning':
+                    if (variant === 'outline') {
+                        return disabled ? '#ffb44a' : '#ff9500';
+                    }
+                    return '#FFFFFF';
+                case 'info':
+                    return disabled ? 'var(--gray-disabled)' : '#6F6F6F';
+                default:
+                    return '#FFFFFF';
+            }
+        }
+        else if (color && !error) {
+            if (variant === 'outline') {
+                return disabled ? `color-mix(in srgb, ${color} 50%, white)` : color;
+            }
+            return '#FFFFFF';
+        }
+    };
+    const btnIcon = icon || typeof children === 'object' && children;
+    useEffect(() => {
+        if (!buttonStyle && style) {
+            setButtonStyle(style);
+        }
+        else {
+            if (btnIcon && variant !== 'link') {
+                if (!label && !(typeof children === 'string' && children)) {
+                    setButtonStyle('icon');
                 }
-                return disabled ? 'var(--green-disabled)' : '#FFFFFF';
-            case 'warning':
-                if (variant === 'outline') {
-                    return disabled ? '#ffb44a' : '#ff9500';
+                else {
+                    setButtonStyle('default');
                 }
-                return disabled ? 'var(--orange-disabled)' : '#FFFFFF';
-            case 'info':
-                return disabled ? 'var(--gray-disabled)' : '#6F6F6F';
-            default:
-                return disabled ? 'var(--blue-disabled)' : '#FFFFFF';
+            }
+            else {
+                setButtonStyle('text');
+            }
         }
-    };
+    }, [style, btnIcon, label, children]);
+    useEffect(() => {
+        if (!condition) {
+            if (error) {
+                setButtonCondition('error');
+            }
+            else {
+                setButtonCondition('default');
+            }
+        }
+        else {
+            error ? setButtonCondition('error') : setButtonCondition(condition);
+        }
+    }, [condition, error]);
     const iconColorStyle = iconColorFn();
-    return (React.createElement("button", { className: buttonClasses, onClick: onClick, disabled: disabled },
-        icon &&
-            React.cloneElement(icon, {
+    if (!buttonStyle) {
+        return React.createElement("button", { className: buttonClasses },
+            React.createElement(Typography, { variant: 'Body2' }, "\u041A\u043D\u043E\u043F\u043A\u0430"));
+    }
+    return (React.createElement("button", { className: buttonClasses, style: color && !error ? {
+            '--button-color': color,
+            '--button-hover-color': variant === 'fill' || variant === 'link' ? `color-mix(in srgb, ${color} 90%, black)` : `color-mix(in srgb, ${color} 10%, transparent)`,
+            '--button-active-color': variant === 'fill' || variant === 'link' ? `color-mix(in srgb, ${color} 80%, black)` : `color-mix(in srgb, ${color} 20%, transparent)`,
+            '--button-disabled-color': variant === 'fill' || variant === 'link' ? `color-mix(in srgb, ${color} 80%, white)` : `color-mix(in srgb, ${color} 10%, transparent)`,
+            '--button-disabled-textColor': variant === 'fill' ? `color-mix(in srgb, ${color} 80%, white)` : `color-mix(in srgb, ${color} 50%, transparent)`,
+        } : {}, onClick: onClick, disabled: disabled, "aria-disabled": disabled, type: type, name: name ? name : label ? `button-${label}` : 'button', form: form },
+        btnIcon && (buttonStyle === 'icon' || buttonStyle === 'default') &&
+            React.cloneElement(btnIcon, {
                 htmlColor: iconColorStyle,
                 strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0',
             }),
-        React.createElement(Typography, { variant: 'Body2' }, label)));
+        (buttonStyle === 'text' || buttonStyle === 'default') && React.createElement(Typography, { variant: 'Body2' }, label ? label : (typeof children === 'string' && children))));
 };

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

@@ -1,10 +1,26 @@
 .button {
   border-radius: 10px;
-  padding: 5px 10px;
   cursor: pointer;
-  padding: 0.5em 1.5em;
   width: fit-content;
- 
+  box-sizing: border-box;
+}
+
+
+/* Общие стили для всех типов кнопок */
+.button--default,
+.button--text,
+.button--icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: calc(0.5em - 1px) calc(0.7em - 1px);
+  height: 2.5em; 
+  box-sizing: border-box;
+  vertical-align: middle; 
+}
+
+.button--default {
+  gap: 5px;
 }
 
 /* Стили для дефолтных кнопок */
@@ -12,111 +28,169 @@
 .button--fill-default {
   background-color: var(--blue-main);
   color: var(--white);
-  border: none;
+  border: 1px solid transparent;
 }
 .button--fill-default:hover {
   background-color: var(--blue-secondary);
   color: var(--white);
-  border: none;
 }
 .button--fill-default:active {
   background-color: var(--blue-dark);
   color: var(--white);
-  border: none;
 }
 .button--fill-default:disabled {
   background-color: var(--blue-disabled);
   color: var(--white);
-  border: none;
   cursor: not-allowed;
 }
 /* ошибка */
 .button--fill-error {
   background-color: var(--error-main);
   color: var(--white);
-  border: none;
+  border: 1px solid transparent; 
+
 }
 .button--fill-error:hover {
   background-color: var(--error-secondary);
   color: var(--white);
-  border: none;
 }
 .button--fill-error:active {
   background-color: var(--error-dark);
   color: var(--white);
-  border: none;
 }
 .button--fill-error:disabled {
   background-color: var(--error-disabled);
   color: var(--white);
-  border: none;
   cursor: not-allowed;
 }
 /* success */
 .button--fill-success {
   background-color: var(--success-main);
   color: var(--white);
-  border: none;
+  border: 1px solid transparent; 
 }
 .button--fill-success:hover {
   background-color: var(--success-secondary);
   color: var(--white);
-  border: none;
 }
 .button--fill-success:active {
   background-color: var(--success-dark);
   color: var(--white);
-  border: none;
 }
 .button--fill-success:disabled {
   background-color: var(--success-disabled);
   color: var(--white);
-  border: none;
   cursor: not-allowed;
 }
 /* warning */
 .button--fill-warning {
   background-color: var(--warning-main);
   color: var(--white);
-  border: none;
+  border: 1px solid transparent; 
 }
 .button--fill-warning:hover {
   background-color: var(--warning-secondary);
   color: var(--white);
-  border: none;
 }
 .button--fill-warning:active {
   background-color: var(--warning-dark);
   color: var(--white);
-  border: none;
 }
 .button--fill-warning:disabled {
   background-color: var(--warning-disabled);
   color: var(--white);
-  border: none;
   cursor: not-allowed;
 }
 /* info */
 .button--fill-info {
   background-color: var(--info-main);
   color: var(--text-btn);
-  border: none;
+  border: 1px solid transparent; 
 }
 .button--fill-info:hover {
   background-color: var(--info-secondary);
   color: var(--text-btn);
-  border: none;
 }
 .button--fill-info:active {
   background-color: var(--info-dark);
   color: var(--text-btn);
-  border: none;
 }
 .button--fill-info:disabled {
   background-color: var(--info-main);
   color: var(--text-btn-light);
+  cursor: not-allowed;
+}
+
+/*--Для пользовательского цвета--*/
+.button--fill-custom {
+  background-color: var(--button-color);
+  color: var(--white);
+  border: 1px solid transparent; 
+}
+
+.button--fill-custom:hover {
+  background-color: var(--button-hover-color);
+}
+
+.button--fill-custom:active {
+  background-color: var(--button-active-color);
+}
+
+.button--fill-custom:disabled {
+  background-color: var(--button-disabled-color);
+  cursor: not-allowed;
+}
+
+.button--outline-custom {
+  background-color: transparent;
+  color: var(--button-color);
+  border: 1px solid var(--button-color);
+}
+
+.button--outline-custom:hover {
+  background-color: var(--button-hover-color);
+  color: var(--button-color);
+  border: 1px solid var(--button-color);
+}
+
+.button--outline-custom:active {
+  background-color: var(--button-active-color);
+  color: var(--button-color);
+  border: 1px solid var(--button-color);
+}
+
+.button--outline-custom:disabled {
+  background-color: var(--button-disabled-color);
+  color: var(--button-disabled-textColor);
+  border: 1px solid var(--button-disabled-textColor);
+  cursor: not-allowed;
+}
+
+.button--link-custom {
+  background-color: rgba(255, 255, 255, 0);
+  color: var(--button-color);
+  border: none;
+}
+
+.button--link-custom:hover {
+  background-color: rgba(255, 255, 255, 0);
+  color: var(--button-hover-color);
+  border: none;
+  text-decoration: underline;
+}
+
+.button--link-custom:active {
+  background-color: rgba(255, 255, 255, 0);
+  color: var(--button-active-color);
+  border: none;
+}
+
+.button--link-custom:disabled {
+  background-color: rgba(255, 255, 255, 0);
+  color: var(--button-disabled-color);
   border: none;
   cursor: not-allowed;
+  text-decoration: none;
 }
 
 /* Стили для outline кнопок */
@@ -245,6 +319,7 @@
   border: none;
   background-color: rgba(255, 255, 255, 0);
   cursor: not-allowed;
+  text-decoration: none;
 }
 .button--link-error {
   color: var(--error-main);
@@ -273,6 +348,7 @@
   border: none;
   background-color: rgba(255, 255, 255, 0);
   cursor: not-allowed;
+  text-decoration: none;
 }
 .button--link-warning {
   color: var(--warning-main);
@@ -287,6 +363,7 @@
   border: none;
   background-color: rgba(255, 255, 255, 0);
   cursor: not-allowed;
+  text-decoration: none;
 }
 .button--link-info {
   color: var(--text-btn);
@@ -301,32 +378,18 @@
   border: none;
   background-color: rgba(255, 255, 255, 0);
   cursor: not-allowed;
+  text-decoration: none;
 }
 
 /* Размеры кнопок */
 .button--sm {
-  /* font-size: 0.8rem; */
   font-size: 12px;
 }
 .button--md {
-  /* font-size: 1rem; */
   font-size: 14px;
 }
 .button--lg {
-  /* font-size: 1.2rem; */
   font-size: 16px;
 }
 
-/* Стили кнопок иконка/без иконки/ссылка */
-.button--default {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  padding: 0.5em 1em 0.5em 0.7em;
-}
-.button--text {
-  padding: 0.5em 1em;
-}
-.button--icon {
-  padding: 0.5em 0.7em;
-}
+

package/dist/components/ColorPicker/ColorPicker.js

@@ -6,10 +6,60 @@ import EditableInput from '@uiw/react-color-editable-input';
 import { GithubPlacement } from '@uiw/react-color-github';
 import { IconColorPicker10 } from '../../Icons';
 ;
+// Функция для преобразования HEXA в HEX
+const hexaToHex = (hexa = 'fff') => {
+    const cleanHex = hexa.replace('#', '');
+    if (cleanHex.length >= 8) {
+        return `#${cleanHex.slice(0, 6)}`;
+    }
+    if (cleanHex.length === 6) {
+        return `#${cleanHex}`;
+    }
+    if (cleanHex.length === 3) {
+        return `#${cleanHex[0]}${cleanHex[0]}${cleanHex[1]}${cleanHex[1]}${cleanHex[2]}${cleanHex[2]}`;
+    }
+    if (cleanHex.length < 6) {
+        return `#${cleanHex + '0'.repeat(6 - cleanHex.length)}`;
+    }
+    return '#ffffff';
+};
+/**
+ * Функция-обертка. Вызывает функцию-колбэк через заданный промежуток времени после того, как мышь покинет область
+ * @param callback функция-колбэк
+ * @param delay время в мс, через которое будет вызвана функция
+ */
+const mouseLeaveTimer = (callback, delay) => {
+    let timer = null;
+    function wrapper(element) {
+        const handleMouseLeave = () => {
+            timer = setTimeout(() => {
+                callback();
+                timer = null;
+            }, delay);
+        };
+        const handleMouseEnter = () => {
+            if (timer) {
+                clearTimeout(timer);
+                timer = null;
+            }
+        };
+        element.addEventListener('mouseleave', handleMouseLeave);
+        element.addEventListener('mouseenter', handleMouseEnter);
+        // функция очистки
+        return function cleanup() {
+            element.removeEventListener('mouseleave', handleMouseLeave);
+            element.removeEventListener('mouseenter', handleMouseEnter);
+            if (timer) {
+                clearTimeout(timer);
+            }
+        };
+    }
+    return wrapper;
+};
 /**
  * Компонент ColorPicker представляет собой элемент управления для выбора цвета.
  */
-export const ColorPicker = ({ color = '#ffffff', mainColor, recentColors, setIsHovered, width = 10, height = 10, autoOpen = false, onChange, }) => {
+export const ColorPicker = ({ color = '#ffffff', mainColor, recentColors, setIsHovered, width = 10, height = 10, autoOpen = false, onChange, onColorChange, }) => {
     const [colorValue, setColorValue] = useState(mainColor);
     const [selectedColor, setSelectedColor] = useState(color);
     const [isColorChanged, setIsColorChanged] = useState(false);
@@ -17,6 +67,26 @@ export const ColorPicker = ({ color = '#ffffff', mainColor, recentColors, setIsH
     const [popoverPosition, setPopoverPosition] = useState('bottom');
     const circleRef = useRef(null);
     const popoverRef = useRef(null);
+    const divRef = useRef(null);
+    const mainColorClasses = classNames(styles.circle, {
+        [styles['mainColor']]: mainColor,
+    });
+    const colorCircleDefaultClasses = classNames(styles.circle, styles.colorCircleDefault);
+    const popoverClassess = classNames(styles['popover'], {
+        [styles[`popover--${popoverPosition}`]]: true,
+    });
+    useEffect(() => {
+        if (!divRef.current)
+            return;
+        const setTimer = mouseLeaveTimer(() => {
+            setIsHovered(false);
+            if (onChange) {
+                onChange(colorValue || color);
+            }
+        }, 800);
+        const cleanup = setTimer(divRef.current);
+        return cleanup;
+    }, []);
     useEffect(() => {
         // Обработчик клика вне компонента развертывания выбора цвета
         const handleClickOutside = (event) => {
@@ -51,58 +121,32 @@ export const ColorPicker = ({ color = '#ffffff', mainColor, recentColors, setIsH
             !autoOpen && document.removeEventListener('mousedown', handleClickOutside);
         };
     }, [isOpen]);
-    const mainColorClasses = classNames(styles.circle, {
-        [styles['mainColor']]: mainColor,
-    });
-    const colorCircleDefaultClasses = classNames(styles.circle, {
-        [styles.colorCircleDefault]: color === '#ffffff' && !isColorChanged || isColorChanged && selectedColor !== colorValue
-    });
-    const popoverClassess = classNames(styles['popover'], {
-        [styles[`popover--${popoverPosition}`]]: true,
-    });
-    // Функция для преобразования HEXA в HEX
-    const hexaToHex = (hexa = 'fff') => {
-        const cleanHex = hexa.replace('#', '');
-        if (cleanHex.length >= 8) {
-            return `#${cleanHex.slice(0, 6)}`;
-        }
-        if (cleanHex.length === 6) {
-            return `#${cleanHex}`;
-        }
-        if (cleanHex.length === 3) {
-            return `#${cleanHex[0]}${cleanHex[0]}${cleanHex[1]}${cleanHex[1]}${cleanHex[2]}${cleanHex[2]}`;
-        }
-        if (cleanHex.length < 6) {
-            return `#${cleanHex + '0'.repeat(6 - cleanHex.length)}`;
-        }
-        return '#ffffff';
-    };
+    useEffect(() => {
+        setSelectedColor(colorValue || color);
+    }, [colorValue]);
     const colorChangeHandler = (color) => {
         const newColor = typeof color === 'string' ? color : color.hexa;
         setIsColorChanged(true);
         setColorValue(newColor);
         setSelectedColor(newColor);
-        onChange === null || onChange === void 0 ? void 0 : onChange(newColor);
+        onColorChange(newColor);
     };
-    useEffect(() => {
-        setSelectedColor(color);
-    }, [color]);
-    return (React.createElement("div", { className: (mainColor || recentColors) && styles.colorPickerWrapper, onMouseLeave: () => setIsHovered && setIsHovered(false) },
-        mainColor && React.createElement("div", { className: mainColorClasses, style: {
+    return (React.createElement("div", { className: (mainColor || recentColors) && styles.colorPickerWrapper, ref: divRef },
+        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: {
-                width: `${width}px`,
-                height: `${height}px`,
-                backgroundColor: color.startsWith('#') ? color : `var(--${color})`,
-            }, onClick: () => colorChangeHandler(color) }))),
+            } })),
+        recentColors &&
+            recentColors.map((color, index) => (React.createElement("div", { key: index, className: styles.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", { 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)' }),