@itcase/ui 1.2.30 → 1.2.32

package/dist/{Badge-TyPbVqR_.js → Badge-CHeBPRrf.js}

@@ -2,20 +2,62 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var index = require('./cjs/appearance/Badge.js');
 var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
 var useStyles = require('./cjs/hooks/useStyles.js');
-var Text = require('./Text-CC0xnhmx.js');
+var Text = require('./Text-R6XNq6Ca.js');
+
+var badgeAppearance = {
+    accent: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+        textColor: 'accentTextPrimary',
+    },
+    primary: {
+        fill: 'primaryPrimary',
+        fillHover: 'primaryPrimaryHover',
+        textColor: 'primaryTextPrimary',
+    },
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfacePrimaryHover',
+        textColor: 'surfaceTextPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceSecondaryHover',
+        textColor: 'surfaceTextPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceTertiaryHover',
+        textColor: 'surfaceTextPrimary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillHover: 'surfaceTertiaryHover',
+        textColor: 'surfaceTextInverse',
+    },
+    secondary: {
+        fill: 'secondaryPrimary',
+        fillHover: 'secondaryPrimaryHover',
+        textColor: 'secondaryTextPrimary',
+    },
+    disabled: {
+        fill: 'accentDisabled',
+        fillHover: 'none',
+        textColor: 'accentTextDisabled',
+    },
+};
 
 var badgeConfig = {
-    appearance: index.badgeAppearance,
+    appearance: badgeAppearance,
     setAppearance: function (newComponent) {
         badgeConfig.appearance = newComponent;
     },
 };
 function Badge(props) {
     var _a, _b;
-    var children = props.children, appearance = props.appearance, className = props.className, mode = props.mode; props.shape; props.size; var textColor = props.textColor, textSize = props.textSize, value = props.value;
+    var children = props.children, appearance = props.appearance, className = props.className, mode = props.mode, textColor = props.textColor, textSize = props.textSize, value = props.value;
     var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
         prefix: 'border-color_',
         propsKey: 'borderColor',
@@ -62,6 +104,10 @@ function Badge(props) {
                 ((_b = "fill_hover_".concat(appearanceConfig.fillHover)) === null || _b === void 0 ? void 0 : _b.replace(/([A-Z])/g, '-$1').toLowerCase())), positionClass, sizeClass, shapeClass), style: badgeStyles, children: children ||
             (value && (jsxRuntime.jsx(Text.Text, { size: textSize, textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), children: value }))) }));
 }
+Badge.defaultProps = {
+    shape: 'circular',
+    size: 'm',
+};
 
 exports.Badge = Badge;
 exports.badgeConfig = badgeConfig;

package/dist/{Badge-BZYBmgBK.js → Badge-DBeSKfoF.js}

@@ -1,9 +1,51 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { badgeAppearance } from './appearance/Badge.js';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
-import { T as Text } from './Text-kxGZButz.js';
+import { T as Text } from './Text-C4Bg2Mv6.js';
+
+var badgeAppearance = {
+    accent: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+        textColor: 'accentTextPrimary',
+    },
+    primary: {
+        fill: 'primaryPrimary',
+        fillHover: 'primaryPrimaryHover',
+        textColor: 'primaryTextPrimary',
+    },
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfacePrimaryHover',
+        textColor: 'surfaceTextPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceSecondaryHover',
+        textColor: 'surfaceTextPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceTertiaryHover',
+        textColor: 'surfaceTextPrimary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillHover: 'surfaceTertiaryHover',
+        textColor: 'surfaceTextInverse',
+    },
+    secondary: {
+        fill: 'secondaryPrimary',
+        fillHover: 'secondaryPrimaryHover',
+        textColor: 'secondaryTextPrimary',
+    },
+    disabled: {
+        fill: 'accentDisabled',
+        fillHover: 'none',
+        textColor: 'accentTextDisabled',
+    },
+};
 
 var badgeConfig = {
     appearance: badgeAppearance,
@@ -13,7 +55,7 @@ var badgeConfig = {
 };
 function Badge(props) {
     var _a, _b;
-    var children = props.children, appearance = props.appearance, className = props.className, mode = props.mode; props.shape; props.size; var textColor = props.textColor, textSize = props.textSize, value = props.value;
+    var children = props.children, appearance = props.appearance, className = props.className, mode = props.mode, textColor = props.textColor, textSize = props.textSize, value = props.value;
     var borderColorClass = useDeviceTargetClass(props, {
         prefix: 'border-color_',
         propsKey: 'borderColor',
@@ -60,5 +102,9 @@ function Badge(props) {
                 ((_b = "fill_hover_".concat(appearanceConfig.fillHover)) === null || _b === void 0 ? void 0 : _b.replace(/([A-Z])/g, '-$1').toLowerCase())), positionClass, sizeClass, shapeClass), style: badgeStyles, children: children ||
             (value && (jsx(Text, { size: textSize, textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), children: value }))) }));
 }
+Badge.defaultProps = {
+    shape: 'circular',
+    size: 'm',
+};
 
 export { Badge as B, badgeConfig as b };

package/dist/{Button-avhviao1.js → Button-C8MATksY.js}

@@ -1,13 +1,72 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';
-import { buttonAppearance } from './appearance/Button.js';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
-import { I as Icon } from './Icon-ClsRaxDk.js';
-import { a as LinkWrapper } from './Link-CzC1kU5C.js';
-import { L as Loader } from './Loader-CU_5Ydmy.js';
-import { T as Text } from './Text-kxGZButz.js';
+import { I as Icon } from './Icon-DptCmI_y.js';
+import { a as LinkWrapper } from './Link-CeQuavin.js';
+import { L as Loader } from './Loader-DHNcD09o.js';
+import { T as Text } from './Text-C4Bg2Mv6.js';
+
+var buttonAppearance = {
+    dev: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceSecondaryHover',
+        label: 'Button',
+        labelTextColor: 'surfaceTextPrimary',
+        labelTextSize: 'l',
+        shape: 'rounded',
+        size: 'xxl',
+    },
+    accent: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+        labelTextColor: 'accentTextPrimary',
+        labelTextColorHover: 'accentTextPrimary',
+        loaderFill: 'accentPrimary',
+        loaderItemFill: 'accentItemPrimary',
+    },
+    accentSecondary: {
+        fill: 'accentSecondary',
+        fillHover: 'accentPrimaryHover',
+        labelTextColor: 'accentTextPrimary',
+        labelTextColorHover: 'accentTextPrimary',
+        loaderFill: 'accentPrimary',
+        loaderItemFill: 'accentItemPrimary',
+    },
+    primary: {
+        fill: 'primaryPrimary',
+        fillHover: 'primaryPrimaryHover',
+        labelTextColor: 'primaryTextPrimary',
+    },
+    secondary: {
+        fill: 'secondaryPrimary',
+        fillHover: 'secondaryPrimaryHover',
+        labelTextColor: 'secondaryTextPrimary',
+    },
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfacePrimaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceSecondaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+        loaderFill: 'surfaceSecondary',
+        loaderItemFill: 'surfaceItemPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceTertiaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+    surfaceDisabled: {
+        fill: 'surfaceDisabled',
+        fillHover: 'surfaceDisabled',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+};
 
 var buttonConfig = {
     appearance: buttonAppearance,
@@ -88,4 +147,4 @@ var Button = React.forwardRef(function Button(props, ref) {
             'button_type_with-icon', loading && 'button_state_loading'), "data-test-id": dataTestId && "".concat(dataTestId, "Button"), "data-tour": dataTour, DefaultComponent: "button", disabled: isDisabled, href: link || href, rel: rel, style: buttonStyles, target: target, type: htmlType, onClick: onClick, onMouseDown: onMouseDown, children: jsxs("div", { className: "button__wrapper", ref: ref, children: [loading && (jsx(Loader, { className: clsx(className, 'button__loader', shapeClass), fill: loaderFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.loaderFill), itemFill: loaderItemFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.loaderItemFill), set: loaderSet })), before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { className: "button__icon_before", fill: fillIconBefore, fillSize: iconBeforeFillSize, iconFill: iconBeforeFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconBeforeFill), imageSrc: iconBeforeSrc, shape: iconBeforeShape, size: iconBeforeSize, SvgImage: iconBefore })), (icon || iconSrc) && (jsx(Icon, { className: "button__icon", fill: fillIcon, fillSize: iconFillSize, iconFill: iconFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconFill), imageSrc: iconSrc, shape: iconShape, size: iconSize, SvgImage: icon })), (children || label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label)) && (jsx(Text, { className: "button__label", width: labelTextWidth, size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize) || undefined, sizeMobile: labelTextSizeMobile, style: labelStyles, textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textColorHover: labelTextColorHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColorHover), textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, children: children || label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label) })), (iconAfter || iconAfterSrc) && (jsx(Icon, { className: "button__icon_after", fill: fillIconAfter, fillSize: iconAfterFillSize, iconFill: iconAfterFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconAfterFill), imageSrc: iconAfterSrc, shape: iconAfterShape, size: iconAfterSize, SvgImage: iconAfter })), Badge, after] }) }));
 });
 
-export { Button as B, buttonConfig as b };
+export { Button as B, buttonAppearance as a, buttonConfig as b };

package/dist/{Button-BcOsYgoT.js → Button-ChSAts3j.js}

@@ -3,16 +3,75 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var index = require('./cjs/appearance/Button.js');
 var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
 var useStyles = require('./cjs/hooks/useStyles.js');
-var Icon = require('./Icon-B2BwTQnP.js');
+var Icon = require('./Icon-C8ACV9r7.js');
 var Link = require('./Link-CqWzwh8V.js');
-var Loader = require('./Loader-Ck59IXGG.js');
-var Text = require('./Text-CC0xnhmx.js');
+var Loader = require('./Loader-DReoCdZ2.js');
+var Text = require('./Text-R6XNq6Ca.js');
+
+var buttonAppearance = {
+    dev: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceSecondaryHover',
+        label: 'Button',
+        labelTextColor: 'surfaceTextPrimary',
+        labelTextSize: 'l',
+        shape: 'rounded',
+        size: 'xxl',
+    },
+    accent: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+        labelTextColor: 'accentTextPrimary',
+        labelTextColorHover: 'accentTextPrimary',
+        loaderFill: 'accentPrimary',
+        loaderItemFill: 'accentItemPrimary',
+    },
+    accentSecondary: {
+        fill: 'accentSecondary',
+        fillHover: 'accentPrimaryHover',
+        labelTextColor: 'accentTextPrimary',
+        labelTextColorHover: 'accentTextPrimary',
+        loaderFill: 'accentPrimary',
+        loaderItemFill: 'accentItemPrimary',
+    },
+    primary: {
+        fill: 'primaryPrimary',
+        fillHover: 'primaryPrimaryHover',
+        labelTextColor: 'primaryTextPrimary',
+    },
+    secondary: {
+        fill: 'secondaryPrimary',
+        fillHover: 'secondaryPrimaryHover',
+        labelTextColor: 'secondaryTextPrimary',
+    },
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfacePrimaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceSecondaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+        loaderFill: 'surfaceSecondary',
+        loaderItemFill: 'surfaceItemPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceTertiaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+    surfaceDisabled: {
+        fill: 'surfaceDisabled',
+        fillHover: 'surfaceDisabled',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+};
 
 var buttonConfig = {
-    appearance: index.buttonAppearance,
+    appearance: buttonAppearance,
     setAppearance: function (newComponent) {
         buttonConfig.appearance = newComponent;
     },
@@ -91,4 +150,5 @@ var Button = React.forwardRef(function Button(props, ref) {
 });
 
 exports.Button = Button;
+exports.buttonAppearance = buttonAppearance;
 exports.buttonConfig = buttonConfig;

package/dist/Divider-BoB-f9Gr.js

@@ -0,0 +1,74 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
+var useStyles = require('./cjs/hooks/useStyles.js');
+
+var dividerAppearance = {
+    dev: {},
+};
+
+var dividerConfig = {
+    appearance: dividerAppearance,
+    setAppearance: function (newComponent) {
+        dividerConfig.appearance = newComponent;
+    },
+};
+function Divider(props) {
+    var appearance = props.appearance, className = props.className;
+    var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'divider_direction_',
+        propsKey: 'direction',
+    });
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var fillActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_active_',
+        propsKey: 'fillActive',
+    });
+    var fillActiveHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_active_hover_',
+        propsKey: 'fillActiveHover',
+    });
+    var fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_disabled_',
+        propsKey: 'fillDisabled',
+    });
+    var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'divider_size_',
+        propsKey: 'size',
+    });
+    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    // @ts-expect-error
+    var hrStyles = useStyles.useStyles(props).styles;
+    var appearanceConfig = appearance && dividerConfig.appearance && dividerConfig.appearance[appearance];
+    return (jsxRuntime.jsx("hr", { className: clsx(className, 'divider', widthClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.width) &&
+                "width_".concat(appearanceConfig.width).replace(/([A-Z])/g, '-$1').toLowerCase()), directionClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.direction) &&
+                "divider_direction_".concat(appearanceConfig.direction)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), sizeClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.size) &&
+                "divider_size_".concat(appearanceConfig.size).replace(/([A-Z])/g, '-$1').toLowerCase()), fillClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
+                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
+                "fill_hover_".concat(appearanceConfig.fillHover).replace(/([A-Z])/g, '-$1').toLowerCase()), fillActiveClass, fillActiveHoverClass, fillDisabledClass), style: hrStyles }));
+}
+Divider.defaultProps = {
+    size: 'xs',
+};
+
+exports.Divider = Divider;
+exports.dividerConfig = dividerConfig;

package/dist/Divider-DHIuQUsH.js

@@ -0,0 +1,71 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
+import { useStyles } from './hooks/useStyles.js';
+
+var dividerAppearance = {
+    dev: {},
+};
+
+var dividerConfig = {
+    appearance: dividerAppearance,
+    setAppearance: function (newComponent) {
+        dividerConfig.appearance = newComponent;
+    },
+};
+function Divider(props) {
+    var appearance = props.appearance, className = props.className;
+    var directionClass = useDeviceTargetClass(props, {
+        prefix: 'divider_direction_',
+        propsKey: 'direction',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var fillActiveClass = useDeviceTargetClass(props, {
+        prefix: 'fill_active_',
+        propsKey: 'fillActive',
+    });
+    var fillActiveHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_active_hover_',
+        propsKey: 'fillActiveHover',
+    });
+    var fillDisabledClass = useDeviceTargetClass(props, {
+        prefix: 'fill_disabled_',
+        propsKey: 'fillDisabled',
+    });
+    var sizeClass = useDeviceTargetClass(props, {
+        prefix: 'divider_size_',
+        propsKey: 'size',
+    });
+    var widthClass = useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    // @ts-expect-error
+    var hrStyles = useStyles(props).styles;
+    var appearanceConfig = appearance && dividerConfig.appearance && dividerConfig.appearance[appearance];
+    return (jsx("hr", { className: clsx(className, 'divider', widthClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.width) &&
+                "width_".concat(appearanceConfig.width).replace(/([A-Z])/g, '-$1').toLowerCase()), directionClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.direction) &&
+                "divider_direction_".concat(appearanceConfig.direction)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), sizeClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.size) &&
+                "divider_size_".concat(appearanceConfig.size).replace(/([A-Z])/g, '-$1').toLowerCase()), fillClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
+                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
+                "fill_hover_".concat(appearanceConfig.fillHover).replace(/([A-Z])/g, '-$1').toLowerCase()), fillActiveClass, fillActiveHoverClass, fillDisabledClass), style: hrStyles }));
+}
+Divider.defaultProps = {
+    size: 'xs',
+};
+
+export { Divider as D, dividerConfig as d };

package/dist/DropdownItem-B8IMNQww.js

@@ -0,0 +1,182 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useRef, useState, useCallback, useEffect } from 'react';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
+import { useStyles } from './hooks/useStyles.js';
+import { D as Divider } from './Divider-DHIuQUsH.js';
+import { L as Link } from './Link-CeQuavin.js';
+import { T as Text } from './Text-C4Bg2Mv6.js';
+
+function Dropdown(props) {
+    var children = props.children, isOpen = props.isOpen, after = props.after, _a = props.animationClose, animationClose = _a === void 0 ? 'dropdown_animation_close' : _a, _b = props.animationOpen, animationOpen = _b === void 0 ? 'dropdown_animation_open' : _b, before = props.before, className = props.className, _c = props.set, set = _c === void 0 ? 'normal' : _c, setIsOpen = props.setIsOpen;
+    var dropdownRef = useRef(null);
+    // const [isOpen, setIsOpen] = useState(false)
+    var _d = useState({
+        className: '',
+    }), animationState = _d[0], setAnimationState = _d[1];
+    var onAnimationEnd = useCallback(function () {
+        // When component is change his visibility(display) in DOM,
+        // animation of close can run unnecessary on showing element.
+        // const dropdownElement = dropdownRef.current
+        setAnimationState(function (prevState) { return ({
+            className: isOpen ? prevState.className : '',
+        }); });
+    }, [isOpen]);
+    useEffect(function () {
+        if (animationOpen && animationClose) {
+            setAnimationState(function () { return ({
+                className: isOpen ? animationOpen : animationClose,
+            }); });
+        }
+    }, [isOpen]);
+    // Close dropdown by click outside
+    useEffect(function () {
+        // Add a handler to keep track of the click target.
+        function onClickWindow(event) {
+            var dropdownElement = dropdownRef.current;
+            if (dropdownElement && animationOpen) {
+                // Is event target inside of dropdown element
+                var isContainsTarget = dropdownElement.contains(event.target);
+                // Is dropdown element has "open" class
+                var 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 function () {
+            // Remove event listener for current dropdown on unmount
+            window.removeEventListener('click', onClickWindow);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'dropdown_shape_',
+        propsKey: 'shape',
+    });
+    var elevationClass = useDeviceTargetClass(props, {
+        prefix: 'elevation_',
+        propsKey: 'elevation',
+    });
+    var alignmentClass = useDeviceTargetClass(props, {
+        prefix: 'alignment_',
+        propsKey: 'alignment',
+    });
+    // @ts-expect-error
+    var styles = useStyles(props).styles;
+    return (jsxs("div", { className: clsx(className, 'dropdown', alignmentClass, set && "dropdown_set_".concat(set), shapeClass, elevationClass, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className), ref: dropdownRef, style: styles, children: [before, children && (jsx("div", { className: clsx('dropdown__wrapper', fillClass, fillHoverClass), 
+                // Add "onAnimationEnd" only for wrapper for ignore dropdown button
+                onAnimationEnd: onAnimationEnd, children: children })), after] }));
+}
+
+var dropdownItemAppearance = {
+    dev: {},
+};
+
+var dropdownItemConfig = {
+    appearance: dropdownItemAppearance,
+    setAppearance: function (newComponent) {
+        dropdownItemConfig.appearance = newComponent;
+    },
+};
+function DropdownItem(props) {
+    var children = props.children, isActive = props.isActive, isHover = props.isHover, after = props.after, appearance = props.appearance, before = props.before, className = props.className, desc = props.desc, descTextColor = props.descTextColor, descTextColorHover = props.descTextColorHover, descTextGradient = props.descTextGradient, descTextSize = props.descTextSize, descTextStyle = props.descTextStyle, descTextWeight = props.descTextWeight, descTextWrap = props.descTextWrap, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerSize = props.dividerSize, href = props.href, label = props.label, labelTextAlign = props.labelTextAlign, labelTextColor = props.labelTextColor, labelTextColorActive = props.labelTextColorActive, labelTextColorHover = props.labelTextColorHover, labelTextGradient = props.labelTextGradient, labelTextSize = props.labelTextSize, labelTextStyle = props.labelTextStyle, labelTextWeight = props.labelTextWeight, labelTextWrap = props.labelTextWrap, link = props.link, linkFill = props.linkFill, rel = props.rel, set = props.set, showDivider = props.showDivider, target = props.target, underline = props.underline, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
+    var alignDirectionClass = useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'alignDirection',
+    });
+    var alignClass = useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'align',
+    });
+    var directionClass = useDeviceTargetClass(props, {
+        prefix: 'dropdown__item_direction_',
+        propsKey: 'direction',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var fillActiveClass = useDeviceTargetClass(props, {
+        prefix: 'fill_active_',
+        propsKey: 'fillActive',
+    });
+    var fillActiveHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_active_hover_',
+        propsKey: 'fillActiveHover',
+    });
+    var fillDisabledClass = useDeviceTargetClass(props, {
+        prefix: 'fill_disabled_',
+        propsKey: 'fillDisabled',
+    });
+    useDeviceTargetClass(props, {
+        propsKey: 'linkFill',
+    });
+    var sizeClass = useDeviceTargetClass(props, {
+        prefix: 'dropdown__item_size_',
+        propsKey: 'size',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'dropdown__item_shape_',
+        propsKey: 'shape',
+    });
+    var justifyContentClass = useDeviceTargetClass(props, {
+        prefix: 'dropdown__item_justify-content_',
+        propsKey: 'justifyContent',
+    });
+    var typeClass = useDeviceTargetClass(props, {
+        prefix: 'dropdown__item_type_',
+        propsKey: 'type',
+    });
+    var widthClass = useDeviceTargetClass(props, {
+        prefix: 'dropdown__item_width_',
+        propsKey: 'width',
+    });
+    // @ts-expect-error
+    var dropdownItem = useStyles(props).styles;
+    var appearanceConfig = appearance && dropdownItemConfig.appearance && dropdownItemConfig.appearance[appearance];
+    return (jsxs("div", { className: clsx('dropdown__item', isActive && 'dropdown__item_state_active', isHover && 'dropdown__item_state_hover', directionClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.direction) &&
+                "dropdown__item_direction_".concat(appearanceConfig.direction)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), className, fillClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
+                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
+                "fill_hover_".concat(appearanceConfig.fillHover).replace(/([A-Z])/g, '-$1').toLowerCase()), fillActiveClass, fillActiveHoverClass, fillDisabledClass, sizeClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.size) &&
+                "dropdown__item_size_".concat(appearanceConfig.size)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), shapeClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
+                "dropdown__item_shape_".concat(appearanceConfig.shape)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), typeClass, widthClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.width) &&
+                "dropdown__item_width_".concat(appearanceConfig.width)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), onClick && 'cursor_type_pointer', set && "dropdown__item_set_".concat(set), justifyContentClass), style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [jsx("div", { className: "dropdown__item-wrapper", children: jsx(Link, { className: clsx('dropdown__item-link', alignDirectionClass, alignClass), fill: linkFill, href: link || href, rel: rel, target: target, underline: underline, children: jsxs(React.Fragment, { children: [before, children || (jsxs(React.Fragment, { children: [label && (jsx(Text, { className: "dropdown__item-label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textAlign: labelTextAlign, textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textColorActive: isActive ? labelTextColorActive : undefined, textColorGradient: labelTextGradient, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })), desc && (jsx(Text, { className: "dropdown__item-desc", size: descTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextSize), textColor: descTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextColor), textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, children: desc }))] })), after] }) }) }), showDivider && (jsx(Divider, { width: "fill", fill: dividerFill || 'surfaceTertiary', direction: dividerDirection, size: dividerSize }))] }));
+}
+DropdownItem.defaultProps = {
+    width: 'fixed',
+    LinkComponent: 'a',
+    size: 'l',
+};
+
+export { Dropdown as D, DropdownItem as a, dropdownItemConfig as d };