@alfadocs/ui-kit-debug 0.38.0 → 0.39.0

package/dist/_chunks/marketplace-app-shell-BlxVizU4.js

@@ -0,0 +1,296 @@
+import { jsxs as t, jsx as e, Fragment as M } from "react/jsx-runtime";
+import { forwardRef as f, useState as T } from "react";
+import { useTranslation as k } from "react-i18next";
+import { A as B } from "./app-frame-BYx1gcV7.js";
+import { A as I } from "./avatar-BNQNhoyL.js";
+import { A as L } from "./alert-ywPR59NE.js";
+import { C as x } from "./card-DPmk26CL.js";
+import { D as i } from "./dropdown-menu-BC5ZdOMo.js";
+import { H as O, g as j, f as P, e as W, a as R, c as D, d as E } from "./header-CTZWX-tm.js";
+import { H as $ } from "./header-settings-CBLwUK6t.js";
+import { S as F } from "./sign-in-with-alfadocs-button-DeHBFRNS.js";
+import { S as V, a as q, h as G, j as J, k as K, i as Q } from "./sidebar-_vJXI9rB.js";
+import { T as U } from "./theme-root-BOO73p5t.js";
+import { a as X } from "./tooltip-DvmfrNvB.js";
+import { u as Y } from "./use-theme-C2dHKUAN.js";
+import { c as N } from "./index-D2ZczOXr.js";
+import { L as Z } from "./logo-yituK7sE.js";
+const _ = N("ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]"), ee = N(
+  [
+    "ds:[font-family:var(--font-serif)]",
+    "ds:font-semibold",
+    "ds:leading-none",
+    "ds:tracking-[0.01em]",
+    "ds:whitespace-nowrap",
+    // Forced-colors: drop the transparent text-fill and paint the label
+    // as solid CanvasText so it never disappears under Windows HCM —
+    // a gradient/transparent fill has no meaning there.
+    "ds:forced-colors:text-[CanvasText]",
+    "ds:forced-colors:[-webkit-text-fill-color:CanvasText]"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "ds:text-[calc(var(--logo-size-sm)*0.95)]",
+        md: "ds:text-[calc(var(--logo-size-md)*0.95)]",
+        lg: "ds:text-[calc(var(--logo-size-lg)*0.95)]",
+        xl: "ds:text-[calc(var(--logo-size-xl)*0.95)]"
+      },
+      tone: {
+        // Brand gradient filled into the glyphs via background-clip:text.
+        // `--gradient-wordmark` rides the theme aliases, so it stays
+        // AA-safe and adapts per theme on its own (and flattens to a solid
+        // ink in the accessible / forced-colors blocks — see tokens).
+        gradient: [
+          "ds:italic",
+          "ds:bg-[image:var(--gradient-wordmark)]",
+          "ds:bg-clip-text",
+          "ds:text-transparent",
+          "ds:[-webkit-text-fill-color:transparent]"
+        ],
+        // Monochrome: solid currentColor ink, upright, no gradient — for
+        // print, single-colour work, and coloured chrome (e.g. app-shell
+        // headers) where the lockup must ride the surrounding ink.
+        solid: "ds:text-current"
+      }
+    },
+    defaultVariants: { size: "md", tone: "gradient" }
+  }
+), u = f(
+  ({ name: s, monochrome: a = !1, size: r = "md", className: n, ...l }, d) => /* @__PURE__ */ t(
+    "span",
+    {
+      ref: d,
+      role: "img",
+      "aria-label": `Alfadocs ${s}`.trim(),
+      className: _({ className: n }),
+      "data-component": "product-lockup",
+      ...l,
+      children: [
+        /* @__PURE__ */ e(
+          Z,
+          {
+            variant: a ? "monochrome" : "wordmark",
+            size: r,
+            decorative: !0
+          }
+        ),
+        /* @__PURE__ */ e(
+          "span",
+          {
+            "aria-hidden": !0,
+            className: ee({
+              size: r,
+              tone: a ? "solid" : "gradient"
+            }),
+            children: s
+          }
+        )
+      ]
+    }
+  )
+);
+u.displayName = "ProductLockup";
+function ae(s) {
+  return s > 99 ? "99+" : String(s);
+}
+function se({
+  user: s,
+  labels: a,
+  onSignOut: r,
+  onToggleFullscreen: n
+}) {
+  const { t: l } = k(), d = a.fullscreen ?? l("patientShell.settings.fullscreen");
+  return (
+    // Non-modal: an account menu shouldn't inert/aria-hide the whole shell
+    // behind it (which leaves the still-focusable chrome inside an
+    // aria-hidden region — an `aria-hidden-focus` violation).
+    /* @__PURE__ */ t(i.Root, { modal: !1, children: [
+      /* @__PURE__ */ e(i.Trigger, { asChild: !0, children: /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          "aria-label": a.accountMenu,
+          "data-testid": "marketplace-account-trigger",
+          className: "ds:rounded-full ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)] ds:min-h-[var(--min-target-size)] ds:min-w-[var(--min-target-size)] ds:justify-center 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]",
+          children: [
+            /* @__PURE__ */ e(I, { name: s.name, src: s.avatarSrc, size: "md" }),
+            /* @__PURE__ */ e("span", { className: "ds:hidden ds:sm:inline", children: s.name })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ t(i.Content, { align: "end", children: [
+        /* @__PURE__ */ e(i.Label, { children: /* @__PURE__ */ t("span", { className: "ds:flex ds:flex-col", children: [
+          /* @__PURE__ */ e("span", { className: "ds:font-medium", children: s.name }),
+          s.email ? /* @__PURE__ */ e("span", { className: "ds:text-[length:var(--font-size-sm)] ds:text-[color:var(--muted-foreground)]", children: s.email }) : null
+        ] }) }),
+        n ? /* @__PURE__ */ t(M, { children: [
+          /* @__PURE__ */ e(i.Separator, {}),
+          /* @__PURE__ */ e(
+            i.Item,
+            {
+              onSelect: n,
+              "data-testid": "marketplace-fullscreen",
+              children: d
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ e(i.Separator, {}),
+        /* @__PURE__ */ e(
+          i.Item,
+          {
+            onSelect: r,
+            "data-testid": "marketplace-sign-out",
+            children: a.signOut
+          }
+        )
+      ] })
+    ] })
+  );
+}
+function te({ nav: s }) {
+  return /* @__PURE__ */ e(q, { children: s.map((a) => {
+    const r = typeof a.badgeCount == "number" && a.badgeCount > 0 ? a.badgeCount : void 0;
+    return /* @__PURE__ */ t(
+      G,
+      {
+        href: a.href,
+        "aria-label": a.label,
+        isActive: a.isActive,
+        children: [
+          a.icon ? /* @__PURE__ */ e(J, { children: a.icon }) : null,
+          /* @__PURE__ */ e(K, { children: a.label }),
+          r !== void 0 ? /* @__PURE__ */ e(Q, { children: ae(r) }) : null
+        ]
+      },
+      a.id
+    );
+  }) });
+}
+const re = f(
+  ({
+    productName: s,
+    productHref: a = "/",
+    nav: r,
+    user: n,
+    labels: l,
+    onSignOut: d,
+    onToggleFullscreen: c,
+    sidebarState: o,
+    mainAriaLabel: m,
+    children: p
+  }, h) => {
+    const { t: S } = k(), { theme: y, accessibility: C, resolvedTheme: g } = Y(), w = y !== "system" || C !== "system", A = g.startsWith("dark") ? "dark" : "light", z = g.endsWith("-accessible"), [H, v] = T(!1), b = /* @__PURE__ */ e(X, { children: /* @__PURE__ */ e(
+      B,
+      {
+        mainAriaLabel: m,
+        mainClassName: "ds:bg-[color:var(--app-shell-background)]",
+        header: /* @__PURE__ */ t(O, { children: [
+          /* @__PURE__ */ t(j, { children: [
+            /* @__PURE__ */ e(P, { href: "#main-content" }),
+            /* @__PURE__ */ e(W, { onMenuOpen: () => v(!0) }),
+            /* @__PURE__ */ e(
+              R,
+              {
+                href: a,
+                logo: /* @__PURE__ */ e(u, { name: s, size: "md", monochrome: !0 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e(D, {}),
+          /* @__PURE__ */ t(E, { children: [
+            /* @__PURE__ */ e($, { size: "sm" }),
+            /* @__PURE__ */ e(
+              se,
+              {
+                user: n,
+                labels: l,
+                onSignOut: d,
+                onToggleFullscreen: c
+              }
+            )
+          ] })
+        ] }),
+        sidebar: /* @__PURE__ */ e(
+          V,
+          {
+            ...o !== void 0 ? { state: o } : { defaultState: "expanded" },
+            open: H,
+            onOpenChange: v,
+            "aria-label": S("navigation.sidebar.label"),
+            "data-testid": "marketplace-app-shell-sidebar",
+            children: /* @__PURE__ */ e(te, { nav: r })
+          }
+        ),
+        children: p
+      }
+    ) });
+    return w ? /* @__PURE__ */ e(
+      U,
+      {
+        ref: h,
+        theme: A,
+        accessible: z,
+        className: "ds:contents",
+        "data-component": "marketplace-app-shell",
+        children: b
+      }
+    ) : /* @__PURE__ */ e(
+      "div",
+      {
+        ref: h,
+        className: "ds:contents",
+        "data-component": "marketplace-app-shell",
+        children: b
+      }
+    );
+  }
+);
+re.displayName = "MarketplaceAppShell";
+const ne = f(
+  ({
+    productName: s,
+    title: a,
+    description: r,
+    connectLabel: n,
+    status: l = "idle",
+    error: d,
+    onConnect: c,
+    footer: o,
+    className: m
+  }, p) => /* @__PURE__ */ e(
+    "div",
+    {
+      ref: p,
+      "data-component": "connect-with-alfadocs",
+      className: `ds:flex ds:min-h-dvh ds:items-center ds:justify-center ds:bg-[color:var(--app-shell-background)] ds:p-[var(--spacing-lg)] ${m ?? ""}`,
+      children: /* @__PURE__ */ e(x, { className: "ds:w-full ds:max-w-[400px]", children: /* @__PURE__ */ t(x.Body, { className: "ds:flex ds:flex-col ds:items-center ds:gap-[var(--spacing-lg)] ds:text-center", children: [
+        /* @__PURE__ */ e(u, { name: s, size: "lg" }),
+        /* @__PURE__ */ t("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
+          /* @__PURE__ */ e("h1", { className: "type-title-card", children: a }),
+          /* @__PURE__ */ e("p", { className: "type-body-sm ds:text-[color:var(--muted-foreground)]", children: r })
+        ] }),
+        l === "error" && d ? /* @__PURE__ */ e(L, { variant: "error", className: "ds:w-full ds:text-start", children: d }) : null,
+        /* @__PURE__ */ e(
+          F,
+          {
+            intent: "primary",
+            className: "ds:w-full",
+            loading: l === "connecting",
+            onClick: c,
+            label: n,
+            "data-testid": "connect-with-alfadocs-button"
+          }
+        ),
+        o ? /* @__PURE__ */ e("div", { className: "type-meta ds:text-[color:var(--muted-foreground)]", children: o }) : null
+      ] }) })
+    }
+  )
+);
+ne.displayName = "ConnectWithAlfadocs";
+export {
+  ne as C,
+  re as M,
+  u as P
+};
+//# sourceMappingURL=marketplace-app-shell-BlxVizU4.js.map

package/dist/_chunks/marketplace-app-shell-BlxVizU4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"marketplace-app-shell-BlxVizU4.js","sources":["../../src/brand/product-lockup/product-lockup.tsx","../../src/patterns/marketplace-app-shell/marketplace-app-shell.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Logo } from '../../components/logo/logo';\n\n/* ------------------------------------------------------------------ */\n/* CVA                                                                  */\n/* ------------------------------------------------------------------ */\n\n// Outer lockup row. ~4px logical gap between the wordmark and the product\n// name (`--spacing-xs`), centre-aligned so the name's cap height sits\n// against the wordmark's letterforms.\nconst lockup = cva('ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]');\n\n// The product name. Marketing serif (Fraunces, `--font-serif`) — permitted\n// here because this file lives under `src/brand/`, never in `src/components/`\n// or `src/patterns/` (constraint 10). Sized to ~95% of the wordmark height so\n// its cap height matches the logo letterforms across every size and theme\n// (the `--logo-size-*` tokens shift up in the accessible themes; the calc\n// keeps the name proportional for free).\nconst productName = cva(\n  [\n    'ds:[font-family:var(--font-serif)]',\n    'ds:font-semibold',\n    'ds:leading-none',\n    'ds:tracking-[0.01em]',\n    'ds:whitespace-nowrap',\n    // Forced-colors: drop the transparent text-fill and paint the label\n    // as solid CanvasText so it never disappears under Windows HCM —\n    // a gradient/transparent fill has no meaning there.\n    'ds:forced-colors:text-[CanvasText]',\n    'ds:forced-colors:[-webkit-text-fill-color:CanvasText]',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'ds:text-[calc(var(--logo-size-sm)*0.95)]',\n        md: 'ds:text-[calc(var(--logo-size-md)*0.95)]',\n        lg: 'ds:text-[calc(var(--logo-size-lg)*0.95)]',\n        xl: 'ds:text-[calc(var(--logo-size-xl)*0.95)]',\n      },\n      tone: {\n        // Brand gradient filled into the glyphs via background-clip:text.\n        // `--gradient-wordmark` rides the theme aliases, so it stays\n        // AA-safe and adapts per theme on its own (and flattens to a solid\n        // ink in the accessible / forced-colors blocks — see tokens).\n        gradient: [\n          'ds:italic',\n          'ds:bg-[image:var(--gradient-wordmark)]',\n          'ds:bg-clip-text',\n          'ds:text-transparent',\n          'ds:[-webkit-text-fill-color:transparent]',\n        ],\n        // Monochrome: solid currentColor ink, upright, no gradient — for\n        // print, single-colour work, and coloured chrome (e.g. app-shell\n        // headers) where the lockup must ride the surrounding ink.\n        solid: 'ds:text-current',\n      },\n    },\n    defaultVariants: { size: 'md', tone: 'gradient' },\n  },\n);\n\n/* ------------------------------------------------------------------ */\n/* Types                                                                */\n/* ------------------------------------------------------------------ */\n\ntype LockupSize = NonNullable<VariantProps<typeof productName>['size']>;\n\nexport type ProductLockupProps = {\n  /**\n   * The product name paired with the Alfadocs wordmark — e.g. `\"Builders\"`\n   * renders as \"Alfadocs Builders\". Passed verbatim (product names are not\n   * translated); the lockup's accessible name becomes `Alfadocs <name>`.\n   */\n  name: string;\n  /**\n   * Render the name as a solid `--foreground` ink, upright (no gradient, no\n   * italic), and pair it with the monochrome wordmark. Use for print,\n   * single-colour reproductions, or any constrained context where the\n   * gradient/serif treatment is inappropriate.\n   */\n  monochrome?: boolean;\n  /** Lockup size. Drives both the wordmark and the name's cap height. */\n  size?: LockupSize;\n  className?: string;\n} & Omit<\n  ComponentPropsWithoutRef<'span'>,\n  'role' | 'aria-label' | 'aria-hidden' | 'children' | 'className'\n>;\n\n/* ------------------------------------------------------------------ */\n/* ProductLockup                                                        */\n/* ------------------------------------------------------------------ */\n\n/**\n * The standard lockup pairing the Alfadocs wordmark with a product name\n * (\"Alfadocs Builders\", \"Alfadocs MyApp\"). Every marketplace app should use\n * this rather than hand-rolling a wordmark + typed span.\n *\n * The whole lockup is exposed to assistive tech as a single `img` named\n * `Alfadocs <name>`; the inner wordmark and the visible name are both\n * decorative so the brand isn't announced twice.\n */\nexport const ProductLockup = forwardRef<HTMLSpanElement, ProductLockupProps>(\n  ({ name, monochrome = false, size = 'md', className, ...props }, ref) => {\n    if (import.meta.env.DEV && !name.trim()) {\n      console.warn(\n        '[ProductLockup] `name` is empty — the lockup will render the bare wordmark with no product name. Pass the product name (e.g. \"Builders\").',\n      );\n    }\n\n    return (\n      <span\n        ref={ref}\n        role=\"img\"\n        aria-label={`Alfadocs ${name}`.trim()}\n        className={lockup({ className })}\n        data-component=\"product-lockup\"\n        {...props}\n      >\n        <Logo\n          variant={monochrome ? 'monochrome' : 'wordmark'}\n          size={size}\n          decorative\n        />\n        <span\n          aria-hidden\n          className={productName({\n            size,\n            tone: monochrome ? 'solid' : 'gradient',\n          })}\n        >\n          {name}\n        </span>\n      </span>\n    );\n  },\n);\nProductLockup.displayName = 'ProductLockup';\n","/**\n * Marketplace App Shell — the standard chrome for an app built on top of\n * AlfaDocs (the kind a partner scaffolds with Claude Code, Lovable, etc.).\n *\n * It is a thin, opinionated composition of kit primitives: an `AppFrame` with\n * a branded `Header` (the canonical `ProductLockup` — \"Alfadocs <Product>\" —\n * rendered `monochrome` so it rides the header's ink), a `Sidebar` for app\n * navigation, `HeaderSettings` (theme/locale/accessibility), and an Avatar\n * account menu (fullscreen + sign-out). `ConnectWithAlfadocs` is the matching\n * pre-auth screen, with the full-colour lockup and `SignInWithAlfadocsButton`.\n *\n * Like `PatientShell`, this pattern ships a RUNTIME component (surfaced via\n * `src/patterns/index.ts` and the library bundle) because consuming apps mount\n * it in production rather than copying the source.\n *\n * Auth is intentionally decoupled: the shell takes the signed-in `user` and an\n * `onSignOut` callback as props, and `ConnectWithAlfadocs` takes a `status` +\n * `onConnect`. Wire them to `@alfadocs/auth/react`'s `useAlfadocsAuth()` in the\n * consuming app — the kit never touches OAuth or secrets (those live in the\n * server-side `@alfadocs/auth` BFF).\n *\n * All user-visible copy is consumer-provided (props) so each app localises in\n * its own i18n; the only kit-owned strings reuse existing translated `ui.*`\n * keys (sidebar label, skip link, menu button).\n */\nimport { forwardRef, useState, type ReactNode } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { AppFrame } from '../../components/app-frame';\nimport { Avatar } from '../../components/avatar';\nimport { Alert } from '../../components/alert';\nimport { Card } from '../../components/card';\nimport { DropdownMenu } from '../../components/dropdown-menu';\nimport {\n  Header,\n  HeaderBrand,\n  HeaderCenter,\n  HeaderEnd,\n  HeaderMenuButton,\n  HeaderSkipLink,\n  HeaderStart,\n} from '../../components/header';\nimport { HeaderSettings } from '../../components/header-settings';\nimport { ProductLockup } from '../../brand/product-lockup';\nimport { SignInWithAlfadocsButton } from '../../components/sign-in-with-alfadocs-button';\nimport {\n  Sidebar,\n  SidebarBody,\n  SidebarItem,\n  SidebarItemBadge,\n  SidebarItemIcon,\n  SidebarItemLabel,\n  type SidebarMode,\n} from '../../components/sidebar';\nimport { ThemeRoot } from '../../components/theme-root';\nimport { TooltipProvider } from '../../components/tooltip';\nimport { useTheme } from '../../hooks/use-theme';\n\n/* ------------------------------------------------------------------ */\n/* Public API                                                           */\n/* ------------------------------------------------------------------ */\n\nexport interface MarketplaceNavItem {\n  id: string;\n  /** Pre-translated label — apps localise their own nav copy. */\n  label: string;\n  href: string;\n  /** Optional leading icon (a lucide-react element or equivalent). */\n  icon?: ReactNode;\n  /** Optional unseen-item count rendered as a pill badge. */\n  badgeCount?: number;\n  /** Mark the item as the current page (`aria-current='page'`). */\n  isActive?: boolean;\n}\n\nexport interface MarketplaceAppUser {\n  /** Display name — drives the avatar initials + the account-menu header. */\n  name: string;\n  /** Optional email shown under the name in the account menu. */\n  email?: string;\n  /** Optional avatar image URL. */\n  avatarSrc?: string;\n}\n\nexport interface MarketplaceAppShellLabels {\n  /** Accessible name for the account-menu trigger, e.g. \"Account menu\". */\n  accountMenu: string;\n  /** The sign-out menu item, e.g. \"Sign out\". */\n  signOut: string;\n  /**\n   * Optional fullscreen menu item label, e.g. \"Toggle fullscreen\". The item\n   * renders whenever `onToggleFullscreen` is supplied; when this label is\n   * omitted it falls back to the translated `ui.*` \"Toggle fullscreen\" string.\n   */\n  fullscreen?: string;\n}\n\nexport interface MarketplaceAppShellProps {\n  /** Product name paired with the Alfadocs wordmark — renders \"Alfadocs <productName>\". */\n  productName: string;\n  /** Link target for the brand lockup. Default `'/'`. */\n  productHref?: string;\n  /** Sidebar nav items, in order. */\n  nav: MarketplaceNavItem[];\n  /** The signed-in user shown in the account menu. */\n  user: MarketplaceAppUser;\n  /** Consumer-localised chrome labels owned by the shell. */\n  labels: MarketplaceAppShellLabels;\n  /** Fires when the user picks \"Sign out\". Wire to `useAlfadocsAuth().signOut`. */\n  onSignOut?: () => void;\n  /** Fires when the user toggles fullscreen. Omit to hide the fullscreen item. */\n  onToggleFullscreen?: () => void;\n  /**\n   * Force the sidebar into a specific mode. Apps typically flip to `'overlay'`\n   * on narrow viewports and leave this undefined elsewhere (defaults to\n   * `'expanded'`).\n   */\n  sidebarState?: SidebarMode;\n  /** Override the accessible name of the `<main>` landmark. */\n  mainAriaLabel?: string;\n  /** Children render inside the main content region. */\n  children: ReactNode;\n}\n\n/* ------------------------------------------------------------------ */\n/* Internals                                                            */\n/* ------------------------------------------------------------------ */\n\nfunction formatBadgeCount(count: number): string {\n  return count > 99 ? '99+' : String(count);\n}\n\nfunction AccountMenu({\n  user,\n  labels,\n  onSignOut,\n  onToggleFullscreen,\n}: {\n  user: MarketplaceAppUser;\n  labels: MarketplaceAppShellLabels;\n  onSignOut?: () => void;\n  onToggleFullscreen?: () => void;\n}) {\n  const { t } = useTranslation();\n  // Default to the translated `ui.*` label so a consumer that wires\n  // `onToggleFullscreen` but omits the label still gets a localised item.\n  const fullscreenLabel =\n    labels.fullscreen ?? t('patientShell.settings.fullscreen');\n  return (\n    // Non-modal: an account menu shouldn't inert/aria-hide the whole shell\n    // behind it (which leaves the still-focusable chrome inside an\n    // aria-hidden region — an `aria-hidden-focus` violation).\n    <DropdownMenu.Root modal={false}>\n      <DropdownMenu.Trigger asChild>\n        <button\n          type=\"button\"\n          aria-label={labels.accountMenu}\n          data-testid=\"marketplace-account-trigger\"\n          className=\"ds:rounded-full ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)] ds:min-h-[var(--min-target-size)] ds:min-w-[var(--min-target-size)] ds:justify-center 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]\"\n        >\n          <Avatar name={user.name} src={user.avatarSrc} size=\"md\" />\n          <span className=\"ds:hidden ds:sm:inline\">{user.name}</span>\n        </button>\n      </DropdownMenu.Trigger>\n      <DropdownMenu.Content align=\"end\">\n        <DropdownMenu.Label>\n          <span className=\"ds:flex ds:flex-col\">\n            <span className=\"ds:font-medium\">{user.name}</span>\n            {user.email ? (\n              <span className=\"ds:text-[length:var(--font-size-sm)] ds:text-[color:var(--muted-foreground)]\">\n                {user.email}\n              </span>\n            ) : null}\n          </span>\n        </DropdownMenu.Label>\n        {onToggleFullscreen ? (\n          <>\n            <DropdownMenu.Separator />\n            <DropdownMenu.Item\n              onSelect={onToggleFullscreen}\n              data-testid=\"marketplace-fullscreen\"\n            >\n              {fullscreenLabel}\n            </DropdownMenu.Item>\n          </>\n        ) : null}\n        <DropdownMenu.Separator />\n        <DropdownMenu.Item\n          onSelect={onSignOut}\n          data-testid=\"marketplace-sign-out\"\n        >\n          {labels.signOut}\n        </DropdownMenu.Item>\n      </DropdownMenu.Content>\n    </DropdownMenu.Root>\n  );\n}\n\nfunction MarketplaceSidebarNav({ nav }: { nav: MarketplaceNavItem[] }) {\n  return (\n    <SidebarBody>\n      {nav.map((item) => {\n        const badge =\n          typeof item.badgeCount === 'number' && item.badgeCount > 0\n            ? item.badgeCount\n            : undefined;\n        return (\n          <SidebarItem\n            key={item.id}\n            href={item.href}\n            aria-label={item.label}\n            isActive={item.isActive}\n          >\n            {item.icon ? <SidebarItemIcon>{item.icon}</SidebarItemIcon> : null}\n            <SidebarItemLabel>{item.label}</SidebarItemLabel>\n            {badge !== undefined ? (\n              <SidebarItemBadge>{formatBadgeCount(badge)}</SidebarItemBadge>\n            ) : null}\n          </SidebarItem>\n        );\n      })}\n    </SidebarBody>\n  );\n}\n\n/* ------------------------------------------------------------------ */\n/* MarketplaceAppShell                                                  */\n/* ------------------------------------------------------------------ */\n\nexport const MarketplaceAppShell = forwardRef<\n  HTMLDivElement,\n  MarketplaceAppShellProps\n>(\n  (\n    {\n      productName,\n      productHref = '/',\n      nav,\n      user,\n      labels,\n      onSignOut,\n      onToggleFullscreen,\n      sidebarState,\n      mainAriaLabel,\n      children,\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation();\n\n    // Mirror PatientShell: only wrap in a nested ThemeRoot when the user has an\n    // explicit theme/accessibility override, so we don't clobber the consuming\n    // app's (or Storybook's) outer theme cascade.\n    const { theme: themePref, accessibility, resolvedTheme } = useTheme();\n    const hasExplicitOverride =\n      themePref !== 'system' || accessibility !== 'system';\n    const themeBase = resolvedTheme.startsWith('dark') ? 'dark' : 'light';\n    const themeAccessible = resolvedTheme.endsWith('-accessible');\n\n    // Narrow-viewport overlay: HeaderMenuButton only renders below `md`.\n    const [sidebarOpen, setSidebarOpen] = useState(false);\n\n    const shell = (\n      <TooltipProvider>\n        <AppFrame\n          mainAriaLabel={mainAriaLabel}\n          mainClassName=\"ds:bg-[color:var(--app-shell-background)]\"\n          header={\n            <Header>\n              <HeaderStart>\n                <HeaderSkipLink href=\"#main-content\" />\n                <HeaderMenuButton onMenuOpen={() => setSidebarOpen(true)} />\n                <HeaderBrand\n                  href={productHref}\n                  logo={\n                    <ProductLockup name={productName} size=\"md\" monochrome />\n                  }\n                />\n              </HeaderStart>\n              <HeaderCenter />\n              <HeaderEnd>\n                <HeaderSettings size=\"sm\" />\n                <AccountMenu\n                  user={user}\n                  labels={labels}\n                  onSignOut={onSignOut}\n                  onToggleFullscreen={onToggleFullscreen}\n                />\n              </HeaderEnd>\n            </Header>\n          }\n          sidebar={\n            <Sidebar\n              {...(sidebarState !== undefined\n                ? { state: sidebarState }\n                : { defaultState: 'expanded' as const })}\n              open={sidebarOpen}\n              onOpenChange={setSidebarOpen}\n              aria-label={t('navigation.sidebar.label')}\n              data-testid=\"marketplace-app-shell-sidebar\"\n            >\n              <MarketplaceSidebarNav nav={nav} />\n            </Sidebar>\n          }\n        >\n          {children}\n        </AppFrame>\n      </TooltipProvider>\n    );\n\n    if (!hasExplicitOverride) {\n      return (\n        <div\n          ref={ref}\n          className=\"ds:contents\"\n          data-component=\"marketplace-app-shell\"\n        >\n          {shell}\n        </div>\n      );\n    }\n\n    return (\n      <ThemeRoot\n        ref={ref}\n        theme={themeBase}\n        accessible={themeAccessible}\n        className=\"ds:contents\"\n        data-component=\"marketplace-app-shell\"\n      >\n        {shell}\n      </ThemeRoot>\n    );\n  },\n);\n\nMarketplaceAppShell.displayName = 'MarketplaceAppShell';\n\n/* ------------------------------------------------------------------ */\n/* ConnectWithAlfadocs                                                  */\n/* ------------------------------------------------------------------ */\n\nexport type ConnectStatus = 'idle' | 'connecting' | 'error';\n\nexport interface ConnectWithAlfadocsProps {\n  /** Product name shown next to the wordmark at the top of the card. */\n  productName: string;\n  /** Heading, e.g. \"Connect your AlfaDocs account\". */\n  title: string;\n  /** Supporting copy below the heading. */\n  description: ReactNode;\n  /** The connect button label, e.g. \"Connect with AlfaDocs\". */\n  connectLabel: string;\n  /** Connection lifecycle. `connecting` shows a loading button; `error` shows the alert. */\n  status?: ConnectStatus;\n  /** Error message shown (as an alert) when `status === 'error'`. */\n  error?: ReactNode;\n  /** Fires when the connect button is pressed. Wire to `useAlfadocsAuth().connect`. */\n  onConnect?: () => void;\n  /** Optional footer content below the button (e.g. a \"what's this?\" link). */\n  footer?: ReactNode;\n  className?: string;\n}\n\n/**\n * The pre-auth \"Connect with AlfaDocs\" screen. Centred white card on the\n * warm-grey canvas with the AlfaDocs wordmark + product name, copy, an error\n * slot, and the primary connect CTA. Presentational —\n * `onConnect` should call `useAlfadocsAuth().connect()`, which redirects the\n * browser to the server-side BFF that runs the real OAuth2 + PKCE flow.\n */\nexport const ConnectWithAlfadocs = forwardRef<\n  HTMLDivElement,\n  ConnectWithAlfadocsProps\n>(\n  (\n    {\n      productName,\n      title,\n      description,\n      connectLabel,\n      status = 'idle',\n      error,\n      onConnect,\n      footer,\n      className,\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        data-component=\"connect-with-alfadocs\"\n        className={`ds:flex ds:min-h-dvh ds:items-center ds:justify-center ds:bg-[color:var(--app-shell-background)] ds:p-[var(--spacing-lg)] ${className ?? ''}`}\n      >\n        <Card className=\"ds:w-full ds:max-w-[400px]\">\n          <Card.Body className=\"ds:flex ds:flex-col ds:items-center ds:gap-[var(--spacing-lg)] ds:text-center\">\n            <ProductLockup name={productName} size=\"lg\" />\n            <div className=\"ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]\">\n              <h1 className=\"type-title-card\">{title}</h1>\n              <p className=\"type-body-sm ds:text-[color:var(--muted-foreground)]\">\n                {description}\n              </p>\n            </div>\n            {status === 'error' && error ? (\n              <Alert variant=\"error\" className=\"ds:w-full ds:text-start\">\n                {error}\n              </Alert>\n            ) : null}\n            <SignInWithAlfadocsButton\n              intent=\"primary\"\n              className=\"ds:w-full\"\n              loading={status === 'connecting'}\n              onClick={onConnect}\n              label={connectLabel}\n              data-testid=\"connect-with-alfadocs-button\"\n            />\n            {footer ? (\n              <div className=\"type-meta ds:text-[color:var(--muted-foreground)]\">\n                {footer}\n              </div>\n            ) : null}\n          </Card.Body>\n        </Card>\n      </div>\n    );\n  },\n);\n\nConnectWithAlfadocs.displayName = 'ConnectWithAlfadocs';\n"],"names":["lockup","cva","productName","ProductLockup","forwardRef","name","monochrome","size","className","props","ref","jsxs","jsx","Logo","formatBadgeCount","count","AccountMenu","user","labels","onSignOut","onToggleFullscreen","t","useTranslation","fullscreenLabel","DropdownMenu","Avatar","Fragment","MarketplaceSidebarNav","nav","SidebarBody","item","badge","SidebarItem","SidebarItemIcon","SidebarItemLabel","SidebarItemBadge","MarketplaceAppShell","productHref","sidebarState","mainAriaLabel","children","themePref","accessibility","resolvedTheme","useTheme","hasExplicitOverride","themeBase","themeAccessible","sidebarOpen","setSidebarOpen","useState","shell","TooltipProvider","AppFrame","Header","HeaderStart","HeaderSkipLink","HeaderMenuButton","HeaderBrand","HeaderCenter","HeaderEnd","HeaderSettings","Sidebar","ThemeRoot","ConnectWithAlfadocs","title","description","connectLabel","status","error","onConnect","footer","Card","Alert","SignInWithAlfadocsButton"],"mappings":";;;;;;;;;;;;;;;;;AAWA,MAAMA,IAASC,EAAI,2DAA2D,GAQxEC,KAAcD;AAAA,EAClB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,QAKJ,UAAU;AAAA,UACR;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA;AAAA;AAAA;AAAA,QAKF,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB,EAAE,MAAM,MAAM,MAAM,WAAA;AAAA,EAAW;AAEpD,GA2CaE,IAAgBC;AAAA,EAC3B,CAAC,EAAE,MAAAC,GAAM,YAAAC,IAAa,IAAO,MAAAC,IAAO,MAAM,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAQ7D,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,MAAK;AAAA,MACL,cAAY,YAAYL,CAAI,GAAG,KAAA;AAAA,MAC/B,WAAWL,EAAO,EAAE,WAAAQ,GAAW;AAAA,MAC/B,kBAAe;AAAA,MACd,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAG;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,SAASP,IAAa,eAAe;AAAA,YACrC,MAAAC;AAAA,YACA,YAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEZ,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAW;AAAA,YACX,WAAWV,GAAY;AAAA,cACrB,MAAAK;AAAA,cACA,MAAMD,IAAa,UAAU;AAAA,YAAA,CAC9B;AAAA,YAEA,UAAAD;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR;AACAF,EAAc,cAAc;ACV5B,SAASW,GAAiBC,GAAuB;AAC/C,SAAOA,IAAQ,KAAK,QAAQ,OAAOA,CAAK;AAC1C;AAEA,SAASC,GAAY;AAAA,EACnB,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,oBAAAC;AACF,GAKG;AACD,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GAGRC,IACJL,EAAO,cAAcG,EAAE,kCAAkC;AAC3D;AAAA;AAAA;AAAA;AAAA,IAIE,gBAAAV,EAACa,EAAa,MAAb,EAAkB,OAAO,IACxB,UAAA;AAAA,MAAA,gBAAAZ,EAACY,EAAa,SAAb,EAAqB,SAAO,IAC3B,UAAA,gBAAAb;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAYO,EAAO;AAAA,UACnB,eAAY;AAAA,UACZ,WAAU;AAAA,UAEV,UAAA;AAAA,YAAA,gBAAAN,EAACa,GAAA,EAAO,MAAMR,EAAK,MAAM,KAAKA,EAAK,WAAW,MAAK,KAAA,CAAK;AAAA,YACxD,gBAAAL,EAAC,QAAA,EAAK,WAAU,0BAA0B,YAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,GAExD;AAAA,MACA,gBAAAD,EAACa,EAAa,SAAb,EAAqB,OAAM,OAC1B,UAAA;AAAA,QAAA,gBAAAZ,EAACY,EAAa,OAAb,EACC,UAAA,gBAAAb,EAAC,QAAA,EAAK,WAAU,uBACd,UAAA;AAAA,UAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,kBAAkB,UAAAK,EAAK,MAAK;AAAA,UAC3CA,EAAK,QACJ,gBAAAL,EAAC,QAAA,EAAK,WAAU,gFACb,UAAAK,EAAK,OACR,IACE;AAAA,QAAA,EAAA,CACN,EAAA,CACF;AAAA,QACCG,IACC,gBAAAT,EAAAe,GAAA,EACE,UAAA;AAAA,UAAA,gBAAAd,EAACY,EAAa,WAAb,EAAuB;AAAA,UACxB,gBAAAZ;AAAA,YAACY,EAAa;AAAA,YAAb;AAAA,cACC,UAAUJ;AAAA,cACV,eAAY;AAAA,cAEX,UAAAG;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAAA,CACF,IACE;AAAA,QACJ,gBAAAX,EAACY,EAAa,WAAb,EAAuB;AAAA,QACxB,gBAAAZ;AAAA,UAACY,EAAa;AAAA,UAAb;AAAA,YACC,UAAUL;AAAA,YACV,eAAY;AAAA,YAEX,UAAAD,EAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MACV,EAAA,CACF;AAAA,IAAA,EAAA,CACF;AAAA;AAEJ;AAEA,SAASS,GAAsB,EAAE,KAAAC,KAAsC;AACrE,SACE,gBAAAhB,EAACiB,GAAA,EACE,UAAAD,EAAI,IAAI,CAACE,MAAS;AACjB,UAAMC,IACJ,OAAOD,EAAK,cAAe,YAAYA,EAAK,aAAa,IACrDA,EAAK,aACL;AACN,WACE,gBAAAnB;AAAA,MAACqB;AAAA,MAAA;AAAA,QAEC,MAAMF,EAAK;AAAA,QACX,cAAYA,EAAK;AAAA,QACjB,UAAUA,EAAK;AAAA,QAEd,UAAA;AAAA,UAAAA,EAAK,OAAO,gBAAAlB,EAACqB,GAAA,EAAiB,UAAAH,EAAK,MAAK,IAAqB;AAAA,UAC9D,gBAAAlB,EAACsB,GAAA,EAAkB,UAAAJ,EAAK,MAAA,CAAM;AAAA,UAC7BC,MAAU,SACT,gBAAAnB,EAACuB,KAAkB,UAAArB,GAAiBiB,CAAK,GAAE,IACzC;AAAA,QAAA;AAAA,MAAA;AAAA,MATCD,EAAK;AAAA,IAAA;AAAA,EAYhB,CAAC,EAAA,CACH;AAEJ;AAMO,MAAMM,KAAsBhC;AAAA,EAIjC,CACE;AAAA,IACE,aAAAF;AAAA,IACA,aAAAmC,IAAc;AAAA,IACd,KAAAT;AAAA,IACA,MAAAX;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,cAAAkB;AAAA,IACA,eAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,GAEF9B,MACG;AACH,UAAM,EAAE,GAAAW,EAAA,IAAMC,EAAA,GAKR,EAAE,OAAOmB,GAAW,eAAAC,GAAe,eAAAC,EAAA,IAAkBC,EAAA,GACrDC,IACJJ,MAAc,YAAYC,MAAkB,UACxCI,IAAYH,EAAc,WAAW,MAAM,IAAI,SAAS,SACxDI,IAAkBJ,EAAc,SAAS,aAAa,GAGtD,CAACK,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAE9CC,sBACHC,GAAA,EACC,UAAA,gBAAAxC;AAAA,MAACyC;AAAA,MAAA;AAAA,QACC,eAAAd;AAAA,QACA,eAAc;AAAA,QACd,0BACGe,GAAA,EACC,UAAA;AAAA,UAAA,gBAAA3C,EAAC4C,GAAA,EACC,UAAA;AAAA,YAAA,gBAAA3C,EAAC4C,GAAA,EAAe,MAAK,gBAAA,CAAgB;AAAA,8BACpCC,GAAA,EAAiB,YAAY,MAAMR,EAAe,EAAI,GAAG;AAAA,YAC1D,gBAAArC;AAAA,cAAC8C;AAAA,cAAA;AAAA,gBACC,MAAMrB;AAAA,gBACN,wBACGlC,GAAA,EAAc,MAAMD,GAAa,MAAK,MAAK,YAAU,GAAA,CAAC;AAAA,cAAA;AAAA,YAAA;AAAA,UAE3D,GACF;AAAA,4BACCyD,GAAA,EAAa;AAAA,4BACbC,GAAA,EACC,UAAA;AAAA,YAAA,gBAAAhD,EAACiD,GAAA,EAAe,MAAK,KAAA,CAAK;AAAA,YAC1B,gBAAAjD;AAAA,cAACI;AAAA,cAAA;AAAA,gBACC,MAAAC;AAAA,gBACA,QAAAC;AAAA,gBACA,WAAAC;AAAA,gBACA,oBAAAC;AAAA,cAAA;AAAA,YAAA;AAAA,UACF,EAAA,CACF;AAAA,QAAA,GACF;AAAA,QAEF,SACE,gBAAAR;AAAA,UAACkD;AAAA,UAAA;AAAA,YACE,GAAIxB,MAAiB,SAClB,EAAE,OAAOA,MACT,EAAE,cAAc,WAAA;AAAA,YACpB,MAAMU;AAAA,YACN,cAAcC;AAAA,YACd,cAAY5B,EAAE,0BAA0B;AAAA,YACxC,eAAY;AAAA,YAEZ,UAAA,gBAAAT,EAACe,MAAsB,KAAAC,EAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAIpC,UAAAY;AAAA,MAAA;AAAA,IAAA,GAEL;AAGF,WAAKK,IAaH,gBAAAjC;AAAA,MAACmD;AAAA,MAAA;AAAA,QACC,KAAArD;AAAA,QACA,OAAOoC;AAAA,QACP,YAAYC;AAAA,QACZ,WAAU;AAAA,QACV,kBAAe;AAAA,QAEd,UAAAI;AAAA,MAAA;AAAA,IAAA,IAlBD,gBAAAvC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,WAAU;AAAA,QACV,kBAAe;AAAA,QAEd,UAAAyC;AAAA,MAAA;AAAA,IAAA;AAAA,EAgBT;AACF;AAEAf,GAAoB,cAAc;AAmC3B,MAAM4B,KAAsB5D;AAAA,EAIjC,CACE;AAAA,IACE,aAAAF;AAAA,IACA,OAAA+D;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,WAAA/D;AAAA,EAAA,GAEFE,MAGE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,kBAAe;AAAA,MACf,WAAW,6HAA6HF,KAAa,EAAE;AAAA,MAEvJ,UAAA,gBAAAI,EAAC4D,KAAK,WAAU,8BACd,4BAACA,EAAK,MAAL,EAAU,WAAU,iFACnB,UAAA;AAAA,QAAA,gBAAA5D,EAACT,GAAA,EAAc,MAAMD,GAAa,MAAK,MAAK;AAAA,QAC5C,gBAAAS,EAAC,OAAA,EAAI,WAAU,kDACb,UAAA;AAAA,UAAA,gBAAAC,EAAC,MAAA,EAAG,WAAU,mBAAmB,UAAAqD,GAAM;AAAA,UACvC,gBAAArD,EAAC,KAAA,EAAE,WAAU,wDACV,UAAAsD,EAAA,CACH;AAAA,QAAA,GACF;AAAA,QACCE,MAAW,WAAWC,IACrB,gBAAAzD,EAAC6D,GAAA,EAAM,SAAQ,SAAQ,WAAU,2BAC9B,UAAAJ,EAAA,CACH,IACE;AAAA,QACJ,gBAAAzD;AAAA,UAAC8D;AAAA,UAAA;AAAA,YACC,QAAO;AAAA,YACP,WAAU;AAAA,YACV,SAASN,MAAW;AAAA,YACpB,SAASE;AAAA,YACT,OAAOH;AAAA,YACP,eAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEbI,IACC,gBAAA3D,EAAC,OAAA,EAAI,WAAU,qDACZ,aACH,IACE;AAAA,MAAA,EAAA,CACN,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAIR;AAEAoD,GAAoB,cAAc;"}

package/dist/_chunks/{message-card-BbRhZkDI.js → message-card-DSPw5ghw.js}

@@ -1,5 +1,5 @@
 import { jsx as a, jsxs as l } from "react/jsx-runtime";
-import { forwardRef as B, useMemo as L, useState as U, useRef as W, useCallback as _ } from "react";
+import { forwardRef as _, useMemo as B, useState as L, useRef as U, useCallback as W } from "react";
 import { c as D } from "./index-D2ZczOXr.js";
 import { useTranslation as E } from "react-i18next";
 import { I as H } from "./icon-button-CKEOrN37.js";
@@ -18,13 +18,14 @@ const J = D(
     "ds:data-[leaving=true]:pointer-events-none",
     "ds:motion-reduce:transition-none",
     "ds:text-start",
+    "ds:border ds:border-[color:var(--card-border)] ds:[.theme-accessible_&]:border-2",
     "ds:forced-colors:border ds:forced-colors:border-[CanvasText]"
   ].join(" "),
   {
     variants: {
       variant: {
         compact: "ds:items-start ds:group",
-        dashboard: "ds:flex-col ds:sm:flex-row ds:items-stretch ds:sm:items-start ds:border ds:border-[color:var(--border)] ds:bg-[color:var(--card)]"
+        dashboard: "ds:flex-col ds:sm:flex-row ds:items-stretch ds:sm:items-start ds:border ds:border-[color:var(--card-border)] ds:shadow-[var(--shadow-card)] ds:[.theme-accessible_&]:border-2 ds:bg-[color:var(--card)]"
       },
       size: {
         sm: "ds:p-[var(--spacing-sm)]",
@@ -71,40 +72,40 @@ const J = D(
 function O(e) {
   return /^(https?:\/\/(?!\/)|\/(?!\/)|#)/.test(e);
 }
-const Q = B(
+const Q = _(
   ({
     item: e,
     variant: d = "compact",
     size: h = "sm",
     onActivate: r,
-    onDismiss: t,
+    onDismiss: o,
     ctaLabel: c,
     dismissLabel: u,
     leaving: b,
     className: T,
     ...z
   }, K) => {
-    const { t: n, i18n: v } = E(), M = L(() => {
+    const { t: n, i18n: v } = E(), M = B(() => {
       const s = new Date(e.sentAt);
       return Number.isNaN(s.getTime()) ? "" : new Intl.DateTimeFormat(v.language, {
         dateStyle: "medium",
         timeStyle: "short"
       }).format(s);
-    }, [e.sentAt, v.language]), f = b !== void 0, [S, V] = U(!1), m = W(null), x = f ? b : S, w = typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches, y = _(
+    }, [e.sentAt, v.language]), f = b !== void 0, [S, V] = L(!1), m = U(null), x = f ? b : S, w = typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches, y = W(
       (s) => {
-        if (s == null || s.preventDefault(), s == null || s.stopPropagation(), !t) return;
+        if (s == null || s.preventDefault(), s == null || s.stopPropagation(), !o) return;
         if (f || w) {
-          t(e);
+          o(e);
           return;
         }
         V(!0), m.current && clearTimeout(m.current);
         const g = typeof window < "u" && window.getComputedStyle(document.documentElement).getPropertyValue("--animation-duration") || "200ms", N = g.trim().endsWith("ms") ? parseFloat(g) : parseFloat(g) * 1e3;
         m.current = setTimeout(
-          () => t(e),
+          () => o(e),
           Number.isFinite(N) ? N : 200
         );
       },
-      [t, e, f, w]
+      [o, e, f, w]
     ), F = e.read ? "read" : "unread", P = e.read ? "" : n("messageCard.unreadSuffix", ", unread"), I = e.subject ? n("messageCard.subjectFragment", {
       subject: e.subject,
       defaultValue: " — {{subject}}"
@@ -124,8 +125,8 @@ const Q = B(
         children: e.sender.name
       }
     );
-    let o;
-    d === "compact" && p && r ? o = /* @__PURE__ */ a(
+    let t;
+    d === "compact" && p && r ? t = /* @__PURE__ */ a(
       "a",
       {
         href: e.url,
@@ -136,7 +137,7 @@ const Q = B(
         },
         children: i
       }
-    ) : d === "compact" && r ? o = /* @__PURE__ */ a(
+    ) : d === "compact" && r ? t = /* @__PURE__ */ a(
       "button",
       {
         type: "button",
@@ -145,7 +146,7 @@ const Q = B(
         onClick: () => r(e),
         children: i
       }
-    ) : d === "dashboard" && p && r ? o = /* @__PURE__ */ a(
+    ) : d === "dashboard" && p && r ? t = /* @__PURE__ */ a(
       "a",
       {
         href: e.url,
@@ -155,7 +156,7 @@ const Q = B(
         },
         children: i
       }
-    ) : o = i;
+    ) : t = i;
     const R = typeof e.unreadCount == "number" && e.unreadCount > 1;
     return /* @__PURE__ */ l(
       "div",
@@ -191,7 +192,7 @@ const Q = B(
                   className: "ds:inline-block ds:size-1.5 ds:shrink-0 ds:rounded-[var(--radius-full)] ds:bg-[color:var(--primary)] ds:forced-colors:bg-[Highlight]"
                 }
               ),
-              d === "dashboard" ? /* @__PURE__ */ a("h3", { className: "ds:m-0 ds:flex-1 ds:min-w-0 type-title-item", children: o }) : /* @__PURE__ */ a("span", { className: "ds:flex-1 ds:min-w-0 type-title-item ds:text-[color:var(--foreground)]", children: o }),
+              d === "dashboard" ? /* @__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 }),
               R ? /* @__PURE__ */ a(
                 "span",
                 {
@@ -245,7 +246,7 @@ const Q = B(
                   )
                 }
               ) : null,
-              u && t ? /* @__PURE__ */ a(
+              u && o ? /* @__PURE__ */ a(
                 k,
                 {
                   intent: "link",
@@ -257,7 +258,7 @@ const Q = B(
               ) : null
             ] }) : null
           ] }),
-          d === "compact" && t ? /* @__PURE__ */ a("span", { className: "ds:relative ds:z-[1] ds:opacity-0 ds:group-hover:opacity-100 ds:group-focus-within:opacity-100 ds:transition-opacity ds:motion-reduce:transition-none", children: /* @__PURE__ */ a(
+          d === "compact" && o ? /* @__PURE__ */ a("span", { className: "ds:relative ds:z-[1] ds:opacity-0 ds:group-hover:opacity-100 ds:group-focus-within:opacity-100 ds:transition-opacity ds:motion-reduce:transition-none", children: /* @__PURE__ */ a(
             H,
             {
               icon: /* @__PURE__ */ a(G, {}),
@@ -277,4 +278,4 @@ export {
   Q as M,
   O as i
 };
-//# sourceMappingURL=message-card-BbRhZkDI.js.map
+//# sourceMappingURL=message-card-DSPw5ghw.js.map

package/dist/_chunks/message-card-DSPw5ghw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-card-DSPw5ghw.js","sources":["../../src/components/message-card/message-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 { Avatar } from '../avatar/avatar';\nimport { Timestamp } from '../timestamp';\n\n/* ------------------------------------------------------------------ */\n/* Types                                                               */\n/* ------------------------------------------------------------------ */\n\nexport interface MessageSender {\n  /** Display name — drives the avatar's deterministic colour + initials. */\n  name: string;\n  /** Optional avatar image URL. */\n  avatarUrl?: string;\n}\n\nexport interface MessageItem {\n  /** Unique identifier for the message (or thread). */\n  id: string;\n  /** Sender identity — avatar + bold display name. */\n  sender: MessageSender;\n  /** Optional subject / conversation title. Rendered bold when unread. */\n  subject?: string;\n  /** Last-message preview — rendered as plain text, clamped to two lines. */\n  preview: string;\n  /** ISO-8601 timestamp of when the message was sent. */\n  sentAt: string;\n  /** Whether the message has been seen. Unread items get accent styling. */\n  read?: boolean;\n  /** Optional deep link — when present the card row is an anchor. */\n  url?: string;\n  /**\n   * Count of unread messages inside a thread. Rendered as an end-aligned\n   * badge when greater than 1.\n   */\n  unreadCount?: number;\n}\n\nexport interface MessageCardProps\n  extends\n    Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'role' | 'title'>,\n    VariantProps<typeof cardVariants> {\n  /** The message to render. */\n  item: MessageItem;\n  /**\n   * Layout shape.\n   * - `compact` — single-line row with the whole card clickable (used by\n   *   MessageTray).\n   * - `dashboard` — bordered block with explicit CTA and mark-as-read\n   *   controls (used by dashboards / sidebars).\n   */\n  variant?: 'compact' | 'dashboard';\n  /** Visual density. */\n  size?: 'sm' | 'md';\n  /** Fires when the row / title is activated. */\n  onActivate?: (item: MessageItem) => void;\n  /** Fires when the dismiss control is activated. */\n  onDismiss?: (item: MessageItem) => 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 MessageTray). 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    'ds:relative ds:flex ds:gap-[var(--spacing-sm)]',\n    'ds:rounded-[var(--radius-sm)]',\n    'ds:transition-colors',\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    '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    'ds:border ds:border-[color:var(--card-border)] ds:[.theme-accessible_&]:border-2',\n    'ds:forced-colors:border ds:forced-colors:border-[CanvasText]',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        compact: 'ds:items-start ds:group',\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:shadow-[var(--shadow-card)] ds:[.theme-accessible_&]:border-2 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    },\n    compoundVariants: [\n      {\n        variant: 'compact',\n        state: 'unread',\n        class: 'ds:bg-[color:var(--accent)]/5',\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    },\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 isSafeMessageUrl(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 MessageCard = forwardRef<HTMLDivElement, MessageCardProps>(\n  (\n    {\n      item,\n      variant = 'compact',\n      size = 'sm',\n      onActivate,\n      onDismiss,\n      ctaLabel,\n      dismissLabel,\n      leaving,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { t, i18n } = useTranslation();\n\n    const accessibleTime = useMemo(() => {\n      const date = new Date(item.sentAt);\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.sentAt, i18n.language]);\n\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      (event?: React.MouseEvent) => {\n        // The card carries a stretched-link `::after` overlay for the\n        // whole-row click target. The dismiss button is rendered above it\n        // (z-index), but click events still bubble — stop propagation so the\n        // wrapper's navigation does not fire alongside the dismiss action.\n        event?.preventDefault();\n        event?.stopPropagation();\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      },\n      [onDismiss, item, isControlledLeaving, prefersReducedMotion],\n    );\n\n    const state = item.read ? 'read' : 'unread';\n\n    const unreadSuffix = item.read\n      ? ''\n      : t('messageCard.unreadSuffix', ', unread');\n    const subjectFragment = item.subject\n      ? t('messageCard.subjectFragment', {\n          subject: item.subject,\n          defaultValue: ' — {{subject}}',\n        })\n      : '';\n    const ariaLabel = t('messageCard.itemLabel', {\n      sender: item.sender.name,\n      subjectFragment,\n      time: accessibleTime,\n      unreadSuffix,\n      defaultValue:\n        'Message from {{sender}}{{subjectFragment}}, {{time}}{{unreadSuffix}}',\n    });\n\n    const hasSafeUrl = !!item.url && isSafeMessageUrl(item.url);\n\n    /* ------- Sender-name rendering (stretched link in compact mode) ------ */\n\n    const senderText = (\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.sender.name}\n      </span>\n    );\n\n    let senderNode: ReactNode;\n    if (variant === 'compact' && hasSafeUrl && onActivate) {\n      senderNode = (\n        <a\n          href={item.url}\n          aria-label={ariaLabel}\n          className={stretchedLinkClass + ' ds:contents'}\n          onClick={(event) => {\n            // Let the browser handle modifier-click (open in new tab,\n            // download, etc.) and respect upstream preventDefault.\n            if (\n              event.defaultPrevented ||\n              event.metaKey ||\n              event.ctrlKey ||\n              event.shiftKey\n            )\n              return;\n            // When the consumer wires `onActivate`, they own routing — stop\n            // the browser's default navigation so we don't full-page reload\n            // out of an SPA shell or a test iframe.\n            event.preventDefault();\n            onActivate(item);\n          }}\n        >\n          {senderText}\n        </a>\n      );\n    } else if (variant === 'compact' && onActivate) {\n      senderNode = (\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          {senderText}\n        </button>\n      );\n    } else if (variant === 'dashboard' && hasSafeUrl && onActivate) {\n      senderNode = (\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            onActivate(item);\n          }}\n        >\n          {senderText}\n        </a>\n      );\n    } else {\n      senderNode = senderText;\n    }\n\n    const showThreadCount =\n      typeof item.unreadCount === 'number' && item.unreadCount > 1;\n\n    return (\n      <div\n        ref={ref}\n        role=\"listitem\"\n        data-component=\"message-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({ variant, size, state, className })}\n        {...rest}\n      >\n        {/* Avatar is decorative here — the row's assembled `aria-label`\n            already names the sender, so letting Avatar contribute its own\n            `role=\"img\"` + `aria-label={name}` would announce the name twice\n            per row. `aria-hidden` + `role=\"presentation\"` (spread last, so\n            they win over Avatar's internal values) pulls the element out of\n            the a11y tree entirely. */}\n        <Avatar\n          name={item.sender.name}\n          src={item.sender.avatarUrl}\n          size={size === 'md' ? 'md' : 'sm'}\n          className=\"ds:shrink-0\"\n          aria-hidden=\"true\"\n          role=\"presentation\"\n          aria-label={undefined}\n        />\n\n        <div className=\"ds:flex-1 ds:min-w-0 ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]\">\n          <div className=\"ds:flex ds:items-center ds:gap-[var(--spacing-xs)]\">\n            {!item.read ? (\n              <span\n                aria-hidden=\"true\"\n                className=\"ds:inline-block ds:size-1.5 ds:shrink-0 ds:rounded-[var(--radius-full)] ds:bg-[color:var(--primary)] ds:forced-colors:bg-[Highlight]\"\n              />\n            ) : null}\n            {variant === 'dashboard' ? (\n              <h3 className=\"ds:m-0 ds:flex-1 ds:min-w-0 type-title-item\">\n                {senderNode}\n              </h3>\n            ) : (\n              <span className=\"ds:flex-1 ds:min-w-0 type-title-item ds:text-[color:var(--foreground)]\">\n                {senderNode}\n              </span>\n            )}\n            {showThreadCount ? (\n              <span\n                aria-label={t('messageCard.threadCount', {\n                  count: item.unreadCount,\n                  defaultValue_one: '{{count}} new message in thread',\n                  defaultValue_other: '{{count}} new messages in thread',\n                })}\n                className=\"ds:relative ds:z-[1] ds:shrink-0 ds:inline-flex ds:items-center ds:justify-center ds:min-w-[calc(var(--spacing-md)+var(--spacing-xs))] ds:h-[calc(var(--spacing-md)+var(--spacing-xs))] ds:ps-[calc(var(--spacing-xs)/1.5)] ds:pe-[calc(var(--spacing-xs)/1.5)] ds:rounded-[var(--radius-full)] ds:bg-[color:var(--accent)] ds:text-[color:var(--accent-foreground)] ds:text-[length:var(--font-size-xs)] ds:font-semibold ds:leading-none ds:forced-colors:outline ds:forced-colors:outline-1 ds:forced-colors:outline-[CanvasText]\"\n              >\n                {item.unreadCount}\n              </span>\n            ) : null}\n          </div>\n\n          {item.subject ? (\n            <p\n              className={[\n                'ds:m-0 type-body-sm ds:text-[color:var(--foreground)] ds:truncate',\n                item.read ? 'ds:font-normal' : 'ds:font-semibold',\n              ].join(' ')}\n            >\n              {item.subject}\n            </p>\n          ) : null}\n\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.preview}\n          </p>\n\n          <Timestamp\n            value={item.sentAt}\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                      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        {variant === 'compact' && onDismiss ? (\n          <span className=\"ds:relative ds:z-[1] ds:opacity-0 ds:group-hover:opacity-100 ds:group-focus-within:opacity-100 ds:transition-opacity ds:motion-reduce:transition-none\">\n            <IconButton\n              icon={<X />}\n              intent=\"ghost\"\n              size=\"sm\"\n              aria-label={t('messageCard.dismiss', 'Dismiss message')}\n              onClick={handleDismiss}\n            />\n          </span>\n        ) : null}\n      </div>\n    );\n  },\n);\n\nMessageCard.displayName = 'MessageCard';\n"],"names":["cardVariants","cva","stretchedLinkClass","isSafeMessageUrl","url","MessageCard","forwardRef","item","variant","size","onActivate","onDismiss","ctaLabel","dismissLabel","leaving","className","rest","ref","t","i18n","useTranslation","accessibleTime","useMemo","date","isControlledLeaving","isLeaving","setIsLeaving","useState","dismissTimerRef","useRef","effectiveLeaving","prefersReducedMotion","handleDismiss","useCallback","event","raw","ms","state","unreadSuffix","subjectFragment","ariaLabel","hasSafeUrl","senderText","jsx","senderNode","showThreadCount","jsxs","Avatar","Timestamp","Button","IconButton","X"],"mappings":"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"}

package/dist/_chunks/{message-tray-B762TKuv.js → message-tray-hSQff9u4.js}

@@ -9,7 +9,7 @@ import { I as me } from "./icon-button-CKEOrN37.js";
 import { B as E } from "./button-DD_0Xdmr.js";
 import { S as L } from "./separator-CYU_bGFn.js";
 import { S as f } from "./skeleton-CZbwyJAA.js";
-import { M as pe } from "./message-card-BbRhZkDI.js";
+import { M as pe } from "./message-card-DSPw5ghw.js";
 import { u as ue } from "./registry-nPAVE19X.js";
 import { M as F } from "./mail-C8irm52s.js";
 const ge = {
@@ -110,7 +110,7 @@ const ge = {
   [
     "ds:flex ds:flex-col",
     "ds:bg-[var(--popover)] ds:text-[var(--popover-foreground)]",
-    "ds:border ds:border-[color:var(--border)]",
+    "ds:border ds:border-[color:var(--card-border)]",
     "ds:rounded-[var(--radius-md)]",
     "ds:shadow-[var(--shadow-lg)]",
     "ds:z-[var(--z-popover)]",
@@ -412,4 +412,4 @@ export {
   be as M,
   ge as m
 };
-//# sourceMappingURL=message-tray-B762TKuv.js.map
+//# sourceMappingURL=message-tray-hSQff9u4.js.map