@itcase/ui 1.4.13 → 1.5.0

package/dist/{Badge-DnWTbwXq.js → Badge-CURAYlMs.js}

@@ -5,8 +5,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-var Icon = require('./Icon-BcBOnVKH.js');
-var Text = require('./Text-C49zj3jO.js');
+var Icon = require('./Icon-Ch-L2dOj.js');
+var Text = require('./Text-CEcBg-F5.js');
 
 var defaultAppearance = {
     accent: {
@@ -44,9 +44,9 @@ var defaultAppearance = {
 var badgeAppearanceAccent = {
     accent: tslib_es6.__assign(tslib_es6.__assign({}, defaultAppearance.accent), { dotFill: 'accentItemPrimary', iconFill: 'accentItemPrimary' }),
     accentPrimary: tslib_es6.__assign(tslib_es6.__assign({}, defaultAppearance.accentPrimary), { dotFill: 'accentItemPrimary' }),
+    accentQuaternary: tslib_es6.__assign(tslib_es6.__assign({}, defaultAppearance.accentQuaternary), { dotFill: 'accentItemPrimary' }),
     accentSecondary: tslib_es6.__assign(tslib_es6.__assign({}, defaultAppearance.accentSecondary), { dotFill: 'accentItemPrimary' }),
     accentTertiary: tslib_es6.__assign(tslib_es6.__assign({}, defaultAppearance.accentTertiary), { dotFill: 'accentItemPrimary' }),
-    accentQuaternary: tslib_es6.__assign(tslib_es6.__assign({}, defaultAppearance.accentQuaternary), { dotFill: 'accentItemPrimary' }),
 };
 
 var badgeAppearanceDanger = {
@@ -66,9 +66,9 @@ var badgeAppearanceError = {
         fillHover: 'errorPrimaryHover',
         labelTextColor: 'errorTextPrimary',
         labelTextColorHover: 'errorTextPrimary',
+        iconFill: 'errorItemPrimary',
         loaderFill: 'errorPrimary',
         loaderItemFill: 'errorItemPrimary',
-        iconFill: 'errorItemPrimary',
     },
 };
 
@@ -76,16 +76,16 @@ var badgeAppearanceInfo = {
     info: {
         fill: 'infoPrimary',
         fillHover: 'infoPrimaryHover',
-        textColor: 'infoTextPrimary',
         borderColor: 'infoBorderSecondary',
+        textColor: 'infoTextPrimary',
         dotFill: 'infoItemPrimary',
         iconFill: 'infoItemPrimary',
     },
     infoSecondary: {
         fill: 'infoSecondary',
         fillHover: 'infoSecondaryHover',
-        textColor: 'infoTextSecondary',
         borderColor: 'infoBorderSecondary',
+        textColor: 'infoTextSecondary',
         dotFill: 'infoItemSecondary',
     },
 };
@@ -94,8 +94,8 @@ var badgeAppearancePrimary = {
     primary: {
         fill: 'primaryPrimary',
         fillHover: 'primaryPrimaryHover',
-        textColor: 'primaryTextPrimary',
         borderColor: 'primaryBorderSecondary',
+        textColor: 'primaryTextPrimary',
         dotFill: 'primaryItemPrimary',
         iconFill: 'primaryItemPrimary',
     },
@@ -105,8 +105,8 @@ var badgeAppearanceSecondary = {
     secondary: {
         fill: 'secondaryPrimary',
         fillHover: 'secondaryPrimaryHover',
-        textColor: 'secondaryTextPrimary',
         borderColor: 'secondaryBorderSecondary',
+        textColor: 'secondaryTextPrimary',
         dotFill: 'secondaryItemPrimary',
         iconFill: 'secondaryItemPrimary',
     },
@@ -114,33 +114,33 @@ var badgeAppearanceSecondary = {
 
 var badgeAppearanceSize = {
     sizeXXL: {
-        textSize: 'xl',
         size: 'xxl',
-        iconSize: 24
+        textSize: 'xl',
+        iconSize: 24,
     },
     sizeXL: {
-        textSize: 'l',
         size: 'xl',
+        textSize: 'l',
     },
     sizeL: {
-        textSize: 'l',
         size: 'l',
+        textSize: 'l',
     },
     sizeM: {
-        textSize: 'm',
         size: 'm',
+        textSize: 'm',
     },
     sizeS: {
-        textSize: 's',
         size: 's',
+        textSize: 's',
     },
     sizeXS: {
-        textSize: 'xs',
         size: 'xs',
+        textSize: 'xs',
     },
     sizeXXS: {
-        textSize: 'xs',
         size: 'xxs',
+        textSize: 'xs',
     },
 };
 
@@ -164,8 +164,8 @@ var badgeAppearanceSuccess = {
     success: {
         fill: 'successPrimary',
         fillHover: 'successPrimaryHover',
-        textColor: 'successTextPrimary',
         borderColor: 'successBorderPrimary',
+        textColor: 'successTextPrimary',
         dotFill: 'successItemPrimary',
         iconFill: 'successItemPrimary',
     },
@@ -175,28 +175,28 @@ var badgeAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
         fillHover: 'surfacePrimaryHover',
-        textColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderTertiary',
+        textColor: 'surfaceTextPrimary',
         dotFill: 'surfaceItemPrimary',
         iconFill: 'surfaceItemPrimary',
     },
+    surfaceQuaternary: {
+        fill: 'accentPrimary',
+        fillHover: 'surfaceTertiaryHover',
+        borderColor: 'surfaceBorderPrimary',
+        textColor: 'surfaceTextInverse',
+    },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
         fillHover: 'surfaceSecondaryHover',
-        textColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderSecondary',
+        textColor: 'surfaceTextPrimary',
     },
     surfaceTertiary: {
         fill: 'surfaceTertiary',
         fillHover: 'surfaceTertiaryHover',
-        textColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderTertiary',
-    },
-    surfaceQuaternary: {
-        fill: 'accentPrimary',
-        fillHover: 'surfaceTertiaryHover',
-        textColor: 'surfaceTextInverse',
-        borderColor: 'surfaceBorderPrimary',
+        textColor: 'surfaceTextPrimary',
     },
 };
 
@@ -204,8 +204,8 @@ var badgeAppearanceWarning = {
     warning: {
         fill: 'warningPrimary',
         fillHover: 'warningPrimary',
-        textColor: 'warningTextSecondary',
         borderColor: 'warningBorderPrimary',
+        textColor: 'warningTextSecondary',
         dotFill: 'warningItemPrimary',
         iconFill: 'warningItemPrimary',
     },
@@ -240,7 +240,7 @@ function Badge(props) {
             : dot
                 ? 'badge_type_dot'
                 : 'badge_type_fill';
-    return (jsxRuntime.jsxs("div", { className: clsx(className, 'badge', borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), positionClass && "position_".concat(positionClass), sizeClass && "badge_size_".concat(sizeClass), shapeClass && "badge_shape_".concat(shapeClass), badgeTypeClass, isSkeleton && "badge_skeleton"), style: badgeStyles, children: [dot && (jsxRuntime.jsx("div", { className: clsx('badge__dot', dotFillClass && "svg_fill_".concat(dotFillClass)), children: jsxRuntime.jsx("svg", { width: "6", height: "6", viewBox: "0 0 6 6", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("rect", { width: "6", height: "6", rx: "50" }) }) })), icon && (jsxRuntime.jsx(Icon.Icon, { className: "badge__icon", size: iconSize, iconFill: iconFill, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), children ||
+    return (jsxRuntime.jsxs("div", { className: clsx(className, 'badge', borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), positionClass && "position_".concat(positionClass), sizeClass && "badge_size_".concat(sizeClass), shapeClass && "badge_shape_".concat(shapeClass), badgeTypeClass, isSkeleton && 'badge_skeleton'), style: badgeStyles, children: [dot && (jsxRuntime.jsx("div", { className: clsx('badge__dot', dotFillClass && "svg_fill_".concat(dotFillClass)), children: jsxRuntime.jsx("svg", { width: "6", height: "6", viewBox: "0 0 6 6", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("rect", { width: "6", height: "6", rx: "50" }) }) })), icon && (jsxRuntime.jsx(Icon.Icon, { className: "badge__icon", size: iconSize, iconFill: iconFill, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), children ||
                 (value && (jsxRuntime.jsx(Text.Text, { className: "badge__value", size: textSize, textColor: textColor, children: value })))] }));
 }
 

package/dist/{Badge-BxT2_kz_.js → Badge-LjfcZycz.js}

@@ -1,10 +1,10 @@
-import { _ as __assign } from './tslib.es6-5FtW-kfi.js';
+import { _ as __assign } from './tslib.es6-Bwu1Cn-t.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
-import { I as Icon } from './Icon-OJ_3E3eM.js';
-import { T as Text } from './Text-C6NSmetx.js';
+import { I as Icon } from './Icon-CoBJRPlP.js';
+import { T as Text } from './Text-CI2prtf6.js';
 
 var defaultAppearance = {
     accent: {
@@ -42,9 +42,9 @@ var defaultAppearance = {
 var badgeAppearanceAccent = {
     accent: __assign(__assign({}, defaultAppearance.accent), { dotFill: 'accentItemPrimary', iconFill: 'accentItemPrimary' }),
     accentPrimary: __assign(__assign({}, defaultAppearance.accentPrimary), { dotFill: 'accentItemPrimary' }),
+    accentQuaternary: __assign(__assign({}, defaultAppearance.accentQuaternary), { dotFill: 'accentItemPrimary' }),
     accentSecondary: __assign(__assign({}, defaultAppearance.accentSecondary), { dotFill: 'accentItemPrimary' }),
     accentTertiary: __assign(__assign({}, defaultAppearance.accentTertiary), { dotFill: 'accentItemPrimary' }),
-    accentQuaternary: __assign(__assign({}, defaultAppearance.accentQuaternary), { dotFill: 'accentItemPrimary' }),
 };
 
 var badgeAppearanceDanger = {
@@ -64,9 +64,9 @@ var badgeAppearanceError = {
         fillHover: 'errorPrimaryHover',
         labelTextColor: 'errorTextPrimary',
         labelTextColorHover: 'errorTextPrimary',
+        iconFill: 'errorItemPrimary',
         loaderFill: 'errorPrimary',
         loaderItemFill: 'errorItemPrimary',
-        iconFill: 'errorItemPrimary',
     },
 };
 
@@ -74,16 +74,16 @@ var badgeAppearanceInfo = {
     info: {
         fill: 'infoPrimary',
         fillHover: 'infoPrimaryHover',
-        textColor: 'infoTextPrimary',
         borderColor: 'infoBorderSecondary',
+        textColor: 'infoTextPrimary',
         dotFill: 'infoItemPrimary',
         iconFill: 'infoItemPrimary',
     },
     infoSecondary: {
         fill: 'infoSecondary',
         fillHover: 'infoSecondaryHover',
-        textColor: 'infoTextSecondary',
         borderColor: 'infoBorderSecondary',
+        textColor: 'infoTextSecondary',
         dotFill: 'infoItemSecondary',
     },
 };
@@ -92,8 +92,8 @@ var badgeAppearancePrimary = {
     primary: {
         fill: 'primaryPrimary',
         fillHover: 'primaryPrimaryHover',
-        textColor: 'primaryTextPrimary',
         borderColor: 'primaryBorderSecondary',
+        textColor: 'primaryTextPrimary',
         dotFill: 'primaryItemPrimary',
         iconFill: 'primaryItemPrimary',
     },
@@ -103,8 +103,8 @@ var badgeAppearanceSecondary = {
     secondary: {
         fill: 'secondaryPrimary',
         fillHover: 'secondaryPrimaryHover',
-        textColor: 'secondaryTextPrimary',
         borderColor: 'secondaryBorderSecondary',
+        textColor: 'secondaryTextPrimary',
         dotFill: 'secondaryItemPrimary',
         iconFill: 'secondaryItemPrimary',
     },
@@ -112,33 +112,33 @@ var badgeAppearanceSecondary = {
 
 var badgeAppearanceSize = {
     sizeXXL: {
-        textSize: 'xl',
         size: 'xxl',
-        iconSize: 24
+        textSize: 'xl',
+        iconSize: 24,
     },
     sizeXL: {
-        textSize: 'l',
         size: 'xl',
+        textSize: 'l',
     },
     sizeL: {
-        textSize: 'l',
         size: 'l',
+        textSize: 'l',
     },
     sizeM: {
-        textSize: 'm',
         size: 'm',
+        textSize: 'm',
     },
     sizeS: {
-        textSize: 's',
         size: 's',
+        textSize: 's',
     },
     sizeXS: {
-        textSize: 'xs',
         size: 'xs',
+        textSize: 'xs',
     },
     sizeXXS: {
-        textSize: 'xs',
         size: 'xxs',
+        textSize: 'xs',
     },
 };
 
@@ -162,8 +162,8 @@ var badgeAppearanceSuccess = {
     success: {
         fill: 'successPrimary',
         fillHover: 'successPrimaryHover',
-        textColor: 'successTextPrimary',
         borderColor: 'successBorderPrimary',
+        textColor: 'successTextPrimary',
         dotFill: 'successItemPrimary',
         iconFill: 'successItemPrimary',
     },
@@ -173,28 +173,28 @@ var badgeAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
         fillHover: 'surfacePrimaryHover',
-        textColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderTertiary',
+        textColor: 'surfaceTextPrimary',
         dotFill: 'surfaceItemPrimary',
         iconFill: 'surfaceItemPrimary',
     },
+    surfaceQuaternary: {
+        fill: 'accentPrimary',
+        fillHover: 'surfaceTertiaryHover',
+        borderColor: 'surfaceBorderPrimary',
+        textColor: 'surfaceTextInverse',
+    },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
         fillHover: 'surfaceSecondaryHover',
-        textColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderSecondary',
+        textColor: 'surfaceTextPrimary',
     },
     surfaceTertiary: {
         fill: 'surfaceTertiary',
         fillHover: 'surfaceTertiaryHover',
-        textColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderTertiary',
-    },
-    surfaceQuaternary: {
-        fill: 'accentPrimary',
-        fillHover: 'surfaceTertiaryHover',
-        textColor: 'surfaceTextInverse',
-        borderColor: 'surfaceBorderPrimary',
+        textColor: 'surfaceTextPrimary',
     },
 };
 
@@ -202,8 +202,8 @@ var badgeAppearanceWarning = {
     warning: {
         fill: 'warningPrimary',
         fillHover: 'warningPrimary',
-        textColor: 'warningTextSecondary',
         borderColor: 'warningBorderPrimary',
+        textColor: 'warningTextSecondary',
         dotFill: 'warningItemPrimary',
         iconFill: 'warningItemPrimary',
     },
@@ -238,7 +238,7 @@ function Badge(props) {
             : dot
                 ? 'badge_type_dot'
                 : 'badge_type_fill';
-    return (jsxs("div", { className: clsx(className, 'badge', borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), positionClass && "position_".concat(positionClass), sizeClass && "badge_size_".concat(sizeClass), shapeClass && "badge_shape_".concat(shapeClass), badgeTypeClass, isSkeleton && "badge_skeleton"), style: badgeStyles, children: [dot && (jsx("div", { className: clsx('badge__dot', dotFillClass && "svg_fill_".concat(dotFillClass)), children: jsx("svg", { width: "6", height: "6", viewBox: "0 0 6 6", xmlns: "http://www.w3.org/2000/svg", children: jsx("rect", { width: "6", height: "6", rx: "50" }) }) })), icon && (jsx(Icon, { className: "badge__icon", size: iconSize, iconFill: iconFill, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), children ||
+    return (jsxs("div", { className: clsx(className, 'badge', borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), positionClass && "position_".concat(positionClass), sizeClass && "badge_size_".concat(sizeClass), shapeClass && "badge_shape_".concat(shapeClass), badgeTypeClass, isSkeleton && 'badge_skeleton'), style: badgeStyles, children: [dot && (jsx("div", { className: clsx('badge__dot', dotFillClass && "svg_fill_".concat(dotFillClass)), children: jsx("svg", { width: "6", height: "6", viewBox: "0 0 6 6", xmlns: "http://www.w3.org/2000/svg", children: jsx("rect", { width: "6", height: "6", rx: "50" }) }) })), icon && (jsx(Icon, { className: "badge__icon", size: iconSize, iconFill: iconFill, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), children ||
                 (value && (jsx(Text, { className: "badge__value", size: textSize, textColor: textColor, children: value })))] }));
 }
 

package/dist/{Button-xYLCmT3D.js → Button-CMB-ELfe.js}

@@ -1,11 +1,11 @@
-import { _ as __assign } from './tslib.es6-5FtW-kfi.js';
+import { _ as __assign } from './tslib.es6-Bwu1Cn-t.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';
-import { I as Icon } from './Icon-OJ_3E3eM.js';
-import { L as LinkWrapper } from './Link-DaKqf1pb.js';
-import { L as Loader } from './Loader-VK3q7PBN.js';
-import { T as Text } from './Text-C6NSmetx.js';
+import { I as Icon } from './Icon-CoBJRPlP.js';
+import { a as LinkWrapper } from './Link-Sr03Kia9.js';
+import { L as Loader } from './Loader-CRN4MAbm.js';
+import { T as Text } from './Text-CI2prtf6.js';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
 
@@ -13,9 +13,9 @@ var buttonAppearanceAccent = {
     accent: {
         fill: 'accentPrimary',
         fillHover: 'accentPrimaryHover',
-        borderColor: 'accentBorderPrimary',
         labelTextColor: 'accentTextPrimary',
         labelTextColorHover: 'accentTextPrimary',
+        borderColor: 'accentBorderPrimary',
         iconAfterFillIcon: 'accentItemPrimary',
         iconBeforeFillIcon: 'accentItemPrimary',
         loaderFill: 'accentPrimary',
@@ -24,9 +24,9 @@ var buttonAppearanceAccent = {
     accentPrimary: {
         fill: 'accentPrimary',
         fillHover: 'accentPrimaryHover',
-        borderColor: 'accentBorderPrimary',
         labelTextColor: 'accentTextPrimary',
         labelTextColorHover: 'accentTextPrimary',
+        borderColor: 'accentBorderPrimary',
         iconAfterFillIcon: 'accentItemPrimary',
         iconBeforeFillIcon: 'accentItemPrimary',
         loaderFill: 'accentPrimary',
@@ -35,27 +35,27 @@ var buttonAppearanceAccent = {
     accentSecondary: {
         fill: 'accentPrimary',
         fillHover: 'accentPrimaryHover',
-        borderColor: 'accentBorderPrimary',
         labelTextColor: 'accentTextSecondary',
         labelTextColorHover: 'accentTextSecondary',
+        borderColor: 'accentBorderPrimary',
         loaderFill: 'accentPrimary',
         loaderItemFill: 'accentItemPrimary',
     },
     full: {},
-    solid: {
-        fill: 'accentPrimary',
+    ghost: {
+        fill: null,
+        labelTextColor: 'accentTextSecondary',
         borderColor: null,
-        labelTextColor: 'accentTextPrimary',
     },
     outlined: {
         fill: null,
-        borderColor: 'accentBorderPrimary',
         labelTextColor: 'accentTextSecondary',
+        borderColor: 'accentBorderPrimary',
     },
-    ghost: {
-        fill: null,
+    solid: {
+        fill: 'accentPrimary',
+        labelTextColor: 'accentTextPrimary',
         borderColor: null,
-        labelTextColor: 'accentTextSecondary',
     },
 };
 

package/dist/{Button-BiJZz4Bx.js → Button-iPtstCWk.js}

@@ -4,10 +4,10 @@ var tslib_es6 = require('./tslib.es6-CCZ3TN_7.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var Icon = require('./Icon-BcBOnVKH.js');
-var Link = require('./Link-BnqN6ysn.js');
-var Loader = require('./Loader-DdKHrLnw.js');
-var Text = require('./Text-C49zj3jO.js');
+var Icon = require('./Icon-Ch-L2dOj.js');
+var Link = require('./Link-C04g00r2.js');
+var Loader = require('./Loader-rzo8nnRI.js');
+var Text = require('./Text-CEcBg-F5.js');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
 
@@ -15,9 +15,9 @@ var buttonAppearanceAccent = {
     accent: {
         fill: 'accentPrimary',
         fillHover: 'accentPrimaryHover',
-        borderColor: 'accentBorderPrimary',
         labelTextColor: 'accentTextPrimary',
         labelTextColorHover: 'accentTextPrimary',
+        borderColor: 'accentBorderPrimary',
         iconAfterFillIcon: 'accentItemPrimary',
         iconBeforeFillIcon: 'accentItemPrimary',
         loaderFill: 'accentPrimary',
@@ -26,9 +26,9 @@ var buttonAppearanceAccent = {
     accentPrimary: {
         fill: 'accentPrimary',
         fillHover: 'accentPrimaryHover',
-        borderColor: 'accentBorderPrimary',
         labelTextColor: 'accentTextPrimary',
         labelTextColorHover: 'accentTextPrimary',
+        borderColor: 'accentBorderPrimary',
         iconAfterFillIcon: 'accentItemPrimary',
         iconBeforeFillIcon: 'accentItemPrimary',
         loaderFill: 'accentPrimary',
@@ -37,27 +37,27 @@ var buttonAppearanceAccent = {
     accentSecondary: {
         fill: 'accentPrimary',
         fillHover: 'accentPrimaryHover',
-        borderColor: 'accentBorderPrimary',
         labelTextColor: 'accentTextSecondary',
         labelTextColorHover: 'accentTextSecondary',
+        borderColor: 'accentBorderPrimary',
         loaderFill: 'accentPrimary',
         loaderItemFill: 'accentItemPrimary',
     },
     full: {},
-    solid: {
-        fill: 'accentPrimary',
+    ghost: {
+        fill: null,
+        labelTextColor: 'accentTextSecondary',
         borderColor: null,
-        labelTextColor: 'accentTextPrimary',
     },
     outlined: {
         fill: null,
-        borderColor: 'accentBorderPrimary',
         labelTextColor: 'accentTextSecondary',
+        borderColor: 'accentBorderPrimary',
     },
-    ghost: {
-        fill: null,
+    solid: {
+        fill: 'accentPrimary',
+        labelTextColor: 'accentTextPrimary',
         borderColor: null,
-        labelTextColor: 'accentTextSecondary',
     },
 };
 

package/dist/{Divider-ImOOytuN.js → Divider-D8hUUrwe.js}

@@ -23,7 +23,7 @@ function Divider(props) {
         return (tslib_es6.__assign(tslib_es6.__assign({}, resultApperance), (_a = dividerConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
     }, {});
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var directionClass = propsGenerator.directionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, fillDisabledClass = propsGenerator.fillDisabledClass, _a = propsGenerator.sizeClass, sizeClass = _a === void 0 ? 'xs' : _a, widthClass = propsGenerator.widthClass;
+    var directionClass = propsGenerator.directionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, _a = propsGenerator.sizeClass, sizeClass = _a === void 0 ? 'xs' : _a, widthClass = propsGenerator.widthClass;
     // @ts-expect-error
     var hrStyles = useStyles.useStyles(props).styles;
     return (jsxRuntime.jsx("hr", { className: clsx(className, 'divider', widthClass && "width_".concat(widthClass), directionClass && "divider_direction_".concat(directionClass), sizeClass && "divider_size_".concat(sizeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), fillActiveClass && "fill_active_".concat(fillActiveClass), fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass)), style: hrStyles }));

package/dist/{Divider-BQcBkzt1.js → Divider-DhXzYcNF.js}

@@ -1,4 +1,4 @@
-import { _ as __assign } from './tslib.es6-5FtW-kfi.js';
+import { _ as __assign } from './tslib.es6-Bwu1Cn-t.js';
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
@@ -21,7 +21,7 @@ function Divider(props) {
         return (__assign(__assign({}, resultApperance), (_a = dividerConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
     }, {});
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var directionClass = propsGenerator.directionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, fillDisabledClass = propsGenerator.fillDisabledClass, _a = propsGenerator.sizeClass, sizeClass = _a === void 0 ? 'xs' : _a, widthClass = propsGenerator.widthClass;
+    var directionClass = propsGenerator.directionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, _a = propsGenerator.sizeClass, sizeClass = _a === void 0 ? 'xs' : _a, widthClass = propsGenerator.widthClass;
     // @ts-expect-error
     var hrStyles = useStyles(props).styles;
     return (jsx("hr", { className: clsx(className, 'divider', widthClass && "width_".concat(widthClass), directionClass && "divider_direction_".concat(directionClass), sizeClass && "divider_size_".concat(sizeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), fillActiveClass && "fill_active_".concat(fillActiveClass), fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass)), style: hrStyles }));

package/dist/DropdownItem-C8CumsgX.js

@@ -0,0 +1,117 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useRef, useState, useCallback, useEffect } from 'react';
+import clsx from 'clsx';
+import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { useStyles } from './hooks/useStyles/useStyles.js';
+import { _ as __assign } from './tslib.es6-Bwu1Cn-t.js';
+import { D as Divider } from './Divider-DhXzYcNF.js';
+import { T as Text } from './Text-CI2prtf6.js';
+
+function Dropdown(props) {
+    var className = props.className, _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, after = props.after, isOpen = props.isOpen, _c = props.set, set = _c === void 0 ? 'normal' : _c, setIsOpen = props.setIsOpen, children = props.children;
+    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, animationOpen, animationClose]);
+    // 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 propsGenerator = useDevicePropsGenerator(props);
+    var alignmentClass = propsGenerator.alignmentClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, elevationClass = propsGenerator.elevationClass, shapeClass = propsGenerator.shapeClass;
+    // @ts-expect-error
+    var styles = useStyles(props).styles;
+    return (jsxs("div", { className: clsx(className, 'dropdown', alignmentClass && "alignment_".concat(alignmentClass), set && "dropdown_set_".concat(set), shapeClass && "dropdown_shape_".concat(shapeClass), elevationClass && "elevation_".concat(elevationClass), isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className), ref: dropdownRef, style: styles, children: [before, children && (jsx("div", { className: clsx('dropdown__wrapper', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), 
+                // Add "onAnimationEnd" only for wrapper for ignore dropdown button
+                onAnimationEnd: onAnimationEnd, children: children })), after] }));
+}
+
+var dropdownAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfacePrimaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillHover: 'surfaceQuaternaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceSecondaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+        loaderFill: 'surfaceSecondary',
+        loaderItemFill: 'surfaceItemPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceTertiaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+};
+
+var dropdownItemAppearance = __assign({}, dropdownAppearanceSurface);
+
+var dropdownItemConfig = {
+    appearance: dropdownItemAppearance,
+    setAppearance: function (appearanceConfig) {
+        dropdownItemConfig.appearance = appearanceConfig;
+    },
+};
+function DropdownItem(props) {
+    var className = props.className, appearance = props.appearance, label = props.label, desc = props.desc, isDisabled = props.isDisabled, showDivider = props.showDivider, before = props.before, after = props.after, isActive = props.isActive, isHover = props.isHover, set = props.set, onClick = props.onClick, onMouseEnter = props.onMouseEnter, children = props.children;
+    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultAppearance, appearance) {
+        var _a;
+        return (__assign(__assign({}, resultAppearance), (_a = dropdownItemConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
+    }, {});
+    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    var directionClass = propsGenerator.directionClass, justifyContentClass = propsGenerator.justifyContentClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextAlign = propsGenerator.labelTextAlign, labelTextColor = propsGenerator.labelTextColor, labelTextColorActive = propsGenerator.labelTextColorActive, labelTextColorHover = propsGenerator.labelTextColorHover, labelTextGradient = propsGenerator.labelTextGradient, labelTextSize = propsGenerator.labelTextSize, labelTextStyle = propsGenerator.labelTextStyle, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, descTextColor = propsGenerator.descTextColor, descTextColorHover = propsGenerator.descTextColorHover, descTextGradient = propsGenerator.descTextGradient, descTextSize = propsGenerator.descTextSize, descTextStyle = propsGenerator.descTextStyle, descTextWeight = propsGenerator.descTextWeight, descTextWrap = propsGenerator.descTextWrap, dividerDirection = propsGenerator.dividerDirection, dividerFill = propsGenerator.dividerFill, dividerSize = propsGenerator.dividerSize, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass;
+    // @ts-expect-error
+    var dropdownItem = useStyles(props).styles;
+    return (jsxs("div", { className: clsx('dropdown__item', isActive && 'dropdown__item_state_active', isHover && 'dropdown__item_state_hover', fillClass && !isActive
+            ? "fill_".concat(fillClass)
+            : "fill_active_".concat(fillActiveClass), fillHoverClass && !isDisabled && !isActive
+            ? "fill_hover_".concat(fillHoverClass)
+            : "fill_active_hover_".concat(fillActiveHoverClass), directionClass && "dropdown__item_direction_".concat(directionClass), className, fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), fillActiveClass && "fill_active_".concat(fillActiveClass), fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), sizeClass && "dropdown__item_size_".concat(sizeClass), shapeClass && "dropdown__item_shape_".concat(shapeClass), typeClass && "dropdown__item_type_".concat(typeClass), widthClass && "dropdown__item_width_".concat(widthClass), isDisabled && "dropdown__item_state_disabled", onClick && 'cursor_type_pointer', set && "dropdown__item_set_".concat(set), justifyContentClass &&
+            "dropdown__item_justify-content_".concat(justifyContentClass)), style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [jsx("div", { className: "dropdown__item-wrapper", children: jsxs(React.Fragment, { children: [before, children || (jsxs(React.Fragment, { children: [label && (jsx(Text, { className: "dropdown__item-label", size: labelTextSize, textAlign: labelTextAlign, textColor: 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, textColor: descTextColor, textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, children: desc }))] })), after] }) }), showDivider && (jsx(Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill }))] }));
+}
+
+export { Dropdown as D, DropdownItem as a, dropdownItemConfig as b, dropdownItemAppearance as d };