@itcase/ui 1.9.52 → 1.9.53

package/dist/{Avatar_cjs_CvbURI0f.js → Avatar_cjs_BIHJrAbQ.js}

@@ -5,7 +5,7 @@ var React = require('react');
 var clsx = require('clsx');
 var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var Icon = require('./Icon_cjs_CuqEv1jm.js');
+var Icon = require('./Icon_cjs_DTvdhr8B.js');
 var Image = require('./Image_cjs_Hvjp2QDB.js');
 var Text = require('./Text_cjs_erTy2pUN.js');
 

package/dist/{Avatar_es_CV-ffIJu.js → Avatar_es_CtP68jPM.js}

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import clsx from 'clsx';
 import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { I as Icon, B as Badge } from './Icon_es_BYViOa6l.js';
+import { I as Icon, B as Badge } from './Icon_es_kewxGRUB.js';
 import { I as Image } from './Image_es_DpOCNWpn.js';
 import { T as Text } from './Text_es_DVNvU0m0.js';
 

package/dist/{Button_cjs_BSfL-20W.js → Button_cjs_B8cIJYbm.js}

@@ -3,15 +3,15 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var mergeAppearanceKeys = require('./cjs/utils/mergeAppearanceKeys.js');
+var Icon = require('./Icon_cjs_DTvdhr8B.js');
+var Link = require('./Link_cjs_Dn7UhCYe.js');
+var Loader = require('./Loader_cjs_CJpdLndn.js');
+var Text = require('./Text_cjs_erTy2pUN.js');
 var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useHoldProgress = require('./cjs/hooks/useHoldProgress.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-var Icon = require('./Icon_cjs_CuqEv1jm.js');
-var Link = require('./Link_cjs_Dn7UhCYe.js');
-var Loader = require('./Loader_cjs_DMIUN6_q.js');
-var Text = require('./Text_cjs_erTy2pUN.js');
+var mergeAppearanceKeys = require('./cjs/utils/mergeAppearanceKeys.js');
 
 const buttonAppearanceAccent = {
     accentMutedPrimary: {
@@ -393,7 +393,7 @@ const Button = React.forwardRef(function Button(props, ref) {
     const { appearance, className, dataTestId, dataTour, label, Badge, href, htmlType = 'button', link, rel, target, tooltip, before, after, isDisabled, isHolding, isLoading = false, onClick, onHoldComplete, onMouseDown, children, } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, buttonConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    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 { 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 = 'dot', shapeClass, shapeStrengthClass, sizeClass, widthClass, zeroGap, zeroPadding, isSkeleton, } = propsGenerator;
     const { label: labelStyles, styles: buttonStyles } = useStyles.useStyles(props);
     const { holdState, onHoldEnd, onHoldStart } = useHoldProgress.useHoldProgress({
         holdDurationMs: 500, // hardcoded in button.css

package/dist/{Button_es_Dk6_9N-r.js → Button_es_DQGp8Ipn.js}

@@ -1,15 +1,15 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';
-import { mergeAppearanceKeys } from './utils/mergeAppearanceKeys.js';
+import { I as Icon } from './Icon_es_kewxGRUB.js';
+import { a as LinkWrapper } from './Link_es_BDAmhIzd.js';
+import { L as Loader } from './Loader_es_CqlLujBJ.js';
+import { T as Text } from './Text_es_DVNvU0m0.js';
 import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useHoldProgress } from './hooks/useHoldProgress.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
-import { I as Icon } from './Icon_es_BYViOa6l.js';
-import { a as LinkWrapper } from './Link_es_BDAmhIzd.js';
-import { L as Loader } from './Loader_es_DLb2P-Sk.js';
-import { T as Text } from './Text_es_DVNvU0m0.js';
+import { mergeAppearanceKeys } from './utils/mergeAppearanceKeys.js';
 
 const buttonAppearanceAccent = {
     accentMutedPrimary: {
@@ -391,7 +391,7 @@ const Button = React.forwardRef(function Button(props, ref) {
     const { appearance, className, dataTestId, dataTour, label, Badge, href, htmlType = 'button', link, rel, target, tooltip, before, after, isDisabled, isHolding, isLoading = false, onClick, onHoldComplete, 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, 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 { 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 = 'dot', shapeClass, shapeStrengthClass, sizeClass, widthClass, zeroGap, zeroPadding, isSkeleton, } = propsGenerator;
     const { label: labelStyles, styles: buttonStyles } = useStyles(props);
     const { holdState, onHoldEnd, onHoldStart } = useHoldProgress({
         holdDurationMs: 500, // hardcoded in button.css

package/dist/{ChipsGroup_cjs_CE-nNENH.js → ChipsGroup_cjs_C27x9x9O.js}

@@ -5,7 +5,7 @@ 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_CuqEv1jm.js');
+var Icon = require('./Icon_cjs_DTvdhr8B.js');
 var Text = require('./Text_cjs_erTy2pUN.js');
 
 const chipsAppearanceAccent = {

package/dist/{ChipsGroup_es_CxqwFgoo.js → ChipsGroup_es_BTe1MYhV.js}

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
 import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
-import { I as Icon, B as Badge } from './Icon_es_BYViOa6l.js';
+import { I as Icon, B as Badge } from './Icon_es_kewxGRUB.js';
 import { T as Text } from './Text_es_DVNvU0m0.js';
 
 const chipsAppearanceAccent = {

package/dist/{DatePicker_cjs_BJzVpk0o.js → DatePicker_cjs_CY5UAP1l.js}

@@ -5,10 +5,10 @@ var React = require('react');
 var clsx = require('clsx');
 var locale = require('date-fns/locale');
 var DatePicker = require('react-datepicker');
-var Button = require('./Button_cjs_BSfL-20W.js');
-var Icon = require('./Icon_cjs_CuqEv1jm.js');
+var Button = require('./Button_cjs_B8cIJYbm.js');
+var Icon = require('./Icon_cjs_DTvdhr8B.js');
 var Input = require('./Input_cjs_BQIi1N63.js');
-var Label = require('./Label_cjs_DsuCRIyo.js');
+var Label = require('./Label_cjs_RI5tFcPt.js');
 var Text = require('./Text_cjs_erTy2pUN.js');
 var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');

package/dist/{DatePicker_es_BP0iWHMt.js → DatePicker_es_Cze2Bv6w.js}

@@ -3,10 +3,10 @@ import React, { useMemo, useCallback, useRef } from 'react';
 import clsx from 'clsx';
 import { ru } from 'date-fns/locale';
 import DatePicker from 'react-datepicker';
-import { B as Button } from './Button_es_Dk6_9N-r.js';
-import { I as Icon } from './Icon_es_BYViOa6l.js';
+import { B as Button } from './Button_es_DQGp8Ipn.js';
+import { I as Icon } from './Icon_es_kewxGRUB.js';
 import { I as Input } from './Input_es_BYbc2X9M.js';
-import { L as Label } from './Label_es_BPQhW13g.js';
+import { L as Label } from './Label_es_CNRTIAWo.js';
 import { T as Text } from './Text_es_DVNvU0m0.js';
 import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';

package/dist/{DropdownItem_cjs_pJblsTmA.js → DropdownItem_cjs_k28TIoDU.js}

@@ -6,7 +6,7 @@ var clsx = require('clsx');
 var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-var Icon = require('./Icon_cjs_CuqEv1jm.js');
+var Icon = require('./Icon_cjs_DTvdhr8B.js');
 var Divider = require('./Divider_cjs_C5Ou2Kqa.js');
 var Text = require('./Text_cjs_erTy2pUN.js');
 

package/dist/{DropdownItem_es_Xq7G5-UI.js → DropdownItem_es_DjPgbwtU.js}

@@ -4,7 +4,7 @@ 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, B as Badge } from './Icon_es_BYViOa6l.js';
+import { I as Icon, B as Badge } from './Icon_es_kewxGRUB.js';
 import { D as Divider } from './Divider_es_D2snK_vn.js';
 import { T as Text } from './Text_es_DVNvU0m0.js';
 

package/dist/{Icon_cjs_CuqEv1jm.js → Icon_cjs_DTvdhr8B.js}

@@ -4,12 +4,13 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var SVG = require('react-inlinesvg');
-var urlWithAssetPrefix = require('./cjs/hoc/urlWithAssetPrefix.js');
+var Link = require('./Link_cjs_Dn7UhCYe.js');
 var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-var Link = require('./Link_cjs_Dn7UhCYe.js');
 var Text = require('./Text_cjs_erTy2pUN.js');
+var urlWithAssetPrefix = require('./cjs/hoc/urlWithAssetPrefix.js');
+var mergeAppearanceKeys = require('./cjs/utils/mergeAppearanceKeys.js');
 
 const badgeAppearanceAccent = {
     accentPrimary: {
@@ -772,141 +773,169 @@ 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',
     },
@@ -1033,7 +1062,7 @@ const Icon = urlWithAssetPrefix.urlWithAssetPrefix(React.forwardRef(function Ico
     }, [SvgImage, imageSrc, width, height, saveFillStroke]);
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, iconConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    const { alignmentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, fillSizeClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, badgeAppearance, 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, badgeAppearanceSize, badgeShape, badgeSize, badgeTextColor, badgeTextSize, badgeValue, centeringClass, iconFillActiveClass, iconFillActiveHoverClass, iconFillClass, iconFillDisabledClass, iconFillHoverClass, iconSizeClass, shapeClass, shapeStrengthClass, tooltipAppearance, tooltipText, tooltipTextSize, tooltipTitle, tooltipTitleSize, } = propsGenerator;
     const { styles: iconStyles } = useStyles.useStyles(props);
     return (jsxRuntime.jsxs("div", { id: id, className: clsx(className, 'icon', !isActive
             ? fillClass && `fill_${fillClass}`
@@ -1048,7 +1077,7 @@ const Icon = urlWithAssetPrefix.urlWithAssetPrefix(React.forwardRef(function Ico
                 `icon_fill_active_hover_${iconFillActiveHoverClass}`, isDisabled &&
             iconFillDisabledClass &&
             `icon_fill_disabled_${iconFillDisabledClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass &&
-            `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, badgeValue && 'icon_with-badge', centeringClass && `centering_${centeringClass}`, onClick && 'cursor_type_pointer', isSkeleton && `icon_skeleton`), ref: ref, "data-testid": dataTestId, "data-tour": dataTour, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxRuntime.jsxs(Link.LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass && `icon_size_${iconSizeClass}`), href: link || href, LinkComponent: "div", rel: linkRel, target: linkTarget, children: [ImageComponent, (badgeValue || notification) && (jsxRuntime.jsx(Badge, { appearance: badgeAppearance, className: clsx(badgeClass, 'icon__badge'), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), showTooltip && (jsxRuntime.jsx(Tooltip, { appearance: tooltipAppearance, className: clsx(className, 'icon__tooltip', alignmentClass && `alignment_${alignmentClass}`), title: tooltipTitle, titleSize: tooltipTitleSize, text: tooltipText, textSize: tooltipTextSize }))] }), after] }));
+            `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, badgeValue && 'icon_with-badge', centeringClass && `centering_${centeringClass}`, onClick && 'cursor_type_pointer', isSkeleton && `icon_skeleton`), ref: ref, "data-testid": dataTestId, "data-tour": dataTour, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxRuntime.jsxs(Link.LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass && `icon_size_${iconSizeClass}`), href: link || href, LinkComponent: "div", rel: linkRel, target: linkTarget, children: [ImageComponent, (badgeValue || notification) && (jsxRuntime.jsx(Badge, { appearance: mergeAppearanceKeys.mergeAppearanceKeys(badgeAppearance, badgeAppearanceSize), className: clsx(badgeClass, 'icon__badge'), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), showTooltip && (jsxRuntime.jsx(Tooltip, { appearance: tooltipAppearance, className: clsx(className, 'icon__tooltip', alignmentClass && `alignment_${alignmentClass}`), title: tooltipTitle, titleSize: tooltipTitleSize, text: tooltipText, textSize: tooltipTextSize }))] }), after] }));
 }));
 const removeFillStroke = (code) => {
     return code

package/dist/{Icon_es_BYViOa6l.js → Icon_es_kewxGRUB.js}

@@ -2,12 +2,13 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useMemo, useRef, useState, useCallback, useImperativeHandle } from 'react';
 import clsx from 'clsx';
 import SVG from 'react-inlinesvg';
-import { urlWithAssetPrefix } from './hoc/urlWithAssetPrefix.js';
+import { a as LinkWrapper } from './Link_es_BDAmhIzd.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_BDAmhIzd.js';
 import { T as Text } from './Text_es_DVNvU0m0.js';
+import { urlWithAssetPrefix } from './hoc/urlWithAssetPrefix.js';
+import { mergeAppearanceKeys } from './utils/mergeAppearanceKeys.js';
 
 const badgeAppearanceAccent = {
     accentPrimary: {
@@ -770,141 +771,169 @@ 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',
     },
@@ -1031,7 +1060,7 @@ const Icon = urlWithAssetPrefix(React.forwardRef(function Icon(props, ref) {
     }, [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, 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, badgeAppearanceSize, badgeShape, badgeSize, badgeTextColor, badgeTextSize, badgeValue, centeringClass, iconFillActiveClass, iconFillActiveHoverClass, iconFillClass, iconFillDisabledClass, iconFillHoverClass, iconSizeClass, shapeClass, shapeStrengthClass, tooltipAppearance, tooltipText, tooltipTextSize, tooltipTitle, tooltipTitleSize, } = propsGenerator;
     const { styles: iconStyles } = useStyles(props);
     return (jsxs("div", { id: id, className: clsx(className, 'icon', !isActive
             ? fillClass && `fill_${fillClass}`
@@ -1046,7 +1075,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, 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: mergeAppearanceKeys(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] }));
 }));
 const removeFillStroke = (code) => {
     return code

package/dist/{Label_cjs_DsuCRIyo.js → Label_cjs_RI5tFcPt.js}

@@ -6,7 +6,7 @@ var clsx = require('clsx');
 var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-var Icon = require('./Icon_cjs_CuqEv1jm.js');
+var Icon = require('./Icon_cjs_DTvdhr8B.js');
 var Text = require('./Text_cjs_erTy2pUN.js');
 
 const labelAppearanceAccent = {

package/dist/{Label_es_BPQhW13g.js → Label_es_CNRTIAWo.js}

@@ -4,7 +4,7 @@ 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_BYViOa6l.js';
+import { I as Icon, T as Tooltip } from './Icon_es_kewxGRUB.js';
 import { T as Text } from './Text_es_DVNvU0m0.js';
 
 const labelAppearanceAccent = {