@itcase/ui 1.8.123 → 1.8.125

package/dist/{Icon_es_BrwLifge.js → Icon_es_DkVkzTha.js}

@@ -1,4 +1,3 @@
-import { _ as __assign } from './tslib.es6_es_Bwu1Cn-t.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useMemo, useRef, useState, useCallback, useImperativeHandle } from 'react';
 import clsx from 'clsx';
@@ -7,10 +6,10 @@ import { urlWithAssetPrefix } from './hoc/urlWithAssetPrefix.js';
 import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
-import { a as LinkWrapper } from './Link_es_XiqbdwLp.js';
-import { T as Text } from './Text_es_CwV9rjFD.js';
+import { a as LinkWrapper } from './Link_es_P2b6ya7P.js';
+import { T as Text } from './Text_es_CnymlElo.js';
 
-var badgeAppearanceAccent = {
+const badgeAppearanceAccent = {
     accent: {
         fill: 'accentPrimary',
         borderColor: 'accentBorderQuaternary',
@@ -48,7 +47,7 @@ var badgeAppearanceAccent = {
     },
 };
 
-var badgeAppearanceDanger = {
+const badgeAppearanceDanger = {
     danger: {
         fill: 'dangerPrimary',
         borderColor: 'dangerBorderPrimary',
@@ -65,7 +64,7 @@ var badgeAppearanceDanger = {
     },
 };
 
-var badgeAppearanceDisabled = {
+const badgeAppearanceDisabled = {
     disabled: {
         fill: 'surfaceDisabled',
         borderColor: 'surfaceBorderDisabled',
@@ -80,7 +79,7 @@ var badgeAppearanceDisabled = {
     },
 };
 
-var badgeAppearanceError = {
+const badgeAppearanceError = {
     error: {
         fill: 'errorPrimary',
         fillHover: 'errorPrimaryHover',
@@ -97,7 +96,7 @@ var badgeAppearanceError = {
     },
 };
 
-var badgeAppearanceInfo = {
+const badgeAppearanceInfo = {
     infoPrimary: {
         fill: 'infoPrimary',
         borderColor: 'infoBorderSecondary',
@@ -113,7 +112,7 @@ var badgeAppearanceInfo = {
     },
 };
 
-var badgeAppearancePrimary = {
+const badgeAppearancePrimary = {
     primary: {
         fill: 'primaryPrimary',
         borderColor: 'primaryBorderSecondary',
@@ -130,7 +129,7 @@ var badgeAppearancePrimary = {
     },
 };
 
-var badgeAppearanceSecondary = {
+const badgeAppearanceSecondary = {
     secondary: {
         fill: 'secondaryPrimary',
         borderColor: 'secondaryBorderSecondary',
@@ -147,7 +146,7 @@ var badgeAppearanceSecondary = {
     },
 };
 
-var badgeAppearanceShape = {
+const badgeAppearanceShape = {
     circular: {
         shape: 'circular',
     },
@@ -172,7 +171,7 @@ var badgeAppearanceShape = {
     },
 };
 
-var badgeAppearanceSize = {
+const badgeAppearanceSize = {
     sizeXXL: {
         size: 'xxl',
         textSize: 'xl',
@@ -210,7 +209,7 @@ var badgeAppearanceSize = {
     },
 };
 
-var badgeAppearanceStyle = {
+const badgeAppearanceStyle = {
     solid: {
         borderColor: 'none',
     },
@@ -224,7 +223,7 @@ var badgeAppearanceStyle = {
     },
 };
 
-var badgeAppearanceSuccess = {
+const badgeAppearanceSuccess = {
     success: {
         fill: 'successPrimary',
         borderColor: 'successBorderPrimary',
@@ -241,7 +240,7 @@ var badgeAppearanceSuccess = {
     },
 };
 
-var badgeAppearanceSurface = {
+const badgeAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
         borderColor: 'surfaceBorderTertiary',
@@ -266,7 +265,7 @@ var badgeAppearanceSurface = {
     },
 };
 
-var badgeAppearanceWarning = {
+const badgeAppearanceWarning = {
     warning: {
         fill: 'warningPrimary',
         borderColor: 'warningBorderPrimary',
@@ -283,22 +282,36 @@ var badgeAppearanceWarning = {
     },
 };
 
-var badgeAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, badgeAppearanceSize), badgeAppearanceShape), badgeAppearanceStyle), badgeAppearanceAccent), badgeAppearanceDanger), badgeAppearanceError), badgeAppearanceInfo), badgeAppearancePrimary), badgeAppearanceSecondary), badgeAppearanceSuccess), badgeAppearanceDisabled), badgeAppearanceSurface), badgeAppearanceWarning);
+const badgeAppearance = {
+    ...badgeAppearanceSize,
+    ...badgeAppearanceShape,
+    ...badgeAppearanceStyle,
+    ...badgeAppearanceAccent,
+    ...badgeAppearanceDanger,
+    ...badgeAppearanceError,
+    ...badgeAppearanceInfo,
+    ...badgeAppearancePrimary,
+    ...badgeAppearanceSecondary,
+    ...badgeAppearanceSuccess,
+    ...badgeAppearanceDisabled,
+    ...badgeAppearanceSurface,
+    ...badgeAppearanceWarning,
+};
 
-var badgeConfig = {
+const badgeConfig = {
     appearance: badgeAppearance,
-    setAppearance: function (appearanceConfig) {
+    setAppearance: (appearanceConfig) => {
         badgeConfig.appearance = appearanceConfig;
     },
 };
 function Badge(props) {
-    var className = props.className, appearance = props.appearance, dot = props.dot, icon = props.icon, iconSrc = props.iconSrc, value = props.value, isSkeleton = props.isSkeleton, children = props.children;
-    var appearanceConfig = useAppearanceConfig(appearance, badgeConfig);
-    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, textColor = propsGenerator.textColor, textSize = propsGenerator.textSize, dotFillClass = propsGenerator.dotFillClass, iconFill = propsGenerator.iconFill, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass;
+    const { className, appearance, dot, icon, iconSrc, value, isSkeleton, children, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, badgeConfig);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, textColor, textSize, dotFillClass, iconFill, iconShape, iconSize, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
     // @ts-expect-error
-    var badgeStyles = useStyles(props).styles;
-    var badgeTypeClass = value
+    const { styles: badgeStyles } = useStyles(props);
+    const badgeTypeClass = value
         ? icon
             ? dot
                 ? 'badge_type_dot-icon-counter'
@@ -309,11 +322,11 @@ function Badge(props) {
             : dot
                 ? 'badge_type_dot'
                 : 'badge_type_fill';
-    return (jsxs("div", { className: clsx(className, 'badge', borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), sizeClass && "badge_size_".concat(sizeClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), badgeTypeClass, isSkeleton && 'badge_skeleton'), style: badgeStyles, children: [dot && (jsx("div", { className: clsx('badge__dot', dotFillClass && "svg_fill_".concat(dotFillClass)), children: jsx("svg", { width: "6", height: "6", viewBox: "0 0 6 6", xmlns: "http://www.w3.org/2000/svg", children: jsx("rect", { width: "6", height: "6", rx: "50" }) }) })), icon && (jsx(Icon, { className: "badge__icon", size: iconSize, iconFill: iconFill, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), children ||
+    return (jsxs("div", { className: clsx(className, 'badge', borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, sizeClass && `badge_size_${sizeClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, badgeTypeClass, isSkeleton && 'badge_skeleton'), style: badgeStyles, children: [dot && (jsx("div", { className: clsx('badge__dot', dotFillClass && `svg_fill_${dotFillClass}`), children: jsx("svg", { width: "6", height: "6", viewBox: "0 0 6 6", xmlns: "http://www.w3.org/2000/svg", children: jsx("rect", { width: "6", height: "6", rx: "50" }) }) })), icon && (jsx(Icon, { className: "badge__icon", size: iconSize, iconFill: iconFill, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), children ||
                 (value && (jsx(Text, { className: "badge__value", size: textSize, textColor: textColor, children: value })))] }));
 }
 
-var titleAppearanceAccent = {
+const titleAppearanceAccent = {
     accent: {
         fill: 'accentPrimary',
         fillHover: 'accentHoverPrimary',
@@ -328,14 +341,14 @@ var titleAppearanceAccent = {
     },
 };
 
-var titleAppearanceDanger = {
+const titleAppearanceDanger = {
     danger: {
         fill: 'dangerPrimary',
         fillHover: 'dangerPrimaryHover',
     },
 };
 
-var titleAppearanceDisabled = {
+const titleAppearanceDisabled = {
     disabledPrimary: {
         fill: 'surfaceFillDisabled',
         borderColor: 'errorBorderQuaternary',
@@ -355,7 +368,7 @@ var titleAppearanceDisabled = {
     },
 };
 
-var titleAppearanceError = {
+const titleAppearanceError = {
     error: {
         fill: 'errorPrimary',
         fillHover: 'errorPrimaryHover',
@@ -364,7 +377,7 @@ var titleAppearanceError = {
     },
 };
 
-var titleAppearanceInfo = {
+const titleAppearanceInfo = {
     info: {
         fill: 'accentPrimary',
         fillHover: 'accentPrimaryHover',
@@ -375,14 +388,14 @@ var titleAppearanceInfo = {
     },
 };
 
-var titleAppearancePrimary = {
+const titleAppearancePrimary = {
     primary: {
         fill: 'primaryPrimary',
         fillHover: 'primaryPrimaryHover',
     },
 };
 
-var titleAppearanceRequire = {
+const titleAppearanceRequire = {
     requirePrimary: {
         fill: 'warningTertiary',
         borderColor: 'warningBorderQuaternary',
@@ -402,7 +415,7 @@ var titleAppearanceRequire = {
     },
 };
 
-var titleAppearanceSecondary = {
+const titleAppearanceSecondary = {
     secondary: {
         fill: 'secondaryPrimary',
         fillHover: 'secondaryPrimaryHover',
@@ -410,7 +423,7 @@ var titleAppearanceSecondary = {
     },
 };
 
-var titleAppearanceSize = {
+const titleAppearanceSize = {
     h1: {
         size: 'h1',
         iconAfterFillSize: '24',
@@ -455,7 +468,7 @@ var titleAppearanceSize = {
     },
 };
 
-var titleAppearanceStyle = {
+const titleAppearanceStyle = {
     solid: {},
     outlined: {
         fill: 'none',
@@ -466,14 +479,14 @@ var titleAppearanceStyle = {
     },
 };
 
-var titleAppearanceSuccess = {
+const titleAppearanceSuccess = {
     success: {
         fill: 'successPrimary',
         fillHover: 'successPrimaryHover',
     },
 };
 
-var titleAppearanceSurface = {
+const titleAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
         fillHover: 'surfacePrimaryHover',
@@ -492,7 +505,7 @@ var titleAppearanceSurface = {
     },
 };
 
-var titleAppearanceWarning = {
+const titleAppearanceWarning = {
     warning: {
         fill: 'warningPrimary',
         fillHover: 'warningPrimaryHover',
@@ -501,46 +514,60 @@ var titleAppearanceWarning = {
     },
 };
 
-var titleAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, titleAppearanceSize), titleAppearanceDisabled), titleAppearanceRequire), titleAppearanceStyle), titleAppearanceAccent), titleAppearanceDanger), titleAppearanceError), titleAppearanceInfo), titleAppearancePrimary), titleAppearanceSecondary), titleAppearanceSuccess), titleAppearanceSurface), titleAppearanceWarning);
+const titleAppearance = {
+    ...titleAppearanceSize,
+    ...titleAppearanceDisabled,
+    ...titleAppearanceRequire,
+    ...titleAppearanceStyle,
+    ...titleAppearanceAccent,
+    ...titleAppearanceDanger,
+    ...titleAppearanceError,
+    ...titleAppearanceInfo,
+    ...titleAppearancePrimary,
+    ...titleAppearanceSecondary,
+    ...titleAppearanceSuccess,
+    ...titleAppearanceSurface,
+    ...titleAppearanceWarning,
+};
 
-var titleConfig = {
+const titleConfig = {
     appearance: titleAppearance,
-    setAppearance: function (appearanceConfig) {
+    setAppearance: (appearanceConfig) => {
         titleConfig.appearance = appearanceConfig;
     },
 };
 function Title(props) {
-    var dataTestId = props.dataTestId, dataTour = props.dataTour, className = props.className, appearance = props.appearance, isDisabled = props.isDisabled, text = props.text, afterWrapper = props.afterWrapper, beforeWrapper = props.beforeWrapper, _a = props.tag, tag = _a === void 0 ? 'span' : _a, before = props.before, after = props.after, isActive = props.isActive, isSkeleton = props.isSkeleton, onClick = props.onClick, children = props.children;
-    var appearanceConfig = useAppearanceConfig(appearance, titleConfig, isDisabled);
-    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var directionClass = propsGenerator.directionClass, size = propsGenerator.size, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, textColorDisabledClass = propsGenerator.textColorDisabledClass, textAlignClass = propsGenerator.textAlignClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorActiveHoverClass = propsGenerator.textColorActiveHoverClass, textColorClass = propsGenerator.textColorClass, textColorHoverClass = propsGenerator.textColorHoverClass, textStyleClass = propsGenerator.textStyleClass, textTruncateClass = propsGenerator.textTruncateClass, textWeightClass = propsGenerator.textWeightClass, textWrap = propsGenerator.textWrap, heightClass = propsGenerator.heightClass, iconAfter = propsGenerator.iconAfter, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconAfterSrc = propsGenerator.iconAfterSrc, iconBadgeAppearance = propsGenerator.iconBadgeAppearance, iconBadgeShape = propsGenerator.iconBadgeShape, iconBadgeSize = propsGenerator.iconBadgeSize, iconBadgeTextColor = propsGenerator.iconBadgeTextColor, iconBadgeTextSize = propsGenerator.iconBadgeTextSize, iconBadgeValue = propsGenerator.iconBadgeValue, iconBefore = propsGenerator.iconBefore, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, iconBeforeSrc = propsGenerator.iconBeforeSrc, svgFillClass = propsGenerator.svgFillClass, svgFillHoverClass = propsGenerator.svgFillHoverClass, widthClass = propsGenerator.widthClass, wrapperDirectionClass = propsGenerator.wrapperDirectionClass;
+    const { dataTestId, dataTour, className, appearance, isDisabled, text, afterWrapper, beforeWrapper, tag = 'span', before, after, isActive, isSkeleton, onClick, children, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, titleConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { directionClass, size, fillClass, fillHoverClass, textColorDisabledClass, textAlignClass, textColorActiveClass, textColorActiveHoverClass, textColorClass, textColorHoverClass, textStyleClass, textTruncateClass, textWeightClass, textWrap, heightClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBadgeAppearance, iconBadgeShape, iconBadgeSize, iconBadgeTextColor, iconBadgeTextSize, iconBadgeValue, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, svgFillClass, svgFillHoverClass, widthClass, wrapperDirectionClass, } = propsGenerator;
     // @ts-expect-error
-    var _b = useStyles(props), titleStyles = _b.styles, titleWrapperStyles = _b.wrapper;
+    const { styles: titleStyles, wrapper: titleWrapperStyles } = useStyles(props);
     // Element type (h1, h2, ..., h6)
-    var Tag = useMemo(function () {
+    const Tag = useMemo(() => {
         if (tag) {
             return tag;
         }
         return size ? size : 'span';
     }, [tag, size]);
-    return (jsxs(Tag, { className: clsx(className, 'title', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillClass), svgFillClass && "svg_fill_".concat(svgFillClass), svgFillHoverClass && "svg_fill_hover_".concat(svgFillHoverClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), size && "title_size_".concat(size), directionClass && "title_direction_".concat(directionClass), isDisabled &&
+    return (jsxs(Tag, { className: clsx(className, 'title', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillClass}`, svgFillClass && `svg_fill_${svgFillClass}`, svgFillHoverClass && `svg_fill_hover_${svgFillHoverClass}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, size && `title_size_${size}`, directionClass && `title_direction_${directionClass}`, isDisabled &&
             textColorDisabledClass &&
-            "text-color_".concat(textColorDisabledClass), !isActive &&
+            `text-color_${textColorDisabledClass}`, !isActive &&
             !isDisabled &&
             textColorClass &&
-            "text-color_".concat(textColorClass), isActive &&
+            `text-color_${textColorClass}`, isActive &&
             !isDisabled &&
             textColorActiveClass &&
-            "text-color_active_".concat(textColorActiveClass), !isActive &&
+            `text-color_active_${textColorActiveClass}`, !isActive &&
             !isDisabled &&
             textColorHoverClass &&
-            "text-color_hover_".concat(textColorHoverClass), isActive &&
+            `text-color_hover_${textColorHoverClass}`, isActive &&
             !isDisabled &&
             textColorActiveHoverClass &&
-            "text-color_active_hover".concat(textColorActiveHoverClass), textStyleClass && "text-style_".concat(textStyleClass), textWeightClass && "text-weight_".concat(textWeightClass), textWrap && "word-wrap_".concat(textWrap), iconBadgeValue && 'title_badge', isSkeleton && 'title_skeleton'), "data-test-id": dataTestId, "data-tour": dataTour, style: titleStyles, onClick: onClick, children: [before, jsxs("span", { className: clsx(textAlignClass && "text-align_".concat(textAlignClass), wrapperDirectionClass && "title_direction_".concat(wrapperDirectionClass), 'title__wrapper', textTruncateClass && "text-truncate_".concat(textTruncateClass)), style: titleWrapperStyles, children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { className: clsx('title__icon_before', iconBadgeValue && 'title__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'title__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), beforeWrapper, children || text, afterWrapper, (iconAfter || iconAfterSrc) && (jsx(Icon, { className: clsx('title__icon_after', iconBadgeValue && 'title__icon_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'title__icon_after_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] }), after] }));
+            `text-color_active_hover${textColorActiveHoverClass}`, textStyleClass && `text-style_${textStyleClass}`, textWeightClass && `text-weight_${textWeightClass}`, textWrap && `word-wrap_${textWrap}`, iconBadgeValue && 'title_badge', isSkeleton && 'title_skeleton'), "data-test-id": dataTestId, "data-tour": dataTour, style: titleStyles, onClick: onClick, children: [before, jsxs("span", { className: clsx(textAlignClass && `text-align_${textAlignClass}`, wrapperDirectionClass && `title_direction_${wrapperDirectionClass}`, 'title__wrapper', textTruncateClass && `text-truncate_${textTruncateClass}`), style: titleWrapperStyles, children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { className: clsx('title__icon_before', iconBadgeValue && 'title__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'title__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), beforeWrapper, children || text, afterWrapper, (iconAfter || iconAfterSrc) && (jsx(Icon, { className: clsx('title__icon_after', iconBadgeValue && 'title__icon_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'title__icon_after_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] }), after] }));
 }
 
-var tooltipAppearanceDefault = {
+const tooltipAppearanceDefault = {
     defaultPrimary: {
         fill: 'surfacePrimary',
         fillHover: 'surfaceHoverPrimary',
@@ -550,7 +577,7 @@ var tooltipAppearanceDefault = {
     },
 };
 
-var tooltipAppearanceDisabled = {
+const tooltipAppearanceDisabled = {
     disabledPrimary: {
         fill: 'disabledPrimary',
         fillHover: 'disabledHoverPrimary',
@@ -559,7 +586,7 @@ var tooltipAppearanceDisabled = {
     },
 };
 
-var tooltipAppearanceError = {
+const tooltipAppearanceError = {
     errorPrimary: {
         fill: 'errorPrimary',
         fillHover: 'errorHoverPrimary',
@@ -569,7 +596,7 @@ var tooltipAppearanceError = {
     },
 };
 
-var tooltipAppearanceRequire = {
+const tooltipAppearanceRequire = {
     requirePrimary: {
         fill: 'warningPrimary',
         fillHover: 'warningHoverPrimary',
@@ -579,7 +606,7 @@ var tooltipAppearanceRequire = {
     },
 };
 
-var tooltipAppearanceSize = {
+const tooltipAppearanceSize = {
     sizeL: {
         size: 'l',
         titleSize: 'h5',
@@ -597,7 +624,7 @@ var tooltipAppearanceSize = {
     },
 };
 
-var tooltipAppearanceStyle = {
+const tooltipAppearanceStyle = {
     solid: {
         borderColor: 'none',
     },
@@ -611,7 +638,7 @@ var tooltipAppearanceStyle = {
     },
 };
 
-var tooltipAppearanceSuccess = {
+const tooltipAppearanceSuccess = {
     successPrimary: {
         fill: 'successPrimary',
         fillHover: 'successHoverPrimary',
@@ -621,43 +648,51 @@ var tooltipAppearanceSuccess = {
     },
 };
 
-var tooltipAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign({}, tooltipAppearanceDefault), tooltipAppearanceSize), tooltipAppearanceDisabled), tooltipAppearanceRequire), tooltipAppearanceStyle), tooltipAppearanceError), tooltipAppearanceSuccess);
+const tooltipAppearance = {
+    ...tooltipAppearanceDefault,
+    ...tooltipAppearanceSize,
+    ...tooltipAppearanceDisabled,
+    ...tooltipAppearanceRequire,
+    ...tooltipAppearanceStyle,
+    ...tooltipAppearanceError,
+    ...tooltipAppearanceSuccess,
+};
 
-var tooltipConfig = {
+const tooltipConfig = {
     appearance: tooltipAppearance,
-    setAppearance: function (appearanceConfig) {
+    setAppearance: (appearanceConfig) => {
         tooltipConfig.appearance = appearanceConfig;
     },
 };
-var Tooltip = React.forwardRef(function Tooltip(props, ref) {
-    var className = props.className, appearance = props.appearance, initialIsVisible = props.initialIsVisible, title = props.title, text = props.text, before = props.before, after = props.after, _a = props.openTimeoutDelay, openTimeoutDelay = _a === void 0 ? 500 : _a, _b = props.closeTimeoutDelay, closeTimeoutDelay = _b === void 0 ? 250 : _b, isSkeleton = props.isSkeleton, children = props.children;
-    var tooltipElementRef = useRef(null);
-    var tooltipTimeoutHideRef = useRef(null);
-    var tooltipTimeoutShowRef = useRef(null);
-    var isTooltipCloseAnimationInProgressRef = useRef(false);
+const Tooltip = React.forwardRef(function Tooltip(props, ref) {
+    const { className, appearance, initialIsVisible, title, text, before, after, openTimeoutDelay = 500, closeTimeoutDelay = 250, isSkeleton, children, } = props;
+    const tooltipElementRef = useRef(null);
+    const tooltipTimeoutHideRef = useRef(null);
+    const tooltipTimeoutShowRef = useRef(null);
+    const isTooltipCloseAnimationInProgressRef = useRef(false);
     // TODO: rename to open?
-    var _c = useState(initialIsVisible), isTooltipVisible = _c[0], setIsTooltipVisible = _c[1];
+    const [isTooltipVisible, setIsTooltipVisible] = useState(initialIsVisible);
     // TODO: or rename to show/hide?
-    var openTooltip = useCallback(function () {
+    const openTooltip = useCallback(() => {
         if (!isTooltipCloseAnimationInProgressRef.current) {
             if (tooltipTimeoutHideRef.current) {
                 clearTimeout(tooltipTimeoutHideRef.current);
             }
-            tooltipTimeoutShowRef.current = setTimeout(function () {
+            tooltipTimeoutShowRef.current = setTimeout(() => {
                 setIsTooltipVisible(true);
             }, openTimeoutDelay);
         }
     }, [openTimeoutDelay]);
-    var closeTooltip = useCallback(function () {
+    const closeTooltip = useCallback(() => {
         if (tooltipTimeoutShowRef.current) {
             clearTimeout(tooltipTimeoutShowRef.current);
         }
         // Make a small delay to be able to move cursor on the tooltip without
         // triggering a close, because the label and the tooltip have  space between
-        tooltipTimeoutHideRef.current = setTimeout(function () {
+        tooltipTimeoutHideRef.current = setTimeout(() => {
             // @ts-expect-error
-            setIsTooltipVisible(function (prevState) {
-                var newState = false;
+            setIsTooltipVisible((prevState) => {
+                const newState = false;
                 if (prevState === true) {
                     isTooltipCloseAnimationInProgressRef.current = true;
                 }
@@ -665,33 +700,26 @@ var Tooltip = React.forwardRef(function Tooltip(props, ref) {
             });
         }, closeTimeoutDelay);
     }, [closeTimeoutDelay]);
-    var onAnimationEnd = useCallback(function () {
+    const onAnimationEnd = useCallback(() => {
         isTooltipCloseAnimationInProgressRef.current = false;
     }, []);
-    useImperativeHandle(ref, function () { return ({
+    useImperativeHandle(ref, () => ({
         get tooltipElement() {
             return tooltipElementRef.current;
         },
         openTooltip: openTooltip,
         closeTooltip: closeTooltip,
         isTooltipVisible: isTooltipVisible,
-    }); }, [isTooltipVisible, openTooltip, closeTooltip]);
-    var appearanceConfig = useAppearanceConfig(appearance, tooltipConfig);
-    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, alignmentClass = propsGenerator.alignmentClass, alignPosition = propsGenerator.alignPosition, fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, titleColor = propsGenerator.titleColor, titleSize = propsGenerator.titleSize, titleWeight = propsGenerator.titleWeight, textColor = propsGenerator.textColor, textSize = propsGenerator.textSize, textWeight = propsGenerator.textWeight, arrowPosition = propsGenerator.arrowPosition, centeringClass = propsGenerator.centeringClass, elevationClass = propsGenerator.elevationClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
+    }), [isTooltipVisible, openTooltip, closeTooltip]);
+    const appearanceConfig = useAppearanceConfig(appearance, tooltipConfig);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { alignClass, alignDirectionClass, alignmentClass, alignPosition, fillClass, borderColorClass, borderTypeClass, borderWidthClass, titleColor, titleSize, titleWeight, textColor, textSize, textWeight, arrowPosition, centeringClass, elevationClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
     // @ts-expect-error
-    var tooltipStyles = useStyles(props).styles;
-    return (jsxs("div", { className: clsx(className, 'tooltip', isTooltipVisible ? 'tooltip_state_open' : 'tooltip_state_close', fillClass && "fill_".concat(fillClass), alignPosition && "tooltip_align-position_".concat(alignPosition), alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), elevationClass && "elevation_".concat(elevationClass), centeringClass && "centering_".concat(centeringClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), alignmentClass && "alignment_".concat(alignmentClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), sizeClass && "tooltip_size_".concat(sizeClass), isSkeleton && 'tooltip_skeleton', widthClass && "width_".concat(widthClass)), ref: tooltipElementRef, style: tooltipStyles, onAnimationEnd: onAnimationEnd, children: [jsx("div", { className: clsx('tooltip__arrow', arrowPosition && "tooltip__arrow_position_".concat(arrowPosition), fillClass && "fill_".concat(fillClass)), children: "\u00A0" }), before, jsxs("div", { className: "tooltip__inner", children: [title && (jsx(Title, { className: "tooltip__title text", size: titleSize, textColor: titleColor, textWeight: titleWeight, children: title })), text && (jsx(Text, { className: "tooltip__text", size: textSize, textColor: textColor, textWeight: textWeight, children: text })), children] }), after] }));
+    const { styles: tooltipStyles } = useStyles(props);
+    return (jsxs("div", { className: clsx(className, 'tooltip', isTooltipVisible ? 'tooltip_state_open' : 'tooltip_state_close', fillClass && `fill_${fillClass}`, alignPosition && `tooltip_align-position_${alignPosition}`, alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`, elevationClass && `elevation_${elevationClass}`, centeringClass && `centering_${centeringClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, alignmentClass && `alignment_${alignmentClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, sizeClass && `tooltip_size_${sizeClass}`, isSkeleton && 'tooltip_skeleton', widthClass && `width_${widthClass}`), ref: tooltipElementRef, style: tooltipStyles, onAnimationEnd: onAnimationEnd, children: [jsx("div", { className: clsx('tooltip__arrow', arrowPosition && `tooltip__arrow_position_${arrowPosition}`, fillClass && `fill_${fillClass}`), children: "\u00A0" }), before, jsxs("div", { className: "tooltip__inner", children: [title && (jsx(Title, { className: "tooltip__title text", size: titleSize, textColor: titleColor, textWeight: titleWeight, children: title })), text && (jsx(Text, { className: "tooltip__text", size: textSize, textColor: textColor, textWeight: textWeight, children: text })), children] }), after] }));
 });
 
-var iconAppearanceAccent = {
-    accent: {
-        fill: 'accentPrimary',
-        fillHover: 'accentHover',
-        borderColor: 'accentBorderPrimary',
-        badgeAppearance: 'surfacePrimary',
-        iconFill: 'accentItemPrimary',
-    },
+const iconAppearanceAccent = {
     accentPrimary: {
         fill: 'accentPrimary',
         fillHover: 'accentHover',
@@ -707,11 +735,7 @@ var iconAppearanceAccent = {
     },
 };
 
-var iconAppearanceDanger = {
-    danger: {
-        fill: 'dangerPrimary',
-        fillHover: 'dangerHover',
-    },
+const iconAppearanceDanger = {
     dangerPrimary: {
         fill: 'dangerPrimary',
         fillHover: 'dangerHover',
@@ -721,7 +745,7 @@ var iconAppearanceDanger = {
     },
 };
 
-var iconAppearanceDisabled = {
+const iconAppearanceDisabled = {
     disabledPrimary: {
         fill: 'surfaceDisabled',
         borderColor: 'surfaceBorderDisabled',
@@ -730,13 +754,7 @@ var iconAppearanceDisabled = {
     },
 };
 
-var iconAppearanceError = {
-    error: {
-        fill: 'errorPrimary',
-        fillHover: 'errorHover',
-        badgeAppearance: 'surfacePrimary',
-        iconFill: 'errorItemPrimary',
-    },
+const iconAppearanceError = {
     errorPrimary: {
         fill: 'errorPrimary',
         fillHover: 'errorHover',
@@ -746,12 +764,7 @@ var iconAppearanceError = {
     },
 };
 
-var iconAppearanceInfo = {
-    info: {
-        fill: 'accentPrimary',
-        fillHover: 'accentPrimaryHover',
-        borderColor: 'accentBorderPrimary',
-    },
+const iconAppearanceInfo = {
     infoPrimary: {
         fill: 'infoPrimary',
         borderColor: 'infoBorderDisabled',
@@ -765,13 +778,7 @@ var iconAppearanceInfo = {
     },
 };
 
-var iconAppearancePrimary = {
-    primary: {
-        fill: 'primaryPrimary',
-        fillHover: 'primaryPrimaryHover',
-        badgeAppearance: 'surfacePrimary',
-        iconFill: 'primaryItemPrimary',
-    },
+const iconAppearancePrimary = {
     primaryPrimary: {
         fill: 'primaryPrimary',
         fillHover: 'primaryPrimaryHover',
@@ -781,11 +788,7 @@ var iconAppearancePrimary = {
     },
 };
 
-var iconAppearanceSecondary = {
-    secondary: {
-        fill: 'secondaryPrimary',
-        fillHover: 'secondaryPrimaryHover',
-    },
+const iconAppearanceSecondary = {
     secondaryPrimary: {
         fill: 'secondaryPrimary',
         fillHover: 'secondaryHoverPrimary',
@@ -795,7 +798,7 @@ var iconAppearanceSecondary = {
     },
 };
 
-var iconAppearanceShape = {
+const iconAppearanceShape = {
     circular: {
         shape: 'circular',
     },
@@ -820,7 +823,7 @@ var iconAppearanceShape = {
     },
 };
 
-var iconAppearanceSize = {
+const iconAppearanceSize = {
     size12_12: {
         fillSize: '12',
         badgeAppearanceSize: 'sizeXXS',
@@ -963,7 +966,7 @@ var iconAppearanceSize = {
     },
 };
 
-var iconAppearanceStyle = {
+const iconAppearanceStyle = {
     solid: {
         borderColor: 'none',
     },
@@ -977,11 +980,7 @@ var iconAppearanceStyle = {
     },
 };
 
-var iconAppearanceSuccess = {
-    success: {
-        fill: 'successPrimary',
-        fillHover: 'successHover',
-    },
+const iconAppearanceSuccess = {
     successPrimary: {
         fill: 'successPrimary',
         fillHover: 'successHover',
@@ -991,7 +990,7 @@ var iconAppearanceSuccess = {
     },
 };
 
-var iconAppearanceSurface = {
+const iconAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
         fillHover: 'surfaceSecondary',
@@ -1019,7 +1018,7 @@ var iconAppearanceSurface = {
     },
 };
 
-var iconAppearanceWarning = {
+const iconAppearanceWarning = {
     warning: {
         fill: 'warningPrimary',
         fillHover: 'warningHover',
@@ -1035,28 +1034,42 @@ var iconAppearanceWarning = {
     },
 };
 
-var iconAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, iconAppearanceDisabled), iconAppearanceSize), iconAppearanceStyle), iconAppearanceAccent), iconAppearanceShape), iconAppearanceDanger), iconAppearanceError), iconAppearanceInfo), iconAppearancePrimary), iconAppearanceSecondary), iconAppearanceSuccess), iconAppearanceSurface), iconAppearanceWarning);
+const iconAppearance = {
+    ...iconAppearanceDisabled,
+    ...iconAppearanceSize,
+    ...iconAppearanceStyle,
+    ...iconAppearanceAccent,
+    ...iconAppearanceShape,
+    ...iconAppearanceDanger,
+    ...iconAppearanceError,
+    ...iconAppearanceInfo,
+    ...iconAppearancePrimary,
+    ...iconAppearanceSecondary,
+    ...iconAppearanceSuccess,
+    ...iconAppearanceSurface,
+    ...iconAppearanceWarning,
+};
 
-var iconConfig = {
+const iconConfig = {
     appearance: iconAppearance,
-    setAppearance: function (appearanceConfig) {
+    setAppearance: (appearanceConfig) => {
         iconConfig.appearance = appearanceConfig;
     },
 };
-var Icon = urlWithAssetPrefix(React.forwardRef(function Icon(props, ref) {
+const Icon = urlWithAssetPrefix(React.forwardRef(function Icon(props, ref) {
     // TODO: Tooltip doesn't work that anymore
     // const [isTooltipVisible, setIsTooltipVisible] = useState(false)
-    var id = props.id, appearance = props.appearance, className = props.className, dataTour = props.dataTour, width = props.width, height = props.height, badgeClass = props.badgeClass, href = props.href, imageSrc = props.imageSrc, link = props.link, linkRel = props.linkRel, linkTarget = props.linkTarget, notification = props.notification, showTooltip = props.showTooltip, SvgImage = props.SvgImage, before = props.before, after = props.after, isActive = props.isActive, isDisabled = props.isDisabled, isSkeleton = props.isSkeleton, onClick = props.onClick, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave;
-    var ImageComponent = useMemo(function () {
+    const { id, appearance, className, dataTour, width, height, badgeClass, href, imageSrc, link, linkRel, linkTarget, notification, showTooltip, SvgImage, before, after, isActive, isDisabled, isSkeleton, onClick, onMouseEnter, onMouseLeave, } = props;
+    const ImageComponent = useMemo(() => {
         if (SvgImage) {
-            var sizes = {};
+            const sizes = {};
             if (width) {
                 sizes.width = width;
             }
             if (height) {
                 sizes.height = height;
             }
-            return jsx(SvgImage, __assign({}, sizes));
+            return jsx(SvgImage, { ...sizes });
         }
         if (imageSrc) {
             if (imageSrc.endsWith('.svg')) {
@@ -1066,27 +1079,27 @@ var Icon = urlWithAssetPrefix(React.forwardRef(function Icon(props, ref) {
         }
         return null;
     }, [SvgImage, width, height, imageSrc]);
-    var appearanceConfig = useAppearanceConfig(appearance, iconConfig, isDisabled);
-    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var alignmentClass = propsGenerator.alignmentClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, 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, badgeAppearance = propsGenerator.badgeAppearance, badgeAppearanceSize = propsGenerator.badgeAppearanceSize, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, badgeValue = propsGenerator.badgeValue, centeringClass = propsGenerator.centeringClass, iconFillActiveClass = propsGenerator.iconFillActiveClass, iconFillActiveHoverClass = propsGenerator.iconFillActiveHoverClass, iconFillClass = propsGenerator.iconFillClass, iconFillHoverClass = propsGenerator.iconFillHoverClass, iconSizeClass = propsGenerator.iconSizeClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, tooltipAppearance = propsGenerator.tooltipAppearance, tooltipText = propsGenerator.tooltipText, tooltipTextSize = propsGenerator.tooltipTextSize, tooltipTitle = propsGenerator.tooltipTitle, tooltipTitleSize = propsGenerator.tooltipTitleSize;
+    const appearanceConfig = useAppearanceConfig(appearance, iconConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { alignmentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, fillSizeClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, badgeAppearance, badgeAppearanceSize, badgeShape, badgeSize, badgeTextColor, badgeTextSize, badgeValue, centeringClass, iconFillActiveClass, iconFillActiveHoverClass, iconFillClass, iconFillDisabledClass, iconFillHoverClass, iconSizeClass, shapeClass, shapeStrengthClass, tooltipAppearance, tooltipText, tooltipTextSize, tooltipTitle, tooltipTitleSize, } = propsGenerator;
     // @ts-expect-error - TODO: сделать useStyles на ts
-    var iconStyles = useStyles(props).styles;
+    const { styles: iconStyles } = useStyles(props);
     return (jsxs("div", { id: id, className: clsx(className, 'icon', !isActive
-            ? fillClass && "fill_".concat(fillClass)
-            : fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive
-            ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
+            ? fillClass && `fill_${fillClass}`
+            : fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
+            ? fillHoverClass && `fill_hover_${fillHoverClass}`
             : fillActiveHoverClass &&
-                "fill_active_hover_".concat(fillActiveHoverClass), fillSizeClass && "icon_fill_size_".concat(fillSizeClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isActive
-            ? iconFillClass && "icon_fill_".concat(iconFillClass)
-            : iconFillActiveClass && "icon_fill_active_".concat(iconFillActiveClass), !isActive
-            ? iconFillHoverClass && "icon_fill_hover_".concat(iconFillHoverClass)
+                `fill_active_hover_${fillActiveHoverClass}`, fillSizeClass && `icon_fill_size_${fillSizeClass}`, fillDisabledClass && `fill_disabled_${fillDisabledClass}`, !isActive
+            ? iconFillClass && `icon_fill_${iconFillClass}`
+            : iconFillActiveClass && `icon_fill_active_${iconFillActiveClass}`, !isActive
+            ? iconFillHoverClass && `icon_fill_hover_${iconFillHoverClass}`
             : iconFillActiveHoverClass &&
-                "icon_fill_active_hover_".concat(iconFillActiveHoverClass), isDisabled &&
+                `icon_fill_active_hover_${iconFillActiveHoverClass}`, isDisabled &&
             iconFillDisabledClass &&
-            "icon_fill_disabled_".concat(iconFillDisabledClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass &&
-            "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), badgeValue && 'icon_with-badge', centeringClass && "centering_".concat(centeringClass), onClick && 'cursor_type_pointer', isSkeleton && "icon_skeleton"), ref: ref, "data-tour": dataTour, 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)), href: link || href, LinkComponent: "div", rel: linkRel, target: linkTarget, children: [ImageComponent, (badgeValue || notification) && (jsx(Badge, { className: clsx(badgeClass, 'icon__badge'), appearance: "".concat(badgeAppearance, " ").concat(badgeAppearanceSize), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), showTooltip && (jsx(Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass && "alignment_".concat(alignmentClass)), appearance: tooltipAppearance, title: tooltipTitle, titleSize: tooltipTitleSize, text: tooltipText, textSize: tooltipTextSize }))] }), after] }));
+            `icon_fill_disabled_${iconFillDisabledClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass &&
+            `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, badgeValue && 'icon_with-badge', centeringClass && `centering_${centeringClass}`, onClick && 'cursor_type_pointer', isSkeleton && `icon_skeleton`), ref: ref, "data-tour": dataTour, 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_${iconSizeClass}`), href: link || href, LinkComponent: "div", rel: linkRel, target: linkTarget, children: [ImageComponent, (badgeValue || notification) && (jsx(Badge, { className: clsx(badgeClass, 'icon__badge'), appearance: `${badgeAppearance} ${badgeAppearanceSize}`, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), showTooltip && (jsx(Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass && `alignment_${alignmentClass}`), appearance: tooltipAppearance, title: tooltipTitle, titleSize: tooltipTitleSize, text: tooltipText, textSize: tooltipTextSize }))] }), after] }));
 }));
-var removeFillStroke = function (code) {
+const removeFillStroke = (code) => {
     return code
         .replace(/fill=".*?"/g, 'fill=""')
         .replace(/stroke=".*?"/g, 'stroke=""');