@itcase/ui 1.8.130 → 1.8.132

package/dist/{ChipsGroup_cjs_BMkiDYau.js → ChipsGroup_cjs_Du8WHI-Y.js}

@@ -52,11 +52,15 @@ const chipsAppearanceDanger = {
 
 const chipsAppearanceDisabled = {
     disabled: {
-        fill: 'surfaceDisabled',
-        labelTextColor: 'surfaceTextDisabled',
-        borderColor: 'surfaceBorderDisabled',
-        iconAfterFillIcon: 'surfaceItemDisabled',
-        iconBeforeFillIcon: 'surfaceItemDisabled',
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceSecondary',
+        labelTextActiveColor: 'surfaceTextQuaternary',
+        labelTextActiveColorHover: 'surfaceTextQuaternary',
+        labelTextColor: 'surfaceTextQuaternary',
+        labelTextColorHover: 'surfaceTextQuaternary',
+        borderColor: 'disabledBorderPrimary',
+        iconAfterFillIcon: 'disabledItemPrimary',
+        iconBeforeFillIcon: 'disabledItemPrimary',
     },
 };
 
@@ -244,7 +248,7 @@ const chipsAppearanceSurface = {
         fillHover: 'surfaceTertiary',
         labelTextActiveColor: 'accentTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
-        labelTextHoverColor: 'surfaceTextPrimary',
+        labelTextColorHover: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderTertiary',
         activeIconItemFill: 'surfaceItemSecondary',
         badgeAppearance: 'surfacePrimary sizeXS solid',
@@ -260,7 +264,7 @@ const chipsAppearanceSurface = {
         fillHover: 'surfaceTertiary',
         labelTextActiveColor: 'accentTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
-        labelTextHoverColor: 'surfaceTextPrimary',
+        labelTextColorHover: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderSecondary',
         iconAfterFillActiveIcon: 'accentItemPrimary',
         iconAfterFillIcon: 'surfaceItemPrimary',
@@ -315,16 +319,16 @@ const chipsConfig = {
     },
 };
 function Chips(props) {
-    const { dataTestId, dataTour, className, appearance, label = '', isDisabled, iconAfter, iconAfterSrc, iconBefore, iconBeforeSrc, isActive, isSkeleton, onClick, onClickIconAfter, onClickIconBefore, children, } = props;
+    const { appearance, className, dataTestId, dataTour, label = '', iconAfter, iconAfterSrc, iconBefore, iconBeforeSrc, 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, labelTextActiveHoverColor, labelTextColor, labelTextHoverColor, 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, iconAfterFill, iconAfterFillActiveIcon, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconBeforeFill, iconBeforeFillActiveIcon, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
     const { styles: chipsStyles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsx("div", { "data-test-id": dataTestId && `${dataTestId}Chips`, "data-tour": dataTour, className: clsx(className, 'chips', !isActive
+    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`), 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: labelTextActiveHoverColor, textColorHover: labelTextHoverColor, 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, { className: "chips__badge", appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue }))] }) }));
 }
 
 function ChipsGroup(props) {

package/dist/{ChipsGroup_es_Czu95rkL.js → ChipsGroup_es_CzVlqaHv.js}

@@ -50,11 +50,15 @@ const chipsAppearanceDanger = {
 
 const chipsAppearanceDisabled = {
     disabled: {
-        fill: 'surfaceDisabled',
-        labelTextColor: 'surfaceTextDisabled',
-        borderColor: 'surfaceBorderDisabled',
-        iconAfterFillIcon: 'surfaceItemDisabled',
-        iconBeforeFillIcon: 'surfaceItemDisabled',
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceSecondary',
+        labelTextActiveColor: 'surfaceTextQuaternary',
+        labelTextActiveColorHover: 'surfaceTextQuaternary',
+        labelTextColor: 'surfaceTextQuaternary',
+        labelTextColorHover: 'surfaceTextQuaternary',
+        borderColor: 'disabledBorderPrimary',
+        iconAfterFillIcon: 'disabledItemPrimary',
+        iconBeforeFillIcon: 'disabledItemPrimary',
     },
 };
 
@@ -242,7 +246,7 @@ const chipsAppearanceSurface = {
         fillHover: 'surfaceTertiary',
         labelTextActiveColor: 'accentTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
-        labelTextHoverColor: 'surfaceTextPrimary',
+        labelTextColorHover: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderTertiary',
         activeIconItemFill: 'surfaceItemSecondary',
         badgeAppearance: 'surfacePrimary sizeXS solid',
@@ -258,7 +262,7 @@ const chipsAppearanceSurface = {
         fillHover: 'surfaceTertiary',
         labelTextActiveColor: 'accentTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
-        labelTextHoverColor: 'surfaceTextPrimary',
+        labelTextColorHover: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderSecondary',
         iconAfterFillActiveIcon: 'accentItemPrimary',
         iconAfterFillIcon: 'surfaceItemPrimary',
@@ -313,16 +317,16 @@ const chipsConfig = {
     },
 };
 function Chips(props) {
-    const { dataTestId, dataTour, className, appearance, label = '', isDisabled, iconAfter, iconAfterSrc, iconBefore, iconBeforeSrc, isActive, isSkeleton, onClick, onClickIconAfter, onClickIconBefore, children, } = props;
+    const { appearance, className, dataTestId, dataTour, label = '', iconAfter, iconAfterSrc, iconBefore, iconBeforeSrc, 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, labelTextActiveHoverColor, labelTextColor, labelTextHoverColor, 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, iconAfterFill, iconAfterFillActiveIcon, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconBeforeFill, iconBeforeFillActiveIcon, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
     const { styles: chipsStyles } = useStyles(props);
-    return (jsx("div", { "data-test-id": dataTestId && `${dataTestId}Chips`, "data-tour": dataTour, className: clsx(className, 'chips', !isActive
+    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`), 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: labelTextActiveHoverColor, textColorHover: labelTextHoverColor, 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, { className: "chips__badge", appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue }))] }) }));
 }
 
 function ChipsGroup(props) {

package/dist/cjs/components/Chips.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var ChipsGroup = require('../../ChipsGroup_cjs_BMkiDYau.js');
+var ChipsGroup = require('../../ChipsGroup_cjs_Du8WHI-Y.js');
 require('react/jsx-runtime');
 require('clsx');
 require('../hooks/useAppearanceConfig/useAppearanceConfig.js');

package/dist/cjs/components/DatePeriod.js

@@ -7,7 +7,7 @@ var common = require('@itcase/common');
 var DatePicker = require('../../DatePicker_cjs_BLOiIsfD.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var ChipsGroup = require('../../ChipsGroup_cjs_BMkiDYau.js');
+var ChipsGroup = require('../../ChipsGroup_cjs_Du8WHI-Y.js');
 require('date-fns/locale');
 require('react-datepicker');
 require('../hooks/useStyles/useStyles.js');

package/dist/cjs/components/MenuItem.js

@@ -169,13 +169,13 @@ const menuItemAppearanceSurface = {
     },
     surfacePrimary: {
         fill: 'surfacePrimary',
-        fillActive: 'surfaceHover',
-        fillActiveHover: 'surfaceHover',
-        fillHover: 'surfaceHover',
-        labelTextActiveColor: 'accentTextSecondary',
-        labelTextActiveHoverColor: 'surfaceTextPrimary',
+        fillActive: 'surfaceSecondary',
+        fillActiveHover: 'surfaceTertiary',
+        fillHover: 'surfaceSecondary',
+        labelTextActiveColor: 'surfaceTextPrimary',
+        labelTextActiveColorHover: 'surfaceTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
-        labelTextHoverColor: 'accentTextSecondary',
+        labelTextColorHover: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderQuaternary',
         iconAfterFillIcon: 'surfaceItemPrimary',
         iconBeforeFillIcon: 'surfaceItemPrimary',
@@ -191,7 +191,7 @@ const menuItemAppearanceSurface = {
         fillActiveHover: 'surfaceHover',
         fillHover: 'surfaceSecondary',
         labelTextActiveColor: 'accentTextSecondary',
-        labelTextActiveHoverColor: 'surfaceTextPrimary',
+        labelTextActiveColorHover: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderQuaternary',
         iconAfterFillIcon: 'surfaceItemPrimary',
         iconBeforeFillIcon: 'surfaceItemPrimary',
@@ -219,7 +219,7 @@ const menuItemConfig = {
     },
 };
 function MenuItem(props) {
-    const { appearance, className, label, href, link, LinkComponent, rel, showTooltip, target, tooltipAppearance, underline, before, after, isActive, isDisabled, onClick, children, } = props;
+    const { appearance, className, label, href, link, LinkComponent, rel, showTooltip, target, easing, tooltipAppearance, underline, before, after, isActive, isDisabled, onClick, children, } = props;
     const tooltipRef = React.useRef(null);
     const onMouseEnter = React.useCallback(() => {
         if (showTooltip) {
@@ -233,10 +233,10 @@ function MenuItem(props) {
     }, [showTooltip]);
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, menuItemConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    const { directionClass, justifyContentClass, alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelStyle, labelTextActiveColor, labelTextActiveHoverColor, labelTextColor, labelTextColorDisabled, labelTextColorHover, labelTextSize, labelWeight, labelWrap, borderColorClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBadgeAppearance, iconBadgeShape, iconBadgeSize, iconBadgeTextColor, iconBadgeTextSize, iconBadgeValue, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, shapeClass, shapeStrengthClass, sizeClass, tooltipFill, tooltipShape, tooltipShapeStrength, tooltipSize, tooltipText, tooltipTextColor, tooltipTextSize, tooltipTitleTextColor, typeClass, widthClass, isSkeleton, } = propsGenerator;
+    const { directionClass, justifyContentClass, alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor, labelTextActiveColorHover, labelTextColor, labelTextColorDisabled, labelTextColorHover, labelTextSize, labelWeight, labelWrap, borderColorClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBadgeAppearance, iconBadgeShape, iconBadgeSize, iconBadgeTextColor, iconBadgeTextSize, iconBadgeValue, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, tooltipTitle, shapeClass, shapeStrengthClass, sizeClass, tooltipFill, tooltipShape, tooltipShapeStrength, tooltipSize, tooltipText, tooltipTextColor, tooltipTextSize, tooltipTitleTextColor, typeClass, widthClass, isSkeleton, } = propsGenerator;
     // @ts-expect-error
     const { styles: menuItem } = useStyles.useStyles(props);
-    return (jsxRuntime.jsxs("div", { className: clsx('menu-item', isActive && 'menu-item_state_active', isDisabled && `menu-item_state_disabled`, directionClass && `menu-item_direction_${directionClass}`, className, (iconBefore || iconBeforeSrc || iconAfter || iconAfterSrc) &&
+    return (jsxRuntime.jsxs("div", { className: clsx('menu-item', easing && `easing_${easing}`, isActive && 'menu-item_state_active', isDisabled && `menu-item_state_disabled`, directionClass && `menu-item_direction_${directionClass}`, className, (iconBefore || iconBeforeSrc || iconAfter || iconAfterSrc) &&
             'menu-item_label-icon', sizeClass && `menu-item_size_${sizeClass}`, borderColorClass && `border-color_${borderColorClass}`, !isActive
             ? fillClass && `fill_${fillClass}`
             : fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
@@ -244,7 +244,7 @@ function MenuItem(props) {
             : fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass
             ? `shape-strength_${shapeStrengthClass}`
             : shapeClass === 'rounded' && 'shape-strength_default', typeClass && `menu-item_type_${typeClass}`, widthClass && `width_${widthClass}`, justifyContentClass &&
-            `menu-item_justify-content_${justifyContentClass}`, isSkeleton && `menu-item_skeleton`), style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [jsxRuntime.jsxs(Link.Link, { className: clsx('menu-item__wrapper', alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`), href: link || href, LinkComponent: LinkComponent, rel: rel, target: target, underline: underline, children: [before, children || (jsxRuntime.jsxs(React.Fragment, { children: [(iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('menu-item__icon_before', iconBadgeValue && 'menu-item__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'menu-item__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), label && (jsxRuntime.jsx(Text.Text, { className: "menu-item__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveHoverColor, textColorDisabled: labelTextColorDisabled, textColorHover: labelTextColorHover, textStyle: labelStyle, textWeight: labelWeight, textWrap: labelWrap, isActive: isActive, isDisabled: isDisabled, children: label })), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('menu-item__icon_after', iconBadgeValue && 'menu-item__icon_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: "menu-item__icon_after_badge", badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] })), after] }), showTooltip && (jsxRuntime.jsx(Icon.Tooltip, { appearance: tooltipAppearance, className: "menu-item__tooltip", ref: tooltipRef, minWidth: "auto", size: tooltipSize, fill: tooltipFill, left: "100%", zIndex: "100", titleTextColor: tooltipTitleTextColor, paddingLeft: "2m", text: tooltipText, textColor: tooltipTextColor, textSize: tooltipTextSize, 
+            `menu-item_justify-content_${justifyContentClass}`, isSkeleton && `menu-item_skeleton`), style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [jsxRuntime.jsxs(Link.Link, { className: clsx('menu-item__wrapper', alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`), href: link || href, LinkComponent: LinkComponent, rel: rel, target: target, underline: underline, children: [before, children || (jsxRuntime.jsxs(React.Fragment, { children: [(iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('menu-item__icon_before', iconBadgeValue && 'menu-item__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'menu-item__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), label && (jsxRuntime.jsx(Text.Text, { className: "menu-item__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveColorHover, textColorDisabled: labelTextColorDisabled, textColorHover: labelTextColorHover, textWeight: labelWeight, textWrap: labelWrap, isActive: isActive, isDisabled: isDisabled, children: label })), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('menu-item__icon_after', iconBadgeValue && 'menu-item__icon_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: "menu-item__icon_after_badge", badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] })), after] }), showTooltip && (jsxRuntime.jsx(Icon.Tooltip, { appearance: tooltipAppearance, className: "menu-item__tooltip", ref: tooltipRef, minWidth: "auto", size: tooltipSize, fill: tooltipFill, left: "100%", zIndex: "100", title: tooltipTitle, titleColor: tooltipTitleTextColor, paddingLeft: "2m", text: tooltipText, textColor: tooltipTextColor, textSize: tooltipTextSize, 
                 // centering="vertical"
                 shape: tooltipShape, shapeStrength: tooltipShapeStrength, isTooltipDisableState: true }))] }));
 }

package/dist/cjs/components/Pagination.js

@@ -73,6 +73,40 @@ const paginationAppearanceAccent = {
     },
 };
 
+const paginationAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        fillInputShape: 'rounded',
+        pageCountDropdownShape: 'rounded',
+    },
+    roundedXL: {
+        fillInputShape: 'rounded',
+        fillInputShapeStrength: '2m',
+        pageCountDropdownShape: 'rounded',
+        pageCountDropdownShapeStrength: '2m'
+    },
+    roundedL: {
+        fillInputShape: 'rounded',
+        fillInputShapeStrength: '1_5m',
+        pageCountDropdownShape: 'rounded',
+        pageCountDropdownShapeStrength: '1_5m'
+    },
+    roundedM: {
+        fillInputShape: 'rounded',
+        fillInputShapeStrength: '1m',
+        pageCountDropdownShape: 'rounded',
+        pageCountDropdownShapeStrength: '1m'
+    },
+    roundedS: {
+        fillInputShape: 'rounded',
+        fillInputShapeStrength: '0_5m',
+        pageCountDropdownShape: 'rounded',
+        pageCountDropdownShapeStrength: '0_5m'
+    },
+};
+
 const paginationAppearanceSize = {
     sizeL: {
         size: 'l',
@@ -168,16 +202,21 @@ const paginationAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
         fillHover: 'surfaceTertiary',
-        fillActive: 'surfaceTertiary',
-        fillActiveHover: 'surfaceTertiary',
+        fillActive: 'accentPrimary',
+        fillActiveHover: 'accentHoverPrimary',
         fillInput: 'surfacePrimary',
+        fillInputHover: 'surfaceTertiary',
         textColor: 'surfaceTextPrimary',
+        textColorHover: 'surfaceTextPrimary',
+        textColorActive: 'accentTextPrimary',
+        textColorActiveHover: 'accentTextPrimary',
         builderIconFillIcon: 'surfaceItemPrimary',
         nextIconFillIcon: 'surfaceItemPrimary',
         pageCountDescTextColor: 'surfaceTextPrimary',
         pageCountDropdownAlignment: 'topCenter',
         pageCountDropdownElevation: 8,
         pageCountDropdownFill: 'surfacePrimary',
+        pageCountDropdownFillHover: 'surfaceTertiary',
         pageCountDropdownItemDividerFill: 'surfaceSecondary',
         pageCountDropdownItemFill: 'surfacePrimary',
         pageCountDropdownItemFillActive: 'accentPrimary',
@@ -188,7 +227,6 @@ const paginationAppearanceSurface = {
         pageCountDropdownItemLabelColorActive: 'accentTextPrimary',
         pageCountDropdownItemLabelColorActiveHover: 'accentTextPrimary',
         pageCountDropdownItemLabelColorHover: 'surfaceTextPrimary',
-        pageCountDropdownShape: 'rounded',
         pageCountInputIconColor: 'surfaceItemPrimary',
         pageCountInputTextColor: 'surfaceTextPrimary',
         previousIconFillIcon: 'surfaceItemPrimary',
@@ -199,6 +237,7 @@ const paginationAppearance = {
     ...paginationAppearanceSurface,
     ...paginationAppearanceAccent,
     ...paginationAppearanceSize,
+    ...paginationAppearanceShape,
     ...paginationAppearanceStyle,
 };
 
@@ -268,15 +307,16 @@ function Pagination(props) {
     }, [pageNumber]);
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, paginationConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    const { justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, fillInputClass, fillInputHoverClass, textColorClass, textSizeClass, builderIcon, builderIconFill, builderIconFillIcon, builderIconFillSize, builderIconSize, marginPagesDisplayed, nextIcon, nextIconFill, nextIconFillIcon, nextIconFillSize, nextIconSize, pageCountDescTextColor, pageCountDescTextSize, pageCountDropdownAlignment, pageCountDropdownElevation, pageCountDropdownFill, pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize, pageCountDropdownItemFill, pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor, pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActiveHover, pageCountDropdownItemLabelColorHover, pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider, pageCountDropdownItemSize, pageCountDropdownItemWidth, pageCountDropdownShape, pageCountInputIcon, pageCountInputIconColor, pageCountInputIconFillSize, pageCountInputIconSrc, pageCountInputTextColor, pageCountInputTextSize, pageRangeDisplayed, previousIcon, previousIconFill, previousIconFillIcon, previousIconFillSize, previousIconSize, sizeClass, } = propsGenerator;
+    const { justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, fillInputClass, fillInputHoverClass, fillInputShapeClass, fillInputShapeStrengthClass, textColorClass, textColorHoverClass, textColorActiveClass, textColorActiveHoverClass, textSizeClass, builderIcon, builderIconFill, builderIconFillIcon, builderIconFillSize, builderIconSize, marginPagesDisplayed, nextIcon, nextIconFill, nextIconFillIcon, nextIconFillSize, nextIconSize, pageCountDescTextColor, pageCountDescTextSize, pageCountDropdownAlignment, pageCountDropdownElevation, pageCountDropdownFill, pageCountDropdownFillHover, pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize, pageCountDropdownItemFill, pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor, pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActiveHover, pageCountDropdownItemLabelColorHover, pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider, pageCountDropdownItemSize, pageCountDropdownItemWidth, pageCountDropdownShape, pageCountDropdownShapeStrength, pageCountInputIcon, pageCountInputIconColor, pageCountInputIconFillSize, pageCountInputIconSrc, pageCountInputTextColor, pageCountInputTextSize, pageRangeDisplayed, previousIcon, previousIconFill, previousIconFillIcon, previousIconFillSize, previousIconSize, sizeClass, } = propsGenerator;
     const { styles: paginationStyles } = useStyles.useStyles(props);
-    return (allItemsCount > perPageCount && (jsxRuntime.jsxs("div", { className: clsx('pagination', sizeClass && `pagination_size_${sizeClass}`, isSkeleton && `pagination_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: paginationStyles, children: [jsxRuntime.jsx(ReactPaginate, { activeClassName: clsx('pagination__item_state_active cursor_type_default', fillActiveClass && `fill_active_${fillActiveClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), activeLinkClassName: "pagination__item-link_state_active", breakClassName: "pagination__item pagination__item_break", breakLabel: "...", breakLinkClassName: "pagination__item-link", containerClassName: clsx(className, 'pagination__container', justifyContentClass &&
+    return (allItemsCount > perPageCount && (jsxRuntime.jsxs("div", { className: clsx('pagination', sizeClass && `pagination_size_${sizeClass}`, isSkeleton && `pagination_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: paginationStyles, children: [jsxRuntime.jsx(ReactPaginate, { activeClassName: clsx('pagination__item_state_active cursor_type_default', fillActiveClass && `fill_active_${fillActiveClass}`, fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`), activeLinkClassName: clsx('pagination__item-link_state_active', textColorActiveClass && `text-color_active_${textColorActiveClass}`, textColorActiveHoverClass &&
+                    `text-color_active_hover_${textColorActiveHoverClass}`), breakClassName: "pagination__item pagination__item_break", breakLabel: "...", breakLinkClassName: "pagination__item-link", containerClassName: clsx(className, 'pagination__container', justifyContentClass &&
                     `pagination_justify-content_${justifyContentClass}`), disabledClassName: "pagination__item_state_disabled cursor_type_default", disabledLinkClassName: "pagination__item_state_disabled", 
                 // pages settings
-                forcePage: paginationPageIndex, marginPagesDisplayed: marginPagesDisplayed, nextClassName: clsx('pagination__item pagination__item_next', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`), 
+                forcePage: paginationPageIndex, marginPagesDisplayed: marginPagesDisplayed, nextClassName: clsx('pagination__item pagination__item_next', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), 
                 // next button
-                nextLabel: jsxRuntime.jsx(Icon.Icon, { fill: nextIconFill, fillSize: nextIconFillSize, iconFill: nextIconFillIcon, iconSize: nextIconSize, shape: "circular", SvgImage: nextIcon }), nextLinkClassName: "pagination__item-link", pageClassName: clsx('pagination__item', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`), pageCount: paginationPagesCount, pageLabelBuilder: isPageLabelBuilder &&
-                    (() => (jsxRuntime.jsx(Icon.Icon, { fill: builderIconFill, fillSize: builderIconFillSize, iconFill: builderIconFillIcon, iconSize: builderIconSize, shape: "circular", SvgImage: builderIcon }))), pageLinkClassName: clsx('pagination__item-link', textSizeClass && `pagination__item-link_size_${textSizeClass}`, textColorClass && 'text', textColorClass && `text-color_${textColorClass}`), pageRangeDisplayed: pageRangeDisplayed, previousClassName: clsx('pagination__item pagination__item_previous', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`), previousLabel: jsxRuntime.jsx(Icon.Icon, { fill: previousIconFill, fillSize: previousIconFillSize, iconFill: previousIconFillIcon, iconSize: previousIconSize, shape: "circular", SvgImage: previousIcon }), previousLinkClassName: "pagination__item-link", onPageChange: _onChangePage }), isPageCount && (jsxRuntime.jsxs("div", { className: clsx(className, 'pagination__count'), children: [jsxRuntime.jsx(Text.Text, { className: "pagination__count-text", size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), jsxRuntime.jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillClass && `fill_${fillInputClass}`, fillHoverClass && `fill_hover_${fillInputHoverClass}`), onClick: onClickCommandMenuButton, children: [jsxRuntime.jsx(Text.Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), jsxRuntime.jsx(Icon.Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, imageSrc: pageCountInputIconSrc, SvgImage: pageCountInputIcon }), jsxRuntime.jsx(DropdownItem.Dropdown, { className: "pagination__dropdown", alignment: pageCountDropdownAlignment, fill: pageCountDropdownFill, elevation: pageCountDropdownElevation, setIsOpen: setIsOpenDropdown, shape: pageCountDropdownShape, isOpen: isOpenDropdown, children: pageCountDropdownArray.map((item, index) => activeDropdownItem === item ? (jsxRuntime.jsx(DropdownItem.DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillActive: pageCountDropdownItemFillActive, fillActiveHover: pageCountDropdownItemFillActiveHover, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextColorActiveHover: pageCountDropdownItemLabelColorActiveHover, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountArray.length - 1 &&
+                nextLabel: jsxRuntime.jsx(Icon.Icon, { fill: nextIconFill, fillSize: nextIconFillSize, iconFill: nextIconFillIcon, iconSize: nextIconSize, shape: "circular", SvgImage: nextIcon }), nextLinkClassName: "pagination__item-link", pageClassName: clsx('pagination__item', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), pageCount: paginationPagesCount, pageLabelBuilder: isPageLabelBuilder &&
+                    (() => (jsxRuntime.jsx(Icon.Icon, { fill: builderIconFill, fillSize: builderIconFillSize, iconFill: builderIconFillIcon, iconSize: builderIconSize, shape: "circular", SvgImage: builderIcon }))), pageLinkClassName: clsx('pagination__item-link', textSizeClass && `pagination__item-link_size_${textSizeClass}`, textColorClass && `text text-color_${textColorClass}`, textColorHoverClass && `text-color_hover_${textColorHoverClass}`), pageRangeDisplayed: pageRangeDisplayed, previousClassName: clsx('pagination__item pagination__item_previous', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), previousLabel: jsxRuntime.jsx(Icon.Icon, { fill: previousIconFill, fillSize: previousIconFillSize, iconFill: previousIconFillIcon, iconSize: previousIconSize, shape: "circular", SvgImage: previousIcon }), previousLinkClassName: "pagination__item-link", onPageChange: _onChangePage }), isPageCount && (jsxRuntime.jsxs("div", { className: clsx(className, 'pagination__count'), children: [jsxRuntime.jsx(Text.Text, { className: "pagination__count-text", size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), jsxRuntime.jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillInputClass && `fill_${fillInputClass}`, fillInputHoverClass && `fill_hover_${fillInputHoverClass}`, fillInputShapeClass && `shape_${fillInputShapeClass}`, fillInputShapeStrengthClass && `shape-strength_${fillInputShapeStrengthClass}`), onClick: onClickCommandMenuButton, children: [jsxRuntime.jsx(Text.Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), jsxRuntime.jsx(Icon.Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, imageSrc: pageCountInputIconSrc, SvgImage: pageCountInputIcon }), jsxRuntime.jsx(DropdownItem.Dropdown, { className: "pagination__dropdown", alignment: pageCountDropdownAlignment, fill: pageCountDropdownFill, fillHover: pageCountDropdownFillHover, elevation: pageCountDropdownElevation, setIsOpen: setIsOpenDropdown, shape: pageCountDropdownShape, shapeStrength: pageCountDropdownShapeStrength, isOpen: isOpenDropdown, children: pageCountDropdownArray.map((item, index) => activeDropdownItem === item ? (jsxRuntime.jsx(DropdownItem.DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillActive: pageCountDropdownItemFillActive, fillActiveHover: pageCountDropdownItemFillActiveHover, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextColorActiveHover: pageCountDropdownItemLabelColorActiveHover, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountArray.length - 1 &&
                                         pageCountDropdownItemShowDivider, isActive: true, onClick: (event) => handleDropdownItemClick(event, item) }, item)) : (jsxRuntime.jsx(DropdownItem.DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountArray.length - 1 &&
                                         pageCountDropdownItemShowDivider, isActive: false, onClick: (event) => handleDropdownItemClick(event, item) }, item))) })] })] }))] })));
 }

package/dist/cjs/components/Response.js

@@ -255,79 +255,68 @@ const Response = urlWithAssetPrefix.urlWithAssetPrefix(function Response(props)
 });
 
 const RESPONSE_MESSAGES = {
-    empty: {
-        appearance: 'refresh ghost',
-        title: ' Список пуст',
-        desc: 'Нет данных по заданным параметрам',
-        code: '500',
-        imageSrc: index.responseIcon.Empty,
-        primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
-        primaryButtonLabel: 'ОК',
-    },
     error: {
         appearance: 'error ghost',
         title: 'Ошибка',
         desc: 'Возникла проблема с обработкой вашего запроса. Повторите попытку позже или обратитесь в поддержку по электронной почте: support@example.com',
-        code: '500',
+        // code: '500',
         imageSrc: index.responseIcon.Error,
         primaryButtonAppearance: 'errorPrimary sizeXXL solid rounded',
         primaryButtonLabel: 'ОК',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
         secondaryButtonLabel: 'Отмена',
     },
-    warning: {
-        appearance: 'warning ghost',
-        title: 'Внимание',
-        imageSrc: index.responseIcon.Warning,
-        primaryButtonAppearance: 'warningPrimary sizeXXL solid rounded',
-        primaryButtonLabel: 'Повторить',
-        secondaryButtonAppearance: 'warningPrimary sizeXXL solid rounded',
-        secondaryButtonLabel: 'Отмена',
-    },
-    success: {
-        appearance: 'refresh ghost',
-        title: 'Готово',
-        desc: 'Успешно выполнено',
-        code: '500',
-        imageSrc: index.responseIcon.Success,
-        primaryButtonAppearance: 'successPrimary sizeXXL solid rounded',
-        primaryButtonLabel: 'ОК',
+    errorNetwork: {
+        appearance: 'unableLoadData ghost',
+        title: 'Ошибка соединения',
+        desc: 'Не удалось подключиться. Проверьте интернет-соединение и повторите попытку',
+        // code: null,
+        imageSrc: index.responseIcon.UnableLoadData,
+        primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
+        primaryButtonLabel: 'Обновить',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
-        secondaryButtonLabel: 'Закрыть',
+        secondaryButtonLabel: 'Отмена',
     },
     nothingFound: {
         appearance: 'refresh ghost',
         title: 'Ничего не найдено',
         desc: 'Нет данных по заданным параметрам',
-        code: '500',
+        // code: '500',
         imageSrc: index.responseIcon.NothingFound,
         primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
         primaryButtonLabel: 'Сбросить',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
         secondaryButtonLabel: 'Отмена',
     },
-    errorNetwork: {
-        appearance: 'unableLoadData ghost',
-        title: 'Ошибка соединения',
-        desc: 'Не удалось подключиться.Проверьте интернет-соединение и повторите попытку',
-        code: '503',
-        imageSrc: index.responseIcon.UnableLoadData,
+    empty: {
+        appearance: 'refresh ghost',
+        title: 'Список пуст',
+        desc: 'Нет данных по заданным параметрам',
+        code: '200',
+        imageSrc: index.responseIcon.Empty,
         primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
-        primaryButtonLabel: 'Обновить',
-        secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
-        secondaryButtonLabel: 'Отмена',
+        primaryButtonLabel: 'ОК',
     },
-    errorRequest: {
+    errorAccessDenied: {
         appearance: 'unableLoadData ghost',
         title: 'Доступ ограничен',
         desc: 'Для выяснения причин и восстановления доступа обратитесь, пожалуйста, в техническую поддержку по электронной почте: support@example.com',
-        code: '403',
+        code: '401/403',
         imageSrc: index.responseIcon.UnableLoadData,
         primaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
         primaryButtonLabel: 'Повторить',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid rounded',
         secondaryButtonLabel: 'Отмена',
     },
+    warning: {
+        appearance: 'warning ghost',
+        title: 'Внимание',
+        imageSrc: index.responseIcon.Warning,
+        primaryButtonAppearance: 'warningPrimary sizeXXL solid rounded',
+        primaryButtonLabel: 'Повторить',
+        secondaryButtonAppearance: 'warningPrimary sizeXXL solid rounded',
+        secondaryButtonLabel: 'Отмена',
+    },
 };
 
 exports.responseIcon = index.responseIcon;

package/dist/cjs/components/Segmented.js

@@ -33,7 +33,7 @@ const segmentedAppearanceDefault = {
         fillActiveHover: 'accentPrimary',
         fillHover: 'surfaceSecondary',
         labelTextActiveColor: 'accentTextPrimary',
-        labelTextActiveHoverColor: 'accentTextPrimary',
+        labelTextActiveColorHover: 'accentTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderQuaternary',
         iconAfterFill: 'surfaceItemQuaternary',
@@ -50,7 +50,7 @@ const segmentedAppearanceDefault = {
         fillActiveHover: 'accentHoverPrimary',
         fillHover: 'surfaceTertiary',
         labelTextActiveColor: 'accentTextPrimary',
-        labelTextActiveHoverColor: 'accentTextPrimary',
+        labelTextActiveColorHover: 'accentTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderQuaternary',
         iconAfterFill: 'surfaceItemQuaternary',
@@ -173,7 +173,7 @@ const segmentedAppearanceSuccess = {
         fillHover: 'successItemSecondary',
         labelTextActiveColor: 'successTextPrimary',
         labelTextColor: 'successTextSecondary',
-        labelTextHoverColor: 'successTextPrimary',
+        labelTextColorHover: 'successTextPrimary',
         borderColor: 'successBorderSecondary',
         iconAfterFill: 'successItemSecondary',
         iconAfterFillActive: 'successTertiary',
@@ -242,7 +242,7 @@ const Segmented = (props) => {
     }, [activeSegment, segmentsRefs]);
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, segmentedConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    const { fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor, labelTextActiveHoverColor, labelTextColor, labelTextHoverColor, labelTextSize, labelTextWrap, borderColorClass, borderTypeClass, borderWidthClass, iconFill, iconFillActive, iconFillDisabled, iconSize, indicatorFillClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
+    const { fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor, labelTextActiveColorHover, labelTextColor, labelTextColorHover, labelTextSize, labelTextWrap, borderColorClass, borderTypeClass, borderWidthClass, iconFill, iconFillActive, iconFillDisabled, iconSize, indicatorFillClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
     return (jsxRuntime.jsx("div", { className: clsx(className, 'segmented', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`, widthClass && `segmented_width_${widthClass}`, sizeClass && `segmented_size_${sizeClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, isSkeleton && `segmented_skeleton`), ref: controlRef, children: jsxRuntime.jsx("div", { className: "segmented__wrapper", children: jsxRuntime.jsxs("div", { className: clsx('segmented__wrapper-inner'), children: [segments?.map((item) => {
                         const isActive = String(activeSegment?.value) === String(item.value);
                         return (jsxRuntime.jsx("div", { className: clsx('segmented__item', !item.label && 'segmented__item_icon', sizeClass && `segmented__item_size_${sizeClass}`, isActive && 'segmented__item_active', !isActive && isDisabled && 'segmented__item_state_disabled', isActive &&
@@ -254,7 +254,7 @@ const Segmented = (props) => {
                                 fillActiveClass &&
                                 `fill_active_${fillActiveClass}`), ref: segmentsRefs.get(item.value), onClick: () => !isDisabled && onChangeValue(item), children: jsxRuntime.jsxs("div", { className: clsx('segmented__item-label', sizeClass && `segmented_size_${sizeClass}`), children: [item.iconBefore || item.iconBeforeActive ? (jsxRuntime.jsx(Icon.Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive
                                             ? item.iconBeforeActive || item.iconBefore
-                                            : item.iconBefore, isActive: isActive, isDisabled: isDisabled })) : null, item.label && (jsxRuntime.jsx(Text.Text, { size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveHoverColor, textColorHover: labelTextHoverColor, textWrap: labelTextWrap, isActive: isActive, children: item.label })), item.icon || item.iconActive ? (jsxRuntime.jsx(Icon.Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive ? item.iconActive || item.icon : item.icon, isActive: isActive, isDisabled: isDisabled })) : null, item.iconAfter || item.iconAfterActive ? (jsxRuntime.jsx(Icon.Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive
+                                            : item.iconBefore, isActive: isActive, isDisabled: isDisabled })) : null, item.label && (jsxRuntime.jsx(Text.Text, { size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveColorHover, textColorHover: labelTextColorHover, textWrap: labelTextWrap, isActive: isActive, children: item.label })), item.icon || item.iconActive ? (jsxRuntime.jsx(Icon.Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive ? item.iconActive || item.icon : item.icon, isActive: isActive, isDisabled: isDisabled })) : null, item.iconAfter || item.iconAfterActive ? (jsxRuntime.jsx(Icon.Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive
                                             ? item.iconAfterActive || item.iconAfter
                                             : item.iconAfter, isActive: isActive, isDisabled: isDisabled })) : null] }) }, `${name}-${item.value}`));
                     }), jsxRuntime.jsx("div", { className: clsx('segmented__indicator', indicatorFillClass && `fill_${indicatorFillClass}`) })] }) }) }));

package/dist/cjs/hooks/useActiveClasses/useActiveClasses.helpers.js

@@ -49,7 +49,7 @@ const formatState = (key) => {
     // - matches "ActiveHover", "Active", "Hover" or "Disabled"
     // - case-insensitive because of the /i flag
     // Examples of matches:
-    //  "fillActiveHoverColor"  -> match[0] === "ActiveHover"
+    //  "fillActiveColorHover"  -> match[0] === "ActiveHover"
     //  "borderDisabled"        -> match[0] === "Disabled"
     const stateMatch = key.match(/(ActiveHover|Active|Hover|Disabled)/i);
     if (!stateMatch) {
@@ -63,7 +63,7 @@ const formatState = (key) => {
     //  Disabled    -> disabled
     // The final .toLowerCase() ensures output is lowercased regardless of input casing.
     // Examples:
-    //  "fillActiveHoverColor"  -> "_active_hover"
+    //  "fillActiveColorHover"  -> "_active_hover"
     //  "borderDisabled"        -> "disabled"
     return ('_' +
         stateMatch[0]

package/dist/components/Chips.js

@@ -1,4 +1,4 @@
-export { C as Chips, b as ChipsGroup, a as chipsAppearance, c as chipsConfig } from '../ChipsGroup_es_Czu95rkL.js';
+export { C as Chips, b as ChipsGroup, a as chipsAppearance, c as chipsConfig } from '../ChipsGroup_es_CzVlqaHv.js';
 import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useAppearanceConfig/useAppearanceConfig.js';

package/dist/components/DatePeriod.js

@@ -5,7 +5,7 @@ import { DATE_PERIOD_INTERVALS } from '@itcase/common';
 import { D as DatePickerInput } from '../DatePicker_es_VslTy9Qw.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_Czu95rkL.js';
+import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_CzVlqaHv.js';
 import 'date-fns/locale';
 import 'react-datepicker';
 import '../hooks/useStyles/useStyles.js';