kamotive_ui 1.2.5 → 1.2.7

package/dist/Intro/Welcome.module.css

@@ -1,5 +1,5 @@
 .h1{
-  font-family: 'Raleway';
+  font-family: var(--font-family);
   font-style: normal;
   font-weight: 600;
   line-height: 16.5px;
@@ -8,7 +8,7 @@
   margin: 20px;
 }
 .body {
-  font-family: 'Raleway';
+  font-family: var(--font-family);
   font-style: normal;
   font-weight: 400;
   line-height: 16.5px;

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

@@ -163,7 +163,7 @@
 }
 /* Для всех инпутов в пикере */
 :global(.w-color-chrome) :global(.w-color-editable-input) input {
-  font-family: 'Raleway' !important;
+  font-family: var(--font-family) !important;
   font-style: normal !important;
   font-weight: 400 !important;
   line-height: 14px !important;
@@ -204,7 +204,7 @@ border-left: none !important;
 }
 /* Для лейблов */
 :global(.w-color-chrome-fields) :global(.w-color-editable-input) label {
-  font-family: 'Raleway' !important;
+  font-family: var(--font-family) !important;
   font-style: normal !important;
   font-weight: 400 !important;
   line-height: 16.5px !important;
@@ -240,7 +240,7 @@ border-left: none !important;
 .hex > :global(.w-color-editable-input) > input {
   /* padding: 0 !important; */
   font-size: 12px !important;
-  font-family: 'Raleway' !important;
+  font-family: var(--font-family) !important;
   padding: 5px !important;
   width: 70px !important;
   height: 45px !important;

package/dist/components/Dropdown/Dropdown.js

@@ -83,22 +83,77 @@ export const DropdownListItem = ({ item, getOptionLabel, size = 'md', selectedIt
             return (React.createElement(DropdownListItem, { key: (_a = child === null || child === void 0 ? void 0 : child.key) !== null && _a !== void 0 ? _a : childIndex, item: child, getOptionLabel: getOptionLabel, size: size, selectedItem: selectedItem, onChange: onChange, isActive: activeIndex === index, activeIndex: activeIndex, index: childIndex }));
         })))));
 };
-export const Dropdown = ({ id, label, placeholder, size = 'lg', options, getOptionLabel, value, defaultValue, variant = 'text', style, className, disabled = false, readOnly = false, isOpened = false, noOptionsText = 'Нет вариатов для выбора', isLeftLabel = false, error = false, helperText, onChange, onClose, clearable = true, required = false, isDivider = false, }) => {
-    var _a;
+export const Dropdown = ({ options, id, label, placeholder, required = false, value, defaultValue, onChange, getOptionLabel, variant = 'text', size = 'lg', style, className, isLeftLabel = false, isDivider = false, disabled = false, readOnly = false, isOpened = false, error = false, helperText, onClick, onBlur, onFocus, onClose, clearable = true, enableAutocomplete = false, noOptionsText = 'Нет вариантов для выбора', }) => {
     const [isOpen, setIsOpen] = useState(isOpened);
     const [modifiedOptions, setModifiedOptions] = useState([]);
     const [selectedItem, setSelectedItem] = useState(null);
     const [errorInput, setErrorInput] = useState(false);
     const [errorInputHelperText, setErrorInputHelperText] = useState(helperText);
     const [activeIndex, setActiveIndex] = useState(-1);
+    const [searchValue, setSearchValue] = useState('');
+    const [filteredOptions, setFilteredOptions] = useState([]);
+    const inputRef = useRef(null);
     const containerRef = useRef(null);
     const [containerWidth, setContainerWidth] = useState(undefined);
-    const handleToggle = (event) => {
-        setIsOpen((prev) => !prev);
-        if (isOpen) {
-            onClose === null || onClose === void 0 ? void 0 : onClose(event);
+    const wrapperClassess = classNames(className, {
+        [styles['dropdown--container']]: !isLeftLabel,
+        [styles['dropdown--container-left']]: isLeftLabel,
+        [styles['dropdown--container-label']]: label && !isLeftLabel && !required,
+        [styles['dropdown--container-helperText']]: errorInput,
+    });
+    const buttonClassess = classNames(styles.button, 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,
+        [styles['button--error']]: errorInput,
+    });
+    const dropdownClassess = classNames(styles.dropdown, className, {
+        [styles['dropdown--disabled']]: disabled,
+    });
+    const labelClasses = classNames(styles.label, styles[size], {
+        [styles['label--default']]: !isLeftLabel,
+        [styles['label--left']]: isLeftLabel,
+        [styles['label--required']]: required,
+    });
+    const selectedItemClassess = classNames({
+        [styles['item-selected']]: selectedItem,
+        [styles['item-placeholder']]: !selectedItem && ((placeholder !== null && placeholder !== void 0 ? placeholder : label) || (!placeholder && !label)),
+        [styles['button--icons--item-selected']]: variant === 'icons' && (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon),
+    });
+    // обновляет значения searchValue и filteredOptions
+    const setAutocompleteValues = (value) => {
+        setSearchValue(value);
+        // фильтрация по введенному значению
+        if (modifiedOptions && modifiedOptions.length > 0) {
+            const filtered = modifiedOptions.filter((option) => {
+                if (!option || !option.value)
+                    return false;
+                const optionValue = String(option.value).toLowerCase();
+                return optionValue.includes(value.toLowerCase());
+            });
+            setFilteredOptions(filtered);
+            setActiveIndex(filtered && filtered.length > 0 ? 0 : -1);
         }
     };
+    const handleToggle = useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const newIsOpen = !isOpen;
+        setIsOpen(newIsOpen);
+        if (newIsOpen && enableAutocomplete) {
+            const value = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) ? selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value.toString() : searchValue;
+            setSearchValue(value);
+            setFilteredOptions(modifiedOptions);
+            requestAnimationFrame(() => {
+                if (inputRef.current) {
+                    inputRef.current.focus();
+                }
+            });
+        }
+        else if (!newIsOpen) {
+            onClose === null || onClose === void 0 ? void 0 : onClose(event);
+        }
+    }, [isOpen, enableAutocomplete, searchValue, selectedItem, modifiedOptions, onClose]);
     const onChangeHandler = (event, item) => {
         event.preventDefault();
         event.stopPropagation();
@@ -116,6 +171,12 @@ export const Dropdown = ({ id, label, placeholder, size = 'lg', options, getOpti
             setErrorInput(true);
         }
     };
+    const handleSearchChange = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const value = event.target.value;
+        setAutocompleteValues(value);
+    };
     //для выбора опции из списка с клавиатуры
     const handleKeyDown = (event) => {
         if (!isOpen) {
@@ -127,6 +188,14 @@ export const Dropdown = ({ id, label, placeholder, size = 'lg', options, getOpti
             }
             return;
         }
+        if (enableAutocomplete &&
+            event.target instanceof HTMLInputElement &&
+            (event.key !== 'ArrowDown' &&
+                event.key !== 'ArrowUp' &&
+                event.key !== 'Enter' &&
+                event.key !== 'Escape')) {
+            return;
+        }
         switch (event.key) {
             case 'ArrowDown':
                 event.preventDefault();
@@ -161,7 +230,11 @@ export const Dropdown = ({ id, label, placeholder, size = 'lg', options, getOpti
             ? checkItem(defaultValue)
             : null;
         setSelectedItem(startValue !== null && startValue !== void 0 ? startValue : null);
-        setIsOpen(false);
+        if (!enableAutocomplete) {
+            setIsOpen(false);
+        }
+        setSearchValue("");
+        setFilteredOptions(modifiedOptions);
         onChange === null || onChange === void 0 ? void 0 : onChange(event, startValue !== null && startValue !== void 0 ? startValue : null);
         onClose === null || onClose === void 0 ? void 0 : onClose(event);
         setActiveIndex(-1);
@@ -170,36 +243,37 @@ export const Dropdown = ({ id, label, placeholder, size = 'lg', options, getOpti
             setErrorInputHelperText(helperText !== null && helperText !== void 0 ? helperText : 'Поле обязательно для заполнения');
         }
     };
-    const wrapperClassess = classNames(className, {
-        [styles['dropdown--container']]: !isLeftLabel,
-        [styles['dropdown--container-left']]: isLeftLabel,
-        [styles['dropdown--container-label']]: label && !isLeftLabel && !required,
-        [styles['dropdown--container-helperText']]: errorInput,
-    });
-    const buttonClassess = classNames(styles.button, 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,
-        [styles['button--error']]: errorInput,
-    });
-    const dropdownClassess = classNames(styles.dropdown, className, {
-        [styles['dropdown--disabled']]: disabled,
-    });
-    const labelClasses = classNames(styles.label, styles[size], {
-        [styles['label--default']]: !isLeftLabel,
-        [styles['label--left']]: isLeftLabel,
-        [styles['label--required']]: required,
-    });
-    const selectedItemClassess = classNames({
-        [styles['item-selected']]: selectedItem,
-        [styles['item-placeholder']]: !selectedItem && ((placeholder !== null && placeholder !== void 0 ? placeholder : label) || (!placeholder && !label)),
-        [styles['button--icons--item-selected']]: variant === 'icons' && (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon),
-    });
+    const getTextField = () => {
+        var _a;
+        return (React.createElement("div", { className: selectedItemClassess },
+            variant === 'icons' &&
+                (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon) &&
+                React.cloneElement(selectedItem.icon, {
+                    strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0',
+                }),
+            isOpen && enableAutocomplete ? (React.createElement("input", { ref: inputRef, type: "text", value: searchValue, className: styles.inlineSearchInput, onChange: handleSearchChange, placeholder: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) ? selectedItem.value.toString() : 'Поиск...', onClick: (e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+                    e.currentTarget.focus();
+                }, onMouseDown: (e) => {
+                    e.stopPropagation();
+                }, onFocus: (e) => {
+                    e.stopPropagation();
+                    onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+                }, onBlur: (e) => {
+                    e.stopPropagation();
+                    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+                }, onKeyDown: handleKeyDown, autoFocus: true })) : selectedItem ? (selectedItem.value) : (searchValue || ((_a = placeholder !== null && placeholder !== void 0 ? placeholder : label) !== null && _a !== void 0 ? _a : 'Выберите значение'))));
+    };
     const getDropdownMenu = () => {
-        const menu = isOpen && (React.createElement("div", { className: dropdownClassess }, modifiedOptions && modifiedOptions.length > 0 ? (modifiedOptions.map((modifiedOption, index) => {
+        const optionsToRender = enableAutocomplete && searchValue
+            ? filteredOptions
+            : modifiedOptions;
+        const menu = isOpen && (React.createElement("div", { className: dropdownClassess }, optionsToRender && optionsToRender.length > 0 ? (optionsToRender.map((optionsToRender, index) => {
             var _a;
-            return (React.createElement(DropdownListItem, { key: (_a = modifiedOption === null || modifiedOption === void 0 ? void 0 : modifiedOption.key) !== null && _a !== void 0 ? _a : index, item: modifiedOption, getOptionLabel: getOptionLabel, size: size, selectedItem: selectedItem, variant: variant, onChange: onChangeHandler, isActive: activeIndex === index, activeIndex: activeIndex, index: index }));
-        })) : (React.createElement("div", { className: styles['no-options'] }, noOptionsText))));
+            return (React.createElement(DropdownListItem, { key: (_a = optionsToRender === null || optionsToRender === void 0 ? void 0 : optionsToRender.key) !== null && _a !== void 0 ? _a : index, item: optionsToRender, getOptionLabel: getOptionLabel, size: size, selectedItem: selectedItem, variant: variant, onChange: onChangeHandler, isActive: activeIndex === index, activeIndex: activeIndex, index: index }));
+        })) : (React.createElement("div", { className: `${styles['item-container']} ${styles['item-block']}`, style: { paddingLeft: "15px" } }, noOptionsText))));
         return isOpen ? menu : null;
     };
     useEffect(() => {
@@ -254,21 +328,18 @@ export const Dropdown = ({ id, label, placeholder, size = 'lg', options, getOpti
         else {
             setSelectedItem(null);
         }
-    }, [value, defaultValue, checkItem]);
+    }, [value, defaultValue]);
     useEffect(() => {
         setErrorInput(error);
     }, [error]);
-    return (React.createElement("div", { id: id, className: wrapperClassess, ref: containerRef, style: style ? style : { width: isLeftLabel && containerWidth ? `${containerWidth}px` : '100%' } },
+    useEffect(() => {
+        setFilteredOptions(modifiedOptions);
+    }, [modifiedOptions]);
+    return (React.createElement("div", { id: id, className: wrapperClassess, ref: containerRef, onClick: onClick, style: style ? style : { width: isLeftLabel && containerWidth ? `${containerWidth}px` : '100%' } },
         label && (React.createElement(Typography, { variant: "Caption", className: labelClasses }, label)),
         React.createElement("button", { className: buttonClassess, onClick: readOnly ? undefined : handleToggle, disabled: disabled, tabIndex: 0, onKeyDown: handleKeyDown },
-            React.createElement("div", { className: selectedItemClassess },
-                variant === 'icons' &&
-                    (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon) &&
-                    React.cloneElement(selectedItem.icon, {
-                        strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0',
-                    }),
-                selectedItem ? selectedItem.value : ((_a = placeholder !== null && placeholder !== void 0 ? placeholder : label) !== null && _a !== void 0 ? _a : 'Выберите значение')),
-            clearable && !readOnly && !disabled && selectedItem && (React.createElement("div", { className: styles.resetButton },
+            getTextField(),
+            clearable && !readOnly && !disabled && (selectedItem || enableAutocomplete && searchValue) && (React.createElement("div", { className: styles.resetButton },
                 React.createElement(IconClose10, { strokeWidth: "0.2", htmlColor: "var(--text-light)", onClick: handleReset }))),
             React.createElement("div", { className: styles.dropdownIcon }, !isOpen ? (React.createElement(ChevronDown10, { strokeWidth: size === 'lg' ? '0.5' : '0.3' })) : (React.createElement(ChevronUp10, { strokeWidth: size === 'lg' ? '0.5' : '0.3' }))),
             getDropdownMenu()),

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

@@ -29,7 +29,7 @@
 }
 
 .button {
-  font-family: var(--font-family-main);
+  font-family: var(--font-family);
   font-style: normal;
   font-weight: 400;
   line-height: 16.5px;
@@ -143,6 +143,19 @@
   overflow-x: hidden;
 }
 
+.inlineSearchInput {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: inherit;
+  font-family: inherit;
+  color: inherit;
+  padding: 0;
+  cursor: text;
+  pointer-events: auto;
+  text-align: left; 
+}
+
 .item--container {
   padding: 0.5em 0.5em;
   width: 87%;
@@ -195,6 +208,7 @@
 
 .label {
   transition: 0.3ms ease-out;
+  font-weight: 600;
   /* color: var(--text-grey); */
 }
 .label--default {
@@ -205,7 +219,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: calc(100% - 32px);
-  color: var(--text-grey);
+  color: var(--text-dark);
 }
 .label--default.lg {
   font-size: 12px;
@@ -240,14 +254,27 @@
 
 .item-selected {
   color: var(--text-dark);
-  white-space: nowrap;
+  width: 80%;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  text-align: left;
+  position: relative;
+}
+
+.item-selected .inlineSearchInput {
+  text-align: left;
+  direction: ltr;
+  width: 100%;
+  overflow: visible;
 }
 
 .item-placeholder {
   color: var(--text-grey);
   transition: 0.3ms ease-out;
+  display: flex;
+  justify-content: flex-start;
 }
 
 .helperText.md {

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

@@ -19,7 +19,7 @@
 }
 
 .input {
-  font-family: var(--font-family-main);
+  font-family: var(--font-family);
   font-style: normal;
   font-weight: 400;
   position: relative;
@@ -103,7 +103,7 @@
 
 .label {
   line-height: 14px;
-  font-weight: 400;
+  font-weight: 600;
   transition: 0.3ms ease-out;
   /* color: var(--text-grey); */
 }
@@ -115,7 +115,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: calc(100% - 32px);
-  color: var(--text-grey);
+  color: var(--text-dark);
 }
 .label--default .lg {
   font-size: 12px;

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

@@ -39,7 +39,7 @@
 .progress-bar-percentage {
   /* position: absolute; */
   /* top: 50%; */
-  /* font-family: var(--font-family-main);
+  /* font-family: var(--font-family);
   font-weight: 300;
   font-size: 11px;
   line-height: 13; */

package/dist/components/Tab/Tab.js

@@ -3,7 +3,7 @@ import styles from './Tab.module.css';
 import classNames from 'classnames';
 ;
 import { Typography } from '../Typography/Typography';
-export const Tab = ({ value, onClick, label, selected, disabled = false }) => {
+export const Tab = ({ value, onClick, onMouseEnter, label, selected, disabled = false }) => {
     const handleClick = (e) => {
         if (onClick && value && !disabled) {
             onClick(value);
@@ -12,6 +12,6 @@ export const Tab = ({ value, onClick, label, selected, disabled = false }) => {
     return (React.createElement("button", { role: "tab", "aria-selected": selected, "aria-disabled": disabled, value: value, className: classNames(styles.tab, {
             [styles['selected']]: selected,
             [styles['disabled']]: disabled,
-        }), onClick: handleClick },
+        }), onClick: handleClick, onMouseEnter: onMouseEnter },
         React.createElement(Typography, { variant: selected ? 'Body2-Medium' : "Body2" }, label)));
 };

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

@@ -18,7 +18,7 @@
   background-color: var(--tab-extraLight);
   border: none;
 
-  font-family: 'Raleway';
+  font-family: var(--font-family);
   font-style: normal;
   font-weight: 400;
   font-size: 13px;

package/dist/components/Tag/Tag.module.css

@@ -7,7 +7,7 @@
   align-items: center;
   gap: 10px;
 
-  font-family: 'Raleway';
+  font-family: var(--font-family);
   font-style: normal;
   font-weight: 500;
   font-size: 12px;

package/dist/components/ToggleButton/ToggleButton.module.css

@@ -4,7 +4,7 @@
     justify-content: left;
     gap: 5px;
 
-    font-family: 'Raleway';
+    font-family: var(--font-family);
     font-style: normal;
     font-weight: 400;
     font-size: 14px;

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

@@ -1,6 +1,6 @@
 
 .typography--variant-Heading1 {
-    font-family: var(--font-family-main);
+    font-family: var(--font-family);
     font-size: var(--font-size-48);
     font-weight: var(--font-weight-bold);
     line-height: var(--lineHeight-48);
@@ -8,7 +8,7 @@
     text-decoration: none;
 }
 .typography--variant-Heading2 {
-  font-family: var(--font-family-main);
+  font-family: var(--font-family);
   font-size: var(--font-size-36);
   font-weight: var(--font-weight-bold);
   line-height: var(--lineHeight-36);
@@ -16,7 +16,7 @@
   text-decoration: none;
 }
 .typography--variant-Heading3 {
-  font-family: var(--font-family-main);
+  font-family: var(--font-family);
   font-size: var(--font-size-24);
   font-weight: var(--font-weight-bold);
   line-height: var(--lineHeight-24);
@@ -24,7 +24,7 @@
   text-decoration: none;
 }
 .typography--variant-Heading4 {
-  font-family: var(--font-family-main);
+  font-family: var(--font-family);
   font-size: var(--font-size-20);
   font-weight: var(--font-weight-bold);
   line-height: var(--lineHeight-20);
@@ -32,7 +32,7 @@
   text-decoration: none;
 }
 .typography--variant-Subheading1 {
-  font-family: var(--font-family-main);
+  font-family: var(--font-family);
   font-size: var(--font-size-36);
   font-weight: var(--font-weight-medium);
   line-height: var(--lineHeight-36);
@@ -40,7 +40,7 @@
   text-decoration: none;
 }
 .typography--variant-Subheading2 {
-  font-family: var(--font-family-main);
+  font-family: var(--font-family);
   font-size: var(--font-size-24);
   font-weight: var(--font-weight-regular);
   line-height: var(--lineHeight-24);
@@ -48,7 +48,7 @@
   text-decoration: none;
 }
 .typography--variant-Subheading2-Medium {
-  font-family: var(--font-family-main);
+  font-family: var(--font-family);
   font-size: var(--font-size-24);
   font-weight: var(--font-weight-medium);
   line-height: var(--lineHeight-24);
@@ -56,7 +56,7 @@
   text-decoration: none;
 }
 .typography--variant-Subheading3 {
-  font-family: var(--font-family-main);
+  font-family: var(--font-family);
   font-size: var(--font-size-20);
   font-weight: var(--font-weight-regular);
   line-height: var(--lineHeight-20);
@@ -64,7 +64,7 @@
   text-decoration: none;
 }
 .typography--variant-Subheading3-Medium {
-  font-family: var(--font-family-main);
+  font-family: var(--font-family);
   font-size: var(--font-size-20);
   font-weight: var(--font-weight-medium);
   line-height: var(--lineHeight-20);
@@ -72,7 +72,7 @@
   text-decoration: none;
 }
 .typography--variant-Body {
-  font-family: var(--font-family-main);
+  font-family: var(--font-family);
   font-size: var(--font-size-18);
   font-weight: var(--font-weight-regular);
   line-height: var(--lineHeight-18);
@@ -80,7 +80,7 @@
   text-decoration: none;
 }
 .typography--variant-Body-Medium {
-  font-family: var(--font-family-main);
+  font-family: var(--font-family);
   font-size: var(--font-size-18);
   font-weight: var(--font-weight-meduim);
   line-height: var(--lineHeight-18);
@@ -88,7 +88,7 @@
   text-decoration: none;
 }
 .typography--variant-Body-Bold{
-  font-family: var(--font-family-main);
+  font-family: var(--font-family);
   font-size: var(--font-size-18);
   font-weight: var(--font-weight-bold);
   line-height: var(--lineHeight-18);
@@ -96,7 +96,7 @@
   text-decoration: none;
 }
 .typography--variant-Body1-Light {
-  font-family: var(--font-family-main);
+  font-family: var(--font-family);
   font-size: var(--font-size-16);
   font-weight: var(--font-weight-light);
   line-height: var(--lineHeight-16);
@@ -104,7 +104,7 @@
   text-decoration: none;
 }
 .typography--variant-Body1 {
-  font-family: var(--font-family-main);
+  font-family: var(--font-family);
   font-size: var(--font-size-16);
   font-weight: var(--font-weight-regular);
   line-height: var(--lineHeight-16);
@@ -112,7 +112,7 @@
   text-decoration: none;
 }
 .typography--variant-Body1-Medium {
-  font-family: var(--font-family-main);
+  font-family: var(--font-family);
   font-size: var(--font-size-16);
   font-weight: var(--font-weight-medium);
   line-height: var(--lineHeight-16);
@@ -120,7 +120,7 @@
   text-decoration: none;
 }
 .typography--variant-Body1-SemiBold{
-  font-family: var(--font-family-main);
+  font-family: var(--font-family);
   font-size: var(--font-size-16);
   font-weight: var(--font-weight-semiBold);
   line-height: var(--lineHeight-16);
@@ -128,31 +128,15 @@
   text-decoration: none;
 }
 .typography--variant-Body1-Bold{
-  font-family: var(--font-family-main);
+  font-family: var(--font-family);
   font-size: var(--font-size-16);
   font-weight: var(--font-weight-bold);
   line-height: var(--lineHeight-16);
   letter-spacing: var(--letterSpacing);
   text-decoration: none;
 }
-.typography--variant-Body1Mono-Regular {
-  font-family: var(--font-family-secondary);
-  font-size: var(--font-size-16);
-  font-weight: var(--font-weight-regular);
-  line-height: var(--lineHeight-16);
-  letter-spacing: var(--letterSpacing);
-  text-decoration: none;
-}
-.typography--variant-Body1Mono-Bold {
-  font-family: var(--font-family-secondary);
-  font-size: var(--font-size-16);
-  font-weight: var(--font-weight-semiBold);
-  line-height: var(--lineHeight-16);
-  letter-spacing: var(--letterSpacing);
-  text-decoration: none;
-}
 .typography--variant-Body2-Light {
-  font-family: var(--font-family-main);
+  font-family: var(--font-family);
   font-size: var(--font-size-14);
   font-weight: var(--font-weight-light);
   line-height: var(--lineHeight-14);
@@ -160,7 +144,7 @@
   text-decoration: none;
 }
 .typography--variant-Body2 {
-  font-family: var(--font-family-main);
+  font-family: var(--font-family);
   font-size: var(--font-size-14);
   font-weight: var(--font-weight-regular);
   line-height: var(--lineHeight-14);
@@ -168,7 +152,7 @@
   text-decoration: none;
 }
 .typography--variant-Body2-Medium {
-  font-family: var(--font-family-main);
+  font-family: var(--font-family);
   font-size: var(--font-size-14);
   font-weight: var(--font-weight-meduim);
   line-height: var(--lineHeight-14);
@@ -176,7 +160,7 @@
   text-decoration: none;
 }
 .typography--variant-Body2-SemiBold{
-  font-family: var(--font-family-main);
+  font-family: var(--font-family);
   font-size: var(--font-size-14);
   font-weight: var(--font-weight-semiBold);
   line-height: var(--lineHeight-14);
@@ -184,23 +168,7 @@
   text-decoration: none;
 }
 .typography--variant-Body2-Bold{
-  font-family: var(--font-family-main);
-  font-size: var(--font-size-14);
-  font-weight: var(--font-weight-bold);
-  line-height: var(--lineHeight-14);
-  letter-spacing: var(--letterSpacing);
-  text-decoration: none;
-}
-.typography--variant-Body2Mono-Medium {
-  font-family: var(--font-family-secondary);
-  font-size: var(--font-size-14);
-  font-weight: var(--font-weight-medium);
-  line-height: var(--lineHeight-14);
-  letter-spacing: var(--letterSpacing);
-  text-decoration: none;
-}
-.typography--variant-Body2Mono-Bold {
-  font-family: var(--font-family-secondary);
+  font-family: var(--font-family);
   font-size: var(--font-size-14);
   font-weight: var(--font-weight-bold);
   line-height: var(--lineHeight-14);
@@ -208,7 +176,7 @@
   text-decoration: none;
 }
 .typography--variant-Caption {
-  font-family: var(--font-family-main);
+  font-family: var(--font-family);
   font-size: var(--font-size-12);
   font-weight: var(--font-weight-regular);
   line-height: var(--lineHeight-12);
@@ -216,7 +184,7 @@
   text-decoration: none;
 }
 .typography--variant-Caption-Medium {
-  font-family: var(--font-family-main);
+  font-family: var(--font-family);
   font-size: var(--font-size-12);
   font-weight: var(--font-weight-meduim);
   line-height: var(--lineHeight-12);
@@ -224,36 +192,10 @@
   text-decoration: none;
 }
 .typography--variant-Caption-Bold{
-  font-family: var(--font-family-main);
-  font-size: var(--font-size-12);
-  font-weight: var(--font-weight-bold);
-  line-height: var(--lineHeight-12);
-  letter-spacing: var(--letterSpacing);
-  text-decoration: none;
-}
-
-.typography--variant-CaptionMono {
-  font-family: var(--font-family-secondary);
-  font-size: var(--font-size-12);
-  font-weight: var(--font-weight-regular);
-  line-height: var(--lineHeight-12);
-  letter-spacing: var(--letterSpacing);
-  text-decoration: none;
-}
-.typography--variant-CaptionMono-Medium {
-  font-family: var(--font-family-secondary);
-  font-size: var(--font-size-12);
-  font-weight: var(--font-weight-meduim);
-  line-height: var(--lineHeight-12);
-  letter-spacing: var(--letterSpacing);
-  text-decoration: none;
-}
-.typography--variant-CaptionMono-Bold{
-  font-family: var(--font-family-secondary);
+  font-family: var(--font-family);
   font-size: var(--font-size-12);
   font-weight: var(--font-weight-bold);
   line-height: var(--lineHeight-12);
   letter-spacing: var(--letterSpacing);
   text-decoration: none;
 }
-

package/dist/components/Typography/enums.d.ts

@@ -5,14 +5,18 @@ export declare enum ETypographyVariants {
     'Heading4' = "Heading4",
     'Subheading1' = "Subheading1",
     'Subheading2' = "Subheading2",
+    'Subheading2-Medium' = "Subheading2-Medium",
     'Subheading3' = "Subheading3",
+    'Subheading3-Medium' = "Subheading3-Medium",
     'Body' = "Body",
     'Body-Medium' = "Body-Medium",
     'Body-Bold' = "Body-Bold",
+    'Body1-Light' = "Body1-Light",
     'Body1' = "Body1",
     'Body1-Medium' = "Body1-Medium",
     'Body1-SemiBold' = "Body1-SemiBold",
     'Body1-Bold' = "Body1-Bold",
+    'Body2-Light' = "Body2-Light",
     'Body2' = "Body2",
     'Body2-Medium' = "Body2-Medium",
     'Body2-SemiBold' = "Body2-SemiBold",

package/dist/components/Typography/enums.js

@@ -6,14 +6,18 @@ export var ETypographyVariants;
     ETypographyVariants["Heading4"] = "Heading4";
     ETypographyVariants["Subheading1"] = "Subheading1";
     ETypographyVariants["Subheading2"] = "Subheading2";
+    ETypographyVariants["Subheading2-Medium"] = "Subheading2-Medium";
     ETypographyVariants["Subheading3"] = "Subheading3";
+    ETypographyVariants["Subheading3-Medium"] = "Subheading3-Medium";
     ETypographyVariants["Body"] = "Body";
     ETypographyVariants["Body-Medium"] = "Body-Medium";
     ETypographyVariants["Body-Bold"] = "Body-Bold";
+    ETypographyVariants["Body1-Light"] = "Body1-Light";
     ETypographyVariants["Body1"] = "Body1";
     ETypographyVariants["Body1-Medium"] = "Body1-Medium";
     ETypographyVariants["Body1-SemiBold"] = "Body1-SemiBold";
     ETypographyVariants["Body1-Bold"] = "Body1-Bold";
+    ETypographyVariants["Body2-Light"] = "Body2-Light";
     ETypographyVariants["Body2"] = "Body2";
     ETypographyVariants["Body2-Medium"] = "Body2-Medium";
     ETypographyVariants["Body2-SemiBold"] = "Body2-SemiBold";

package/dist/fonts.css

@@ -1,7 +1,6 @@
-@import url('https://fonts.googleapis.com/css2?family=Quicksand&family=Raleway:wght@100..900&display=swap'); 
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
 :root {
-  --font-family-main: 'Raleway', sans-serif; 
-  --font-family-secondary: 'Quicksand', sans-serif; 
+  --font-family: 'Montserrat', sans-serif; 
 
   --font-size-48: 48px;
   --font-size-36: 36px;
@@ -23,6 +22,8 @@
   --lineHeight-12: 16px;
   --lineHeight-10: 14px;
 
+  --font-weight-black: 900;
+  --font-weight-extraBold: 800;
   --font-weight-bold: 700;
   --font-weight-semiBold: 600;
   --font-weight-medium:500;

package/dist/types/index.d.ts

@@ -120,52 +120,60 @@ export type BaseOptions = {
 };
 export type TOptions<T = {}> = BaseOptions & T;
 export interface DropdownProps {
+    /** Массив элементов для выпадающего списка */
+    options: Array<string | number | TOptions>;
     /** Идентификатор */
     id?: string;
-    /**  Лейбл */
+    /** Лейбл */
     label?: string;
     /** Подсказик заполнения */
     placeholder?: string;
-    /** Размер */
-    size?: 'md' | 'lg';
-    /** Массив элементов для выпадающего списка */
-    options: Array<string | number | TOptions>;
-    /** Функция для получения текста опции */
-    getOptionLabel?: (option: TOptions) => keyof TOptions;
+    /** Обязательное поле */
+    required?: boolean;
     /** Значение */
     value?: string | number | TOptions | null;
     /** Значение по умолчанию */
     defaultValue?: string | number | TOptions | null;
+    /** Callback, который будет вызван при изменении значения */
+    onChange?: (event: any, value: string | number | TOptions | null) => void;
+    /** Функция для получения текста опции */
+    getOptionLabel?: (option: TOptions) => keyof TOptions;
     /** Вариaнты выпадающего списка(текст + иконка, текст)' */
     variant?: 'icons' | 'text';
+    /** Размер */
+    size?: 'md' | 'lg';
     /** Стили передаваемые напрямую */
     style?: CSSProperties;
-    /**Дополнительный класс */
+    /** Дополнительный класс */
     className?: string;
+    /** Отображение левой метки */
+    isLeftLabel?: boolean;
+    /** Отображение разделителя */
+    isDivider?: boolean;
     /** Заблокированный */
     disabled?: boolean;
     /** Только для чтения */
     readOnly?: boolean;
     /** Открытый */
     isOpened?: boolean;
-    /** Текст при отсутствии опций */
-    noOptionsText?: string;
-    /** Отображение левой метки */
-    isLeftLabel?: boolean;
     /** Ошибка */
     error?: boolean;
     /** Текст ошибки */
     helperText?: string;
-    /** Callback, который будет вызван при изменении значения */
-    onChange?: (event: any, value: string | number | TOptions | null) => void;
+    /** Callback, который будет вызван при клике */
+    onClick?: (event: any) => void;
+    /** Callback при потере фокуса */
+    onBlur?: (event: any) => void;
+    /** Callback при получении фокуса */
+    onFocus?: (event: any) => void;
     /** Callback, который будет вызван при закрытии выпадающего списка */
     onClose?: (event: any) => void;
     /** Возможность сброса значения до первоначального */
     clearable?: boolean;
-    /** Обязательное поле */
-    required?: boolean;
-    /** Отображение разделителя */
-    isDivider?: boolean;
+    /** Включение автозаполнения */
+    enableAutocomplete?: boolean;
+    /** Текст при отсутствии опций */
+    noOptionsText?: string;
 }
 /** @internal */
 export interface TypographyProps {
@@ -237,6 +245,7 @@ export interface TabProps {
     value?: string;
     /** Обработчик клика */
     onClick?: (value: string) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /** Текст лейбла */
     label?: string;
     /** Размер */

package/package.json

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