@itcase/ui 1.9.36 → 1.9.38

package/dist/{Button_es_DH8hqqdN.js → Button_es_ul2sDicM.js}

@@ -1,13 +1,14 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';
+import { mergeAppearanceKeys } from './utils/mergeAppearanceKeys.js';
 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 } from './Icon_es_Banbw98_.js';
-import { a as LinkWrapper } from './Link_es_Bt-Bhy3t.js';
-import { L as Loader } from './Loader_es_Csp5tr40.js';
-import { T as Text } from './Text_es_DaYcLe4H.js';
+import { I as Icon } from './Icon_es_DNVHNKFK.js';
+import { a as LinkWrapper } from './Link_es_BwLH5S8y.js';
+import { L as Loader } from './Loader_es_DFSNJsLL.js';
+import { T as Text } from './Text_es_B85LGfjW.js';
 
 const buttonAppearanceAccent = {
     accentMutedPrimary: {
@@ -48,7 +49,7 @@ const buttonAppearanceAccent = {
 const buttonAppearanceDanger = {
     dangerMutedPrimary: {
         fill: 'dangerTertiary',
-        fillHover: 'dangerHover',
+        fillHover: 'dangerHoverPrimary',
         labelTextColor: 'dangerTextQuaternary',
         labelTextColorHover: 'dangerTextQuaternary',
         borderColor: 'dangerBorderSecondary',
@@ -70,19 +71,9 @@ const buttonAppearanceDanger = {
 };
 
 const buttonAppearanceError = {
-    error: {
-        fill: 'errorPrimary',
-        fillHover: 'errorHoverPrimary',
-        labelTextColor: 'errorTextPrimary',
-        labelTextColorHover: 'errorTextPrimary',
-        iconAfterFillIcon: 'errorItemPrimary',
-        iconBeforeFillIcon: 'errorItemPrimary',
-        iconFillIcon: 'errorItemPrimary',
-        loaderAppearance: 'errorPrimary',
-    },
     errorMutedPrimary: {
         fill: 'errorTertiary',
-        fillHover: 'errorHover',
+        fillHover: 'errorHoverPrimary',
         labelTextColor: 'errorTextQuaternary',
         labelTextColorHover: 'errorTextQuaternary',
         borderColor: 'errorBorderSecondary',
@@ -93,7 +84,7 @@ const buttonAppearanceError = {
     },
     errorPrimary: {
         fill: 'errorPrimary',
-        fillHover: 'errorHover',
+        fillHover: 'errorHoverPrimary',
         labelTextColor: 'errorTextPrimary',
         labelTextColorHover: 'errorTextPrimary',
         iconAfterFillIcon: 'errorItemPrimary',
@@ -103,32 +94,43 @@ const buttonAppearanceError = {
     },
 };
 
-const buttonAppearanceInfo = {
-    info: {
-        fill: 'infoPrimary',
-        fillHover: 'infoPrimaryHover',
-        labelTextColor: 'infoTextPrimary',
-        labelTextColorHover: 'infoTextPrimary',
-        borderColor: 'infoBorderPrimary',
-        iconAfterFillIcon: 'infoItemPrimary',
-        iconBeforeFillIcon: 'infoItemPrimary',
-        iconFillIcon: 'infoItemPrimary',
-        loaderAppearance: 'infoPrimary',
+const buttonAppearanceExtra = {
+    extraMutedPrimary: {
+        fill: 'extraTertiary',
+        fillHover: 'extraHoverPrimary',
+        labelTextColor: 'extraTextQuaternary',
+        borderColor: 'extraBorderSecondary',
+        iconAfterFillIcon: 'extraItemQuaternary',
+        iconBeforeFillIcon: 'extraItemQuaternary',
+        iconFillIcon: 'extraItemQuaternary',
+        loaderAppearance: 'extraPrimary',
+    },
+    extraPrimary: {
+        fill: 'extraPrimary',
+        fillHover: 'extraHoverPrimary',
+        labelTextColor: 'extraTextPrimary',
+        iconAfterFillIcon: 'extraItemPrimary',
+        iconBeforeFillIcon: 'extraItemPrimary',
+        iconFillIcon: 'extraItemPrimary',
+        loaderAppearance: 'extraPrimary',
     },
+};
+
+const buttonAppearanceInfo = {
     infoMutedPrimary: {
         fill: 'infoTertiary',
-        fillHover: 'infoTertiaryHover',
+        fillHover: 'infoHoverTertiary',
         labelTextColor: 'infoTextSecondary',
         labelTextColorHover: 'infoTextSecondary',
         borderColor: 'infoBorderSecondary',
         iconAfterFillIcon: 'infoItemSecondary',
         iconBeforeFillIcon: 'infoItemSecondary',
-        iconFillIcon: 'infoItemSecondaryPrimary',
+        iconFillIcon: 'infoItemSecondary',
         loaderAppearance: 'infoTertiary',
     },
     infoPrimary: {
         fill: 'infoPrimary',
-        fillHover: 'infoPrimaryHover',
+        fillHover: 'infoHoverPrimary',
         labelTextColor: 'infoTextPrimary',
         labelTextColorHover: 'infoTextPrimary',
         borderColor: 'infoBorderPrimary',
@@ -139,7 +141,7 @@ const buttonAppearanceInfo = {
     },
     infoSecondary: {
         fill: 'infoPrimary',
-        fillHover: 'infoPrimaryHover',
+        fillHover: 'infoHoverPrimary',
         labelTextColor: 'infoTextSecondary',
         labelTextColorHover: 'infoTextSecondary',
         borderColor: 'infoBorderPrimary',
@@ -150,68 +152,6 @@ const buttonAppearanceInfo = {
     },
 };
 
-const buttonAppearancePrimary = {
-    primary: {
-        fill: 'primaryPrimary',
-        fillHover: 'primaryPrimaryHover',
-        labelTextColor: 'primaryTextPrimary',
-        iconAfterFillIcon: 'primaryItemPrimary',
-        iconBeforeFillIcon: 'primaryItemPrimary',
-        iconFillIcon: 'primaryItemPrimary',
-        loaderAppearance: 'primaryPrimary',
-    },
-    primaryMutedPrimary: {
-        fill: 'primaryTertiary',
-        fillHover: 'primaryPrimaryHover',
-        borderColor: 'primaryBorderTertiary',
-        labelTextColor: 'primaryTextSecondary',
-        iconAfterFillIcon: 'primaryItemSecondary',
-        iconBeforeFillIcon: 'primaryItemSecondary',
-        iconFillIcon: 'primaryItemSecondary',
-        loaderAppearance: 'primaryTertiary',
-    },
-    primaryPrimary: {
-        fill: 'primaryPrimary',
-        fillHover: 'primaryPrimaryHover',
-        labelTextColor: 'primaryTextPrimary',
-        iconAfterFillIcon: 'primaryItemPrimary',
-        iconBeforeFillIcon: 'primaryItemPrimary',
-        iconFillIcon: 'primaryItemPrimary',
-        loaderAppearance: 'primaryPrimary',
-    },
-};
-
-const buttonAppearanceSecondary = {
-    secondary: {
-        fill: 'secondaryPrimary',
-        fillHover: 'secondaryHoverPrimary',
-        labelTextColor: 'secondaryTextPrimary',
-        iconAfterFillIcon: 'secondaryItemPrimary',
-        iconBeforeFillIcon: 'secondaryItemPrimary',
-        iconFillIcon: 'secondaryItemPrimary',
-        loaderAppearance: 'secondaryPrimary',
-    },
-    secondaryMutedPrimary: {
-        fill: 'secondaryTertiary',
-        fillHover: 'secondaryPrimaryHover',
-        labelTextColor: 'secondaryTextQuaternary',
-        borderColor: 'secondaryBorderSecondary',
-        iconAfterFillIcon: 'secondaryItemQuaternary',
-        iconBeforeFillIcon: 'secondaryItemQuaternary',
-        iconFillIcon: 'secondaryItemQuaternary',
-        loaderAppearance: 'secondaryPrimary',
-    },
-    secondaryPrimary: {
-        fill: 'secondaryPrimary',
-        fillHover: 'secondaryHoverPrimary',
-        labelTextColor: 'secondaryTextPrimary',
-        iconAfterFillIcon: 'secondaryItemPrimary',
-        iconBeforeFillIcon: 'secondaryItemPrimary',
-        iconFillIcon: 'secondaryItemPrimary',
-        loaderAppearance: 'secondaryPrimary',
-    },
-};
-
 const buttonAppearanceShape = {
     circular: {
         shape: 'circular',
@@ -241,54 +181,76 @@ const buttonAppearanceSize = {
     sizeXXL: {
         size: 'xxl',
         labelTextSize: 'xl',
-        iconAfterAppearance: 'size24_24',
-        iconBeforeAppearance: 'size24_24',
+        iconAfterAppearanceSize: 'size24_24',
+        iconBeforeAppearanceSize: 'size24_24',
         loaderAppearanceSize: 'sizeL',
     },
     sizeXL: {
         size: 'xl',
         labelTextSize: 'l',
-        iconAfterAppearance: 'size24_24',
-        iconBeforeAppearance: 'size24_24',
+        iconAfterAppearanceSize: 'size24_24',
+        iconBeforeAppearanceSize: 'size24_24',
         loaderAppearanceSize: 'sizeL',
     },
     sizeL: {
         size: 'l',
         labelTextSize: 'l',
-        iconAfterAppearance: 'size24_24',
-        iconBeforeAppearance: 'size24_24',
+        iconAfterAppearanceSize: 'size24_24',
+        iconBeforeAppearanceSize: 'size24_24',
         loaderAppearanceSize: 'sizeL',
     },
     sizeM: {
         size: 'm',
         labelTextSize: 'm',
-        iconAfterAppearance: 'size24_24',
-        iconBeforeAppearance: 'size24_24',
+        iconAfterAppearanceSize: 'size24_24',
+        iconBeforeAppearanceSize: 'size24_24',
         loaderAppearanceSize: 'sizeL',
     },
     sizeS: {
         size: 's',
         labelTextSize: 's',
-        iconAfterAppearance: 'size20_20',
-        iconBeforeAppearance: 'size20_20',
+        iconAfterAppearanceSize: 'size20_20',
+        iconBeforeAppearanceSize: 'size20_20',
         loaderAppearanceSize: 'sizeL',
     },
     sizeXS: {
         size: 'xs',
         labelTextSize: 'xs',
-        iconAfterAppearance: 'size16_16',
-        iconBeforeAppearance: 'size16_16',
+        iconAfterAppearanceSize: 'size16_16',
+        iconBeforeAppearanceSize: 'size16_16',
         loaderAppearanceSize: 'sizeL',
     },
     sizeXXS: {
         size: 'xxs',
         labelTextSize: 'xs',
-        iconAfterAppearance: 'size14_14',
-        iconBeforeAppearance: 'size14_14',
+        iconAfterAppearanceSize: 'size14_14',
+        iconBeforeAppearanceSize: 'size14_14',
         loaderAppearanceSize: 'sizeL',
     },
 };
 
+const buttonAppearanceSpecial = {
+    specialMutedPrimary: {
+        fill: 'specialTertiary',
+        fillHover: 'specialHoverPrimary',
+        labelTextColor: 'specialTextSecondary',
+        borderColor: 'specialBorderTertiary',
+        iconAfterFillIcon: 'specialItemSecondary',
+        iconBeforeFillIcon: 'specialItemSecondary',
+        iconFillIcon: 'specialItemSecondary',
+        loaderAppearance: 'specialTertiary',
+    },
+    specialPrimary: {
+        fill: 'specialPrimary',
+        fillHover: 'specialHoverPrimary',
+        labelTextColor: 'specialTextPrimary',
+        iconAfterFillIcon: 'specialItemPrimary',
+        iconBeforeFillIcon: 'specialItemPrimary',
+        iconFillIcon: 'specialItemPrimary',
+        loaderAppearance: 'specialPrimary',
+    },
+};
+
 const buttonAppearanceStyle = {
     solid: {
         borderColor: 'none',
@@ -304,22 +266,12 @@ const buttonAppearanceStyle = {
 };
 
 const buttonAppearanceSuccess = {
-    success: {
-        fill: 'successPrimary',
-        fillHover: 'successHover',
-        labelTextColor: 'successTextPrimary',
-        labelTextColorHover: 'successTextPrimary',
-        iconAfterFillIcon: 'successItemPrimary',
-        iconBeforeFillIcon: 'successItemPrimary',
-        iconFillIcon: 'successItemPrimary',
-        loaderAppearance: 'successPrimary',
-    },
     successMutedPrimary: {
         fill: 'successTertiary',
-        fillHover: 'successHover',
-        borderColor: 'successBorderQuaternary',
+        fillHover: 'successHoverPrimary',
         labelTextColor: 'successTextQuaternary',
         labelTextColorHover: 'successTextQuaternary',
+        borderColor: 'successBorderQuaternary',
         iconAfterFillIcon: 'successItemQuaternary',
         iconBeforeFillIcon: 'successItemQuaternary',
         iconFillIcon: 'successItemQuaternary',
@@ -327,7 +279,7 @@ const buttonAppearanceSuccess = {
     },
     successPrimary: {
         fill: 'successPrimary',
-        fillHover: 'successHover',
+        fillHover: 'successHoverPrimary',
         labelTextColor: 'successTextPrimary',
         labelTextColorHover: 'successTextPrimary',
         iconAfterFillIcon: 'successItemPrimary',
@@ -360,7 +312,7 @@ const buttonAppearanceSurface = {
     },
     surfaceQuaternary: {
         fill: 'surfaceTertiary',
-        fillHover: 'surfaceTertiaryHover',
+        fillHover: 'surfaceTertiary',
         labelTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderTertiary',
         iconAfterFillIcon: 'surfaceItemPrimary',
@@ -390,22 +342,12 @@ const buttonAppearanceSurface = {
 };
 
 const buttonAppearanceWarning = {
-    warning: {
-        fill: 'warningPrimary',
-        fillHover: 'warningHoverPrimary',
-        labelTextColor: 'warningTextPrimary',
-        labelTextColorHover: 'warningTextPrimary',
-        iconAfterFillIcon: 'warningItemPrimary',
-        iconBeforeFillIcon: 'warningItemPrimary',
-        iconFillIcon: 'warningItemPrimary',
-        loaderAppearance: 'warningPrimary',
-    },
     warningMutedPrimary: {
         fill: 'warningTertiary',
-        fillHover: 'warningBorderHover',
+        fillHover: 'warningHoverPrimary',
         labelTextColor: 'warningTextSecondary',
         labelTextColorHover: 'warningTextPrimary',
-        borderColor: 'warningBorderHover',
+        borderColor: 'warningBorderPrimary',
         iconAfterFillIcon: 'warningItemSecondary',
         iconBeforeFillIcon: 'warningItemSecondary',
         iconFillIcon: 'warningItemSecondary',
@@ -431,8 +373,8 @@ const buttonAppearance = {
     ...buttonAppearanceDanger,
     ...buttonAppearanceError,
     ...buttonAppearanceInfo,
-    ...buttonAppearancePrimary,
-    ...buttonAppearanceSecondary,
+    ...buttonAppearanceSpecial,
+    ...buttonAppearanceExtra,
     ...buttonAppearanceSuccess,
     ...buttonAppearanceSurface,
     ...buttonAppearanceWarning,
@@ -445,10 +387,10 @@ const buttonConfig = {
     },
 };
 const Button = React.forwardRef(function Button(props, ref) {
-    const { appearance, className, dataTestId, dataTour, label, Badge, href, htmlType = 'button', link, rel, target, before, after, isDisabled, isLoading = false, onClick, onMouseDown, children, } = props;
+    const { appearance, className, dataTestId, dataTour, label, Badge, href, htmlType = 'button', link, rel, target, tooltip, before, after, isDisabled, isLoading = false, onClick, onMouseDown, children, } = props;
     const appearanceConfig = useAppearanceConfig(appearance, buttonConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    const { fillClass, fillHoverClass, labelTextColor, labelTextColorHover, labelTextSize, labelTextTruncate, labelTextWeight, labelTextWidth, labelTextWrap, borderColorClass, borderTypeClass, borderWidthClass, elevationClass, icon, iconAfter, iconAfterAppearance, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconAppearance, iconBefore, iconBeforeAppearance, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, iconFill, iconFillIcon, iconFillSize, iconShape, iconSize, iconSrc, loaderAppearance, loaderAppearanceSize, loaderFill, loaderItemFill, loaderSize, loaderType = 'simple', shapeClass, shapeStrengthClass, sizeClass, widthClass, zeroGap, zeroPadding, isSkeleton, } = propsGenerator;
+    const { fillClass, fillHoverClass, labelTextColor, labelTextColorHover, labelTextSize, labelTextTruncate, labelTextWeight, labelTextWidth, labelTextWrap, borderColorClass, borderTypeClass, borderWidthClass, elevationClass, icon, iconAfter, iconAfterAppearance, iconAfterAppearanceSize, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconAppearance, iconAppearanceSize, iconBefore, iconBeforeAppearance, iconBeforeAppearanceSize, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, iconFill, iconFillIcon, iconFillSize, iconShape, iconSize, iconSrc, loaderAppearance, loaderAppearanceSize, loaderFill, loaderItemFill, loaderSize, loaderType = 'simple', shapeClass, shapeStrengthClass, sizeClass, widthClass, zeroGap, zeroPadding, isSkeleton, } = propsGenerator;
     const { label: labelStyles, styles: buttonStyles } = useStyles(props);
     const buttonTypeClass = after ||
         before ||
@@ -464,7 +406,7 @@ const Button = React.forwardRef(function Button(props, ref) {
                 ? 'button_type_label'
                 : buttonTypeClass
                     ? 'button_type_icon'
-                    : '', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && !isDisabled && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `button_size_${sizeClass}`, widthClass && `button_width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer', isDisabled && 'button_state_disabled cursor_type_default', Badge && 'button_type_badge', zeroPadding && 'button_reset-padding', zeroGap && 'button_reset-gap', isLoading && 'button_state_loading', isSkeleton && `button_skeleton`), type: htmlType, "data-testid": dataTestId && `${dataTestId}-button`, "data-tour": dataTour, disabled: isDisabled, href: link || href, LinkComponent: "button", rel: rel, style: buttonStyles, target: target, onClick: onClick, onMouseDown: onMouseDown, children: jsxs("div", { className: "button__wrapper", ref: ref, children: [isLoading && (jsx(Loader, { appearance: `${loaderAppearance} ${loaderAppearanceSize}`, className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { appearance: iconBeforeAppearance, className: "button__icon_before", fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), (icon || iconSrc) && (jsx(Icon, { appearance: iconAppearance, className: "button__icon", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (children || label) && (jsx(Text, { className: "button__label", width: labelTextWidth, size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, style: labelStyles, children: children || label })), (iconAfter || iconAfterSrc) && (jsx(Icon, { appearance: iconAfterAppearance, className: "button__icon_after", fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), Badge, after] }) }));
+                    : '', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && !isDisabled && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `button_size_${sizeClass}`, widthClass && `button_width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer', isDisabled && 'button_state_disabled cursor_type_default', Badge && 'button_type_badge', zeroPadding && 'button_reset-padding', zeroGap && 'button_reset-gap', isLoading && 'button_state_loading', isSkeleton && `button_skeleton`), type: htmlType, title: tooltip, "data-testid": dataTestId && `${dataTestId}-button`, "data-tour": dataTour, disabled: isDisabled, href: link || href, LinkComponent: "button", rel: rel, style: buttonStyles, target: target, onClick: onClick, onMouseDown: onMouseDown, children: jsxs("div", { className: "button__wrapper", ref: ref, children: [isLoading && (jsx(Loader, { appearance: mergeAppearanceKeys(loaderAppearance, loaderAppearanceSize), className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { appearance: mergeAppearanceKeys(iconBeforeAppearance, iconBeforeAppearanceSize), className: "button__icon_before", fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), (icon || iconSrc) && (jsx(Icon, { appearance: mergeAppearanceKeys(iconAppearance, iconAppearanceSize), className: "button__icon", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (children || label) && (jsx(Text, { className: "button__label", width: labelTextWidth, size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, style: labelStyles, children: children || label })), (iconAfter || iconAfterSrc) && (jsx(Icon, { appearance: mergeAppearanceKeys(iconAfterAppearance, iconAfterAppearanceSize), className: "button__icon_after", fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), Badge, after] }) }));
 });
 
 export { Button as B, buttonAppearance as a, buttonConfig as b };

package/dist/{ChipsGroup_cjs_C-oThNwF.js → ChipsGroup_cjs_CIIf1Cyn.js}

@@ -5,8 +5,8 @@ var clsx = require('clsx');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
 var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
-var Icon = require('./Icon_cjs_CQxDPPGY.js');
-var Text = require('./Text_cjs_Co2XdYF-.js');
+var Icon = require('./Icon_cjs_D20B2YBo.js');
+var Text = require('./Text_cjs_erTy2pUN.js');
 
 const chipsAppearanceAccent = {
     accentMutedPrimary: {
@@ -20,7 +20,7 @@ const chipsAppearanceAccent = {
     accentPrimary: {
         fill: 'accentPrimary',
         fillActive: 'accentPrimary',
-        fillActiveHover: 'accentHoverPrimary',
+        fillActiveHover: 'accentActiveHoverPrimary',
         fillHover: 'accentHoverPrimary',
         labelTextActiveColor: 'accentTextPrimary',
         labelTextColor: 'accentTextPrimary',
@@ -50,11 +50,11 @@ const chipsAppearanceDanger = {
 };
 
 const chipsAppearanceDisabled = {
-    disabled: {
+    disabledPrimary: {
         fill: 'surfaceSecondary',
-        fillHover: 'surfaceSecondary',
-        labelTextActiveColor: 'surfaceTextQuaternary',
-        labelTextActiveColorHover: 'surfaceTextQuaternary',
+        fillHover: 'surfaceHoverSecondary',
+        labelTextActiveColor: 'surfaceTextActiveQuaternary',
+        labelTextActiveColorHover: 'surfaceTextActiveHoverQuaternary',
         labelTextColor: 'surfaceTextQuaternary',
         labelTextColorHover: 'surfaceTextQuaternary',
         borderColor: 'disabledBorderPrimary',
@@ -65,7 +65,7 @@ const chipsAppearanceDisabled = {
 
 const chipsAppearanceError = {
     errorMutedPrimary: {
-        fill: 'errorDisabled',
+        fill: 'errorTertiary',
         labelTextColor: 'errorTextQuaternary',
         borderColor: 'errorBorderQuaternary',
         iconAfterFillIcon: 'errorItemQuaternary',
@@ -80,10 +80,27 @@ const chipsAppearanceError = {
     },
 };
 
+const chipsAppearanceExtra = {
+    extraMutedPrimary: {
+        fill: 'extraTertiary',
+        labelTextColor: 'extraTextQuaternary',
+        borderColor: 'extraBorderSecondary',
+        iconAfterFillIcon: 'extraItemQuaternary',
+        iconBeforeFillIcon: 'extraItemQuaternary',
+    },
+    extraPrimary: {
+        fill: 'extraPrimary',
+        labelTextColor: 'extraTextPrimary',
+        borderColor: 'extraBorderSecondary',
+        iconAfterFillIcon: 'extraItemPrimary',
+        iconBeforeFillIcon: 'extraItemPrimary',
+    },
+};
+
 const chipsAppearanceInfo = {
     infoMutedPrimary: {
         fill: 'infoTertiary',
-        labelTextColor: 'infoTextPrimary',
+        labelTextColor: 'infoTextSecondary',
         borderColor: 'infoBorderSecondary',
         iconAfterFillIcon: 'infoItemPrimary',
         iconBeforeFillIcon: 'infoItemPrimary',
@@ -97,40 +114,6 @@ const chipsAppearanceInfo = {
     },
 };
 
-const chipsAppearancePrimary = {
-    primaryMutedPrimary: {
-        fill: 'primaryDisabled',
-        labelTextColor: 'primaryTextSecondary',
-        borderColor: 'primaryBorderSecondary',
-        iconAfterFillIcon: 'primaryItemSecondary',
-        iconBeforeFillIcon: 'primaryItemSecondary',
-    },
-    primaryPrimary: {
-        fill: 'primaryPrimary',
-        labelTextColor: 'primaryTextPrimary',
-        borderColor: 'primaryBorderSecondary',
-        iconAfterFillIcon: 'primaryItemPrimary',
-        iconBeforeFillIcon: 'primaryItemPrimary',
-    },
-};
-
-const chipsAppearanceSecondary = {
-    secondaryMutedPrimary: {
-        fill: 'secondaryDisabled',
-        labelTextColor: 'secondaryTextQuaternary',
-        borderColor: 'secondaryBorderSecondary',
-        iconAfterFillIcon: 'secondaryItemQuaternary',
-        iconBeforeFillIcon: 'secondaryItemQuaternary',
-    },
-    secondaryPrimary: {
-        fill: 'secondaryPrimary',
-        labelTextColor: 'secondaryTextPrimary',
-        borderColor: 'secondaryBorderSecondary',
-        iconAfterFillIcon: 'secondaryItemPrimary',
-        iconBeforeFillIcon: 'secondaryItemPrimary',
-    },
-};
-
 const chipsAppearanceShape = {
     circular: {
         shape: 'circular',
@@ -196,8 +179,25 @@ const chipsAppearanceSize = {
     sizeXXS: {
         size: 'xxs',
         labelTextSize: 'xxs',
-        iconAfterSize: '12',
-        iconBeforeSize: '12',
+        iconAfterSize: '14',
+        iconBeforeSize: '14',
+    },
+};
+
+const chipsAppearanceSpecial = {
+    specialMutedPrimary: {
+        fill: 'specialTertiary',
+        labelTextColor: 'specialTextSecondary',
+        borderColor: 'specialBorderSecondary',
+        iconAfterFillIcon: 'specialItemSecondary',
+        iconBeforeFillIcon: 'specialItemSecondary',
+    },
+    specialPrimary: {
+        fill: 'specialPrimary',
+        labelTextColor: 'specialTextPrimary',
+        borderColor: 'specialBorderSecondary',
+        iconAfterFillIcon: 'specialItemPrimary',
+        iconBeforeFillIcon: 'specialItemPrimary',
     },
 };
 
@@ -249,7 +249,6 @@ const chipsAppearanceSurface = {
         labelTextColor: 'surfaceTextPrimary',
         labelTextColorHover: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderTertiary',
-        activeIconItemFill: 'surfaceItemSecondary',
         badgeAppearance: 'surfacePrimary sizeXS solid',
         iconAfterFillActiveIcon: 'accentItemPrimary',
         iconAfterFillIcon: 'surfaceItemPrimary',
@@ -303,8 +302,8 @@ const chipsAppearance = {
     ...chipsAppearanceError,
     ...chipsAppearanceInfo,
     ...chipsAppearanceDisabled,
-    ...chipsAppearancePrimary,
-    ...chipsAppearanceSecondary,
+    ...chipsAppearanceSpecial,
+    ...chipsAppearanceExtra,
     ...chipsAppearanceSuccess,
     ...chipsAppearanceSurface,
     ...chipsAppearanceWarning,
@@ -321,24 +320,23 @@ function Chips(props) {
     const { appearance, className, dataTestId, dataTour, label = '', isActive, isDisabled, isSkeleton, onClick, onClickIconAfter, onClickIconBefore, children, } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, chipsConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    const { alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor, labelTextActiveColorHover, labelTextColor, labelTextColorHover, labelTextSize, labelTextWeight, labelTextWrap, borderColorClass, borderTypeClass, badgeAppearance, badgeShape, badgeSize, badgeTextColor, badgeTextSize, badgeValue, cursorClass, iconAfter, iconAfterFill, iconAfterFillActiveIcon, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeFill, iconBeforeFillActiveIcon, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
+    const { alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor, labelTextActiveColorHover, labelTextColor, labelTextColorHover, labelTextSize, labelTextWeight, labelTextWrap, borderColorClass, borderTypeClass, badgeAppearance, badgeShape, badgeSize, badgeTextColor, badgeTextSize, badgeValue, cursorClass, iconAfter, iconAfterActive, iconAfterFill, iconAfterFillActiveIcon, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeActive, iconBeforeFill, iconBeforeFillActiveIcon, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
     const { styles: chipsStyles } = useStyles.useStyles(props);
     return (jsxRuntime.jsx("div", { className: clsx(className, 'chips', !isActive
             ? fillClass && `fill_${fillClass}`
             : fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
             ? fillHoverClass && `fill_hover_${fillHoverClass}`
-            : fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, sizeClass && `chips_size_${sizeClass}`, alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`, isActive && 'chips_state_active', isDisabled && `chips_state_disabled`, cursorClass && `cursor_${cursorClass}`, onClick && 'cursor_type_pointer', isSkeleton && `chips_skeleton`), "data-testid": dataTestId && `${dataTestId}Chips`, "data-tour": dataTour, style: chipsStyles, onClick: !isDisabled ? onClick : undefined, children: jsxRuntime.jsxs("div", { className: "chips__inner", children: [(iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "chips__icon_before", size: iconBeforeSize, fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconFillActive: iconBeforeFillActiveIcon, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore, isActive: isActive, onClick: onClickIconBefore })), typeof label === 'string' ? (jsxRuntime.jsx(Text.Text, { className: "chips__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveColorHover, textColorHover: labelTextColorHover, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })) : (jsxRuntime.jsx("div", { className: "chips__label", children: label })), children, (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "chips__icon_after", size: iconAfterSize, fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconFillActive: iconAfterFillActiveIcon, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter, isActive: isActive, onClick: onClickIconAfter })), badgeValue && (jsxRuntime.jsx(Icon.Badge, { appearance: badgeAppearance, className: "chips__badge", size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue }))] }) }));
+            : fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, sizeClass && `chips_size_${sizeClass}`, alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`, isActive && 'chips_state_active', isDisabled && `chips_state_disabled`, cursorClass && `cursor_${cursorClass}`, onClick && 'cursor_type_pointer', isSkeleton && `chips_skeleton`), "data-testid": dataTestId && `${dataTestId}Chips`, "data-tour": dataTour, style: chipsStyles, onClick: !isDisabled ? onClick : undefined, children: jsxRuntime.jsxs("div", { className: "chips__inner", children: [(iconBefore || iconBeforeSrc || (iconBeforeActive && isActive)) && (jsxRuntime.jsx(Icon.Icon, { className: "chips__icon_before", size: iconBeforeSize, fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconFillActive: iconBeforeFillActiveIcon, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBeforeActive && isActive ? iconBeforeActive : iconBefore, isActive: isActive, onClick: onClickIconBefore })), typeof label === 'string' ? (jsxRuntime.jsx(Text.Text, { className: "chips__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveColorHover, textColorHover: labelTextColorHover, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })) : (jsxRuntime.jsx("div", { className: "chips__label", children: label })), children, (iconAfter || iconAfterSrc || (iconAfterActive && isActive)) && (jsxRuntime.jsx(Icon.Icon, { className: "chips__icon_after", size: iconAfterSize, fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconFillActive: iconAfterFillActiveIcon, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfterActive && isActive ? iconAfterActive : iconAfter, isActive: isActive, onClick: onClickIconAfter })), badgeValue && (jsxRuntime.jsx(Icon.Badge, { appearance: badgeAppearance, className: "chips__badge", size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue }))] }) }));
 }
 
 function ChipsGroup(props) {
     const { className, dataTestId, dataTour, chipsList, horizontalScroll, style, onClick, children, } = props;
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
     const { directionClass, alignClass, alignDirectionClass, fillClass, borderColorClass, borderTypeClass, borderWidthClass, chipsAppearance, widthClass, wrapClass, } = propsGenerator;
-    // @ts-expect-error
     const { styles: groupStyles } = useStyles.useStyles(props);
     return (jsxRuntime.jsx("div", { className: clsx(className, 'chips-group', 'group', widthClass && `width_${widthClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, fillClass && `fill_${fillClass}`, horizontalScroll && 'group_scroll_horizontal', wrapClass && `group_wrap_${wrapClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: children
             ? children
-            : chipsList?.map((item) => (jsxRuntime.jsx(Chips, { appearance: chipsAppearance, label: item.label, iconAfter: item.iconAfter, iconBefore: item.iconBefore, isActive: item.isActive, isDisabled: item.isDisabled, onClick: (event) => onClick(item, event) }, item.id))) }));
+            : chipsList?.map((item) => (jsxRuntime.jsx(Chips, { appearance: chipsAppearance, label: item.label, iconAfter: item.iconAfter, iconAfterActive: item.iconAfterActive, iconBefore: item.iconBefore, iconBeforeActive: item.iconBeforeActive, isActive: item.isActive, isDisabled: item.isDisabled, onClick: (event) => onClick?.(item, event) }, item.id))) }));
 }
 
 exports.Chips = Chips;