sdaia-ui 1.0.1 → 1.0.2

package/src/components/NotificationBanner/NotificationBanner.variants.ts

@@ -1,109 +0,0 @@
-/* ──────────────────────────────────────────────────────────────
- * NotificationBanner — class-name maps.
- *
- * Color values are sourced from the Figma variables bound to the
- * Notification Banner frame (JnxIDV6Ev4yznMM0njgo5i → 4254:34140).
- * We keep them as rgba literals where a design token doesn't exist
- * so the package has no hidden dependency on host-app Tailwind
- * theme keys. Dark-mode pairs accompany every surface.
- * ────────────────────────────────────────────────────────────── */
-
-/* ── Root container ───────────────────────────────────────────── */
-
-/** Shared base applied to every layout/type combination. */
-export const ROOT_BASE = [
-  'relative flex w-full max-w-[720px] overflow-hidden',
-  // background-neutral-25 (no exact token, #fcfcfd)
-  'bg-[rgba(252,252,253,1)] dark:bg-[rgba(22,22,22,1)]',
-  // border-background-white (#f3f4f6)
-  'border border-solid border-[rgba(243,244,246,1)] dark:border-[rgba(55,65,81,1)]',
-  // radius-8
-  'rounded-[8px]',
-].join(' ');
-
-/** Inline layout with a compact media slot (leading-icon / avatar / progress). */
-export const ROOT_INLINE_COMPACT = 'flex-row items-start gap-spacing-lg p-spacing-xl';
-
-/** Inline layout with an edge-to-edge image — no padding, no gap at root. */
-export const ROOT_INLINE_IMAGE = 'flex-row items-start gap-spacing-none p-spacing-none';
-
-/** Stacked layout — column with spacing-xl gap and spacing-xl padding. */
-export const ROOT_STACKED = 'flex-col items-stretch gap-spacing-xl p-spacing-xl';
-
-/* ── Featured icon (rounded-full wrapper for leading-icon) ────── */
-
-export const FEATURED_ICON_WRAPPER = [
-  'inline-flex items-center justify-center flex-shrink-0',
-  // spacing-lg (12px) padding per Figma
-  'p-spacing-lg rounded-full',
-  // background-neutral-50 (#f9fafb)
-  'bg-color-background-neutral-50 dark:bg-[rgba(31,42,55,1)]',
-].join(' ');
-
-/** Inner icon size — Figma shows 20 px fixed across breakpoints. */
-export const FEATURED_ICON_INNER = [
-  'inline-flex items-center justify-center flex-shrink-0',
-  'size-[20px]',
-  // icon-default (#161616)
-  'text-[rgba(22,22,22,1)] dark:text-[rgba(243,244,246,1)]',
-].join(' ');
-
-/* ── Avatar slot ──────────────────────────────────────────────── */
-
-/** Reserved flex-shrink-0 wrapper around the Avatar component. */
-export const AVATAR_WRAPPER = 'flex-shrink-0';
-
-/* ── Image slot ───────────────────────────────────────────────── */
-
-/** Inline layout image — 136×136 flush to the start edge. */
-export const IMAGE_INLINE = 'block size-[136px] flex-shrink-0 object-cover';
-
-/** Stacked layout image — full width, fixed height, rounded. */
-export const IMAGE_STACKED = 'block h-[180px] w-full rounded-[8px] object-cover';
-
-/* ── Content column (holds title/description + actions) ───────── */
-
-/** Default content column used for inline layouts without image. */
-export const CONTENT_COLUMN =
-  'flex flex-1 min-w-0 flex-col items-start gap-spacing-xl';
-
-/** Inline-image content column carries its own padding (root has none). */
-export const CONTENT_COLUMN_INLINE_IMAGE =
-  'flex flex-1 min-w-0 flex-col items-start gap-spacing-xl p-spacing-xl';
-
-/** Title + close button row (inline layouts). */
-export const TITLE_CLOSE_ROW = 'flex gap-spacing-lg items-start w-full';
-
-/** Title + close button row (stacked layout). */
-export const STACKED_HEADER_ROW =
-  'flex items-start justify-between w-full gap-spacing-md';
-
-/** Text block (title + description). */
-export const TEXT_BLOCK =
-  'flex flex-1 min-w-0 flex-col gap-spacing-xs items-start w-full';
-
-/** Title — text-md / semibold / 24 LH / text-display. */
-export const TITLE_CLASS = [
-  'm-0 w-full',
-  'text-text-md font-[600] leading-[24px]',
-  'text-color-display dark:text-[rgba(243,244,246,1)]',
-].join(' ');
-
-/** Description — text-sm / regular / 20 LH / text-primary-paragraph. */
-export const DESCRIPTION_CLASS = [
-  'm-0 w-full',
-  'text-text-sm font-[400] leading-[20px]',
-  // text-primary-paragraph (#384250)
-  'text-[rgba(56,66,80,1)] dark:text-[rgba(209,213,219,1)]',
-].join(' ');
-
-/* ── Actions row ──────────────────────────────────────────────── */
-
-/** LTR actions row — flex-start (default). */
-export const ACTIONS_ROW = 'flex gap-spacing-xs items-center w-full';
-
-/** RTL mirror — visually left-aligned actions per Figma RTL frames. */
-export const ACTIONS_ROW_RTL_JUSTIFY = 'justify-end';
-
-/** Progress bar row — full-width wrapper. */
-export const PROGRESS_ROW = 'w-full';

package/src/components/NotificationBanner/index.ts

@@ -1,7 +0,0 @@
-export { NotificationBanner } from './NotificationBanner';
-export type {
-  NotificationBannerProps,
-  NotificationBannerLayout,
-  NotificationBannerType,
-  NotificationBannerAvatar,
-} from './NotificationBanner.types';

package/src/components/NotificationPopup/NotificationPopup.tsx

@@ -1,147 +0,0 @@
-'use client';
-
-import { forwardRef, type ReactNode } from 'react';
-import { cn } from '../../lib/cn';
-import {
-  AlertCircle02Icon,
-  AlertCircleWarningIcon,
-  BellCircleIcon,
-  Tick02Icon,
-  XCircleIcon,
-} from '../../icons/IconFactory';
-import type {
-  NotificationPopupProps,
-  NotificationPopupType,
-} from './NotificationPopup.types';
-import {
-  ACTIONS_PAIR,
-  ACTIONS_SINGLE,
-  ACTIONS_STACKED,
-  CONTENT_WRAPPER,
-  DESCRIPTION_CLASS,
-  FEATURED_BADGE_SIZE,
-  FEATURED_BADGE_WRAPPER,
-  FEATURED_ICON_ROW,
-  FEATURED_INPUT_INNER,
-  FEATURED_INPUT_WRAPPER,
-  ROOT_BASE,
-  ROOT_WIDTH,
-  TEXT_BLOCK,
-  TITLE_CLASS,
-} from './NotificationPopup.variants';
-
-/** Default icon glyph per type — pre-built multi-color badges live in IconFactory. */
-function DefaultIcon({ type }: { type: NotificationPopupType }): ReactNode {
-  switch (type) {
-    case 'success':
-      return <Tick02Icon />;
-    case 'error':
-      return <XCircleIcon />;
-    case 'warning':
-      return <AlertCircleWarningIcon />;
-    case 'alert':
-      return <BellCircleIcon />;
-    case 'input':
-      return <AlertCircle02Icon />;
-  }
-}
-
-/** Resolves the correct actions-row wrapper class based on type. */
-function resolveActionsClass(type: NotificationPopupType): string {
-  if (type === 'alert') return ACTIONS_PAIR;
-  if (type === 'input') return ACTIONS_STACKED;
-  return ACTIONS_SINGLE;
-}
-
-export const NotificationPopup = forwardRef<HTMLDivElement, NotificationPopupProps>(
-  function NotificationPopup(
-    {
-      type = 'success',
-      title,
-      description,
-      icon,
-      actions,
-      children,
-      footer,
-      dir: dirProp,
-      rtl = false,
-      className,
-      ...rest
-    },
-    ref,
-  ) {
-    const dir = dirProp ?? (rtl ? 'rtl' : undefined);
-    const renderedIcon = icon ?? <DefaultIcon type={type} />;
-
-    /* Input uses a pale-green circle wrapper around a small glyph. Every
-     * other type renders a pre-colored badge SVG directly. */
-    const featuredIconNode =
-      type === 'input' ? (
-        <div data-slot="featured-icon" className={FEATURED_INPUT_WRAPPER}>
-          <span
-            data-slot="featured-icon-inner"
-            className={FEATURED_INPUT_INNER}
-            aria-hidden="true"
-          >
-            {renderedIcon}
-          </span>
-        </div>
-      ) : (
-        <span
-          data-slot="featured-icon"
-          aria-hidden="true"
-          className={cn(FEATURED_BADGE_WRAPPER, FEATURED_BADGE_SIZE[type])}
-        >
-          {renderedIcon}
-        </span>
-      );
-
-    return (
-      <div
-        ref={ref}
-        dir={dir}
-        data-slot="notification-popup"
-        data-type={type}
-        role="alertdialog"
-        aria-modal="false"
-        className={cn('motion-enter', ROOT_BASE, ROOT_WIDTH[type], className)}
-        {...rest}
-      >
-        {/* Header: featured icon + title + description */}
-        <div data-slot="content-wrapper" className={CONTENT_WRAPPER}>
-          <div data-slot="icon-row" className={FEATURED_ICON_ROW}>
-            {featuredIconNode}
-          </div>
-
-          <div data-slot="text" className={TEXT_BLOCK}>
-            <p className={TITLE_CLASS}>{title}</p>
-            {description ? (
-              <p className={DESCRIPTION_CLASS}>{description}</p>
-            ) : null}
-          </div>
-        </div>
-
-        {/* Input-only extra content (e.g. radio rows) */}
-        {children ? (
-          <div data-slot="content" className="w-full">
-            {children}
-          </div>
-        ) : null}
-
-        {/* Actions row */}
-        {actions ? (
-          <div data-slot="actions" className={resolveActionsClass(type)}>
-            {actions}
-          </div>
-        ) : null}
-
-        {/* Footer (e.g. consent text) */}
-        {footer ? (
-          <div data-slot="footer" className="w-full">
-            {footer}
-          </div>
-        ) : null}
-      </div>
-    );
-  },
-);

package/src/components/NotificationPopup/NotificationPopup.types.ts

@@ -1,51 +0,0 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-
-/** Visual/semantic variant — drives icon, featured-icon background, and layout differences. */
-export type NotificationPopupType = 'success' | 'error' | 'warning' | 'alert' | 'input';
-
-export interface NotificationPopupProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
-  /**
-   * Popup type.
-   * - `success` / `error` / `warning` — 360 px wide, single centered action button.
-   * - `alert` — 360 px wide, two side-by-side action buttons.
-   * - `input` — 480 px wide, supports `children` (e.g. radio rows) and `footer` (consent text),
-   *   with actions rendered as a stacked full-width column.
-   * @default 'success'
-   */
-  type?: NotificationPopupType;
-  /** Title text (required). */
-  title: ReactNode;
-  /** Supporting description text under the title. */
-  description?: ReactNode;
-  /**
-   * Override the default per-type icon.
-   * Defaults per type:
-   * - `success` → `TickIcon`
-   * - `error`   → `CloseIcon`
-   * - `warning` → `AlertCircleIcon`
-   * - `alert`   → `BellIcon`
-   * - `input`   → `AlertCircleIcon`
-   */
-  icon?: ReactNode;
-  /**
-   * Action buttons rendered in the actions row.
-   * Typically one or two `<Button />` elements — the wrapping row's layout
-   * is selected automatically based on `type`.
-   */
-  actions?: ReactNode;
-  /**
-   * Extra content rendered between the header and the actions row.
-   * Used by the `input` type for the radio-row list.
-   */
-  children?: ReactNode;
-  /**
-   * Footer content rendered under the actions row.
-   * Used by the `input` type for the consent / Privacy Policy text.
-   */
-  footer?: ReactNode;
-  /** Direction — applied to the root and drives RTL layout. */
-  dir?: 'ltr' | 'rtl';
-  /** @deprecated Use `dir="rtl"` instead. */
-  rtl?: boolean;
-}

package/src/components/NotificationPopup/NotificationPopup.variants.ts

@@ -1,145 +0,0 @@
-import type { NotificationPopupType } from './NotificationPopup.types';
-
-/* ──────────────────────────────────────────────────────────────
- * NotificationPopup — class-name maps.
- *
- * Color values are sourced from the Figma variables bound to the
- * Notification Popup frame (JnxIDV6Ev4yznMM0njgo5i → 4250:30117).
- * Values that don't map to an existing global token are kept as
- * rgba literals alongside the Figma variable name in a comment.
- * Dark-mode pairs accompany every surface.
- * ────────────────────────────────────────────────────────────── */
-
-/* ── Root container ───────────────────────────────────────────── */
-
-export const ROOT_BASE = [
-  'relative flex flex-col items-start overflow-hidden',
-  // gap-3xl / p-3xl (24px)
-  'gap-spacing-3xl p-spacing-3xl',
-  // radius-24
-  'rounded-[24px]',
-  // background-neutral-25 (#fcfcfd) + dark neutral
-  'bg-[rgba(252,252,253,1)] dark:bg-[rgba(22,22,22,1)]',
-  // border-background-white (#f3f4f6) + dark neutral
-  'border border-solid border-[rgba(243,244,246,1)] dark:border-[rgba(55,65,81,1)]',
-  // Responsive width — phone fluid, desktop capped
-  'w-full',
-].join(' ');
-
-/** Width per type — Input is 480 px wide, all others are 360 px. */
-export const ROOT_WIDTH: Record<NotificationPopupType, string> = {
-  success: 'max-w-[360px]',
-  error: 'max-w-[360px]',
-  warning: 'max-w-[360px]',
-  alert: 'max-w-[360px]',
-  input: 'max-w-[480px]',
-};
-
-/* ── Content wrapper (icon + text block) ──────────────────────── */
-
-export const CONTENT_WRAPPER =
-  'flex flex-col gap-spacing-xl items-start w-full';
-
-/** Featured-icon row — featured icon is centered at the top. */
-export const FEATURED_ICON_ROW =
-  'flex items-center justify-center w-full';
-
-/** Text block — title + description, centered. */
-export const TEXT_BLOCK =
-  'flex flex-col gap-spacing-md items-center text-center w-full';
-
-export const TITLE_CLASS = [
-  'm-0 w-full',
-  // text-xl / semibold / 30 LH
-  'text-text-xl font-[600] leading-[30px]',
-  // text-display (#1f2a37)
-  'text-color-display dark:text-[rgba(243,244,246,1)]',
-].join(' ');
-
-export const DESCRIPTION_CLASS = [
-  'm-0 w-full',
-  // text-sm / regular / 20 LH
-  'text-text-sm font-[400] leading-[20px]',
-  // text-primary-paragraph (#384250)
-  'text-[rgba(56,66,80,1)] dark:text-[rgba(209,213,219,1)]',
-].join(' ');
-
-/* ── Featured icon slot ───────────────────────────────────────────
- *
- * For Success / Error / Warning / Alert we use pre-built badge SVGs
- * (Tick02Icon, XCircleIcon, AlertCircleWarningIcon, BellCircleIcon)
- * that already paint the colored circle background. The slot therefore
- * only needs to reserve the correct outer size — no padding, no tint.
- *
- * For Input we wrap the simple AlertCircle02Icon glyph in a pale-green
- * circle (Figma: background-primary-50 / icon-success) with p-spacing-xl
- * to match the original "featured icon" treatment.
- * ──────────────────────────────────────────────────────────────── */
-
-/**
- * Outer box size for the pre-built badge icons.
- *   Success / Error / Warning / Input → 64 × 64 (p-16 + 32-glyph)
- *   Alert                              → 60 × 60 (p-16 + 28-bell)
- */
-export const FEATURED_BADGE_SIZE: Record<NotificationPopupType, string> = {
-  success: 'size-[64px]',
-  error: 'size-[64px]',
-  warning: 'size-[64px]',
-  alert: 'size-[60px]',
-  input: 'size-[64px]',
-};
-
-/** Plain flex wrapper used for SEWA — the SVG paints its own circle. */
-export const FEATURED_BADGE_WRAPPER =
-  'inline-flex items-center justify-center flex-shrink-0';
-
-/**
- * Input-specific featured-icon wrapper — pale-green circle carrying the
- * small alert glyph. Stays in the codebase because the Input glyph is a
- * single-color 32 × 32 icon, not a pre-built badge.
- *   bg   → background-primary-50 (#f3fcf6)
- */
-export const FEATURED_INPUT_WRAPPER = [
-  'inline-flex items-center justify-center flex-shrink-0',
-  'p-spacing-xl rounded-full',
-  'bg-[rgba(243,252,246,1)] dark:bg-[rgba(20,52,36,1)]',
-].join(' ');
-
-/** Inner glyph size for the Input featured icon. */
-export const FEATURED_INPUT_INNER = 'inline-flex items-center justify-center flex-shrink-0 size-[32px]';
-
-/* ── Actions rows (layout differs by type) ────────────────────── */
-
-/** Success / Error / Warning — single centered button with px-7xl padding. */
-export const ACTIONS_SINGLE =
-  'flex items-center justify-center gap-spacing-none px-spacing-7xl w-full';
-
-/** Alert — two side-by-side buttons, gap-md, both flex-1. */
-export const ACTIONS_PAIR =
-  'flex items-center justify-center gap-spacing-md w-full';
-
-/** Input — stacked full-width buttons, gap-md, px-xl. */
-export const ACTIONS_STACKED =
-  'flex flex-col items-center justify-center gap-spacing-md px-spacing-xl w-full';
-
-/* ── Input-only: radio content block + footer ─────────────────── */
-
-export const INPUT_CONTENT =
-  'flex flex-col gap-spacing-lg items-start w-full';
-
-export const INPUT_CONTENT_TITLE = [
-  'm-0 w-full text-center',
-  // text-md / semibold / 24 LH
-  'text-text-md font-[600] leading-[24px]',
-  'text-color-display dark:text-[rgba(243,244,246,1)]',
-].join(' ');
-
-export const INPUT_ROWS_LIST =
-  'flex flex-col gap-spacing-lg items-stretch w-full';
-
-export const INPUT_FOOTER = [
-  'm-0 w-full text-center',
-  'text-text-sm font-[400] leading-[20px]',
-  // text-secondary-paragraph (#6c737f)
-  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]',
-].join(' ');

package/src/components/NotificationPopup/index.ts

@@ -1,5 +0,0 @@
-export { NotificationPopup } from './NotificationPopup';
-export type {
-  NotificationPopupProps,
-  NotificationPopupType,
-} from './NotificationPopup.types';

package/src/components/Notifications/Notifications.tsx

@@ -1,209 +0,0 @@
-'use client';
-
-import { forwardRef, useState, useCallback, Fragment } from 'react';
-import { cn } from '../../lib/cn';
-import { Button } from '../Button';
-import { Divider } from '../Divider';
-import { HorizontalTabs } from '../HorizontalTabs';
-import { ActivityItem } from '../ActivityItem';
-import type { NotificationsProps } from './Notifications.types';
-import { CloseIcon } from '../../icons/IconFactory';
-import {
-  PANEL,
-  HEADER_ROW,
-  HEADER_TITLE,
-  TABS_ROW,
-  TABS_UNDERLINE,
-  MARK_ALL_BTN,
-  FEED_AREA,
-  GROUP_LABEL,
-} from './Notifications.variants';
-
-const DEFAULT_TABS = [
-  { value: 'all', label: 'All' },
-  { value: 'direct', label: 'Direct' },
-];
-
-/**
- * Notifications — a fixed-width notification panel composed from
- * HorizontalTabs (sub-header) and ActivityItem rows grouped by time.
- *
- * Structure:
- *   ┌────────────────────────────────┐
- *   │ Header row: Title  [×]         │  border-b
- *   ├────────────────────────────────┤
- *   │ [All] [Direct]   Mark all read │  border-b (HorizontalTabs underline)
- *   ├────────────────────────────────┤
- *   │ Today                          │
- *   │   ActivityItem …               │
- *   │   ─────────────────────────── │  <Divider /> (full-width)
- *   │   ActivityItem …               │
- *   │   ───────────── (indented)     │  <Divider length="inset-start" /> (ps-spacing-3xl)
- *   │ Yesterday                      │
- *   │   ActivityItem …               │
- *   └────────────────────────────────┘
- *
- * Tab content:
- *   Pass `groupsByTab` to supply a different group list per tab value.
- *   Falls back to `groups` for tabs without a specific entry.
- *
- * RTL: a single `dir="rtl"` on the root cascades to all children —
- * HorizontalTabs, ActivityItems, flex rows all mirror automatically.
- */
-export const Notifications = forwardRef<HTMLDivElement, NotificationsProps>(
-  function Notifications(
-    {
-      title = 'Notifications',
-      tabs,
-      activeTab,
-      onTabChange,
-      onMarkAllRead,
-      onClose,
-      groups = [],
-      groupsByTab,
-      rtl = false,
-      className,
-      ...rest
-    },
-    ref,
-  ) {
-    const resolvedTabs = tabs ?? DEFAULT_TABS;
-
-    /* ── Tab selection: controlled / uncontrolled ──────────────── */
-    const isControlled = activeTab !== undefined;
-    const [internalTab, setInternalTab] = useState<string>(
-      resolvedTabs[0]?.value ?? 'all',
-    );
-    const selectedTab = isControlled ? activeTab! : internalTab;
-
-    const handleTabChange = useCallback(
-      (next: string) => {
-        if (!isControlled) setInternalTab(next);
-        onTabChange?.(next);
-      },
-      [isControlled, onTabChange],
-    );
-
-    /* ── Resolve which groups to display for the active tab ─────── */
-    const displayGroups = groupsByTab?.[selectedTab] ?? groups;
-
-    return (
-      <div
-        ref={ref}
-        data-slot="notifications"
-        dir={rtl ? 'rtl' : undefined}
-        className={cn(PANEL, className)}
-        {...rest}
-      >
-        {/* ── Header ─────────────────────────────────────────── */}
-        <div className={HEADER_ROW}>
-          <h2 className={HEADER_TITLE}>{title}</h2>
-
-          {onClose && (
-            <Button
-              variant="transparent"
-              size="sm"
-              iconOnly
-              leadingIcon={<CloseIcon />}
-              aria-label="Close notifications"
-              onClick={onClose}
-            />
-          )}
-        </div>
-
-        {/* ── Tabs sub-header ────────────────────────────────── */}
-        <div className={TABS_ROW}>
-          <div className="flex-1 min-w-0">
-            <HorizontalTabs
-              type="underline"
-              items={resolvedTabs}
-              value={selectedTab}
-              onValueChange={handleTabChange}
-            />
-          </div>
-
-          {onMarkAllRead && (
-            <button
-              type="button"
-              className={MARK_ALL_BTN}
-              onClick={onMarkAllRead}
-            >
-              Mark all as Read
-            </button>
-          )}
-
-          {/* Full-width gray baseline — extends across HorizontalTabs and
-              the Mark-all button area. The active tab's green border-b-[2px]
-              sits on top of this line automatically.                       */}
-          <div aria-hidden="true" className={TABS_UNDERLINE} />
-        </div>
-
-        {/* ── Feed groups ────────────────────────────────────── */}
-        {displayGroups.length > 0 && (
-          <div className={FEED_AREA}>
-            {/*
-             * flatMap builds an explicit flat list of React nodes so flex gap
-             * is always applied correctly between every sibling — avoids the
-             * Fragment + flex-gap edge-case where the group separator could be
-             * swallowed.
-             *
-             * Rendered DOM order (for 2+ groups):
-             *   <div.group>        ← group 0
-             *   <div.group-divider-wrap>  ← indented separator
-             *   <div.group>        ← group 1
-             *   …
-             */}
-            {displayGroups.flatMap((group, gi) => {
-              /* ── Group block ──────────────────────────────── */
-              const groupBlock = (
-                <div key={`group-${gi}`} className="flex flex-col gap-spacing-lg">
-                  <span className={GROUP_LABEL}>{group.label}</span>
-
-                  {/*
-                   * Items use gap-spacing-lg between ALL direct children
-                   * (items + dividers) — same rhythm as Activity divider=true.
-                   *
-                   * Layout per pair:
-                   *   ActivityItem → 12 px gap → <Divider length="inset-start" /> (1 px) → 12 px gap → ActivityItem
-                   */}
-                  <div className="flex flex-col gap-spacing-lg">
-                    {group.items.map((item, ii) => (
-                      <Fragment key={ii}>
-                        {ii > 0 && (
-                          <Divider data-slot="notifications-item-divider" length="inset-start" />
-                        )}
-                        <ActivityItem
-                          {...item}
-                          rtl={rtl || item.rtl}
-                          /* Override ActivityItem's mobile width cap so items
-                           * fill the notification panel's content column.   */
-                          className={cn(
-                            'w-full min-w-0 max-w-none md:max-w-none',
-                            item.className,
-                          )}
-                        />
-                      </Fragment>
-                    ))}
-                  </div>
-                </div>
-              );
-
-              if (gi === 0) return [groupBlock];
-
-              /* ── Group separator (inset-start = indented past the avatar) */
-              const separator = (
-                <Divider
-                  key={`sep-${gi}`}
-                  data-slot="notifications-group-divider"
-                  length="inset-start"
-                />
-              );
-
-              return [separator, groupBlock];
-            })}
-          </div>
-        )}
-      </div>
-    );
-  },
-);