@itcase/ui 1.9.36 → 1.9.37

package/dist/{Icon_es_Banbw98_.js → Icon_es_BoUAbwyu.js}

@@ -6,17 +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_Bt-Bhy3t.js';
-import { T as Text } from './Text_es_DaYcLe4H.js';
+import { a as LinkWrapper } from './Link_es_OpkyzWe6.js';
+import { T as Text } from './Text_es_DR4Alx-v.js';
 
 const badgeAppearanceAccent = {
-    accent: {
-        fill: 'accentPrimary',
-        borderColor: 'accentBorderQuaternary',
-        textColor: 'accentTextPrimary',
-        dotFill: 'accentItemPrimary',
-        iconFill: 'accentItemPrimary',
-    },
     accentPrimary: {
         fill: 'accentPrimary',
         borderColor: 'accentBorderQuaternary',
@@ -39,7 +32,7 @@ const badgeAppearanceAccent = {
         iconFill: 'accentItemQuaternary',
     },
     accentTertiary: {
-        fill: 'accentTeriary',
+        fill: 'accentTertiary',
         borderColor: 'accentBorderSecondary',
         textColor: 'accentTextSecondary',
         dotFill: 'accentItemSecondary',
@@ -48,13 +41,6 @@ const badgeAppearanceAccent = {
 };
 
 const badgeAppearanceDanger = {
-    danger: {
-        fill: 'dangerPrimary',
-        borderColor: 'dangerBorderPrimary',
-        textColor: 'dangerTextSecondary',
-        dotFill: 'dangerItemPrimary',
-        iconFill: 'dangerItemPrimary',
-    },
     dangerPrimary: {
         fill: 'dangerPrimary',
         borderColor: 'dangerBorderPrimary',
@@ -65,37 +51,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',
@@ -112,40 +94,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',
@@ -209,6 +157,16 @@ const badgeAppearanceSize = {
     },
 };
 
+const badgeAppearanceSpecial = {
+    specialPrimary: {
+        fill: 'specialPrimary',
+        borderColor: 'specialBorderSecondary',
+        textColor: 'specialTextPrimary',
+        dotFill: 'specialItemPrimary',
+        iconFill: 'specialItemPrimary',
+    },
+};
+
 const badgeAppearanceStyle = {
     solid: {
         borderColor: 'none',
@@ -224,13 +182,6 @@ const badgeAppearanceStyle = {
 };
 
 const badgeAppearanceSuccess = {
-    success: {
-        fill: 'successPrimary',
-        borderColor: 'successBorderPrimary',
-        textColor: 'successTextPrimary',
-        dotFill: 'successItemPrimary',
-        iconFill: 'successItemPrimary',
-    },
     successPrimary: {
         fill: 'successPrimary',
         borderColor: 'successBorderPrimary',
@@ -251,7 +202,7 @@ const badgeAppearanceSurface = {
     surfaceQuaternary: {
         fill: 'accentPrimary',
         borderColor: 'surfaceBorderPrimary',
-        textColor: 'surfaceTextInverse',
+        textColor: 'surfaceTextPrimary',
     },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
@@ -266,13 +217,6 @@ const badgeAppearanceSurface = {
 };
 
 const badgeAppearanceWarning = {
-    warning: {
-        fill: 'warningPrimary',
-        borderColor: 'warningBorderPrimary',
-        textColor: 'warningTextSecondary',
-        dotFill: 'warningItemPrimary',
-        iconFill: 'warningItemPrimary',
-    },
     warningPrimary: {
         fill: 'warningPrimary',
         borderColor: 'warningBorderPrimary',
@@ -290,8 +234,8 @@ const badgeAppearance = {
     ...badgeAppearanceDanger,
     ...badgeAppearanceError,
     ...badgeAppearanceInfo,
-    ...badgeAppearancePrimary,
-    ...badgeAppearanceSecondary,
+    ...badgeAppearanceSpecial,
+    ...badgeAppearanceExtra,
     ...badgeAppearanceSuccess,
     ...badgeAppearanceDisabled,
     ...badgeAppearanceSurface,
@@ -327,10 +271,6 @@ function Badge(props) {
 }
 
 const titleAppearanceAccent = {
-    accent: {
-        fill: 'accentPrimary',
-        fillHover: 'accentHoverPrimary',
-    },
     accentPrimary: {
         fill: 'accentPrimary',
         fillHover: 'accentHoverPrimary',
@@ -342,56 +282,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',
     },
 };
 
@@ -401,25 +338,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',
     },
 };
 
@@ -468,6 +393,13 @@ const titleAppearanceSize = {
     },
 };
 
+const titleAppearanceSpecial = {
+    specialPrimary: {
+        fill: 'specialPrimary',
+        fillHover: 'specialHoverPrimary',
+    },
+};
+
 const titleAppearanceStyle = {
     solid: {},
     outlined: {
@@ -480,54 +412,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 = {
@@ -540,17 +472,16 @@ 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(appearance, titleConfig, isDisabled);
     const propsGenerator = 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;
+    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;
     // @ts-expect-error
     const { styles: titleStyles, wrapper: titleWrapperStyles } = useStyles(props);
-    // Element type (h1, h2, ..., h6)
     const Tag = useMemo(() => {
         if (tag) {
             return tag;
         }
         return size ? size : 'span';
     }, [tag, size]);
-    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 &&
+    return (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 &&
@@ -564,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, 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] }));
+            `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, 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, onClick: onClickIconBefore })), 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, onClick: onClickIconAfter }))] }), after] }));
 }
 
 const tooltipAppearanceDefault = {
     defaultPrimary: {
         fill: 'surfacePrimary',
         fillHover: 'surfaceHoverPrimary',
-        borderColor: 'surfaceBorderPrimary',
         titleColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderPrimary',
         textColor: 'surfaceTextPrimary',
     },
 };
@@ -670,9 +601,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
     const tooltipTimeoutHideRef = useRef(null);
     const tooltipTimeoutShowRef = useRef(null);
     const isTooltipCloseAnimationInProgressRef = useRef(false);
-    // TODO: rename to open?
     const [isTooltipVisible, setIsTooltipVisible] = useState(initialIsVisible);
-    // TODO: or rename to show/hide?
     const openTooltip = useCallback(() => {
         if (!isTooltipCloseAnimationInProgressRef.current) {
             if (tooltipTimeoutHideRef.current) {
@@ -687,10 +616,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) {
@@ -726,14 +652,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',
     },
@@ -742,7 +668,7 @@ const iconAppearanceAccent = {
 const iconAppearanceDanger = {
     dangerPrimary: {
         fill: 'dangerPrimary',
-        fillHover: 'dangerHover',
+        fillHover: 'dangerHoverPrimary',
         borderColor: 'dangerBorderSecondary',
         badgeAppearance: 'surfacePrimary',
         iconFill: 'dangerItemPrimary',
@@ -751,8 +677,8 @@ const iconAppearanceDanger = {
 
 const iconAppearanceDisabled = {
     disabledPrimary: {
-        fill: 'surfaceDisabled',
-        borderColor: 'surfaceBorderDisabled',
+        fill: 'surfacePrimary',
+        borderColor: 'surfaceBorderPrimary',
         badgeAppearance: 'surfacePrimary',
         iconFill: 'surfaceItemQuaternary',
     },
@@ -761,44 +687,45 @@ 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',
+        iconFill: 'infoItemSecondary',
     },
 };
 
-const iconAppearancePrimary = {
-    primaryPrimary: {
-        fill: 'primaryPrimary',
-        fillHover: 'primaryPrimaryHover',
-        borderColor: 'primaryBorderQuaternary',
+const iconAppearanceSpecial = {
+    specialPrimary: {
+        fill: 'specialPrimary',
+        fillHover: 'specialPrimaryHover',
+        borderColor: 'specialBorderQuaternary',
         badgeAppearance: 'surfacePrimary',
-        iconFill: 'primaryItemPrimary',
-    },
-};
-
-const iconAppearanceSecondary = {
-    secondaryPrimary: {
-        fill: 'secondaryPrimary',
-        fillHover: 'secondaryHoverPrimary',
-        borderColor: 'secondaryBorderQuaternary',
-        badgeAppearance: 'surfacePrimary',
-        iconFill: 'secondaryItemPrimary',
+        iconFill: 'specialItemPrimary',
     },
 };
 
@@ -830,142 +757,142 @@ 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',
     },
 };
@@ -987,8 +914,8 @@ const iconAppearanceStyle = {
 const iconAppearanceSuccess = {
     successPrimary: {
         fill: 'successPrimary',
-        fillHover: 'successHover',
-        borderColor: 'successBorderHover',
+        fillHover: 'successHoverPrimary',
+        borderColor: 'successBorderPrimary',
         badgeAppearance: 'surfacePrimary',
         iconFill: 'successItemPrimary',
     },
@@ -997,26 +924,26 @@ 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',
     },
@@ -1025,13 +952,13 @@ const iconAppearanceSurface = {
 const iconAppearanceWarning = {
     warning: {
         fill: 'warningPrimary',
-        fillHover: 'warningHover',
+        fillHover: 'warningHoverPrimary',
         badgeAppearance: 'surfacePrimary',
         iconFill: 'warningItemPrimary',
     },
     warningPrimary: {
         fill: 'warningPrimary',
-        fillHover: 'warningHover',
+        fillHover: 'warningHoverPrimary',
         borderColor: 'warningBorderSecondary',
         badgeAppearance: 'surfacePrimary',
         iconFill: 'warningItemPrimary',
@@ -1047,8 +974,8 @@ const iconAppearance = {
     ...iconAppearanceDanger,
     ...iconAppearanceError,
     ...iconAppearanceInfo,
-    ...iconAppearancePrimary,
-    ...iconAppearanceSecondary,
+    ...iconAppearanceSpecial,
+    ...iconAppearanceExtra,
     ...iconAppearanceSuccess,
     ...iconAppearanceSurface,
     ...iconAppearanceWarning,
@@ -1061,8 +988,6 @@ const iconConfig = {
     },
 };
 const Icon = 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 = useMemo(() => {
         if (SvgImage) {
@@ -1085,10 +1010,10 @@ const Icon = urlWithAssetPrefix(React.forwardRef(function Icon(props, ref) {
             return jsx("img", { src: imageSrc });
         }
         return null;
-    }, [SvgImage, width, height, imageSrc]);
+    }, [SvgImage, imageSrc, width, height, saveFillStroke]);
     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;
+    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;
     // @ts-expect-error - TODO: сделать useStyles на ts
     const { styles: iconStyles } = useStyles(props);
     return (jsxs("div", { id: id, className: clsx(className, 'icon', !isActive
@@ -1104,7 +1029,7 @@ const Icon = urlWithAssetPrefix(React.forwardRef(function Icon(props, ref) {
                 `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, 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, { appearance: `${badgeAppearance} ${badgeAppearanceSize}`, className: clsx(badgeClass, 'icon__badge'), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), showTooltip && (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, 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, { appearance: badgeAppearance, className: clsx(badgeClass, 'icon__badge'), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), showTooltip && (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