@itcase/ui 1.8.137 → 1.8.138

package/dist/{ChipsGroup_cjs_Du8WHI-Y.js → ChipsGroup_cjs_BNfzAmhc.js}

@@ -337,7 +337,7 @@ function ChipsGroup(props) {
     const { directionClass, alignClass, alignDirectionClass, fillClass, borderColorClass, borderTypeClass, borderWidthClass, chipsAppearance, widthClass, wrapClass, } = propsGenerator;
     // @ts-expect-error
     const { styles: groupStyles, wrapper: groupWrapperStyles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'chips-group', 'group', widthClass && `width_${widthClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, fillClass && `fill_${fillClass}`, horizontalScroll && 'group_type_horizontal_scroll', wrapClass && `group_wrap_${wrapClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsxRuntime.jsx("div", { className: "chips-group__wrapper", style: groupWrapperStyles, children: children
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'chips-group', 'group', widthClass && `width_${widthClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, fillClass && `fill_${fillClass}`, horizontalScroll && 'group_scroll_horizontal', wrapClass && `group_wrap_${wrapClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsxRuntime.jsx("div", { className: "chips-group__wrapper", style: groupWrapperStyles, children: children
                 ? children
                 : chipsList?.map((item) => (jsxRuntime.jsx(Chips, { appearance: chipsAppearance, label: item.label, isDisabled: item.isDisabled, iconAfter: item.iconAfter, iconBefore: item.iconBefore, isActive: item.isActive, onClick: () => onClick(item) }, item.id))) })) : children ? (children) : (chipsList?.map((item) => (jsxRuntime.jsx(Chips, { appearance: chipsAppearance, label: item.label, isDisabled: item.isDisabled, iconAfter: item.iconAfter, iconBefore: item.iconBefore, isActive: item.isActive, onClick: () => onClick(item) }, item.id)))) }));
 }

package/dist/{ChipsGroup_es_CzVlqaHv.js → ChipsGroup_es_UTiUhYs7.js}

@@ -335,7 +335,7 @@ function ChipsGroup(props) {
     const { directionClass, alignClass, alignDirectionClass, fillClass, borderColorClass, borderTypeClass, borderWidthClass, chipsAppearance, widthClass, wrapClass, } = propsGenerator;
     // @ts-expect-error
     const { styles: groupStyles, wrapper: groupWrapperStyles } = useStyles(props);
-    return (jsx("div", { className: clsx(className, 'chips-group', 'group', widthClass && `width_${widthClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, fillClass && `fill_${fillClass}`, horizontalScroll && 'group_type_horizontal_scroll', wrapClass && `group_wrap_${wrapClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsx("div", { className: "chips-group__wrapper", style: groupWrapperStyles, children: children
+    return (jsx("div", { className: clsx(className, 'chips-group', 'group', widthClass && `width_${widthClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, fillClass && `fill_${fillClass}`, horizontalScroll && 'group_scroll_horizontal', wrapClass && `group_wrap_${wrapClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsx("div", { className: "chips-group__wrapper", style: groupWrapperStyles, children: children
                 ? children
                 : chipsList?.map((item) => (jsx(Chips, { appearance: chipsAppearance, label: item.label, isDisabled: item.isDisabled, iconAfter: item.iconAfter, iconBefore: item.iconBefore, isActive: item.isActive, onClick: () => onClick(item) }, item.id))) })) : children ? (children) : (chipsList?.map((item) => (jsx(Chips, { appearance: chipsAppearance, label: item.label, isDisabled: item.isDisabled, iconAfter: item.iconAfter, iconBefore: item.iconBefore, isActive: item.isActive, onClick: () => onClick(item) }, item.id)))) }));
 }

package/dist/cjs/components/Chips.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var ChipsGroup = require('../../ChipsGroup_cjs_Du8WHI-Y.js');
+var ChipsGroup = require('../../ChipsGroup_cjs_BNfzAmhc.js');
 require('react/jsx-runtime');
 require('clsx');
 require('../hooks/useAppearanceConfig/useAppearanceConfig.js');

package/dist/cjs/components/DatePeriod.js

@@ -7,7 +7,7 @@ var common = require('@itcase/common');
 var DatePicker = require('../../DatePicker_cjs_Dxbyx8GV.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var ChipsGroup = require('../../ChipsGroup_cjs_Du8WHI-Y.js');
+var ChipsGroup = require('../../ChipsGroup_cjs_BNfzAmhc.js');
 require('date-fns/locale');
 require('react-datepicker');
 require('../hooks/useStyles/useStyles.js');

package/dist/cjs/components/Drawer.js

@@ -96,7 +96,7 @@ function Drawer(props) {
             console.warn('@itcase/ui Drawer warning: "isOpenModal" is deprecated, use "isOpen" instead.');
         }
     }, [_isOpen, onClose]);
-    return (jsxRuntime.jsxs(ReactDrawer, { dataTour: dataTour, className: clsx('drawer', type && `drawer_type_${type}`, className, dataTour && `dataTour-${dataTour}`, stickyButton && 'drawer_sticky-button', zeroPadding && 'drawer_reset-padding'), direction: direction || 'right', size: size || 600, 
+    return (jsxRuntime.jsxs(ReactDrawer, { className: clsx('drawer', type && `drawer_type_${type}`, className, dataTour && `dataTour-${dataTour}`, stickyButton && 'drawer_sticky-button', zeroPadding && 'drawer_reset-padding'), dataTour: dataTour, direction: direction || 'right', size: size || 600, 
         // Drawer set prefix "EZDrawer" for any id
         customIdSuffix: dataTestId ? `_${dataTestId}` : undefined, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open: _isOpen, onClose: onClickClose, children: [before && jsxRuntime.jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (jsxRuntime.jsx("div", { className: "drawer__close", children: jsxRuntime.jsx(Icon.Icon, { className: "cursor_type_pointer", fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon, onClick: onClickClose }) })), (title || desc) && (jsxRuntime.jsxs("div", { className: "drawer__header", children: [jsxRuntime.jsx(Icon.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 })] })), divider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", size: dividerSize, fill: "surfaceTertiary" })), children && jsxRuntime.jsx("div", { className: "drawer__wrapper", children: children }), after && jsxRuntime.jsx("div", { className: "drawer__after", children: after })] }));
 }

package/dist/cjs/components/Notification.js

@@ -140,20 +140,24 @@ const notificationConfig = {
     },
 };
 function Notification(props) {
-    const { id, dataTestId, dataTour, className, appearance, title, desc, before, after, close, isSkeleton, onClickClose, } = props;
+    const { id, appearance, className, dataTestId, dataTour, title, text, before, after, close, 
+    // type,
+    isSkeleton, onClickClose, } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, notificationConfig);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, titleTextColor, titleTextSize, descTextColor, descTextSize, elevationClass, sizeClass, widthClass, closeIcon, closeIconFill, closeIconFillIcon, closeIconFillSize, closeIconShape, closeIconSize, closeIconSrc, } = propsGenerator;
     // @ts-expect-error
     const { styles: notificationStyles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsxs("div", { className: clsx('notification__item', elevationClass && `elevation_${elevationClass}`, sizeClass && `notification__item_set_${sizeClass}`, widthClass && `width_${widthClass}`, fillClass && `fill_${fillClass}`, isSkeleton && `notification__item_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: notificationStyles, children: [before, jsxRuntime.jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsxRuntime.jsx(Text.Text, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor, children: title })), desc && (jsxRuntime.jsx(Text.Text, { className: "notification__item-text", size: descTextSize, textColor: descTextColor, children: desc })), close && (closeIcon || closeIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('notification__item-close', 'cursor_type_pointer'), fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon, onClick: () => onClickClose && onClickClose(id) }))] }), after] }));
+    return (jsxRuntime.jsxs("div", { className: clsx('notification__item', elevationClass && `elevation_${elevationClass}`, sizeClass && `notification__item_set_${sizeClass}`, widthClass && `width_${widthClass}`, fillClass && `fill_${fillClass}`, isSkeleton && `notification__item_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: notificationStyles, children: [before, jsxRuntime.jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsxRuntime.jsx(Text.Text, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor, children: title })), text && (jsxRuntime.jsx(Text.Text, { className: "notification__item-text", size: descTextSize, textColor: descTextColor, children: text })), close && (closeIcon || closeIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('notification__item-close', 'cursor_type_pointer'), fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon, onClick: () => onClickClose && onClickClose(id) }))] }), after] }));
 }
 
 function NotificationWrapper(props) {
     const notifications = Notifications.useNotifications();
     const { hideNotifications } = Notifications.useNotificationsAPI();
     const { className, close } = props;
-    return (jsxRuntime.jsx("div", { className: clsx('notification', className), children: jsxRuntime.jsx("div", { className: "notification__wrapper", children: notifications.map((notification, i) => (jsxRuntime.jsx(Notification, { id: notification.id, appearance: notification.appearance, title: notification.title, status: notification.status, text: notification.text, close: close, onClickClose: hideNotifications }, i))) }) }));
+    return (jsxRuntime.jsx("div", { className: clsx('notification', className), children: jsxRuntime.jsx("div", { className: "notification__wrapper", children: notifications.map((notification, i) => (jsxRuntime.jsx(Notification, { id: notification.id, appearance: notification.appearance, title: notification.title, status: notification.status, text: notification.text, 
+                // type={notification.type}
+                after: notification.after, close: close, onClickClose: hideNotifications }, i))) }) }));
 }
 
 exports.Notification = Notification;

package/dist/cjs/components/Switch.js

@@ -24,9 +24,9 @@ require('lodash/maxBy');
 const switchAppearanceDefault = {
     defaultPrimary: {
         fill: 'surfaceTertiary',
-        fillActive: 'successTertiary',
+        fillActive: 'successPrimary',
         fillToggle: 'surfaceItemSecondary',
-        fillToggleActive: 'accentItemSecondary',
+        fillToggleActive: 'successItemPrimary',
         titleTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
     },

package/dist/cjs/components/Tab.js

@@ -228,7 +228,7 @@ function TabGroup(props) {
     const { directionClass, alignClass, alignDirectionClass, fillClass, borderColorClass, borderTypeClass, borderWidthClass, widthClass, wrapClass, } = propsGenerator;
     // @ts-expect-error
     const { styles: groupStyles, wrapper: groupWrapperStyles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'tab-group', 'group', widthClass && `width_${widthClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, fillClass && `fill_${fillClass}`, horizontalScroll && 'group_type_horizontal_scroll', wrapClass && `group_wrap_${wrapClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsxRuntime.jsxs("div", { className: "tab-group__wrapper", style: groupWrapperStyles, children: [tabList?.map((item) => (jsxRuntime.jsx(Tab, { appearance: tabAppearance, label: item.label, isActive: item.isActive }, item.key))), children] })) : (jsxRuntime.jsxs(React.Fragment, { children: [tabList?.map((item) => (jsxRuntime.jsx(Tab, { appearance: tabAppearance, label: item.label, badgeValue: item.badgeValue, icon: item.icon, iconSrc: item.icon, isActive: item.isActive }, item.key))), children] })) }));
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'tab-group', 'group', widthClass && `width_${widthClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, fillClass && `fill_${fillClass}`, horizontalScroll && 'group_scroll_horizontal', wrapClass && `group_wrap_${wrapClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsxRuntime.jsxs("div", { className: "tab-group__wrapper", style: groupWrapperStyles, children: [tabList?.map((item) => (jsxRuntime.jsx(Tab, { appearance: tabAppearance, label: item.label, isActive: item.isActive }, item.key))), children] })) : (jsxRuntime.jsxs(React.Fragment, { children: [tabList?.map((item) => (jsxRuntime.jsx(Tab, { appearance: tabAppearance, label: item.label, badgeValue: item.badgeValue, icon: item.icon, iconSrc: item.icon, isActive: item.isActive }, item.key))), children] })) }));
 }
 
 exports.Tab = Tab;

package/dist/cjs/context/Notifications.js

@@ -8,9 +8,9 @@ var common = require('@itcase/common');
 
 const STATUSES = {
     error: 'error',
-    warning: 'warning',
     info: 'info',
     success: 'success',
+    warning: 'warning',
 };
 const NotificationsContext = React.createContext([]);
 /* eslint-disable @typescript-eslint/no-unused-vars */
@@ -126,6 +126,7 @@ function createNotification(notification, onClose) {
     // let appearance = STATUSES.appearance
     let closeByTime = 4500;
     let appearance = '';
+    let after = null;
     if (typeof notification === 'string') {
         text = notification;
     }
@@ -135,6 +136,7 @@ function createNotification(notification, onClose) {
         text = notification.text ?? text;
         status = notification.status ?? status;
         closeByTime = notification.closeByTime ?? closeByTime;
+        after = notification.after ?? after;
     }
     switch (status) {
         case 'success':
@@ -156,6 +158,7 @@ function createNotification(notification, onClose) {
         title: title,
         status: status,
         text: text,
+        after: after,
         closeByTime: closeByTime,
         onClose: onClose,
     };

package/dist/components/Chips.js

@@ -1,4 +1,4 @@
-export { C as Chips, b as ChipsGroup, a as chipsAppearance, c as chipsConfig } from '../ChipsGroup_es_CzVlqaHv.js';
+export { C as Chips, b as ChipsGroup, a as chipsAppearance, c as chipsConfig } from '../ChipsGroup_es_UTiUhYs7.js';
 import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useAppearanceConfig/useAppearanceConfig.js';

package/dist/components/DatePeriod.js

@@ -5,7 +5,7 @@ import { DATE_PERIOD_INTERVALS } from '@itcase/common';
 import { D as DatePickerInput } from '../DatePicker_es_mX0NSjO5.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_CzVlqaHv.js';
+import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_UTiUhYs7.js';
 import 'date-fns/locale';
 import 'react-datepicker';
 import '../hooks/useStyles/useStyles.js';

package/dist/components/Drawer.js

@@ -94,7 +94,7 @@ function Drawer(props) {
             console.warn('@itcase/ui Drawer warning: "isOpenModal" is deprecated, use "isOpen" instead.');
         }
     }, [_isOpen, onClose]);
-    return (jsxs(ReactDrawer, { dataTour: dataTour, className: clsx('drawer', type && `drawer_type_${type}`, className, dataTour && `dataTour-${dataTour}`, stickyButton && 'drawer_sticky-button', zeroPadding && 'drawer_reset-padding'), direction: direction || 'right', size: size || 600, 
+    return (jsxs(ReactDrawer, { className: clsx('drawer', type && `drawer_type_${type}`, className, dataTour && `dataTour-${dataTour}`, stickyButton && 'drawer_sticky-button', zeroPadding && 'drawer_reset-padding'), dataTour: dataTour, direction: direction || 'right', size: size || 600, 
         // Drawer set prefix "EZDrawer" for any id
         customIdSuffix: dataTestId ? `_${dataTestId}` : undefined, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open: _isOpen, 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, onClick: onClickClose }) })), (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 })] })), divider && (jsx(Divider, { width: "fill", size: dividerSize, fill: "surfaceTertiary" })), children && jsx("div", { className: "drawer__wrapper", children: children }), after && jsx("div", { className: "drawer__after", children: after })] }));
 }

package/dist/components/Notification.js

@@ -138,20 +138,24 @@ const notificationConfig = {
     },
 };
 function Notification(props) {
-    const { id, dataTestId, dataTour, className, appearance, title, desc, before, after, close, isSkeleton, onClickClose, } = props;
+    const { id, appearance, className, dataTestId, dataTour, title, text, before, after, close, 
+    // type,
+    isSkeleton, onClickClose, } = props;
     const appearanceConfig = useAppearanceConfig(appearance, notificationConfig);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, titleTextColor, titleTextSize, descTextColor, descTextSize, elevationClass, sizeClass, widthClass, closeIcon, closeIconFill, closeIconFillIcon, closeIconFillSize, closeIconShape, closeIconSize, closeIconSrc, } = propsGenerator;
     // @ts-expect-error
     const { styles: notificationStyles } = useStyles(props);
-    return (jsxs("div", { className: clsx('notification__item', elevationClass && `elevation_${elevationClass}`, sizeClass && `notification__item_set_${sizeClass}`, widthClass && `width_${widthClass}`, fillClass && `fill_${fillClass}`, isSkeleton && `notification__item_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: notificationStyles, children: [before, jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsx(Text, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor, children: title })), desc && (jsx(Text, { className: "notification__item-text", size: descTextSize, textColor: descTextColor, children: desc })), close && (closeIcon || closeIconSrc) && (jsx(Icon, { className: clsx('notification__item-close', 'cursor_type_pointer'), fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon, onClick: () => onClickClose && onClickClose(id) }))] }), after] }));
+    return (jsxs("div", { className: clsx('notification__item', elevationClass && `elevation_${elevationClass}`, sizeClass && `notification__item_set_${sizeClass}`, widthClass && `width_${widthClass}`, fillClass && `fill_${fillClass}`, isSkeleton && `notification__item_skeleton`), "data-test-id": dataTestId, "data-tour": dataTour, style: notificationStyles, children: [before, jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsx(Text, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor, children: title })), text && (jsx(Text, { className: "notification__item-text", size: descTextSize, textColor: descTextColor, children: text })), close && (closeIcon || closeIconSrc) && (jsx(Icon, { className: clsx('notification__item-close', 'cursor_type_pointer'), fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon, onClick: () => onClickClose && onClickClose(id) }))] }), after] }));
 }
 
 function NotificationWrapper(props) {
     const notifications = useNotifications();
     const { hideNotifications } = useNotificationsAPI();
     const { className, close } = props;
-    return (jsx("div", { className: clsx('notification', className), children: jsx("div", { className: "notification__wrapper", children: notifications.map((notification, i) => (jsx(Notification, { id: notification.id, appearance: notification.appearance, title: notification.title, status: notification.status, text: notification.text, close: close, onClickClose: hideNotifications }, i))) }) }));
+    return (jsx("div", { className: clsx('notification', className), children: jsx("div", { className: "notification__wrapper", children: notifications.map((notification, i) => (jsx(Notification, { id: notification.id, appearance: notification.appearance, title: notification.title, status: notification.status, text: notification.text, 
+                // type={notification.type}
+                after: notification.after, close: close, onClickClose: hideNotifications }, i))) }) }));
 }
 
 export { Notification, NotificationWrapper, notificationAppearance, notificationConfig };

package/dist/components/Switch.js

@@ -22,9 +22,9 @@ import 'lodash/maxBy';
 const switchAppearanceDefault = {
     defaultPrimary: {
         fill: 'surfaceTertiary',
-        fillActive: 'successTertiary',
+        fillActive: 'successPrimary',
         fillToggle: 'surfaceItemSecondary',
-        fillToggleActive: 'accentItemSecondary',
+        fillToggleActive: 'successItemPrimary',
         titleTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
     },

package/dist/components/Tab.js

@@ -226,7 +226,7 @@ function TabGroup(props) {
     const { directionClass, alignClass, alignDirectionClass, fillClass, borderColorClass, borderTypeClass, borderWidthClass, widthClass, wrapClass, } = propsGenerator;
     // @ts-expect-error
     const { styles: groupStyles, wrapper: groupWrapperStyles } = useStyles(props);
-    return (jsx("div", { className: clsx(className, 'tab-group', 'group', widthClass && `width_${widthClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, fillClass && `fill_${fillClass}`, horizontalScroll && 'group_type_horizontal_scroll', wrapClass && `group_wrap_${wrapClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsxs("div", { className: "tab-group__wrapper", style: groupWrapperStyles, children: [tabList?.map((item) => (jsx(Tab, { appearance: tabAppearance, label: item.label, isActive: item.isActive }, item.key))), children] })) : (jsxs(React.Fragment, { children: [tabList?.map((item) => (jsx(Tab, { appearance: tabAppearance, label: item.label, badgeValue: item.badgeValue, icon: item.icon, iconSrc: item.icon, isActive: item.isActive }, item.key))), children] })) }));
+    return (jsx("div", { className: clsx(className, 'tab-group', 'group', widthClass && `width_${widthClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, fillClass && `fill_${fillClass}`, horizontalScroll && 'group_scroll_horizontal', wrapClass && `group_wrap_${wrapClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsxs("div", { className: "tab-group__wrapper", style: groupWrapperStyles, children: [tabList?.map((item) => (jsx(Tab, { appearance: tabAppearance, label: item.label, isActive: item.isActive }, item.key))), children] })) : (jsxs(React.Fragment, { children: [tabList?.map((item) => (jsx(Tab, { appearance: tabAppearance, label: item.label, badgeValue: item.badgeValue, icon: item.icon, iconSrc: item.icon, isActive: item.isActive }, item.key))), children] })) }));
 }
 
 export { Tab, TabGroup, tabAppearance, tabConfig };

package/dist/context/Notifications.js

@@ -6,9 +6,9 @@ import { axiosInstanceITCase } from '@itcase/common';
 
 const STATUSES = {
     error: 'error',
-    warning: 'warning',
     info: 'info',
     success: 'success',
+    warning: 'warning',
 };
 const NotificationsContext = createContext([]);
 /* eslint-disable @typescript-eslint/no-unused-vars */
@@ -124,6 +124,7 @@ function createNotification(notification, onClose) {
     // let appearance = STATUSES.appearance
     let closeByTime = 4500;
     let appearance = '';
+    let after = null;
     if (typeof notification === 'string') {
         text = notification;
     }
@@ -133,6 +134,7 @@ function createNotification(notification, onClose) {
         text = notification.text ?? text;
         status = notification.status ?? status;
         closeByTime = notification.closeByTime ?? closeByTime;
+        after = notification.after ?? after;
     }
     switch (status) {
         case 'success':
@@ -154,6 +156,7 @@ function createNotification(notification, onClose) {
         title: title,
         status: status,
         text: text,
+        after: after,
         closeByTime: closeByTime,
         onClose: onClose,
     };

package/dist/css/components/Checkbox/Checkbox.css

@@ -207,16 +207,17 @@
   @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
     pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
     apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
-    pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
-    pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
-    beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
-    pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
-    deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
-    delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
-    pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
-    dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
-    stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
-    sonic-silver {
+    pink-sand, vintage-rose, grapefruit, light-pink, light-red, cream, almond,
+    mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
+    dark-green, green, spearmint, mint, beryl, light-green, light-sky, sea-foam,
+    turquoise, blue, light-blue, cerulean, surf-blue, pacific-green,
+    blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue, deep-navy,
+    midnight-blue, purple, ultra-violet, lilac, ocean-blue, delft-blue, indigo,
+    lavender-gray, lavender, mist-blue, storm-gray, cactus, pine-green,
+    cyprus-green, northern-blue, azure, alaskan-blue, khaki, dark-olive,
+    soft-white, antique-white, yellow-gold, gold, camel, walnut, stone, pebble,
+    cocoa, coastal-gray, white, black, outer-space, graphite-grey, alto,
+    athens-gray, sonic-silver {
     &_active_$(palette) {
       & .checkbox__state {
         background: var(--color-palette-$(palette));

package/dist/css/components/Icon/Icon.css

@@ -116,16 +116,17 @@
   @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
     pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
     apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
-    pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
-    pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
-    beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
-    pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
-    deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
-    delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
-    pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
-    dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
-    stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
-    sonic-silver {
+    pink-sand, vintage-rose, grapefruit, light-pink, light-red, cream, almond,
+    mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
+    dark-green, green, spearmint, mint, beryl, light-green, light-sky, sea-foam,
+    turquoise, blue, light-blue, cerulean, surf-blue, pacific-green,
+    blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue, deep-navy,
+    midnight-blue, purple, ultra-violet, lilac, ocean-blue, delft-blue, indigo,
+    lavender-gray, lavender, mist-blue, storm-gray, cactus, pine-green,
+    cyprus-green, northern-blue, azure, alaskan-blue, khaki, dark-olive,
+    soft-white, antique-white, yellow-gold, gold, camel, walnut, stone, pebble,
+    cocoa, coastal-gray, white, black, outer-space, graphite-grey, alto,
+    athens-gray, sonic-silver {
     &_active_hover_$(palette) {
       &:hover {
         & svg {

package/dist/css/components/Radio/Radio.css

@@ -184,16 +184,17 @@
   @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
     pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
     apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
-    pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
-    pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
-    beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
-    pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
-    deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
-    delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
-    pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
-    dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
-    stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
-    sonic-silver {
+    pink-sand, vintage-rose, grapefruit, light-pink, light-red, cream, almond,
+    mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
+    dark-green, green, spearmint, mint, beryl, light-green, light-sky, sea-foam,
+    turquoise, blue, light-blue, cerulean, surf-blue, pacific-green,
+    blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue, deep-navy,
+    midnight-blue, purple, ultra-violet, lilac, ocean-blue, delft-blue, indigo,
+    lavender-gray, lavender, mist-blue, storm-gray, cactus, pine-green,
+    cyprus-green, northern-blue, azure, alaskan-blue, khaki, dark-olive,
+    soft-white, antique-white, yellow-gold, gold, camel, walnut, stone, pebble,
+    cocoa, coastal-gray, white, black, outer-space, graphite-grey, alto,
+    athens-gray, sonic-silver {
     &_active_$(palette) {
       & .radio__state {
         background: var(--color-palette-$(palette));

package/dist/css/styles/border-color/border-color.css

@@ -79,16 +79,17 @@
     @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
       pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
       clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
-      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
-      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
-      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
+      rose-gold, pink-sand, vintage-rose, grapefruit, light-pink, light-red,
+      cream, almond, mellow-yellow, canary-yellow, pollen, flash-light,
+      lemon-cream, flash, dark-green, green, spearmint, mint, beryl,
+      light-green, light-sky, sea-foam, turquoise, blue, light-blue, cerulean,
       surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
       denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
       lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
       storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
       alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
       gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
-      alto, athens-gray, sonic-silver {
+      outer-space, graphite-grey, alto, athens-gray, sonic-silver {
       .border&_active_$(palette),
       &_active_$(palette) {
         border-width: 1px;

package/dist/css/styles/bundle.css

@@ -421,16 +421,17 @@ div.alignment {
     @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
       pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
       clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
-      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
-      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
-      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
+      rose-gold, pink-sand, vintage-rose, grapefruit, light-pink, light-red,
+      cream, almond, mellow-yellow, canary-yellow, pollen, flash-light,
+      lemon-cream, flash, dark-green, green, spearmint, mint, beryl,
+      light-green, light-sky, sea-foam, turquoise, blue, light-blue, cerulean,
       surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
       denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
       lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
       storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
       alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
       gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
-      alto, athens-gray, sonic-silver {
+      outer-space, graphite-grey, alto, athens-gray, sonic-silver {
       .border&_active_$(palette),
       &_active_$(palette) {
         border-width: 1px;
@@ -900,16 +901,17 @@ textarea.fill {
   @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
     pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
     apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
-    pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
-    pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
-    beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
-    pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
-    deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
-    delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
-    pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
-    dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
-    stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
-    sonic-silver {
+    pink-sand, vintage-rose, grapefruit, light-pink, light-red, cream, almond,
+    mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
+    dark-green, green, spearmint, mint, beryl, light-green, light-sky, sea-foam,
+    turquoise, blue, light-blue, cerulean, surf-blue, pacific-green,
+    blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue, deep-navy,
+    midnight-blue, purple, ultra-violet, lilac, ocean-blue, delft-blue, indigo,
+    lavender-gray, lavender, mist-blue, storm-gray, cactus, pine-green,
+    cyprus-green, northern-blue, azure, alaskan-blue, khaki, dark-olive,
+    soft-white, antique-white, yellow-gold, gold, camel, walnut, stone, pebble,
+    cocoa, coastal-gray, white, black, outer-space, graphite-grey, alto,
+    athens-gray, sonic-silver {
     &_$(palette) {
       background: var(--color-palette-$(palette));
       &-item {
@@ -1264,16 +1266,17 @@ textarea.fill {
     @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
       pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
       clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
-      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
-      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
-      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
+      rose-gold, pink-sand, vintage-rose, grapefruit, light-pink, light-red,
+      cream, almond, mellow-yellow, canary-yellow, pollen, flash-light,
+      lemon-cream, flash, dark-green, green, spearmint, mint, beryl,
+      light-green, light-sky, sea-foam, turquoise, blue, light-blue, cerulean,
       surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
       denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
       lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
       storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
       alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
       gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
-      alto, athens-gray, sonic-silver {
+      outer-space, graphite-grey, alto, athens-gray, sonic-silver {
       .text&_active_$(palette),
       &_active_$(palette) {
         color: var(--color-palette-$(palette));
@@ -1392,7 +1395,7 @@ textarea.fill {
 }
 .width {
   &_hug {
-    display: inline-flex;
+    display: inline-flex !important;
   }
   &_fill {
     width: 100%;

package/dist/css/styles/fill/fill.css

@@ -117,16 +117,17 @@ textarea.fill {
   @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
     pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
     apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
-    pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
-    pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
-    beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
-    pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
-    deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
-    delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
-    pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
-    dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
-    stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
-    sonic-silver {
+    pink-sand, vintage-rose, grapefruit, light-pink, light-red, cream, almond,
+    mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
+    dark-green, green, spearmint, mint, beryl, light-green, light-sky, sea-foam,
+    turquoise, blue, light-blue, cerulean, surf-blue, pacific-green,
+    blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue, deep-navy,
+    midnight-blue, purple, ultra-violet, lilac, ocean-blue, delft-blue, indigo,
+    lavender-gray, lavender, mist-blue, storm-gray, cactus, pine-green,
+    cyprus-green, northern-blue, azure, alaskan-blue, khaki, dark-olive,
+    soft-white, antique-white, yellow-gold, gold, camel, walnut, stone, pebble,
+    cocoa, coastal-gray, white, black, outer-space, graphite-grey, alto,
+    athens-gray, sonic-silver {
     &_$(palette) {
       background: var(--color-palette-$(palette));
       &-item {

package/dist/css/styles/text-color/text-color.css

@@ -53,16 +53,17 @@
     @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
       pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
       clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
-      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
-      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
-      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
+      rose-gold, pink-sand, vintage-rose, grapefruit, light-pink, light-red,
+      cream, almond, mellow-yellow, canary-yellow, pollen, flash-light,
+      lemon-cream, flash, dark-green, green, spearmint, mint, beryl,
+      light-green, light-sky, sea-foam, turquoise, blue, light-blue, cerulean,
       surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
       denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
       lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
       storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
       alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
       gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
-      alto, athens-gray, sonic-silver {
+      outer-space, graphite-grey, alto, athens-gray, sonic-silver {
       .text&_active_$(palette),
       &_active_$(palette) {
         color: var(--color-palette-$(palette));

package/dist/css/styles/width/width.css

@@ -1,6 +1,6 @@
 .width {
   &_hug {
-    display: inline-flex;
+    display: inline-flex !important;
   }
   &_fill {
     width: 100%;

package/dist/types/context/Notifications.d.ts

@@ -7,9 +7,9 @@ declare function useNotificationsAPI(): {
     showNotification: (notification: string | CreatedNotification, onClose?: SimpleCallback) => void;
     notificationStatuses: {
         error: string;
-        warning: string;
         info: string;
         success: string;
+        warning: string;
     };
 };
 export { NotificationsProvider, useNotifications, useNotificationsAPI };

package/dist/types/context/Notifications.interface.d.ts

@@ -1,7 +1,9 @@
+import React from 'react';
 import type { Id } from '@itcase/common';
 interface Notification {
     id: Id;
     _closeTimeout?: ReturnType<typeof setTimeout>;
+    after: React.ReactNode;
     closeByTime: number | false;
     status: 'error' | 'info' | 'success' | 'warning';
     text: string;
@@ -11,6 +13,7 @@ interface Notification {
 }
 interface CreatedNotification {
     id?: Notification['id'];
+    after?: Notification['after'];
     closeByTime?: Notification['closeByTime'];
     status?: Notification['status'];
     text?: Notification['text'];
@@ -27,4 +30,4 @@ interface NotificationsProviderProps {
      */
     isLogRequestsErrors: boolean;
 }
-export type { Notification, CreatedNotification, NotificationsProviderProps };
+export type { CreatedNotification, Notification, NotificationsProviderProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.8.137",
+  "version": "1.8.138",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",