@alfalab/core-components 42.0.0-beta.1 → 42.0.0-beta.2

package/navigation-bar/index.css

@@ -18,26 +18,26 @@
     --gap-s: 12px;
 } :root {
 } :root {
-} .navigation-bar__header_1f6jz {
+} .navigation-bar__header_czwt4 {
     width: 100%;
     box-sizing: border-box;
     transition: box-shadow 0.2s ease, background 0.2s ease
-} .navigation-bar__header_1f6jz.navigation-bar__header_1f6jz.navigation-bar__backgroundImage_1f6jz {
+} .navigation-bar__header_czwt4.navigation-bar__header_czwt4.navigation-bar__backgroundImage_czwt4 {
         background-repeat: no-repeat;
         background-position: center;
         background-size: cover;
-    } .navigation-bar__mainLine_1f6jz {
+    } .navigation-bar__mainLine_czwt4 {
     display: flex;
     align-items: stretch;
     justify-content: space-between;
     z-index: 1;
     background-color: inherit;
-} .navigation-bar__mainLineSticky_1f6jz {
+} .navigation-bar__mainLineSticky_czwt4 {
     position: sticky;
     top: 0;
-} .navigation-bar__mainLineWithImageBg_1f6jz {
+} .navigation-bar__mainLineWithImageBg_czwt4 {
     background-color: initial;
-} .navigation-bar__content_1f6jz {
+} .navigation-bar__content_czwt4 {
     color: var(--color-light-text-primary);
     display: flex;
     flex-flow: column nowrap;
@@ -46,27 +46,27 @@
     align-self: baseline;
     box-sizing: border-box;
     min-height: 48px
-} .navigation-bar__content_1f6jz.navigation-bar__withBothAddons_1f6jz,
-    .navigation-bar__content_1f6jz.navigation-bar__withCompactTitle_1f6jz {
+} .navigation-bar__content_czwt4.navigation-bar__withBothAddons_czwt4,
+    .navigation-bar__content_czwt4.navigation-bar__withCompactTitle_czwt4 {
         font-size: 16px;
         line-height: 20px;
         font-weight: 500;
         align-self: center;
         padding-top: var(--gap-2xs);
         padding-bottom: var(--gap-2xs)
-    } .navigation-bar__content_1f6jz.navigation-bar__withBothAddons_1f6jz > .navigation-bar__children_1f6jz,
-        .navigation-bar__content_1f6jz.navigation-bar__withBothAddons_1f6jz > .navigation-bar__title_1f6jz,
-        .navigation-bar__content_1f6jz.navigation-bar__withCompactTitle_1f6jz > .navigation-bar__children_1f6jz,
-        .navigation-bar__content_1f6jz.navigation-bar__withCompactTitle_1f6jz > .navigation-bar__title_1f6jz {
+    } .navigation-bar__content_czwt4.navigation-bar__withBothAddons_czwt4 > .navigation-bar__children_czwt4,
+        .navigation-bar__content_czwt4.navigation-bar__withBothAddons_czwt4 > .navigation-bar__title_czwt4,
+        .navigation-bar__content_czwt4.navigation-bar__withCompactTitle_czwt4 > .navigation-bar__children_czwt4,
+        .navigation-bar__content_czwt4.navigation-bar__withCompactTitle_czwt4 > .navigation-bar__title_czwt4 {
             -webkit-line-clamp: 1;
             word-break: break-all;
-        } .navigation-bar__content_1f6jz.navigation-bar__contentOnBotDesktop_1f6jz.navigation-bar__contentOnBotDesktop_1f6jz {
+        } .navigation-bar__content_czwt4.navigation-bar__contentOnBotDesktop_czwt4.navigation-bar__contentOnBotDesktop_czwt4 {
         padding-top: var(--gap-s);
-    } .navigation-bar__content_1f6jz.navigation-bar__contentOnBotMobile_1f6jz.navigation-bar__contentOnBotMobile_1f6jz {
+    } .navigation-bar__content_czwt4.navigation-bar__contentOnBotMobile_czwt4.navigation-bar__contentOnBotMobile_czwt4 {
         padding-top: var(--gap-s);
-    } .navigation-bar__title_1f6jz {
+    } .navigation-bar__title_czwt4 {
     word-break: break-word;
-} .navigation-bar__subtitle_1f6jz {
+} .navigation-bar__subtitle_czwt4 {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
@@ -77,11 +77,11 @@
 
     color: var(--color-light-text-secondary);
     word-break: break-all;
-} .navigation-bar__addonsWrapper_1f6jz {
+} .navigation-bar__addonsWrapper_czwt4 {
     display: flex;
-} .navigation-bar__rightAddons_1f6jz {
+} .navigation-bar__rightAddons_czwt4 {
     margin-left: auto;
-} .navigation-bar__addon_1f6jz {
+} .navigation-bar__addon_czwt4 {
     min-width: 48px;
     height: 48px;
     display: flex;
@@ -89,18 +89,18 @@
     align-items: center;
     flex-shrink: 0;
     pointer-events: all;
-} .navigation-bar__bottomAddons_1f6jz {
+} .navigation-bar__bottomAddons_czwt4 {
     pointer-events: all;
-} .navigation-bar__closer_1f6jz {
+} .navigation-bar__closer_czwt4 {
     margin-left: auto;
-} .navigation-bar__left_1f6jz {
+} .navigation-bar__left_czwt4 {
     text-align: left;
-} .navigation-bar__center_1f6jz {
+} .navigation-bar__center_czwt4 {
     text-align: center;
-} .navigation-bar__trim_1f6jz {
+} .navigation-bar__trim_czwt4 {
     overflow: hidden
-} .navigation-bar__trim_1f6jz .navigation-bar__title_1f6jz,
-    .navigation-bar__trim_1f6jz .navigation-bar__children_1f6jz {
+} .navigation-bar__trim_czwt4 .navigation-bar__title_czwt4,
+    .navigation-bar__trim_czwt4 .navigation-bar__children_czwt4 {
         -webkit-line-clamp: 2;
         display: -webkit-box;
         -webkit-box-orient: vertical;

package/navigation-bar/index.js

@@ -9,7 +9,7 @@ require('classnames');
 require('../shared');
 require('@alfalab/hooks');
 require('./components/back-arrow-addon/Component.js');
-require('../button');
+require('../button/desktop');
 require('../typography');
 require('@alfalab/icons-glyph/ArrowLeftMediumMIcon');
 require('@alfalab/icons-glyph/ArrowLeftMIcon');

package/navigation-bar/modern/Component.js

@@ -5,7 +5,7 @@ import { getDataTestId } from '../../shared/modern';
 import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
 import { BackArrowAddon } from './components/back-arrow-addon/Component.js';
 import { Closer } from './components/closer/Component.js';
-import '../../button/modern';
+import '../../button/modern/desktop';
 import '../../typography/modern';
 import '@alfalab/icons-glyph/ArrowLeftMediumMIcon';
 import '@alfalab/icons-glyph/ArrowLeftMIcon';
@@ -13,7 +13,7 @@ import '../../icon-button/modern';
 import '@alfalab/icons-glyph/CrossHeavyMIcon';
 import '@alfalab/icons-glyph/CrossMIcon';
 
-const styles = {"header":"navigation-bar__header_1f6jz","backgroundImage":"navigation-bar__backgroundImage_1f6jz","mainLine":"navigation-bar__mainLine_1f6jz","mainLineSticky":"navigation-bar__mainLineSticky_1f6jz","mainLineWithImageBg":"navigation-bar__mainLineWithImageBg_1f6jz","content":"navigation-bar__content_1f6jz","withBothAddons":"navigation-bar__withBothAddons_1f6jz","withCompactTitle":"navigation-bar__withCompactTitle_1f6jz","children":"navigation-bar__children_1f6jz","title":"navigation-bar__title_1f6jz","contentOnBotDesktop":"navigation-bar__contentOnBotDesktop_1f6jz","contentOnBotMobile":"navigation-bar__contentOnBotMobile_1f6jz","subtitle":"navigation-bar__subtitle_1f6jz","addonsWrapper":"navigation-bar__addonsWrapper_1f6jz","rightAddons":"navigation-bar__rightAddons_1f6jz","addon":"navigation-bar__addon_1f6jz","bottomAddons":"navigation-bar__bottomAddons_1f6jz","closer":"navigation-bar__closer_1f6jz","left":"navigation-bar__left_1f6jz","center":"navigation-bar__center_1f6jz","trim":"navigation-bar__trim_1f6jz"};
+const styles = {"header":"navigation-bar__header_czwt4","backgroundImage":"navigation-bar__backgroundImage_czwt4","mainLine":"navigation-bar__mainLine_czwt4","mainLineSticky":"navigation-bar__mainLineSticky_czwt4","mainLineWithImageBg":"navigation-bar__mainLineWithImageBg_czwt4","content":"navigation-bar__content_czwt4","withBothAddons":"navigation-bar__withBothAddons_czwt4","withCompactTitle":"navigation-bar__withCompactTitle_czwt4","children":"navigation-bar__children_czwt4","title":"navigation-bar__title_czwt4","contentOnBotDesktop":"navigation-bar__contentOnBotDesktop_czwt4","contentOnBotMobile":"navigation-bar__contentOnBotMobile_czwt4","subtitle":"navigation-bar__subtitle_czwt4","addonsWrapper":"navigation-bar__addonsWrapper_czwt4","rightAddons":"navigation-bar__rightAddons_czwt4","addon":"navigation-bar__addon_czwt4","bottomAddons":"navigation-bar__bottomAddons_czwt4","closer":"navigation-bar__closer_czwt4","left":"navigation-bar__left_czwt4","center":"navigation-bar__center_czwt4","trim":"navigation-bar__trim_czwt4"};
 require('./index.css');
 
 /* eslint-disable complexity */

package/navigation-bar/modern/components/back-arrow-addon/Component.js

@@ -1,16 +1,16 @@
 import React from 'react';
 import cn from 'classnames';
-import { Button } from '../../../../button/modern';
+import { ButtonDesktop } from '../../../../button/modern/desktop';
 import { Typography } from '../../../../typography/modern';
 import { ArrowLeftMediumMIcon } from '@alfalab/icons-glyph/ArrowLeftMediumMIcon';
 import { ArrowLeftMIcon } from '@alfalab/icons-glyph/ArrowLeftMIcon';
 
-const styles = {"component":"navigation-bar__component_1yjsu","mobileComponent":"navigation-bar__mobileComponent_1yjsu","flex":"navigation-bar__flex_1yjsu","iconWrapper":"navigation-bar__iconWrapper_1yjsu","text":"navigation-bar__text_1yjsu","mobileWrapper":"navigation-bar__mobileWrapper_1yjsu"};
+const styles = {"component":"navigation-bar__component_11pby","mobileComponent":"navigation-bar__mobileComponent_11pby","flex":"navigation-bar__flex_11pby","iconWrapper":"navigation-bar__iconWrapper_11pby","text":"navigation-bar__text_11pby","mobileWrapper":"navigation-bar__mobileWrapper_11pby"};
 require('./index.css');
 
 const BackArrowAddon = ({ text = 'Назад', onClick, className, textOpacity = 1, view, ...htmlAttributes }) => {
     const Icon = view === 'desktop' ? ArrowLeftMediumMIcon : ArrowLeftMIcon;
-    return (React.createElement(Button, { view: 'ghost', size: view === 'mobile' ? 'xxs' : 's', onClick: onClick, "aria-label": '\u043D\u0430\u0437\u0430\u0434', className: cn(styles.component, { [styles.mobileComponent]: view === 'mobile' }, className), ...htmlAttributes },
+    return (React.createElement(ButtonDesktop, { view: 'ghost', size: view === 'mobile' ? 'xxs' : 's', onClick: onClick, "aria-label": '\u043D\u0430\u0437\u0430\u0434', className: cn(styles.component, { [styles.mobileComponent]: view === 'mobile' }, className), ...htmlAttributes },
         React.createElement("div", { className: styles.flex },
             React.createElement("div", { className: cn(styles.iconWrapper, {
                     [styles.mobileWrapper]: view === 'mobile',

package/navigation-bar/modern/components/back-arrow-addon/index.css

@@ -24,46 +24,46 @@
     --gap-s: 12px;
 } :root {
 } :root {
-} .navigation-bar__component_1yjsu {
+} .navigation-bar__component_11pby {
     height: 100%;
     background: var(--color-light-bg-primary-alpha-40);
     -webkit-backdrop-filter: blur(10px);
             backdrop-filter: blur(10px);
     border-radius: var(--border-radius-pill)
-} .navigation-bar__component_1yjsu svg > path {
+} .navigation-bar__component_11pby svg > path {
         transition: fill 0.2s ease;
         fill: var(--color-light-graphic-primary);
-    } .navigation-bar__component_1yjsu:hover svg > path {
+    } .navigation-bar__component_11pby:hover svg > path {
             fill: var(--color-light-graphic-primary-tint-20);
-        } .navigation-bar__component_1yjsu:active svg > path {
+        } .navigation-bar__component_11pby:active svg > path {
             fill: var(--color-light-graphic-primary-tint-30);
-        } .navigation-bar__mobileComponent_1yjsu {
+        } .navigation-bar__mobileComponent_11pby {
     height: 32px;
     margin: 0 var(--gap-xs);
     -webkit-backdrop-filter: none;
             backdrop-filter: none;
     background: none;
-} .navigation-bar__flex_1yjsu {
+} .navigation-bar__flex_11pby {
     display: flex;
     align-items: center;
-} .navigation-bar__iconWrapper_1yjsu {
+} .navigation-bar__iconWrapper_11pby {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     height: 48px;
     margin: 0 var(--gap-xs) 0 var(--gap-s);
     border-radius: var(--border-radius-circle)
-} .navigation-bar__iconWrapper_1yjsu + .navigation-bar__text_1yjsu {
+} .navigation-bar__iconWrapper_11pby + .navigation-bar__text_11pby {
         margin-right: var(--gap-s);
-    } .navigation-bar__mobileWrapper_1yjsu {
+    } .navigation-bar__mobileWrapper_11pby {
     width: 32px;
     height: 32px;
     background: var(--color-light-specialbg-secondary-transparent);
     -webkit-backdrop-filter: blur(10px);
             backdrop-filter: blur(10px);
     margin: 0
-} .navigation-bar__mobileWrapper_1yjsu + .navigation-bar__text_1yjsu {
+} .navigation-bar__mobileWrapper_11pby + .navigation-bar__text_11pby {
         margin: 0 var(--gap-s) 0 var(--gap-xs);
-    } .navigation-bar__mobileWrapper_1yjsu svg > path {
+    } .navigation-bar__mobileWrapper_11pby svg > path {
         fill: var(--color-light-graphic-secondary);
     }

package/navigation-bar/modern/components/back-arrow-addon/index.js

@@ -1,7 +1,7 @@
 export { BackArrowAddon } from './Component.js';
 import 'react';
 import 'classnames';
-import '../../../../button/modern';
+import '../../../../button/modern/desktop';
 import '../../../../typography/modern';
 import '@alfalab/icons-glyph/ArrowLeftMediumMIcon';
 import '@alfalab/icons-glyph/ArrowLeftMIcon';

package/navigation-bar/modern/components/closer/Component.js

@@ -4,7 +4,7 @@ import { IconButton } from '../../../../icon-button/modern';
 import { CrossHeavyMIcon } from '@alfalab/icons-glyph/CrossHeavyMIcon';
 import { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';
 
-const styles = {"closer":"navigation-bar__closer_an1be","button":"navigation-bar__button_an1be","mobile":"navigation-bar__mobile_an1be","sticky":"navigation-bar__sticky_an1be"};
+const styles = {"closer":"navigation-bar__closer_17hi7","button":"navigation-bar__button_17hi7","mobile":"navigation-bar__mobile_17hi7","sticky":"navigation-bar__sticky_17hi7"};
 require('./index.css');
 
 const Closer = ({ view, className, sticky, icon = view === 'desktop' ? CrossHeavyMIcon : CrossMIcon, dataTestId, onClose, ...restProps }) => {

package/navigation-bar/modern/components/closer/index.css

@@ -21,7 +21,7 @@
 } :root {
     /* closer-mobile */
     --navigation-bar-closer-mobile-color: var(--color-light-graphic-secondary);
-} .navigation-bar__closer_an1be {
+} .navigation-bar__closer_17hi7 {
     flex-shrink: 0;
     width: 48px;
     height: 48px;
@@ -29,16 +29,16 @@
     display: flex;
     align-items: center;
     justify-content: center;
-} .navigation-bar__button_an1be {
+} .navigation-bar__button_17hi7 {
     background: var(--color-light-bg-primary-alpha-40);
     -webkit-backdrop-filter: blur(10px);
             backdrop-filter: blur(10px);
     border-radius: 50px;
     color: var(--color-light-graphic-primary)
-} .navigation-bar__button_an1be.navigation-bar__mobile_an1be {
+} .navigation-bar__button_17hi7.navigation-bar__mobile_17hi7 {
         background: var(--color-light-specialbg-secondary-transparent);
         color: var(--navigation-bar-closer-mobile-color);
-    } .navigation-bar__sticky_an1be {
+    } .navigation-bar__sticky_17hi7 {
     position: sticky;
     top: 0;
 }

package/navigation-bar/modern/index.css

@@ -18,26 +18,26 @@
     --gap-s: 12px;
 } :root {
 } :root {
-} .navigation-bar__header_1f6jz {
+} .navigation-bar__header_czwt4 {
     width: 100%;
     box-sizing: border-box;
     transition: box-shadow 0.2s ease, background 0.2s ease
-} .navigation-bar__header_1f6jz.navigation-bar__header_1f6jz.navigation-bar__backgroundImage_1f6jz {
+} .navigation-bar__header_czwt4.navigation-bar__header_czwt4.navigation-bar__backgroundImage_czwt4 {
         background-repeat: no-repeat;
         background-position: center;
         background-size: cover;
-    } .navigation-bar__mainLine_1f6jz {
+    } .navigation-bar__mainLine_czwt4 {
     display: flex;
     align-items: stretch;
     justify-content: space-between;
     z-index: 1;
     background-color: inherit;
-} .navigation-bar__mainLineSticky_1f6jz {
+} .navigation-bar__mainLineSticky_czwt4 {
     position: sticky;
     top: 0;
-} .navigation-bar__mainLineWithImageBg_1f6jz {
+} .navigation-bar__mainLineWithImageBg_czwt4 {
     background-color: initial;
-} .navigation-bar__content_1f6jz {
+} .navigation-bar__content_czwt4 {
     color: var(--color-light-text-primary);
     display: flex;
     flex-flow: column nowrap;
@@ -46,27 +46,27 @@
     align-self: baseline;
     box-sizing: border-box;
     min-height: 48px
-} .navigation-bar__content_1f6jz.navigation-bar__withBothAddons_1f6jz,
-    .navigation-bar__content_1f6jz.navigation-bar__withCompactTitle_1f6jz {
+} .navigation-bar__content_czwt4.navigation-bar__withBothAddons_czwt4,
+    .navigation-bar__content_czwt4.navigation-bar__withCompactTitle_czwt4 {
         font-size: 16px;
         line-height: 20px;
         font-weight: 500;
         align-self: center;
         padding-top: var(--gap-2xs);
         padding-bottom: var(--gap-2xs)
-    } .navigation-bar__content_1f6jz.navigation-bar__withBothAddons_1f6jz > .navigation-bar__children_1f6jz,
-        .navigation-bar__content_1f6jz.navigation-bar__withBothAddons_1f6jz > .navigation-bar__title_1f6jz,
-        .navigation-bar__content_1f6jz.navigation-bar__withCompactTitle_1f6jz > .navigation-bar__children_1f6jz,
-        .navigation-bar__content_1f6jz.navigation-bar__withCompactTitle_1f6jz > .navigation-bar__title_1f6jz {
+    } .navigation-bar__content_czwt4.navigation-bar__withBothAddons_czwt4 > .navigation-bar__children_czwt4,
+        .navigation-bar__content_czwt4.navigation-bar__withBothAddons_czwt4 > .navigation-bar__title_czwt4,
+        .navigation-bar__content_czwt4.navigation-bar__withCompactTitle_czwt4 > .navigation-bar__children_czwt4,
+        .navigation-bar__content_czwt4.navigation-bar__withCompactTitle_czwt4 > .navigation-bar__title_czwt4 {
             -webkit-line-clamp: 1;
             word-break: break-all;
-        } .navigation-bar__content_1f6jz.navigation-bar__contentOnBotDesktop_1f6jz.navigation-bar__contentOnBotDesktop_1f6jz {
+        } .navigation-bar__content_czwt4.navigation-bar__contentOnBotDesktop_czwt4.navigation-bar__contentOnBotDesktop_czwt4 {
         padding-top: var(--gap-s);
-    } .navigation-bar__content_1f6jz.navigation-bar__contentOnBotMobile_1f6jz.navigation-bar__contentOnBotMobile_1f6jz {
+    } .navigation-bar__content_czwt4.navigation-bar__contentOnBotMobile_czwt4.navigation-bar__contentOnBotMobile_czwt4 {
         padding-top: var(--gap-s);
-    } .navigation-bar__title_1f6jz {
+    } .navigation-bar__title_czwt4 {
     word-break: break-word;
-} .navigation-bar__subtitle_1f6jz {
+} .navigation-bar__subtitle_czwt4 {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
@@ -77,11 +77,11 @@
 
     color: var(--color-light-text-secondary);
     word-break: break-all;
-} .navigation-bar__addonsWrapper_1f6jz {
+} .navigation-bar__addonsWrapper_czwt4 {
     display: flex;
-} .navigation-bar__rightAddons_1f6jz {
+} .navigation-bar__rightAddons_czwt4 {
     margin-left: auto;
-} .navigation-bar__addon_1f6jz {
+} .navigation-bar__addon_czwt4 {
     min-width: 48px;
     height: 48px;
     display: flex;
@@ -89,18 +89,18 @@
     align-items: center;
     flex-shrink: 0;
     pointer-events: all;
-} .navigation-bar__bottomAddons_1f6jz {
+} .navigation-bar__bottomAddons_czwt4 {
     pointer-events: all;
-} .navigation-bar__closer_1f6jz {
+} .navigation-bar__closer_czwt4 {
     margin-left: auto;
-} .navigation-bar__left_1f6jz {
+} .navigation-bar__left_czwt4 {
     text-align: left;
-} .navigation-bar__center_1f6jz {
+} .navigation-bar__center_czwt4 {
     text-align: center;
-} .navigation-bar__trim_1f6jz {
+} .navigation-bar__trim_czwt4 {
     overflow: hidden
-} .navigation-bar__trim_1f6jz .navigation-bar__title_1f6jz,
-    .navigation-bar__trim_1f6jz .navigation-bar__children_1f6jz {
+} .navigation-bar__trim_czwt4 .navigation-bar__title_czwt4,
+    .navigation-bar__trim_czwt4 .navigation-bar__children_czwt4 {
         -webkit-line-clamp: 2;
         display: -webkit-box;
         -webkit-box-orient: vertical;

package/navigation-bar/modern/index.js

@@ -6,7 +6,7 @@ import 'classnames';
 import '../../shared/modern';
 import '@alfalab/hooks';
 import './components/back-arrow-addon/Component.js';
-import '../../button/modern';
+import '../../button/modern/desktop';
 import '../../typography/modern';
 import '@alfalab/icons-glyph/ArrowLeftMediumMIcon';
 import '@alfalab/icons-glyph/ArrowLeftMIcon';

package/notification/Component.d.ts

@@ -40,24 +40,8 @@ type NotificationProps = ToastPlateProps & {
      */
     onClickOutside?: (event?: MouseEvent<any>) => void;
 };
-declare const Notification: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    className?: string | undefined;
-    titleClassName?: string | undefined;
-    contentClassName?: string | undefined;
-    actionSectionClassName?: string | undefined;
-    children?: React.ReactNode;
-    title?: React.ReactNode;
-    badge?: "attention" | "positive" | "negative" | undefined;
-    leftAddons?: React.ReactNode;
-    actionButton?: React.ReactNode;
-    dataTestId?: string | undefined;
-    hasCloser?: boolean | undefined;
-    closerWrapperClassName?: string | undefined;
-    closerClassName?: string | undefined;
-    block?: boolean | undefined;
-    onClose?: ((event?: React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent> | undefined) => void) | undefined;
-    getBadgeIcons?: ((icons: import("../toast-plate").BadgeIcons) => import("../toast-plate").BadgeIcons) | undefined;
-    colors?: "default" | "inverted" | undefined;
+declare const Notification: React.ForwardRefExoticComponent<Omit<import("packages/toast-plate/src/components/base-toast-plate").BaseToastPlateProps, "styles"> & {
+    breakpoint?: number | undefined;
 } & {
     /**
      * Управление видимостью компонента

package/notification/Component.js

@@ -18,12 +18,12 @@ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var elementClosest__default = /*#__PURE__*/_interopDefaultCompat(elementClosest);
 
-var styles = {"notificationComponent":"notification__notificationComponent_zu7wu","isVisible":"notification__isVisible_zu7wu","isClosing":"notification__isClosing_zu7wu","toastContent":"notification__toastContent_zu7wu","actionSection":"notification__actionSection_zu7wu"};
+var styles = {"notificationComponent":"notification__notificationComponent_1xns0","isVisible":"notification__isVisible_1xns0","isClosing":"notification__isClosing_1xns0","toastContent":"notification__toastContent_1xns0","actionSection":"notification__actionSection_1xns0","closeButton":"notification__closeButton_1xns0"};
 require('./index.css');
 
 var notificationClassNameSelector = ".".concat(styles.notificationComponent);
 var Notification = React.forwardRef(function (_a, ref) {
-    var className = _a.className, actionSectionClassName = _a.actionSectionClassName, children = _a.children, visible = _a.visible, _b = _a.offset, offset = _b === void 0 ? 108 : _b, _c = _a.hasCloser, hasCloser = _c === void 0 ? true : _c, _d = _a.autoCloseDelay, autoCloseDelay = _d === void 0 ? 5000 : _d, _e = _a.usePortal, usePortal = _e === void 0 ? true : _e, _f = _a.zIndex, zIndex = _f === void 0 ? coreComponentsStack.stackingOrder.TOAST : _f, style = _a.style, onClose = _a.onClose, onCloseTimeout = _a.onCloseTimeout, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onClickOutside = _a.onClickOutside, restProps = tslib.__rest(_a, ["className", "actionSectionClassName", "children", "visible", "offset", "hasCloser", "autoCloseDelay", "usePortal", "zIndex", "style", "onClose", "onCloseTimeout", "onMouseEnter", "onMouseLeave", "onClickOutside"]);
+    var className = _a.className, actionSectionClassName = _a.actionSectionClassName, closerClassName = _a.closerClassName, children = _a.children, visible = _a.visible, _b = _a.offset, offset = _b === void 0 ? 108 : _b, _c = _a.hasCloser, hasCloser = _c === void 0 ? true : _c, _d = _a.autoCloseDelay, autoCloseDelay = _d === void 0 ? 5000 : _d, _e = _a.usePortal, usePortal = _e === void 0 ? true : _e, _f = _a.zIndex, zIndex = _f === void 0 ? coreComponentsStack.stackingOrder.TOAST : _f, style = _a.style, onClose = _a.onClose, onCloseTimeout = _a.onCloseTimeout, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onClickOutside = _a.onClickOutside, restProps = tslib.__rest(_a, ["className", "actionSectionClassName", "closerClassName", "children", "visible", "offset", "hasCloser", "autoCloseDelay", "usePortal", "zIndex", "style", "onClose", "onCloseTimeout", "onMouseEnter", "onMouseLeave", "onClickOutside"]);
     var notificationRef = React.useRef(null);
     var autoCloseTimeoutRef = React.useRef(0);
     var closeTimeoutRef = React.useRef(0);
@@ -99,7 +99,7 @@ var Notification = React.forwardRef(function (_a, ref) {
                 React__default.default.createElement(coreComponentsToastPlate.ToastPlate, tslib.__assign({ className: cn__default.default(styles.notificationComponent, (_a = {},
                         _a[styles.isVisible] = visible,
                         _a[styles.isClosing] = isClosing,
-                        _a), className), contentClassName: styles.toastContent, actionSectionClassName: cn__default.default(actionSectionClassName, styles.actionSection), style: tslib.__assign({ top: offset, zIndex: computedZIndex }, style), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: mergeRefs__default.default([ref, notificationRef]), role: visible ? 'alert' : undefined, hasCloser: hasCloser, onClose: onClose }, restProps), children))));
+                        _a), className), contentClassName: styles.toastContent, actionSectionClassName: cn__default.default(actionSectionClassName, styles.actionSection), closerClassName: cn__default.default(styles.closeButton, closerClassName), style: tslib.__assign({ top: offset, zIndex: computedZIndex }, style), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: mergeRefs__default.default([ref, notificationRef]), role: visible ? 'alert' : undefined, hasCloser: hasCloser, onClose: onClose }, restProps), children))));
     }));
 });
 

package/notification/cssm/Component.d.ts

@@ -40,24 +40,8 @@ type NotificationProps = ToastPlateProps & {
      */
     onClickOutside?: (event?: MouseEvent<any>) => void;
 };
-declare const Notification: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    className?: string | undefined;
-    titleClassName?: string | undefined;
-    contentClassName?: string | undefined;
-    actionSectionClassName?: string | undefined;
-    children?: React.ReactNode;
-    title?: React.ReactNode;
-    badge?: "attention" | "positive" | "negative" | undefined;
-    leftAddons?: React.ReactNode;
-    actionButton?: React.ReactNode;
-    dataTestId?: string | undefined;
-    hasCloser?: boolean | undefined;
-    closerWrapperClassName?: string | undefined;
-    closerClassName?: string | undefined;
-    block?: boolean | undefined;
-    onClose?: ((event?: React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent> | undefined) => void) | undefined;
-    getBadgeIcons?: ((icons: import("../../toast-plate").BadgeIcons) => import("../../toast-plate").BadgeIcons) | undefined;
-    colors?: "default" | "inverted" | undefined;
+declare const Notification: React.ForwardRefExoticComponent<Omit<import("packages/toast-plate/src/components/base-toast-plate").BaseToastPlateProps, "styles"> & {
+    breakpoint?: number | undefined;
 } & {
     /**
      * Управление видимостью компонента

package/notification/cssm/Component.js

@@ -22,7 +22,7 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var notificationClassNameSelector = ".".concat(styles__default.default.notificationComponent);
 var Notification = React.forwardRef(function (_a, ref) {
-    var className = _a.className, actionSectionClassName = _a.actionSectionClassName, children = _a.children, visible = _a.visible, _b = _a.offset, offset = _b === void 0 ? 108 : _b, _c = _a.hasCloser, hasCloser = _c === void 0 ? true : _c, _d = _a.autoCloseDelay, autoCloseDelay = _d === void 0 ? 5000 : _d, _e = _a.usePortal, usePortal = _e === void 0 ? true : _e, _f = _a.zIndex, zIndex = _f === void 0 ? coreComponentsStack.stackingOrder.TOAST : _f, style = _a.style, onClose = _a.onClose, onCloseTimeout = _a.onCloseTimeout, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onClickOutside = _a.onClickOutside, restProps = tslib.__rest(_a, ["className", "actionSectionClassName", "children", "visible", "offset", "hasCloser", "autoCloseDelay", "usePortal", "zIndex", "style", "onClose", "onCloseTimeout", "onMouseEnter", "onMouseLeave", "onClickOutside"]);
+    var className = _a.className, actionSectionClassName = _a.actionSectionClassName, closerClassName = _a.closerClassName, children = _a.children, visible = _a.visible, _b = _a.offset, offset = _b === void 0 ? 108 : _b, _c = _a.hasCloser, hasCloser = _c === void 0 ? true : _c, _d = _a.autoCloseDelay, autoCloseDelay = _d === void 0 ? 5000 : _d, _e = _a.usePortal, usePortal = _e === void 0 ? true : _e, _f = _a.zIndex, zIndex = _f === void 0 ? coreComponentsStack.stackingOrder.TOAST : _f, style = _a.style, onClose = _a.onClose, onCloseTimeout = _a.onCloseTimeout, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onClickOutside = _a.onClickOutside, restProps = tslib.__rest(_a, ["className", "actionSectionClassName", "closerClassName", "children", "visible", "offset", "hasCloser", "autoCloseDelay", "usePortal", "zIndex", "style", "onClose", "onCloseTimeout", "onMouseEnter", "onMouseLeave", "onClickOutside"]);
     var notificationRef = React.useRef(null);
     var autoCloseTimeoutRef = React.useRef(0);
     var closeTimeoutRef = React.useRef(0);
@@ -98,7 +98,7 @@ var Notification = React.forwardRef(function (_a, ref) {
                 React__default.default.createElement(coreComponentsToastPlate.ToastPlate, tslib.__assign({ className: cn__default.default(styles__default.default.notificationComponent, (_a = {},
                         _a[styles__default.default.isVisible] = visible,
                         _a[styles__default.default.isClosing] = isClosing,
-                        _a), className), contentClassName: styles__default.default.toastContent, actionSectionClassName: cn__default.default(actionSectionClassName, styles__default.default.actionSection), style: tslib.__assign({ top: offset, zIndex: computedZIndex }, style), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: mergeRefs__default.default([ref, notificationRef]), role: visible ? 'alert' : undefined, hasCloser: hasCloser, onClose: onClose }, restProps), children))));
+                        _a), className), contentClassName: styles__default.default.toastContent, actionSectionClassName: cn__default.default(actionSectionClassName, styles__default.default.actionSection), closerClassName: cn__default.default(styles__default.default.closeButton, closerClassName), style: tslib.__assign({ top: offset, zIndex: computedZIndex }, style), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: mergeRefs__default.default([ref, notificationRef]), role: visible ? 'alert' : undefined, hasCloser: hasCloser, onClose: onClose }, restProps), children))));
     }));
 });
 

package/notification/cssm/index.module.css

@@ -53,4 +53,7 @@
     min-height: 48px;
     padding: 0 var(--gap-xs);
     margin: var(--gap-s-neg) 0;
+    align-items: center;
+} .closeButton {
+    align-items: center;
 }

package/notification/esm/Component.d.ts

@@ -40,24 +40,8 @@ type NotificationProps = ToastPlateProps & {
      */
     onClickOutside?: (event?: MouseEvent<any>) => void;
 };
-declare const Notification: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    className?: string | undefined;
-    titleClassName?: string | undefined;
-    contentClassName?: string | undefined;
-    actionSectionClassName?: string | undefined;
-    children?: React.ReactNode;
-    title?: React.ReactNode;
-    badge?: "attention" | "positive" | "negative" | undefined;
-    leftAddons?: React.ReactNode;
-    actionButton?: React.ReactNode;
-    dataTestId?: string | undefined;
-    hasCloser?: boolean | undefined;
-    closerWrapperClassName?: string | undefined;
-    closerClassName?: string | undefined;
-    block?: boolean | undefined;
-    onClose?: ((event?: React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent> | undefined) => void) | undefined;
-    getBadgeIcons?: ((icons: import("../../toast-plate").BadgeIcons) => import("../../toast-plate").BadgeIcons) | undefined;
-    colors?: "default" | "inverted" | undefined;
+declare const Notification: React.ForwardRefExoticComponent<Omit<import("packages/toast-plate/src/components/base-toast-plate").BaseToastPlateProps, "styles"> & {
+    breakpoint?: number | undefined;
 } & {
     /**
      * Управление видимостью компонента

package/notification/esm/Component.js

@@ -9,12 +9,12 @@ import { stackingOrder, Stack } from '../../stack/esm';
 import { ToastPlate } from '../../toast-plate/esm';
 import { useClickOutside } from './utils/index.js';
 
-var styles = {"notificationComponent":"notification__notificationComponent_zu7wu","isVisible":"notification__isVisible_zu7wu","isClosing":"notification__isClosing_zu7wu","toastContent":"notification__toastContent_zu7wu","actionSection":"notification__actionSection_zu7wu"};
+var styles = {"notificationComponent":"notification__notificationComponent_1xns0","isVisible":"notification__isVisible_1xns0","isClosing":"notification__isClosing_1xns0","toastContent":"notification__toastContent_1xns0","actionSection":"notification__actionSection_1xns0","closeButton":"notification__closeButton_1xns0"};
 require('./index.css');
 
 var notificationClassNameSelector = ".".concat(styles.notificationComponent);
 var Notification = forwardRef(function (_a, ref) {
-    var className = _a.className, actionSectionClassName = _a.actionSectionClassName, children = _a.children, visible = _a.visible, _b = _a.offset, offset = _b === void 0 ? 108 : _b, _c = _a.hasCloser, hasCloser = _c === void 0 ? true : _c, _d = _a.autoCloseDelay, autoCloseDelay = _d === void 0 ? 5000 : _d, _e = _a.usePortal, usePortal = _e === void 0 ? true : _e, _f = _a.zIndex, zIndex = _f === void 0 ? stackingOrder.TOAST : _f, style = _a.style, onClose = _a.onClose, onCloseTimeout = _a.onCloseTimeout, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onClickOutside = _a.onClickOutside, restProps = __rest(_a, ["className", "actionSectionClassName", "children", "visible", "offset", "hasCloser", "autoCloseDelay", "usePortal", "zIndex", "style", "onClose", "onCloseTimeout", "onMouseEnter", "onMouseLeave", "onClickOutside"]);
+    var className = _a.className, actionSectionClassName = _a.actionSectionClassName, closerClassName = _a.closerClassName, children = _a.children, visible = _a.visible, _b = _a.offset, offset = _b === void 0 ? 108 : _b, _c = _a.hasCloser, hasCloser = _c === void 0 ? true : _c, _d = _a.autoCloseDelay, autoCloseDelay = _d === void 0 ? 5000 : _d, _e = _a.usePortal, usePortal = _e === void 0 ? true : _e, _f = _a.zIndex, zIndex = _f === void 0 ? stackingOrder.TOAST : _f, style = _a.style, onClose = _a.onClose, onCloseTimeout = _a.onCloseTimeout, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onClickOutside = _a.onClickOutside, restProps = __rest(_a, ["className", "actionSectionClassName", "closerClassName", "children", "visible", "offset", "hasCloser", "autoCloseDelay", "usePortal", "zIndex", "style", "onClose", "onCloseTimeout", "onMouseEnter", "onMouseLeave", "onClickOutside"]);
     var notificationRef = useRef(null);
     var autoCloseTimeoutRef = useRef(0);
     var closeTimeoutRef = useRef(0);
@@ -90,7 +90,7 @@ var Notification = forwardRef(function (_a, ref) {
                 React.createElement(ToastPlate, __assign({ className: cn(styles.notificationComponent, (_a = {},
                         _a[styles.isVisible] = visible,
                         _a[styles.isClosing] = isClosing,
-                        _a), className), contentClassName: styles.toastContent, actionSectionClassName: cn(actionSectionClassName, styles.actionSection), style: __assign({ top: offset, zIndex: computedZIndex }, style), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: mergeRefs([ref, notificationRef]), role: visible ? 'alert' : undefined, hasCloser: hasCloser, onClose: onClose }, restProps), children))));
+                        _a), className), contentClassName: styles.toastContent, actionSectionClassName: cn(actionSectionClassName, styles.actionSection), closerClassName: cn(styles.closeButton, closerClassName), style: __assign({ top: offset, zIndex: computedZIndex }, style), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: mergeRefs([ref, notificationRef]), role: visible ? 'alert' : undefined, hasCloser: hasCloser, onClose: onClose }, restProps), children))));
     }));
 });
 

package/notification/esm/index.css

@@ -21,7 +21,7 @@
 } :root {
 } :root {
     --notification-desktop-content-width: 278px;
-} .notification__notificationComponent_zu7wu {
+} .notification__notificationComponent_1xns0 {
     visibility: hidden;
     position: fixed;
     right: var(--gap-s);
@@ -32,26 +32,29 @@
     -webkit-user-select: none;
             user-select: none;
     transition: transform 0.4s ease-out
-} @media screen and (min-width: 600px) { .notification__notificationComponent_zu7wu {
+} @media screen and (min-width: 600px) { .notification__notificationComponent_1xns0 {
         right: var(--gap-4xl);
         width: auto;
         transform: translate(calc(100% + var(--gap-4xl)), 0)
 }
-    } .notification__notificationComponent_zu7wu.notification__isVisible_zu7wu {
+    } .notification__notificationComponent_1xns0.notification__isVisible_1xns0 {
         visibility: visible;
         transform: translate(0, 0);
-    } .notification__notificationComponent_zu7wu.notification__isClosing_zu7wu {
+    } .notification__notificationComponent_1xns0.notification__isClosing_1xns0 {
         transition: transform 0.1s ease-out;
         transform: translate(100vw, 0)
-    } @media screen and (min-width: 600px) { .notification__notificationComponent_zu7wu.notification__isClosing_zu7wu {
+    } @media screen and (min-width: 600px) { .notification__notificationComponent_1xns0.notification__isClosing_1xns0 {
             transform: translate(calc(100% + var(--gap-4xl)), 0)
     }
-        } @media screen and (min-width: 600px) { .notification__toastContent_zu7wu {
+        } @media screen and (min-width: 600px) { .notification__toastContent_1xns0 {
         width: var(--notification-desktop-content-width)
 }
-    } .notification__actionSection_zu7wu {
+    } .notification__actionSection_1xns0 {
     min-width: 104px;
     min-height: 48px;
     padding: 0 var(--gap-xs);
     margin: var(--gap-s-neg) 0;
+    align-items: center;
+} .notification__closeButton_1xns0 {
+    align-items: center;
 }