@itcase/ui 1.9.36 → 1.9.38

package/dist/{Icon_cjs_CQxDPPGY.js → Icon_cjs_D20B2YBo.js}

@@ -8,17 +8,10 @@ var urlWithAssetPrefix = require('./cjs/hoc/urlWithAssetPrefix.js');
 var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-var Link = require('./Link_cjs_DqNtNI23.js');
-var Text = require('./Text_cjs_Co2XdYF-.js');
+var Link = require('./Link_cjs_DXBqPjwm.js');
+var Text = require('./Text_cjs_erTy2pUN.js');
 
 const badgeAppearanceAccent = {
-    accent: {
-        fill: 'accentPrimary',
-        borderColor: 'accentBorderQuaternary',
-        textColor: 'accentTextPrimary',
-        dotFill: 'accentItemPrimary',
-        iconFill: 'accentItemPrimary',
-    },
     accentPrimary: {
         fill: 'accentPrimary',
         borderColor: 'accentBorderQuaternary',
@@ -41,7 +34,7 @@ const badgeAppearanceAccent = {
         iconFill: 'accentItemQuaternary',
     },
     accentTertiary: {
-        fill: 'accentTeriary',
+        fill: 'accentTertiary',
         borderColor: 'accentBorderSecondary',
         textColor: 'accentTextSecondary',
         dotFill: 'accentItemSecondary',
@@ -50,13 +43,6 @@ const badgeAppearanceAccent = {
 };
 
 const badgeAppearanceDanger = {
-    danger: {
-        fill: 'dangerPrimary',
-        borderColor: 'dangerBorderPrimary',
-        textColor: 'dangerTextSecondary',
-        dotFill: 'dangerItemPrimary',
-        iconFill: 'dangerItemPrimary',
-    },
     dangerPrimary: {
         fill: 'dangerPrimary',
         borderColor: 'dangerBorderPrimary',
@@ -67,37 +53,33 @@ const badgeAppearanceDanger = {
 };
 
 const badgeAppearanceDisabled = {
-    disabled: {
-        fill: 'surfaceDisabled',
-        borderColor: 'surfaceBorderDisabled',
-        textColor: 'surfaceTextDisabled',
-        iconFill: 'surfaceItemDisabled',
-    },
     disabledPrimary: {
-        fill: 'surfaceDisabled',
-        borderColor: 'surfaceBorderDisabled',
-        textColor: 'surfaceTextDisabled',
-        iconFill: 'surfaceItemDisabled',
+        fill: 'surfacePrimary',
+        borderColor: 'surfaceBorderPrimary',
+        textColor: 'surfaceTextPrimary',
+        iconFill: 'surfaceItemPrimary',
     },
 };
 
 const badgeAppearanceError = {
-    error: {
-        fill: 'errorPrimary',
-        fillHover: 'errorPrimaryHover',
-        labelTextColor: 'errorTextPrimary',
-        labelTextColorHover: 'errorTextPrimary',
-        iconFill: 'errorItemPrimary',
-    },
     errorPrimary: {
         fill: 'errorPrimary',
-        fillHover: 'errorPrimaryHover',
-        labelTextColor: 'errorTextPrimary',
-        labelTextColorHover: 'errorTextPrimary',
+        fillHover: 'errorHoverPrimary',
+        textColor: 'errorTextPrimary',
         iconFill: 'errorItemPrimary',
     },
 };
 
+const badgeAppearanceExtra = {
+    extraPrimary: {
+        fill: 'extraPrimary',
+        borderColor: 'extraBorderSecondary',
+        textColor: 'extraTextPrimary',
+        dotFill: 'extraItemPrimary',
+        iconFill: 'extraItemPrimary',
+    },
+};
+
 const badgeAppearanceInfo = {
     infoPrimary: {
         fill: 'infoPrimary',
@@ -114,40 +96,6 @@ const badgeAppearanceInfo = {
     },
 };
 
-const badgeAppearancePrimary = {
-    primary: {
-        fill: 'primaryPrimary',
-        borderColor: 'primaryBorderSecondary',
-        textColor: 'primaryTextPrimary',
-        dotFill: 'primaryItemPrimary',
-        iconFill: 'primaryItemPrimary',
-    },
-    primaryPrimary: {
-        fill: 'primaryPrimary',
-        borderColor: 'primaryBorderSecondary',
-        textColor: 'primaryTextPrimary',
-        dotFill: 'primaryItemPrimary',
-        iconFill: 'primaryItemPrimary',
-    },
-};
-
-const badgeAppearanceSecondary = {
-    secondary: {
-        fill: 'secondaryPrimary',
-        borderColor: 'secondaryBorderSecondary',
-        textColor: 'secondaryTextPrimary',
-        dotFill: 'secondaryItemPrimary',
-        iconFill: 'secondaryItemPrimary',
-    },
-    secondaryPrimary: {
-        fill: 'secondaryPrimary',
-        borderColor: 'secondaryBorderSecondary',
-        textColor: 'secondaryTextPrimary',
-        dotFill: 'secondaryItemPrimary',
-        iconFill: 'secondaryItemPrimary',
-    },
-};
-
 const badgeAppearanceShape = {
     circular: {
         shape: 'circular',
@@ -211,6 +159,16 @@ const badgeAppearanceSize = {
     },
 };
 
+const badgeAppearanceSpecial = {
+    specialPrimary: {
+        fill: 'specialPrimary',
+        borderColor: 'specialBorderSecondary',
+        textColor: 'specialTextPrimary',
+        dotFill: 'specialItemPrimary',
+        iconFill: 'specialItemPrimary',
+    },
+};
+
 const badgeAppearanceStyle = {
     solid: {
         borderColor: 'none',
@@ -226,13 +184,6 @@ const badgeAppearanceStyle = {
 };
 
 const badgeAppearanceSuccess = {
-    success: {
-        fill: 'successPrimary',
-        borderColor: 'successBorderPrimary',
-        textColor: 'successTextPrimary',
-        dotFill: 'successItemPrimary',
-        iconFill: 'successItemPrimary',
-    },
     successPrimary: {
         fill: 'successPrimary',
         borderColor: 'successBorderPrimary',
@@ -253,7 +204,7 @@ const badgeAppearanceSurface = {
     surfaceQuaternary: {
         fill: 'accentPrimary',
         borderColor: 'surfaceBorderPrimary',
-        textColor: 'surfaceTextInverse',
+        textColor: 'surfaceTextPrimary',
     },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
@@ -268,13 +219,6 @@ const badgeAppearanceSurface = {
 };
 
 const badgeAppearanceWarning = {
-    warning: {
-        fill: 'warningPrimary',
-        borderColor: 'warningBorderPrimary',
-        textColor: 'warningTextSecondary',
-        dotFill: 'warningItemPrimary',
-        iconFill: 'warningItemPrimary',
-    },
     warningPrimary: {
         fill: 'warningPrimary',
         borderColor: 'warningBorderPrimary',
@@ -292,8 +236,8 @@ const badgeAppearance = {
     ...badgeAppearanceDanger,
     ...badgeAppearanceError,
     ...badgeAppearanceInfo,
-    ...badgeAppearancePrimary,
-    ...badgeAppearanceSecondary,
+    ...badgeAppearanceSpecial,
+    ...badgeAppearanceExtra,
     ...badgeAppearanceSuccess,
     ...badgeAppearanceDisabled,
     ...badgeAppearanceSurface,
@@ -311,7 +255,6 @@ function Badge(props) {
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, badgeConfig);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, textColor, textSize, dotFillClass, iconFill, iconShape, iconSize, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
-    // @ts-expect-error
     const { styles: badgeStyles } = useStyles.useStyles(props);
     const badgeTypeClass = value
         ? icon
@@ -329,10 +272,6 @@ function Badge(props) {
 }
 
 const titleAppearanceAccent = {
-    accent: {
-        fill: 'accentPrimary',
-        fillHover: 'accentHoverPrimary',
-    },
     accentPrimary: {
         fill: 'accentPrimary',
         fillHover: 'accentHoverPrimary',
@@ -344,56 +283,53 @@ const titleAppearanceAccent = {
 };
 
 const titleAppearanceDanger = {
-    danger: {
+    dangerPrimary: {
         fill: 'dangerPrimary',
-        fillHover: 'dangerPrimaryHover',
+        fillHover: 'dangerHoverPrimary',
     },
 };
 
 const titleAppearanceDisabled = {
     disabledPrimary: {
-        fill: 'surfaceFillDisabled',
+        fill: 'surfacePrimary',
         borderColor: 'errorBorderQuaternary',
-        borderHover: 'errorBorderQuaternary',
+        borderHover: 'errorBorderHoverQuaternary',
         textColor: 'surfaceTextQuaternary',
-        iconBeforeFill: 'errorItemQuaternary',
-        iconClearFill: 'errorItemPrimary',
-        placeholderTextColor: 'surfaceTextQuaternary',
+        iconBeforeFill: 'errorQuaternary',
     },
     disabledSecondary: {
         fill: 'surfaceSecondary',
         borderColor: 'surfaceBorderTertiary',
-        borderHover: 'surfaceBorderQuaternary',
-        iconBeforeFill: 'surfaceItemQuaternary',
-        iconClearFill: 'surfaceItemPrimary',
-        placeholderTextColor: 'surfaceTextSecondary',
+        borderHover: 'surfaceBorderHoverQuaternary',
+        iconBeforeFill: 'surfaceQuaternary',
     },
 };
 
 const titleAppearanceError = {
-    error: {
+    errorPrimary: {
         fill: 'errorPrimary',
-        fillHover: 'errorPrimaryHover',
-        labelTextColor: 'errorTextPrimary',
-        labelTextColorHover: 'errorTextPrimary',
+        fillHover: 'errorHoverPrimary',
+        textColor: 'errorTextPrimary',
+        textColorHover: 'errorTextPrimary',
+    },
+};
+
+const titleAppearanceExtra = {
+    extraPrimary: {
+        fill: 'extraPrimary',
+        fillHover: 'extraHoverPrimary',
+        textColor: 'extraTextPrimary',
     },
 };
 
 const titleAppearanceInfo = {
-    info: {
+    infoPrimary: {
         fill: 'accentPrimary',
-        fillHover: 'accentPrimaryHover',
+        fillHover: 'accentHoverPrimary',
     },
     infoSecondary: {
         fill: 'accentPrimary',
-        fillHover: 'accentPrimaryHover',
-    },
-};
-
-const titleAppearancePrimary = {
-    primary: {
-        fill: 'primaryPrimary',
-        fillHover: 'primaryPrimaryHover',
+        fillHover: 'accentHoverPrimary',
     },
 };
 
@@ -403,25 +339,13 @@ const titleAppearanceRequire = {
         borderColor: 'warningBorderQuaternary',
         borderHover: 'warningBorderQuaternary',
         textColor: 'surfaceTextPrimary',
-        iconBeforeFill: 'warningItemQuaternary',
-        iconClearFill: 'warningItemPrimary',
-        placeholderTextColor: 'surfaceTextQuaternary',
+        iconBeforeFill: 'warningQuaternary',
     },
     requireSecondary: {
         fill: 'surfaceSecondary',
         borderColor: 'surfaceBorderTertiary',
         borderHover: 'surfaceBorderQuaternary',
-        iconBeforeFill: 'surfaceItemQuaternary',
-        iconClearFill: 'surfaceItemPrimary',
-        placeholderTextColor: 'surfaceTextSecondary',
-    },
-};
-
-const titleAppearanceSecondary = {
-    secondary: {
-        fill: 'secondaryPrimary',
-        fillHover: 'secondaryPrimaryHover',
-        labelTextColor: 'secondaryTextPrimary',
+        iconBeforeFill: 'surfaceQuaternary',
     },
 };
 
@@ -470,6 +394,13 @@ const titleAppearanceSize = {
     },
 };
 
+const titleAppearanceSpecial = {
+    specialPrimary: {
+        fill: 'specialPrimary',
+        fillHover: 'specialHoverPrimary',
+    },
+};
+
 const titleAppearanceStyle = {
     solid: {},
     outlined: {
@@ -482,54 +413,54 @@ const titleAppearanceStyle = {
 };
 
 const titleAppearanceSuccess = {
-    success: {
+    successPrimary: {
         fill: 'successPrimary',
-        fillHover: 'successPrimaryHover',
+        fillHover: 'successHoverPrimary',
     },
 };
 
 const titleAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
-        fillHover: 'surfacePrimaryHover',
+        fillHover: 'surfaceHoverPrimary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillHover: 'surfaceHoverQuaternary',
     },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
-        fillHover: 'surfaceSecondaryHover',
+        fillHover: 'surfaceHoverSecondary',
     },
     surfaceTertiary: {
         fill: 'surfaceTertiary',
-        fillHover: 'surfaceTertiaryHover',
-    },
-    surfaceQuaternary: {
-        fill: 'surfaceQuaternary',
-        fillHover: 'surfaceQuaternaryHover',
+        fillHover: 'surfaceHoverTertiary',
     },
 };
 
 const titleAppearanceWarning = {
-    warning: {
+    warningPrimary: {
         fill: 'warningPrimary',
-        fillHover: 'warningPrimaryHover',
-        labelTextColor: 'warningTextSecondary',
-        labelTextColorHover: 'warningTextSecondary',
+        fillHover: 'warningHoverPrimary',
+        textColor: 'warningTextSecondary',
+        textColorHover: 'warningTextSecondary',
     },
 };
 
 const titleAppearance = {
     ...titleAppearanceSize,
     ...titleAppearanceDisabled,
-    ...titleAppearanceRequire,
     ...titleAppearanceStyle,
     ...titleAppearanceAccent,
     ...titleAppearanceDanger,
     ...titleAppearanceError,
     ...titleAppearanceInfo,
-    ...titleAppearancePrimary,
-    ...titleAppearanceSecondary,
+    ...titleAppearanceSpecial,
+    ...titleAppearanceExtra,
     ...titleAppearanceSuccess,
     ...titleAppearanceSurface,
     ...titleAppearanceWarning,
+    ...titleAppearanceRequire,
 };
 
 const titleConfig = {
@@ -542,17 +473,15 @@ function Title(props) {
     const { appearance, className, dataTestId, dataTour, text, afterWrapper, beforeWrapper, style, tag = 'span', before, after, isActive, isDisabled, isSkeleton, onClick, children, } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, titleConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    const { directionClass, size, fillClass, fillHoverClass, textAlignClass, textColorActiveClass, textColorActiveHoverClass, textColorClass, textColorDisabledClass, textColorHoverClass, textFontClass, 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
+    const { directionClass, size, fillClass, fillHoverClass, textAlignClass, textColorActiveClass, textColorActiveHoverClass, textColorClass, textColorDisabledClass, textColorHoverClass, textFontClass, 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, onClickIconAfter, onClickIconBefore, } = propsGenerator;
     const { styles: titleStyles, wrapper: titleWrapperStyles } = useStyles.useStyles(props);
-    // Element type (h1, h2, ..., h6)
     const Tag = React.useMemo(() => {
         if (tag) {
             return tag;
         }
         return size ? size : 'span';
     }, [tag, size]);
-    return (jsxRuntime.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 &&
+    return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'title', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, 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_${textColorDisabledClass}`, !isActive &&
             !isDisabled &&
@@ -566,15 +495,15 @@ function Title(props) {
             `text-color_hover_${textColorHoverClass}`, isActive &&
             !isDisabled &&
             textColorActiveHoverClass &&
-            `text-color_active_hover${textColorActiveHoverClass}`, textFontClass && `text-font_${textFontClass}`, textStyleClass && `text-style_${textStyleClass}`, textWeightClass && `text-weight_${textWeightClass}`, textWrap && `word-wrap_${textWrap}`, iconBadgeValue && 'title_badge', isSkeleton && 'title_skeleton'), "data-testid": dataTestId, "data-tour": dataTour, style: Object.assign({}, titleStyles, style), onClick: onClick, children: [before, jsxRuntime.jsxs("span", { className: clsx(textAlignClass && `text-align_${textAlignClass}`, wrapperDirectionClass && `title_direction_${wrapperDirectionClass}`, 'title__wrapper', textTruncateClass && `text-truncate_${textTruncateClass}`), style: titleWrapperStyles, children: [(iconBefore || iconBeforeSrc) && (jsxRuntime.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) && (jsxRuntime.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}`, textFontClass && `text-font_${textFontClass}`, textStyleClass && `text-style_${textStyleClass}`, textWeightClass && `text-weight_${textWeightClass}`, textWrap && `word-wrap_${textWrap}`, iconBadgeValue && 'title_badge', isSkeleton && 'title_skeleton'), "data-testid": dataTestId, "data-tour": dataTour, style: Object.assign({}, titleStyles, style), onClick: onClick, children: [before, jsxRuntime.jsxs("span", { className: clsx(textAlignClass && `text-align_${textAlignClass}`, wrapperDirectionClass && `title_direction_${wrapperDirectionClass}`, 'title__wrapper', textTruncateClass && `text-truncate_${textTruncateClass}`), style: titleWrapperStyles, children: [(iconBefore || iconBeforeSrc) && (jsxRuntime.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, onClick: onClickIconBefore })), beforeWrapper, children || text, afterWrapper, (iconAfter || iconAfterSrc) && (jsxRuntime.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, onClick: onClickIconAfter }))] }), after] }));
 }
 
 const tooltipAppearanceDefault = {
     defaultPrimary: {
         fill: 'surfacePrimary',
         fillHover: 'surfaceHoverPrimary',
-        borderColor: 'surfaceBorderPrimary',
         titleColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderPrimary',
         textColor: 'surfaceTextPrimary',
     },
 };
@@ -608,6 +537,31 @@ const tooltipAppearanceRequire = {
     },
 };
 
+const tooltipAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+};
+
 const tooltipAppearanceSize = {
     sizeL: {
         size: 'l',
@@ -655,6 +609,7 @@ const tooltipAppearance = {
     ...tooltipAppearanceSize,
     ...tooltipAppearanceDisabled,
     ...tooltipAppearanceRequire,
+    ...tooltipAppearanceShape,
     ...tooltipAppearanceStyle,
     ...tooltipAppearanceError,
     ...tooltipAppearanceSuccess,
@@ -672,9 +627,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
     const tooltipTimeoutHideRef = React.useRef(null);
     const tooltipTimeoutShowRef = React.useRef(null);
     const isTooltipCloseAnimationInProgressRef = React.useRef(false);
-    // TODO: rename to open?
     const [isTooltipVisible, setIsTooltipVisible] = React.useState(initialIsVisible);
-    // TODO: or rename to show/hide?
     const openTooltip = React.useCallback(() => {
         if (!isTooltipCloseAnimationInProgressRef.current) {
             if (tooltipTimeoutHideRef.current) {
@@ -689,10 +642,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
         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(() => {
-            // @ts-expect-error
             setIsTooltipVisible((prevState) => {
                 const newState = false;
                 if (prevState === true) {
@@ -716,7 +666,6 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, tooltipConfig);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { alignClass, alignDirectionClass, alignmentClass, alignPosition, fillClass, titleColor, titleSize, titleWeight, borderColorClass, borderTypeClass, borderWidthClass, textColor, textSize, textWeight, arrowPosition, centeringClass, elevationClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
-    // @ts-expect-error
     const { styles: tooltipStyles } = useStyles.useStyles(props);
     return (jsxRuntime.jsxs("div", { className: clsx(className, 'tooltip', !isTooltipDisableState
             ? isTooltipVisible
@@ -728,14 +677,14 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
 const iconAppearanceAccent = {
     accentPrimary: {
         fill: 'accentPrimary',
-        fillHover: 'accentHover',
+        fillHover: 'accentHoverPrimary',
         borderColor: 'accentBorderPrimary',
         badgeAppearance: 'surfacePrimary',
         iconFill: 'accentItemPrimary',
     },
     accentSecondary: {
         fill: 'accentPrimary',
-        fillHover: 'accentHover',
+        fillHover: 'accentHoverPrimary',
         borderColor: 'accentBorderPrimary',
         iconFill: 'accentItemPrimary',
     },
@@ -744,7 +693,7 @@ const iconAppearanceAccent = {
 const iconAppearanceDanger = {
     dangerPrimary: {
         fill: 'dangerPrimary',
-        fillHover: 'dangerHover',
+        fillHover: 'dangerHoverPrimary',
         borderColor: 'dangerBorderSecondary',
         badgeAppearance: 'surfacePrimary',
         iconFill: 'dangerItemPrimary',
@@ -753,8 +702,8 @@ const iconAppearanceDanger = {
 
 const iconAppearanceDisabled = {
     disabledPrimary: {
-        fill: 'surfaceDisabled',
-        borderColor: 'surfaceBorderDisabled',
+        fill: 'surfacePrimary',
+        borderColor: 'surfaceBorderPrimary',
         badgeAppearance: 'surfacePrimary',
         iconFill: 'surfaceItemQuaternary',
     },
@@ -763,44 +712,35 @@ const iconAppearanceDisabled = {
 const iconAppearanceError = {
     errorPrimary: {
         fill: 'errorPrimary',
-        fillHover: 'errorHover',
+        fillHover: 'errorHoverPrimary',
         borderColor: 'errorBorderPrimary',
         badgeAppearance: 'surfacePrimary',
         iconFill: 'errorItemPrimary',
     },
 };
 
+const iconAppearanceExtra = {
+    extraPrimary: {
+        fill: 'extraPrimary',
+        fillHover: 'extraHoverPrimary',
+        borderColor: 'extraBorderQuaternary',
+        badgeAppearance: 'surfacePrimary',
+        iconFill: 'extraItemPrimary',
+    },
+};
+
 const iconAppearanceInfo = {
     infoPrimary: {
         fill: 'infoPrimary',
-        borderColor: 'infoBorderDisabled',
+        borderColor: 'infoBorderPrimary',
         badgeAppearance: 'surfacePrimary',
         iconFill: 'infoItemPrimary',
     },
     infoSecondary: {
         fill: 'accentPrimary',
-        fillHover: 'accentPrimaryHover',
+        fillHover: 'accentHoverPrimary',
         borderColor: 'accentBorderPrimary',
-    },
-};
-
-const iconAppearancePrimary = {
-    primaryPrimary: {
-        fill: 'primaryPrimary',
-        fillHover: 'primaryPrimaryHover',
-        borderColor: 'primaryBorderQuaternary',
-        badgeAppearance: 'surfacePrimary',
-        iconFill: 'primaryItemPrimary',
-    },
-};
-
-const iconAppearanceSecondary = {
-    secondaryPrimary: {
-        fill: 'secondaryPrimary',
-        fillHover: 'secondaryHoverPrimary',
-        borderColor: 'secondaryBorderQuaternary',
-        badgeAppearance: 'surfacePrimary',
-        iconFill: 'secondaryItemPrimary',
+        iconFill: 'infoItemSecondary',
     },
 };
 
@@ -832,146 +772,156 @@ const iconAppearanceShape = {
 const iconAppearanceSize = {
     size12_12: {
         fillSize: '12',
-        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
         iconSize: '12',
     },
     size14_12: {
         fillSize: '14',
-        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
         iconSize: '12',
     },
     size14_14: {
         fillSize: '14',
-        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
         iconSize: '14',
     },
     size16_12: {
         fillSize: '16',
-        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
         iconSize: '12',
     },
     size16_14: {
         fillSize: '16',
-        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
         iconSize: '14',
     },
     size16_16: {
         fillSize: '16',
-        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
         iconSize: '16',
     },
     size20_12: {
         fillSize: '20',
-        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
         iconSize: '12',
     },
     size20_14: {
         fillSize: '20',
-        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
         iconSize: '14',
     },
     size20_16: {
         fillSize: '20',
-        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
         iconSize: '16',
     },
     size20_20: {
         fillSize: '20',
-        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
         iconSize: '20',
     },
     size24_12: {
         fillSize: '24',
-        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
         iconSize: '12',
     },
     size24_14: {
         fillSize: '24',
-        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
         iconSize: '14',
     },
     size24_16: {
         fillSize: '24',
-        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
         iconSize: '16',
     },
     size24_20: {
         fillSize: '24',
-        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
         iconSize: '20',
     },
     size24_24: {
         fillSize: '24',
-        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
         iconSize: '24',
     },
     size32_12: {
         fillSize: '32',
-        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
         iconSize: '12',
     },
     size32_14: {
         fillSize: '32',
-        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
         iconSize: '14',
     },
     size32_16: {
         fillSize: '32',
-        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
         iconSize: '16',
     },
     size32_20: {
         fillSize: '32',
-        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
         iconSize: '20',
     },
     size32_24: {
         fillSize: '32',
-        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
         iconSize: '24',
     },
     size32_32: {
         fillSize: '32',
-        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
         iconSize: '32',
     },
     size40_12: {
         fillSize: '40',
-        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
         iconSize: '12',
     },
     size40_14: {
         fillSize: '40',
-        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
         iconSize: '14',
     },
     size40_16: {
         fillSize: '40',
-        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
         iconSize: '16',
     },
     size40_20: {
         fillSize: '40',
-        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
         iconSize: '20',
     },
     size40_24: {
         fillSize: '40',
-        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
         iconSize: '24',
     },
     size40_32: {
         fillSize: '40',
-        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
         iconSize: '32',
     },
     size40_40: {
         fillSize: '40',
-        badgeAppearanceSize: 'sizeXXS',
+        badgeSize: 'xxs',
         iconSize: '40',
     },
 };
 
+const iconAppearanceSpecial = {
+    specialPrimary: {
+        fill: 'specialPrimary',
+        fillHover: 'specialHoverPrimary',
+        borderColor: 'specialBorderQuaternary',
+        badgeAppearance: 'surfacePrimary',
+        iconFill: 'specialItemPrimary',
+    },
+};
+
 const iconAppearanceStyle = {
     solid: {
         borderColor: 'none',
@@ -989,8 +939,8 @@ const iconAppearanceStyle = {
 const iconAppearanceSuccess = {
     successPrimary: {
         fill: 'successPrimary',
-        fillHover: 'successHover',
-        borderColor: 'successBorderHover',
+        fillHover: 'successHoverPrimary',
+        borderColor: 'successBorderPrimary',
         badgeAppearance: 'surfacePrimary',
         iconFill: 'successItemPrimary',
     },
@@ -999,41 +949,35 @@ const iconAppearanceSuccess = {
 const iconAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
-        fillHover: 'surfaceSecondary',
+        fillHover: 'surfaceHoverSecondary',
         borderColor: 'surfaceBorderTertiary',
         badgeAppearance: 'surfacePrimary',
         iconFill: 'surfaceItemPrimary',
     },
     surfaceQuaternary: {
         fill: 'surfaceQuaternary',
-        fillHover: 'surfaceHover',
+        fillHover: 'surfaceHoverQuaternary',
         badgeAppearance: 'accentPrimary',
         iconFill: 'surfaceItemPrimary',
     },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
-        fillHover: 'surfaceSecondaryHover',
+        fillHover: 'surfaceHoverSecondary',
         badgeAppearance: 'accentPrimary solid rounded',
         iconFill: 'surfaceItemPrimary',
     },
     surfaceTertiary: {
         fill: 'surfaceTertiary',
-        fillHover: 'surfaceTertiaryHover',
+        fillHover: 'surfaceHoverTertiary',
         badgeAppearance: 'accentPrimary',
         iconFill: 'surfaceItemPrimary',
     },
 };
 
 const iconAppearanceWarning = {
-    warning: {
-        fill: 'warningPrimary',
-        fillHover: 'warningHover',
-        badgeAppearance: 'surfacePrimary',
-        iconFill: 'warningItemPrimary',
-    },
     warningPrimary: {
         fill: 'warningPrimary',
-        fillHover: 'warningHover',
+        fillHover: 'warningHoverPrimary',
         borderColor: 'warningBorderSecondary',
         badgeAppearance: 'surfacePrimary',
         iconFill: 'warningItemPrimary',
@@ -1049,8 +993,8 @@ const iconAppearance = {
     ...iconAppearanceDanger,
     ...iconAppearanceError,
     ...iconAppearanceInfo,
-    ...iconAppearancePrimary,
-    ...iconAppearanceSecondary,
+    ...iconAppearanceSpecial,
+    ...iconAppearanceExtra,
     ...iconAppearanceSuccess,
     ...iconAppearanceSurface,
     ...iconAppearanceWarning,
@@ -1063,11 +1007,10 @@ const iconConfig = {
     },
 };
 const Icon = urlWithAssetPrefix.urlWithAssetPrefix(React.forwardRef(function Icon(props, ref) {
-    // TODO: Tooltip doesn't work that anymore
-    // const [isTooltipVisible, setIsTooltipVisible] = useState(false)
     const { id, appearance, className, dataTestId, dataTour, width, height, badgeClass, href, imageSrc, link, linkRel, linkTarget, notification, saveFillStroke, showTooltip, SvgImage, before, after, isActive, isDisabled, isSkeleton, onClick, onMouseEnter, onMouseLeave, } = props;
     const ImageComponent = React.useMemo(() => {
         if (SvgImage) {
+            const SvgComponent = SvgImage;
             const sizes = {};
             if (width) {
                 sizes.width = width;
@@ -1075,7 +1018,7 @@ const Icon = urlWithAssetPrefix.urlWithAssetPrefix(React.forwardRef(function Ico
             if (height) {
                 sizes.height = height;
             }
-            return jsxRuntime.jsx(SvgImage, { ...sizes });
+            return jsxRuntime.jsx(SvgComponent, { ...sizes });
         }
         if (imageSrc) {
             if (imageSrc.endsWith('.svg')) {
@@ -1087,11 +1030,10 @@ const Icon = urlWithAssetPrefix.urlWithAssetPrefix(React.forwardRef(function Ico
             return jsxRuntime.jsx("img", { src: imageSrc });
         }
         return null;
-    }, [SvgImage, width, height, imageSrc]);
+    }, [SvgImage, imageSrc, width, height, saveFillStroke]);
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, iconConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator.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
+    const { alignmentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, fillSizeClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, badgeAppearance, badgeShape, badgeSize, badgeTextColor, badgeTextSize, badgeValue, centeringClass, iconFillActiveClass, iconFillActiveHoverClass, iconFillClass, iconFillDisabledClass, iconFillHoverClass, iconSizeClass, shapeClass, shapeStrengthClass, tooltipAppearance, tooltipText, tooltipTextSize, tooltipTitle, tooltipTitleSize, } = propsGenerator;
     const { styles: iconStyles } = useStyles.useStyles(props);
     return (jsxRuntime.jsxs("div", { id: id, className: clsx(className, 'icon', !isActive
             ? fillClass && `fill_${fillClass}`
@@ -1106,7 +1048,7 @@ const Icon = urlWithAssetPrefix.urlWithAssetPrefix(React.forwardRef(function Ico
                 `icon_fill_active_hover_${iconFillActiveHoverClass}`, isDisabled &&
             iconFillDisabledClass &&
             `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-testid": dataTestId, "data-tour": dataTour, 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_${iconSizeClass}`), href: link || href, LinkComponent: "div", rel: linkRel, target: linkTarget, children: [ImageComponent, (badgeValue || notification) && (jsxRuntime.jsx(Badge, { appearance: `${badgeAppearance} ${badgeAppearanceSize}`, className: clsx(badgeClass, 'icon__badge'), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), showTooltip && (jsxRuntime.jsx(Tooltip, { appearance: tooltipAppearance, className: clsx(className, 'icon__tooltip', alignmentClass && `alignment_${alignmentClass}`), title: tooltipTitle, titleSize: tooltipTitleSize, text: tooltipText, textSize: tooltipTextSize }))] }), after] }));
+            `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-testid": dataTestId, "data-tour": dataTour, 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_${iconSizeClass}`), href: link || href, LinkComponent: "div", rel: linkRel, target: linkTarget, children: [ImageComponent, (badgeValue || notification) && (jsxRuntime.jsx(Badge, { appearance: badgeAppearance, className: clsx(badgeClass, 'icon__badge'), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), showTooltip && (jsxRuntime.jsx(Tooltip, { appearance: tooltipAppearance, className: clsx(className, 'icon__tooltip', alignmentClass && `alignment_${alignmentClass}`), title: tooltipTitle, titleSize: tooltipTitleSize, text: tooltipText, textSize: tooltipTextSize }))] }), after] }));
 }));
 const removeFillStroke = (code) => {
     return code