@itcase/ui 1.8.43 → 1.8.44

package/dist/components/Textarea.js

@@ -1,7 +1,8 @@
-import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
+import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -184,10 +185,7 @@ var textareaConfig = {
 };
 function Textarea(props) {
     var id = props.id, className = props.className, appearance = props.appearance, isDisabled = props.isDisabled, placeholder = props.placeholder, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onKeyDown = props.onKeyDown;
-    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
-        var _a;
-        return (__assign(__assign({}, resultConfig), (_a = textareaConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
-    }, {});
+    var appearanceConfig = useAppearanceConfig(appearance, textareaConfig);
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     var fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, borderHoverClass = propsGenerator.borderHoverClass, borderWidthClass = propsGenerator.borderWidthClass, textColorClass = propsGenerator.textColorClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, caretClass = propsGenerator.caretClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
     return (jsx("div", { className: clsx('textarea', className, sizeClass && "textarea_size_".concat(sizeClass), shapeClass && "textarea_shape_".concat(shapeClass)), children: jsx("textarea", { id: id, className: clsx('textarea__input', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), fillClass && "fill_".concat(fillClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderHoverClass && "border-color_hover_".concat(borderHoverClass), placeholderTextColorClass &&

package/dist/components/Tile.js

@@ -1,10 +1,11 @@
-import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 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 { b as Title, B as Badge, I as Icon } from '../Tooltip_es_Y2aoFQW7.js';
-import { T as Text } from '../Text_es_BfLRfj-5.js';
+import { b as Title, B as Badge, I as Icon } from '../Icon_es_k9bHSLyL.js';
+import { T as Text } from '../Text_es_Ffjr5J1k.js';
+import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -21,7 +22,7 @@ import '../hooks/useStyles/styleAttributes.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_DxtZLeKY.js';
+import '../Link_es_BnUIX0QT.js';
 
 var tileAppearanceSize = {
     sizeXL: {
@@ -135,10 +136,7 @@ var tileConfig = {
 };
 function Tile(props) {
     var className = props.className, type = props.type, appearance = props.appearance, direction = props.direction, title = props.title, desc = props.desc, badgeValue = props.badgeValue, reverse = props.reverse, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onClick = props.onClick, children = props.children;
-    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
-        var _a;
-        return (__assign(__assign({}, resultConfig), (_a = tileConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
-    }, {});
+    var appearanceConfig = useAppearanceConfig(appearance, tileConfig);
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     var alignClass = propsGenerator.alignClass, _a = propsGenerator.alignDirectionClass, alignDirectionClass = _a === void 0 ? 'vertical' : _a, fillClass = propsGenerator.fillClass, titleTextAlign = propsGenerator.titleTextAlign, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, titleTextWeight = propsGenerator.titleTextWeight, titleTextWrap = propsGenerator.titleTextWrap, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWrap = propsGenerator.descTextWrap, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, badgeAppearance = propsGenerator.badgeAppearance, badgeAppearanceSize = propsGenerator.badgeAppearanceSize, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, dataTestId = propsGenerator.dataTestId, dataTour = propsGenerator.dataTour, icon = propsGenerator.icon, iconAppearance = propsGenerator.iconAppearance, iconFill = propsGenerator.iconFill, iconFillIcon = propsGenerator.iconFillIcon, iconFillSize = propsGenerator.iconFillSize, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, iconSrc = propsGenerator.iconSrc, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass;
     // @ts-expect-error

package/dist/components/Title.js

@@ -1,15 +1,19 @@
-export { b as Title, d as titleAppearance, c as titleConfig } from '../Tooltip_es_Y2aoFQW7.js';
+export { b as Title, d as titleAppearance, c as titleConfig } from '../Icon_es_k9bHSLyL.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
+import 'react-inlinesvg';
+import '../hoc/urlWithAssetPrefix.js';
+import '@itcase/common';
+import '../context/UrlAssetPrefix.js';
+import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
 import '../context/Notifications.js';
 import 'uuid';
-import '@itcase/common';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
@@ -17,8 +21,5 @@ import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Text_es_BfLRfj-5.js';
-import 'react-inlinesvg';
-import '../hoc/urlWithAssetPrefix.js';
-import '../context/UrlAssetPrefix.js';
-import '../Link_es_DxtZLeKY.js';
+import '../Link_es_BnUIX0QT.js';
+import '../Text_es_Ffjr5J1k.js';

package/dist/components/Tooltip.js

@@ -1,15 +1,19 @@
-export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Tooltip_es_Y2aoFQW7.js';
+export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Icon_es_k9bHSLyL.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
+import 'react-inlinesvg';
+import '../hoc/urlWithAssetPrefix.js';
+import '@itcase/common';
+import '../context/UrlAssetPrefix.js';
+import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
 import '../context/Notifications.js';
 import 'uuid';
-import '@itcase/common';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
@@ -17,8 +21,5 @@ import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Text_es_BfLRfj-5.js';
-import 'react-inlinesvg';
-import '../hoc/urlWithAssetPrefix.js';
-import '../context/UrlAssetPrefix.js';
-import '../Link_es_DxtZLeKY.js';
+import '../Link_es_BnUIX0QT.js';
+import '../Text_es_Ffjr5J1k.js';

package/dist/components/Warning.js

@@ -0,0 +1,164 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, Fragment } from 'react';
+import clsx from 'clsx';
+import { I as Icon } from '../Icon_es_k9bHSLyL.js';
+import { T as Text } from '../Text_es_Ffjr5J1k.js';
+import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
+import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { useStyles } from '../hooks/useStyles/useStyles.js';
+import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
+import { icons16 } from '@itcase/icons/default';
+import 'react-inlinesvg';
+import '../hoc/urlWithAssetPrefix.js';
+import '@itcase/common';
+import '../context/UrlAssetPrefix.js';
+import '../Link_es_BnUIX0QT.js';
+import 'lodash/camelCase';
+import 'lodash/castArray';
+import 'lodash/upperFirst';
+import '../context/Notifications.js';
+import 'uuid';
+import '../context/UIContext.js';
+import '../hooks/useMediaQueries/useMediaQueries.js';
+import 'react-responsive';
+import '../utils/setViewportProperty.js';
+import 'lodash/maxBy';
+import '../hooks/useStyles/styleAttributes.js';
+
+var warningAppearanceAccent = {
+    accentMutedPrimary: {
+        fill: 'accentTertiary',
+        labelTextColor: 'accentTextQuaternary',
+        descriptionTextColor: 'accentTextQuaternary',
+        borderColor: 'accentBorderSecondary',
+        iconAfter: icons16.Action.Close,
+        iconAfterFillIcon: 'accentItemQuaternary',
+        iconBefore: icons16.Alert.Warning,
+        iconBeforeFillIcon: 'accentItemQuaternary',
+    },
+    accentPrimary: {
+        fill: 'accentPrimary',
+        labelTextColor: 'accentTextPrimary',
+        descriptionTextColor: 'accentTextPrimary',
+        borderColor: 'accentBorderQuaternary',
+        iconAfter: icons16.Action.Close,
+        iconAfterFillIcon: 'accentItemPrimary',
+        iconBefore: icons16.Alert.Warning,
+        iconBeforeFillIcon: 'accentItemPrimary',
+    },
+};
+
+var warningAppearanceError = {
+    errorMutedPrimary: {
+        fill: 'errorTertiary',
+        labelTextColor: 'errorTextQuaternary',
+        descriptionTextColor: 'errorTextQuaternary',
+        borderColor: 'errorBorderSecondary',
+        iconAfter: icons16.Action.Close,
+        iconAfterFillIcon: 'errorItemQuaternary',
+        iconBefore: icons16.Action.Block,
+        iconBeforeFillIcon: 'errorItemQuaternary',
+    },
+    errorPrimary: {
+        fill: 'errorPrimary',
+        labelTextColor: 'errorTextPrimary',
+        descriptionTextColor: 'errorTextPrimary',
+        borderColor: 'errorBorderQuaternary',
+        iconAfter: icons16.Action.Close,
+        iconAfterFillIcon: 'errorItemPrimary',
+        iconBefore: icons16.Action.Block,
+        iconBeforeFillIcon: 'errorItemPrimary',
+    },
+};
+
+var warningAppearanceInfo = {
+    infoMutedPrimary: {
+        fill: 'infoTertiary',
+        labelTextColor: 'infoTextSecondary',
+        descriptionTextColor: 'infoTextSecondary',
+        borderColor: 'infoBorderSecondary',
+        iconAfter: icons16.Action.Close,
+        iconAfterFillIcon: 'infoItemQuaternary',
+        iconBefore: icons16.Alert.Warning,
+        iconBeforeFillIcon: 'infoItemQuaternary',
+    },
+    infoPrimary: {
+        fill: 'infoPrimary',
+        labelTextColor: 'infoTextPrimary',
+        descriptionTextColor: 'infoTextPrimary',
+        borderColor: 'infoBorderSecondary',
+        iconAfter: icons16.Action.Close,
+        iconAfterFillIcon: 'infoItemPrimary',
+        iconBefore: icons16.Alert.Warning,
+        iconBeforeFillIcon: 'infoItemPrimary',
+    },
+};
+
+var warningAppearanceSize = {
+    sizeL: {
+        size: 'l',
+        labelTextSize: 's',
+        labelTextWeight: '600',
+        descriptionTextSize: 's',
+        iconAfterSize: '16',
+        iconBeforeSize: '16',
+    },
+};
+
+var warningAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    full: {},
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
+    },
+};
+
+var warningAppearanceWarning = {
+    warningMutedPrimary: {
+        fill: 'warningTertiary',
+        labelTextColor: 'warningTextSecondary',
+        descriptionTextColor: 'warningTextSecondary',
+        borderColor: 'warningBorderSecondary',
+        iconAfter: icons16.Action.Close,
+        iconAfterFillIcon: 'warningItemSecondary',
+        iconBefore: icons16.Alert.WarningTriangle,
+        iconBeforeFillIcon: 'warningItemSecondary',
+    },
+    warningPrimary: {
+        fill: 'warningPrimary',
+        labelTextColor: 'warningTextPrimary',
+        descriptionTextColor: 'warningTextPrimary',
+        borderColor: 'warningBorderSecondary',
+        iconAfter: icons16.Action.Close,
+        iconAfterFillIcon: 'warningItemPrimary',
+        iconBefore: icons16.Alert.WarningTriangle,
+        iconBeforeFillIcon: 'warningItemPrimary',
+    },
+};
+
+var warningAppearance = __assign(__assign(__assign(__assign(__assign(__assign({}, warningAppearanceAccent), warningAppearanceWarning), warningAppearanceError), warningAppearanceInfo), warningAppearanceStyle), warningAppearanceSize);
+
+var warningConfig = {
+    appearance: warningAppearance,
+    setAppearance: function (appearanceConfig) {
+        warningConfig.appearance = appearanceConfig;
+    },
+};
+function Warning(props) {
+    var className = props.className, appearance = props.appearance, label = props.label, description = props.description, shape = props.shape, isSkeleton = props.isSkeleton;
+    var appearanceConfig = useAppearanceConfig(appearance, warningConfig);
+    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    var fillClass = propsGenerator.fillClass, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, descriptionTextColor = propsGenerator.descriptionTextColor, descriptionTextSize = propsGenerator.descriptionTextSize, borderColorClass = propsGenerator.borderColorClass, iconAfter = propsGenerator.iconAfter, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterSize = propsGenerator.iconAfterSize, iconAfterSrc = propsGenerator.iconAfterSrc, iconBefore = propsGenerator.iconBefore, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeSize = propsGenerator.iconBeforeSize, iconBeforeSrc = propsGenerator.iconBeforeSrc, sizeClass = propsGenerator.sizeClass;
+    // @ts-ignore
+    var warningStyles = useStyles(props).styles;
+    var _a = useState(true), isVisible = _a[0], setIsVisible = _a[1];
+    return (jsx(Fragment, { children: isVisible && (jsxs("div", { className: clsx(className, 'warning', fillClass && "fill_".concat(fillClass), sizeClass && "warning_size_".concat(sizeClass), borderColorClass && "border-color_".concat(borderColorClass), shape && "warning_shape_".concat(shape), isSkeleton && "warning_skeleton"), style: warningStyles, children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { fill: iconBeforeFill, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, SvgImage: iconBefore })), jsxs("div", { className: 'warning__content', children: [label && (jsx(Text, { size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), description && (jsx(Text, { size: descriptionTextSize, textColor: descriptionTextColor, children: description }))] }), (iconAfter || iconAfterSrc) && (jsx(Icon, { fill: iconAfterFill, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, SvgImage: iconAfter, onClick: function () { return setIsVisible(false); } }))] })) }));
+}
+
+export { Warning, warningAppearance, warningConfig };

package/dist/css/components/MenuItem/MenuItem.css

@@ -73,9 +73,9 @@
     @each $size in xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
         min-height: var(--menu-item-size-$(size)-min-height);
+        padding: var(--menu-item-size-$(size)-padding);
+        gap: var(--menu-item-size-$(size)-gap);
         ^^&__wrapper {
-          gap: var(--menu-item-size-$(size)-gap);
-          padding: var(--menu-item-size-$(size)-padding);
           border-radius: var(--menu-item-size-$(size)-rounded);
         }
       }

package/dist/css/components/Warning/Warning.css

@@ -0,0 +1,52 @@
+.warning {
+  display: flex;
+  &__content {
+    display: flex;
+    flex-direction: column;
+  }
+  &_shape {
+    &_rounded {
+      border-radius: var(--warning-shape-rounded);
+    }
+    &_circular {
+      border-radius: 50%;
+    }
+  }
+}
+.warning {
+  @each $size in l {
+    &_size_$(size) {
+      min-width: var(--warning-$(size)-min-width);
+      padding: var(--warning-$(size)-padding);
+      gap: var(--warning-$(size)-gap);
+      ^&__content {
+        gap: var(--warning-content-$(size)-gap);
+        min-width: var(--warning-content-$(size)-min-width);
+      }
+    }
+  }
+}
+.warning {
+  &&_skeleton {
+    background-size: 200% !important;
+    border: none;
+    animation: warningSkeleton 3s infinite linear !important;
+    background-image: linear-gradient(
+      90deg,
+      var(--color-surface-fill-secondary),
+      var(--color-surface-fill-tertiary),
+      var(--color-surface-fill-secondary)
+    ) !important;
+    & * {
+      opacity: 0%;
+    }
+  }
+}
+@keyframes warningSkeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}

package/dist/hooks/useAppearanceConfig/useAppearanceConfig.js

@@ -3,25 +3,23 @@ import { useMemo } from 'react';
 
 var useAppearanceConfig = function (appearance, componentConfig, isDisabled) {
     var appearanceConfig = useMemo(function () {
-        var _a, _b;
+        var _a, _b, _c;
         if (appearance) {
             var appearanceProps = appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
                 var _a;
                 return (__assign(__assign({}, resultConfig), (_a = componentConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
             }, {});
             if (isDisabled && ((_a = componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.appearance) === null || _a === void 0 ? void 0 : _a.disabled)) {
-                Object.assign(appearanceProps, componentConfig.appearance.disabled);
+                Object.assign(appearanceProps, (_b = componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.appearance) === null || _b === void 0 ? void 0 : _b.disabled);
             }
             return appearanceProps;
         }
         if (isDisabled) {
-            return (_b = componentConfig.appearance) === null || _b === void 0 ? void 0 : _b.disabled;
+            return (_c = componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.appearance) === null || _c === void 0 ? void 0 : _c.disabled;
         }
         return {};
     }, [appearance, componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.appearance, isDisabled]);
-    return {
-        appearanceConfig: appearanceConfig,
-    };
+    return appearanceConfig;
 };
 
 export { useAppearanceConfig };

package/dist/stories/Overview.mdx

@@ -1,11 +1,11 @@
-import { Meta, Story } from '@storybook/addon-docs/blocks'
+import { Meta, Story } from '@storybook/blocks'
 
-import * as TextareaStories from '../stories/Textarea.stories.tsx'
+import * as WarningStories from '../stories/WarningDemo.stories'
 
-<Meta title="Atoms / Textarea / Overview" />
+<Meta title="Molecules / Warning / Overview" />
 
-# Textarea
+# Warning
 
-`Textarea` позволяет пользователю вводить и редактировать данные большого объема в текстовом виде.
+`Warning` - это элемент, который предупреждает о каком-либо действии
 
-<Story of={TextareaStories.Demo} />
+<Story of={WarningStories.Demo} />

package/dist/stories/Playground.mdx

@@ -1,10 +1,10 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'
+import { Canvas, Controls, Meta } from '@storybook/blocks'
 
-import * as TextareaStories from '../stories/Textarea.stories.tsx'
+import * as WarningStories from '../stories/WarningDemo.stories.tsx'
 
-<Meta title="Atoms / Textarea / Playground" />
+<Meta title="Molecules / Warning / Playground" />
 
 # Playground
 
-<Canvas sourceState="shown" of={TextareaStories.Demo} />
-<Controls of={TextareaStories.Demo} />
+<Canvas sourceState="shown" of={WarningStories.Demo} />
+<Controls of={WarningStories.Demo} />

package/dist/types/components/Button/appearance/buttonAccent.d.ts

@@ -1,4 +1,15 @@
 declare const buttonAppearanceAccent: {
+    accentMutedPrimary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        labelTextColorHover: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+        iconFillIcon: string;
+        loaderAppearance: string;
+    };
     accentPrimary: {
         fill: string;
         fillHover: string;

package/dist/types/components/Button/appearance/buttonDanger.d.ts

@@ -1,4 +1,15 @@
 declare const buttonAppearanceDanger: {
+    dangerMutedPrimary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        labelTextColorHover: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+        iconFillIcon: string;
+        loaderAppearance: string;
+    };
     dangerPrimary: {
         fill: string;
         fillHover: string;

package/dist/types/components/Button/appearance/buttonError.d.ts

@@ -9,6 +9,17 @@ declare const buttonAppearanceError: {
         iconFillIcon: string;
         loaderAppearance: string;
     };
+    errorMutedPrimary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        labelTextColorHover: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+        iconFillIcon: string;
+        loaderAppearance: string;
+    };
     errorPrimary: {
         fill: string;
         fillHover: string;

package/dist/types/components/Button/appearance/buttonInfo.d.ts

@@ -10,6 +10,17 @@ declare const buttonAppearanceInfo: {
         iconFillIcon: string;
         loaderAppearance: string;
     };
+    infoMutedPrimary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        labelTextColorHover: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+        iconFillIcon: string;
+        loaderAppearance: string;
+    };
     infoPrimary: {
         fill: string;
         fillHover: string;

package/dist/types/components/Button/appearance/buttonPrimary.d.ts

@@ -8,6 +8,16 @@ declare const buttonAppearancePrimary: {
         iconFillIcon: string;
         loaderAppearance: string;
     };
+    primaryMutedPrimary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+        iconFillIcon: string;
+        loaderAppearance: string;
+    };
     primaryPrimary: {
         fill: string;
         fillHover: string;

package/dist/types/components/Button/appearance/buttonSecondary.d.ts

@@ -8,6 +8,16 @@ declare const buttonAppearanceSecondary: {
         iconFillIcon: string;
         loaderAppearance: string;
     };
+    secondaryMutedPrimary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+        iconFillIcon: string;
+        loaderAppearance: string;
+    };
     secondaryPrimary: {
         fill: string;
         fillHover: string;

package/dist/types/components/Button/appearance/buttonSuccess.d.ts

@@ -9,6 +9,17 @@ declare const buttonAppearanceSuccess: {
         iconFillIcon: string;
         loaderAppearance: string;
     };
+    successMutedPrimary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        labelTextColorHover: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+        iconFillIcon: string;
+        loaderAppearance: string;
+    };
     successPrimary: {
         fill: string;
         fillHover: string;

package/dist/types/components/Button/appearance/buttonSurface.d.ts

@@ -1,4 +1,14 @@
 declare const buttonAppearanceSurface: {
+    surfaceMutedPrimary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+        iconFillIcon: string;
+        loaderAppearance: string;
+    };
     surfacePrimary: {
         fill: string;
         fillHover: string;

package/dist/types/components/Button/appearance/buttonWarning.d.ts

@@ -9,6 +9,17 @@ declare const buttonAppearanceWarning: {
         iconFillIcon: string;
         loaderAppearance: string;
     };
+    warningMutedPrimary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        labelTextColorHover: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+        iconFillIcon: string;
+        loaderAppearance: string;
+    };
     warningPrimary: {
         fill: string;
         fillHover: string;

package/dist/types/components/CookiesWarning/CookiesWarning.d.ts

@@ -1,3 +1,4 @@
+import { LabelConfig } from 'src/components/Label/Label.interface';
 import type { CookiesWarningProps } from './CookiesWarning.interface';
 declare const cookiesWarningConfig: LabelConfig;
 declare function CookiesWarning(props: CookiesWarningProps): false | import("react/jsx-runtime").JSX.Element;

package/dist/types/components/MenuItem/appearance/menuItemAccent.d.ts

@@ -1,4 +1,12 @@
 declare const menuItemAppearanceAccent: {
+    accentMutedPrimary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+    };
     accentPrimary: {
         fill: string;
         fillHover: string;

package/dist/types/components/MenuItem/appearance/menuItemError.d.ts

@@ -1,4 +1,11 @@
 declare const menuItemAppearanceError: {
+    errorMutedPrimary: {
+        fill: string;
+        labelTextColor: string;
+        labelTextColorHover: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+    };
     errorPrimary: {
         fill: string;
         fillHover: string;

package/dist/types/components/MenuItem/appearance/menuItemSurface.d.ts

@@ -1,4 +1,12 @@
 declare const menuItemAppearanceSurface: {
+    surfaceMutedPrimary: {
+        fill: string;
+        fillActive: string;
+        fillActiveHover: string;
+        labelTextColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
+    };
     surfacePrimary: {
         fill: string;
         fillActive: string;