@astral/ui 4.40.0 → 4.42.0

package/node/components/Notification/NotificationStackContainer/styles.js

@@ -33,6 +33,16 @@ const leaveOut = (0, styled_1.keyframes) `
     visibility: hidden;
   }
 `;
+/** Сохраняем scale stacked (--s), иначе при старте exit transform из keyframes затирает scale и карточка визуально «прыгает» вправо */
+const leaveOutMobileStacked = (0, styled_1.keyframes) `
+  from {
+    transform: translateX(0) scale(var(--s, 1));
+  }
+  to {
+    transform: translateX(100%) scale(var(--s, 1));
+    visibility: hidden;
+  }
+`;
 // используем дополнительный враппер,
 // потому что styled для ToastContainer не умеет работать с theme внутри
 // использовать бэм классы для стилизации пришлось,
@@ -48,7 +58,15 @@ exports.Wrapper = styled_1.styled.div `
   width: 432px;
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    right: -20px;
+    inset: 0 0 auto;
+
+    width: 100%;
+    max-width: 100vw;
+    padding: ${({ theme }) => theme.spacing(2, 2, 2, 2)};
+    padding-top: max(
+      ${({ theme }) => theme.spacing(2)},
+      env(safe-area-inset-top, 0px)
+    );
   }
 
   &.${constants_1.notifyClassnames.container} {
@@ -65,18 +83,86 @@ exports.Wrapper = styled_1.styled.div `
     }
     /* stylelint-enable plugin/no-unsupported-browser-features */
 
-    .Toastify:not(:last-child) {
-      overflow: hidden;
+    ${({ theme }) => theme.breakpoints.up('sm')} {
+      .${constants_1.notifyClassnames.stackHost} .Toastify {
+        overflow: hidden;
+      }
+    }
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      justify-content: flex-start;
+
+      height: auto;
+
+      .${constants_1.notifyClassnames.stackHost} .Toastify {
+        overflow: visible;
+      }
+
+      .${constants_1.notifyClassnames.stack} {
+        overflow: hidden auto;
+        display: flex;
+        flex-direction: column;
+        gap: ${({ theme }) => theme.spacing(2)};
+        align-items: stretch;
+
+        width: 100%;
+        max-width: 100%;
+        padding-top: ${({ theme }) => theme.microSpacing(1)};
+        padding-bottom: 8px !important;
+        padding-bottom: ${({ theme }) => theme.spacing(1)};
+        -webkit-overflow-scrolling: touch;
+      }
+
+      .${constants_1.notifyClassnames.stack} .${constants_1.notifyClassnames.root} {
+        pointer-events: auto !important;
+
+        position: relative !important;
+        transform: none !important;
+
+        flex-shrink: 0;
+
+        width: 100% !important;
+        max-width: 100%;
+        height: auto !important;
+        min-height: ${constants_1.NOTIFY_HEIGHT_MOBILE};
+        max-height: fit-content !important;
+        margin-top: 0 !important;
+        margin-right: 0 !important;
+        margin-bottom: 0 !important;
+
+        opacity: 1 !important;
+      }
+
+      /*
+        На мобильных контейнер не получает mouseEnter — toastify оставляет data-collapsed=true
+        и скрывает direct children не‑последних тостов (.Toastify__toast--stacked[data-collapsed=true]:not(:last-child)>*{opacity:0})
+      */
+      .${constants_1.notifyClassnames.stack} .Toastify__toast--stacked > * {
+        opacity: 1 !important;
+      }
+
+      .${constants_1.notifyClassnames.stack} .${constants_1.notifyClassnames.root}__content {
+        max-height: 400px;
+        margin: ${({ theme }) => theme.spacing(2, 0, 0, 8)};
+      }
+
+      .${constants_1.notifyClassnames.stack} .${constants_1.notifyClassnames.root}__footer {
+        margin-bottom: 0;
+      }
+
+      .${constants_1.notifyClassnames.stack} .Toastify__toast--stacked::before {
+        display: none;
+      }
     }
   }
 
   .${constants_1.notifyClassnames.animationIn} {
-    animation: ${leaveIn} ease-in-out 0.34s;
+    animation: ${leaveIn} ease-in-out ${({ theme }) => theme.transitions.duration.standard}ms;
     animation-fill-mode: both;
   }
 
   .${constants_1.notifyClassnames.animationOut} {
-    animation: ${leaveOut} ease-in-out 0.34s;
+    animation: ${leaveOut} ease-in-out;
     animation-fill-mode: both;
   }
 
@@ -85,7 +171,6 @@ exports.Wrapper = styled_1.styled.div `
 
     width: 400px;
     height: ${constants_1.NOTIFY_HEIGHT};
-    min-height: ${constants_1.NOTIFY_HEIGHT};
     padding: 0;
 
     box-shadow: ${({ theme }) => theme.elevation[300]};
@@ -107,6 +192,12 @@ exports.Wrapper = styled_1.styled.div `
       width: 100%;
       height: 3px;
     }
+    ${({ theme }) => theme.breakpoints.up('sm')} {
+      min-height: ${constants_1.NOTIFY_HEIGHT};
+    }
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      min-height: ${constants_1.NOTIFY_HEIGHT_MOBILE};
+    }
 
     .Toastify__progress-bar--wrp {
       top: 0;
@@ -154,8 +245,8 @@ exports.Wrapper = styled_1.styled.div `
   }
 
   /* Стили для уведомлений в стеке */
-  .Toastify:not(:last-child) {
-    .${constants_1.notifyClassnames.root} {
+  ${({ theme }) => theme.breakpoints.up('sm')} { 
+    .${constants_1.notifyClassnames.stack} .${constants_1.notifyClassnames.root} {
       position: relative;
       transform: scale(var(--s));
 
@@ -188,6 +279,119 @@ exports.Wrapper = styled_1.styled.div `
       }
     }
   }
+
+  /* Мобильный стек в свёрнутом виде: последний в DOM (самый новый) — сверху; остальные без участия в раскладке */
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    &:not(.${constants_1.notifyClassnames.container}) {
+      .${constants_1.notifyClassnames.stack} {
+        position: relative;
+
+        overflow: visible;
+        display: flex;
+        flex-direction: column-reverse;
+        gap: 0;
+        align-items: stretch;
+        justify-content: flex-end;
+
+        max-height: none;
+        margin-bottom: ${({ theme }) => theme.spacing(2)};
+        -webkit-overflow-scrolling: auto;
+
+        /* Два фейковых слоя — только пока в стеке ≥2 активных тоста (без анимации закрытия) */
+
+        /* Причина игнора: Не критично для отображения */
+        /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+        &:has(.${constants_1.notifyClassnames.root}:not(.${constants_1.notifyClassnames.animationOut}) ~ .${constants_1.notifyClassnames.root}:not(.${constants_1.notifyClassnames.animationOut})) {
+          padding-top: ${({ theme }) => theme.spacing(4)};
+
+          &::before,
+          &::after {
+            pointer-events: none;
+            content: '';
+
+            position: absolute;
+            z-index: 0;
+            right: ${({ theme }) => theme.spacing(2)};
+            left: ${({ theme }) => theme.spacing(2)};
+
+            height: ${constants_1.NOTIFY_HEIGHT_MOBILE};
+
+            background: ${({ theme }) => theme.palette.background.paper};
+            border-radius: ${({ theme }) => theme.shape.medium};
+            box-shadow: ${({ theme }) => theme.elevation[200]};
+          }
+
+          &::before {
+            top: 0;
+            transform: scaleX(0.92);
+          }
+
+          &::after {
+            top: ${({ theme }) => theme.spacing(2)};
+            transform: scaleX(0.96);
+          }
+        }
+      }
+
+      .${constants_1.notifyClassnames.stack} .${constants_1.notifyClassnames.root}:not(:last-of-type) {
+        pointer-events: none;
+
+        position: absolute;
+
+        overflow: hidden;
+
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+        padding: 0;
+
+        white-space: nowrap;
+
+        opacity: 0;
+        clip: rect(0, 0, 0, 0);
+        clip-path: inset(50%);
+        border: 0;
+
+        .${constants_1.notifyClassnames.root}__content {
+          max-height: 0 !important;
+          margin: 0 !important;
+        }
+      }
+
+      .${constants_1.notifyClassnames.stack} .${constants_1.notifyClassnames.root}:last-of-type {
+        position: relative;
+        z-index: 1;
+        transform: scale(var(--s, 1));
+
+        flex: 0 0 auto;
+        align-self: stretch;
+
+        width: 100% !important;
+        min-width: 0 !important;
+        max-width: 100% !important;
+        min-height: ${constants_1.NOTIFY_HEIGHT_MOBILE};
+        margin-bottom: 0 !important;
+
+        opacity: 1;
+        border-radius: ${({ theme }) => theme.shape.medium};
+
+        .${constants_1.notifyClassnames.root}__content {
+          max-height: 400px;
+          margin: ${({ theme }) => theme.spacing(2, 0, 0, 8)};
+        }
+      }
+
+      .${constants_1.notifyClassnames.stackHost} .Toastify,
+      .${constants_1.notifyClassnames.stackHost} .${constants_1.notifyClassnames.stack} {
+        overflow: visible !important;
+      }
+
+      .${constants_1.notifyClassnames.animationOut} {
+        animation: ${leaveOutMobileStacked} ease-in-out ${({ theme }) => theme.transitions.duration.standard}ms;
+        animation-fill-mode: both;
+      }
+    }
+  }
 `;
 exports.Inner = (0, styled_1.styled)(react_toastify_next_1.ToastContainer) `
   position: relative !important;
@@ -208,20 +412,53 @@ exports.Inner = (0, styled_1.styled)(react_toastify_next_1.ToastContainer) `
     }
   }
 
-  &:hover {
-    overflow: hidden auto;
+  /* Только устройства с реальным hover и ≥sm — иначе на touch :hover залипает и ломает мобильный стек */
+  ${({ theme }) => theme.breakpoints.up('sm')} {
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        overflow: hidden auto;
 
-    height: 100%;
+        height: 100%;
 
-    .${constants_1.notifyClassnames.root} {
-      position: relative;
-      transform: unset;
+        .${constants_1.notifyClassnames.root} {
+          position: relative;
+          transform: unset;
 
-      height: auto;
-      min-height: ${constants_1.NOTIFY_HEIGHT};
-      margin-bottom: ${({ theme }) => theme.spacing(1)} !important;
+          height: auto;
+          min-height: ${constants_1.NOTIFY_HEIGHT};
+          margin-bottom: ${({ theme }) => theme.spacing(1)} !important;
 
-      opacity: 1 !important;
+          opacity: 1 !important;
+        }
+
+        .${constants_1.notifyClassnames.root}__content {
+          max-height: 400px;
+          margin: ${({ theme }) => theme.spacing(2, 0, 0, 8)};
+        }
+
+        .${constants_1.notifyClassnames.root}__footer {
+          margin-bottom: 0;
+        }
+
+        .Toastify__toast--stacked::before {
+          display: none;
+        }
+      }
+    }
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    min-width: unset;
+    max-width: 100%;
+    padding-right: ${({ theme }) => theme.spacing(2)} !important;
+    padding-left: ${({ theme }) => theme.spacing(2)} !important;
+
+    .${constants_1.notifyClassnames.root} {
+      width: 100% !important;
+      max-width: 100%;
+      height: auto !important;
+      min-height: ${constants_1.NOTIFY_HEIGHT_MOBILE};
+      margin-bottom: ${({ theme }) => theme.spacing(2)} !important;
     }
 
     .${constants_1.notifyClassnames.root}__content {
@@ -232,10 +469,6 @@ exports.Inner = (0, styled_1.styled)(react_toastify_next_1.ToastContainer) `
     .${constants_1.notifyClassnames.root}__footer {
       margin-bottom: 0;
     }
-
-    .Toastify__toast--stacked::before {
-      display: none;
-    }
   }
 `;
 exports.StaticInner = (0, styled_1.styled)(exports.Inner) `
@@ -262,4 +495,9 @@ exports.CloseButton = (0, styled_1.styled)(Button_1.Button) `
   &.${constants_1.notifyClassnames.closeButtonAnimationOut} {
     opacity: 0;
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: calc(100% - ${({ theme }) => theme.spacing(4)});
+    margin: ${({ theme }) => theme.spacing(0, 5, 2, 5)};
+  }
 `;

package/node/components/Notification/NotificationStackContainer/useLogic/hooks/index.d.ts

@@ -1 +1,2 @@
 export * from './useHover';
+export * from './useTouchStackExpand';

package/node/components/Notification/NotificationStackContainer/useLogic/hooks/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./useHover"), exports);
+__exportStar(require("./useTouchStackExpand"), exports);

package/node/components/Notification/NotificationStackContainer/useLogic/hooks/useHover/useHover.d.ts

@@ -1,3 +1,7 @@
-export declare const useHover: (element?: Element) => {
+type UseHoverParams = {
+    enabled?: boolean;
+};
+export declare const useHover: (element: Element | undefined, { enabled }?: UseHoverParams) => {
     isHovered: boolean;
 };
+export {};

package/node/components/Notification/NotificationStackContainer/useLogic/hooks/useHover/useHover.js

@@ -2,11 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useHover = void 0;
 const react_1 = require("react");
-const useHover = (element) => {
+const useHover = (element, { enabled = true } = {}) => {
     const [isHovered, setHover] = (0, react_1.useState)(false);
     const handleMouseEnter = () => setHover(true);
     const handleMouseLeave = () => setHover(false);
     (0, react_1.useEffect)(() => {
+        if (!enabled) {
+            setHover(false);
+            return undefined;
+        }
         if (!element) {
             return undefined;
         }
@@ -16,7 +20,7 @@ const useHover = (element) => {
             element.removeEventListener('mouseenter', handleMouseEnter);
             element.removeEventListener('mouseleave', handleMouseLeave);
         };
-    }, [element]);
+    }, [element, enabled]);
     return { isHovered };
 };
 exports.useHover = useHover;

package/node/components/Notification/NotificationStackContainer/useLogic/hooks/useTouchStackExpand/index.d.ts

@@ -0,0 +1 @@
+export * from './useTouchStackExpand';

package/node/components/Notification/NotificationStackContainer/useLogic/hooks/useTouchStackExpand/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useTouchStackExpand"), exports);

package/node/components/Notification/NotificationStackContainer/useLogic/hooks/useTouchStackExpand/useTouchStackExpand.d.ts

@@ -0,0 +1,10 @@
+type UseTouchStackExpandParams = {
+    stackContainerElement: Element | null;
+    enabled: boolean;
+    hasOpenNotify: boolean;
+};
+/**
+ * Определяет, является ли стек уведомлений раскрытым на мобильном устройстве.
+ */
+export declare const useTouchStackExpand: ({ stackContainerElement, enabled, hasOpenNotify, }: UseTouchStackExpandParams) => boolean;
+export {};

package/node/components/Notification/NotificationStackContainer/useLogic/hooks/useTouchStackExpand/useTouchStackExpand.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTouchStackExpand = void 0;
+const react_1 = require("react");
+const constants_1 = require("../../../../constants");
+const isInteractiveTarget = (element) => Boolean(element.closest('button, a[href], [role="button"], input, textarea, select'));
+/**
+ * Определяет, является ли стек уведомлений раскрытым на мобильном устройстве.
+ */
+const useTouchStackExpand = ({ stackContainerElement, enabled, hasOpenNotify, }) => {
+    const [isTouchExpanded, setTouchExpanded] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (!enabled || !hasOpenNotify) {
+            setTouchExpanded(false);
+        }
+    }, [enabled, hasOpenNotify]);
+    (0, react_1.useEffect)(() => {
+        if (!enabled || !hasOpenNotify || !stackContainerElement) {
+            return undefined;
+        }
+        const toggleStack = (event) => {
+            const { target } = event;
+            if (!(target instanceof Element) || isInteractiveTarget(target)) {
+                return;
+            }
+            setTouchExpanded((prev) => !prev);
+        };
+        stackContainerElement.addEventListener('pointerdown', toggleStack);
+        return () => {
+            stackContainerElement.removeEventListener('pointerdown', toggleStack);
+        };
+    }, [enabled, hasOpenNotify, stackContainerElement]);
+    (0, react_1.useEffect)(() => {
+        const collapseIfOutside = (event) => {
+            const { target } = event;
+            if (!(target instanceof Node) || !stackContainerElement) {
+                return;
+            }
+            const stackHost = stackContainerElement.closest(`.${constants_1.notifyClassnames.stackHost}`);
+            const insideUi = stackHost?.parentElement ?? stackContainerElement;
+            if (!insideUi.contains(target)) {
+                setTouchExpanded(false);
+            }
+        };
+        document.addEventListener('pointerdown', collapseIfOutside, true);
+        if (!enabled ||
+            !hasOpenNotify ||
+            !isTouchExpanded ||
+            !stackContainerElement) {
+            document.removeEventListener('pointerdown', collapseIfOutside, true);
+        }
+        return () => {
+            document.removeEventListener('pointerdown', collapseIfOutside, true);
+        };
+    }, [enabled, hasOpenNotify, isTouchExpanded, stackContainerElement]);
+    return isTouchExpanded;
+};
+exports.useTouchStackExpand = useTouchStackExpand;

package/node/components/Notification/NotificationStackContainer/useLogic/useLogic.d.ts

@@ -4,7 +4,7 @@ type UseLogicParams = {
 };
 export declare const useLogic: ({ containerId: externalContainerId, }: UseLogicParams) => {
     isVisibleCloseButton: boolean;
-    isHoveredContainer: boolean;
+    isStackExpanded: boolean;
     isStartedClosingNotify: boolean;
     closeAll: () => void;
 };

package/node/components/Notification/NotificationStackContainer/useLogic/useLogic.js

@@ -3,10 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
 const react_toastify_next_1 = require("react-toastify-next");
+const useViewportType_1 = require("../../../useViewportType");
 const constants_1 = require("../../constants");
 const sleep_1 = require("../../utils/sleep");
 const hooks_1 = require("./hooks");
 const useLogic = ({ containerId: externalContainerId, }) => {
+    const { isMobile } = (0, useViewportType_1.useViewportType)();
     const [toasts, setToasts] = (0, react_1.useState)([]);
     const [container, setContainer] = (0, react_1.useState)();
     const [isStartedClosingNotify, setStartedClosingNotify] = (0, react_1.useState)(false);
@@ -32,7 +34,16 @@ const useLogic = ({ containerId: externalContainerId, }) => {
             setStartedClosingNotify(false);
         }
     }, [toasts]);
-    const { isHovered: isHoveredContainer } = (0, hooks_1.useHover)(container);
+    const hasOpenNotify = Boolean(toasts.length);
+    const { isHovered } = (0, hooks_1.useHover)(container, {
+        enabled: !isMobile,
+    });
+    const isTouchExpanded = (0, hooks_1.useTouchStackExpand)({
+        stackContainerElement: container ?? null,
+        enabled: isMobile,
+        hasOpenNotify,
+    });
+    const isStackExpanded = isMobile ? isTouchExpanded : isHovered;
     const handleAddToast = ({ id, containerId }) => {
         if (Object.is(containerId, externalContainerId)) {
             setToasts((currentToasts) => [...currentToasts, id]);
@@ -61,29 +72,28 @@ const useLogic = ({ containerId: externalContainerId, }) => {
         return unsubscribe;
     }, []);
     (0, react_1.useEffect)(() => {
-        if (!isHoveredContainer || !container) {
+        if (!isStackExpanded || !container) {
             return;
         }
         (async () => {
             // Ожидаем пока отработает анимация и стек с уведомлениями раскроется
             await (0, sleep_1.sleep)(300);
-            const hasScroll = container?.scrollHeight > container?.clientHeight;
-            if (hasScroll) {
+            const hasVerticalScroll = container.scrollHeight > container.clientHeight;
+            if (hasVerticalScroll) {
                 container.scrollTo({
                     top: container.scrollHeight,
                     behavior: 'smooth',
                 });
             }
         })();
-    }, [container, isHoveredContainer]);
+    }, [container, isStackExpanded]);
     const closeAll = () => {
         setStartedClosingNotify(true);
         react_toastify_next_1.toast.dismiss({ containerId: externalContainerId });
     };
-    const hasOpenNotify = Boolean(toasts.length);
     return {
-        isVisibleCloseButton: hasOpenNotify,
-        isHoveredContainer: isHoveredContainer && hasOpenNotify,
+        isVisibleCloseButton: hasOpenNotify && (isMobile ? isStackExpanded : true),
+        isStackExpanded,
         isStartedClosingNotify,
         closeAll,
     };

package/node/components/Notification/NotificationTemplate/styles.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Title = exports.CloseButton = exports.IconWrapper = exports.Footer = exports.Content = exports.Header = exports.Wrapper = void 0;
+const constants_1 = require("../../Button/constants");
 const IconButton_1 = require("../../IconButton");
+const constants_2 = require("../../SvgIcon/constants");
 const styled_1 = require("../../styled");
 const Typography_1 = require("../../Typography");
 const utils_1 = require("./utils");
@@ -18,6 +20,10 @@ exports.Wrapper = styled_1.styled.article `
   color: ${({ theme }) => theme.palette.grey[900]};
 
   background: ${({ theme }) => theme.palette.background.default};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(2, 3)};
+  }
 `;
 exports.Header = styled_1.styled.header `
   display: flex;
@@ -25,6 +31,13 @@ exports.Header = styled_1.styled.header `
 
   width: 100%;
   min-height: 24px;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    .${constants_1.buttonClassnames.root} {
+      width: 24px;
+      height: 24px;
+    }
+  }
 `;
 exports.Content = (0, styled_1.styled)(Typography_1.Typography) `
   margin-top: ${({ theme }) => theme.spacing(2)};
@@ -41,6 +54,13 @@ exports.IconWrapper = styled_1.styled.div `
   display: flex;
 
   margin-right: ${({ theme }) => theme.spacing(2)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    .${constants_2.svgIconClassnames.root} {
+      width: 24px;
+      height: 24px;
+    }
+  }
 `;
 exports.CloseButton = (0, styled_1.styled)(IconButton_1.IconButton) `
   align-self: center;

package/node/components/Notification/constants.d.ts

@@ -18,9 +18,13 @@ export declare const NOTIFY_STATIC_CONTAINER_ID = "static-notify-container";
 export declare const BANNER_CONTAINER_ID = "banner-container-id";
 export declare const NOTIFY_NO_TRANSITION_ATTR = "data-no-transition";
 export declare const NOTIFY_HEIGHT = "56px";
+export declare const NOTIFY_HEIGHT_MOBILE = "40px";
 export declare const notifyClassnames: {
     root: string;
     body: string;
+    stack: string;
+    /** Обёртка только над stacked ToastContainer — без :has() отделяем внешний .Toastify от статичного */
+    stackHost: string;
     container: string;
     animationIn: string;
     animationOut: string;

package/node/components/Notification/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.notifyClassnames = exports.NOTIFY_HEIGHT = exports.NOTIFY_NO_TRANSITION_ATTR = exports.BANNER_CONTAINER_ID = exports.NOTIFY_STATIC_CONTAINER_ID = exports.NOTIFY_CONTAINER_ID = exports.NOTIFY_POSITIONS = exports.NotificationVariantTypes = void 0;
+exports.notifyClassnames = exports.NOTIFY_HEIGHT_MOBILE = exports.NOTIFY_HEIGHT = exports.NOTIFY_NO_TRANSITION_ATTR = exports.BANNER_CONTAINER_ID = exports.NOTIFY_STATIC_CONTAINER_ID = exports.NOTIFY_CONTAINER_ID = exports.NOTIFY_POSITIONS = exports.NotificationVariantTypes = void 0;
 const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 var NotificationVariantTypes;
 (function (NotificationVariantTypes) {
@@ -23,9 +23,13 @@ exports.NOTIFY_STATIC_CONTAINER_ID = 'static-notify-container';
 exports.BANNER_CONTAINER_ID = 'banner-container-id';
 exports.NOTIFY_NO_TRANSITION_ATTR = 'data-no-transition';
 exports.NOTIFY_HEIGHT = '56px';
+exports.NOTIFY_HEIGHT_MOBILE = '40px';
 exports.notifyClassnames = {
     root: (0, createUIKitClassname_1.createUIKitClassname)('notify'),
     body: (0, createUIKitClassname_1.createUIKitClassname)('notify__body'),
+    stack: (0, createUIKitClassname_1.createUIKitClassname)('notify__stack'),
+    /** Обёртка только над stacked ToastContainer — без :has() отделяем внешний .Toastify от статичного */
+    stackHost: (0, createUIKitClassname_1.createUIKitClassname)('notify__stack-host'),
     container: (0, createUIKitClassname_1.createUIKitClassname)('notify__container'),
     animationIn: (0, createUIKitClassname_1.createUIKitClassname)('notify_animation-in'),
     animationOut: (0, createUIKitClassname_1.createUIKitClassname)('notify_animation-out'),