@itcase/ui 1.8.141 → 1.8.142

package/dist/{Group_cjs_DxyobxPf.js → Group_cjs_CLE5_jDA.js}

@@ -24,13 +24,13 @@ const groupConfig = {
     },
 };
 const Group = React.forwardRef(function Group(props, ref) {
-    const { id, dataTestId, dataTour, className, easing, name, appearance, isDisabled, htmlFor, scroll, style, tag: Tag = 'div', isActive, onClick, onMouseDown, children, } = props;
+    const { id, appearance, className, dataTestId, dataTour, name, easing, htmlFor, scroll, style, tag: Tag = 'div', isActive, isDisabled, onClick, onMouseDown, children, } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, groupConfig);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { directionClass, flexGrowClass, justifyContentClass, alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, borderColorActiveClass, borderColorActiveHoverClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, textColorActiveClass, textColorClass, textColorHoverClass, columnsClass, elevationClass, heightClass, iconFillHoverClass, shapeClass, stackingClass, widthClass, wrapClass, } = propsGenerator;
     // @ts-expect-error
     const { styles: groupStyles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsx(Tag, { id: id, "data-test-id": dataTestId, "data-tour": dataTour, className: clsx(className, 'group', easing && `easing_${easing}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, columnsClass && `group_columns_${columnsClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, justifyContentClass && `justify-content_${justifyContentClass}`, textColorClass && `group_text-color_${textColorClass}`, textColorActiveClass &&
+    return (jsxRuntime.jsx(Tag, { id: id, className: clsx(className, 'group', easing && `easing_${easing}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, columnsClass && `group_columns_${columnsClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, justifyContentClass && `justify-content_${justifyContentClass}`, textColorClass && `group_text-color_${textColorClass}`, textColorActiveClass &&
             `group_text-color_active_${textColorActiveClass}`, textColorHoverClass && `group_text-color_hover_${textColorHoverClass}`, iconFillHoverClass && `group_icon_fill_hover_${iconFillHoverClass}`, !isDisabled
             ? !isActive
                 ? fillClass && `fill_${fillClass}`
@@ -51,7 +51,7 @@ const Group = React.forwardRef(function Group(props, ref) {
                     `border-color_hover_${borderColorHoverClass}`
                 : borderColorActiveHoverClass &&
                     `border-color_active_hover_${borderColorActiveHoverClass}`
-            : fillDisabledClass && `fill_${fillDisabledClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer'), name: name, ref: ref, htmlFor: htmlFor, style: Object.assign({}, groupStyles, style), onClick: onClick, onMouseDown: onMouseDown, children: children }));
+            : fillDisabledClass && `fill_${fillDisabledClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer'), name: name, ref: ref, "data-test-id": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: Object.assign({}, groupStyles, style), onClick: onClick, onMouseDown: onMouseDown, children: children }));
 });
 
 exports.Group = Group;

package/dist/{Group_es_DJ6GHMrs.js → Group_es_ZTwafPX1.js}

@@ -22,13 +22,13 @@ const groupConfig = {
     },
 };
 const Group = React.forwardRef(function Group(props, ref) {
-    const { id, dataTestId, dataTour, className, easing, name, appearance, isDisabled, htmlFor, scroll, style, tag: Tag = 'div', isActive, onClick, onMouseDown, children, } = props;
+    const { id, appearance, className, dataTestId, dataTour, name, easing, htmlFor, scroll, style, tag: Tag = 'div', isActive, isDisabled, onClick, onMouseDown, children, } = props;
     const appearanceConfig = useAppearanceConfig(appearance, groupConfig);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     const { directionClass, flexGrowClass, justifyContentClass, alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, borderColorActiveClass, borderColorActiveHoverClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, textColorActiveClass, textColorClass, textColorHoverClass, columnsClass, elevationClass, heightClass, iconFillHoverClass, shapeClass, stackingClass, widthClass, wrapClass, } = propsGenerator;
     // @ts-expect-error
     const { styles: groupStyles } = useStyles(props);
-    return (jsx(Tag, { id: id, "data-test-id": dataTestId, "data-tour": dataTour, className: clsx(className, 'group', easing && `easing_${easing}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, columnsClass && `group_columns_${columnsClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, justifyContentClass && `justify-content_${justifyContentClass}`, textColorClass && `group_text-color_${textColorClass}`, textColorActiveClass &&
+    return (jsx(Tag, { id: id, className: clsx(className, 'group', easing && `easing_${easing}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, columnsClass && `group_columns_${columnsClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, justifyContentClass && `justify-content_${justifyContentClass}`, textColorClass && `group_text-color_${textColorClass}`, textColorActiveClass &&
             `group_text-color_active_${textColorActiveClass}`, textColorHoverClass && `group_text-color_hover_${textColorHoverClass}`, iconFillHoverClass && `group_icon_fill_hover_${iconFillHoverClass}`, !isDisabled
             ? !isActive
                 ? fillClass && `fill_${fillClass}`
@@ -49,7 +49,7 @@ const Group = React.forwardRef(function Group(props, ref) {
                     `border-color_hover_${borderColorHoverClass}`
                 : borderColorActiveHoverClass &&
                     `border-color_active_hover_${borderColorActiveHoverClass}`
-            : fillDisabledClass && `fill_${fillDisabledClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer'), name: name, ref: ref, htmlFor: htmlFor, style: Object.assign({}, groupStyles, style), onClick: onClick, onMouseDown: onMouseDown, children: children }));
+            : fillDisabledClass && `fill_${fillDisabledClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer'), name: name, ref: ref, "data-test-id": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: Object.assign({}, groupStyles, style), onClick: onClick, onMouseDown: onMouseDown, children: children }));
 });
 
 export { Group as G, groupAppearance as a, groupConfig as g };

package/dist/cjs/components/AvatarStack.js

@@ -6,7 +6,7 @@ var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceCon
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
 var Avatar = require('../../Avatar_cjs_D-M9sW20.js');
-var Group = require('../../Group_cjs_DxyobxPf.js');
+var Group = require('../../Group_cjs_CLE5_jDA.js');
 var Text = require('../../Text_cjs_DaH5tVvz.js');
 require('react');
 require('lodash/camelCase');

package/dist/cjs/components/Group.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Group = require('../../Group_cjs_DxyobxPf.js');
+var Group = require('../../Group_cjs_CLE5_jDA.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');

package/dist/cjs/components/Notification.js

@@ -5,6 +5,7 @@ var clsx = require('clsx');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
+var Button = require('../../Button_cjs_CrbH_HYn.js');
 var Icon = require('../../Icon_cjs_DKzT-zmQ.js');
 var Text = require('../../Text_cjs_DaH5tVvz.js');
 var _default = require('@itcase/icons/default');
@@ -22,17 +23,18 @@ require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
+require('../../Link_cjs_qKXVfU8e.js');
+require('../../Loader_cjs_CRiUlTC3.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_qKXVfU8e.js');
 
 const notificationAppearanceDefault = {
     defaultPrimary: {
         fill: 'surfacePrimary',
         fillHover: 'surfacePrimaryHover',
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'l',
+        titleTextSize: 'xxl',
         descTextColor: 'surfaceTextPrimary',
         descTextSize: 'm',
         borderColor: 'surfaceBorderPrimary',
@@ -53,9 +55,9 @@ const notificationAppearanceError = {
         descTextSize: 'm',
         borderColor: 'errorBorderPrimary',
         textColor: 'errorTextPrimary',
-        iconSize: 20,
+        buttonAppearance: 'surfacePrimary sizeXXL solid rounded',
         closeIcon: _default.icons20.Action.Close,
-        closeIconFillIcon: 'errorItemPrimary',
+        closeIconAppearance: 'errorPrimary size_20_20 solid circular',
     },
 };
 
@@ -69,9 +71,10 @@ const notificationAppearanceInfo = {
         descTextSize: 'm',
         borderColor: 'infoBorderPrimary',
         textColor: 'infoTextPrimary',
+        buttonAppearance: 'surfacePrimary sizeXXL solid rounded',
         iconSize: 20,
         closeIcon: _default.icons20.Action.Close,
-        closeIconFillIcon: 'infoItemPrimary',
+        closeIconAppearance: 'infoPrimary size_20_20 solid circular',
     },
 };
 
@@ -101,9 +104,10 @@ const notificationAppearanceSuccess = {
         descTextSize: 'm',
         borderColor: 'successBorderPrimary',
         textColor: 'successTextPrimary',
+        buttonAppearance: 'surfacePrimary sizeXXL solid rounded',
         iconSize: 20,
         closeIcon: _default.icons20.Action.Close,
-        closeIconFillIcon: 'accentItemPrimary',
+        closeIconAppearance: 'successPrimary size_20_20 solid circular',
     },
 };
 
@@ -117,9 +121,10 @@ const notificationAppearanceWarning = {
         descTextSize: 'm',
         borderColor: 'surfaceBorderPrimary',
         textColor: 'warningTextPrimary',
+        buttonAppearance: 'surfacePrimary sizeXXL solid rounded',
         iconSize: 20,
         closeIcon: _default.icons20.Action.Close,
-        closeIconFillIcon: 'warningItemPrimary',
+        closeIconAppearance: 'warningPrimary size_20_20 solid circular',
     },
 };
 
@@ -140,24 +145,20 @@ const notificationConfig = {
     },
 };
 function Notification(props) {
-    const { id, appearance, className, dataTestId, dataTour, title, text, before, after, close, 
-    // type,
-    isSkeleton, onClickClose, } = props;
+    const { id, appearance, className, dataTestId, dataTour, title, text, float, global, toast, before, after, isSkeleton, onClickButton, 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;
+    const { fillClass, fillHoverClass, titleTextColor, titleTextSize, descTextColor, descTextSize, buttonAppearance, buttonLabel, elevationClass, widthClass, closeIcon, closeIconAppearance, 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 })), 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] }));
+    return (jsxRuntime.jsxs("div", { className: clsx('notification__item', float && 'notification__item_float', toast && 'notification__item_toast', global && 'notification__item_global', widthClass && `width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_${fillHoverClass}`, 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 })), onClickClose && (jsxRuntime.jsx(Icon.Icon, { appearance: closeIconAppearance, className: clsx('notification__item-close', 'cursor_type_pointer'), imageSrc: closeIconSrc, SvgImage: closeIcon, onClick: () => onClickClose && onClickClose(id) })), (onClickButton || buttonLabel) && (jsxRuntime.jsx(Button.Button, { appearance: buttonAppearance, className: "notification__item-button", width: "fill", label: buttonLabel, onClick: onClickButton }))] }), 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, 
-                // type={notification.type}
-                after: notification.after, close: close, onClickClose: hideNotifications }, i))) }) }));
+    const { className } = 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, buttonLabel: notification.buttonLabel, float: notification.float, global: notification.global, toast: notification.toast, after: notification.after, closeIcon: notification.closeIcon, closeIconSrc: notification.closeIconSrc, onClickButton: notification.onClickButton, onClickClose: hideNotifications }, i))) }) }));
 }
 
 exports.Notification = Notification;

package/dist/cjs/components/Response.js

@@ -9,7 +9,7 @@ var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceCon
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
 var Button = require('../../Button_cjs_CrbH_HYn.js');
-var Group = require('../../Group_cjs_DxyobxPf.js');
+var Group = require('../../Group_cjs_CLE5_jDA.js');
 var Text = require('../../Text_cjs_DaH5tVvz.js');
 require('@itcase/common');
 require('../context/UrlAssetPrefix.js');

package/dist/cjs/components/Select.js

@@ -6,7 +6,7 @@ var Icon = require('../../Icon_cjs_DKzT-zmQ.js');
 var React = require('react');
 var clsx = require('clsx');
 var CreatableSelect = require('react-select/creatable');
-var Group = require('../../Group_cjs_DxyobxPf.js');
+var Group = require('../../Group_cjs_CLE5_jDA.js');
 var Text = require('../../Text_cjs_DaH5tVvz.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');

package/dist/cjs/context/Notifications.js

@@ -122,11 +122,18 @@ function createNotification(notification, onClose) {
     let id = uuid.v4().split('-')[0];
     let title = '';
     let text = '';
+    let float = null;
+    let toast = null;
+    let global = null;
+    let closeIcon = '';
+    let closeIconSrc = '';
+    let buttonLabel = '';
     let status = STATUSES.warning;
-    // let appearance = STATUSES.appearance
     let closeByTime = 4500;
     let appearance = '';
     let after = null;
+    let closeIconAppearance = '';
+    let onClickButton = null;
     if (typeof notification === 'string') {
         text = notification;
     }
@@ -134,6 +141,15 @@ function createNotification(notification, onClose) {
         id = notification.id ?? id;
         title = notification.title ?? title;
         text = notification.text ?? text;
+        float = notification.float ?? float;
+        toast = notification.toast ?? toast;
+        closeIconAppearance =
+            notification.closeIconAppearance ?? closeIconAppearance;
+        global = notification.global ?? global;
+        closeIcon = notification.closeIcon ?? closeIcon;
+        closeIconSrc = notification.closeIconSrc ?? closeIconSrc;
+        buttonLabel = notification.buttonLabel ?? buttonLabel;
+        onClickButton = notification.onClickButton ?? onClickButton;
         status = notification.status ?? status;
         closeByTime = notification.closeByTime ?? closeByTime;
         after = notification.after ?? after;
@@ -158,8 +174,16 @@ function createNotification(notification, onClose) {
         title: title,
         status: status,
         text: text,
+        buttonLabel: buttonLabel,
+        float: float,
+        global: global,
+        toast: toast,
         after: after,
         closeByTime: closeByTime,
+        closeIcon: closeIcon,
+        closeIconAppearance: closeIconAppearance,
+        closeIconSrc: closeIconSrc,
+        onClickButton: onClickButton,
         onClose: onClose,
     };
 }

package/dist/components/AvatarStack.js

@@ -4,7 +4,7 @@ import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceC
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
 import { A as Avatar } from '../Avatar_es_BTvbT36l.js';
-import { G as Group } from '../Group_es_DJ6GHMrs.js';
+import { G as Group } from '../Group_es_ZTwafPX1.js';
 import { T as Text } from '../Text_es_RDU9GLCV.js';
 import 'react';
 import 'lodash/camelCase';

package/dist/components/Group.js

@@ -1,4 +1,4 @@
-export { G as Group, a as groupAppearance, g as groupConfig } from '../Group_es_DJ6GHMrs.js';
+export { G as Group, a as groupAppearance, g as groupConfig } from '../Group_es_ZTwafPX1.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/dist/components/Notification.js

@@ -3,6 +3,7 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
+import { B as Button } from '../Button_es_qNbDsXQg.js';
 import { I as Icon } from '../Icon_es_5JUPM7bP.js';
 import { T as Text } from '../Text_es_RDU9GLCV.js';
 import { icons20 } from '@itcase/icons/default';
@@ -20,17 +21,18 @@ import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
+import '../Link_es_P2b6ya7P.js';
+import '../Loader_es_Dq2-7sn2.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_P2b6ya7P.js';
 
 const notificationAppearanceDefault = {
     defaultPrimary: {
         fill: 'surfacePrimary',
         fillHover: 'surfacePrimaryHover',
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'l',
+        titleTextSize: 'xxl',
         descTextColor: 'surfaceTextPrimary',
         descTextSize: 'm',
         borderColor: 'surfaceBorderPrimary',
@@ -51,9 +53,9 @@ const notificationAppearanceError = {
         descTextSize: 'm',
         borderColor: 'errorBorderPrimary',
         textColor: 'errorTextPrimary',
-        iconSize: 20,
+        buttonAppearance: 'surfacePrimary sizeXXL solid rounded',
         closeIcon: icons20.Action.Close,
-        closeIconFillIcon: 'errorItemPrimary',
+        closeIconAppearance: 'errorPrimary size_20_20 solid circular',
     },
 };
 
@@ -67,9 +69,10 @@ const notificationAppearanceInfo = {
         descTextSize: 'm',
         borderColor: 'infoBorderPrimary',
         textColor: 'infoTextPrimary',
+        buttonAppearance: 'surfacePrimary sizeXXL solid rounded',
         iconSize: 20,
         closeIcon: icons20.Action.Close,
-        closeIconFillIcon: 'infoItemPrimary',
+        closeIconAppearance: 'infoPrimary size_20_20 solid circular',
     },
 };
 
@@ -99,9 +102,10 @@ const notificationAppearanceSuccess = {
         descTextSize: 'm',
         borderColor: 'successBorderPrimary',
         textColor: 'successTextPrimary',
+        buttonAppearance: 'surfacePrimary sizeXXL solid rounded',
         iconSize: 20,
         closeIcon: icons20.Action.Close,
-        closeIconFillIcon: 'accentItemPrimary',
+        closeIconAppearance: 'successPrimary size_20_20 solid circular',
     },
 };
 
@@ -115,9 +119,10 @@ const notificationAppearanceWarning = {
         descTextSize: 'm',
         borderColor: 'surfaceBorderPrimary',
         textColor: 'warningTextPrimary',
+        buttonAppearance: 'surfacePrimary sizeXXL solid rounded',
         iconSize: 20,
         closeIcon: icons20.Action.Close,
-        closeIconFillIcon: 'warningItemPrimary',
+        closeIconAppearance: 'warningPrimary size_20_20 solid circular',
     },
 };
 
@@ -138,24 +143,20 @@ const notificationConfig = {
     },
 };
 function Notification(props) {
-    const { id, appearance, className, dataTestId, dataTour, title, text, before, after, close, 
-    // type,
-    isSkeleton, onClickClose, } = props;
+    const { id, appearance, className, dataTestId, dataTour, title, text, float, global, toast, before, after, isSkeleton, onClickButton, 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;
+    const { fillClass, fillHoverClass, titleTextColor, titleTextSize, descTextColor, descTextSize, buttonAppearance, buttonLabel, elevationClass, widthClass, closeIcon, closeIconAppearance, 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 })), 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] }));
+    return (jsxs("div", { className: clsx('notification__item', float && 'notification__item_float', toast && 'notification__item_toast', global && 'notification__item_global', widthClass && `width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_${fillHoverClass}`, 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 })), onClickClose && (jsx(Icon, { appearance: closeIconAppearance, className: clsx('notification__item-close', 'cursor_type_pointer'), imageSrc: closeIconSrc, SvgImage: closeIcon, onClick: () => onClickClose && onClickClose(id) })), (onClickButton || buttonLabel) && (jsx(Button, { appearance: buttonAppearance, className: "notification__item-button", width: "fill", label: buttonLabel, onClick: onClickButton }))] }), 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, 
-                // type={notification.type}
-                after: notification.after, close: close, onClickClose: hideNotifications }, i))) }) }));
+    const { className } = 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, buttonLabel: notification.buttonLabel, float: notification.float, global: notification.global, toast: notification.toast, after: notification.after, closeIcon: notification.closeIcon, closeIconSrc: notification.closeIconSrc, onClickButton: notification.onClickButton, onClickClose: hideNotifications }, i))) }) }));
 }
 
 export { Notification, NotificationWrapper, notificationAppearance, notificationConfig };

package/dist/components/Response.js

@@ -7,7 +7,7 @@ import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceC
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
 import { B as Button } from '../Button_es_qNbDsXQg.js';
-import { G as Group } from '../Group_es_DJ6GHMrs.js';
+import { G as Group } from '../Group_es_ZTwafPX1.js';
 import { T as Text } from '../Text_es_RDU9GLCV.js';
 import '@itcase/common';
 import '../context/UrlAssetPrefix.js';

package/dist/components/Select.js

@@ -4,7 +4,7 @@ import { I as Icon, B as Badge } from '../Icon_es_5JUPM7bP.js';
 import React, { useRef, useEffect, useMemo } from 'react';
 import clsx from 'clsx';
 import CreatableSelect from 'react-select/creatable';
-import { G as Group } from '../Group_es_DJ6GHMrs.js';
+import { G as Group } from '../Group_es_ZTwafPX1.js';
 import { T as Text } from '../Text_es_RDU9GLCV.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';

package/dist/context/Notifications.js

@@ -120,11 +120,18 @@ function createNotification(notification, onClose) {
     let id = v4().split('-')[0];
     let title = '';
     let text = '';
+    let float = null;
+    let toast = null;
+    let global = null;
+    let closeIcon = '';
+    let closeIconSrc = '';
+    let buttonLabel = '';
     let status = STATUSES.warning;
-    // let appearance = STATUSES.appearance
     let closeByTime = 4500;
     let appearance = '';
     let after = null;
+    let closeIconAppearance = '';
+    let onClickButton = null;
     if (typeof notification === 'string') {
         text = notification;
     }
@@ -132,6 +139,15 @@ function createNotification(notification, onClose) {
         id = notification.id ?? id;
         title = notification.title ?? title;
         text = notification.text ?? text;
+        float = notification.float ?? float;
+        toast = notification.toast ?? toast;
+        closeIconAppearance =
+            notification.closeIconAppearance ?? closeIconAppearance;
+        global = notification.global ?? global;
+        closeIcon = notification.closeIcon ?? closeIcon;
+        closeIconSrc = notification.closeIconSrc ?? closeIconSrc;
+        buttonLabel = notification.buttonLabel ?? buttonLabel;
+        onClickButton = notification.onClickButton ?? onClickButton;
         status = notification.status ?? status;
         closeByTime = notification.closeByTime ?? closeByTime;
         after = notification.after ?? after;
@@ -156,8 +172,16 @@ function createNotification(notification, onClose) {
         title: title,
         status: status,
         text: text,
+        buttonLabel: buttonLabel,
+        float: float,
+        global: global,
+        toast: toast,
         after: after,
         closeByTime: closeByTime,
+        closeIcon: closeIcon,
+        closeIconAppearance: closeIconAppearance,
+        closeIconSrc: closeIconSrc,
+        onClickButton: onClickButton,
         onClose: onClose,
     };
 }

package/dist/css/components/Notification/Notification.css

@@ -8,93 +8,78 @@
     top: 0;
     right: 0;
     z-index: 1000;
+    @media (--mobile) {
+      left: 0;
+      top: inherit;
+      right: 0;
+      bottom: 0;
+    }
     ^&__wrapper {
       width: 100%;
       position: relative;
       display: flex;
       flex-flow: column nowrap;
       align-items: flex-end;
-      top: 20px;
-      right: 40px;
-      gap: 20px;
-      ^^&__item {
-        width: 320px;
+      top: 56px;
+      right: 48px;
+      gap: 24px;
+      @media (--mobile) {
+        align-items: center;
+        left: 0;
+        top: inherit;
+        right: 0;
+        bottom: 72px;
       }
     }
   }
 }
-.notification {
-  &&_float {
-    background: none;
-    padding: 0;
-    position: fixed;
-    top: 0;
-    right: 0;
-    z-index: 1000;
-    ^&__wrapper {
-      width: 100%;
-      position: relative;
+.notification__item {
+  &_float {
+    @mixin elevation-8;
+    ^&-wrapper {
+      padding: 12px;
       display: flex;
-      flex-flow: column nowrap;
-      align-items: flex-end;
-      top: 20px;
-      right: 40px;
-      gap: 20px;
-      ^^&__item {
-        width: 320px;
-      }
+      flex-direction: column;
     }
   }
 }
 .notification__item {
-  &_float {
+  &_toast {
     width: 100%;
-    border-radius: var(--notification-item-set-float-border-radius);
     @mixin elevation-8;
-    ^^&-wrapper {
-      padding: var(--notification-item-set-float-padding);
+    ^&-wrapper {
       display: flex;
       flex-direction: column;
-      gap: 4px;
     }
   }
 }
 .notification__item {
-  &_toast {
+  &_global {
     width: 100%;
-    background: var(--color-surface-fill-primary);
-    border-radius: var(--notification-item-set-toast-border-radius);
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
     @mixin elevation-8;
-    ^^&-wrapper {
-      padding: var(--notification-item-set-toast-padding);
+    ^&-wrapper {
       display: flex;
       flex-direction: column;
-      gap: 4px;
     }
   }
 }
 .notification__item {
-  min-width: 240px;
-  padding: 12px;
-  gap: 8px;
-  display: flex;
-  flex-direction: column;
+  width: 340px;
   &-wrapper {
-    display: grid;
-    grid-auto-rows: auto;
-    grid-template-columns: 1fr min-content;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
     ^&-title {
-      grid-row-start: 1;
     }
     ^&-text {
-      grid-row-start: 2;
+    }
+    ^&-button {
     }
     ^&-close {
-      grid-column-start: 2;
-      grid-row-start: 2 span;
+      position: absolute;
+      top: 12px;
+      right: 12px;
     }
   }
 }

package/dist/css/components/Notification/css/__item/notification__item.css

@@ -1,22 +1,20 @@
 .notification__item {
-  min-width: 240px;
-  padding: 12px;
-  gap: 8px;
-  display: flex;
-  flex-direction: column;
+  width: 340px;
   &-wrapper {
-    display: grid;
-    grid-auto-rows: auto;
-    grid-template-columns: 1fr min-content;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
     ^&-title {
-      grid-row-start: 1;
     }
     ^&-text {
-      grid-row-start: 2;
+    }
+    ^&-button {
     }
     ^&-close {
-      grid-column-start: 2;
-      grid-row-start: 2 span;
+      position: absolute;
+      top: 12px;
+      right: 12px;
     }
   }
 }

package/dist/css/components/Notification/css/__item/notification__item_float.css

@@ -0,0 +1,10 @@
+.notification__item {
+  &_float {
+    @mixin elevation-8;
+    ^&-wrapper {
+      padding: 12px;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}

package/dist/css/components/Notification/css/__item/notification__item_global.css

@@ -0,0 +1,10 @@
+.notification__item {
+  &_global {
+    width: 100%;
+    @mixin elevation-8;
+    ^&-wrapper {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}

package/dist/css/components/Notification/css/__item/notification__item_toast.css

@@ -0,0 +1,10 @@
+.notification__item {
+  &_toast {
+    width: 100%;
+    @mixin elevation-8;
+    ^&-wrapper {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}

package/dist/css/components/Swiper/Swiper.css

@@ -1,5 +1,5 @@
 /**
- * Swiper 12.0.1
+ * Swiper 12.0.2
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: September 11, 2025
+ * Released on: September 18, 2025
  */
 
 :root {
@@ -340,6 +340,25 @@
   display: none;
 }
 
+.swiper-button-prev,
+.swiper-button-next {
+  top: var(--swiper-navigation-top-offset, 50%);
+  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
+}
+
+.swiper-button-prev {
+  left: var(--swiper-navigation-sides-offset, 4px);
+  right: auto;
+  .swiper-navigation-icon {
+    transform: rotate(180deg);
+  }
+}
+
+.swiper-button-next {
+  right: var(--swiper-navigation-sides-offset, 4px);
+  left: auto;
+}
+
 .swiper-horizontal {
   .swiper-button-prev,
   .swiper-button-next,
@@ -347,6 +366,7 @@
   ~ .swiper-button-next {
     top: var(--swiper-navigation-top-offset, 50%);
     margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
+    margin-left: 0;
   }
   .swiper-button-prev,
   & ~ .swiper-button-prev,
@@ -384,19 +404,25 @@
   ~ .swiper-button-prev,
   ~ .swiper-button-next {
     left: var(--swiper-navigation-top-offset, 50%);
+    right: auto;
     margin-left: calc(0px - (var(--swiper-navigation-size) / 2));
+    margin-top: 0;
   }
   .swiper-button-prev,
   ~ .swiper-button-prev {
     top: var(--swiper-navigation-sides-offset, 4px);
     bottom: auto;
-    transform: rotate(-90deg);
+    .swiper-navigation-icon {
+      transform: rotate(-90deg);
+    }
   }
   .swiper-button-next,
   ~ .swiper-button-next {
     bottom: var(--swiper-navigation-sides-offset, 4px);
     top: auto;
-    transform: rotate(90deg);
+    .swiper-navigation-icon {
+      transform: rotate(90deg);
+    }
   }
 }
 

package/dist/types/components/Notification/appearance/notificationError.d.ts

@@ -8,9 +8,9 @@ declare const notificationAppearanceError: {
         descTextSize: string;
         borderColor: string;
         textColor: string;
-        iconSize: number;
+        buttonAppearance: string;
         closeIcon: string;
-        closeIconFillIcon: string;
+        closeIconAppearance: string;
     };
 };
 export { notificationAppearanceError };

package/dist/types/components/Notification/appearance/notificationInfo.d.ts

@@ -8,9 +8,10 @@ declare const notificationAppearanceInfo: {
         descTextSize: string;
         borderColor: string;
         textColor: string;
+        buttonAppearance: string;
         iconSize: number;
         closeIcon: string;
-        closeIconFillIcon: string;
+        closeIconAppearance: string;
     };
 };
 export { notificationAppearanceInfo };

package/dist/types/components/Notification/appearance/notificationSuccess.d.ts

@@ -8,9 +8,10 @@ declare const notificationAppearanceSuccess: {
         descTextSize: string;
         borderColor: string;
         textColor: string;
+        buttonAppearance: string;
         iconSize: number;
         closeIcon: string;
-        closeIconFillIcon: string;
+        closeIconAppearance: string;
     };
 };
 export { notificationAppearanceSuccess };

package/dist/types/components/Notification/appearance/notificationWarning.d.ts

@@ -8,9 +8,10 @@ declare const notificationAppearanceWarning: {
         descTextSize: string;
         borderColor: string;
         textColor: string;
+        buttonAppearance: string;
         iconSize: number;
         closeIcon: string;
-        closeIconFillIcon: string;
+        closeIconAppearance: string;
     };
 };
 export { notificationAppearanceWarning };

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

@@ -4,21 +4,35 @@ interface Notification {
     id: Id;
     _closeTimeout?: ReturnType<typeof setTimeout>;
     after: React.ReactNode;
+    buttonLabel: string;
     closeByTime: number | false;
+    closeIcon?: string;
+    closeIconSrc?: string;
+    float?: boolean;
+    global?: boolean;
     status: 'error' | 'info' | 'success' | 'warning';
     text: string;
     textColor: string;
     title: string;
+    toast?: boolean;
+    onClickButton?: () => void;
     onClose?: () => void;
 }
 interface CreatedNotification {
     id?: Notification['id'];
     after?: Notification['after'];
+    buttonLabel?: Notification['buttonLabel'];
     closeByTime?: Notification['closeByTime'];
+    closeIcon?: Notification['closeIcon'];
+    closeIconSrc?: Notification['closeIconSrc'];
+    float?: Notification['float'];
+    global?: Notification['global'];
     status?: Notification['status'];
     text?: Notification['text'];
     textColor?: Notification['textColor'];
     title?: Notification['title'];
+    toast?: Notification['toast'];
+    onClickButton?: Notification['onClickButton'];
     onClose?: Notification['onClose'];
 }
 interface NotificationsProviderProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.8.141",
+  "version": "1.8.142",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -103,17 +103,17 @@
     "@emotion/is-prop-valid": "^1.4.0",
     "@itcase/common": "^1.2.32",
     "@itcase/icons": "^1.2.23",
-    "@itcase/storybook-config": "^1.2.11",
-    "@itcase/tokens-am": "^1.1.19",
+    "@itcase/storybook-config": "^1.2.12",
+    "@itcase/tokens-am": "^1.1.20",
     "@itcase/tokens-baikal": "^1.1.17",
-    "@itcase/tokens-palette": "^1.1.11",
+    "@itcase/tokens-palette": "^1.1.20",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
-    "framer-motion": "^12.23.12",
+    "framer-motion": "^12.23.18",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
     "luxon": "^3.7.2",
-    "motion": "^12.23.12",
+    "motion": "^12.23.18",
     "rc-slider": "^11.1.9",
     "react": "^18.3.1",
     "react-dadata": "^2.27.4",
@@ -130,7 +130,7 @@
     "react-scrollbars-custom": "^4.1.1",
     "react-select": "^5.10.2",
     "simplebar-react": "^3.3.2",
-    "swiper": "^12.0.1",
+    "swiper": "^12.0.2",
     "uuid": "^13.0.0"
   },
   "devDependencies": {
@@ -140,7 +140,7 @@
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
     "@itcase/config": "^1.0.57",
-    "@itcase/lint": "^1.1.62",
+    "@itcase/lint": "^1.1.67",
     "@itcase/types": "^1.0.45",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^6.0.4",
@@ -160,24 +160,24 @@
     "@types/react-datepicker": "^7.0.0",
     "@types/react-dom": "^19.0.2",
     "@types/react-scroll": "^1.8.10",
-    "@types/uuid": "^10.0.0",
+    "@types/uuid": "^11.0.0",
     "babel-loader": "^10.0.0",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-react-docgen": "^4.2.1",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "conventional-changelog-conventionalcommits": "^9.1.0",
-    "eslint": "9.35.0",
+    "eslint": "9.36.0",
     "husky": "^9.1.7",
-    "lint-staged": "^16.1.6",
+    "lint-staged": "^16.2.0",
     "prettier": "^3.6.2",
     "react-docgen-typescript": "^2.4.0",
-    "rollup": "^4.50.2",
+    "rollup": "^4.52.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.2.3",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-preserve-directives": "^1.1.3",
-    "semantic-release": "^24.2.8",
-    "storybook": "^9.1.6",
+    "semantic-release": "^24.2.9",
+    "storybook": "^9.1.7",
     "stylelint": "^16.24.0",
     "typescript": "^5.9.2"
   }

package/dist/css/components/Notification/css/__item/notification__item_position_float.css

@@ -1,13 +0,0 @@
-.notification__item {
-  &_float {
-    width: 100%;
-    border-radius: var(--notification-item-set-float-border-radius);
-    @mixin elevation-8;
-    ^^&-wrapper {
-      padding: var(--notification-item-set-float-padding);
-      display: flex;
-      flex-direction: column;
-      gap: 4px;
-    }
-  }
-}

package/dist/css/components/Notification/css/__item/notification__item_position_toast.css

@@ -1,17 +0,0 @@
-.notification__item {
-  &_toast {
-    width: 100%;
-    background: var(--color-surface-fill-primary);
-    border-radius: var(--notification-item-set-toast-border-radius);
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-    @mixin elevation-8;
-    ^^&-wrapper {
-      padding: var(--notification-item-set-toast-padding);
-      display: flex;
-      flex-direction: column;
-      gap: 4px;
-    }
-  }
-}