@itcase/ui 1.8.27 → 1.8.30

package/dist/components/CookiesWarning.js

@@ -1,12 +1,11 @@
+import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRef, useMemo, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
 import Cookies from 'js-cookie';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { B as Button } from '../Button_es_Dp6yFZgn.js';
-import { G as Group } from '../Group_es_CYW2Hquh.js';
-import { T as Text } from '../Text_es_BRb3qqKM.js';
-import '../tslib.es6_es_Bwu1Cn-t.js';
+import { B as Button } from '../Button_es_CO_dwo-N.js';
+import { T as Text } from '../Text_es_BfLRfj-5.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
@@ -17,16 +16,36 @@ import '../context/UIContext.js';
 import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
-import '../Tooltip_es_D1w1s33u.js';
+import '../Tooltip_es_frBCZDrO.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
 import 'react-inlinesvg';
 import '../Link_es_DxtZLeKY.js';
-import '../Loader_es_DHKB6tTw.js';
+import '../Loader_es_B2auu_rc.js';
 
+var cookiesWarningAppearanceDefault = {
+    defaultPrimary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentHover',
+        messageTextSize: 's',
+        messageTextColor: 'surfaceTextPrimary',
+        buttonAppearance: 'accentPrimary sizeXL',
+        buttonWidth: 'fill',
+        elevation: 8,
+    },
+};
+
+var cookiesWarningAppearance = __assign({}, cookiesWarningAppearanceDefault);
+
+var cookiesWarningConfig = {
+    appearance: cookiesWarningAppearance,
+    setAppearance: function (appearanceConfig) {
+        cookiesWarningConfig.appearance = appearanceConfig;
+    },
+};
 function CookiesWarning(props) {
-    var className = props.className, message = props.message, _a = props.isHideOnScroll, isHideOnScroll = _a === void 0 ? false : _a;
+    var className = props.className, appearance = props.appearance, message = props.message, _a = props.isHideOnScroll, isHideOnScroll = _a === void 0 ? false : _a;
     var cookiesWarningRef = useRef(null);
     var isOpen = useMemo(function () { return Cookies.get('cookies-warning') !== 'close'; }, []);
     var closeCookiesWarning = useCallback(function () {
@@ -48,15 +67,13 @@ function CookiesWarning(props) {
             window.removeEventListener('scroll', closeCookiesWarning, true);
         }
     }, [isOpen]);
-    var propsGenerator = useDevicePropsGenerator(props);
-    var fillClass = propsGenerator.fillClass, fillGradientClass = propsGenerator.fillGradientClass, textColor = propsGenerator.textColor, textSize = propsGenerator.textSize, buttonFill = propsGenerator.buttonFill, buttonFillHover = propsGenerator.buttonFillHover, buttonLabel = propsGenerator.buttonLabel, buttonLabelSize = propsGenerator.buttonLabelSize, buttonLabelTextColor = propsGenerator.buttonLabelTextColor, buttonShape = propsGenerator.buttonShape, buttonSize = propsGenerator.buttonSize, buttonWidth = propsGenerator.buttonWidth;
-    return (isOpen && (jsx("div", { className: clsx('cookies-warning', className, fillClass && "fill_".concat(fillClass), fillGradientClass && "fill-gradient_".concat(fillGradientClass)), ref: cookiesWarningRef, children: jsxs(Group, { className: "cookies-warning__inner", direction: "vertical", children: [jsx(Text, { size: textSize, textColor: textColor, children: message }), jsx(Button, { width: buttonWidth, size: buttonSize, fill: buttonFill, fillHover: buttonFillHover, labelTextColor: buttonLabelTextColor, labelTextSize: buttonLabelSize, shape: buttonShape, onClick: closeCookiesWarning, children: buttonLabel })] }) })));
+    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
+        var _a;
+        return (__assign(__assign({}, resultConfig), (_a = cookiesWarningConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
+    }, {});
+    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    var fillClass = propsGenerator.fillClass, messageTextSize = propsGenerator.messageTextSize, messageTextColor = propsGenerator.messageTextColor, buttonAppearance = propsGenerator.buttonAppearance, buttonFill = propsGenerator.buttonFill, buttonFillHover = propsGenerator.buttonFillHover, buttonLabel = propsGenerator.buttonLabel, buttonLabelSize = propsGenerator.buttonLabelSize, buttonLabelTextColor = propsGenerator.buttonLabelTextColor, buttonShape = propsGenerator.buttonShape, buttonSize = propsGenerator.buttonSize, elevationClass = propsGenerator.elevationClass, buttonWidth = propsGenerator.buttonWidth;
+    return (isOpen && (jsx("div", { className: clsx('cookies-warning', className, fillClass && "fill_".concat(fillClass), elevationClass && "elevation_".concat(elevationClass)), ref: cookiesWarningRef, children: jsxs("div", { className: "cookies-warning__inner", children: [jsx(Text, { size: messageTextSize, textColor: messageTextColor, children: message }), jsx(Button, { appearance: buttonAppearance, width: buttonWidth, size: buttonSize, fill: buttonFill, fillHover: buttonFillHover, labelTextColor: buttonLabelTextColor, labelTextSize: buttonLabelSize, shape: buttonShape, onClick: closeCookiesWarning, children: buttonLabel })] }) })));
 }
 
-var cookiesWarningAppearance = {
-    dev: {
-        fill: 'accentPrimary',
-    },
-};
-
-export { CookiesWarning, cookiesWarningAppearance };
+export { CookiesWarning, cookiesWarningAppearance, cookiesWarningConfig };

package/dist/components/DatePeriod.js

@@ -4,9 +4,9 @@ import { useCallback } from 'react';
 import clsx from 'clsx';
 import { DateTime } from 'luxon';
 import { DATE_PERIOD_INTERVALS } from '@itcase/common';
-import { D as DatePickerInput } from '../DatePicker_es_Bm_onmmb.js';
+import { D as DatePickerInput } from '../DatePicker_es_BCbmUdl0.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_BNuhlSG6.js';
+import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_D9aK8Roh.js';
 import 'date-fns/locale';
 import 'react-datepicker';
 import '../hooks/useStyles/useStyles.js';
@@ -20,18 +20,54 @@ import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Button_es_Dp6yFZgn.js';
-import '../Tooltip_es_D1w1s33u.js';
-import '../Text_es_BRb3qqKM.js';
+import '../Button_es_CO_dwo-N.js';
+import '../Tooltip_es_frBCZDrO.js';
+import '../Text_es_BfLRfj-5.js';
 import 'react-inlinesvg';
 import '../Link_es_DxtZLeKY.js';
-import '../Loader_es_DHKB6tTw.js';
+import '../Loader_es_B2auu_rc.js';
 import '../Input_es_CNduH28G.js';
-import '../Label_es_BtwZ3a2V.js';
+import '../Label_es_Dl_DrMOh.js';
 import '@itcase/icons/default';
 import 'lodash/castArray';
 
-var datePeriodAppearance = {};
+var datePeriodAppearanceSize = {
+    sizeL: {
+        size: 'm',
+        chipsAppearanceSize: 'sizeL',
+        datePickerAppearanceSize: 'sizeM',
+        datePickerInputSize: 'l',
+        datePickerInputTextSize: 'm',
+    },
+    sizeM: {
+        size: 'm',
+        chipsAppearanceSize: 'sizeL',
+        datePickerAppearanceSize: 'sizeM',
+        datePickerInputSize: 'm',
+        datePickerInputTextSize: 'm',
+    },
+};
+
+var datePeriodAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        chipsAppearance: 'surfacePrimary ghost',
+        chipsShape: 'rounded',
+        datePickerAppearance: 'surfacePrimary',
+        datePickerInputAppearance: 'defaultPrimary',
+        shape: 'rounded',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        chipsAppearance: 'surfacePrimary ghost',
+        chipsShape: 'rounded',
+        datePickerAppearance: 'surfacePrimary',
+        datePickerInputAppearance: 'defaultPrimary',
+        shape: 'rounded',
+    },
+};
+
+var datePeriodAppearance = __assign(__assign({}, datePeriodAppearanceSurface), datePeriodAppearanceSize);
 
 var datePeriodConfig = {
     appearance: datePeriodAppearance,
@@ -46,7 +82,7 @@ function DatePeriod(props) {
         return (__assign(__assign({}, resultConfig), (_a = datePeriodConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
     }, {});
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var _b = propsGenerator, fillClass = _b.fillClass, _c = _b.chipsAppearance, chipsAppearance = _c === void 0 ? 'surfacePrimary sizeM' : _c, chipsShape = _b.chipsShape, _d = _b.datePickerAppearance, datePickerAppearance = _d === void 0 ? 'sizeM' : _d, _e = _b.datePickerInputAppearance, datePickerInputAppearance = _e === void 0 ? 'defaultPrimary' : _e, datePickerInputFillHover = _b.datePickerInputFillHover, _f = _b.datePickerInputSize, datePickerInputSize = _f === void 0 ? 'm' : _f, datePickerInputTextSize = _b.datePickerInputTextSize, shapeClass = _b.shapeClass, sizeClass = _b.sizeClass;
+    var _b = propsGenerator, fillClass = _b.fillClass, chipsAppearance = _b.chipsAppearance, chipsAppearanceSize = _b.chipsAppearanceSize, chipsShape = _b.chipsShape, datePickerAppearance = _b.datePickerAppearance, datePickerAppearanceSize = _b.datePickerAppearanceSize, datePickerInputAppearance = _b.datePickerInputAppearance, datePickerInputFillHover = _b.datePickerInputFillHover, datePickerInputSize = _b.datePickerInputSize, datePickerInputTextSize = _b.datePickerInputTextSize, shapeClass = _b.shapeClass, sizeClass = _b.sizeClass;
     var onClickPeriodChips = useCallback(function (selectedPeriodItem) {
         var dateStartIso = selectedPeriodItem.dateIntervalsList[0];
         var dateEndIso = selectedPeriodItem.dateIntervalsList[1];
@@ -69,8 +105,9 @@ function DatePeriod(props) {
         return (dateStartIso === datePeriodValueStart &&
             dateEndIso === datePeriodValueEnd);
     }, [datePeriodValueEnd, datePeriodValueStart]);
-    return (jsx("div", { className: clsx(className, 'date-period', shapeClass && "date-period_shape_".concat(shapeClass), sizeClass && "date-period_size_".concat(sizeClass), isSkeleton && "date-period_skeleton", fillClass && "fill_".concat(fillClass), 'cursor_type_pointer'), children: jsxs(ChipsGroup, { direction: "horizontal", children: [datePeriodIntervalsList.map(function (datePeriodItem) { return (jsx(Chips, { appearance: chipsAppearance, label: datePeriodItem.label, shape: chipsShape, isActive: checkIsChipsActive(datePeriodItem), onClick: function () { return onClickPeriodChips(datePeriodItem); } }, datePeriodItem.value)); }), jsx(DatePickerInput, { datePickerProps: {
-                        appearance: datePickerAppearance,
+    return (jsx("div", { className: clsx(className, 'date-period', shapeClass && "date-period_shape_".concat(shapeClass), sizeClass && "date-period_size_".concat(sizeClass), isSkeleton && "date-period_skeleton", fillClass && "fill_".concat(fillClass), 'cursor_type_pointer'), children: jsxs(ChipsGroup, { direction: "horizontal", children: [datePeriodIntervalsList.map(function (datePeriodItem) { return (jsx(Chips, { appearance: "".concat(chipsAppearance, " ").concat(chipsAppearanceSize), label: datePeriodItem.label, shape: chipsShape, isActive: checkIsChipsActive(datePeriodItem), onClick: function () { return onClickPeriodChips(datePeriodItem); } }, datePeriodItem.value)); }), jsx(DatePickerInput, { datePickerProps: {
+                        appearance: "".concat(datePickerAppearance, " ").concat(datePickerAppearanceSize),
+                        dateFormat: 'dd/MM/yyyy',
                         selectsRange: true,
                         showWeekNumbers: true,
                         isClearable: false,

package/dist/components/DatePicker.js

@@ -1,4 +1,4 @@
-export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_Bm_onmmb.js';
+export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_BCbmUdl0.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';
@@ -19,12 +19,12 @@ import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Button_es_Dp6yFZgn.js';
-import '../Tooltip_es_D1w1s33u.js';
-import '../Text_es_BRb3qqKM.js';
+import '../Button_es_CO_dwo-N.js';
+import '../Tooltip_es_frBCZDrO.js';
+import '../Text_es_BfLRfj-5.js';
 import 'react-inlinesvg';
 import '../Link_es_DxtZLeKY.js';
-import '../Loader_es_DHKB6tTw.js';
+import '../Loader_es_B2auu_rc.js';
 import '../Input_es_CNduH28G.js';
-import '../Label_es_BtwZ3a2V.js';
+import '../Label_es_Dl_DrMOh.js';
 import '@itcase/icons/default';

package/dist/components/Divider.js

@@ -1,4 +1,4 @@
-export { D as Divider, a as dividerAppearance, d as dividerConfig } from '../Divider_es_BEYLRagS.js';
+export { D as Divider, a as dividerAppearance, d as dividerConfig } from '../Divider_es_kY-30pft.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'clsx';

package/dist/components/Drawer.js

@@ -1,14 +1,39 @@
+import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useEffect } from 'react';
 import clsx from 'clsx';
 import ReactDrawer from 'react-modern-drawer';
-import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
+import { I as Icon, b as Title } from '../Tooltip_es_frBCZDrO.js';
+import { T as Text } from '../Text_es_BfLRfj-5.js';
+import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { icon24 } from '@itcase/icons/default';
+import '../hooks/useStyles/useStyles.js';
+import 'lodash/camelCase';
+import 'lodash/maxBy';
+import 'lodash/upperFirst';
+import '../context/Notifications.js';
+import 'uuid';
+import '@itcase/common';
+import '../context/UIContext.js';
+import '../hooks/useMediaQueries/useMediaQueries.js';
+import 'react-responsive';
+import '../utils/setViewportProperty.js';
+import '../hooks/useStyles/styleAttributes.js';
+import 'react-inlinesvg';
+import '../Link_es_DxtZLeKY.js';
+import 'lodash/castArray';
 
 var drawerAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
         fillHover: 'surfacePrimaryHover',
-        labelTextColor: 'surfaceTextPrimary',
+        titleTextColor: 'surfaceTextPrimary',
+        titleTextSize: 'h3',
+        descTextColor: 'surfaceTextPrimary',
+        descTextSize: 's',
+        iconSize: 24,
+        closeIcon: icon24.Close,
+        closeIconFillIcon: 'surfaceItemPrimary',
     },
     surfaceQuaternary: {
         fill: 'surfaceQuaternary',
@@ -38,8 +63,14 @@ var drawerConfig = {
     },
 };
 function Drawer(props) {
-    var className = props.className, type = props.type, direction = props.direction, size = props.size, dataTestId = props.dataTestId, dataTour = props.dataTour, enableOverlay = props.enableOverlay, before = props.before, after = props.after, isOpenModal = props.isOpenModal, onClickClose = props.onClickClose, onClose = props.onClose, children = props.children;
+    var className = props.className, type = props.type, close = props.close, appearance = props.appearance, dataTestId = props.dataTestId, dataTour = props.dataTour, title = props.title, desc = props.desc, enableOverlay = props.enableOverlay, before = props.before, after = props.after, isOpenModal = props.isOpenModal, onClickClose = props.onClickClose, onClose = props.onClose, children = props.children;
     var prevIsOpenModalRef = useRef(null);
+    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
+        var _a;
+        return (__assign(__assign({}, resultConfig), (_a = drawerConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
+    }, {});
+    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    var direction = propsGenerator.direction, size = propsGenerator.size, titleTextSize = propsGenerator.titleTextSize, titleTextColor = propsGenerator.titleTextColor, closeIcon = propsGenerator.closeIcon, closeIconSrc = propsGenerator.closeIconSrc, closeIconFill = propsGenerator.closeIconFill, closeIconFillSize = propsGenerator.closeIconFillSize, closeIconFillIcon = propsGenerator.closeIconFillIcon, closeIconSize = propsGenerator.closeIconSize, closeIconShape = propsGenerator.closeIconShape, descTextSize = propsGenerator.descTextSize, descTextColor = propsGenerator.descTextColor;
     useEffect(function () {
         if (onClose && prevIsOpenModalRef.current === true && !isOpenModal) {
             onClose();
@@ -48,9 +79,7 @@ function Drawer(props) {
     }, [isOpenModal, onClose]);
     return (jsxs(ReactDrawer, { className: clsx('drawer', type && "drawer_type_".concat(type), className, dataTour && "data-tour-".concat(dataTour)), direction: direction || 'right', size: size || 600, 
         // Drawer set prefix "EZDrawer" for any id
-        customIdSuffix: dataTestId ? "_".concat(dataTestId) : undefined, "data-tour": dataTour, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", 
-        // @ts-expect-error
-        open: isOpenModal, onClose: onClickClose, children: [before && jsx("div", { className: "drawer__before", children: before }), children && jsx("div", { className: "drawer__wrapper", children: children }), after && jsx("div", { className: "drawer__after", children: after })] }));
+        customIdSuffix: dataTestId ? "_".concat(dataTestId) : undefined, "data-tour": dataTour, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open: isOpenModal, onClose: onClickClose, children: [before && jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (jsx("div", { className: "drawer__close", children: jsx(Icon, { className: "cursor_type_pointer", fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon }) })), (title || desc) && (jsxs("div", { className: "drawer__header", children: [jsx(Title, { className: "drawer__header-title", size: titleTextSize, textColor: titleTextColor, children: title }), jsx(Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), children && jsx("div", { className: "drawer__wrapper", children: children }), after && jsx("div", { className: "drawer__after", children: after })] }));
 }
 
 export { Drawer, drawerAppearance, drawerConfig };

package/dist/components/Dropdown/stories/__mock__.js

@@ -0,0 +1,22 @@
+import { icon24 } from '@itcase/icons/default';
+
+var dropdownListMock = {
+    dropdownList: [
+        { key: 1, label: 'Item 1', isActive: true },
+        { key: 2, label: 'Item 2', isActive: false },
+        { key: 3, label: 'Item 3', badgeValue: 3, isActive: false },
+        {
+            key: 4,
+            label: 'Item 4',
+            iconBefore: icon24.Placeholder,
+            isActive: false,
+        },
+        { key: 5, label: 'Item 5', iconAfter: icon24.Placeholder, isActive: false },
+        { key: 6, label: 'Item 6', iconBefore: icon24.Check, isActive: false },
+        { key: 7, label: 'Item 7', iconAfter: icon24.Check, isActive: false },
+        { key: 8, label: 'Item 8', showDivider: true, isActive: false },
+        { key: 9, label: 'Item 9', isActive: false },
+    ],
+};
+
+export { dropdownListMock };

package/dist/components/Dropdown.js

@@ -1,4 +1,4 @@
-export { D as Dropdown, a as DropdownItem, d as dropdownItemAppearance, b as dropdownItemConfig } from '../DropdownItem_es_B4EZYdJA.js';
+export { D as Dropdown, a as DropdownItem, d as dropdownItemAppearance, b as dropdownItemConfig } from '../DropdownItem_es_CVztMEm0.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -17,8 +17,8 @@ import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Divider_es_BEYLRagS.js';
-import '../Tooltip_es_D1w1s33u.js';
-import '../Text_es_BRb3qqKM.js';
+import '../Divider_es_kY-30pft.js';
+import '../Tooltip_es_frBCZDrO.js';
+import '../Text_es_BfLRfj-5.js';
 import 'react-inlinesvg';
 import '../Link_es_DxtZLeKY.js';

package/dist/components/HeroTitle.js

@@ -1,9 +1,10 @@
 import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
-import { jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
+import { I as Icon } from '../Tooltip_es_frBCZDrO.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
@@ -16,6 +17,9 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
+import '../Text_es_BfLRfj-5.js';
+import 'react-inlinesvg';
+import '../Link_es_DxtZLeKY.js';
 
 var heroTitleAppearanceSize = {
     sizeH1: {
@@ -53,15 +57,15 @@ var heroTitleConfig = {
     },
 };
 function HeroTitle(props) {
-    var className = props.className, appearance = props.appearance, text = props.text, afterWrapper = props.afterWrapper, beforeWrapper = props.beforeWrapper, dataTour = props.dataTour, mode = props.mode, _a = props.tag, tag = _a === void 0 ? 'span' : _a, before = props.before, after = props.after, onClick = props.onClick, children = props.children;
+    var className = props.className, appearance = props.appearance, text = props.text, afterWrapper = props.afterWrapper, beforeWrapper = props.beforeWrapper, dataTour = props.dataTour, _a = props.tag, tag = _a === void 0 ? 'span' : _a, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onClick = props.onClick, children = props.children;
     var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
         var _a;
         return (__assign(__assign({}, resultConfig), (_a = heroTitleConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
     }, {});
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var directionClass = propsGenerator.directionClass, _b = propsGenerator.size, size = _b === void 0 ? 'h3' : _b, fillClass = propsGenerator.fillClass, textAlignClass = propsGenerator.textAlignClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorGradientClass = propsGenerator.textColorGradientClass, textColorHoverClass = propsGenerator.textColorHoverClass, textStyleClass = propsGenerator.textStyleClass, textTruncateClass = propsGenerator.textTruncateClass, textWeightClass = propsGenerator.textWeightClass, textWrap = propsGenerator.textWrap, heightClass = propsGenerator.heightClass, svgFillClass = propsGenerator.svgFillClass, svgFillHoverClass = propsGenerator.svgFillHoverClass, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass, wrapperDirectionClass = propsGenerator.wrapperDirectionClass;
+    var directionClass = propsGenerator.directionClass, size = propsGenerator.size, fillClass = propsGenerator.fillClass, textAlignClass = propsGenerator.textAlignClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorGradientClass = propsGenerator.textColorGradientClass, textColorHoverClass = propsGenerator.textColorHoverClass, textStyleClass = propsGenerator.textStyleClass, textTruncateClass = propsGenerator.textTruncateClass, textWeightClass = propsGenerator.textWeightClass, textWrap = propsGenerator.textWrap, dataTestId = propsGenerator.dataTestId, heightClass = propsGenerator.heightClass, iconAfter = propsGenerator.iconAfter, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconAfterSrc = propsGenerator.iconAfterSrc, iconBadgeAppearance = propsGenerator.iconBadgeAppearance, iconBadgeShape = propsGenerator.iconBadgeShape, iconBadgeSize = propsGenerator.iconBadgeSize, iconBadgeTextColor = propsGenerator.iconBadgeTextColor, iconBadgeTextSize = propsGenerator.iconBadgeTextSize, iconBadgeValue = propsGenerator.iconBadgeValue, iconBefore = propsGenerator.iconBefore, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, iconBeforeSrc = propsGenerator.iconBeforeSrc, svgFillClass = propsGenerator.svgFillClass, svgFillHoverClass = propsGenerator.svgFillHoverClass, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass, wrapperDirectionClass = propsGenerator.wrapperDirectionClass;
     // @ts-expect-error
-    var _c = useStyles(props), heroTitleStyles = _c.styles, heroTitleWrapperStyles = _c.wrapper;
+    var _b = useStyles(props), heroTitleStyles = _b.styles, heroTitleWrapperStyles = _b.wrapper;
     // Element type (h1, h2, ..., h6)
     var Tag = useMemo(function () {
         if (tag) {
@@ -69,8 +73,8 @@ function HeroTitle(props) {
         }
         return size ? size : 'span';
     }, [size, tag]);
-    return (jsxs(Tag, { className: clsx(className, 'heroTitle', fillClass && "fill_".concat(fillClass), svgFillClass && "svg_fill_".concat(svgFillClass), svgFillHoverClass && "svg_fill_hover_".concat(svgFillHoverClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), size && "hero-title_size_".concat(size), mode && "hero-title_mode_".concat(mode), directionClass && "hero-title_direction_".concat(directionClass), 'text', textColorClass && "text-color_".concat(textColorClass), textColorActiveClass && "text-color_active_".concat(textColorActiveClass), textColorHoverClass && "text-color_hover_".concat(textColorHoverClass), typeClass && "hero-title_type_".concat(typeClass), textColorGradientClass && "text-gradient_".concat(textColorGradientClass), textStyleClass && "text-style_".concat(textStyleClass), textWeightClass && "text-weight_".concat(textWeightClass), textWrap && "word-wrap_".concat(textWrap)), "data-tour": dataTour, style: heroTitleStyles, onClick: onClick, children: [before, jsxs("span", { className: clsx(textAlignClass && "text-align_".concat(textAlignClass), wrapperDirectionClass &&
-                    "hero-title-direction_".concat(wrapperDirectionClass), 'hero-title__wrapper', textTruncateClass && "text-truncate_".concat(textTruncateClass)), style: heroTitleWrapperStyles, children: [beforeWrapper, children || text, afterWrapper] }), after] }));
+    return (jsxs(Tag, { className: clsx(className, 'heroTitle', fillClass && "fill_".concat(fillClass), svgFillClass && "svg_fill_".concat(svgFillClass), svgFillHoverClass && "svg_fill_hover_".concat(svgFillHoverClass), widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), size && "hero-title_size_".concat(size), directionClass && "hero-title_direction_".concat(directionClass), 'text', textColorClass && "text-color_".concat(textColorClass), textColorActiveClass && "text-color_active_".concat(textColorActiveClass), textColorHoverClass && "text-color_hover_".concat(textColorHoverClass), typeClass && "hero-title_type_".concat(typeClass), textColorGradientClass && "text-gradient_".concat(textColorGradientClass), textStyleClass && "text-style_".concat(textStyleClass), textWeightClass && "text-weight_".concat(textWeightClass), textWrap && "word-wrap_".concat(textWrap), isSkeleton && 'hero-title_skeleton'), "data-testid": dataTestId, "data-tour": dataTour, style: heroTitleStyles, onClick: onClick, children: [before, jsxs("span", { className: clsx(textAlignClass && "text-align_".concat(textAlignClass), wrapperDirectionClass &&
+                    "hero-title-direction_".concat(wrapperDirectionClass), 'hero-title__wrapper', textTruncateClass && "text-truncate_".concat(textTruncateClass)), style: heroTitleWrapperStyles, children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { className: clsx('title__icon_before', iconBadgeValue && 'title__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'title__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), beforeWrapper, children || text, afterWrapper, (iconAfter || iconAfterSrc) && (jsx(Icon, { className: clsx('title__icon_after', iconBadgeValue && 'title__icon_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'title__icon_after_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] }), after] }));
 }
 
 export { HeroTitle, heroTitleAppearance, heroTitleConfig };

package/dist/components/Icon.js

@@ -1,4 +1,4 @@
-export { I as Icon, e as iconAppearance, i as iconConfig } from '../Tooltip_es_D1w1s33u.js';
+export { I as Icon, e as iconAppearance, i as iconConfig } from '../Tooltip_es_frBCZDrO.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';
@@ -17,6 +17,6 @@ import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Text_es_BRb3qqKM.js';
+import '../Text_es_BfLRfj-5.js';
 import 'react-inlinesvg';
 import '../Link_es_DxtZLeKY.js';

package/dist/components/InputPassword.js

@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useMemo, useCallback } from 'react';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { I as Icon } from '../Tooltip_es_D1w1s33u.js';
+import { I as Icon } from '../Tooltip_es_frBCZDrO.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
@@ -17,7 +17,7 @@ import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Text_es_BRb3qqKM.js';
+import '../Text_es_BfLRfj-5.js';
 import 'react-inlinesvg';
 import '../Link_es_DxtZLeKY.js';
 

package/dist/components/Label.js

@@ -1,4 +1,4 @@
-export { L as Label, a as labelAppearance, l as labelConfig } from '../Label_es_BtwZ3a2V.js';
+export { L as Label, a as labelAppearance, l as labelConfig } from '../Label_es_Dl_DrMOh.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';
@@ -17,7 +17,7 @@ import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Tooltip_es_D1w1s33u.js';
-import '../Text_es_BRb3qqKM.js';
+import '../Tooltip_es_frBCZDrO.js';
+import '../Text_es_BfLRfj-5.js';
 import 'react-inlinesvg';
 import '../Link_es_DxtZLeKY.js';

package/dist/components/Loader.js

@@ -1,4 +1,4 @@
-export { L as Loader, a as loaderAppearance, l as loaderConfig } from '../Loader_es_DHKB6tTw.js';
+export { L as Loader, a as loaderAppearance, l as loaderConfig } from '../Loader_es_B2auu_rc.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'clsx';
@@ -17,4 +17,4 @@ import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Text_es_BRb3qqKM.js';
+import '../Text_es_BfLRfj-5.js';

package/dist/components/MenuItem.js

@@ -4,9 +4,9 @@ import React from 'react';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { I as Icon } from '../Tooltip_es_D1w1s33u.js';
+import { I as Icon } from '../Tooltip_es_frBCZDrO.js';
 import { L as Link } from '../Link_es_DxtZLeKY.js';
-import { T as Text } from '../Text_es_BRb3qqKM.js';
+import { T as Text } from '../Text_es_BfLRfj-5.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
@@ -122,18 +122,18 @@ var menuItemAppearanceSize = {
 };
 
 var menuItemAppearanceStyle = {
-    full: {
-        borderColor: '0',
-    },
-    ghost: {
-        fill: 'none',
-        borderColor: '0',
+    solid: {
+        borderColor: 'none',
     },
     outlined: {
         fill: 'none',
     },
-    solid: {
-        borderColor: '0',
+    full: {
+        borderColor: 'none',
+    },
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
     },
 };
 

package/dist/components/Modal.js

@@ -5,9 +5,9 @@ import clsx from 'clsx';
 import ReactDOM from 'react-dom';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { O as Overlay } from '../Overlay_es_cI_-_xUO.js';
-import { b as Title } from '../Tooltip_es_D1w1s33u.js';
-import { L as Loader } from '../Loader_es_DHKB6tTw.js';
+import { O as Overlay } from '../Overlay_es_DczPjVL9.js';
+import { b as Title } from '../Tooltip_es_frBCZDrO.js';
+import { L as Loader } from '../Loader_es_B2auu_rc.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
@@ -20,7 +20,7 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Text_es_BRb3qqKM.js';
+import '../Text_es_BfLRfj-5.js';
 import 'react-inlinesvg';
 import '../Link_es_DxtZLeKY.js';
 

package/dist/components/Notification/stories/__mock__.js

@@ -0,0 +1,28 @@
+var notificationsMock = [
+    {
+        key: 1,
+        title: 'Text 123',
+        desc: 'Text 123',
+        status: 'error',
+    },
+    {
+        key: 2,
+        title: 'Text 123',
+        desc: 'Text 123',
+        status: 'warning',
+    },
+    {
+        key: 3,
+        title: 'Text 123',
+        desc: 'Text 123',
+        status: 'info',
+    },
+    {
+        key: 4,
+        title: 'Text 123',
+        desc: 'Text 123',
+        status: 'success',
+    },
+];
+
+export { notificationsMock };