@itcase/ui 1.2.30 → 1.2.31

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

@@ -5,7 +5,7 @@ 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-1b-Bk7yG.js');
 
 var badgeConfig = {
     appearance: index.badgeAppearance,
@@ -15,7 +15,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.useDeviceTargetClass(props, {
         prefix: 'border-color_',
         propsKey: 'borderColor',
@@ -62,6 +62,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-DQnTpE4I.js}

@@ -3,7 +3,7 @@ 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-DlSG_p4u.js';
 
 var badgeConfig = {
     appearance: badgeAppearance,
@@ -13,7 +13,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 +60,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-DS2l65oq.js}

@@ -4,10 +4,10 @@ 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-B7BJo5kW.js';
+import { a as LinkWrapper } from './Link-CeQuavin.js';
+import { L as Loader } from './Loader-CqEocvjh.js';
+import { T as Text } from './Text-DlSG_p4u.js';
 
 var buttonConfig = {
     appearance: buttonAppearance,

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

@@ -6,10 +6,10 @@ 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-PoesVPJn.js');
 var Link = require('./Link-CqWzwh8V.js');
-var Loader = require('./Loader-Ck59IXGG.js');
-var Text = require('./Text-CC0xnhmx.js');
+var Loader = require('./Loader-DRTOGvF1.js');
+var Text = require('./Text-1b-Bk7yG.js');
 
 var buttonConfig = {
     appearance: index.buttonAppearance,

package/dist/Divider-3upWnf8a.js

@@ -0,0 +1,71 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var index = require('./cjs/appearance/Divider.js');
+var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
+var useStyles = require('./cjs/hooks/useStyles.js');
+
+var dividerConfig = {
+    appearance: index.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-DE2Q5J36.js

@@ -0,0 +1,68 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { dividerAppearance } from './appearance/Divider.js';
+import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
+import { useStyles } from './hooks/useStyles.js';
+
+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-toApJyeB.js → DropdownItem-CT9Dmiub.js}

@@ -5,17 +5,18 @@ var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
 var useStyles = require('./cjs/hooks/useStyles.js');
-var Divider = require('./Divider-BjB5MD6u.js');
+var index = require('./cjs/appearance/DropdownItem.js');
+var Divider = require('./Divider-3upWnf8a.js');
 var Link = require('./Link-CqWzwh8V.js');
-var Text = require('./Text-CC0xnhmx.js');
+var Text = require('./Text-1b-Bk7yG.js');
 
 function Dropdown(props) {
-    var after = props.after, before = props.before, animationClose = props.animationClose, animationOpen = props.animationOpen, children = props.children, className = props.className, set = props.set, isOpen = props.isOpen, setIsOpen = props.setIsOpen;
+    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 = React.useRef(null);
     // const [isOpen, setIsOpen] = useState(false)
-    var _a = React.useState({
+    var _d = React.useState({
         className: '',
-    }), animationState = _a[0], setAnimationState = _a[1];
+    }), animationState = _d[0], setAnimationState = _d[1];
     var onAnimationEnd = React.useCallback(function () {
         // When component is change his visibility(display) in DOM,
         // animation of close can run unnecessary on showing element.
@@ -82,14 +83,15 @@ function Dropdown(props) {
                 // Add "onAnimationEnd" only for wrapper for ignore dropdown button
                 onAnimationEnd: onAnimationEnd, children: children })), after] }));
 }
-Dropdown.defaultProps = {
-    animationOpen: 'dropdown_animation_open',
-    animationClose: 'dropdown_animation_close',
-    set: 'normal',
-};
 
+var dropdownItemConfig = {
+    appearance: index.dropdownItemAppearance,
+    setAppearance: function (newComponent) {
+        dropdownItemConfig.appearance = newComponent;
+    },
+};
 function DropdownItem(props) {
-    var after = props.after, before = props.before, children = props.children, 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, isActive = props.isActive, isHover = props.isHover, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
+    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.useDeviceTargetClass(props, {
         prefix: 'align_',
         propsKey: 'alignDirection',
@@ -147,13 +149,35 @@ function DropdownItem(props) {
     });
     // @ts-expect-error
     var dropdownItem = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsxs("div", { className: clsx('dropdown__item', isActive && 'dropdown__item_state_active', isHover && 'dropdown__item_state_hover', directionClass, className, fillClass, fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, sizeClass, shapeClass, typeClass, widthClass, onClick && 'cursor_type_pointer', set && "dropdown__item_set_".concat(set), justifyContentClass), style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [jsxRuntime.jsx("div", { className: "dropdown__item-wrapper", children: jsxRuntime.jsx(Link.Link, { href: link || href, className: clsx('dropdown__item-link', alignDirectionClass, alignClass), underline: underline, fill: linkFill, target: target, rel: rel, children: jsxRuntime.jsxs(React.Fragment, { children: [before, children || (jsxRuntime.jsxs(React.Fragment, { children: [label && (jsxRuntime.jsx(Text.Text, { className: "dropdown__item-label", size: labelTextSize, textAlign: labelTextAlign, textColor: labelTextColor, textColorActive: isActive ? labelTextColorActive : undefined, textColorHover: labelTextColorHover, textColorGradient: labelTextGradient, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "dropdown__item-desc", size: descTextSize, textColor: descTextColor, textColorHover: descTextColorHover, textColorGradient: descTextGradient, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, children: desc }))] })), after] }) }) }), showDivider && (jsxRuntime.jsx(Divider.Divider, { direction: dividerDirection, fill: dividerFill || 'surfaceTertiary', size: dividerSize, width: "fill" }))] }));
+    var appearanceConfig = appearance && dropdownItemConfig.appearance && dropdownItemConfig.appearance[appearance];
+    return (jsxRuntime.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: [jsxRuntime.jsx("div", { className: "dropdown__item-wrapper", children: jsxRuntime.jsx(Link.Link, { className: clsx('dropdown__item-link', alignDirectionClass, alignClass), fill: linkFill, href: link || href, rel: rel, target: target, underline: underline, children: jsxRuntime.jsxs(React.Fragment, { children: [before, children || (jsxRuntime.jsxs(React.Fragment, { children: [label && (jsxRuntime.jsx(Text.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 && (jsxRuntime.jsx(Text.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 && (jsxRuntime.jsx(Divider.Divider, { width: "fill", fill: dividerFill || 'surfaceTertiary', direction: dividerDirection, size: dividerSize }))] }));
 }
 DropdownItem.defaultProps = {
-    size: 'l',
-    LinkComponent: 'a',
     width: 'fixed',
+    LinkComponent: 'a',
+    size: 'l',
 };
 
 exports.Dropdown = Dropdown;
 exports.DropdownItem = DropdownItem;
+exports.dropdownItemConfig = dropdownItemConfig;

package/dist/DropdownItem-DzDP45iO.js

@@ -0,0 +1,179 @@
+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 { dropdownItemAppearance } from './appearance/DropdownItem.js';
+import { D as Divider } from './Divider-DE2Q5J36.js';
+import { L as Link } from './Link-CeQuavin.js';
+import { T as Text } from './Text-DlSG_p4u.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 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 };

package/dist/{Icon-ClsRaxDk.js → Icon-B7BJo5kW.js}

@@ -1,3 +1,4 @@
+import { _ as __assign } from './tslib.es6-5FtW-kfi.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useMemo } from 'react';
 import clsx from 'clsx';
@@ -5,8 +6,8 @@ import SVG from 'react-inlinesvg';
 import { iconAppearance } from './appearance/Icon.js';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
-import { a as LinkWrapper } from './Link-CzC1kU5C.js';
-import { T as Tooltip } from './Tooltip-ccRCMYQM.js';
+import { a as LinkWrapper } from './Link-CeQuavin.js';
+import { T as Tooltip } from './Tooltip-f5EWhsGj.js';
 
 var iconConfig = {
     appearance: iconAppearance,
@@ -18,23 +19,16 @@ var Icon = React.forwardRef(function Icon(props, ref) {
     // TODO: Tooltip doesn't work that anymore
     // const [isTooltipVisible, setIsTooltipVisible] = useState(false)
     var id = props.id, width = props.width, height = props.height, after = props.after, Badge = props.Badge, before = props.before, className = props.className, dataTour = props.dataTour, href = props.href, imageSrc = props.imageSrc, link = props.link, linkRel = props.linkRel, linkTarget = props.linkTarget, showTooltip = props.showTooltip, SvgImage = props.SvgImage, tooltipAppearance = props.tooltipAppearance, tooltipText = props.tooltipText, tooltipTextSize = props.tooltipTextSize, tooltipTitle = props.tooltipTitle, tooltipTitleSize = props.tooltipTitleSize, onClick = props.onClick, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave;
-    // const svgSizes = useMemo(() => {
-    //   const sizes: {
-    //     width?: string
-    //     height?: string
-    //   } = {}
-    //   if (width) {
-    //     sizes.width = width
-    //   }
-    //   if (height) {
-    //     sizes.height = height
-    //   }
-    //   return sizes
-    // }, [height, width])
     var ImageComponent = useMemo(function () {
         if (SvgImage) {
-            // return <SvgImage {...svgSizes} />
-            return jsx(SvgImage, { width: width, height: height });
+            var sizes = {};
+            if (width) {
+                sizes.width = width;
+            }
+            if (height) {
+                sizes.height = height;
+            }
+            return jsx(SvgImage, __assign({}, sizes));
         }
         if (imageSrc) {
             if (imageSrc.endsWith('.svg')) {
@@ -44,7 +38,7 @@ var Icon = React.forwardRef(function Icon(props, ref) {
         }
         return null;
     }, [SvgImage, width, height, imageSrc]);
-    useDeviceTargetClass(props, {
+    var cursorClass = useDeviceTargetClass(props, {
         prefix: 'cursor_',
         propsKey: 'cursor',
     });
@@ -106,7 +100,8 @@ var Icon = React.forwardRef(function Icon(props, ref) {
     });
     // @ts-expect-error
     var iconStyles = useStyles(props).styles;
-    return (jsxs("div", { className: clsx(className, 'icon', fillClass, fillHoverClass, fillSizeClass, fillDisabledClass, iconFillClass, iconFillHoverClass, iconFillDisabledClass, shapeClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, Badge && 'icon_type_with-badge'), ref: ref, "data-tour": dataTour, id: id, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxs(LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass), DefaultComponent: "div", href: link || href, rel: linkRel, target: linkTarget, children: [ImageComponent, Badge, showTooltip && (jsx(Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass), appearance: tooltipAppearance, text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize }))] }), after] }));
+    console.log('>>>>' + iconSizeClass);
+    return (jsxs("div", { className: clsx(className, 'icon', fillClass, fillHoverClass, fillSizeClass, fillDisabledClass, iconFillClass, iconFillHoverClass, iconFillDisabledClass, shapeClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, Badge && 'icon_type_with-badge', onClick && cursorClass), ref: ref, "data-tour": dataTour, id: id, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, jsxs(LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass), DefaultComponent: "div", href: link || href, rel: linkRel, target: linkTarget, children: [ImageComponent, Badge, showTooltip && (jsx(Tooltip, { className: clsx(className, 'icon__tooltip', alignmentClass), appearance: tooltipAppearance, text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize }))] }), after] }));
 });
 var removeFillStroke = function (code) {
     return code.replace(/fill=".*?"/g, 'fill=""').replace(/stroke=".*?"/g, 'stroke=""');