@itcase/ui 1.9.36 → 1.9.38

package/dist/{Label_es_DuDL0-3C.js → Label_es_CbXFs_ts.js}

@@ -4,21 +4,21 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
-import { I as Icon, T as Tooltip } from './Icon_es_Banbw98_.js';
-import { T as Text } from './Text_es_DaYcLe4H.js';
+import { I as Icon, T as Tooltip } from './Icon_es_DNVHNKFK.js';
+import { T as Text } from './Text_es_B85LGfjW.js';
 
 const labelAppearanceAccent = {
     accentMutedPrimary: {
         fill: 'accentTertiary',
-        borderColor: 'accentBorderSecondary',
         labelTextColor: 'accentTextQuaternary',
+        borderColor: 'accentBorderSecondary',
         iconAfterFillIcon: 'accentItemQuaternary',
         iconBeforeFillIcon: 'accentItemQuaternary',
     },
     accentPrimary: {
         fill: 'accentPrimary',
-        borderColor: 'accentBorderSecondary',
         labelTextColor: 'accentTextPrimary',
+        borderColor: 'accentBorderSecondary',
         iconAfterFillIcon: 'accentItemPrimary',
         iconBeforeFillIcon: 'accentItemPrimary',
     },
@@ -46,13 +46,6 @@ const labelAppearanceDanger = {
 };
 
 const labelAppearanceDisabled = {
-    disabledMutedPrimary: {
-        fill: 'disabledMuted',
-        labelTextColor: 'disabledMutedTextPrimary',
-        borderColor: 'disabledMutedBorderSecondary',
-        iconAfterFillIcon: 'disabledMutedItemPrimary',
-        iconBeforeFillIcon: 'disabledMutedItemPrimary',
-    },
     disabledPrimary: {
         fill: 'disabledPrimary',
         labelTextColor: 'disabledTextPrimary',
@@ -79,6 +72,23 @@ const labelAppearanceError = {
     },
 };
 
+const labelAppearanceExtra = {
+    extraMutedPrimary: {
+        fill: 'extraDisabled',
+        labelTextColor: 'extraTextQuaternary',
+        borderColor: 'extraBorderPrimary',
+        iconAfterFillIcon: 'extraItemQuaternary',
+        iconBeforeFillIcon: 'extraItemQuaternary',
+    },
+    extraPrimary: {
+        fill: 'extraPrimary',
+        labelTextColor: 'extraTextPrimary',
+        borderColor: 'extraBorderPrimary',
+        iconAfterFillIcon: 'extraItemPrimary',
+        iconBeforeFillIcon: 'extraItemPrimary',
+    },
+};
+
 const labelAppearanceGradient = {
     gradientPrimary: {
         fill: 'gradientPrimaryDiagonal',
@@ -90,13 +100,6 @@ const labelAppearanceGradient = {
 };
 
 const labelAppearanceInfo = {
-    infoMutedPrimary: {
-        fill: 'infoMuted',
-        labelTextColor: 'infoMutedTextPrimary',
-        borderColor: 'infoMutedBorderSecondary',
-        iconAfterFillIcon: 'infoMutedItemPrimary',
-        iconBeforeFillIcon: 'infoMutedItemPrimary',
-    },
     infoPrimary: {
         fill: 'infoPrimary',
         labelTextColor: 'infoTextPrimary',
@@ -113,40 +116,6 @@ const labelAppearanceInfo = {
     },
 };
 
-const labelAppearancePrimary = {
-    primaryMutedPrimary: {
-        fill: 'primaryDisabled',
-        labelTextColor: 'primaryTextSecondary',
-        borderColor: 'primaryBorderTertiary',
-        iconAfterFillIcon: 'primaryItemSecondary',
-        iconBeforeFillIcon: 'primaryItemSecondary',
-    },
-    primaryPrimary: {
-        fill: 'primaryDisabled',
-        labelTextColor: 'primaryTextSecondary',
-        borderColor: 'primaryBorderTertiary',
-        iconAfterFillIcon: 'primaryItemSecondary',
-        iconBeforeFillIcon: 'primaryItemSecondary',
-    },
-};
-
-const labelAppearanceSecondary = {
-    secondaryMutedPrimary: {
-        fill: 'secondaryDisabled',
-        labelTextColor: 'secondaryTextQuaternary',
-        borderColor: 'secondaryBorderDisabled',
-        iconAfterFillIcon: 'secondaryItemQuaternary',
-        iconBeforeFillIcon: 'secondaryItemQuaternary',
-    },
-    secondaryPrimary: {
-        fill: 'secondaryPrimary',
-        labelTextColor: 'secondaryTextPrimary',
-        borderColor: 'secondaryBorderPrimary',
-        iconAfterFillIcon: 'secondaryItemPrimary',
-        iconBeforeFillIcon: 'secondaryItemPrimary',
-    },
-};
-
 const labelAppearanceShape = {
     circular: {
         shape: 'circular',
@@ -154,21 +123,21 @@ const labelAppearanceShape = {
     rounded: {
         shape: 'rounded',
     },
-    roundedS: {
-        shape: 'rounded',
-        shapeStrength: '0_5m',
-    },
-    roundedM: {
+    roundedXL: {
         shape: 'rounded',
-        shapeStrength: '1m',
+        shapeStrength: '2m',
     },
     roundedL: {
         shape: 'rounded',
         shapeStrength: '1_5m',
     },
-    roundedXL: {
+    roundedM: {
         shape: 'rounded',
-        shapeStrength: '2m',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
     },
 };
 
@@ -176,58 +145,75 @@ const labelAppearanceSize = {
     sizeXXL: {
         size: 'xxl',
         labelTextSize: 'xxl',
-        iconAfterFillSize: 24,
-        iconAfterSize: 24,
-        iconBeforeFillSize: 24,
-        iconBeforeSize: 24,
+        iconAfterFillSize: '24',
+        iconAfterSize: '24',
+        iconBeforeFillSize: '24',
+        iconBeforeSize: '24',
     },
     sizeXL: {
         size: 'xl',
         labelTextSize: 'l',
-        iconAfterFillSize: 24,
-        iconAfterSize: 24,
-        iconBeforeFillSize: 24,
-        iconBeforeSize: 24,
+        iconAfterFillSize: '24',
+        iconAfterSize: '24',
+        iconBeforeFillSize: '24',
+        iconBeforeSize: '24',
     },
     sizeL: {
         size: 'l',
         labelTextSize: 'l',
-        iconAfterFillSize: 24,
-        iconAfterSize: 24,
-        iconBeforeFillSize: 24,
-        iconBeforeSize: 24,
+        iconAfterFillSize: '24',
+        iconAfterSize: '24',
+        iconBeforeFillSize: '24',
+        iconBeforeSize: '24',
     },
     sizeM: {
         size: 'm',
         labelTextSize: 'm',
-        iconAfterFillSize: 24,
-        iconAfterSize: 24,
-        iconBeforeFillSize: 24,
-        iconBeforeSize: 24,
+        iconAfterFillSize: '24',
+        iconAfterSize: '24',
+        iconBeforeFillSize: '24',
+        iconBeforeSize: '24',
     },
     sizeS: {
         size: 's',
         labelTextSize: 's',
-        iconAfterFillSize: 20,
-        iconAfterSize: 20,
-        iconBeforeFillSize: 20,
-        iconBeforeSize: 20,
+        iconAfterFillSize: '20',
+        iconAfterSize: '20',
+        iconBeforeFillSize: '20',
+        iconBeforeSize: '20',
     },
     sizeXS: {
         size: 'xs',
         labelTextSize: 'xs',
-        iconAfterFillSize: 16,
-        iconAfterSize: 16,
-        iconBeforeFillSize: 16,
-        iconBeforeSize: 16,
+        iconAfterFillSize: '16',
+        iconAfterSize: '16',
+        iconBeforeFillSize: '16',
+        iconBeforeSize: '16',
     },
     sizeXXS: {
         size: 'xxs',
         labelTextSize: 'xs',
-        iconAfterFillSize: 14,
-        iconAfterSize: 14,
-        iconBeforeFillSize: 14,
-        iconBeforeSize: 14,
+        iconAfterFillSize: '14',
+        iconAfterSize: '14',
+        iconBeforeFillSize: '14',
+        iconBeforeSize: '14',
+    },
+};
+
+const labelAppearanceSpecial = {
+    specialMutedPrimary: {
+        fill: 'specialDisabled',
+        labelTextColor: 'specialTextSecondary',
+        borderColor: 'specialBorderTertiary',
+        iconAfterFillIcon: 'specialItemSecondary',
+        iconBeforeFillIcon: 'specialItemSecondary',
+    },
+    specialPrimary: {
+        fill: 'specialDisabled',
+        labelTextColor: 'specialTextSecondary',
+        borderColor: 'specialBorderTertiary',
+        iconAfterFillIcon: 'specialItemSecondary',
+        iconBeforeFillIcon: 'specialItemSecondary',
     },
 };
 
@@ -277,18 +263,14 @@ const labelAppearanceSurface = {
         iconAfterFillIcon: 'surfaceItemPrimary',
         iconBeforeFillIcon: 'surfaceItemPrimary',
     },
-    surfaceSecondary: {
-        fill: 'surfaceSecondary',
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
         labelTextColor: 'surfaceTextPrimary',
     },
     surfaceTertiary: {
         fill: 'surfaceTertiary',
         labelTextColor: 'surfaceTextPrimary',
     },
-    surfaceQuaternary: {
-        fill: 'surfaceQuaternary',
-        labelTextColor: 'surfaceTextInverse',
-    },
 };
 
 const labelAppearanceWarning = {
@@ -318,8 +300,8 @@ const labelAppearance = {
     ...labelAppearanceDanger,
     ...labelAppearanceError,
     ...labelAppearanceInfo,
-    ...labelAppearancePrimary,
-    ...labelAppearanceSecondary,
+    ...labelAppearanceSpecial,
+    ...labelAppearanceExtra,
     ...labelAppearanceSuccess,
     ...labelAppearanceSurface,
     ...labelAppearanceWarning,
@@ -332,7 +314,7 @@ const labelConfig = {
     },
 };
 function Label(props) {
-    const { dataTestId, dataTour, className, appearance, label, isDisabled, cursor, tooltipContent, before, after, isSkeleton, onClick, children, } = props;
+    const { appearance, className, dataTestId, dataTour, label, cursor, tooltipContent, before, after, isDisabled, isSkeleton, onClick, children, } = props;
     const tooltipRef = useRef(null);
     const onMouseEnterLabel = useCallback(() => {
         tooltipRef.current?.openTooltip();
@@ -342,10 +324,9 @@ function Label(props) {
     }, []);
     const appearanceConfig = useAppearanceConfig(appearance, labelConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    const { alignClass, fillClass, fillHoverClass, borderColorClass, borderTypeClass, labelTextColor, labelTextColorHover, labelTextSize, labelTextWeight, labelTextWrap, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, shapeClass, shapeStrengthClass, sizeClass, tooltipAlignment, tooltipAppearance, tooltipArrowPosition, tooltipText, tooltipTextSize, tooltipTextWeight, tooltipTitle, tooltipTitleSize, tooltipTitleWeight, widthClass, wrapClass, } = propsGenerator;
-    // @ts-expect-error
+    const { alignClass, fillClass, fillHoverClass, labelTextColor, labelTextColorHover, labelTextSize, labelTextWeight, labelTextWrap, borderColorClass, borderTypeClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, shapeClass, shapeStrengthClass, sizeClass, tooltipAlignment, tooltipAppearance, tooltipArrowPosition, tooltipText, tooltipTextSize, tooltipTextWeight, tooltipTitle, tooltipTitleSize, tooltipTitleWeight, widthClass, wrapClass, } = propsGenerator;
     const { styles: labelStyles } = useStyles(props);
-    return (jsxs("div", { className: clsx(className, 'label', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, sizeClass && `label_size_${sizeClass}`, wrapClass && `word-wrap_${wrapClass}`, widthClass && `label_width_${widthClass}`, alignClass && `align_${alignClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, isSkeleton && `label_skeleton`, onClick && (cursor || 'cursor_type_pointer')), "data-testid": dataTestId, "data-tour": dataTour, style: labelStyles, onClick: onClick, onMouseEnter: onMouseEnterLabel, onMouseLeave: onMouseLeaveLabel, children: [before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { className: clsx('label__icon_before'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), jsxs("div", { className: "label__inner", children: [typeof label === 'string' ? (jsx(Text, { className: "label__text", size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })) : (jsx("div", { className: "label__text", children: label })), children, tooltipContent && (jsx(Tooltip, { className: "label__tooltip", ref: tooltipRef, appearance: tooltipAppearance, alignment: tooltipAlignment, title: tooltipTitle, titleSize: tooltipTitleSize, titleWeight: tooltipTitleWeight, text: tooltipText, textSize: tooltipTextSize, textWeight: tooltipTextWeight, arrowPosition: tooltipArrowPosition, children: tooltipContent }))] }), (iconAfter || iconAfterSrc) && (jsx(Icon, { className: clsx('label__icon_after'), fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), after] }));
+    return (jsxs("div", { className: clsx(className, 'label', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, sizeClass && `label_size_${sizeClass}`, wrapClass && `word-wrap_${wrapClass}`, widthClass && `label_width_${widthClass}`, alignClass && `align_${alignClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, isSkeleton && `label_skeleton`, onClick && (cursor || 'cursor_type_pointer')), "data-testid": dataTestId, "data-tour": dataTour, style: labelStyles, onClick: onClick, onMouseEnter: onMouseEnterLabel, onMouseLeave: onMouseLeaveLabel, children: [before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { className: clsx('label__icon_before'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), jsxs("div", { className: "label__inner", children: [typeof label === 'string' ? (jsx(Text, { className: "label__text", size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })) : (jsx("div", { className: "label__text", children: label })), children, tooltipContent && (jsx(Tooltip, { appearance: tooltipAppearance, className: "label__tooltip", ref: tooltipRef, alignment: tooltipAlignment, title: tooltipTitle, titleSize: tooltipTitleSize, titleWeight: tooltipTitleWeight, text: tooltipText, textSize: tooltipTextSize, textWeight: tooltipTextWeight, arrowPosition: tooltipArrowPosition, children: tooltipContent }))] }), (iconAfter || iconAfterSrc) && (jsx(Icon, { className: clsx('label__icon_after'), fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), after] }));
 }
 
 export { Label as L, labelAppearance as a, labelConfig as l };

package/dist/{Link_cjs_DqNtNI23.js → Link_cjs_DXBqPjwm.js}

@@ -8,89 +8,71 @@ var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDe
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
 
 const linkAppearanceAccent = {
-    accent: {
-        fill: 'accentPrimary',
-        fillHover: 'accentPrimaryHover',
-    },
     accentPrimary: {
         fill: 'accentPrimary',
-        fillHover: 'accentPrimaryHover',
+        fillHover: 'accentHoverPrimary',
         borderColor: 'accentBorderPrimary',
     },
     accentSecondary: {
         fill: 'accentPrimary',
-        fillHover: 'accentPrimaryHover',
+        fillHover: 'accentHoverPrimary',
         labelTextColor: 'accentTextSecondary',
         labelTextColorHover: 'accentTextSecondary',
         borderColor: 'accentBorderPrimary',
-        loaderItemFill: 'accentItemPrimary',
     },
 };
 
 const linkAppearanceDanger = {
-    danger: {
+    dangerPrimary: {
         fill: 'dangerPrimary',
-        fillHover: 'dangerPrimaryHover',
+        fillHover: 'dangerHoverPrimary',
     },
 };
 
 const linkAppearanceDisabled = {
     disabledPrimary: {
-        fill: 'surfaceFillDisabled',
+        fill: 'surfaceDisabled',
         borderColor: 'errorBorderQuaternary',
-        borderHover: 'errorBorderQuaternary',
         textColor: 'surfaceTextQuaternary',
-        iconBeforeFill: 'errorItemQuaternary',
-        iconClearFill: 'errorItemPrimary',
-        placeholderTextColor: 'surfaceTextQuaternary',
     },
     disabledSecondary: {
         fill: 'surfaceSecondary',
         borderColor: 'surfaceBorderTertiary',
-        borderHover: 'surfaceBorderQuaternary',
-        iconBeforeFill: 'surfaceItemQuaternary',
-        iconClearFill: 'surfaceItemPrimary',
-        placeholderTextColor: 'surfaceTextSecondary',
+        borderColorHover: 'surfaceBorderQuaternary',
     },
 };
 
 const linkAppearanceError = {
-    error: {
+    errorPrimary: {
         fill: 'errorPrimary',
-        fillHover: 'errorPrimaryHover',
+        fillHover: 'errorHoverPrimary',
         labelTextColor: 'errorTextPrimary',
         labelTextColorHover: 'errorTextPrimary',
-        loaderFill: 'errorPrimary',
-        loaderItemFill: 'errorItemPrimary',
+    },
+};
+
+const linkAppearanceExtra = {
+    extraPrimary: {
+        fill: 'extraPrimary',
+        fillHover: 'extraHoverPrimary',
+        labelTextColor: 'extraTextPrimary',
     },
 };
 
 const linkAppearanceInfo = {
-    info: {
+    infoPrimary: {
         fill: 'accentPrimary',
-        fillHover: 'accentPrimaryHover',
+        fillHover: 'accentHoverPrimary',
         labelTextColor: 'accentTextPrimary',
         labelTextColorHover: 'accentTextPrimary',
         borderColor: 'accentBorderPrimary',
-        loaderFill: 'accentPrimary',
-        loaderItemFill: 'accentItemPrimary',
     },
     infoSecondary: {
         fill: 'accentPrimary',
-        fillHover: 'accentPrimaryHover',
+        fillHover: 'accentHoverPrimary',
         labelTextColor: 'accentTextSecondary',
-        labelTextColorHover: 'accentTextSecondary',
+        labelTextColorHover: 'accentTextPrimary',
         borderColor: 'accentBorderPrimary',
-        loaderFill: 'accentPrimary',
-        loaderItemFill: 'accentItemPrimary',
-    },
-};
-
-const linkAppearancePrimary = {
-    primary: {
-        fill: 'primaryPrimary',
-        fillHover: 'primaryPrimaryHover',
-        labelTextColor: 'primaryTextPrimary',
     },
 };
 
@@ -98,27 +80,11 @@ const linkAppearanceRequire = {
     requirePrimary: {
         fill: 'warningTertiary',
         borderColor: 'warningBorderQuaternary',
-        borderHover: 'warningBorderQuaternary',
         textColor: 'surfaceTextPrimary',
-        iconBeforeFill: 'warningItemQuaternary',
-        iconClearFill: 'warningItemPrimary',
-        placeholderTextColor: 'surfaceTextQuaternary',
     },
     requireSecondary: {
         fill: 'surfaceSecondary',
         borderColor: 'surfaceBorderTertiary',
-        borderHover: 'surfaceBorderQuaternary',
-        iconBeforeFill: 'surfaceItemQuaternary',
-        iconClearFill: 'surfaceItemPrimary',
-        placeholderTextColor: 'surfaceTextSecondary',
-    },
-};
-
-const linkAppearanceSecondary = {
-    secondary: {
-        fill: 'secondaryPrimary',
-        fillHover: 'secondaryPrimaryHover',
-        labelTextColor: 'secondaryTextPrimary',
     },
 };
 
@@ -181,66 +147,68 @@ const linkAppearanceSize = {
     },
 };
 
-const linkAppearanceStyle = {
-    full: {
-        borderColor: '0',
+const linkAppearanceSpecial = {
+    specialPrimary: {
+        fill: 'specialPrimary',
+        fillHover: 'specialHoverPrimary',
+        labelTextColor: 'specialTextPrimary',
     },
-    ghost: {
-        fill: 'none',
-        borderColor: '0',
+};
+
+const linkAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
     },
     outlined: {
         fill: 'none',
     },
-    solid: {
-        borderColor: '0',
+    full: {
+        borderColor: 'none',
+    },
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
     },
 };
 
 const linkAppearanceSuccess = {
-    success: {
+    successPrimary: {
         fill: 'successPrimary',
-        fillHover: 'successPrimaryHover',
+        fillHover: 'successHoverPrimary',
         labelTextColor: 'successTextSecondary',
         labelTextColorHover: 'successTextSecondary',
-        loaderFill: 'successPrimary',
-        loaderItemFill: 'successItemPrimary',
     },
 };
 
 const linkAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
-        fillHover: 'surfacePrimaryHover',
+        fillHover: 'surfaceHoverPrimary',
         labelTextColor: 'surfaceTextPrimary',
     },
     surfaceQuaternary: {
         fill: 'surfaceQuaternary',
-        fillHover: 'surfaceQuaternaryHover',
+        fillHover: 'surfaceHoverQuaternary',
         labelTextColor: 'surfaceTextPrimary',
     },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
-        fillHover: 'surfaceSecondaryHover',
+        fillHover: 'surfaceHoverSecondary',
         labelTextColor: 'surfaceTextPrimary',
-        loaderFill: 'surfaceSecondary',
-        loaderItemFill: 'surfaceItemPrimary',
     },
     surfaceTertiary: {
         fill: 'surfaceTertiary',
-        fillHover: 'surfaceTertiaryHover',
+        fillHover: 'surfaceHoverTertiary',
         labelTextColor: 'surfaceTextPrimary',
     },
 };
 
 const linkAppearanceWarning = {
-    warning: {
+    warningPrimary: {
         fill: 'warningPrimary',
-        fillHover: 'warningPrimaryHover',
+        fillHover: 'warningHoverPrimary',
         labelTextColor: 'warningTextSecondary',
         labelTextColorHover: 'warningTextSecondary',
-        loaderFill: 'warningPrimary',
-        loaderItemFill: 'warningItemPrimary',
     },
 };
 
@@ -253,8 +221,8 @@ const linkAppearance = {
     ...linkAppearanceDanger,
     ...linkAppearanceError,
     ...linkAppearanceInfo,
-    ...linkAppearancePrimary,
-    ...linkAppearanceSecondary,
+    ...linkAppearanceSpecial,
+    ...linkAppearanceExtra,
     ...linkAppearanceSuccess,
     ...linkAppearanceSurface,
     ...linkAppearanceWarning,
@@ -275,7 +243,6 @@ function Link(props) {
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, linkConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { directionClass, fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, textColorClass, textColorHoverClass, textGradientClass, textStyleClass, textWeightClass, heightClass, shapeClass, sizeClass, svgFillClass, svgFillHoverClass, underline = 'underline', widthClass, } = propsGenerator;
-    // @ts-expect-error
     const { styles } = useStyles.useStyles(props);
     return (jsxRuntime.jsxs(LinkWrapper, { className: clsx(className, 'link', widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, directionClass && `link_direction_${directionClass}`, sizeClass && `text_size_${sizeClass}`, svgFillClass && `svg_fill_${svgFillClass}`, svgFillHoverClass && `svg_fill_hover_${svgFillHoverClass}`, underline && `link_underline_${underline}`, 'text', (textColorClass ||
             textColorHoverClass ||
@@ -284,21 +251,17 @@ function Link(props) {
             textWeightClass) &&
             'text', textColorClass && `text-color_${textColorClass}`, textColorHoverClass && `text-color_hover_${textColorHoverClass}`, textGradientClass && `text-gradient_${textGradientClass}`, textStyleClass && `text-style_${textStyleClass}`, textWeightClass && `text-weight_${textWeightClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `link_shape_${shapeClass}`), "data-testid": dataTestId, "data-tour": dataTour, href: href || link, LinkComponent: LinkComponent, rel: rel, style: Object.assign({}, styles, style), target: target, onClick: onClick, onMouseDown: onMouseDown, children: [before, children || text, after] }));
 }
-// Wrapper with "Link" by condition
 function LinkWrapper(props) {
     const { href, LinkComponent, rel, target, children, ...otherProps } = props;
     if (href) {
-        // If href passed, make link-wrapper
         const Component = LinkComponent || linkConfig.LinkComponent;
         if (Component) {
             return (jsxRuntime.jsx(Component, { href: href, rel: rel, target: target, ...otherProps, children: children }));
         }
     }
     else if (LinkComponent) {
-        // If has default "Component" - render it
         return jsxRuntime.jsx(LinkComponent, { ...otherProps, children: children });
     }
-    // Return children and pass current props to
     return React.Children.toArray(children)
         .filter(Boolean)
         .map((child) => {