@snack-uikit/notification 0.13.25 → 0.13.26

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## <small>0.13.26 (2026-01-29)</small>
+
+* feat(PDS-3356): add notification card stack ([06a2d74](https://github.com/cloud-ru-tech/snack-uikit/commit/06a2d74))
+
+
+
+
+
 ## <small>0.13.25 (2026-01-19)</small>
 
 * chore(FF-6693): migrate tests from TestCafe to Playwright ([f32aff8](https://github.com/cloud-ru-tech/snack-uikit/commit/f32aff8))

package/README.md

@@ -170,6 +170,67 @@ function NotificationPanelExample() {
 }
 ```
 
+## NotificationPanel.Stack
+
+### Description
+
+- `NotificationPanel.Stack` — вспомогательный компонент для отображения группы уведомлений в виде **стека карточек** внутри `NotificationPanel`.
+- Используется для **компактного отображения набора уведомлений**, которые можно свернуть/развернуть по заголовку.
+- Принимает **заголовок стека** (`title`), **состояние открытия по умолчанию** (`defaultOpen`) и колбэк изменения состояния (`onOpenChanged`).
+- Поддерживает **дополнительные действия** (`actions`) в виде выпадающего списка, аналогично действиям настроек панели.
+- Внутри стека отрисовываются карточки `NotificationCard`.
+
+### Example
+
+```tsx
+import { NotificationCard, NotificationPanel } from '@snack-uikit/notification';
+
+function NotificationPanelStackExample() {
+  const cards = [
+    {
+      id: 'card-1',
+      label: 'Category・Subcategory',
+      appearance: 'neutral' as const,
+      title: 'First notification in stack',
+      content: 'Demo content.',
+      date: 'DD.MM.YYYY HH:MM',
+    },
+    {
+      id: 'card-2',
+      label: 'Category・Subcategory',
+      appearance: 'neutral' as const,
+      title: 'Second notification in stack',
+      content: 'Another demo content.',
+      date: 'DD.MM.YYYY HH:MM',
+    },
+  ];
+
+  return (
+    <NotificationPanel
+      title="Notifications"
+      content={
+        <NotificationPanel.Stack
+          title="Previous notifications"
+          actions={[
+            {
+              content: { option: 'Move to archive' },
+              onClick: () => console.log('Move to archive'),
+            },
+            {
+              content: { option: 'Delete all' },
+              onClick: () => console.log('Delete all'),
+            },
+          ]}
+        >
+          {cards.map(card => (
+            <NotificationCard {...card} key={card.id} />
+          ))}
+        </NotificationPanel.Stack>
+      }
+    />
+  );
+}
+```
 
 [//]: DOCUMENTATION_SECTION_START
 [//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
@@ -222,6 +283,15 @@ function NotificationPanelExample() {
 |------|------|---------------|-------------|
 | text* | `string` | - | Текст разделителя |
 | className | `string` | - | CSS-класс |
+## NotificationPanel.Stack
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| children* | `Iterable<ReactNode>` | - | Карточки в стопке, видна первая карточка, остальные схлопываются под нее. |
+| title* | `string` | - | Заголовок стопки карточек |
+| defaultOpen | `boolean` | false | Состояние открыт/закрыт по умолчанию |
+| onOpenChanged | `(open: boolean) => void` | - | Колбек смены состояния открыт/закрыт |
+| actions | `Action[]` | - | Список действий в выпадающем меню |
 ## NotificationPanelPopover
 Компонент-обёртка для NotificationPanel для использования как выпадающий элемент
 ### Props

package/dist/cjs/components/NotificationCard/NotificationCard.d.ts

@@ -1,13 +1,9 @@
-import { ElementType, MouseEventHandler, ReactElement, ReactNode } from 'react';
+import { ElementType, MouseEventHandler, ReactNode } from 'react';
 import { ButtonSimpleProps, ButtonTonalProps } from '@snack-uikit/button';
 import { PickLinkProps } from '@snack-uikit/link';
-import { BaseItemProps } from '@snack-uikit/list';
 import { WithSupportProps } from '@snack-uikit/utils';
+import { type Action } from '../../helperComponents/ActionsButton';
 import { Appearance } from './types';
-type Action = {
-    icon?: ReactElement;
-    tagLabel?: string;
-} & Pick<BaseItemProps, 'content' | 'onClick' | 'disabled'>;
 export type NotificationCardProps<LinkElement extends ElementType = 'a'> = WithSupportProps<{
     /** Идентификатор уведомления */
     id: string;
@@ -40,4 +36,3 @@ export type NotificationCardProps<LinkElement extends ElementType = 'a'> = WithS
 }>;
 /** Компонент карточки уведомления */
 export declare function NotificationCard<LinkElement extends ElementType = 'a'>({ id, appearance, label, unread, title, content, link, date, onClick, primaryButton, secondaryButton, actions, onVisible, className, ...rest }: NotificationCardProps<LinkElement>): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/cjs/components/NotificationCard/NotificationCard.js

@@ -21,11 +21,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
 const button_1 = require("@snack-uikit/button");
+const icons_1 = require("@snack-uikit/icons");
 const link_1 = require("@snack-uikit/link");
 const truncate_string_1 = require("@snack-uikit/truncate-string");
 const typography_1 = require("@snack-uikit/typography");
 const utils_1 = require("@snack-uikit/utils");
-const components_1 = require("./components");
+const ActionsButton_1 = require("../../helperComponents/ActionsButton");
 const constants_1 = require("./constants");
 const helpers_1 = require("./helpers");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
@@ -88,10 +89,13 @@ function NotificationCard(_a) {
     "data-clickable": Boolean(onClick) || undefined,
     "data-droplist-open": isDroplistOpen || undefined,
     className: (0, classnames_1.default)(styles_module_scss_1.default.notificationCard, className),
-    children: [(actions === null || actions === void 0 ? void 0 : actions.length) && (0, jsx_runtime_1.jsx)(components_1.NotificationCardFunction, {
+    children: [(actions === null || actions === void 0 ? void 0 : actions.length) && (0, jsx_runtime_1.jsx)(ActionsButton_1.ActionsButton, {
+      className: styles_module_scss_1.default.notificationCardFunction,
       actions: actions,
       open: isDroplistOpen,
-      setDroplistOpen: setDroplistOpen
+      setDroplistOpen: setDroplistOpen,
+      size: 's',
+      icon: (0, jsx_runtime_1.jsx)(icons_1.KebabSVG, {})
     }), label && (0, jsx_runtime_1.jsx)(typography_1.Typography.LightLabelS, {
       tag: 'div',
       className: styles_module_scss_1.default.notificationCardLabel,
@@ -119,8 +123,11 @@ function NotificationCard(_a) {
       className: styles_module_scss_1.default.notificationCardContent,
       "data-test-id": constants_1.TEST_IDS.content,
       children: content
-    }), (primaryButton || secondaryButton) && (0, jsx_runtime_1.jsxs)("div", {
+    }), (primaryButton || secondaryButton) &&
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    (0, jsx_runtime_1.jsxs)("div", {
       className: styles_module_scss_1.default.notificationCardButtons,
+      onClick: helpers_1.stopPropagationClick,
       children: [secondaryButton && (0, jsx_runtime_1.jsx)(button_1.ButtonSimple, Object.assign({}, secondaryButton, {
         appearance: 'neutral',
         size: 's',

package/dist/cjs/components/NotificationCard/components/index.d.ts

@@ -1,2 +1 @@
-export * from './NotificationCardFunction';
 export * from './NotificationCardSkeleton';

package/dist/cjs/components/NotificationCard/components/index.js

@@ -22,5 +22,4 @@ var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-__exportStar(require("./NotificationCardFunction"), exports);
 __exportStar(require("./NotificationCardSkeleton"), exports);

package/dist/cjs/components/NotificationCard/helpers.d.ts

@@ -1,2 +1,4 @@
+import { MouseEvent } from 'react';
 import { Appearance } from './types';
 export declare function getIcon(appearance: Appearance): import("react/jsx-runtime").JSX.Element | null;
+export declare function stopPropagationClick(e: MouseEvent<HTMLElement>): void;

package/dist/cjs/components/NotificationCard/helpers.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getIcon = getIcon;
+exports.stopPropagationClick = stopPropagationClick;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_1 = require("@snack-uikit/icons");
 const constants_1 = require("./constants");
@@ -29,4 +30,7 @@ function getIcon(appearance) {
     default:
       return null;
   }
+}
+function stopPropagationClick(e) {
+  e.stopPropagation();
 }

package/dist/cjs/components/NotificationCard/styles.module.css

@@ -1,6 +1,6 @@
 .notificationCardFunction{
   padding-top:var(--space-notification-panel-card-function-badge-padding-top, 12px);
-  padding-right:var(--space-notification-panel-card-function-badge-padding-right, 16px);
+  padding-right:var(--space-notification-panel-card-function-badge-padding-right, 12px);
   pointer-events:none;
   position:absolute;
   top:0;
@@ -24,19 +24,20 @@
 }
 
 .notificationCard{
-  padding-left:var(--space-notification-panel-card-padding-horizontal, 16px);
-  padding-right:var(--space-notification-panel-card-padding-horizontal, 16px);
-  padding-top:var(--space-notification-panel-card-padding-vertical, 16px);
-  padding-bottom:var(--space-notification-panel-card-padding-vertical, 16px);
+  padding-left:var(--space-notification-panel-card-padding-horizontal, 12px);
+  padding-right:var(--space-notification-panel-card-padding-horizontal, 12px);
+  padding-top:var(--space-notification-panel-card-padding-vertical, 12px);
+  padding-bottom:var(--space-notification-panel-card-padding-vertical, 12px);
   gap:var(--space-notification-panel-card-gap, 8px);
-  border-bottom-width:var(--border-width-notification-panel-card, 1px);
+  border-width:var(--border-width-notification-panel-card, 1px);
+  border-radius:var(--radius-notification-panel-card, 4px);
   position:relative;
   display:flex;
   flex-direction:column;
   box-sizing:border-box;
   max-width:100%;
-  border-bottom-color:var(--sys-neutral-decor-default, #dde0ea);
-  border-bottom-style:solid;
+  border-color:var(--sys-neutral-decor-default, #dde0ea);
+  border-style:solid;
 }
 .notificationCard::before{
   pointer-events:none;
@@ -54,7 +55,7 @@
   outline-width:var(--border-state-focus-s-border-width, 2px);
   outline-style:var(--border-state-focus-s-border-style, solid);
   outline-color:var(--border-state-focus-s-border-color, );
-  border-bottom-color:transparent;
+  border-color:transparent;
   outline-color:var(--sys-available-complementary, #1c1c24);
 }
 .notificationCard[data-droplist-open]::before, .notificationCard:hover::before, .notificationCard:focus-visible::before, .notificationCard:focus-within:not(:focus)::before{

package/dist/cjs/components/NotificationPanel/NotificationPanel.d.ts

@@ -3,7 +3,7 @@ import { ButtonFunctionProps } from '@snack-uikit/button';
 import { SegmentedControlProps } from '@snack-uikit/segmented-control';
 import { TooltipProps } from '@snack-uikit/tooltip';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { NotificationPanelBlank, NotificationPanelBlankProps, NotificationPanelSettingsProps } from './components';
+import { NotificationCardStack, NotificationCardStackProps, NotificationPanelBlank, NotificationPanelBlankProps, NotificationPanelSettingsProps } from './components';
 import { NotificationPanelDivider, NotificationPanelDividerProps } from './components/NotificationPanelDivider';
 export type { NotificationPanelBlankProps };
 export type NotificationPanelProps = WithSupportProps<{
@@ -41,4 +41,6 @@ export declare namespace NotificationPanel {
     type BlankProps = NotificationPanelBlankProps;
     const Divider: typeof NotificationPanelDivider;
     type DividerProps = NotificationPanelDividerProps;
+    const Stack: typeof NotificationCardStack;
+    type StackProps = NotificationCardStackProps;
 }

package/dist/cjs/components/NotificationPanel/NotificationPanel.js

@@ -86,19 +86,21 @@ function NotificationPanel(_a) {
           "data-test-id": constants_1.TEST_IDS.segments
         }))
       })]
-    }), (0, jsx_runtime_1.jsxs)(scroll_1.Scroll, {
+    }), (0, jsx_runtime_1.jsx)(scroll_1.Scroll, {
       size: 'm',
-      className: styles_module_scss_1.default.notificationPanelBody,
       ref: scrollContainerRef,
-      children: [content, loading && (0, jsx_runtime_1.jsx)(skeleton_1.SkeletonContextProvider, {
-        loading: loading || false,
-        children: skeletons.map(skeleton => (0, jsx_runtime_1.jsx)(skeleton_1.WithSkeleton, {
-          skeleton: (0, jsx_runtime_1.jsx)(components_1.NotificationCardSkeleton, {})
-        }, skeleton))
-      }), (0, jsx_runtime_1.jsx)("div", {
-        className: styles_module_scss_1.default.scrollStub,
-        ref: scrollEndRef
-      })]
+      children: (0, jsx_runtime_1.jsxs)("div", {
+        className: styles_module_scss_1.default.notificationPanelBody,
+        children: [content, loading && (0, jsx_runtime_1.jsx)(skeleton_1.SkeletonContextProvider, {
+          loading: loading || false,
+          children: skeletons.map(skeleton => (0, jsx_runtime_1.jsx)(skeleton_1.WithSkeleton, {
+            skeleton: (0, jsx_runtime_1.jsx)(components_1.NotificationCardSkeleton, {})
+          }, skeleton))
+        }), (0, jsx_runtime_1.jsx)("div", {
+          className: styles_module_scss_1.default.scrollStub,
+          ref: scrollEndRef
+        })]
+      })
     }), footerButton && (0, jsx_runtime_1.jsx)("button", {
       type: 'button',
       onClick: footerButton.onClick,
@@ -113,4 +115,5 @@ function NotificationPanel(_a) {
 (function (NotificationPanel) {
   NotificationPanel.Blank = components_2.NotificationPanelBlank;
   NotificationPanel.Divider = NotificationPanelDivider_1.NotificationPanelDivider;
+  NotificationPanel.Stack = components_2.NotificationCardStack;
 })(NotificationPanel || (exports.NotificationPanel = NotificationPanel = {}));

package/dist/cjs/components/NotificationPanel/components/NotificationCardStack/NotificationCardStack.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { Action } from '../../../../helperComponents/ActionsButton';
+export type NotificationCardStackProps = {
+    /**
+     * Заголовок стопки карточек
+     */
+    title: string;
+    /**
+     * Состояние открыт/закрыт по умолчанию
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Колбек смены состояния открыт/закрыт
+     * @type (open: boolean) => void
+     */
+    onOpenChanged?: (open: boolean) => void;
+    /**
+     * Карточки в стопке, видна первая карточка, остальные схлопываются под нее.
+     */
+    children: Iterable<ReactNode>;
+    /**
+     * Список действий в выпадающем меню
+     */
+    actions?: Action[];
+};
+export declare function NotificationCardStack({ children, defaultOpen, onOpenChanged, title, actions, }: NotificationCardStackProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/cjs/components/NotificationPanel/components/NotificationCardStack/NotificationCardStack.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NotificationCardStack = NotificationCardStack;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const button_1 = require("@snack-uikit/button");
+const icons_1 = require("@snack-uikit/icons");
+const ActionsButton_1 = require("../../../../helperComponents/ActionsButton");
+const constants_1 = require("../../constants");
+const StackTail_1 = require("../../helperComponents/StackTail");
+const hooks_1 = require("./hooks");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const utils_1 = require("./utils");
+const ANIMATION_DURATION = 0.3;
+function NotificationCardStack(_ref) {
+  let {
+    children,
+    defaultOpen,
+    onOpenChanged,
+    title,
+    actions
+  } = _ref;
+  const [actionsOpen, setActionsOpen] = (0, react_1.useState)(false);
+  const {
+    open,
+    toggleOpen,
+    isVisible
+  } = (0, hooks_1.useAnimatedOpening)({
+    defaultOpen,
+    onOpenChanged,
+    duration: ANIMATION_DURATION * 1000
+  });
+  const [first, ...stack] = (0, react_1.useMemo)(() => react_1.Children.toArray(children), [children]);
+  if (!first) {
+    return null;
+  }
+  if (!stack.length) {
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {
+      children: first
+    });
+  }
+  const firstCardElement = open ? first : (0, utils_1.cloneCard)(first, {
+    onClick: toggleOpen
+  });
+  return (0, jsx_runtime_1.jsxs)("div", {
+    className: styles_module_scss_1.default.container,
+    style: {
+      '--snack-notification-stack-animation-duration': `${ANIMATION_DURATION}s`
+    },
+    "data-test-id": constants_1.TEST_IDS.cardStack.wrapper,
+    children: [(0, jsx_runtime_1.jsxs)("div", {
+      className: styles_module_scss_1.default.header,
+      "data-test-id": constants_1.TEST_IDS.cardStack.headline,
+      children: [(0, jsx_runtime_1.jsx)("label", {
+        className: styles_module_scss_1.default.title,
+        onClick: toggleOpen,
+        "data-test-id": constants_1.TEST_IDS.cardStack.title,
+        children: title
+      }), (0, jsx_runtime_1.jsxs)("div", {
+        className: styles_module_scss_1.default.right,
+        children: [actions && actions.length > 0 && (0, jsx_runtime_1.jsx)(ActionsButton_1.ActionsButton, {
+          actions: actions,
+          open: actionsOpen,
+          setDroplistOpen: setActionsOpen,
+          size: 'xs',
+          icon: (0, jsx_runtime_1.jsx)(icons_1.KebabSVG, {})
+        }), (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
+          size: 'xs',
+          onClick: toggleOpen,
+          "data-test-id": constants_1.TEST_IDS.cardStack.openButton,
+          icon: open ? (0, jsx_runtime_1.jsx)(icons_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(icons_1.ChevronDownSVG, {})
+        })]
+      })]
+    }), (0, jsx_runtime_1.jsxs)("div", {
+      className: styles_module_scss_1.default.cards,
+      children: [(0, jsx_runtime_1.jsxs)("div", {
+        className: styles_module_scss_1.default.first,
+        children: [(0, jsx_runtime_1.jsx)(StackTail_1.StackTail, {
+          open: open,
+          count: stack.length
+        }), firstCardElement]
+      }), (0, jsx_runtime_1.jsx)("div", {
+        className: styles_module_scss_1.default.stack,
+        "data-open": open || undefined,
+        "data-tail-size": stack.length,
+        children: (0, jsx_runtime_1.jsx)("div", {
+          className: styles_module_scss_1.default.animationContainer,
+          children: isVisible ? stack : []
+        })
+      })]
+    })]
+  });
+}

package/dist/cjs/components/NotificationPanel/components/NotificationCardStack/hooks.d.ts

@@ -0,0 +1,12 @@
+type UseAnimatedOpeningProps = {
+    defaultOpen?: boolean;
+    onOpenChanged?: (open: boolean) => void;
+    duration: number;
+};
+type UseAnimatedOpeningResult = {
+    open: boolean;
+    isVisible: boolean;
+    toggleOpen(): void;
+};
+export declare function useAnimatedOpening({ defaultOpen, onOpenChanged, duration, }: UseAnimatedOpeningProps): UseAnimatedOpeningResult;
+export {};

package/dist/cjs/components/NotificationPanel/components/NotificationCardStack/hooks.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnimatedOpening = useAnimatedOpening;
+const react_1 = require("react");
+const uncontrollable_1 = require("uncontrollable");
+function useAnimatedOpening(_ref) {
+  let {
+    defaultOpen = false,
+    onOpenChanged,
+    duration
+  } = _ref;
+  const [open, setOpen] = (0, uncontrollable_1.useUncontrolledProp)(undefined, defaultOpen, onOpenChanged);
+  const [isVisible, setIsVisible] = (0, react_1.useState)(open);
+  const timeout = (0, react_1.useRef)();
+  const toggleOpen = (0, react_1.useCallback)(() => {
+    setOpen(!open);
+  }, [open, setOpen]);
+  (0, react_1.useEffect)(() => {
+    clearTimeout(timeout.current);
+    if (open) {
+      setIsVisible(true);
+    } else {
+      timeout.current = setTimeout(() => {
+        setIsVisible(false);
+      }, duration);
+    }
+  }, [open, duration]);
+  return {
+    toggleOpen,
+    open,
+    isVisible
+  };
+}

package/dist/cjs/components/NotificationPanel/components/NotificationCardStack/index.d.ts

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

package/dist/cjs/components/NotificationPanel/components/NotificationCardStack/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__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 = void 0 && (void 0).__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("./NotificationCardStack"), exports);

package/dist/cjs/components/NotificationPanel/components/NotificationCardStack/styles.module.css

@@ -0,0 +1,74 @@
+.container{
+  gap:var(--space-notification-panel-card-stack-container, 4px);
+  display:flex;
+  flex-direction:column;
+}
+
+.header{
+  gap:var(--space-notification-panel-card-stack-header-gap, 4px);
+  padding-bottom:var(--space-notification-panel-card-stack-header-padding-bottom, 4px);
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  color:var(var(--sys-neutral-text-main, #41424e));
+}
+
+.title{
+  font-family:var(--sans-title-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-title-s-font-weight, Semibold);
+  line-height:var(--sans-title-s-line-height, 20px);
+  font-size:var(--sans-title-s-font-size, 14px);
+  letter-spacing:var(--sans-title-s-letter-spacing, 0.15px);
+  paragraph-spacing:var(--sans-title-s-paragraph-spacing, 7.7px);
+  overflow:hidden;
+  flex-grow:1;
+  flex-shrink:1;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.right{
+  gap:var(--space-notification-panel-card-stack-header-gap, 4px);
+  display:flex;
+  flex-direction:row;
+  flex-grow:0;
+  flex-shrink:0;
+}
+
+.first{
+  display:flex;
+  flex-direction:column-reverse;
+}
+
+.stack{
+  position:relative;
+  overflow:visible;
+  height:auto;
+  transition:overflow var(--snack-notification-stack-animation-duration) allow-discrete step-end;
+}
+.stack:not([data-open]){
+  overflow:hidden;
+  transition:height var(--snack-notification-stack-animation-duration) allow-discrete step-end;
+}
+.stack:not([data-open])[data-tail-size]{
+  height:8px;
+}
+.stack:not([data-open])[data-tail-size="1"]{
+  height:4px;
+}
+
+.animationContainer{
+  translate:0 -100%;
+  scale:0.98;
+  display:flex;
+  flex-direction:column;
+  gap:var(--space-notification-panel-container-body-stack-cards, 4px);
+  margin-top:var(--space-notification-panel-container-body-stack-cards, 4px);
+  opacity:0;
+  transition:scale var(--snack-notification-stack-animation-duration), translate var(--snack-notification-stack-animation-duration), opacity var(--snack-notification-stack-animation-duration);
+}
+[data-open] .animationContainer{
+  translate:0 0;
+  scale:1;
+  opacity:1;
+}

package/dist/cjs/components/NotificationPanel/components/NotificationCardStack/utils.d.ts

@@ -0,0 +1,2 @@
+import { ReactNode } from 'react';
+export declare const cloneCard: (element: ReactNode, props: Record<string, unknown>) => string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined;

package/dist/cjs/components/NotificationPanel/components/NotificationCardStack/utils.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cloneCard = void 0;
+const react_1 = require("react");
+const cloneCard = (element, props) => {
+  if (!(0, react_1.isValidElement)(element)) {
+    return element;
+  }
+  return (0, react_1.cloneElement)(element, Object.assign(Object.assign({}, element.props), props));
+};
+exports.cloneCard = cloneCard;

package/dist/cjs/components/NotificationPanel/components/NotificationPanelDivider/NotificationPanelDivider.js

@@ -29,9 +29,16 @@ function NotificationPanelDivider(_a) {
       className
     } = _a,
     rest = __rest(_a, ["text", "className"]);
-  return (0, jsx_runtime_1.jsx)(typography_1.Typography.LightLabelS, Object.assign({
-    className: (0, classnames_1.default)(styles_module_scss_1.default.notificationPanelDivider, className)
+  return (0, jsx_runtime_1.jsxs)("div", Object.assign({
+    className: (0, classnames_1.default)(styles_module_scss_1.default.container, className)
   }, (0, utils_1.extractSupportProps)(rest), {
-    children: text
+    children: [(0, jsx_runtime_1.jsx)("div", {
+      className: styles_module_scss_1.default.line
+    }), (0, jsx_runtime_1.jsx)(typography_1.Typography.LightLabelS, {
+      className: styles_module_scss_1.default.text,
+      children: text
+    }), (0, jsx_runtime_1.jsx)("div", {
+      className: styles_module_scss_1.default.line
+    })]
   }));
 }

package/dist/cjs/components/NotificationPanel/components/NotificationPanelDivider/styles.module.css

@@ -1,10 +1,19 @@
-.notificationPanelDivider{
-  height:var(--size-notification-panel-readed-divider, 32px);
-  border-bottom-width:var(--border-width-notification-panel-container, 1px);
+.container{
   display:flex;
+  gap:var(--space-notification-panel-divider-gap, 8px);
   align-items:center;
   justify-content:center;
+}
+
+.text{
+  flex-grow:0;
+  flex-shrink:0;
   color:var(--sys-neutral-text-light, #8b8e9b);
+}
+
+.line{
+  flex-grow:1;
+  flex-shrink:1;
   background-color:var(--sys-neutral-background2-level, #ffffff);
   border-bottom-color:var(--sys-neutral-decor-default, #dde0ea);
   border-bottom-style:solid;

package/dist/cjs/components/NotificationPanel/components/index.d.ts

@@ -1,2 +1,3 @@
 export * from './NotificationPanelSettings';
 export * from './NotificationPanelBlank';
+export * from './NotificationCardStack';

package/dist/cjs/components/NotificationPanel/components/index.js

@@ -23,4 +23,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 __exportStar(require("./NotificationPanelSettings"), exports);
-__exportStar(require("./NotificationPanelBlank"), exports);
+__exportStar(require("./NotificationPanelBlank"), exports);
+__exportStar(require("./NotificationCardStack"), exports);