@itcase/ui 1.9.24 → 1.9.25

package/dist/{Avatar_cjs_DRZE113U.js → Avatar_cjs_CS01fvh-.js}

@@ -60,25 +60,25 @@ const avatarAppearanceShape = {
 const avatarAppearanceSize = {
     size16: {
         size: '16',
-        textSize: 'xxl',
+        textSize: 'xs',
         badgeAppearanceSize: 'sizeXXS',
         iconFillSize: '12',
     },
     size20: {
         size: '20',
-        textSize: 'xxl',
+        textSize: 'xs',
         badgeAppearanceSize: 'sizeXXS',
         iconFillSize: '12',
     },
     size24: {
         size: '24',
-        textSize: 'l',
+        textSize: 's',
         badgeAppearanceSize: 'sizeXXS',
         iconFillSize: '12',
     },
     size32: {
         size: '32',
-        textSize: 'l',
+        textSize: 'm',
         badgeAppearanceSize: 'sizeXS',
         iconFillSize: '12',
     },
@@ -88,9 +88,15 @@ const avatarAppearanceSize = {
         badgeAppearanceSize: 'sizeS',
         iconFillSize: '12',
     },
+    size48: {
+        size: '48',
+        textSize: 'l',
+        badgeAppearanceSize: 'sizeS',
+        iconFillSize: '12',
+    },
     size56: {
         size: '56',
-        textSize: 'xxl',
+        textSize: 'xl',
         badgeAppearanceSize: 'sizeM',
         iconFillSize: '16',
     },

package/dist/{Avatar_es_Cmq4xAG6.js → Avatar_es_DRObE1DB.js}

@@ -58,25 +58,25 @@ const avatarAppearanceShape = {
 const avatarAppearanceSize = {
     size16: {
         size: '16',
-        textSize: 'xxl',
+        textSize: 'xs',
         badgeAppearanceSize: 'sizeXXS',
         iconFillSize: '12',
     },
     size20: {
         size: '20',
-        textSize: 'xxl',
+        textSize: 'xs',
         badgeAppearanceSize: 'sizeXXS',
         iconFillSize: '12',
     },
     size24: {
         size: '24',
-        textSize: 'l',
+        textSize: 's',
         badgeAppearanceSize: 'sizeXXS',
         iconFillSize: '12',
     },
     size32: {
         size: '32',
-        textSize: 'l',
+        textSize: 'm',
         badgeAppearanceSize: 'sizeXS',
         iconFillSize: '12',
     },
@@ -86,9 +86,15 @@ const avatarAppearanceSize = {
         badgeAppearanceSize: 'sizeS',
         iconFillSize: '12',
     },
+    size48: {
+        size: '48',
+        textSize: 'l',
+        badgeAppearanceSize: 'sizeS',
+        iconFillSize: '12',
+    },
     size56: {
         size: '56',
-        textSize: 'xxl',
+        textSize: 'xl',
         badgeAppearanceSize: 'sizeM',
         iconFillSize: '16',
     },

package/dist/{ChipsGroup_cjs_D0bGehZY.js → ChipsGroup_cjs_Sn3uiCSJ.js}

@@ -90,10 +90,10 @@ const chipsAppearanceInfo = {
     },
     infoPrimary: {
         fill: 'infoPrimary',
-        labelTextColor: 'infoTextHover',
-        borderColor: 'infoBorderHover',
-        iconAfterFillIcon: 'infoItemHover',
-        iconBeforeFillIcon: 'infoItemHover',
+        labelTextColor: 'infoTextPrimary',
+        borderColor: 'infoBorderPrimary',
+        iconAfterFillIcon: 'infoItemPrimary',
+        iconBeforeFillIcon: 'infoItemPrimary',
     },
 };
 
@@ -138,21 +138,21 @@ const chipsAppearanceShape = {
     rounded: {
         shape: 'rounded',
     },
-    roundedS: {
-        shape: 'rounded',
-        shapeStrength: '0_5m',
-    },
-    roundedM: {
+    roundedXL: {
         shape: 'rounded',
-        shapeStrength: '1m',
+        shapeStrength: '2m',
     },
     roundedL: {
         shape: 'rounded',
         shapeStrength: '1_5m',
     },
-    roundedXL: {
+    roundedM: {
         shape: 'rounded',
-        shapeStrength: '2m',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
     },
 };
 
@@ -160,44 +160,44 @@ const chipsAppearanceSize = {
     sizeXXL: {
         size: 'xxl',
         labelTextSize: 'xl',
-        iconAfterSize: 24,
-        iconBeforeSize: 24,
+        iconAfterSize: '24',
+        iconBeforeSize: '24',
     },
     sizeXL: {
         size: 'xl',
         labelTextSize: 'm',
-        iconAfterSize: 20,
-        iconBeforeSize: 20,
+        iconAfterSize: '20',
+        iconBeforeSize: '20',
     },
     sizeL: {
         size: 'l',
         labelTextSize: 'm',
-        iconAfterSize: 16,
-        iconBeforeSize: 16,
+        iconAfterSize: '16',
+        iconBeforeSize: '16',
     },
     sizeM: {
         size: 'm',
         labelTextSize: 's',
-        iconAfterSize: 16,
-        iconBeforeSize: 16,
+        iconAfterSize: '16',
+        iconBeforeSize: '16',
     },
     sizeS: {
         size: 's',
         labelTextSize: 's',
-        iconAfterSize: 16,
-        iconBeforeSize: 16,
+        iconAfterSize: '16',
+        iconBeforeSize: '16',
     },
     sizeXS: {
         size: 'xs',
         labelTextSize: 'xs',
-        iconAfterSize: 14,
-        iconBeforeSize: 14,
+        iconAfterSize: '14',
+        iconBeforeSize: '14',
     },
     sizeXXS: {
         size: 'xxs',
         labelTextSize: 'xxs',
-        iconAfterSize: 12,
-        iconBeforeSize: 12,
+        iconAfterSize: '12',
+        iconBeforeSize: '12',
     },
 };
 
@@ -244,7 +244,7 @@ const chipsAppearanceSurface = {
         fill: 'surfacePrimary',
         fillActive: 'accentPrimary',
         fillActiveHover: 'accentSecondary',
-        fillHover: 'surfaceTertiary',
+        fillHover: 'surfaceHoverTertiary',
         labelTextActiveColor: 'accentTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
         labelTextColorHover: 'surfaceTextPrimary',
@@ -260,7 +260,7 @@ const chipsAppearanceSurface = {
         fill: 'surfaceSecondary',
         fillActive: 'accentPrimary',
         fillActiveHover: 'accentSecondary',
-        fillHover: 'surfaceTertiary',
+        fillHover: 'surfaceHoverTertiary',
         labelTextActiveColor: 'accentTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
         labelTextColorHover: 'surfaceTextPrimary',
@@ -272,7 +272,7 @@ const chipsAppearanceSurface = {
     },
     surfaceTertiary: {
         fill: 'surfaceTertiary',
-        fillHover: 'surfaceHover',
+        fillHover: 'surfaceHoverTertiary',
         labelTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderTertiary',
     },
@@ -318,16 +318,16 @@ const chipsConfig = {
     },
 };
 function Chips(props) {
-    const { appearance, className, dataTestId, dataTour, label = '', iconAfter, iconAfterSrc, iconBefore, iconBeforeSrc, isActive, isDisabled, isSkeleton, onClick, onClickIconAfter, onClickIconBefore, children, } = 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, iconAfterFill, iconAfterFillActiveIcon, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconBeforeFill, iconBeforeFillActiveIcon, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, 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, iconAfterFill, iconAfterFillActiveIcon, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBefore, 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-test-id": 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, { className: "chips__badge", appearance: badgeAppearance, 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-test-id": 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 }))] }) }));
 }
 
 function ChipsGroup(props) {
@@ -338,7 +338,7 @@ function ChipsGroup(props) {
     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-test-id": 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: () => onClick(item) }, item.id))) }));
+            : 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))) }));
 }
 
 exports.Chips = Chips;

package/dist/{ChipsGroup_es_DWvsJ5bu.js → ChipsGroup_es_CbzUWqG9.js}

@@ -88,10 +88,10 @@ const chipsAppearanceInfo = {
     },
     infoPrimary: {
         fill: 'infoPrimary',
-        labelTextColor: 'infoTextHover',
-        borderColor: 'infoBorderHover',
-        iconAfterFillIcon: 'infoItemHover',
-        iconBeforeFillIcon: 'infoItemHover',
+        labelTextColor: 'infoTextPrimary',
+        borderColor: 'infoBorderPrimary',
+        iconAfterFillIcon: 'infoItemPrimary',
+        iconBeforeFillIcon: 'infoItemPrimary',
     },
 };
 
@@ -136,21 +136,21 @@ const chipsAppearanceShape = {
     rounded: {
         shape: 'rounded',
     },
-    roundedS: {
-        shape: 'rounded',
-        shapeStrength: '0_5m',
-    },
-    roundedM: {
+    roundedXL: {
         shape: 'rounded',
-        shapeStrength: '1m',
+        shapeStrength: '2m',
     },
     roundedL: {
         shape: 'rounded',
         shapeStrength: '1_5m',
     },
-    roundedXL: {
+    roundedM: {
         shape: 'rounded',
-        shapeStrength: '2m',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
     },
 };
 
@@ -158,44 +158,44 @@ const chipsAppearanceSize = {
     sizeXXL: {
         size: 'xxl',
         labelTextSize: 'xl',
-        iconAfterSize: 24,
-        iconBeforeSize: 24,
+        iconAfterSize: '24',
+        iconBeforeSize: '24',
     },
     sizeXL: {
         size: 'xl',
         labelTextSize: 'm',
-        iconAfterSize: 20,
-        iconBeforeSize: 20,
+        iconAfterSize: '20',
+        iconBeforeSize: '20',
     },
     sizeL: {
         size: 'l',
         labelTextSize: 'm',
-        iconAfterSize: 16,
-        iconBeforeSize: 16,
+        iconAfterSize: '16',
+        iconBeforeSize: '16',
     },
     sizeM: {
         size: 'm',
         labelTextSize: 's',
-        iconAfterSize: 16,
-        iconBeforeSize: 16,
+        iconAfterSize: '16',
+        iconBeforeSize: '16',
     },
     sizeS: {
         size: 's',
         labelTextSize: 's',
-        iconAfterSize: 16,
-        iconBeforeSize: 16,
+        iconAfterSize: '16',
+        iconBeforeSize: '16',
     },
     sizeXS: {
         size: 'xs',
         labelTextSize: 'xs',
-        iconAfterSize: 14,
-        iconBeforeSize: 14,
+        iconAfterSize: '14',
+        iconBeforeSize: '14',
     },
     sizeXXS: {
         size: 'xxs',
         labelTextSize: 'xxs',
-        iconAfterSize: 12,
-        iconBeforeSize: 12,
+        iconAfterSize: '12',
+        iconBeforeSize: '12',
     },
 };
 
@@ -242,7 +242,7 @@ const chipsAppearanceSurface = {
         fill: 'surfacePrimary',
         fillActive: 'accentPrimary',
         fillActiveHover: 'accentSecondary',
-        fillHover: 'surfaceTertiary',
+        fillHover: 'surfaceHoverTertiary',
         labelTextActiveColor: 'accentTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
         labelTextColorHover: 'surfaceTextPrimary',
@@ -258,7 +258,7 @@ const chipsAppearanceSurface = {
         fill: 'surfaceSecondary',
         fillActive: 'accentPrimary',
         fillActiveHover: 'accentSecondary',
-        fillHover: 'surfaceTertiary',
+        fillHover: 'surfaceHoverTertiary',
         labelTextActiveColor: 'accentTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
         labelTextColorHover: 'surfaceTextPrimary',
@@ -270,7 +270,7 @@ const chipsAppearanceSurface = {
     },
     surfaceTertiary: {
         fill: 'surfaceTertiary',
-        fillHover: 'surfaceHover',
+        fillHover: 'surfaceHoverTertiary',
         labelTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderTertiary',
     },
@@ -316,16 +316,16 @@ const chipsConfig = {
     },
 };
 function Chips(props) {
-    const { appearance, className, dataTestId, dataTour, label = '', iconAfter, iconAfterSrc, iconBefore, iconBeforeSrc, isActive, isDisabled, isSkeleton, onClick, onClickIconAfter, onClickIconBefore, children, } = props;
+    const { appearance, className, dataTestId, dataTour, label = '', isActive, isDisabled, isSkeleton, onClick, onClickIconAfter, onClickIconBefore, children, } = props;
     const appearanceConfig = useAppearanceConfig(appearance, chipsConfig, isDisabled);
     const propsGenerator = 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, iconAfterFill, iconAfterFillActiveIcon, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconBeforeFill, iconBeforeFillActiveIcon, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, 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, iconAfterFill, iconAfterFillActiveIcon, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeFill, iconBeforeFillActiveIcon, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
     const { styles: chipsStyles } = useStyles(props);
     return (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-test-id": dataTestId && `${dataTestId}Chips`, "data-tour": dataTour, style: chipsStyles, onClick: !isDisabled ? onClick : undefined, children: jsxs("div", { className: "chips__inner", children: [(iconBefore || iconBeforeSrc) && (jsx(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' ? (jsx(Text, { className: "chips__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveColorHover, textColorHover: labelTextColorHover, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })) : (jsx("div", { className: "chips__label", children: label })), children, (iconAfter || iconAfterSrc) && (jsx(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 && (jsx(Badge, { className: "chips__badge", appearance: badgeAppearance, 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-test-id": dataTestId && `${dataTestId}Chips`, "data-tour": dataTour, style: chipsStyles, onClick: !isDisabled ? onClick : undefined, children: jsxs("div", { className: "chips__inner", children: [(iconBefore || iconBeforeSrc) && (jsx(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' ? (jsx(Text, { className: "chips__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveColorHover, textColorHover: labelTextColorHover, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })) : (jsx("div", { className: "chips__label", children: label })), children, (iconAfter || iconAfterSrc) && (jsx(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 && (jsx(Badge, { appearance: badgeAppearance, className: "chips__badge", size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue }))] }) }));
 }
 
 function ChipsGroup(props) {
@@ -336,7 +336,7 @@ function ChipsGroup(props) {
     const { styles: groupStyles } = useStyles(props);
     return (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-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: children
             ? children
-            : chipsList?.map((item) => (jsx(Chips, { appearance: chipsAppearance, label: item.label, iconAfter: item.iconAfter, iconBefore: item.iconBefore, isActive: item.isActive, isDisabled: item.isDisabled, onClick: () => onClick(item) }, item.id))) }));
+            : chipsList?.map((item) => (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))) }));
 }
 
 export { Chips as C, chipsAppearance as a, ChipsGroup as b, chipsConfig as c };

package/dist/{DatePicker_cjs_Cm50AX0J.js → DatePicker_cjs_Bfiav-tb.js}

@@ -8,7 +8,7 @@ var DatePicker = require('react-datepicker');
 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 Button = require('./Button_cjs_BRShPZw4.js');
+var Button = require('./Button_cjs_DPs7uj_n.js');
 var Icon = require('./Icon_cjs_BgGtdviU.js');
 var Input = require('./Input_cjs_KgFCCi2U.js');
 var Label = require('./Label_cjs_FRIVslSV.js');

package/dist/{DatePicker_es_B-WPA9y9.js → DatePicker_es_CtbVXMmy.js}

@@ -6,7 +6,7 @@ import DatePicker from 'react-datepicker';
 import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
-import { B as Button } from './Button_es_CvRcO3xM.js';
+import { B as Button } from './Button_es_ljlle2Pu.js';
 import { I as Icon } from './Icon_es_CtZHchZc.js';
 import { I as Input } from './Input_es_I8GPoibb.js';
 import { L as Label } from './Label_es_CI2mt2wH.js';

package/dist/{Group_cjs_393FExUN.js → Group_cjs_DNI9PTBq.js}

@@ -51,7 +51,7 @@ const Group = React.forwardRef(function Group(props, ref) {
                     `border-color_hover_${borderColorHoverClass}`
                 : borderColorActiveHoverClass &&
                     `border-color_active_hover_${borderColorActiveHoverClass}`
-            : fillDisabledClass && `fill_${fillDisabledClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, print === false && 'no-print', print === true && 'print', onClick && 'cursor_type_pointer'), name: name, ref: ref, "data-test-id": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: Object.assign({}, groupStyles, style), onClick: onClick, onMouseDown: onMouseDown, children: children }));
+            : fillDisabledClass && `fill_${fillDisabledClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, !print && 'no-print', print && 'print', onClick && 'cursor_type_pointer'), name: name, ref: ref, "data-test-id": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: Object.assign({}, groupStyles, style), onClick: onClick, onMouseDown: onMouseDown, children: children }));
 });
 
 exports.Group = Group;

package/dist/{Group_es_BtE98Vb5.js → Group_es_nBtACpoG.js}

@@ -49,7 +49,7 @@ const Group = React.forwardRef(function Group(props, ref) {
                     `border-color_hover_${borderColorHoverClass}`
                 : borderColorActiveHoverClass &&
                     `border-color_active_hover_${borderColorActiveHoverClass}`
-            : fillDisabledClass && `fill_${fillDisabledClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, print === false && 'no-print', print === true && 'print', onClick && 'cursor_type_pointer'), name: name, ref: ref, "data-test-id": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: Object.assign({}, groupStyles, style), onClick: onClick, onMouseDown: onMouseDown, children: children }));
+            : fillDisabledClass && `fill_${fillDisabledClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, !print && 'no-print', print && 'print', onClick && 'cursor_type_pointer'), name: name, ref: ref, "data-test-id": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: Object.assign({}, groupStyles, style), onClick: onClick, onMouseDown: onMouseDown, children: children }));
 });
 
 export { Group as G, groupAppearance as a, groupConfig as g };

package/dist/{SelectContainer_cjs_CsHj-fP_.js → SelectContainer_cjs_CdLyIuwj.js}

@@ -7,7 +7,7 @@ var Select = require('react-select');
 var CreatableSelect = require('react-select/creatable');
 var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var Group = require('./Group_cjs_393FExUN.js');
+var Group = require('./Group_cjs_DNI9PTBq.js');
 var Text = require('./Text_cjs_DG2eMKBi.js');
 var _default = require('@itcase/icons/default');
 var Icon = require('./Icon_cjs_BgGtdviU.js');

package/dist/{SelectContainer_es_Bc4Laoir.js → SelectContainer_es_DGTrm8OT.js}

@@ -5,7 +5,7 @@ import Select, { components } from 'react-select';
 import CreatableSelect from 'react-select/creatable';
 import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { G as Group } from './Group_es_BtE98Vb5.js';
+import { G as Group } from './Group_es_nBtACpoG.js';
 import { T as Text } from './Text_es_CU9KR5AE.js';
 import { icons12, icons16, icons14, icons24 } from '@itcase/icons/default';
 import { I as Icon, B as Badge } from './Icon_es_CtZHchZc.js';

package/dist/cjs/components/Avatar.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Avatar = require('../../Avatar_cjs_DRZE113U.js');
+var Avatar = require('../../Avatar_cjs_CS01fvh-.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');

package/dist/cjs/components/AvatarStack.js

@@ -5,8 +5,8 @@ var clsx = require('clsx');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Avatar = require('../../Avatar_cjs_DRZE113U.js');
-var Group = require('../../Group_cjs_393FExUN.js');
+var Avatar = require('../../Avatar_cjs_CS01fvh-.js');
+var Group = require('../../Group_cjs_DNI9PTBq.js');
 var Text = require('../../Text_cjs_DG2eMKBi.js');
 require('react');
 require('lodash/camelCase');

package/dist/cjs/components/Button.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Button = require('../../Button_cjs_BRShPZw4.js');
+var Button = require('../../Button_cjs_DPs7uj_n.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');

package/dist/cjs/components/Cell.js

@@ -103,50 +103,46 @@ const cellAppearanceStyle = {
 const cellAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
-        fillHover: 'surfacePrimaryHover',
+        fillHover: 'surfaceHoverPrimary',
         titleIconItemFill: 'surfaceItemPrimary',
         titleLabelAppearance: 'accentPrimary',
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'surfaceTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderPrimary',
         valueIconItemFill: 'surfaceItemPrimary',
         valueLabelAppearance: 'accentPrimary',
         valueTextColor: 'surfaceTextPrimary',
     },
-    surfaceSecondary: {
-        fill: 'surfaceSecondary',
-        fillHover: 'surfaceSecondaryHover',
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillHover: 'surfaceHoverQuaternary',
         titleIconItemFill: 'surfaceItemPrimary',
         titleLabelAppearance: 'accentPrimary',
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'surfaceTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderPrimary',
         valueIconItemFill: 'surfaceItemPrimary',
         valueLabelAppearance: 'accentPrimary',
         valueTextColor: 'surfaceTextPrimary',
     },
-    surfaceTertiary: {
-        fill: 'surfaceTertiary',
-        fillHover: 'surfaceTertiaryHover',
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceHoverSecondary',
         titleIconItemFill: 'surfaceItemPrimary',
         titleLabelAppearance: 'accentPrimary',
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'surfaceTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderPrimary',
         valueIconItemFill: 'surfaceItemPrimary',
         valueLabelAppearance: 'accentPrimary',
         valueTextColor: 'surfaceTextPrimary',
     },
-    surfaceQuaternary: {
-        fill: 'surfaceQuaternary',
-        fillHover: 'surfaceQuaternaryHover',
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceHoverTertiary',
         titleIconItemFill: 'surfaceItemPrimary',
         titleLabelAppearance: 'accentPrimary',
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'surfaceTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderPrimary',
         valueIconItemFill: 'surfaceItemPrimary',
@@ -168,7 +164,7 @@ const cellConfig = {
     },
 };
 function Cell(props) {
-    const { className, appearance, title, titleIcon, titleLabel, titleTag, showTitleLabel, showValueLabel, value, valueIcon, valueTag, before, after, isActive, isEqual, isSameWidth, onClick, onMouseEnter, } = props;
+    const { appearance, className, title, titleIcon, titleLabel, titleTag, showTitleLabel, showValueLabel, value, valueIcon, valueTag, before, after, isActive, isEqual, isSameWidth, onClick, onMouseEnter, } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, cellConfig);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { directionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, titleIconFill, titleIconFillHover, titleIconFillSize, titleIconItemFill, titleIconShape, titleIconSrc, titleLabelAppearance, titleLabelAppearanceSize, titleLabelShape, titleLabelSize, titleLabelTextSize, titleTextColor, titleTextSize, titleTextTruncate, titleTextWeight, titleTextWrap, borderColorActiveClass, borderColorActiveHoverClass, borderColorClass, borderColorHoverClass, reverseClass, shapeClass, sizeClass, valueIconFill, valueIconFillHover, valueIconFillSize, valueIconItemFill, valueIconShape, valueIconSrc, valueLabel, valueLabelAppearance, valueLabelAppearanceSize, valueLabelShape, valueLabelSize, valueLabelTextSize, valueTextAlign, valueTextColor, valueTextSize, valueTextTruncate, valueTextWeight, valueTextWrap, widthClass, zeroGap, zeroPadding, } = propsGenerator;
@@ -185,7 +181,7 @@ function Cell(props) {
             ? borderColorHoverClass &&
                 `border-color_hover_${borderColorHoverClass}`
             : borderColorActiveHoverClass &&
-                `border-color_active_hover_${borderColorActiveHoverClass}`, reverseClass && `cell_reverse_${reverseClass}`, shapeClass && `cell_shape_${shapeClass}`, widthClass && `width_${widthClass}`, zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap'), style: cellStyles, onClick: onClick, onMouseEnter: onMouseEnter, children: [before && jsxRuntime.jsx("div", { className: "cell__before", children: before }), jsxRuntime.jsxs("div", { className: clsx('cell__wrapper', directionClass && `cell__wrapper_direction_${directionClass}`, isEqual && 'cell__wrapper-equal', isSameWidth && 'cell__wrapper-same-width'), children: [title && (jsxRuntime.jsxs("div", { className: "cell__data", style: dataStyles, children: [jsxRuntime.jsx(Text.Text, { className: "cell__title", size: titleTextSize, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, tag: titleTag, children: title }), (titleIcon || titleIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__title-icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), (showTitleLabel || titleLabel) && (jsxRuntime.jsx(Label.Label, { className: "cell__title-label", appearance: `${titleLabelAppearance} ${titleLabelAppearanceSize}`, size: titleLabelSize, label: titleLabel, labelTextSize: titleLabelTextSize, shape: titleLabelShape }))] })), value && (jsxRuntime.jsxs("div", { className: "cell__data", style: dataStyles, children: [jsxRuntime.jsx(Text.Text, { className: "cell__value", size: valueTextSize, textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, tag: valueTag, children: value }), (valueIcon || valueIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__value-icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), (showValueLabel || valueLabel) && (jsxRuntime.jsx(Label.Label, { className: "cell__value-label", appearance: `${valueLabelAppearance} ${valueLabelAppearanceSize}`, size: valueLabelSize, label: valueLabel, labelTextSize: valueLabelTextSize, shape: valueLabelShape }))] }))] }), after && jsxRuntime.jsx("div", { className: "cell__after", children: after })] }));
+                `border-color_active_hover_${borderColorActiveHoverClass}`, reverseClass && `cell_reverse_${reverseClass}`, shapeClass && `cell_shape_${shapeClass}`, widthClass && `width_${widthClass}`, zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap'), style: cellStyles, onClick: onClick, onMouseEnter: onMouseEnter, children: [before && jsxRuntime.jsx("div", { className: "cell__before", children: before }), jsxRuntime.jsxs("div", { className: clsx('cell__wrapper', directionClass && `cell__wrapper_direction_${directionClass}`, isEqual && 'cell__wrapper-equal', isSameWidth && 'cell__wrapper-same-width'), children: [title && (jsxRuntime.jsxs("div", { className: "cell__data", style: dataStyles, children: [jsxRuntime.jsx(Text.Text, { className: "cell__title", size: titleTextSize, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, tag: titleTag, children: title }), (titleIcon || titleIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__title-icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), (showTitleLabel || titleLabel) && (jsxRuntime.jsx(Label.Label, { appearance: `${titleLabelAppearance} ${titleLabelAppearanceSize}`, className: "cell__title-label", size: titleLabelSize, label: titleLabel, labelTextSize: titleLabelTextSize, shape: titleLabelShape }))] })), value && (jsxRuntime.jsxs("div", { className: "cell__data", style: dataStyles, children: [jsxRuntime.jsx(Text.Text, { className: "cell__value", size: valueTextSize, textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, tag: valueTag, children: value }), (valueIcon || valueIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__value-icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), (showValueLabel || valueLabel) && (jsxRuntime.jsx(Label.Label, { appearance: `${valueLabelAppearance} ${valueLabelAppearanceSize}`, className: "cell__value-label", size: valueLabelSize, label: valueLabel, labelTextSize: valueLabelTextSize, shape: valueLabelShape }))] }))] }), after && jsxRuntime.jsx("div", { className: "cell__after", children: after })] }));
 }
 
 exports.Cell = Cell;

package/dist/cjs/components/Chips.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var ChipsGroup = require('../../ChipsGroup_cjs_D0bGehZY.js');
+var ChipsGroup = require('../../ChipsGroup_cjs_Sn3uiCSJ.js');
 require('react/jsx-runtime');
 require('clsx');
 require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');