@alfadocs/ui-kit-debug 0.69.0 → 0.71.0

package/dist/_chunks/notification-card-BMqNzCIt.js

@@ -0,0 +1,290 @@
+import { jsx as a, jsxs as l } from "react/jsx-runtime";
+import { forwardRef as W, useMemo as E, useState as H, useRef as X, useCallback as q } from "react";
+import { c as G } from "./index-D2ZczOXr.js";
+import { useTranslation as J } from "react-i18next";
+import { I as O } from "./icon-button-LqoiKcUN.js";
+import { B as K } from "./button-DD_0Xdmr.js";
+import { T as Q } from "./timestamp-BV2lC-wV.js";
+import { X as Y } from "./x-CCcI3eJp.js";
+const Z = G(
+  [
+    // `group` so the hover/focus-revealed close button can react to the whole
+    // row, not just itself.
+    "ds:group ds:relative ds:flex ds:gap-[var(--spacing-sm)]",
+    "ds:rounded-[var(--radius-sm)]",
+    "ds:transition-colors",
+    // Mount: fade + slide-down so a fresh notification reads as arriving.
+    // `data-leaving=true` plays the matching exit, driven by the owning
+    // tray's AnimatePresence loop.
+    "ds:motion-safe:animate-in ds:motion-safe:fade-in-0 ds:motion-safe:slide-in-from-top-2 ds:motion-safe:duration-[var(--animation-duration)]",
+    "ds:data-[leaving=true]:motion-safe:animate-out ds:data-[leaving=true]:motion-safe:fade-out-0 ds:data-[leaving=true]:motion-safe:slide-out-to-top-2",
+    // Pin the exit's end-state until React unmounts. Without `fill-mode-forwards`
+    // tw-animate-css leaves the element at opacity:1 for one paint frame after
+    // the animation ends — the "flicker before it animates away" bug.
+    "ds:data-[leaving=true]:motion-safe:fill-mode-forwards",
+    "ds:data-[leaving=true]:pointer-events-none",
+    "ds:motion-reduce:transition-none",
+    "ds:text-start",
+    // Compact rows are borderless (flat list — the tray panel is the frame);
+    // the dashboard variant adds its own card border below. Forced-colors keeps
+    // a border on both so rows stay separated in High Contrast Mode.
+    "ds:forced-colors:border ds:forced-colors:border-[CanvasText]"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        // Flat rows by default; the accessible (AAA) theme restores a hairline
+        // row divider so consecutive rows keep a visible boundary.
+        compact: "ds:items-start ds:[.theme-accessible_&]:border-b ds:[.theme-accessible_&]:border-[color:var(--card-border)]",
+        dashboard: "ds:flex-col ds:sm:flex-row ds:items-stretch ds:sm:items-start ds:border ds:border-[color:var(--card-border)] ds:[.theme-accessible_&]:border-2 ds:shadow-[var(--shadow-card)] ds:bg-[color:var(--card)]"
+      },
+      size: {
+        sm: "ds:p-[var(--spacing-sm)]",
+        md: "ds:p-[var(--spacing-md)]"
+      },
+      state: {
+        unread: "",
+        read: "ds:bg-transparent"
+      },
+      // Compact-row chrome: flat (tray) vs elevated (own card on a rail).
+      // Mirrors AppointmentCard's `surface` so a rail feed of mixed cards
+      // reads consistently.
+      surface: {
+        flat: "",
+        elevated: "ds:border ds:border-[color:var(--card-border)] ds:[.theme-accessible_&]:border-2 ds:shadow-[var(--shadow-sm)]"
+      }
+    },
+    compoundVariants: [
+      // Compact rows no longer tint the background for unread — the read state
+      // is carried by the icon's corner status ball instead. Both states
+      // share the same neutral hover.
+      {
+        variant: "compact",
+        state: "unread",
+        class: "ds:hover:bg-[color:var(--muted)]/40"
+      },
+      {
+        variant: "compact",
+        state: "read",
+        class: "ds:hover:bg-[color:var(--muted)]/40"
+      },
+      {
+        variant: "dashboard",
+        state: "unread",
+        class: "ds:bg-[color:var(--accent)]/5"
+      }
+    ],
+    defaultVariants: {
+      variant: "compact",
+      size: "sm",
+      state: "read",
+      surface: "flat"
+    }
+  }
+), S = [
+  "ds:focus-visible:outline-none",
+  "ds:after:content-[''] ds:after:absolute ds:after:inset-0 ds:after:rounded-[var(--radius-sm)]",
+  "ds:after:pointer-events-auto",
+  "ds:focus-visible:after:outline-[length:var(--focus-ring-width)]",
+  "ds:focus-visible:after:outline-solid",
+  "ds:focus-visible:after:outline-[color:var(--ring)]",
+  "ds:focus-visible:after:outline-offset-[length:var(--focus-ring-offset)]",
+  "ds:forced-colors:focus-visible:after:outline-[CanvasText]"
+].join(" ");
+function A(s) {
+  return /^(https?:\/\/(?!\/)|\/(?!\/)|#)/.test(s);
+}
+const ss = W(
+  ({
+    item: s,
+    variant: r = "compact",
+    surface: j = "flat",
+    size: v = "sm",
+    onActivate: o,
+    onToggleRead: b,
+    onDismiss: d,
+    ctaLabel: c,
+    dismissLabel: u,
+    leaving: g,
+    className: M,
+    ...V
+  }, _) => {
+    const { t: n, i18n: h } = J(), B = E(() => {
+      const e = new Date(s.createdAt);
+      return Number.isNaN(e.getTime()) ? "" : new Intl.DateTimeFormat(h.language, {
+        dateStyle: "medium",
+        timeStyle: "short"
+      }).format(e);
+    }, [s.createdAt, h.language]), f = g !== void 0, [I, P] = H(!1), m = X(null), x = f ? g : I, w = typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches, y = q(() => {
+      if (!d) return;
+      if (f || w) {
+        d(s);
+        return;
+      }
+      P(!0), m.current && clearTimeout(m.current);
+      const e = typeof window < "u" && window.getComputedStyle(document.documentElement).getPropertyValue("--animation-duration") || "200ms", T = e.trim().endsWith("ms") ? parseFloat(e) : parseFloat(e) * 1e3;
+      m.current = setTimeout(
+        () => d(s),
+        Number.isFinite(T) ? T : 200
+      );
+    }, [d, s, f, w]), R = s.read ? "read" : "unread", $ = s.read ? "" : n("notificationCard.unreadSuffix", ", unread"), N = n("notificationCard.itemLabel", {
+      title: s.title,
+      time: B,
+      unreadSuffix: $,
+      defaultValue: "{{title}}, {{time}}{{unreadSuffix}}"
+    }), p = !!s.url && A(s.url), F = v === "md" ? "ds:top-[var(--spacing-md)] ds:end-[var(--spacing-md)]" : "ds:top-[var(--spacing-sm)] ds:end-[var(--spacing-sm)]", C = "ds:absolute ds:top-[calc(var(--spacing-xs)*-1)] ds:end-[calc(var(--spacing-xs)*-1)] ds:z-[1]", D = "ds:block ds:size-[calc(var(--spacing-sm)+var(--spacing-xs))] ds:rounded-[var(--radius-full)] ds:bg-[color:var(--primary)] ds:ring-2 ds:ring-[color:var(--card)] ds:forced-colors:bg-[Highlight]", L = "ds:block ds:size-[calc(var(--spacing-sm)+var(--spacing-xs))] ds:rounded-[var(--radius-full)] ds:bg-[color:var(--card)] ds:border-2 ds:border-[color:color-mix(in_srgb,var(--muted-foreground)_55%,transparent)] ds:forced-colors:border-[CanvasText]", U = 'ds:cursor-pointer ds:outline-none ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:forced-colors:focus-visible:outline-[CanvasText] ds:before:absolute ds:before:inset-x-[calc((var(--min-target-size)-100%)/-2)] ds:before:inset-y-[calc((var(--min-target-size)-100%)/-2)] ds:before:content-[""] ds:sm:before:hidden', k = s.read ? L : D, z = r !== "compact" ? null : b ? /* @__PURE__ */ a(
+      "button",
+      {
+        type: "button",
+        onClick: () => b(s),
+        "aria-label": s.read ? n("notificationCard.markAsUnread", "Mark as unread") : n("notificationCard.markAsRead", "Mark as read"),
+        className: `${C} ${k} ${U}`
+      }
+    ) : /* @__PURE__ */ a("span", { "aria-hidden": "true", className: `${C} ${k}` }), i = /* @__PURE__ */ a(
+      "span",
+      {
+        className: [
+          "ds:flex-1 ds:min-w-0 ds:truncate",
+          s.read ? "ds:font-normal" : "ds:font-semibold"
+        ].join(" "),
+        children: s.title
+      }
+    );
+    let t;
+    return r === "compact" && p && o ? t = /* @__PURE__ */ a(
+      "a",
+      {
+        href: s.url,
+        "aria-label": N,
+        className: S + " ds:contents",
+        onClick: (e) => {
+          e.defaultPrevented || e.metaKey || e.ctrlKey || e.shiftKey || (e.preventDefault(), o(s));
+        },
+        children: i
+      }
+    ) : r === "compact" && o ? t = /* @__PURE__ */ a(
+      "button",
+      {
+        type: "button",
+        "aria-label": N,
+        className: S + " ds:contents ds:bg-transparent ds:border-0 ds:p-0",
+        onClick: () => o(s),
+        children: i
+      }
+    ) : r === "dashboard" && p && o ? t = /* @__PURE__ */ a(
+      "a",
+      {
+        href: s.url,
+        className: "ds:text-[color:var(--foreground)] ds:no-underline ds:hover:underline ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+        onClick: (e) => {
+          e.defaultPrevented || e.metaKey || e.ctrlKey || e.shiftKey || (e.preventDefault(), o(s));
+        },
+        children: i
+      }
+    ) : t = i, /* @__PURE__ */ l(
+      "div",
+      {
+        ref: _,
+        role: "listitem",
+        "data-component": "notification-card",
+        "data-component-id": s.id,
+        "data-read": s.read ? "true" : "false",
+        "data-leaving": x ? "true" : void 0,
+        "aria-hidden": x || void 0,
+        className: Z({
+          variant: r,
+          size: v,
+          state: R,
+          // Elevated chrome only applies to the compact row; the dashboard
+          // variant brings its own border + shadow.
+          surface: r === "compact" ? j : "flat",
+          className: M
+        }),
+        ...V,
+        children: [
+          s.icon || z ? /* @__PURE__ */ l("span", { className: "ds:relative ds:size-8 ds:shrink-0", children: [
+            s.icon ? /* @__PURE__ */ a(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "ds:inline-flex ds:size-8 ds:items-center ds:justify-center ds:rounded-[var(--radius-full)] ds:bg-[color:var(--accent)]/10 ds:text-[color:var(--accent)] ds:[&>svg]:size-4",
+                children: s.icon
+              }
+            ) : null,
+            z
+          ] }) : null,
+          /* @__PURE__ */ l("div", { className: "ds:flex-1 ds:min-w-0 ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
+            /* @__PURE__ */ a("div", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-sm)]", children: r === "dashboard" ? (
+              // `h3` keeps the dashboard heading ladder continuous:
+              // h1 (page) → h2 (WarningStack + NotificationsPanel) → h3 (notification title).
+              /* @__PURE__ */ a("h3", { className: "ds:m-0 ds:flex-1 ds:min-w-0 type-title-item", children: t })
+            ) : /* @__PURE__ */ a("span", { className: "ds:flex-1 ds:min-w-0 type-title-item ds:text-[color:var(--foreground)]", children: t }) }),
+            s.description ? /* @__PURE__ */ a("p", { className: "ds:m-0 type-body-sm ds:text-[color:var(--muted-foreground)] ds:[overflow:hidden] ds:[display:-webkit-box] ds:[-webkit-box-orient:vertical] ds:[-webkit-line-clamp:2] ds:break-words", children: s.description }) : null,
+            /* @__PURE__ */ a(
+              Q,
+              {
+                value: s.createdAt,
+                shape: "chip",
+                size: "sm",
+                relativeWindow: 720 * 60 * 1e3
+              }
+            ),
+            r === "dashboard" && (c || u) ? /* @__PURE__ */ l("div", { className: "ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-sm)]", children: [
+              c && p ? /* @__PURE__ */ a(
+                K,
+                {
+                  intent: "outline",
+                  size: "sm",
+                  asChild: !0,
+                  className: "ds:relative ds:z-[1]",
+                  children: /* @__PURE__ */ a(
+                    "a",
+                    {
+                      href: s.url,
+                      onClick: (e) => {
+                        e.defaultPrevented || e.metaKey || e.ctrlKey || e.shiftKey || (e.preventDefault(), o == null || o(s));
+                      },
+                      children: c
+                    }
+                  )
+                }
+              ) : null,
+              u && d ? /* @__PURE__ */ a(
+                K,
+                {
+                  intent: "link",
+                  size: "sm",
+                  onClick: y,
+                  className: "ds:relative ds:z-[1]",
+                  children: u
+                }
+              ) : null
+            ] }) : null
+          ] }),
+          r === "compact" && d ? /* @__PURE__ */ a(
+            "span",
+            {
+              className: "ds:absolute ds:z-[2] ds:opacity-0 ds:pointer-events-none ds:transition-opacity ds:motion-reduce:transition-none ds:group-hover:opacity-100 ds:group-hover:pointer-events-auto ds:group-focus-within:opacity-100 ds:group-focus-within:pointer-events-auto " + F,
+              children: /* @__PURE__ */ a(
+                O,
+                {
+                  icon: /* @__PURE__ */ a(Y, {}),
+                  intent: "ghost",
+                  size: "sm",
+                  "aria-label": n("notificationCard.dismiss", "Dismiss notification"),
+                  onClick: y
+                }
+              )
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+ss.displayName = "NotificationCard";
+export {
+  ss as N,
+  A as i
+};
+//# sourceMappingURL=notification-card-BMqNzCIt.js.map

package/dist/_chunks/notification-card-BMqNzCIt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-card-BMqNzCIt.js","sources":["../../src/components/notification-card/notification-card.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { X } from 'lucide-react';\nimport { IconButton } from '../button/icon-button';\nimport { Button } from '../button/button';\nimport { Timestamp } from '../timestamp';\n\n/* ------------------------------------------------------------------ */\n/* Types                                                               */\n/* ------------------------------------------------------------------ */\n\nexport interface NotificationItem {\n  /** Unique identifier for the notification. */\n  id: string;\n  /** Notification title — rendered on the first line. */\n  title: string;\n  /** Notification body — rendered as plain text. */\n  description?: string;\n  /** Optional leading glyph — a React node (usually a Lucide icon). */\n  icon?: ReactNode;\n  /** Optional action URL — when present the card title is an anchor. */\n  url?: string;\n  /** ISO-8601 timestamp of when the notification was created. */\n  createdAt: string;\n  /** Whether the notification has been seen. Unread items get accent styling. */\n  read?: boolean;\n}\n\nexport interface NotificationCardProps\n  extends\n    Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'role' | 'title'>,\n    VariantProps<typeof cardVariants> {\n  /** The notification to render. */\n  item: NotificationItem;\n  /**\n   * Layout shape.\n   * - `compact` — single-line row with the whole card clickable (used by\n   *   NotificationTray).\n   * - `dashboard` — alert-style block with explicit CTA and mark-as-read\n   *   controls (used by dashboards / sidebars).\n   */\n  variant?: 'compact' | 'dashboard';\n  /**\n   * Row chrome for the `compact` variant (ignored for `dashboard`, which\n   * always carries its own card border). `'flat'` (default) — chrome-less row\n   * for use inside a bordered tray. `'elevated'` — each row carries its own\n   * card chrome (border + `--shadow-sm`), matching `AppointmentCard` /\n   * `ClinicalNoteCard` for placing rows directly on a rail (e.g. the Inbox).\n   */\n  surface?: 'flat' | 'elevated';\n  /** Visual density. */\n  size?: 'sm' | 'md';\n  /** Fires when the card title / body is activated. */\n  onActivate?: (item: NotificationItem) => void;\n  /**\n   * Fires when the read/unread status ball (the corner badge on the category\n   * icon) is activated. Supply to make the ball an interactive toggle; omit and\n   * it renders as a static read-state indicator.\n   */\n  onToggleRead?: (item: NotificationItem) => void;\n  /** Fires when the dismiss control is activated. */\n  onDismiss?: (item: NotificationItem) => void;\n  /**\n   * Label for the dashboard-variant CTA. Only rendered when `variant` is\n   * `'dashboard'` and the item has a `url`.\n   */\n  ctaLabel?: string;\n  /**\n   * Label for the dashboard-variant mark-as-read link. Only rendered when\n   * `variant` is `'dashboard'` and `onDismiss` is supplied.\n   */\n  dismissLabel?: string;\n  /**\n   * External exit-animation control. When supplied the card plays its\n   * fade-out when this turns `true` and the consumer owns the subsequent\n   * unmount (see NotificationTray). If omitted, the card self-manages the\n   * exit on internal dismiss.\n   */\n  leaving?: boolean;\n}\n\n/* ------------------------------------------------------------------ */\n/* CVA                                                                 */\n/* ------------------------------------------------------------------ */\n\nconst cardVariants = cva(\n  [\n    // `group` so the hover/focus-revealed close button can react to the whole\n    // row, not just itself.\n    'ds:group ds:relative ds:flex ds:gap-[var(--spacing-sm)]',\n    'ds:rounded-[var(--radius-sm)]',\n    'ds:transition-colors',\n    // Mount: fade + slide-down so a fresh notification reads as arriving.\n    // `data-leaving=true` plays the matching exit, driven by the owning\n    // tray's AnimatePresence loop.\n    'ds:motion-safe:animate-in ds:motion-safe:fade-in-0 ds:motion-safe:slide-in-from-top-2 ds:motion-safe:duration-[var(--animation-duration)]',\n    'ds:data-[leaving=true]:motion-safe:animate-out ds:data-[leaving=true]:motion-safe:fade-out-0 ds:data-[leaving=true]:motion-safe:slide-out-to-top-2',\n    // Pin the exit's end-state until React unmounts. Without `fill-mode-forwards`\n    // tw-animate-css leaves the element at opacity:1 for one paint frame after\n    // the animation ends — the \"flicker before it animates away\" bug.\n    'ds:data-[leaving=true]:motion-safe:fill-mode-forwards',\n    'ds:data-[leaving=true]:pointer-events-none',\n    'ds:motion-reduce:transition-none',\n    'ds:text-start',\n    // Compact rows are borderless (flat list — the tray panel is the frame);\n    // the dashboard variant adds its own card border below. Forced-colors keeps\n    // a border on both so rows stay separated in High Contrast Mode.\n    'ds:forced-colors:border ds:forced-colors:border-[CanvasText]',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        // Flat rows by default; the accessible (AAA) theme restores a hairline\n        // row divider so consecutive rows keep a visible boundary.\n        compact:\n          'ds:items-start ds:[.theme-accessible_&]:border-b ds:[.theme-accessible_&]:border-[color:var(--card-border)]',\n        dashboard:\n          'ds:flex-col ds:sm:flex-row ds:items-stretch ds:sm:items-start ds:border ds:border-[color:var(--card-border)] ds:[.theme-accessible_&]:border-2 ds:shadow-[var(--shadow-card)] ds:bg-[color:var(--card)]',\n      },\n      size: {\n        sm: 'ds:p-[var(--spacing-sm)]',\n        md: 'ds:p-[var(--spacing-md)]',\n      },\n      state: {\n        unread: '',\n        read: 'ds:bg-transparent',\n      },\n      // Compact-row chrome: flat (tray) vs elevated (own card on a rail).\n      // Mirrors AppointmentCard's `surface` so a rail feed of mixed cards\n      // reads consistently.\n      surface: {\n        flat: '',\n        elevated:\n          'ds:border ds:border-[color:var(--card-border)] ds:[.theme-accessible_&]:border-2 ds:shadow-[var(--shadow-sm)]',\n      },\n    },\n    compoundVariants: [\n      // Compact rows no longer tint the background for unread — the read state\n      // is carried by the icon's corner status ball instead. Both states\n      // share the same neutral hover.\n      {\n        variant: 'compact',\n        state: 'unread',\n        class: 'ds:hover:bg-[color:var(--muted)]/40',\n      },\n      {\n        variant: 'compact',\n        state: 'read',\n        class: 'ds:hover:bg-[color:var(--muted)]/40',\n      },\n      {\n        variant: 'dashboard',\n        state: 'unread',\n        class: 'ds:bg-[color:var(--accent)]/5',\n      },\n    ],\n    defaultVariants: {\n      variant: 'compact',\n      size: 'sm',\n      state: 'read',\n      surface: 'flat',\n    },\n  },\n);\n\nconst stretchedLinkClass = [\n  'ds:focus-visible:outline-none',\n  \"ds:after:content-[''] ds:after:absolute ds:after:inset-0 ds:after:rounded-[var(--radius-sm)]\",\n  'ds:after:pointer-events-auto',\n  'ds:focus-visible:after:outline-[length:var(--focus-ring-width)]',\n  'ds:focus-visible:after:outline-solid',\n  'ds:focus-visible:after:outline-[color:var(--ring)]',\n  'ds:focus-visible:after:outline-offset-[length:var(--focus-ring-offset)]',\n  'ds:forced-colors:focus-visible:after:outline-[CanvasText]',\n].join(' ');\n\n/* ------------------------------------------------------------------ */\n/* Helpers                                                             */\n/* ------------------------------------------------------------------ */\n\nexport function isSafeNotificationUrl(url: string): boolean {\n  // Reject protocol-relative (//host), javascript:, data:, mailto: etc.\n  // Only http(s), same-origin absolute paths (/), and hash (#) anchors pass.\n  return /^(https?:\\/\\/(?!\\/)|\\/(?!\\/)|#)/.test(url);\n}\n\n/* ------------------------------------------------------------------ */\n/* Component                                                           */\n/* ------------------------------------------------------------------ */\n\nexport const NotificationCard = forwardRef<\n  HTMLDivElement,\n  NotificationCardProps\n>(\n  (\n    {\n      item,\n      variant = 'compact',\n      surface = 'flat',\n      size = 'sm',\n      onActivate,\n      onToggleRead,\n      onDismiss,\n      ctaLabel,\n      dismissLabel,\n      leaving,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { t, i18n } = useTranslation();\n    // Screen-reader time context — absolute & unambiguous rather than the\n    // visible relative phrase, which drifts and reads less clearly aloud.\n    const accessibleTime = useMemo(() => {\n      const date = new Date(item.createdAt);\n      if (Number.isNaN(date.getTime())) return '';\n      return new Intl.DateTimeFormat(i18n.language, {\n        dateStyle: 'medium',\n        timeStyle: 'short',\n      }).format(date);\n    }, [item.createdAt, i18n.language]);\n\n    /* Exit animation.\n     * - When `leaving` is undefined (uncontrolled): the card owns the\n     *   fade-out — dismiss click flips `isLeaving`, waits for\n     *   --animation-duration, then fires onDismiss.\n     * - When `leaving` is boolean (controlled, e.g. NotificationTray): the\n     *   parent owns the lifecycle — dismiss click fires onDismiss\n     *   immediately and the parent schedules unmount after the animation. */\n    const isControlledLeaving = leaving !== undefined;\n    const [isLeaving, setIsLeaving] = useState(false);\n    const dismissTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    const effectiveLeaving = isControlledLeaving ? leaving : isLeaving;\n\n    const prefersReducedMotion =\n      typeof window !== 'undefined' &&\n      typeof window.matchMedia === 'function' &&\n      window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n    const handleDismiss = useCallback(() => {\n      if (!onDismiss) return;\n      if (isControlledLeaving || prefersReducedMotion) {\n        onDismiss(item);\n        return;\n      }\n      setIsLeaving(true);\n      if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current);\n      const raw =\n        (typeof window !== 'undefined' &&\n          window\n            .getComputedStyle(document.documentElement)\n            .getPropertyValue('--animation-duration')) ||\n        '200ms';\n      const ms = raw.trim().endsWith('ms')\n        ? parseFloat(raw)\n        : parseFloat(raw) * 1000;\n      dismissTimerRef.current = setTimeout(\n        () => onDismiss(item),\n        Number.isFinite(ms) ? ms : 200,\n      );\n    }, [onDismiss, item, isControlledLeaving, prefersReducedMotion]);\n\n    const state = item.read ? 'read' : 'unread';\n\n    const unreadSuffix = item.read\n      ? ''\n      : t('notificationCard.unreadSuffix', ', unread');\n    const ariaLabel = t('notificationCard.itemLabel', {\n      title: item.title,\n      time: accessibleTime,\n      unreadSuffix,\n      defaultValue: '{{title}}, {{time}}{{unreadSuffix}}',\n    });\n\n    const hasSafeUrl = !!item.url && isSafeNotificationUrl(item.url);\n\n    // Close insets track the card padding so it aligns with the title's first\n    // line at either size.\n    const closeInset =\n      size === 'md'\n        ? 'ds:top-[var(--spacing-md)] ds:end-[var(--spacing-md)]'\n        : 'ds:top-[var(--spacing-sm)] ds:end-[var(--spacing-sm)]';\n\n    // Compact \"status ball\" — a corner badge on the category icon carrying\n    // read/unread. Replaces the old inline Mail toggle so a variable-width\n    // indicator no longer ragged-edges the titles.\n    const ballPos =\n      'ds:absolute ds:top-[calc(var(--spacing-xs)*-1)] ds:end-[calc(var(--spacing-xs)*-1)] ds:z-[1]';\n    const ballDot =\n      'ds:block ds:size-[calc(var(--spacing-sm)+var(--spacing-xs))] ds:rounded-[var(--radius-full)] ds:bg-[color:var(--primary)] ds:ring-2 ds:ring-[color:var(--card)] ds:forced-colors:bg-[Highlight]';\n    const ballRing =\n      'ds:block ds:size-[calc(var(--spacing-sm)+var(--spacing-xs))] ds:rounded-[var(--radius-full)] ds:bg-[color:var(--card)] ds:border-2 ds:border-[color:color-mix(in_srgb,var(--muted-foreground)_55%,transparent)] ds:forced-colors:border-[CanvasText]';\n    // Interactive ball gets the kit focus ring + pointer cursor (a bare\n    // <button> falls back to the browser default outline). The transparent\n    // ::before grows the touch target to --min-target-size on coarse pointers\n    // (matches IconButton) while the visual ball stays small; dropped at sm+.\n    const ballBtn =\n      'ds:cursor-pointer ds:outline-none ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:forced-colors:focus-visible:outline-[CanvasText] ds:before:absolute ds:before:inset-x-[calc((var(--min-target-size)-100%)/-2)] ds:before:inset-y-[calc((var(--min-target-size)-100%)/-2)] ds:before:content-[\"\"] ds:sm:before:hidden';\n    const ballVisual = item.read ? ballRing : ballDot;\n    const statusBall =\n      variant !== 'compact' ? null : onToggleRead ? (\n        <button\n          type=\"button\"\n          onClick={() => onToggleRead(item)}\n          aria-label={\n            item.read\n              ? t('notificationCard.markAsUnread', 'Mark as unread')\n              : t('notificationCard.markAsRead', 'Mark as read')\n          }\n          className={`${ballPos} ${ballVisual} ${ballBtn}`}\n        />\n      ) : (\n        <span aria-hidden=\"true\" className={`${ballPos} ${ballVisual}`} />\n      );\n\n    /* ------- Title rendering (stretched link in compact mode) ------- */\n\n    const titleText = (\n      <span\n        className={[\n          'ds:flex-1 ds:min-w-0 ds:truncate',\n          item.read ? 'ds:font-normal' : 'ds:font-semibold',\n        ].join(' ')}\n      >\n        {item.title}\n      </span>\n    );\n\n    let titleNode: ReactNode;\n    if (variant === 'compact' && hasSafeUrl && onActivate) {\n      titleNode = (\n        <a\n          href={item.url}\n          aria-label={ariaLabel}\n          className={stretchedLinkClass + ' ds:contents'}\n          onClick={(event) => {\n            if (\n              event.defaultPrevented ||\n              event.metaKey ||\n              event.ctrlKey ||\n              event.shiftKey\n            )\n              return;\n            event.preventDefault();\n            onActivate(item);\n          }}\n        >\n          {titleText}\n        </a>\n      );\n    } else if (variant === 'compact' && onActivate) {\n      titleNode = (\n        <button\n          type=\"button\"\n          aria-label={ariaLabel}\n          className={\n            stretchedLinkClass +\n            ' ds:contents ds:bg-transparent ds:border-0 ds:p-0'\n          }\n          onClick={() => onActivate(item)}\n        >\n          {titleText}\n        </button>\n      );\n    } else if (variant === 'dashboard' && hasSafeUrl && onActivate) {\n      titleNode = (\n        <a\n          href={item.url}\n          className=\"ds:text-[color:var(--foreground)] ds:no-underline ds:hover:underline ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]\"\n          onClick={(event) => {\n            if (\n              event.defaultPrevented ||\n              event.metaKey ||\n              event.ctrlKey ||\n              event.shiftKey\n            )\n              return;\n            event.preventDefault();\n            onActivate(item);\n          }}\n        >\n          {titleText}\n        </a>\n      );\n    } else {\n      titleNode = titleText;\n    }\n\n    return (\n      <div\n        ref={ref}\n        role=\"listitem\"\n        data-component=\"notification-card\"\n        data-component-id={item.id}\n        data-read={item.read ? 'true' : 'false'}\n        data-leaving={effectiveLeaving ? 'true' : undefined}\n        aria-hidden={effectiveLeaving || undefined}\n        className={cardVariants({\n          variant,\n          size,\n          state,\n          // Elevated chrome only applies to the compact row; the dashboard\n          // variant brings its own border + shadow.\n          surface: variant === 'compact' ? surface : 'flat',\n          className,\n        })}\n        {...rest}\n      >\n        {/* Leading category icon with the status ball overlaid on its corner.\n            `relative` anchors the ball; a 32px box keeps titles aligned even\n            when an icon-less row only shows the ball. */}\n        {item.icon || statusBall ? (\n          <span className=\"ds:relative ds:size-8 ds:shrink-0\">\n            {item.icon ? (\n              <span\n                aria-hidden=\"true\"\n                className=\"ds:inline-flex ds:size-8 ds:items-center ds:justify-center ds:rounded-[var(--radius-full)] ds:bg-[color:var(--accent)]/10 ds:text-[color:var(--accent)] ds:[&>svg]:size-4\"\n              >\n                {item.icon}\n              </span>\n            ) : null}\n            {statusBall}\n          </span>\n        ) : null}\n\n        <div className=\"ds:flex-1 ds:min-w-0 ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]\">\n          <div className=\"ds:flex ds:items-center ds:gap-[var(--spacing-sm)]\">\n            {variant === 'dashboard' ? (\n              // `h3` keeps the dashboard heading ladder continuous:\n              // h1 (page) → h2 (WarningStack + NotificationsPanel) → h3 (notification title).\n              <h3 className=\"ds:m-0 ds:flex-1 ds:min-w-0 type-title-item\">\n                {titleNode}\n              </h3>\n            ) : (\n              <span className=\"ds:flex-1 ds:min-w-0 type-title-item ds:text-[color:var(--foreground)]\">\n                {titleNode}\n              </span>\n            )}\n          </div>\n\n          {item.description ? (\n            <p className=\"ds:m-0 type-body-sm ds:text-[color:var(--muted-foreground)] ds:[overflow:hidden] ds:[display:-webkit-box] ds:[-webkit-box-orient:vertical] ds:[-webkit-line-clamp:2] ds:break-words\">\n              {item.description}\n            </p>\n          ) : null}\n\n          <Timestamp\n            value={item.createdAt}\n            shape=\"chip\"\n            size=\"sm\"\n            relativeWindow={12 * 60 * 60 * 1000}\n          />\n\n          {variant === 'dashboard' && (ctaLabel || dismissLabel) ? (\n            <div className=\"ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-sm)]\">\n              {ctaLabel && hasSafeUrl ? (\n                <Button\n                  intent=\"outline\"\n                  size=\"sm\"\n                  asChild\n                  className=\"ds:relative ds:z-[1]\"\n                >\n                  <a\n                    href={item.url}\n                    onClick={(event) => {\n                      if (\n                        event.defaultPrevented ||\n                        event.metaKey ||\n                        event.ctrlKey ||\n                        event.shiftKey\n                      )\n                        return;\n                      event.preventDefault();\n                      onActivate?.(item);\n                    }}\n                  >\n                    {ctaLabel}\n                  </a>\n                </Button>\n              ) : null}\n              {dismissLabel && onDismiss ? (\n                <Button\n                  intent=\"link\"\n                  size=\"sm\"\n                  onClick={handleDismiss}\n                  className=\"ds:relative ds:z-[1]\"\n                >\n                  {dismissLabel}\n                </Button>\n              ) : null}\n            </div>\n          ) : null}\n        </div>\n\n        {/* Close — inline-end, hover/focus-revealed. Absolutely positioned so it\n            claims no width at rest: the title fills the row and there's no empty\n            gap when the row isn't hovered. */}\n        {variant === 'compact' && onDismiss ? (\n          <span\n            className={\n              'ds:absolute ds:z-[2] ds:opacity-0 ds:pointer-events-none ds:transition-opacity ds:motion-reduce:transition-none ds:group-hover:opacity-100 ds:group-hover:pointer-events-auto ds:group-focus-within:opacity-100 ds:group-focus-within:pointer-events-auto ' +\n              closeInset\n            }\n          >\n            <IconButton\n              icon={<X />}\n              intent=\"ghost\"\n              size=\"sm\"\n              aria-label={t('notificationCard.dismiss', 'Dismiss notification')}\n              onClick={handleDismiss}\n            />\n          </span>\n        ) : null}\n      </div>\n    );\n  },\n);\n\nNotificationCard.displayName = 'NotificationCard';\n"],"names":["cardVariants","cva","stretchedLinkClass","isSafeNotificationUrl","url","NotificationCard","forwardRef","item","variant","surface","size","onActivate","onToggleRead","onDismiss","ctaLabel","dismissLabel","leaving","className","rest","ref","t","i18n","useTranslation","accessibleTime","useMemo","date","isControlledLeaving","isLeaving","setIsLeaving","useState","dismissTimerRef","useRef","effectiveLeaving","prefersReducedMotion","handleDismiss","useCallback","raw","ms","state","unreadSuffix","ariaLabel","hasSafeUrl","closeInset","ballPos","ballDot","ballRing","ballBtn","ballVisual","statusBall","jsx","titleText","titleNode","event","jsxs","Timestamp","Button","IconButton","X"],"mappings":";;;;;;;;AA8FA,MAAMA,IAAeC;AAAA,EACnB;AAAA;AAAA;AAAA,IAGE;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA,EAAA,EACA,KAAK,GAAG;AAAA,EACV;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA;AAAA;AAAA,QAGP,SACE;AAAA,QACF,WACE;AAAA,MAAA;AAAA,MAEJ,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,MAAM;AAAA,MAAA;AAAA;AAAA;AAAA;AAAA,MAKR,SAAS;AAAA,QACP,MAAM;AAAA,QACN,UACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,kBAAkB;AAAA;AAAA;AAAA;AAAA,MAIhB;AAAA,QACE,SAAS;AAAA,QACT,OAAO;AAAA,QACP,OAAO;AAAA,MAAA;AAAA,MAET;AAAA,QACE,SAAS;AAAA,QACT,OAAO;AAAA,QACP,OAAO;AAAA,MAAA;AAAA,MAET;AAAA,QACE,SAAS;AAAA,QACT,OAAO;AAAA,QACP,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,MACN,OAAO;AAAA,MACP,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GAEMC,IAAqB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG;AAMH,SAASC,EAAsBC,GAAsB;AAG1D,SAAO,kCAAkC,KAAKA,CAAG;AACnD;AAMO,MAAMC,KAAmBC;AAAA,EAI9B,CACE;AAAA,IACE,MAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAM,EAAE,GAAAC,GAAG,MAAAC,EAAA,IAASC,EAAA,GAGdC,IAAiBC,EAAQ,MAAM;AACnC,YAAMC,IAAO,IAAI,KAAKlB,EAAK,SAAS;AACpC,aAAI,OAAO,MAAMkB,EAAK,QAAA,CAAS,IAAU,KAClC,IAAI,KAAK,eAAeJ,EAAK,UAAU;AAAA,QAC5C,WAAW;AAAA,QACX,WAAW;AAAA,MAAA,CACZ,EAAE,OAAOI,CAAI;AAAA,IAChB,GAAG,CAAClB,EAAK,WAAWc,EAAK,QAAQ,CAAC,GAS5BK,IAAsBV,MAAY,QAClC,CAACW,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1CC,IAAkBC,EAA6C,IAAI,GAEnEC,IAAmBN,IAAsBV,IAAUW,GAEnDM,IACJ,OAAO,SAAW,OAClB,OAAO,OAAO,cAAe,cAC7B,OAAO,WAAW,kCAAkC,EAAE,SAElDC,IAAgBC,EAAY,MAAM;AACtC,UAAI,CAACtB,EAAW;AAChB,UAAIa,KAAuBO,GAAsB;AAC/C,QAAApB,EAAUN,CAAI;AACd;AAAA,MACF;AACA,MAAAqB,EAAa,EAAI,GACbE,EAAgB,WAAS,aAAaA,EAAgB,OAAO;AACjE,YAAMM,IACH,OAAO,SAAW,OACjB,OACG,iBAAiB,SAAS,eAAe,EACzC,iBAAiB,sBAAsB,KAC5C,SACIC,IAAKD,EAAI,KAAA,EAAO,SAAS,IAAI,IAC/B,WAAWA,CAAG,IACd,WAAWA,CAAG,IAAI;AACtB,MAAAN,EAAgB,UAAU;AAAA,QACxB,MAAMjB,EAAUN,CAAI;AAAA,QACpB,OAAO,SAAS8B,CAAE,IAAIA,IAAK;AAAA,MAAA;AAAA,IAE/B,GAAG,CAACxB,GAAWN,GAAMmB,GAAqBO,CAAoB,CAAC,GAEzDK,IAAQ/B,EAAK,OAAO,SAAS,UAE7BgC,IAAehC,EAAK,OACtB,KACAa,EAAE,iCAAiC,UAAU,GAC3CoB,IAAYpB,EAAE,8BAA8B;AAAA,MAChD,OAAOb,EAAK;AAAA,MACZ,MAAMgB;AAAA,MACN,cAAAgB;AAAA,MACA,cAAc;AAAA,IAAA,CACf,GAEKE,IAAa,CAAC,CAAClC,EAAK,OAAOJ,EAAsBI,EAAK,GAAG,GAIzDmC,IACJhC,MAAS,OACL,0DACA,yDAKAiC,IACJ,gGACIC,IACJ,mMACIC,IACJ,wPAKIC,IACJ,qdACIC,IAAaxC,EAAK,OAAOsC,IAAWD,GACpCI,IACJxC,MAAY,YAAY,OAAOI,IAC7B,gBAAAqC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,MAAMrC,EAAaL,CAAI;AAAA,QAChC,cACEA,EAAK,OACDa,EAAE,iCAAiC,gBAAgB,IACnDA,EAAE,+BAA+B,cAAc;AAAA,QAErD,WAAW,GAAGuB,CAAO,IAAII,CAAU,IAAID,CAAO;AAAA,MAAA;AAAA,IAAA,IAGhD,gBAAAG,EAAC,QAAA,EAAK,eAAY,QAAO,WAAW,GAAGN,CAAO,IAAII,CAAU,GAAA,CAAI,GAK9DG,IACJ,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA1C,EAAK,OAAO,mBAAmB;AAAA,QAAA,EAC/B,KAAK,GAAG;AAAA,QAET,UAAAA,EAAK;AAAA,MAAA;AAAA,IAAA;AAIV,QAAI4C;AACJ,WAAI3C,MAAY,aAAaiC,KAAc9B,IACzCwC,IACE,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM1C,EAAK;AAAA,QACX,cAAYiC;AAAA,QACZ,WAAWtC,IAAqB;AAAA,QAChC,SAAS,CAACkD,MAAU;AAClB,UACEA,EAAM,oBACNA,EAAM,WACNA,EAAM,WACNA,EAAM,aAGRA,EAAM,eAAA,GACNzC,EAAWJ,CAAI;AAAA,QACjB;AAAA,QAEC,UAAA2C;AAAA,MAAA;AAAA,IAAA,IAGI1C,MAAY,aAAaG,IAClCwC,IACE,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAYT;AAAA,QACZ,WACEtC,IACA;AAAA,QAEF,SAAS,MAAMS,EAAWJ,CAAI;AAAA,QAE7B,UAAA2C;AAAA,MAAA;AAAA,IAAA,IAGI1C,MAAY,eAAeiC,KAAc9B,IAClDwC,IACE,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM1C,EAAK;AAAA,QACX,WAAU;AAAA,QACV,SAAS,CAAC6C,MAAU;AAClB,UACEA,EAAM,oBACNA,EAAM,WACNA,EAAM,WACNA,EAAM,aAGRA,EAAM,eAAA,GACNzC,EAAWJ,CAAI;AAAA,QACjB;AAAA,QAEC,UAAA2C;AAAA,MAAA;AAAA,IAAA,IAILC,IAAYD,GAIZ,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAlC;AAAA,QACA,MAAK;AAAA,QACL,kBAAe;AAAA,QACf,qBAAmBZ,EAAK;AAAA,QACxB,aAAWA,EAAK,OAAO,SAAS;AAAA,QAChC,gBAAcyB,IAAmB,SAAS;AAAA,QAC1C,eAAaA,KAAoB;AAAA,QACjC,WAAWhC,EAAa;AAAA,UACtB,SAAAQ;AAAA,UACA,MAAAE;AAAA,UACA,OAAA4B;AAAA;AAAA;AAAA,UAGA,SAAS9B,MAAY,YAAYC,IAAU;AAAA,UAC3C,WAAAQ;AAAA,QAAA,CACD;AAAA,QACA,GAAGC;AAAA,QAKH,UAAA;AAAA,UAAAX,EAAK,QAAQyC,IACZ,gBAAAK,EAAC,QAAA,EAAK,WAAU,qCACb,UAAA;AAAA,YAAA9C,EAAK,OACJ,gBAAA0C;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,WAAU;AAAA,gBAET,UAAA1C,EAAK;AAAA,cAAA;AAAA,YAAA,IAEN;AAAA,YACHyC;AAAA,UAAA,EAAA,CACH,IACE;AAAA,UAEJ,gBAAAK,EAAC,OAAA,EAAI,WAAU,uEACb,UAAA;AAAA,YAAA,gBAAAJ,EAAC,OAAA,EAAI,WAAU,sDACZ,UAAAzC,MAAY;AAAA;AAAA;AAAA,cAGX,gBAAAyC,EAAC,MAAA,EAAG,WAAU,+CACX,UAAAE,EAAA,CACH;AAAA,gBAEA,gBAAAF,EAAC,QAAA,EAAK,WAAU,0EACb,aACH,GAEJ;AAAA,YAEC1C,EAAK,cACJ,gBAAA0C,EAAC,KAAA,EAAE,WAAU,uLACV,UAAA1C,EAAK,aACR,IACE;AAAA,YAEJ,gBAAA0C;AAAA,cAACK;AAAA,cAAA;AAAA,gBACC,OAAO/C,EAAK;AAAA,gBACZ,OAAM;AAAA,gBACN,MAAK;AAAA,gBACL,gBAAgB,MAAU,KAAK;AAAA,cAAA;AAAA,YAAA;AAAA,YAGhCC,MAAY,gBAAgBM,KAAYC,KACvC,gBAAAsC,EAAC,OAAA,EAAI,WAAU,mEACZ,UAAA;AAAA,cAAAvC,KAAY2B,IACX,gBAAAQ;AAAA,gBAACM;AAAA,gBAAA;AAAA,kBACC,QAAO;AAAA,kBACP,MAAK;AAAA,kBACL,SAAO;AAAA,kBACP,WAAU;AAAA,kBAEV,UAAA,gBAAAN;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,MAAM1C,EAAK;AAAA,sBACX,SAAS,CAAC6C,MAAU;AAClB,wBACEA,EAAM,oBACNA,EAAM,WACNA,EAAM,WACNA,EAAM,aAGRA,EAAM,eAAA,GACNzC,KAAA,QAAAA,EAAaJ;AAAA,sBACf;AAAA,sBAEC,UAAAO;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACH;AAAA,cAAA,IAEA;AAAA,cACHC,KAAgBF,IACf,gBAAAoC;AAAA,gBAACM;AAAA,gBAAA;AAAA,kBACC,QAAO;AAAA,kBACP,MAAK;AAAA,kBACL,SAASrB;AAAA,kBACT,WAAU;AAAA,kBAET,UAAAnB;AAAA,gBAAA;AAAA,cAAA,IAED;AAAA,YAAA,EAAA,CACN,IACE;AAAA,UAAA,GACN;AAAA,UAKCP,MAAY,aAAaK,IACxB,gBAAAoC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WACE,+PACAP;AAAA,cAGF,UAAA,gBAAAO;AAAA,gBAACO;AAAA,gBAAA;AAAA,kBACC,wBAAOC,GAAA,EAAE;AAAA,kBACT,QAAO;AAAA,kBACP,MAAK;AAAA,kBACL,cAAYrC,EAAE,4BAA4B,sBAAsB;AAAA,kBAChE,SAASc;AAAA,gBAAA;AAAA,cAAA;AAAA,YACX;AAAA,UAAA,IAEA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA7B,GAAiB,cAAc;"}