@itcase/ui 1.9.36 → 1.9.38

package/dist/{DropdownItem_cjs_DUtEvTHI.js → DropdownItem_cjs_nZbgMgqg.js}

@@ -6,15 +6,15 @@ var clsx = require('clsx');
 var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-var Icon = require('./Icon_cjs_CQxDPPGY.js');
-var Divider = require('./Divider_cjs_1fwsCxEb.js');
-var Text = require('./Text_cjs_Co2XdYF-.js');
+var Icon = require('./Icon_cjs_D20B2YBo.js');
+var Divider = require('./Divider_cjs_C5Ou2Kqa.js');
+var Text = require('./Text_cjs_erTy2pUN.js');
 
 const dropdownAppearanceAccent = {
     accentPrimary: {
         fill: 'accentPrimary',
-        fillActive: 'accentPrimaryActive',
-        fillActiveHover: 'accentHoverPrimary',
+        fillActive: 'accentActivePrimary',
+        fillActiveHover: 'accentActiveHoverPrimary',
         fillHover: 'accentHoverPrimary',
         labelTextColor: 'accentTextPrimary',
         labelTextColorActive: 'accentTextPrimary',
@@ -28,10 +28,9 @@ const dropdownAppearanceAccent = {
     },
     accentSecondary: {
         fill: 'accentPrimary',
-        fillHover: 'accentPrimaryHover',
+        fillHover: 'accentHoverPrimary',
         labelTextColor: 'accentTextSecondary',
         labelTextColorHover: 'accentTextSecondary',
-        borderColor: 'accentBorderPrimary',
     },
 };
 
@@ -116,7 +115,7 @@ const dropdownAppearanceStyle = {
 const dropdownAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
-        fillActive: 'surfacePrimaryActive',
+        fillActive: 'surfaceActivePrimary',
         fillHover: 'surfaceHoverPrimary',
         labelTextColor: 'surfaceTextPrimary',
         labelTextColorActive: 'surfaceTextPrimary',
@@ -128,21 +127,19 @@ const dropdownAppearanceSurface = {
         iconAfterFillIcon: 'surfaceItemPrimary',
         iconBeforeFillIcon: 'surfaceItemPrimary',
     },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillHover: 'surfaceHoverQuaternary',
+        labelTextColor: 'surfaceTextPrimary',
+    },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
-        fillHover: 'surfaceSecondaryHover',
+        fillHover: 'surfaceHoverSecondary',
         labelTextColor: 'surfaceTextPrimary',
-        loaderFill: 'surfaceSecondary',
-        loaderItemFill: 'surfaceItemPrimary',
     },
     surfaceTertiary: {
         fill: 'surfaceTertiary',
-        fillHover: 'surfaceTertiaryHover',
-        labelTextColor: 'surfaceTextPrimary',
-    },
-    surfaceQuaternary: {
-        fill: 'surfaceQuaternary',
-        fillHover: 'surfaceQuaternaryHover',
+        fillHover: 'surfaceHoverTertiary',
         labelTextColor: 'surfaceTextPrimary',
     },
 };
@@ -161,56 +158,42 @@ function Dropdown(props) {
     const { appearance, className, dataTestId, dataTour, animationClose = 'dropdown_animation_close', animationOpen = 'dropdown_animation_open', dropdownList, showDivider, before, after, isSkeleton, isOpen, setIsOpen, onClickItem, children, } = props;
     const dropdownRef = React.useRef(null);
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, dropdownConfig);
-    // const [isOpen, setIsOpen] = useState(false)
     const [animationState, setAnimationState] = React.useState({
         className: '',
     });
     const onAnimationEnd = React.useCallback(() => {
-        // When component is change his visibility(display) in DOM,
-        // animation of close can run unnecessary on showing element.
-        // const dropdownElement = dropdownRef.current
         setAnimationState((prevState) => ({
             className: isOpen ? prevState.className : '',
         }));
     }, [isOpen]);
     React.useEffect(() => {
         if (animationOpen && animationClose) {
+            // eslint-disable-next-line react-hooks/set-state-in-effect
             setAnimationState(() => ({
                 className: isOpen ? animationOpen : animationClose,
             }));
         }
     }, [isOpen, animationOpen, animationClose]);
-    // Close dropdown by click outside
     React.useEffect(() => {
-        // Add a handler to keep track of the click target.
         function onClickWindow(event) {
             const dropdownElement = dropdownRef.current;
             if (dropdownElement && animationOpen) {
-                // Is event target inside of dropdown element
                 const isContainsTarget = dropdownElement.contains(event.target);
-                // Is dropdown element has "open" class
                 const hasOpenClass = dropdownElement.classList.contains(animationOpen);
                 if (!isContainsTarget && hasOpenClass) {
-                    // Trigger close event with animation
-                    // dropdownElement.click() - trigger "onClickWindow" again
                     setIsOpen(false);
                 }
             }
         }
-        // Add event listener for current dropdown on first render
         window.addEventListener('click', onClickWindow);
         return () => {
-            // Remove event listener for current dropdown on unmount
             window.removeEventListener('click', onClickWindow);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [animationOpen, setIsOpen]);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { alignmentClass, fillClass, elevationClass, shapeClass, shapeStrengthClass, } = propsGenerator;
     const { styles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsxs("div", { className: clsx(className, 'dropdown', alignmentClass && `alignment_${alignmentClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, elevationClass && `elevation_${elevationClass}`, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className), ref: dropdownRef, "data-testid": dataTestId, "data-tour": dataTour, style: styles, children: [before, (children || dropdownList) && (jsxRuntime.jsxs("div", { className: clsx('dropdown__wrapper'), 
-                // Add "onAnimationEnd" only for wrapper for ignore dropdown button
-                onAnimationEnd: onAnimationEnd, children: [dropdownList?.map((item) => (jsxRuntime.jsx(DropdownItem, { appearance: appearance, label: item.label, badgeValue: item.badgeValue, emptyMessage: item.emptyMessage, iconAfter: item.iconAfter, iconBefore: item.iconBefore, iconSrc: item.icon, showDivider: showDivider, isActive: item.isActive, isSkeleton: isSkeleton, onClick: item.onClick || ((event) => onClickItem?.(item, event)) }, item.key))), children] })), after] }));
+    return (jsxRuntime.jsxs("div", { className: clsx(className, 'dropdown', alignmentClass && `alignment_${alignmentClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, elevationClass && `elevation_${elevationClass}`, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className), ref: dropdownRef, "data-testid": dataTestId, "data-tour": dataTour, style: styles, children: [before, (children || dropdownList) && (jsxRuntime.jsxs("div", { className: clsx('dropdown__wrapper'), onAnimationEnd: onAnimationEnd, children: [dropdownList?.map((item) => (jsxRuntime.jsx(DropdownItem, { appearance: appearance, label: item.label, badgeValue: item.badgeValue, emptyMessage: item.emptyMessage, iconAfter: item.iconAfter, iconBefore: item.iconBefore, iconSrc: item.icon, showDivider: showDivider, isActive: item.isActive, isSkeleton: isSkeleton, onClick: item.onClick || ((event) => onClickItem?.(item, event)) }, item.key))), children] })), after] }));
 }
 
 const dropdownItemAppearance = {
@@ -232,14 +215,13 @@ function DropdownItem(props) {
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, dropdownItemConfig);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { directionClass, justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, labelTextAlign, labelTextColor, labelTextColorActive, labelTextColorActiveHover, labelTextColorHover, labelTextSize, labelTextStyle, labelTextWeight, labelTextWrap, descTextColor, descTextColorHover, descTextGradient, descTextSize, descTextStyle, descTextWeight, descTextWrap, badgeAppearance, badgeShape, badgeSize, badgeTextColor, badgeTextSize, dividerDirection, dividerFill, dividerSize, emptyMessageTextColor, emptyMessageTextColorHover, emptyMessageTextSize, emptyMessageTextStyle, emptyMessageTextWeight, emptyMessageTextWrap, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBadgeAppearance, iconBadgeShape, iconBadgeSize, iconBadgeTextColor, iconBadgeTextSize, iconBadgeValue, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
-    // @ts-expect-error
     const { styles: dropdownItem } = useStyles.useStyles(props);
     return (jsxRuntime.jsxs("div", { className: clsx('dropdown__item', isActive && 'dropdown__item_state_active', isHover && 'dropdown__item_state_hover', directionClass && `dropdown__item_direction_${directionClass}`, className, !isActive
             ? fillClass && `fill_${fillClass}`
             : fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
             ? fillHoverClass && `fill_hover_${fillHoverClass}`
             : fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, fillDisabledClass && `fill_disabled_${fillDisabledClass}`, sizeClass && `dropdown__item_size_${sizeClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, widthClass && `dropdown__item_width_${widthClass}`, isDisabled && `dropdown__item_state_disabled`, onClick && 'cursor_type_pointer', isSkeleton && `dropdown__item_skeleton`, justifyContentClass &&
-            `dropdown__item_justify-content_${justifyContentClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [jsxRuntime.jsx("div", { className: "dropdown__item-wrapper", children: jsxRuntime.jsxs(React.Fragment, { children: [before, (iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('dropdown__item_before', iconBadgeValue && 'dropdown__item_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'dropdown__item_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), children || (jsxRuntime.jsxs(React.Fragment, { children: [label && (jsxRuntime.jsx(Text.Text, { className: "dropdown__item-label", size: labelTextSize, textAlign: labelTextAlign, textColor: !isActive && labelTextColor, textColorActive: "accentTextPrimary", textColorActive: isActive && labelTextColorActive, textColorHover: !isActive && labelTextColorHover, textColorHoverActive: isActive && labelTextColorActiveHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })), badgeValue && (jsxRuntime.jsx(Icon.Badge, { appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), desc && (jsxRuntime.jsx(Text.Text, { className: "dropdown__item-desc", size: descTextSize, textColor: descTextColor, textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, isActive: isActive, children: desc })), emptyMessage && (jsxRuntime.jsx(Text.Text, { className: "dropdown__item", size: emptyMessageTextSize, textColor: emptyMessageTextColor, textColorHover: emptyMessageTextColorHover, textStyle: emptyMessageTextStyle, textWeight: emptyMessageTextWeight, textWrap: emptyMessageTextWrap, isActive: isActive, children: emptyMessage }))] })), after, (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('dropdown__item_after', iconBadgeValue && 'dropdown__item_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'dropdown__item_after_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] }) }), showDivider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill }))] }));
+            `dropdown__item_justify-content_${justifyContentClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [jsxRuntime.jsx("div", { className: "dropdown__item-wrapper", children: jsxRuntime.jsxs(React.Fragment, { children: [before, (iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('dropdown__item_before', iconBadgeValue && 'dropdown__item_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'dropdown__item_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), children || (jsxRuntime.jsxs(React.Fragment, { children: [label && (jsxRuntime.jsx(Text.Text, { className: "dropdown__item-label", size: labelTextSize, textAlign: labelTextAlign, textColor: labelTextColor, textColorActive: labelTextColorActive, textColorActiveHover: labelTextColorActiveHover, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })), badgeValue && (jsxRuntime.jsx(Icon.Badge, { appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), desc && (jsxRuntime.jsx(Text.Text, { className: "dropdown__item-desc", size: descTextSize, textColor: descTextColor, textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, isActive: isActive, children: desc })), emptyMessage && (jsxRuntime.jsx(Text.Text, { className: "dropdown__item", size: emptyMessageTextSize, textColor: emptyMessageTextColor, textColorHover: emptyMessageTextColorHover, textStyle: emptyMessageTextStyle, textWeight: emptyMessageTextWeight, textWrap: emptyMessageTextWrap, isActive: isActive, children: emptyMessage }))] })), after, (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('dropdown__item_after', iconBadgeValue && 'dropdown__item_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'dropdown__item_after_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] }) }), showDivider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill }))] }));
 }
 
 exports.Dropdown = Dropdown;

package/dist/{DropdownItem_es_DgaoM2SE.js → DropdownItem_es__mygSEH6.js}

@@ -4,15 +4,15 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
-import { I as Icon, B as Badge } from './Icon_es_Banbw98_.js';
-import { D as Divider } from './Divider_es_BlOJ77zx.js';
-import { T as Text } from './Text_es_DaYcLe4H.js';
+import { I as Icon, B as Badge } from './Icon_es_DNVHNKFK.js';
+import { D as Divider } from './Divider_es_BR7ZO8w0.js';
+import { T as Text } from './Text_es_B85LGfjW.js';
 
 const dropdownAppearanceAccent = {
     accentPrimary: {
         fill: 'accentPrimary',
-        fillActive: 'accentPrimaryActive',
-        fillActiveHover: 'accentHoverPrimary',
+        fillActive: 'accentActivePrimary',
+        fillActiveHover: 'accentActiveHoverPrimary',
         fillHover: 'accentHoverPrimary',
         labelTextColor: 'accentTextPrimary',
         labelTextColorActive: 'accentTextPrimary',
@@ -26,10 +26,9 @@ const dropdownAppearanceAccent = {
     },
     accentSecondary: {
         fill: 'accentPrimary',
-        fillHover: 'accentPrimaryHover',
+        fillHover: 'accentHoverPrimary',
         labelTextColor: 'accentTextSecondary',
         labelTextColorHover: 'accentTextSecondary',
-        borderColor: 'accentBorderPrimary',
     },
 };
 
@@ -114,7 +113,7 @@ const dropdownAppearanceStyle = {
 const dropdownAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
-        fillActive: 'surfacePrimaryActive',
+        fillActive: 'surfaceActivePrimary',
         fillHover: 'surfaceHoverPrimary',
         labelTextColor: 'surfaceTextPrimary',
         labelTextColorActive: 'surfaceTextPrimary',
@@ -126,21 +125,19 @@ const dropdownAppearanceSurface = {
         iconAfterFillIcon: 'surfaceItemPrimary',
         iconBeforeFillIcon: 'surfaceItemPrimary',
     },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillHover: 'surfaceHoverQuaternary',
+        labelTextColor: 'surfaceTextPrimary',
+    },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
-        fillHover: 'surfaceSecondaryHover',
+        fillHover: 'surfaceHoverSecondary',
         labelTextColor: 'surfaceTextPrimary',
-        loaderFill: 'surfaceSecondary',
-        loaderItemFill: 'surfaceItemPrimary',
     },
     surfaceTertiary: {
         fill: 'surfaceTertiary',
-        fillHover: 'surfaceTertiaryHover',
-        labelTextColor: 'surfaceTextPrimary',
-    },
-    surfaceQuaternary: {
-        fill: 'surfaceQuaternary',
-        fillHover: 'surfaceQuaternaryHover',
+        fillHover: 'surfaceHoverTertiary',
         labelTextColor: 'surfaceTextPrimary',
     },
 };
@@ -159,56 +156,42 @@ function Dropdown(props) {
     const { appearance, className, dataTestId, dataTour, animationClose = 'dropdown_animation_close', animationOpen = 'dropdown_animation_open', dropdownList, showDivider, before, after, isSkeleton, isOpen, setIsOpen, onClickItem, children, } = props;
     const dropdownRef = useRef(null);
     const appearanceConfig = useAppearanceConfig(appearance, dropdownConfig);
-    // const [isOpen, setIsOpen] = useState(false)
     const [animationState, setAnimationState] = useState({
         className: '',
     });
     const onAnimationEnd = useCallback(() => {
-        // When component is change his visibility(display) in DOM,
-        // animation of close can run unnecessary on showing element.
-        // const dropdownElement = dropdownRef.current
         setAnimationState((prevState) => ({
             className: isOpen ? prevState.className : '',
         }));
     }, [isOpen]);
     useEffect(() => {
         if (animationOpen && animationClose) {
+            // eslint-disable-next-line react-hooks/set-state-in-effect
             setAnimationState(() => ({
                 className: isOpen ? animationOpen : animationClose,
             }));
         }
     }, [isOpen, animationOpen, animationClose]);
-    // Close dropdown by click outside
     useEffect(() => {
-        // Add a handler to keep track of the click target.
         function onClickWindow(event) {
             const dropdownElement = dropdownRef.current;
             if (dropdownElement && animationOpen) {
-                // Is event target inside of dropdown element
                 const isContainsTarget = dropdownElement.contains(event.target);
-                // Is dropdown element has "open" class
                 const hasOpenClass = dropdownElement.classList.contains(animationOpen);
                 if (!isContainsTarget && hasOpenClass) {
-                    // Trigger close event with animation
-                    // dropdownElement.click() - trigger "onClickWindow" again
                     setIsOpen(false);
                 }
             }
         }
-        // Add event listener for current dropdown on first render
         window.addEventListener('click', onClickWindow);
         return () => {
-            // Remove event listener for current dropdown on unmount
             window.removeEventListener('click', onClickWindow);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [animationOpen, setIsOpen]);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     const { alignmentClass, fillClass, elevationClass, shapeClass, shapeStrengthClass, } = propsGenerator;
     const { styles } = useStyles(props);
-    return (jsxs("div", { className: clsx(className, 'dropdown', alignmentClass && `alignment_${alignmentClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, elevationClass && `elevation_${elevationClass}`, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className), ref: dropdownRef, "data-testid": dataTestId, "data-tour": dataTour, style: styles, children: [before, (children || dropdownList) && (jsxs("div", { className: clsx('dropdown__wrapper'), 
-                // Add "onAnimationEnd" only for wrapper for ignore dropdown button
-                onAnimationEnd: onAnimationEnd, children: [dropdownList?.map((item) => (jsx(DropdownItem, { appearance: appearance, label: item.label, badgeValue: item.badgeValue, emptyMessage: item.emptyMessage, iconAfter: item.iconAfter, iconBefore: item.iconBefore, iconSrc: item.icon, showDivider: showDivider, isActive: item.isActive, isSkeleton: isSkeleton, onClick: item.onClick || ((event) => onClickItem?.(item, event)) }, item.key))), children] })), after] }));
+    return (jsxs("div", { className: clsx(className, 'dropdown', alignmentClass && `alignment_${alignmentClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, elevationClass && `elevation_${elevationClass}`, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className), ref: dropdownRef, "data-testid": dataTestId, "data-tour": dataTour, style: styles, children: [before, (children || dropdownList) && (jsxs("div", { className: clsx('dropdown__wrapper'), onAnimationEnd: onAnimationEnd, children: [dropdownList?.map((item) => (jsx(DropdownItem, { appearance: appearance, label: item.label, badgeValue: item.badgeValue, emptyMessage: item.emptyMessage, iconAfter: item.iconAfter, iconBefore: item.iconBefore, iconSrc: item.icon, showDivider: showDivider, isActive: item.isActive, isSkeleton: isSkeleton, onClick: item.onClick || ((event) => onClickItem?.(item, event)) }, item.key))), children] })), after] }));
 }
 
 const dropdownItemAppearance = {
@@ -230,14 +213,13 @@ function DropdownItem(props) {
     const appearanceConfig = useAppearanceConfig(appearance, dropdownItemConfig);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     const { directionClass, justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, labelTextAlign, labelTextColor, labelTextColorActive, labelTextColorActiveHover, labelTextColorHover, labelTextSize, labelTextStyle, labelTextWeight, labelTextWrap, descTextColor, descTextColorHover, descTextGradient, descTextSize, descTextStyle, descTextWeight, descTextWrap, badgeAppearance, badgeShape, badgeSize, badgeTextColor, badgeTextSize, dividerDirection, dividerFill, dividerSize, emptyMessageTextColor, emptyMessageTextColorHover, emptyMessageTextSize, emptyMessageTextStyle, emptyMessageTextWeight, emptyMessageTextWrap, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBadgeAppearance, iconBadgeShape, iconBadgeSize, iconBadgeTextColor, iconBadgeTextSize, iconBadgeValue, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
-    // @ts-expect-error
     const { styles: dropdownItem } = useStyles(props);
     return (jsxs("div", { className: clsx('dropdown__item', isActive && 'dropdown__item_state_active', isHover && 'dropdown__item_state_hover', directionClass && `dropdown__item_direction_${directionClass}`, className, !isActive
             ? fillClass && `fill_${fillClass}`
             : fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
             ? fillHoverClass && `fill_hover_${fillHoverClass}`
             : fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, fillDisabledClass && `fill_disabled_${fillDisabledClass}`, sizeClass && `dropdown__item_size_${sizeClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, widthClass && `dropdown__item_width_${widthClass}`, isDisabled && `dropdown__item_state_disabled`, onClick && 'cursor_type_pointer', isSkeleton && `dropdown__item_skeleton`, justifyContentClass &&
-            `dropdown__item_justify-content_${justifyContentClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [jsx("div", { className: "dropdown__item-wrapper", children: jsxs(React.Fragment, { children: [before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { className: clsx('dropdown__item_before', iconBadgeValue && 'dropdown__item_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'dropdown__item_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), children || (jsxs(React.Fragment, { children: [label && (jsx(Text, { className: "dropdown__item-label", size: labelTextSize, textAlign: labelTextAlign, textColor: !isActive && labelTextColor, textColorActive: "accentTextPrimary", textColorActive: isActive && labelTextColorActive, textColorHover: !isActive && labelTextColorHover, textColorHoverActive: isActive && labelTextColorActiveHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })), badgeValue && (jsx(Badge, { appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), desc && (jsx(Text, { className: "dropdown__item-desc", size: descTextSize, textColor: descTextColor, textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, isActive: isActive, children: desc })), emptyMessage && (jsx(Text, { className: "dropdown__item", size: emptyMessageTextSize, textColor: emptyMessageTextColor, textColorHover: emptyMessageTextColorHover, textStyle: emptyMessageTextStyle, textWeight: emptyMessageTextWeight, textWrap: emptyMessageTextWrap, isActive: isActive, children: emptyMessage }))] })), after, (iconAfter || iconAfterSrc) && (jsx(Icon, { className: clsx('dropdown__item_after', iconBadgeValue && 'dropdown__item_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'dropdown__item_after_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] }) }), showDivider && (jsx(Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill }))] }));
+            `dropdown__item_justify-content_${justifyContentClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [jsx("div", { className: "dropdown__item-wrapper", children: jsxs(React.Fragment, { children: [before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { className: clsx('dropdown__item_before', iconBadgeValue && 'dropdown__item_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'dropdown__item_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), children || (jsxs(React.Fragment, { children: [label && (jsx(Text, { className: "dropdown__item-label", size: labelTextSize, textAlign: labelTextAlign, textColor: labelTextColor, textColorActive: labelTextColorActive, textColorActiveHover: labelTextColorActiveHover, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })), badgeValue && (jsx(Badge, { appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), desc && (jsx(Text, { className: "dropdown__item-desc", size: descTextSize, textColor: descTextColor, textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, isActive: isActive, children: desc })), emptyMessage && (jsx(Text, { className: "dropdown__item", size: emptyMessageTextSize, textColor: emptyMessageTextColor, textColorHover: emptyMessageTextColorHover, textStyle: emptyMessageTextStyle, textWeight: emptyMessageTextWeight, textWrap: emptyMessageTextWrap, isActive: isActive, children: emptyMessage }))] })), after, (iconAfter || iconAfterSrc) && (jsx(Icon, { className: clsx('dropdown__item_after', iconBadgeValue && 'dropdown__item_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'dropdown__item_after_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] }) }), showDivider && (jsx(Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill }))] }));
 }
 
 export { Dropdown as D, DropdownItem as a, dropdownItemConfig as b, dropdownItemAppearance as d };

package/dist/{Group_cjs_CcDdC0Ua.js → Group_cjs_xCUYKUcc.js}

@@ -7,16 +7,18 @@ var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearance
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
 
-const groupAppearance = {
-    dev: {
-        direction: 'horizontal',
+const groupAppearanceSurface = {
+    surfacePrimary: {
         fill: 'surfacePrimary',
-        fillHover: 'surfacePrimaryHover',
         borderColor: 'surfaceBorderPrimary',
-        borderWidth: 1,
+        borderWidth: '1',
     },
 };
 
+const groupAppearance = {
+    ...groupAppearanceSurface,
+};
+
 const groupConfig = {
     appearance: groupAppearance,
     setAppearance: (appearanceConfig) => {
@@ -28,7 +30,6 @@ const Group = React.forwardRef(function Group(props, ref) {
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, groupConfig);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { directionClass, flexGrowClass, justifyContentClass, alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, borderColorActiveClass, borderColorActiveHoverClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, textColorActiveClass, textColorClass, textColorHoverClass, columnsClass, elevationClass, heightClass, hoverFilterClass, iconFillHoverClass, shapeClass, shapeStrengthClass, stackingClass, widthClass, wrapClass, } = propsGenerator;
-    // @ts-expect-error
     const { styles: groupStyles } = useStyles.useStyles(props);
     return (jsxRuntime.jsx(Tag, { id: id, className: clsx(className, 'group', easing && `easing_${easing}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, hoverFilterClass && `hover-filter_${hoverFilterClass}`, columnsClass && `group_columns_${columnsClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, justifyContentClass && `justify-content_${justifyContentClass}`, textColorClass && `group_text-color_${textColorClass}`, textColorActiveClass &&
             `group_text-color_active_${textColorActiveClass}`, textColorHoverClass && `group_text-color_hover_${textColorHoverClass}`, iconFillHoverClass && `group_icon_fill_hover_${iconFillHoverClass}`, !isDisabled

package/dist/{Group_es_Dml1c8Cz.js → Group_es_BVpRj4LR.js}

@@ -5,16 +5,18 @@ import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceCo
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
 
-const groupAppearance = {
-    dev: {
-        direction: 'horizontal',
+const groupAppearanceSurface = {
+    surfacePrimary: {
         fill: 'surfacePrimary',
-        fillHover: 'surfacePrimaryHover',
         borderColor: 'surfaceBorderPrimary',
-        borderWidth: 1,
+        borderWidth: '1',
     },
 };
 
+const groupAppearance = {
+    ...groupAppearanceSurface,
+};
+
 const groupConfig = {
     appearance: groupAppearance,
     setAppearance: (appearanceConfig) => {
@@ -26,7 +28,6 @@ const Group = React.forwardRef(function Group(props, ref) {
     const appearanceConfig = useAppearanceConfig(appearance, groupConfig);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     const { directionClass, flexGrowClass, justifyContentClass, alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, borderColorActiveClass, borderColorActiveHoverClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, textColorActiveClass, textColorClass, textColorHoverClass, columnsClass, elevationClass, heightClass, hoverFilterClass, iconFillHoverClass, shapeClass, shapeStrengthClass, stackingClass, widthClass, wrapClass, } = propsGenerator;
-    // @ts-expect-error
     const { styles: groupStyles } = useStyles(props);
     return (jsx(Tag, { id: id, className: clsx(className, 'group', easing && `easing_${easing}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, hoverFilterClass && `hover-filter_${hoverFilterClass}`, columnsClass && `group_columns_${columnsClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, justifyContentClass && `justify-content_${justifyContentClass}`, textColorClass && `group_text-color_${textColorClass}`, textColorActiveClass &&
             `group_text-color_active_${textColorActiveClass}`, textColorHoverClass && `group_text-color_hover_${textColorHoverClass}`, iconFillHoverClass && `group_icon_fill_hover_${iconFillHoverClass}`, !isDisabled