@itcase/ui 1.4.13 → 1.5.0

package/dist/DropdownItem-CBJeJPbP.js

@@ -0,0 +1,122 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.js');
+var Divider = require('./Divider-D8hUUrwe.js');
+var Text = require('./Text-CEcBg-F5.js');
+
+function Dropdown(props) {
+    var className = props.className, _a = props.animationClose, animationClose = _a === void 0 ? 'dropdown_animation_close' : _a, _b = props.animationOpen, animationOpen = _b === void 0 ? 'dropdown_animation_open' : _b, before = props.before, after = props.after, isOpen = props.isOpen, _c = props.set, set = _c === void 0 ? 'normal' : _c, setIsOpen = props.setIsOpen, children = props.children;
+    var dropdownRef = React.useRef(null);
+    // const [isOpen, setIsOpen] = useState(false)
+    var _d = React.useState({
+        className: '',
+    }), animationState = _d[0], setAnimationState = _d[1];
+    var onAnimationEnd = React.useCallback(function () {
+        // When component is change his visibility(display) in DOM,
+        // animation of close can run unnecessary on showing element.
+        // const dropdownElement = dropdownRef.current
+        setAnimationState(function (prevState) { return ({
+            className: isOpen ? prevState.className : '',
+        }); });
+    }, [isOpen]);
+    React.useEffect(function () {
+        if (animationOpen && animationClose) {
+            setAnimationState(function () { return ({
+                className: isOpen ? animationOpen : animationClose,
+            }); });
+        }
+    }, [isOpen, animationOpen, animationClose]);
+    // Close dropdown by click outside
+    React.useEffect(function () {
+        // Add a handler to keep track of the click target.
+        function onClickWindow(event) {
+            var dropdownElement = dropdownRef.current;
+            if (dropdownElement && animationOpen) {
+                // Is event target inside of dropdown element
+                var isContainsTarget = dropdownElement.contains(event.target);
+                // Is dropdown element has "open" class
+                var hasOpenClass = dropdownElement.classList.contains(animationOpen);
+                if (!isContainsTarget && hasOpenClass) {
+                    // Trigger close event with animation
+                    // dropdownElement.click() - trigger "onClickWindow" again
+                    setIsOpen(false);
+                }
+            }
+        }
+        // Add event listener for current dropdown on first render
+        window.addEventListener('click', onClickWindow);
+        return function () {
+            // Remove event listener for current dropdown on unmount
+            window.removeEventListener('click', onClickWindow);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
+    var alignmentClass = propsGenerator.alignmentClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, elevationClass = propsGenerator.elevationClass, shapeClass = propsGenerator.shapeClass;
+    // @ts-expect-error
+    var styles = useStyles.useStyles(props).styles;
+    return (jsxRuntime.jsxs("div", { className: clsx(className, 'dropdown', alignmentClass && "alignment_".concat(alignmentClass), set && "dropdown_set_".concat(set), shapeClass && "dropdown_shape_".concat(shapeClass), elevationClass && "elevation_".concat(elevationClass), isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className), ref: dropdownRef, style: styles, children: [before, children && (jsxRuntime.jsx("div", { className: clsx('dropdown__wrapper', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), 
+                // Add "onAnimationEnd" only for wrapper for ignore dropdown button
+                onAnimationEnd: onAnimationEnd, children: children })), after] }));
+}
+
+var dropdownAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfacePrimaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillHover: 'surfaceQuaternaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceSecondaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+        loaderFill: 'surfaceSecondary',
+        loaderItemFill: 'surfaceItemPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceTertiaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+};
+
+var dropdownItemAppearance = tslib_es6.__assign({}, dropdownAppearanceSurface);
+
+var dropdownItemConfig = {
+    appearance: dropdownItemAppearance,
+    setAppearance: function (appearanceConfig) {
+        dropdownItemConfig.appearance = appearanceConfig;
+    },
+};
+function DropdownItem(props) {
+    var className = props.className, appearance = props.appearance, label = props.label, desc = props.desc, isDisabled = props.isDisabled, showDivider = props.showDivider, before = props.before, after = props.after, isActive = props.isActive, isHover = props.isHover, set = props.set, onClick = props.onClick, onMouseEnter = props.onMouseEnter, children = props.children;
+    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultAppearance, appearance) {
+        var _a;
+        return (tslib_es6.__assign(tslib_es6.__assign({}, resultAppearance), (_a = dropdownItemConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
+    }, {});
+    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    var directionClass = propsGenerator.directionClass, justifyContentClass = propsGenerator.justifyContentClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextAlign = propsGenerator.labelTextAlign, labelTextColor = propsGenerator.labelTextColor, labelTextColorActive = propsGenerator.labelTextColorActive, labelTextColorHover = propsGenerator.labelTextColorHover, labelTextGradient = propsGenerator.labelTextGradient, labelTextSize = propsGenerator.labelTextSize, labelTextStyle = propsGenerator.labelTextStyle, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, descTextColor = propsGenerator.descTextColor, descTextColorHover = propsGenerator.descTextColorHover, descTextGradient = propsGenerator.descTextGradient, descTextSize = propsGenerator.descTextSize, descTextStyle = propsGenerator.descTextStyle, descTextWeight = propsGenerator.descTextWeight, descTextWrap = propsGenerator.descTextWrap, dividerDirection = propsGenerator.dividerDirection, dividerFill = propsGenerator.dividerFill, dividerSize = propsGenerator.dividerSize, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass;
+    // @ts-expect-error
+    var dropdownItem = useStyles.useStyles(props).styles;
+    return (jsxRuntime.jsxs("div", { className: clsx('dropdown__item', isActive && 'dropdown__item_state_active', isHover && 'dropdown__item_state_hover', fillClass && !isActive
+            ? "fill_".concat(fillClass)
+            : "fill_active_".concat(fillActiveClass), fillHoverClass && !isDisabled && !isActive
+            ? "fill_hover_".concat(fillHoverClass)
+            : "fill_active_hover_".concat(fillActiveHoverClass), directionClass && "dropdown__item_direction_".concat(directionClass), className, fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), fillActiveClass && "fill_active_".concat(fillActiveClass), fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), sizeClass && "dropdown__item_size_".concat(sizeClass), shapeClass && "dropdown__item_shape_".concat(shapeClass), typeClass && "dropdown__item_type_".concat(typeClass), widthClass && "dropdown__item_width_".concat(widthClass), isDisabled && "dropdown__item_state_disabled", onClick && 'cursor_type_pointer', set && "dropdown__item_set_".concat(set), justifyContentClass &&
+            "dropdown__item_justify-content_".concat(justifyContentClass)), style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [jsxRuntime.jsx("div", { className: "dropdown__item-wrapper", children: jsxRuntime.jsxs(React.Fragment, { children: [before, children || (jsxRuntime.jsxs(React.Fragment, { children: [label && (jsxRuntime.jsx(Text.Text, { className: "dropdown__item-label", size: labelTextSize, textAlign: labelTextAlign, textColor: labelTextColor, textColorActive: isActive ? labelTextColorActive : undefined, textColorGradient: labelTextGradient, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "dropdown__item-desc", size: descTextSize, textColor: descTextColor, textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, children: desc }))] })), after] }) }), showDivider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill }))] }));
+}
+
+exports.Dropdown = Dropdown;
+exports.DropdownItem = DropdownItem;
+exports.dropdownItemAppearance = dropdownItemAppearance;
+exports.dropdownItemConfig = dropdownItemConfig;

package/dist/{Group-qq4Iisll.js → Group-BVlu5z77.js}

@@ -1,5 +1,6 @@
 'use strict';
 
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
@@ -8,11 +9,11 @@ var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
 
 var groupAppearance = {
     dev: {
-        borderWidth: 1,
-        borderColor: 'surfaceBorderPrimary',
         direction: 'horizontal',
         fill: 'surfacePrimary',
         fillHover: 'surfacePrimaryHover',
+        borderColor: 'surfaceBorderPrimary',
+        borderWidth: 1,
     },
 };
 
@@ -24,7 +25,10 @@ var groupConfig = {
 };
 var Group = React.forwardRef(function Group(props, ref) {
     var id = props.id, className = props.className, name = props.name, appearance = props.appearance, dataTestId = props.dataTestId, dataTour = props.dataTour, horizontalScroll = props.horizontalScroll, htmlFor = props.htmlFor, style = props.style, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, onClick = props.onClick, children = props.children;
-    var appearanceConfig = groupConfig.appearance && groupConfig.appearance[appearance];
+    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultAppearance, appearance) {
+        var _a;
+        return (tslib_es6.__assign(tslib_es6.__assign({}, resultAppearance), (_a = groupConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
+    }, {});
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     var directionClass = propsGenerator.directionClass, flexGrowClass = propsGenerator.flexGrowClass, justifyContentClass = propsGenerator.justifyContentClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorHoverClass = propsGenerator.textColorHoverClass, columnsClass = propsGenerator.columnsClass, contentAlignClass = propsGenerator.contentAlignClass, elevationClass = propsGenerator.elevationClass, heightClass = propsGenerator.heightClass, iconFillHoverClass = propsGenerator.iconFillHoverClass, shapeClass = propsGenerator.shapeClass, stackingClass = propsGenerator.stackingClass, widthClass = propsGenerator.widthClass, wrapClass = propsGenerator.wrapClass;
     // @ts-expect-error

package/dist/{Group-BICb8bYQ.js → Group-OkygpKiJ.js}

@@ -1,3 +1,4 @@
+import { _ as __assign } from './tslib.es6-Bwu1Cn-t.js';
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';
@@ -6,11 +7,11 @@ import { useStyles } from './hooks/useStyles/useStyles.js';
 
 var groupAppearance = {
     dev: {
-        borderWidth: 1,
-        borderColor: 'surfaceBorderPrimary',
         direction: 'horizontal',
         fill: 'surfacePrimary',
         fillHover: 'surfacePrimaryHover',
+        borderColor: 'surfaceBorderPrimary',
+        borderWidth: 1,
     },
 };
 
@@ -22,7 +23,10 @@ var groupConfig = {
 };
 var Group = React.forwardRef(function Group(props, ref) {
     var id = props.id, className = props.className, name = props.name, appearance = props.appearance, dataTestId = props.dataTestId, dataTour = props.dataTour, horizontalScroll = props.horizontalScroll, htmlFor = props.htmlFor, style = props.style, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, onClick = props.onClick, children = props.children;
-    var appearanceConfig = groupConfig.appearance && groupConfig.appearance[appearance];
+    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultAppearance, appearance) {
+        var _a;
+        return (__assign(__assign({}, resultAppearance), (_a = groupConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
+    }, {});
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     var directionClass = propsGenerator.directionClass, flexGrowClass = propsGenerator.flexGrowClass, justifyContentClass = propsGenerator.justifyContentClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorHoverClass = propsGenerator.textColorHoverClass, columnsClass = propsGenerator.columnsClass, contentAlignClass = propsGenerator.contentAlignClass, elevationClass = propsGenerator.elevationClass, heightClass = propsGenerator.heightClass, iconFillHoverClass = propsGenerator.iconFillHoverClass, shapeClass = propsGenerator.shapeClass, stackingClass = propsGenerator.stackingClass, widthClass = propsGenerator.widthClass, wrapClass = propsGenerator.wrapClass;
     // @ts-expect-error

package/dist/{Icon-BcBOnVKH.js → Icon-Ch-L2dOj.js}

@@ -7,8 +7,8 @@ var clsx = require('clsx');
 var SVG = require('react-inlinesvg');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-var Link = require('./Link-BnqN6ysn.js');
-var Tooltip = require('./Tooltip-DRta8lK_.js');
+var Link = require('./Link-C04g00r2.js');
+var Tooltip = require('./Tooltip-Lhx-Fefx.js');
 
 var iconAppearance = {
     accent: {
@@ -30,7 +30,7 @@ var iconConfig = {
 var Icon = React.forwardRef(function Icon(props, ref) {
     // TODO: Tooltip doesn't work that anymore
     // const [isTooltipVisible, setIsTooltipVisible] = useState(false)
-    var id = props.id, width = props.width, height = props.height, after = props.after, Badge = props.Badge, before = props.before, className = props.className, dataTour = props.dataTour, href = props.href, imageSrc = props.imageSrc, link = props.link, linkRel = props.linkRel, linkTarget = props.linkTarget, showTooltip = props.showTooltip, SvgImage = props.SvgImage, tooltipAppearance = props.tooltipAppearance, tooltipText = props.tooltipText, tooltipTextSize = props.tooltipTextSize, tooltipTitle = props.tooltipTitle, tooltipTitleSize = props.tooltipTitleSize, onClick = props.onClick, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave;
+    var id = props.id, className = props.className, width = props.width, height = props.height, Badge = props.Badge, dataTour = props.dataTour, href = props.href, imageSrc = props.imageSrc, link = props.link, linkRel = props.linkRel, linkTarget = props.linkTarget, showTooltip = props.showTooltip, SvgImage = props.SvgImage, tooltipAppearance = props.tooltipAppearance, tooltipText = props.tooltipText, tooltipTextSize = props.tooltipTextSize, tooltipTitle = props.tooltipTitle, tooltipTitleSize = props.tooltipTitleSize, before = props.before, after = props.after, onClick = props.onClick, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave;
     var ImageComponent = React.useMemo(function () {
         if (SvgImage) {
             var sizes = {};
@@ -44,20 +44,22 @@ var Icon = React.forwardRef(function Icon(props, ref) {
         }
         if (imageSrc) {
             if (imageSrc.endsWith('.svg')) {
-                return jsxRuntime.jsx(SVG, { preProcessor: removeFillStroke, src: imageSrc });
+                return jsxRuntime.jsx(SVG, { src: imageSrc, preProcessor: removeFillStroke });
             }
             return jsxRuntime.jsx("img", { src: imageSrc });
         }
         return null;
     }, [SvgImage, width, height, imageSrc]);
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
-    var alignmentClass = propsGenerator.alignmentClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, cursorClass = propsGenerator.cursorClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, fillSizeClass = propsGenerator.fillSizeClass, iconFillClass = propsGenerator.iconFillClass, iconFillDisabledClass = propsGenerator.iconFillDisabledClass, iconFillHoverClass = propsGenerator.iconFillHoverClass, iconSizeClass = propsGenerator.iconSizeClass, shapeClass = propsGenerator.shapeClass;
+    var alignmentClass = propsGenerator.alignmentClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, fillSizeClass = propsGenerator.fillSizeClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, iconFillDisabledClass = propsGenerator.iconFillDisabledClass, cursorClass = propsGenerator.cursorClass, iconFillClass = propsGenerator.iconFillClass, iconFillHoverClass = propsGenerator.iconFillHoverClass, iconSizeClass = propsGenerator.iconSizeClass, shapeClass = propsGenerator.shapeClass;
     // @ts-expect-error
     var iconStyles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsxs("div", { className: clsx(className, 'icon', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), fillSizeClass && "icon_fill_size_".concat(fillSizeClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), iconFillClass && "icon_fill_".concat(iconFillClass), iconFillHoverClass && "icon_fill_hover_".concat(iconFillHoverClass), iconFillDisabledClass && "icon_fill_disabled_".concat(iconFillDisabledClass), shapeClass && "icon_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), Badge && 'icon_type_with-badge', onClick && cursorClass && "cursor_".concat(cursorClass)), ref: ref, "data-tour": dataTour, id: id, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxRuntime.jsxs(Link.LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass && "icon_size_".concat(iconSizeClass)), DefaultComponent: "div", href: link || href, rel: linkRel, target: linkTarget, children: [ImageComponent, Badge, showTooltip && (jsxRuntime.jsx(Tooltip.Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass && "alignment_".concat(alignmentClass)), appearance: tooltipAppearance, text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize }))] }), after] }));
+    return (jsxRuntime.jsxs("div", { id: id, className: clsx(className, 'icon', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), fillSizeClass && "icon_fill_size_".concat(fillSizeClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), iconFillClass && "icon_fill_".concat(iconFillClass), iconFillHoverClass && "icon_fill_hover_".concat(iconFillHoverClass), iconFillDisabledClass && "icon_fill_disabled_".concat(iconFillDisabledClass), shapeClass && "icon_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), Badge && 'icon_type_with-badge', onClick && cursorClass && "cursor_".concat(cursorClass)), "data-tour": dataTour, ref: ref, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxRuntime.jsxs(Link.LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass && "icon_size_".concat(iconSizeClass)), DefaultComponent: "div", href: link || href, rel: linkRel, target: linkTarget, children: [ImageComponent, Badge, showTooltip && (jsxRuntime.jsx(Tooltip.Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass && "alignment_".concat(alignmentClass)), appearance: tooltipAppearance, title: tooltipTitle, titleSize: tooltipTitleSize, text: tooltipText, textSize: tooltipTextSize }))] }), after] }));
 });
 var removeFillStroke = function (code) {
-    return code.replace(/fill=".*?"/g, 'fill=""').replace(/stroke=".*?"/g, 'stroke=""');
+    return code
+        .replace(/fill=".*?"/g, 'fill=""')
+        .replace(/stroke=".*?"/g, 'stroke=""');
 };
 
 exports.Icon = Icon;

package/dist/Icon-CoBJRPlP.js

@@ -0,0 +1,63 @@
+import { _ as __assign } from './tslib.es6-Bwu1Cn-t.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useMemo } from 'react';
+import clsx from 'clsx';
+import SVG from 'react-inlinesvg';
+import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { useStyles } from './hooks/useStyles/useStyles.js';
+import { a as LinkWrapper } from './Link-Sr03Kia9.js';
+import { T as Tooltip } from './Tooltip-EOu0a93a.js';
+
+var iconAppearance = {
+    accent: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+        fillSize: 40,
+        iconFill: 'accentItemPrimary',
+        iconSize: 24,
+        imageSrc: 'img/filter.svg',
+    },
+};
+
+var iconConfig = {
+    appearance: iconAppearance,
+    setAppearance: function (appearanceConfig) {
+        iconConfig.appearance = appearanceConfig;
+    },
+};
+var Icon = React.forwardRef(function Icon(props, ref) {
+    // TODO: Tooltip doesn't work that anymore
+    // const [isTooltipVisible, setIsTooltipVisible] = useState(false)
+    var id = props.id, className = props.className, width = props.width, height = props.height, Badge = props.Badge, dataTour = props.dataTour, href = props.href, imageSrc = props.imageSrc, link = props.link, linkRel = props.linkRel, linkTarget = props.linkTarget, showTooltip = props.showTooltip, SvgImage = props.SvgImage, tooltipAppearance = props.tooltipAppearance, tooltipText = props.tooltipText, tooltipTextSize = props.tooltipTextSize, tooltipTitle = props.tooltipTitle, tooltipTitleSize = props.tooltipTitleSize, before = props.before, after = props.after, onClick = props.onClick, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave;
+    var ImageComponent = useMemo(function () {
+        if (SvgImage) {
+            var sizes = {};
+            if (width) {
+                sizes.width = width;
+            }
+            if (height) {
+                sizes.height = height;
+            }
+            return jsx(SvgImage, __assign({}, sizes));
+        }
+        if (imageSrc) {
+            if (imageSrc.endsWith('.svg')) {
+                return jsx(SVG, { src: imageSrc, preProcessor: removeFillStroke });
+            }
+            return jsx("img", { src: imageSrc });
+        }
+        return null;
+    }, [SvgImage, width, height, imageSrc]);
+    var propsGenerator = useDevicePropsGenerator(props);
+    var alignmentClass = propsGenerator.alignmentClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, fillSizeClass = propsGenerator.fillSizeClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, iconFillDisabledClass = propsGenerator.iconFillDisabledClass, cursorClass = propsGenerator.cursorClass, iconFillClass = propsGenerator.iconFillClass, iconFillHoverClass = propsGenerator.iconFillHoverClass, iconSizeClass = propsGenerator.iconSizeClass, shapeClass = propsGenerator.shapeClass;
+    // @ts-expect-error
+    var iconStyles = useStyles(props).styles;
+    return (jsxs("div", { id: id, className: clsx(className, 'icon', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), fillSizeClass && "icon_fill_size_".concat(fillSizeClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), iconFillClass && "icon_fill_".concat(iconFillClass), iconFillHoverClass && "icon_fill_hover_".concat(iconFillHoverClass), iconFillDisabledClass && "icon_fill_disabled_".concat(iconFillDisabledClass), shapeClass && "icon_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), Badge && 'icon_type_with-badge', onClick && cursorClass && "cursor_".concat(cursorClass)), "data-tour": dataTour, ref: ref, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxs(LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass && "icon_size_".concat(iconSizeClass)), DefaultComponent: "div", href: link || href, rel: linkRel, target: linkTarget, children: [ImageComponent, Badge, showTooltip && (jsx(Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass && "alignment_".concat(alignmentClass)), appearance: tooltipAppearance, title: tooltipTitle, titleSize: tooltipTitleSize, text: tooltipText, textSize: tooltipTextSize }))] }), after] }));
+});
+var removeFillStroke = function (code) {
+    return code
+        .replace(/fill=".*?"/g, 'fill=""')
+        .replace(/stroke=".*?"/g, 'stroke=""');
+};
+
+export { Icon as I, iconAppearance as a, iconConfig as i };

package/dist/Image-CSzHhlA1.js

@@ -0,0 +1,17 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { useStyles } from './hooks/useStyles/useStyles.js';
+
+function Image(props) {
+    var className = props.className, type = props.type, src = props.src, title = props.title, onError = props.onError, alt = props.alt, caption = props.caption, imageClassName = props.imageClassName, imageWrapperClassName = props.imageWrapperClassName, mode = props.mode, overlay = props.overlay, isSkeleton = props.isSkeleton, before = props.before, after = props.after, onClick = props.onClick, children = props.children;
+    var propsGenerator = useDevicePropsGenerator(props);
+    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorImageClass = propsGenerator.borderColorImageClass, cursorClass = propsGenerator.cursorClass, heightClass = propsGenerator.heightClass, horizontalAlignClass = propsGenerator.horizontalAlignClass, imageHeightClass = propsGenerator.imageHeightClass, imageWidthClass = propsGenerator.imageWidthClass, resizeModeClass = propsGenerator.resizeModeClass, shapeClass = propsGenerator.shapeClass, verticalAlignClass = propsGenerator.verticalAlignClass, widthClass = propsGenerator.widthClass;
+    // @ts-expect-error
+    var _a = useStyles(props), imageStyles = _a.image, styles = _a.styles, wrapperStyles = _a.wrapper;
+    return (jsxs("div", { className: clsx(className, 'image', mode && "image_mode_".concat(mode), type && "image_type_".concat(type), cursorClass && "cursor_".concat(cursorClass), horizontalAlignClass &&
+            "image_horizontal-align_".concat(horizontalAlignClass), verticalAlignClass && "image_vertical-align_".concat(verticalAlignClass), shapeClass && "image_shape_".concat(shapeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), resizeModeClass && "image_resize-mode_".concat(resizeModeClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), isSkeleton && 'image_skeleton'), style: styles, onClick: onClick, children: [before, jsxs("div", { className: clsx('image__wrapper', imageWrapperClassName), style: wrapperStyles, children: [jsx("img", { className: clsx('image__item', imageWidthClass && "width_".concat(imageWidthClass), imageHeightClass && "height_".concat(imageHeightClass), imageClassName, borderColorClass && "border-color_".concat(borderColorClass), borderColorImageClass &&
+                            "border-color-image_".concat(borderColorImageClass)), src: src, title: title || alt, onError: onError, alt: alt || title, style: imageStyles }), overlay, caption, children] }), after] }));
+}
+
+export { Image as I };

package/dist/Image-DuIBtUq5.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
+
+function Image(props) {
+    var className = props.className, type = props.type, src = props.src, title = props.title, onError = props.onError, alt = props.alt, caption = props.caption, imageClassName = props.imageClassName, imageWrapperClassName = props.imageWrapperClassName, mode = props.mode, overlay = props.overlay, isSkeleton = props.isSkeleton, before = props.before, after = props.after, onClick = props.onClick, children = props.children;
+    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
+    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorImageClass = propsGenerator.borderColorImageClass, cursorClass = propsGenerator.cursorClass, heightClass = propsGenerator.heightClass, horizontalAlignClass = propsGenerator.horizontalAlignClass, imageHeightClass = propsGenerator.imageHeightClass, imageWidthClass = propsGenerator.imageWidthClass, resizeModeClass = propsGenerator.resizeModeClass, shapeClass = propsGenerator.shapeClass, verticalAlignClass = propsGenerator.verticalAlignClass, widthClass = propsGenerator.widthClass;
+    // @ts-expect-error
+    var _a = useStyles.useStyles(props), imageStyles = _a.image, styles = _a.styles, wrapperStyles = _a.wrapper;
+    return (jsxRuntime.jsxs("div", { className: clsx(className, 'image', mode && "image_mode_".concat(mode), type && "image_type_".concat(type), cursorClass && "cursor_".concat(cursorClass), horizontalAlignClass &&
+            "image_horizontal-align_".concat(horizontalAlignClass), verticalAlignClass && "image_vertical-align_".concat(verticalAlignClass), shapeClass && "image_shape_".concat(shapeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), resizeModeClass && "image_resize-mode_".concat(resizeModeClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), isSkeleton && 'image_skeleton'), style: styles, onClick: onClick, children: [before, jsxRuntime.jsxs("div", { className: clsx('image__wrapper', imageWrapperClassName), style: wrapperStyles, children: [jsxRuntime.jsx("img", { className: clsx('image__item', imageWidthClass && "width_".concat(imageWidthClass), imageHeightClass && "height_".concat(imageHeightClass), imageClassName, borderColorClass && "border-color_".concat(borderColorClass), borderColorImageClass &&
+                            "border-color-image_".concat(borderColorImageClass)), src: src, title: title || alt, onError: onError, alt: alt || title, style: imageStyles }), overlay, caption, children] }), after] }));
+}
+
+exports.Image = Image;

package/dist/{Input-DHJIVk1z.js → Input-ChiH90mV.js}

@@ -1,3 +1,4 @@
+import { _ as __assign } from './tslib.es6-Bwu1Cn-t.js';
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';
@@ -5,28 +6,24 @@ import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevi
 
 var inputAppearance = {
     dev: {
-        borderColor: 'surfaceBorderTertiary',
-        placeholderTextColor: 'surfaceTextSecondary',
-        shape: 'rounded',
         size: 'm',
+        borderColor: 'surfaceBorderTertiary',
         textColor: 'surfaceTextPrimary',
         textSize: 'm',
+        placeholderTextColor: 'surfaceTextSecondary',
+        shape: 'rounded',
     },
 };
 var inputState = {
-    active: {
-        borderColor: 'surfaceBorderActive',
-        placeholderTextColor: 'secondaryTextSecondary',
-    },
-    activeFilled: {
-        borderColor: 'surfaceBorderActive',
+    filled: {
+        borderColor: 'surfaceBorderQuaternary',
         textColor: 'surfaceTextPrimary',
     },
     disabled: {
         borderColor: 'surfaceBorderDisabled',
         borderColorHover: 'surfaceBorderDisabled',
-        placeholderTextColor: 'surfaceTextDisabled',
         textColor: 'surfaceTextPrimary',
+        placeholderTextColor: 'surfaceTextDisabled',
     },
     error: {
         borderColor: 'errorBorderPrimary',
@@ -36,8 +33,16 @@ var inputState = {
         borderColor: 'errorBorderPrimary',
         textColor: 'surfaceTextPrimary',
     },
-    filled: {
-        borderColor: 'surfaceBorderQuaternary',
+    success: {
+        borderColor: 'successBorderPrimary',
+        textColor: 'surfaceTextPrimary',
+    },
+    active: {
+        borderColor: 'surfaceBorderActive',
+        placeholderTextColor: 'secondaryTextSecondary',
+    },
+    activeFilled: {
+        borderColor: 'surfaceBorderActive',
         textColor: 'surfaceTextPrimary',
     },
     normal: {
@@ -52,44 +57,42 @@ var inputState = {
         borderColor: 'surfaceBorderActive',
         textColor: 'surfaceTextPrimary',
     },
-    success: {
-        borderColor: 'successBorderPrimary',
-        textColor: 'surfaceTextPrimary',
-    },
 };
 
 var inputConfig = {
     appearance: inputAppearance,
+    state: inputState,
     setAppearance: function (appearanceConfig) {
         inputConfig.appearance = appearanceConfig;
     },
-    state: inputState,
-    // eslint-disable-next-line perfectionist/sort-objects
     setState: function (newComponent) {
         inputConfig.state = newComponent;
     },
 };
 var Input = React.forwardRef(function Input(props, ref) {
-    var id = props.id, isDisabled = props.isDisabled, appearance = props.appearance, autocomplete = props.autocomplete, className = props.className, dataTestId = props.dataTestId, index = props.index, name = props.name, placeholder = props.placeholder, _a = props.type, type = _a === void 0 ? 'text' : _a, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
-    // @ts-expect-error
-    var appearanceConfig = inputConfig.appearance && inputConfig.appearance[appearance];
+    var id = props.id, className = props.className, _a = props.type, type = _a === void 0 ? 'text' : _a, name = props.name, appearance = props.appearance, isDisabled = props.isDisabled, autocomplete = props.autocomplete, dataTestId = props.dataTestId, index = props.index, placeholder = props.placeholder, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
+    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultAppearance, appearance) {
+        var _a;
+        return (__assign(__assign({}, resultAppearance), (_a = inputConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
+    }, {});
     // const stateConfig = state && inputConfig.state && inputConfig.state[state]
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var borderColorClass = propsGenerator.borderColorClass, borderColorDisabledClass = propsGenerator.borderColorDisabledClass, borderWidthClass = propsGenerator.borderWidthClass, borderWidthDisabledClass = propsGenerator.borderWidthDisabledClass, caretClass = propsGenerator.caretClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, placeholderTextColorDisabledClass = propsGenerator.placeholderTextColorDisabledClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, textColorClass = propsGenerator.textColorClass, textColorDisabledClass = propsGenerator.textColorDisabledClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, widthClass = propsGenerator.widthClass;
-    return (jsx("input", { className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), !isDisabled
+    var fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, borderColorClass = propsGenerator.borderColorClass, borderColorDisabledClass = propsGenerator.borderColorDisabledClass, borderWidthClass = propsGenerator.borderWidthClass, borderWidthDisabledClass = propsGenerator.borderWidthDisabledClass, textColorClass = propsGenerator.textColorClass, textColorDisabledClass = propsGenerator.textColorDisabledClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, placeholderTextColorDisabledClass = propsGenerator.placeholderTextColorDisabledClass, caretClass = propsGenerator.caretClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
+    return (jsx("input", { id: String(id), className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), shapeClass && "input_shape_".concat(shapeClass), textSizeClass && "text_size_".concat(textSizeClass), textWeightClass && "text-weight_".concat(textWeightClass), widthClass && "width_".concat(widthClass), sizeClass && "input_size_".concat(sizeClass), textColorClass && "text-color_".concat(textColorClass), !isDisabled
             ? fillClass && "fill_".concat(fillClass)
-            : fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), shapeClass && "input_shape_".concat(shapeClass), textSizeClass && "text_size_".concat(textSizeClass), textWeightClass && "text-weight_".concat(textWeightClass), widthClass && "width_".concat(widthClass), !isDisabled
+            : fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isDisabled
             ? borderWidthClass && "border-width_".concat(borderWidthClass)
-            : borderWidthDisabledClass && "border-width_disabled_".concat(borderWidthDisabledClass), sizeClass && "input_size_".concat(sizeClass), textColorClass && "text-color_".concat(textColorClass), !isDisabled
+            : borderWidthDisabledClass &&
+                "border-width_disabled_".concat(borderWidthDisabledClass), !isDisabled
             ? borderColorClass && "border-color_".concat(borderColorClass)
-            : borderColorDisabledClass && "border-color_disabled_".concat(borderColorDisabledClass), !isDisabled
-            ? placeholderTextColorClass && "placeholder-text-color_".concat(placeholderTextColorClass)
+            : borderColorDisabledClass &&
+                "border-color_disabled_".concat(borderColorDisabledClass), !isDisabled
+            ? placeholderTextColorClass &&
+                "placeholder-text-color_".concat(placeholderTextColorClass)
             : placeholderTextColorDisabledClass &&
                 "placeholder-text-color_disabled_".concat(placeholderTextColorDisabledClass), !isDisabled
             ? textColorClass && "text-color_".concat(textColorClass)
-            : textColorDisabledClass && "text-color_".concat(textColorDisabledClass)), ref: ref, autocomplete: autocomplete, "data-test-id": dataTestId || (name ? "".concat(name, "Input") : 'input'), disabled: isDisabled, id: String(id), 
-        // @ts-ignore
-        index: index, placeholder: placeholder, type: type, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
+            : textColorDisabledClass && "text-color_".concat(textColorDisabledClass)), type: type, disabled: isDisabled, autocomplete: autocomplete, "data-test-id": dataTestId || (name ? "".concat(name, "Input") : 'input'), index: index, placeholder: placeholder, ref: ref, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
 });
 
 export { Input as I, inputAppearance as a, inputState as b, inputConfig as i };

package/dist/{Input-DiFnIFT7.js → Input-e0kLrbs6.js}

@@ -1,5 +1,6 @@
 'use strict';
 
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
@@ -7,28 +8,24 @@ var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDe
 
 var inputAppearance = {
     dev: {
-        borderColor: 'surfaceBorderTertiary',
-        placeholderTextColor: 'surfaceTextSecondary',
-        shape: 'rounded',
         size: 'm',
+        borderColor: 'surfaceBorderTertiary',
         textColor: 'surfaceTextPrimary',
         textSize: 'm',
+        placeholderTextColor: 'surfaceTextSecondary',
+        shape: 'rounded',
     },
 };
 var inputState = {
-    active: {
-        borderColor: 'surfaceBorderActive',
-        placeholderTextColor: 'secondaryTextSecondary',
-    },
-    activeFilled: {
-        borderColor: 'surfaceBorderActive',
+    filled: {
+        borderColor: 'surfaceBorderQuaternary',
         textColor: 'surfaceTextPrimary',
     },
     disabled: {
         borderColor: 'surfaceBorderDisabled',
         borderColorHover: 'surfaceBorderDisabled',
-        placeholderTextColor: 'surfaceTextDisabled',
         textColor: 'surfaceTextPrimary',
+        placeholderTextColor: 'surfaceTextDisabled',
     },
     error: {
         borderColor: 'errorBorderPrimary',
@@ -38,8 +35,16 @@ var inputState = {
         borderColor: 'errorBorderPrimary',
         textColor: 'surfaceTextPrimary',
     },
-    filled: {
-        borderColor: 'surfaceBorderQuaternary',
+    success: {
+        borderColor: 'successBorderPrimary',
+        textColor: 'surfaceTextPrimary',
+    },
+    active: {
+        borderColor: 'surfaceBorderActive',
+        placeholderTextColor: 'secondaryTextSecondary',
+    },
+    activeFilled: {
+        borderColor: 'surfaceBorderActive',
         textColor: 'surfaceTextPrimary',
     },
     normal: {
@@ -54,44 +59,42 @@ var inputState = {
         borderColor: 'surfaceBorderActive',
         textColor: 'surfaceTextPrimary',
     },
-    success: {
-        borderColor: 'successBorderPrimary',
-        textColor: 'surfaceTextPrimary',
-    },
 };
 
 var inputConfig = {
     appearance: inputAppearance,
+    state: inputState,
     setAppearance: function (appearanceConfig) {
         inputConfig.appearance = appearanceConfig;
     },
-    state: inputState,
-    // eslint-disable-next-line perfectionist/sort-objects
     setState: function (newComponent) {
         inputConfig.state = newComponent;
     },
 };
 var Input = React.forwardRef(function Input(props, ref) {
-    var id = props.id, isDisabled = props.isDisabled, appearance = props.appearance, autocomplete = props.autocomplete, className = props.className, dataTestId = props.dataTestId, index = props.index, name = props.name, placeholder = props.placeholder, _a = props.type, type = _a === void 0 ? 'text' : _a, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
-    // @ts-expect-error
-    var appearanceConfig = inputConfig.appearance && inputConfig.appearance[appearance];
+    var id = props.id, className = props.className, _a = props.type, type = _a === void 0 ? 'text' : _a, name = props.name, appearance = props.appearance, isDisabled = props.isDisabled, autocomplete = props.autocomplete, dataTestId = props.dataTestId, index = props.index, placeholder = props.placeholder, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
+    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultAppearance, appearance) {
+        var _a;
+        return (tslib_es6.__assign(tslib_es6.__assign({}, resultAppearance), (_a = inputConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
+    }, {});
     // const stateConfig = state && inputConfig.state && inputConfig.state[state]
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var borderColorClass = propsGenerator.borderColorClass, borderColorDisabledClass = propsGenerator.borderColorDisabledClass, borderWidthClass = propsGenerator.borderWidthClass, borderWidthDisabledClass = propsGenerator.borderWidthDisabledClass, caretClass = propsGenerator.caretClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, placeholderTextColorDisabledClass = propsGenerator.placeholderTextColorDisabledClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, textColorClass = propsGenerator.textColorClass, textColorDisabledClass = propsGenerator.textColorDisabledClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, widthClass = propsGenerator.widthClass;
-    return (jsxRuntime.jsx("input", { className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), !isDisabled
+    var fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, borderColorClass = propsGenerator.borderColorClass, borderColorDisabledClass = propsGenerator.borderColorDisabledClass, borderWidthClass = propsGenerator.borderWidthClass, borderWidthDisabledClass = propsGenerator.borderWidthDisabledClass, textColorClass = propsGenerator.textColorClass, textColorDisabledClass = propsGenerator.textColorDisabledClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, placeholderTextColorDisabledClass = propsGenerator.placeholderTextColorDisabledClass, caretClass = propsGenerator.caretClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
+    return (jsxRuntime.jsx("input", { id: String(id), className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), shapeClass && "input_shape_".concat(shapeClass), textSizeClass && "text_size_".concat(textSizeClass), textWeightClass && "text-weight_".concat(textWeightClass), widthClass && "width_".concat(widthClass), sizeClass && "input_size_".concat(sizeClass), textColorClass && "text-color_".concat(textColorClass), !isDisabled
             ? fillClass && "fill_".concat(fillClass)
-            : fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), shapeClass && "input_shape_".concat(shapeClass), textSizeClass && "text_size_".concat(textSizeClass), textWeightClass && "text-weight_".concat(textWeightClass), widthClass && "width_".concat(widthClass), !isDisabled
+            : fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isDisabled
             ? borderWidthClass && "border-width_".concat(borderWidthClass)
-            : borderWidthDisabledClass && "border-width_disabled_".concat(borderWidthDisabledClass), sizeClass && "input_size_".concat(sizeClass), textColorClass && "text-color_".concat(textColorClass), !isDisabled
+            : borderWidthDisabledClass &&
+                "border-width_disabled_".concat(borderWidthDisabledClass), !isDisabled
             ? borderColorClass && "border-color_".concat(borderColorClass)
-            : borderColorDisabledClass && "border-color_disabled_".concat(borderColorDisabledClass), !isDisabled
-            ? placeholderTextColorClass && "placeholder-text-color_".concat(placeholderTextColorClass)
+            : borderColorDisabledClass &&
+                "border-color_disabled_".concat(borderColorDisabledClass), !isDisabled
+            ? placeholderTextColorClass &&
+                "placeholder-text-color_".concat(placeholderTextColorClass)
             : placeholderTextColorDisabledClass &&
                 "placeholder-text-color_disabled_".concat(placeholderTextColorDisabledClass), !isDisabled
             ? textColorClass && "text-color_".concat(textColorClass)
-            : textColorDisabledClass && "text-color_".concat(textColorDisabledClass)), ref: ref, autocomplete: autocomplete, "data-test-id": dataTestId || (name ? "".concat(name, "Input") : 'input'), disabled: isDisabled, id: String(id), 
-        // @ts-ignore
-        index: index, placeholder: placeholder, type: type, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
+            : textColorDisabledClass && "text-color_".concat(textColorDisabledClass)), type: type, disabled: isDisabled, autocomplete: autocomplete, "data-test-id": dataTestId || (name ? "".concat(name, "Input") : 'input'), index: index, placeholder: placeholder, ref: ref, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
 });
 
 exports.Input = Input;