@itcase/ui 1.8.25 → 1.8.29

package/dist/cjs/components/DatePeriod.js

@@ -5,9 +5,10 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var luxon = require('luxon');
-var DatePicker = require('../../DatePicker_cjs_DamcZFbX.js');
+var common = require('@itcase/common');
+var DatePicker = require('../../DatePicker_cjs_0y_2FcnF.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var ChipsGroup = require('../../ChipsGroup_cjs_Ct-NrPmJ.js');
+var ChipsGroup = require('../../ChipsGroup_cjs_Cm_pVx8z.js');
 require('date-fns/locale');
 require('react-datepicker');
 require('../hooks/useStyles/useStyles.js');
@@ -16,64 +17,59 @@ require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../context/Notifications.js');
 require('uuid');
-require('@itcase/common');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Button_cjs_CYUpbdMO.js');
-require('../../Tooltip_cjs_CaocDcQ5.js');
-require('../../Text_cjs_DPhKj3wf.js');
+require('../../Button_cjs_C05Joa8j.js');
+require('../../Tooltip_cjs_pBGCcXLZ.js');
+require('../../Text_cjs_C9fOm0nd.js');
 require('react-inlinesvg');
 require('../../Link_cjs_DbRGq2Yk.js');
-require('../../Loader_cjs___VikiqS.js');
+require('../../Loader_cjs_CCrbD8Em.js');
 require('../../Input_cjs_BAVggtkk.js');
-require('../../Label_cjs_ByGAWJcj.js');
+require('../../Label_cjs_BefEcq6i.js');
 require('@itcase/icons/default');
 require('lodash/castArray');
 
-var datePeriodAppearance = {
-    dev: {},
+var datePeriodAppearanceSize = {
+    sizeL: {
+        size: 'm',
+        datePickerAppearance: 'sizeM',
+        datePickerInputSize: 'l',
+        datePickerInputTextSize: 'm',
+    },
+    sizeM: {
+        size: 'm',
+        datePickerAppearance: 'sizeM',
+        datePickerInputSize: 'm',
+        datePickerInputTextSize: 'm',
+    },
+};
+
+var datePeriodAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        chipsAppearance: 'surfacePrimary sizeL ghost',
+        chipsShape: 'rounded',
+        datePickerAppearance: 'surfacePrimary',
+        datePickerInputAppearance: 'defaultPrimary',
+        datePickerInputFillHover: 'surfaceHover',
+        shape: 'rounded',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        chipsAppearance: 'surfacePrimary sizeL ghost',
+        chipsShape: 'rounded',
+        datePickerAppearance: 'surfacePrimary',
+        datePickerInputAppearance: 'defaultPrimary',
+        datePickerInputFillHover: 'surfaceHover',
+        shape: 'rounded',
+    },
 };
 
-/* eslint-disable perfectionist/sort-objects */
-var DATE_PERIOD_INTERVALS = (function () {
-    var now = luxon.DateTime.local();
-    var today = now.toISODate();
-    var yesterday = now.minus({ days: 1 }).toISODate();
-    var backWeek = now.minus({ days: 6 }).toISODate();
-    var backMonth = now.minus({ months: 1, days: -1 }).toISODate();
-    var backQuarter = now.minus({ months: 3, days: -1 }).toISODate();
-    // NOTE: "Choice" wait in options list the objects with "value" and "label"
-    return {
-        today: {
-            label: 'Сегодня',
-            value: 'today',
-            dateIntervalsList: [today, today],
-        },
-        yesterday: {
-            label: 'Вчера',
-            value: 'yesterday',
-            dateIntervalsList: [yesterday, yesterday],
-        },
-        backWeek: {
-            label: 'Неделя',
-            value: 'backWeek',
-            dateIntervalsList: [backWeek, today],
-        },
-        backMonth: {
-            label: 'Месяц',
-            value: 'backMonth',
-            dateIntervalsList: [backMonth, today],
-        },
-        backQuarter: {
-            label: 'Квартал',
-            value: 'backQuarter',
-            dateIntervalsList: [backQuarter, today],
-        },
-    };
-})();
+var datePeriodAppearance = tslib_es6.__assign(tslib_es6.__assign({}, datePeriodAppearanceSurface), datePeriodAppearanceSize);
 
 var datePeriodConfig = {
     appearance: datePeriodAppearance,
@@ -82,13 +78,13 @@ var datePeriodConfig = {
     },
 };
 function DatePeriod(props) {
-    var className = props.className, appearance = props.appearance, _a = props.datePeriodIntervalsList, datePeriodIntervalsList = _a === void 0 ? Object.values(DATE_PERIOD_INTERVALS) : _a, datePeriodValueEnd = props.datePeriodValueEnd, datePeriodValueStart = props.datePeriodValueStart, isSkeleton = props.isSkeleton, onChangeDatePeriod = props.onChangeDatePeriod;
+    var className = props.className, appearance = props.appearance, _a = props.datePeriodIntervalsList, datePeriodIntervalsList = _a === void 0 ? Object.values(common.DATE_PERIOD_INTERVALS) : _a, datePeriodValueEnd = props.datePeriodValueEnd, datePeriodValueStart = props.datePeriodValueStart, isSkeleton = props.isSkeleton, onChangeDatePeriod = props.onChangeDatePeriod;
     var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
         var _a;
         return (tslib_es6.__assign(tslib_es6.__assign({}, resultConfig), (_a = datePeriodConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
     }, {});
     var propsGenerator = useDevicePropsGenerator.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, chipsShape = _b.chipsShape, datePickerAppearance = _b.datePickerAppearance, datePickerInputAppearance = _b.datePickerInputAppearance, datePickerInputFillHover = _b.datePickerInputFillHover, datePickerInputSize = _b.datePickerInputSize, datePickerInputTextSize = _b.datePickerInputTextSize, shapeClass = _b.shapeClass, sizeClass = _b.sizeClass;
     var onClickPeriodChips = React.useCallback(function (selectedPeriodItem) {
         var dateStartIso = selectedPeriodItem.dateIntervalsList[0];
         var dateEndIso = selectedPeriodItem.dateIntervalsList[1];
@@ -113,6 +109,7 @@ function DatePeriod(props) {
     }, [datePeriodValueEnd, datePeriodValueStart]);
     return (jsxRuntime.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: jsxRuntime.jsxs(ChipsGroup.ChipsGroup, { direction: "horizontal", children: [datePeriodIntervalsList.map(function (datePeriodItem) { return (jsxRuntime.jsx(ChipsGroup.Chips, { appearance: chipsAppearance, label: datePeriodItem.label, shape: chipsShape, isActive: checkIsChipsActive(datePeriodItem), onClick: function () { return onClickPeriodChips(datePeriodItem); } }, datePeriodItem.value)); }), jsxRuntime.jsx(DatePicker.DatePickerInput, { datePickerProps: {
                         appearance: datePickerAppearance,
+                        dateFormat: 'dd/MM/yyyy',
                         selectsRange: true,
                         showWeekNumbers: true,
                         isClearable: false,
@@ -126,7 +123,6 @@ function DatePeriod(props) {
                     }, value: datePeriodValueStart, onChange: onChangeDatePicker })] }) }));
 }
 
-exports.DATE_PERIOD_INTERVALS = DATE_PERIOD_INTERVALS;
 exports.DatePeriod = DatePeriod;
 exports.datePeriodAppearance = datePeriodAppearance;
 exports.datePeriodConfig = datePeriodConfig;

package/dist/cjs/components/DatePicker.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var DatePicker = require('../../DatePicker_cjs_DamcZFbX.js');
+var DatePicker = require('../../DatePicker_cjs_0y_2FcnF.js');
 require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('react/jsx-runtime');
 require('react');
@@ -21,14 +21,14 @@ require('../utils/setViewportProperty.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Button_cjs_CYUpbdMO.js');
-require('../../Tooltip_cjs_CaocDcQ5.js');
-require('../../Text_cjs_DPhKj3wf.js');
+require('../../Button_cjs_C05Joa8j.js');
+require('../../Tooltip_cjs_pBGCcXLZ.js');
+require('../../Text_cjs_C9fOm0nd.js');
 require('react-inlinesvg');
 require('../../Link_cjs_DbRGq2Yk.js');
-require('../../Loader_cjs___VikiqS.js');
+require('../../Loader_cjs_CCrbD8Em.js');
 require('../../Input_cjs_BAVggtkk.js');
-require('../../Label_cjs_ByGAWJcj.js');
+require('../../Label_cjs_BefEcq6i.js');
 require('@itcase/icons/default');
 
 

package/dist/cjs/components/Divider.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Divider = require('../../Divider_cjs_DhqcldLH.js');
+var Divider = require('../../Divider_cjs_BmCJj3TN.js');
 require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('react/jsx-runtime');
 require('clsx');

package/dist/cjs/components/Drawer.js

@@ -1,16 +1,41 @@
 'use strict';
 
+var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var ReactDrawer = require('react-modern-drawer');
-var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
+var Tooltip = require('../../Tooltip_cjs_pBGCcXLZ.js');
+var Text = require('../../Text_cjs_C9fOm0nd.js');
+var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+var _default = require('@itcase/icons/default');
+require('../hooks/useStyles/useStyles.js');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../context/Notifications.js');
+require('uuid');
+require('@itcase/common');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries/useMediaQueries.js');
+require('react-responsive');
+require('../utils/setViewportProperty.js');
+require('../hooks/useStyles/styleAttributes.js');
+require('react-inlinesvg');
+require('../../Link_cjs_DbRGq2Yk.js');
+require('lodash/castArray');
 
 var drawerAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
         fillHover: 'surfacePrimaryHover',
-        labelTextColor: 'surfaceTextPrimary',
+        titleTextColor: 'surfaceTextPrimary',
+        titleTextSize: 'h3',
+        descTextColor: 'surfaceTextPrimary',
+        descTextSize: 's',
+        iconSize: 24,
+        closeIcon: _default.icon24.Close,
+        closeIconFillIcon: 'surfaceItemPrimary',
     },
     surfaceQuaternary: {
         fill: 'surfaceQuaternary',
@@ -40,8 +65,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 = React.useRef(null);
+    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
+        var _a;
+        return (tslib_es6.__assign(tslib_es6.__assign({}, resultConfig), (_a = drawerConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
+    }, {});
+    var propsGenerator = useDevicePropsGenerator.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;
     React.useEffect(function () {
         if (onClose && prevIsOpenModalRef.current === true && !isOpenModal) {
             onClose();
@@ -50,9 +81,7 @@ function Drawer(props) {
     }, [isOpenModal, onClose]);
     return (jsxRuntime.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 && jsxRuntime.jsx("div", { className: "drawer__before", children: before }), children && jsxRuntime.jsx("div", { className: "drawer__wrapper", children: children }), after && jsxRuntime.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 && jsxRuntime.jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (jsxRuntime.jsx("div", { className: "drawer__close", children: jsxRuntime.jsx(Tooltip.Icon, { className: "cursor_type_pointer", fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon }) })), (title || desc) && (jsxRuntime.jsxs("div", { className: "drawer__header", children: [jsxRuntime.jsx(Tooltip.Title, { className: "drawer__header-title", size: titleTextSize, textColor: titleTextColor, children: title }), jsxRuntime.jsx(Text.Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), children && jsxRuntime.jsx("div", { className: "drawer__wrapper", children: children }), after && jsxRuntime.jsx("div", { className: "drawer__after", children: after })] }));
 }
 
 exports.Drawer = Drawer;

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

@@ -0,0 +1,24 @@
+'use strict';
+
+var _default = require('@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: _default.icon24.Placeholder,
+            isActive: false,
+        },
+        { key: 5, label: 'Item 5', iconAfter: _default.icon24.Placeholder, isActive: false },
+        { key: 6, label: 'Item 6', iconBefore: _default.icon24.Check, isActive: false },
+        { key: 7, label: 'Item 7', iconAfter: _default.icon24.Check, isActive: false },
+        { key: 8, label: 'Item 8', showDivider: true, isActive: false },
+        { key: 9, label: 'Item 9', isActive: false },
+    ],
+};
+
+exports.dropdownListMock = dropdownListMock;

package/dist/cjs/components/Dropdown.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var DropdownItem = require('../../DropdownItem_cjs_B_7anyaJ.js');
+var DropdownItem = require('../../DropdownItem_cjs_DPoFy70W.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -19,9 +19,9 @@ require('../utils/setViewportProperty.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Divider_cjs_DhqcldLH.js');
-require('../../Tooltip_cjs_CaocDcQ5.js');
-require('../../Text_cjs_DPhKj3wf.js');
+require('../../Divider_cjs_BmCJj3TN.js');
+require('../../Tooltip_cjs_pBGCcXLZ.js');
+require('../../Text_cjs_C9fOm0nd.js');
 require('react-inlinesvg');
 require('../../Link_cjs_DbRGq2Yk.js');
 

package/dist/cjs/components/HeroTitle.js

@@ -6,6 +6,7 @@ var React = require('react');
 var clsx = require('clsx');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
+var Tooltip = require('../../Tooltip_cjs_pBGCcXLZ.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
@@ -18,6 +19,9 @@ require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
+require('../../Text_cjs_C9fOm0nd.js');
+require('react-inlinesvg');
+require('../../Link_cjs_DbRGq2Yk.js');
 
 var heroTitleAppearanceSize = {
     sizeH1: {
@@ -55,15 +59,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 (tslib_es6.__assign(tslib_es6.__assign({}, resultConfig), (_a = heroTitleConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
     }, {});
     var propsGenerator = useDevicePropsGenerator.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.useStyles(props), heroTitleStyles = _c.styles, heroTitleWrapperStyles = _c.wrapper;
+    var _b = useStyles.useStyles(props), heroTitleStyles = _b.styles, heroTitleWrapperStyles = _b.wrapper;
     // Element type (h1, h2, ..., h6)
     var Tag = React.useMemo(function () {
         if (tag) {
@@ -71,8 +75,8 @@ function HeroTitle(props) {
         }
         return size ? size : 'span';
     }, [size, tag]);
-    return (jsxRuntime.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, jsxRuntime.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 (jsxRuntime.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, jsxRuntime.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) && (jsxRuntime.jsx(Tooltip.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) && (jsxRuntime.jsx(Tooltip.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] }));
 }
 
 exports.HeroTitle = HeroTitle;

package/dist/cjs/components/Icon.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Tooltip = require('../../Tooltip_cjs_CaocDcQ5.js');
+var Tooltip = require('../../Tooltip_cjs_pBGCcXLZ.js');
 require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('react/jsx-runtime');
 require('react');
@@ -19,7 +19,7 @@ require('../utils/setViewportProperty.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Text_cjs_DPhKj3wf.js');
+require('../../Text_cjs_C9fOm0nd.js');
 require('react-inlinesvg');
 require('../../Link_cjs_DbRGq2Yk.js');
 

package/dist/cjs/components/InputPassword.js

@@ -5,7 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var Tooltip = require('../../Tooltip_cjs_CaocDcQ5.js');
+var Tooltip = require('../../Tooltip_cjs_pBGCcXLZ.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
@@ -19,7 +19,7 @@ require('../utils/setViewportProperty.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Text_cjs_DPhKj3wf.js');
+require('../../Text_cjs_C9fOm0nd.js');
 require('react-inlinesvg');
 require('../../Link_cjs_DbRGq2Yk.js');
 

package/dist/cjs/components/Label.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Label = require('../../Label_cjs_ByGAWJcj.js');
+var Label = require('../../Label_cjs_BefEcq6i.js');
 require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('react/jsx-runtime');
 require('react');
@@ -19,8 +19,8 @@ require('../utils/setViewportProperty.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Tooltip_cjs_CaocDcQ5.js');
-require('../../Text_cjs_DPhKj3wf.js');
+require('../../Tooltip_cjs_pBGCcXLZ.js');
+require('../../Text_cjs_C9fOm0nd.js');
 require('react-inlinesvg');
 require('../../Link_cjs_DbRGq2Yk.js');
 

package/dist/cjs/components/Loader.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Loader = require('../../Loader_cjs___VikiqS.js');
+var Loader = require('../../Loader_cjs_CCrbD8Em.js');
 require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('react/jsx-runtime');
 require('clsx');
@@ -19,7 +19,7 @@ require('../utils/setViewportProperty.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Text_cjs_DPhKj3wf.js');
+require('../../Text_cjs_C9fOm0nd.js');
 
 
 

package/dist/cjs/components/MenuItem.js

@@ -6,9 +6,9 @@ var React = require('react');
 var clsx = require('clsx');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Tooltip = require('../../Tooltip_cjs_CaocDcQ5.js');
+var Tooltip = require('../../Tooltip_cjs_pBGCcXLZ.js');
 var Link = require('../../Link_cjs_DbRGq2Yk.js');
-var Text = require('../../Text_cjs_DPhKj3wf.js');
+var Text = require('../../Text_cjs_C9fOm0nd.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
@@ -124,18 +124,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/cjs/components/Modal.js

@@ -7,9 +7,9 @@ var clsx = require('clsx');
 var ReactDOM = require('react-dom');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Overlay = require('../../Overlay_cjs_BdAm_zrO.js');
-var Tooltip = require('../../Tooltip_cjs_CaocDcQ5.js');
-var Loader = require('../../Loader_cjs___VikiqS.js');
+var Overlay = require('../../Overlay_cjs_CFOtnzDU.js');
+var Tooltip = require('../../Tooltip_cjs_pBGCcXLZ.js');
+var Loader = require('../../Loader_cjs_CCrbD8Em.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
@@ -22,7 +22,7 @@ require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Text_cjs_DPhKj3wf.js');
+require('../../Text_cjs_C9fOm0nd.js');
 require('react-inlinesvg');
 require('../../Link_cjs_DbRGq2Yk.js');
 

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

@@ -0,0 +1,30 @@
+'use strict';
+
+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',
+    },
+];
+
+exports.notificationsMock = notificationsMock;