@godxjp/ui 31.31.7 → 32.0.0

package/docs/feedback/toast.tsx

@@ -1,135 +0,0 @@
-import { Toaster, toast } from "@godxjp/ui/feedback";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Button } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-/**
- * Toast (Toaster + sonner) · transient ephemeral feedback. Mount ONE <Toaster>
- * at app root. Fire through the public @godxjp/ui/feedback toast export.
- */
-export default function Demo() {
-  return (
-    <PageContainer
-      title="Toast"
-      subtitle="Toaster (mount once at root) + toast() from sonner · fire-and-forget ephemeral feedback"
-    >
-      {/* Mount Toaster once · in a real app this lives in the root layout */}
-      <Toaster richColors position="top-right" duration={4000} closeButton />
-
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Toast variants</CardTitle>
-            <CardDescription>
-              Import toast from sonner (not @godxjp/ui). success / error / warning / info for the
-              four semantic variants. Toasts auto-dismiss · use Alert for persistent messages.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" wrap gap="md">
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => toast.success("仕訳を保存しました")}
-              >
-                success
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => toast.error("保存に失敗しました · 再度お試しください")}
-              >
-                error
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => toast.warning("セッションの有効期限が近づいています")}
-              >
-                warning
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => toast.info("エクスポートを開始しました")}
-              >
-                info
-              </Button>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>Programmatic dismiss</CardTitle>
-            <CardDescription>
-              Keep the returned id and dismiss a specific toast explicitly.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Button
-              variant="outline"
-              onClick={() => {
-                const id = toast.loading("同期しています…", { duration: Infinity });
-                window.setTimeout(() => toast.dismiss(id), 500);
-              }}
-            >
-              同期トーストを表示して閉じる
-            </Button>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Soft destructive with undo action</CardTitle>
-            <CardDescription>
-              After a delete, surface an undo action via the toast action option. The user can
-              recover without a confirmation modal.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Button
-              variant="destructive"
-              size="sm"
-              onClick={() =>
-                toast("請求書 #INV-2024-0042 を削除しました", {
-                  action: {
-                    label: "元に戻す",
-                    onClick: () => toast.info("削除を取り消しました"),
-                  },
-                })
-              }
-            >
-              請求書を削除
-            </Button>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Promise toast (loading → success/error)</CardTitle>
-            <CardDescription>
-              toast.promise() tracks an async operation automatically · shows a loading state then
-              resolves to success or error. Ideal for background exports or bulk imports.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() =>
-                toast.promise(new Promise<void>((r) => setTimeout(r, 2000)), {
-                  loading: "CSV をエクスポート中...",
-                  success: "エクスポートが完了しました",
-                  error: "エクスポートに失敗しました",
-                })
-              }
-            >
-              CSV エクスポート
-            </Button>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/feedback/tooltip.tsx

@@ -1,171 +0,0 @@
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@godxjp/ui/feedback";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { Button, Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { Copy, Info, Pencil, Trash2 } from "lucide-react";
-
-/**
- * Tooltip · self-providing (no app-level TooltipProvider needed). Compose
- * Tooltip > TooltipTrigger (asChild on interactive elements) > TooltipContent.
- * Read-only hints only · use Popover for interactive floating content.
- *
- * TooltipProvider stays OPTIONAL — reach for it only to tune the open/close
- * delay across a whole cluster (e.g. a dense toolbar) in one place instead of
- * repeating delayDuration on every Tooltip. See the last card.
- */
-export default function Demo() {
-  return (
-    <PageContainer
-      title="Tooltip"
-      subtitle="hover/focus read-only hint · icon labels, truncated values, keyboard shortcuts"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Icon-only button labels</CardTitle>
-            <CardDescription>
-              Use TooltipTrigger asChild to avoid nesting a button inside a button. The tooltip
-              provides the accessible label for icon-only actions in DataTable rows.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" gap="sm" align="center">
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button variant="ghost" size="icon" aria-label="請求書をコピー">
-                    <Copy className="size-4" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent side="top">請求書をコピー</TooltipContent>
-              </Tooltip>
-
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    aria-label="削除"
-                    className="text-destructive hover:text-destructive"
-                  >
-                    <Trash2 className="size-4" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent side="top">削除 (元に戻せません)</TooltipContent>
-              </Tooltip>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Contextual help on a form label</CardTitle>
-            <CardDescription>
-              Wrap a non-interactive icon in a span with tabIndex=0 so keyboard users can focus it.
-              Explain accounting terms or beta features without cluttering the UI.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="row" gap="sm" align="center">
-              <Text weight="medium">AR 残高</Text>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <span tabIndex={0} className="text-muted-foreground cursor-help">
-                    <Info className="size-4" />
-                  </span>
-                </TooltipTrigger>
-                <TooltipContent side="right" className="max-w-56">
-                  売掛金の未回収合計額。請求書ステータスが「未払い」のものを集計しています。
-                </TooltipContent>
-              </Tooltip>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Disabled button reason</CardTitle>
-            <CardDescription>
-              Wrap a disabled Button in a Tooltip to explain why the action is unavailable.
-              TooltipTrigger asChild merges onto the disabled element correctly.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <span tabIndex={0} className="inline-block">
-                  <Button disabled>承認申請</Button>
-                </span>
-              </TooltipTrigger>
-              <TooltipContent side="bottom">全項目を入力してから申請できます</TooltipContent>
-            </Tooltip>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Keyboard shortcut hint</CardTitle>
-            <CardDescription>
-              Surface keyboard shortcuts on toolbar buttons without adding visible text to the UI.
-              delayDuration={0} for instant display on quick hover.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Tooltip delayDuration={0}>
-              <TooltipTrigger asChild>
-                <Button variant="outline" size="sm">
-                  検索
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent side="bottom">⌘K でグローバル検索を開く</TooltipContent>
-            </Tooltip>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Shared delay across a toolbar (TooltipProvider)</CardTitle>
-            <CardDescription>
-              Wrap a cluster in TooltipProvider to set one delayDuration for every tooltip inside ·
-              a dense toolbar feels snappy without repeating the prop on each Tooltip.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <TooltipProvider delayDuration={0}>
-              <Flex direction="row" gap="sm" align="center">
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button variant="ghost" size="icon" aria-label="編集">
-                      <Pencil className="size-4" />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent side="bottom">編集</TooltipContent>
-                </Tooltip>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button variant="ghost" size="icon" aria-label="複製">
-                      <Copy className="size-4" />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent side="bottom">複製</TooltipContent>
-                </Tooltip>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      aria-label="削除"
-                      className="text-destructive hover:text-destructive"
-                    >
-                      <Trash2 className="size-4" />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent side="bottom">削除 (元に戻せません)</TooltipContent>
-                </Tooltip>
-              </Flex>
-            </TooltipProvider>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/feedback/two-factor-setup.tsx

@@ -1,68 +0,0 @@
-import { useState } from "react";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
-import { TwoFactorSetup, type TwoFactorSetupLabels } from "@godxjp/ui/feedback";
-import { Button, Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-const labels: TwoFactorSetupLabels = {
-  title: "二要素認証を有効にする",
-  description: "認証アプリでQRコードを読み取り、表示された6桁のコードを入力します。",
-  qrLabel: "認証アプリ登録用QRコード",
-  manualKeyLabel: "手動セットアップキー",
-  codeLabel: "確認コード",
-  codePlaceholder: "123 456",
-  recoveryNotice: "復旧コードは安全な場所に保存してください。再表示できません。",
-  cancel: "キャンセル",
-  confirm: "確認して有効化",
-  acknowledge: "保存しました",
-};
-
-/**
- * TwoFactorSetup — controlled enrollment and one-time recovery-code journey. Persistence and
- * network requests remain consumer-owned; this frame demonstrates the public state boundary.
- */
-export default function Demo() {
-  const [open, setOpen] = useState(false);
-  const [code, setCode] = useState("");
-  const [recoveryCodes, setRecoveryCodes] = useState<string[]>([]);
-
-  const beginEnrollment = () => {
-    setCode("");
-    setRecoveryCodes([]);
-    setOpen(true);
-  };
-
-  return (
-    <PageContainer title="TwoFactorSetup" subtitle="登録 · OTP確認 · 復旧コード受領">
-      <Card>
-        <CardHeader>
-          <CardTitle level={2}>認証アプリを登録</CardTitle>
-          <CardDescription>6桁の確認コードが揃うまで有効化操作は利用できません。</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <Flex direction="col" gap="md">
-            <Button onClick={beginEnrollment}>二要素認証を設定</Button>
-            <Text size="sm" tone="muted" aria-live="polite">
-              {recoveryCodes.length > 0
-                ? "復旧コードを表示しています。"
-                : "二要素認証はまだ設定されていません。"}
-            </Text>
-          </Flex>
-          <TwoFactorSetup
-            open={open}
-            onOpenChange={setOpen}
-            qrValue="otpauth://totp/Godx:tanaka@example.com?secret=JBSWY3DPEHPK3PXP&issuer=Godx"
-            manualKey="JBSW Y3DP EHPK 3PXP"
-            code={code}
-            onCodeChange={setCode}
-            onConfirm={() => setRecoveryCodes(["alpha-7k2m", "bravo-9p4x", "charlie-3d8q"])}
-            recoveryCodes={recoveryCodes}
-            onAcknowledge={() => setOpen(false)}
-            labels={labels}
-          />
-        </CardContent>
-      </Card>
-    </PageContainer>
-  );
-}

package/docs/foundation/_email-specimen.ts

@@ -1,274 +0,0 @@
-/**
- * A complete transactional-email document, built ONLY from `@godxjp/ui/email`.
- *
- * This is the reference implementation the `foundation/email-tokens` page renders in an iframe and
- * that a Blade / Twig / MJML author copies: table layout, literal inline styles, an embedded brand
- * mark, a bulletproof CTA and a legal footer — with every colour, size and radius read from the
- * token export instead of typed by hand. The copy is deliberate placeholder text; product wording,
- * recipients, links and locale belong to the sending application.
- */
-import {
-  EMAIL_BRAND_MARK,
-  EMAIL_COLORS,
-  EMAIL_COLORS_DARK,
-  EMAIL_CTA,
-  EMAIL_FOCUS,
-  EMAIL_FOOTER,
-  EMAIL_MOBILE,
-  EMAIL_SHELL,
-  EMAIL_TYPOGRAPHY,
-  emailBrandMarkSvg,
-  emailInlineStyle,
-} from "@godxjp/ui/email";
-
-const c = EMAIL_COLORS;
-
-/** A vertical spacer row — the only rhythm device every client honours. */
-const spacer = (height: number) =>
-  `<div style="${emailInlineStyle({ height: `${height}px`, lineHeight: `${height}px`, fontSize: 0 })}">&#8203;</div>`;
-
-/**
- * The `<style>` block: progressive enhancement ONLY. Every rule here has a literal inline
- * equivalent, so a client that strips `<style>` (Gmail on mobile web, most desktop clients) still
- * renders the desktop layout correctly — it simply does not reflow.
- */
-const progressiveStyles = `
-  @media (max-width: ${EMAIL_MOBILE.maxWidth}) {
-    .email-page { padding: ${EMAIL_MOBILE.pagePadding} !important; }
-    .email-card { width: ${EMAIL_MOBILE.width} !important; }
-    .email-body { padding: ${EMAIL_MOBILE.padding} !important; }
-    .email-heading { font-size: ${EMAIL_MOBILE.headingFontSize} !important; }
-    .email-cta, .email-cta-link { width: ${EMAIL_MOBILE.ctaWidth} !important; }
-  }
-  @media (prefers-color-scheme: dark) {
-    .email-page { background-color: ${EMAIL_COLORS_DARK.background} !important; }
-    .email-card { background-color: ${EMAIL_COLORS_DARK.surface} !important;
-                  border-color: ${EMAIL_COLORS_DARK.border} !important; }
-    .email-body, .email-heading { color: ${EMAIL_COLORS_DARK.foreground} !important; }
-    .email-footer, .email-footer a { color: ${EMAIL_COLORS_DARK.mutedForeground} !important; }
-  }
-  a:focus-visible {
-    outline: ${EMAIL_FOCUS.borderWidth} solid ${c.focus};
-    outline-offset: 2px;
-  }
-`;
-
-export interface EmailSpecimenCopy {
-  wordmark: string;
-  heading: string;
-  lede: string;
-  /** Reference strings — ids, masked numbers, ISO dates. Set in the mono face. */
-  reference: string[];
-  cta: string;
-  legal: string;
-  links: string[];
-}
-
-export const EMAIL_SPECIMEN_COPY: EmailSpecimenCopy = {
-  wordmark: "GoDX",
-  heading: "Heading placeholder",
-  lede: `One or two calm sentences of placeholder body copy, long enough to wrap and show the ${EMAIL_TYPOGRAPHY.bodyLineHeight} line height inside the 416px content column.`,
-  cta: "Primary action",
-  reference: ["Reference: ref_0000", "Date: 2026-01-01"],
-  legal: "Placeholder legal line. This address is not monitored.",
-  links: ["Help", "Privacy", "Unsubscribe"],
-};
-
-/** Build the full email document. */
-export function buildEmailSpecimenHtml(copy: EmailSpecimenCopy = EMAIL_SPECIMEN_COPY): string {
-  // In a header the mark is DECORATIVE: the wordmark beside it carries the accessible name, so the
-  // brand is announced once rather than twice.
-  const mark = emailBrandMarkSvg({ label: "" });
-
-  // The canonical header is a LOCKUP, not a bare mark. Email clients have no flexbox, so the row is
-  // a presentational table and the mark-to-wordmark gap is a spacer cell.
-  // ui-audit-disable-next-line no-raw-table
-  const lockup = `<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="${emailInlineStyle(
-    { borderCollapse: "collapse" },
-  )}"><tr>
-              <td valign="middle" style="${emailInlineStyle({
-                fontSize: 0,
-                lineHeight: 0,
-                // The next line closes a JS template-literal interpolation, not a hand-formatted
-                // price, so the currency rule is a false positive here.
-                // ui-audit-disable-next-line hardcoded-currency
-              })}">${mark}</td>
-              <td style="${emailInlineStyle({ width: EMAIL_BRAND_MARK.gap, fontSize: 0, lineHeight: 0 })}">&#8203;</td>
-              <td valign="middle" style="${emailInlineStyle({
-                fontFamily: EMAIL_TYPOGRAPHY.fontFamily,
-                fontSize: EMAIL_BRAND_MARK.wordmarkFontSize,
-                fontWeight: EMAIL_BRAND_MARK.wordmarkFontWeight,
-                lineHeight: 1,
-                color: c.foreground,
-                // The next line closes a JS template-literal interpolation, not a hand-formatted
-                // price, so the currency rule is a false positive here.
-                // ui-audit-disable-next-line hardcoded-currency
-              })}">${copy.wordmark}</td>
-            </tr></table>`;
-
-  const reference = copy.reference.join("<br>");
-
-  const footerLinks = copy.links
-    .map(
-      (label, index) =>
-        (index === 0
-          ? ""
-          : `<span style="${emailInlineStyle({ display: "inline-block", width: EMAIL_FOOTER.linkGap })}">&#8203;</span>`) +
-        `<a href="#" style="${emailInlineStyle({
-          color: c.mutedForeground,
-          textDecoration: "underline",
-          // The next line closes a JS template-literal interpolation, it is not a hand-formatted
-          // price, so the currency rule is a false positive here.
-          // ui-audit-disable-next-line hardcoded-currency
-        })}">${label}</a>`,
-    )
-    .join("");
-
-  return `<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<meta name="color-scheme" content="light dark">
-<title>Transactional email specimen</title>
-<style>
-${progressiveStyles}
-</style>
-</head>
-<body style="${emailInlineStyle({ margin: 0, padding: 0, backgroundColor: c.background })}">
-<!-- Page canvas. Email clients support neither flex nor grid, so every band of the document is a
-     presentational table. ui-audit-disable-next-line no-raw-table -->
-<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="${emailInlineStyle(
-    { borderCollapse: "collapse", backgroundColor: c.background },
-  )}">
-  <tr>
-    <td class="email-page" align="center" style="${emailInlineStyle({
-      padding: EMAIL_SHELL.pagePadding,
-      backgroundColor: c.background,
-    })}">
-      <!-- Card shell. A fixed-width presentational table is the only container that centres
-           reliably in Outlook. ui-audit-disable-next-line no-raw-table -->
-      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="${EMAIL_SHELL.widthPx}" class="email-card" style="${emailInlineStyle(
-        {
-          width: EMAIL_SHELL.width,
-          maxWidth: "100%",
-          borderCollapse: "separate",
-          backgroundColor: c.surface,
-          border: `${EMAIL_SHELL.borderWidth} solid ${c.border}`,
-          borderRadius: EMAIL_SHELL.radius,
-        },
-      )}">
-        <tr>
-          <td class="email-body" style="${emailInlineStyle({
-            padding: EMAIL_SHELL.padding,
-            fontFamily: EMAIL_TYPOGRAPHY.fontFamily,
-            fontSize: EMAIL_TYPOGRAPHY.bodyFontSize,
-            lineHeight: EMAIL_TYPOGRAPHY.bodyLineHeight,
-            fontWeight: EMAIL_TYPOGRAPHY.bodyFontWeight,
-            color: c.foreground,
-          })}">
-            ${lockup}
-            ${spacer(EMAIL_SHELL.gapPx)}
-            <h1 class="email-heading" style="${emailInlineStyle({
-              margin: 0,
-              fontFamily: EMAIL_TYPOGRAPHY.fontFamily,
-              fontSize: EMAIL_TYPOGRAPHY.headingFontSize,
-              lineHeight: EMAIL_TYPOGRAPHY.headingLineHeight,
-              fontWeight: EMAIL_TYPOGRAPHY.headingFontWeight,
-              color: c.foreground,
-              // The next line closes a JS template-literal interpolation, not a hand-formatted
-              // price, so the currency rule is a false positive here.
-              // ui-audit-disable-next-line hardcoded-currency
-            })}">${copy.heading}</h1>
-            ${spacer(EMAIL_SHELL.gapSmPx)}
-            <p style="${emailInlineStyle({
-              margin: 0,
-              fontSize: EMAIL_TYPOGRAPHY.bodyFontSize,
-              lineHeight: EMAIL_TYPOGRAPHY.bodyLineHeight,
-              color: c.foreground,
-              // The next line closes a JS template-literal interpolation, not a hand-formatted
-              // price, so the currency rule is a false positive here.
-              // ui-audit-disable-next-line hardcoded-currency
-            })}">${copy.lede}</p>
-            ${spacer(EMAIL_SHELL.gapSmPx)}
-            <!-- Reference block. Ids, masked numbers and ISO dates are set in the mono face so the
-                 figures align and cannot be misread. -->
-            <p style="${emailInlineStyle({
-              margin: 0,
-              fontFamily: EMAIL_TYPOGRAPHY.monoFontFamily,
-              fontSize: EMAIL_FOOTER.fontSize,
-              lineHeight: EMAIL_TYPOGRAPHY.bodyLineHeight,
-              color: c.mutedForeground,
-              // The next line closes a JS template-literal interpolation, not a hand-formatted
-              // price, so the currency rule is a false positive here.
-              // ui-audit-disable-next-line hardcoded-currency
-            })}">${reference}</p>
-            ${spacer(EMAIL_SHELL.gapPx)}
-            <!-- Bulletproof CTA. The button is a padded table cell so Outlook paints the fill and
-                 the radius. ui-audit-disable-next-line no-raw-table -->
-            <table role="presentation" border="0" cellpadding="0" cellspacing="0" style="${emailInlineStyle(
-              { borderCollapse: "separate" },
-            )}">
-              <tr>
-                <td class="email-cta" align="center" valign="middle" height="${EMAIL_CTA.heightPx}" style="${emailInlineStyle(
-                  {
-                    height: EMAIL_CTA.height,
-                    borderRadius: EMAIL_CTA.radius,
-                    backgroundColor: c.primary,
-                  },
-                )}">
-                  <a class="email-cta-link" href="#" style="${emailInlineStyle({
-                    display: "inline-block",
-                    padding: `0 ${EMAIL_CTA.paddingX}`,
-                    height: EMAIL_CTA.height,
-                    lineHeight: EMAIL_CTA.lineHeight,
-                    fontFamily: EMAIL_TYPOGRAPHY.fontFamily,
-                    fontSize: EMAIL_CTA.fontSize,
-                    fontWeight: EMAIL_CTA.fontWeight,
-                    color: c.primaryForeground,
-                    textDecoration: "none",
-                    // The next line closes a JS template-literal interpolation, not a
-                    // hand-formatted price, so the currency rule is a false positive here.
-                    // ui-audit-disable-next-line hardcoded-currency
-                  })}">${copy.cta}</a>
-                </td>
-              </tr>
-            </table>
-            ${spacer(EMAIL_SHELL.gapPx)}
-            <!-- Legal footer rail. A full-width presentational table keeps the hairline and the
-                 inset stable in clients that drop CSS borders. ui-audit-disable-next-line no-raw-table -->
-            <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
-              <tr>
-                <td class="email-footer" style="${emailInlineStyle({
-                  borderTop: `${EMAIL_FOOTER.borderWidth} solid ${c.border}`,
-                  paddingTop: EMAIL_FOOTER.paddingTop,
-                  fontFamily: EMAIL_TYPOGRAPHY.fontFamily,
-                  fontSize: EMAIL_FOOTER.fontSize,
-                  lineHeight: EMAIL_FOOTER.lineHeight,
-                  color: c.mutedForeground,
-                })}">
-                  <p style="${emailInlineStyle({
-                    margin: 0,
-                    // The next line closes a JS template-literal interpolation, not a
-                    // hand-formatted price, so the currency rule is a false positive here.
-                    // ui-audit-disable-next-line hardcoded-currency
-                  })}">${copy.legal}</p>
-                  ${spacer(EMAIL_SHELL.gapSmPx)}
-                  <p style="${emailInlineStyle({
-                    margin: 0,
-                    // The next line closes a JS template-literal interpolation, not a
-                    // hand-formatted price, so the currency rule is a false positive here.
-                    // ui-audit-disable-next-line hardcoded-currency
-                  })}">${footerLinks}</p>
-                </td>
-              </tr>
-            </table>
-          </td>
-        </tr>
-      </table>
-    </td>
-  </tr>
-</table>
-</body>
-</html>`;
-}