@itcase/ui 1.8.149 → 1.8.151

package/dist/{Avatar_cjs_D-M9sW20.js → Avatar_cjs_Dv_yLG9O.js}

@@ -5,7 +5,7 @@ var React = require('react');
 var clsx = require('clsx');
 var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var Icon = require('./Icon_cjs_DKzT-zmQ.js');
+var Icon = require('./Icon_cjs_B5o0K55R.js');
 var Image = require('./Image_cjs_BUM81t4Y.js');
 var Text = require('./Text_cjs_DaH5tVvz.js');
 

package/dist/{Avatar_es_BTvbT36l.js → Avatar_es_Cp4-nxIj.js}

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import clsx from 'clsx';
 import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { I as Icon, B as Badge } from './Icon_es_5JUPM7bP.js';
+import { I as Icon, B as Badge } from './Icon_es_BEhzKfrD.js';
 import { I as Image } from './Image_es_C-IjVkKX.js';
 import { T as Text } from './Text_es_RDU9GLCV.js';
 

package/dist/{Button_cjs_CrbH_HYn.js → Button_cjs_CGIzPuXo.js}

@@ -3,7 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var Icon = require('./Icon_cjs_DKzT-zmQ.js');
+var Icon = require('./Icon_cjs_B5o0K55R.js');
 var Link = require('./Link_cjs_qKXVfU8e.js');
 var Loader = require('./Loader_cjs_CRiUlTC3.js');
 var Text = require('./Text_cjs_DaH5tVvz.js');
@@ -386,7 +386,7 @@ const buttonAppearanceSurface = {
     },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
-        fillHover: 'surfaceSecondary',
+        fillHover: 'surfaceTertiary',
         labelTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderTertiary',
         iconAfterFillIcon: 'surfaceItemPrimary',
@@ -477,10 +477,10 @@ const Button = React.forwardRef(function Button(props, ref) {
     return (jsxRuntime.jsx(Link.LinkWrapper, { className: clsx(className, 'button', label && buttonTypeClass
             ? 'button_type_default'
             : label
-                ? 'buttom_type_label'
+                ? 'button_type_label'
                 : buttonTypeClass
                     ? 'button_type_icon'
-                    : '', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `button_size_${sizeClass}`, widthClass && `button_width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer', isDisabled && 'cursor_type_default', Badge && 'button_type_badge', zeroPadding && 'button_reset-padding', zeroGap && 'button_reset-gap', isLoading && 'button_state_loading', isSkeleton && `button_skeleton`), type: htmlType, "data-test-id": dataTestId && `${dataTestId}Button`, "data-tour": dataTour, disabled: isDisabled, href: link || href, LinkComponent: "button", rel: rel, style: buttonStyles, target: target, onClick: onClick, onMouseDown: onMouseDown, children: jsxRuntime.jsxs("div", { className: "button__wrapper", ref: ref, children: [isLoading && (jsxRuntime.jsx(Loader.Loader, { appearance: `${loaderAppearance} ${loaderAppearanceSize}`, className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), before, (iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "button__icon_before", fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "button__icon", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (children || label) && (jsxRuntime.jsx(Text.Text, { className: "button__label", width: labelTextWidth, size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, style: labelStyles, children: children || label })), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "button__icon_after", fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), Badge, after] }) }));
+                    : '', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && !isDisabled && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `button_size_${sizeClass}`, widthClass && `button_width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer', isDisabled && 'button_state_disabled cursor_type_default', Badge && 'button_type_badge', zeroPadding && 'button_reset-padding', zeroGap && 'button_reset-gap', isLoading && 'button_state_loading', isSkeleton && `button_skeleton`), type: htmlType, "data-test-id": dataTestId && `${dataTestId}Button`, "data-tour": dataTour, disabled: isDisabled, href: link || href, LinkComponent: "button", rel: rel, style: buttonStyles, target: target, onClick: onClick, onMouseDown: onMouseDown, children: jsxRuntime.jsxs("div", { className: "button__wrapper", ref: ref, children: [isLoading && (jsxRuntime.jsx(Loader.Loader, { appearance: `${loaderAppearance} ${loaderAppearanceSize}`, className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), before, (iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "button__icon_before", fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "button__icon", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (children || label) && (jsxRuntime.jsx(Text.Text, { className: "button__label", width: labelTextWidth, size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, style: labelStyles, children: children || label })), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "button__icon_after", fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), Badge, after] }) }));
 });
 
 exports.Button = Button;

package/dist/{Button_es_qNbDsXQg.js → Button_es_CtAnUzZA.js}

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';
-import { I as Icon } from './Icon_es_5JUPM7bP.js';
+import { I as Icon } from './Icon_es_BEhzKfrD.js';
 import { a as LinkWrapper } from './Link_es_P2b6ya7P.js';
 import { L as Loader } from './Loader_es_Dq2-7sn2.js';
 import { T as Text } from './Text_es_RDU9GLCV.js';
@@ -384,7 +384,7 @@ const buttonAppearanceSurface = {
     },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
-        fillHover: 'surfaceSecondary',
+        fillHover: 'surfaceTertiary',
         labelTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderTertiary',
         iconAfterFillIcon: 'surfaceItemPrimary',
@@ -475,10 +475,10 @@ const Button = React.forwardRef(function Button(props, ref) {
     return (jsx(LinkWrapper, { className: clsx(className, 'button', label && buttonTypeClass
             ? 'button_type_default'
             : label
-                ? 'buttom_type_label'
+                ? 'button_type_label'
                 : buttonTypeClass
                     ? 'button_type_icon'
-                    : '', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `button_size_${sizeClass}`, widthClass && `button_width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer', isDisabled && 'cursor_type_default', Badge && 'button_type_badge', zeroPadding && 'button_reset-padding', zeroGap && 'button_reset-gap', isLoading && 'button_state_loading', isSkeleton && `button_skeleton`), type: htmlType, "data-test-id": dataTestId && `${dataTestId}Button`, "data-tour": dataTour, disabled: isDisabled, href: link || href, LinkComponent: "button", rel: rel, style: buttonStyles, target: target, onClick: onClick, onMouseDown: onMouseDown, children: jsxs("div", { className: "button__wrapper", ref: ref, children: [isLoading && (jsx(Loader, { appearance: `${loaderAppearance} ${loaderAppearanceSize}`, className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { className: "button__icon_before", fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), (icon || iconSrc) && (jsx(Icon, { className: "button__icon", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (children || label) && (jsx(Text, { className: "button__label", width: labelTextWidth, size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, style: labelStyles, children: children || label })), (iconAfter || iconAfterSrc) && (jsx(Icon, { className: "button__icon_after", fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), Badge, after] }) }));
+                    : '', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && !isDisabled && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `button_size_${sizeClass}`, widthClass && `button_width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer', isDisabled && 'button_state_disabled cursor_type_default', Badge && 'button_type_badge', zeroPadding && 'button_reset-padding', zeroGap && 'button_reset-gap', isLoading && 'button_state_loading', isSkeleton && `button_skeleton`), type: htmlType, "data-test-id": dataTestId && `${dataTestId}Button`, "data-tour": dataTour, disabled: isDisabled, href: link || href, LinkComponent: "button", rel: rel, style: buttonStyles, target: target, onClick: onClick, onMouseDown: onMouseDown, children: jsxs("div", { className: "button__wrapper", ref: ref, children: [isLoading && (jsx(Loader, { appearance: `${loaderAppearance} ${loaderAppearanceSize}`, className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { className: "button__icon_before", fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), (icon || iconSrc) && (jsx(Icon, { className: "button__icon", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), (children || label) && (jsx(Text, { className: "button__label", width: labelTextWidth, size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, style: labelStyles, children: children || label })), (iconAfter || iconAfterSrc) && (jsx(Icon, { className: "button__icon_after", fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), Badge, after] }) }));
 });
 
 export { Button as B, buttonAppearance as a, buttonConfig as b };

package/dist/{ChipsGroup_cjs_BNfzAmhc.js → ChipsGroup_cjs_DVizkQ4v.js}

@@ -5,7 +5,7 @@ var clsx = require('clsx');
 var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-var Icon = require('./Icon_cjs_DKzT-zmQ.js');
+var Icon = require('./Icon_cjs_B5o0K55R.js');
 var Text = require('./Text_cjs_DaH5tVvz.js');
 
 const chipsAppearanceAccent = {

package/dist/{ChipsGroup_es_UTiUhYs7.js → ChipsGroup_es_D3eiXGyK.js}

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

package/dist/{DatePicker_cjs_YWv3CCNF.js → DatePicker_cjs_D0iBBPU9.js}

@@ -8,10 +8,10 @@ var DatePicker = require('react-datepicker');
 var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-var Button = require('./Button_cjs_CrbH_HYn.js');
-var Icon = require('./Icon_cjs_DKzT-zmQ.js');
+var Button = require('./Button_cjs_CGIzPuXo.js');
+var Icon = require('./Icon_cjs_B5o0K55R.js');
 var Input = require('./Input_cjs_DDi5JVAV.js');
-var Label = require('./Label_cjs_D2YMjCoS.js');
+var Label = require('./Label_cjs_DRIwteHh.js');
 var Text = require('./Text_cjs_DaH5tVvz.js');
 var _default = require('@itcase/icons/default');
 

package/dist/{DatePicker_es_CqKPt0Nw.js → DatePicker_es_DtBOEq-Q.js}

@@ -6,10 +6,10 @@ import DatePicker from 'react-datepicker';
 import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
-import { B as Button } from './Button_es_qNbDsXQg.js';
-import { I as Icon } from './Icon_es_5JUPM7bP.js';
+import { B as Button } from './Button_es_CtAnUzZA.js';
+import { I as Icon } from './Icon_es_BEhzKfrD.js';
 import { I as Input } from './Input_es_BnCXATnh.js';
-import { L as Label } from './Label_es_B5uGQwNN.js';
+import { L as Label } from './Label_es_DYd2RwDK.js';
 import { T as Text } from './Text_es_RDU9GLCV.js';
 import { icons14 } from '@itcase/icons/default';
 

package/dist/{DropdownItem_cjs_FsiEMPDs.js → DropdownItem_cjs_u6-29C8x.js}

@@ -3,68 +3,13 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
+var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-var Icon = require('./Icon_cjs_DKzT-zmQ.js');
-var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
+var Icon = require('./Icon_cjs_B5o0K55R.js');
 var Divider = require('./Divider_cjs_DrmV2ezS.js');
 var Text = require('./Text_cjs_DaH5tVvz.js');
 
-function Dropdown(props) {
-    const { className, appearance, animationClose = 'dropdown_animation_close', animationOpen = 'dropdown_animation_open', dropdownList, before, after, isOpen, isSkeleton, setIsOpen, onClickItem, children, } = props;
-    const dropdownRef = React.useRef(null);
-    // 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) {
-            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
-    }, []);
-    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
-    const { alignmentClass, fillClass, fillHoverClass, elevationClass, shapeClass, shapeStrengthClass, } = propsGenerator;
-    const { styles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsxs("div", { className: clsx(className, 'dropdown', alignmentClass && `alignment_${alignmentClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, elevationClass && `elevation_${elevationClass}`, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className), ref: dropdownRef, style: styles, children: [before, (children || dropdownList) && (jsxRuntime.jsxs("div", { className: clsx('dropdown__wrapper', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), 
-                // 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, isActive: item.isActive, isSkeleton: isSkeleton, onClick: item.onClick || ((event) => onClickItem?.(item, event)) }, item.key))), children] })), after] }));
-}
-
 const dropdownAppearanceAccent = {
     accentPrimary: {
         fill: 'accentPrimary',
@@ -90,6 +35,31 @@ const dropdownAppearanceAccent = {
     },
 };
 
+const dropdownAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+};
+
 const dropdownAppearanceSize = {
     sizeL: {
         size: 'l',
@@ -177,9 +147,76 @@ const dropdownAppearanceSurface = {
     },
 };
 
+const dropdownAppearance = {
+    ...dropdownAppearanceSurface,
+    ...dropdownAppearanceStyle,
+    ...dropdownAppearanceShape,
+    ...dropdownAppearanceAccent,
+    ...dropdownAppearanceSize,
+};
+
+const dropdownConfig = {
+    appearance: dropdownAppearance};
+function Dropdown(props) {
+    const { appearance, className, 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) {
+            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
+    }, []);
+    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, 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] }));
+}
+
 const dropdownItemAppearance = {
     ...dropdownAppearanceSurface,
     ...dropdownAppearanceStyle,
+    ...dropdownAppearanceShape,
     ...dropdownAppearanceAccent,
     ...dropdownAppearanceSize,
 };
@@ -191,17 +228,17 @@ const dropdownItemConfig = {
     },
 };
 function DropdownItem(props) {
-    const { className, appearance, label, desc, isDisabled, badgeValue, emptyMessage, showDivider, before, after, isActive, isHover, isSkeleton, onClick, onMouseEnter, children, } = props;
+    const { appearance, className, label, desc, badgeValue, emptyMessage, showDivider, before, after, isActive, isDisabled, isSkeleton, isHover, onClick, onMouseEnter, children, } = 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, sizeClass, widthClass, } = propsGenerator;
+    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 && `dropdown__item_shape_${shapeClass}`, widthClass && `dropdown__item_width_${widthClass}`, isDisabled && `dropdown__item_state_disabled`, onClick && 'cursor_type_pointer', isSkeleton && `dropdown__item_skeleton`, justifyContentClass &&
+            : 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}`), 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 }))] }));
 }
 

package/dist/{DropdownItem_es_BBKtNngp.js → DropdownItem_es_D2P4zJJ-.js}

@@ -1,68 +1,13 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useRef, useState, useCallback, useEffect } from 'react';
 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_5JUPM7bP.js';
-import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
+import { I as Icon, B as Badge } from './Icon_es_BEhzKfrD.js';
 import { D as Divider } from './Divider_es_BiYozVBS.js';
 import { T as Text } from './Text_es_RDU9GLCV.js';
 
-function Dropdown(props) {
-    const { className, appearance, animationClose = 'dropdown_animation_close', animationOpen = 'dropdown_animation_open', dropdownList, before, after, isOpen, isSkeleton, setIsOpen, onClickItem, children, } = props;
-    const dropdownRef = useRef(null);
-    // 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) {
-            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
-    }, []);
-    const propsGenerator = useDevicePropsGenerator(props);
-    const { alignmentClass, fillClass, fillHoverClass, elevationClass, shapeClass, shapeStrengthClass, } = propsGenerator;
-    const { styles } = useStyles(props);
-    return (jsxs("div", { className: clsx(className, 'dropdown', alignmentClass && `alignment_${alignmentClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, elevationClass && `elevation_${elevationClass}`, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className), ref: dropdownRef, style: styles, children: [before, (children || dropdownList) && (jsxs("div", { className: clsx('dropdown__wrapper', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), 
-                // 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, isActive: item.isActive, isSkeleton: isSkeleton, onClick: item.onClick || ((event) => onClickItem?.(item, event)) }, item.key))), children] })), after] }));
-}
-
 const dropdownAppearanceAccent = {
     accentPrimary: {
         fill: 'accentPrimary',
@@ -88,6 +33,31 @@ const dropdownAppearanceAccent = {
     },
 };
 
+const dropdownAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+};
+
 const dropdownAppearanceSize = {
     sizeL: {
         size: 'l',
@@ -175,9 +145,76 @@ const dropdownAppearanceSurface = {
     },
 };
 
+const dropdownAppearance = {
+    ...dropdownAppearanceSurface,
+    ...dropdownAppearanceStyle,
+    ...dropdownAppearanceShape,
+    ...dropdownAppearanceAccent,
+    ...dropdownAppearanceSize,
+};
+
+const dropdownConfig = {
+    appearance: dropdownAppearance};
+function Dropdown(props) {
+    const { appearance, className, 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) {
+            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
+    }, []);
+    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, 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] }));
+}
+
 const dropdownItemAppearance = {
     ...dropdownAppearanceSurface,
     ...dropdownAppearanceStyle,
+    ...dropdownAppearanceShape,
     ...dropdownAppearanceAccent,
     ...dropdownAppearanceSize,
 };
@@ -189,17 +226,17 @@ const dropdownItemConfig = {
     },
 };
 function DropdownItem(props) {
-    const { className, appearance, label, desc, isDisabled, badgeValue, emptyMessage, showDivider, before, after, isActive, isHover, isSkeleton, onClick, onMouseEnter, children, } = props;
+    const { appearance, className, label, desc, badgeValue, emptyMessage, showDivider, before, after, isActive, isDisabled, isSkeleton, isHover, onClick, onMouseEnter, children, } = 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, sizeClass, widthClass, } = propsGenerator;
+    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 && `dropdown__item_shape_${shapeClass}`, widthClass && `dropdown__item_width_${widthClass}`, isDisabled && `dropdown__item_state_disabled`, onClick && 'cursor_type_pointer', isSkeleton && `dropdown__item_skeleton`, justifyContentClass &&
+            : 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}`), 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 }))] }));
 }
 

package/dist/{Icon_cjs_DKzT-zmQ.js → Icon_cjs_B5o0K55R.js}

@@ -1004,10 +1004,16 @@ const iconAppearanceSurface = {
         badgeAppearance: 'surfacePrimary',
         iconFill: 'surfaceItemPrimary',
     },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillHover: 'surfaceHover',
+        badgeAppearance: 'accentPrimary',
+        iconFill: 'surfaceItemPrimary',
+    },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
         fillHover: 'surfaceSecondaryHover',
-        badgeAppearance: 'accentPrimary',
+        badgeAppearance: 'accentPrimary solid rounded',
         iconFill: 'surfaceItemPrimary',
     },
     surfaceTertiary: {
@@ -1016,12 +1022,6 @@ const iconAppearanceSurface = {
         badgeAppearance: 'accentPrimary',
         iconFill: 'surfaceItemPrimary',
     },
-    surfaceQuaternary: {
-        fill: 'surfaceQuaternary',
-        fillHover: 'surfaceHover',
-        badgeAppearance: 'accentPrimary',
-        iconFill: 'surfaceItemPrimary',
-    },
 };
 
 const iconAppearanceWarning = {

package/dist/{Icon_es_5JUPM7bP.js → Icon_es_BEhzKfrD.js}

@@ -1002,10 +1002,16 @@ const iconAppearanceSurface = {
         badgeAppearance: 'surfacePrimary',
         iconFill: 'surfaceItemPrimary',
     },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillHover: 'surfaceHover',
+        badgeAppearance: 'accentPrimary',
+        iconFill: 'surfaceItemPrimary',
+    },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
         fillHover: 'surfaceSecondaryHover',
-        badgeAppearance: 'accentPrimary',
+        badgeAppearance: 'accentPrimary solid rounded',
         iconFill: 'surfaceItemPrimary',
     },
     surfaceTertiary: {
@@ -1014,12 +1020,6 @@ const iconAppearanceSurface = {
         badgeAppearance: 'accentPrimary',
         iconFill: 'surfaceItemPrimary',
     },
-    surfaceQuaternary: {
-        fill: 'surfaceQuaternary',
-        fillHover: 'surfaceHover',
-        badgeAppearance: 'accentPrimary',
-        iconFill: 'surfaceItemPrimary',
-    },
 };
 
 const iconAppearanceWarning = {