@godxjp/ui 19.1.0 → 19.3.1

package/docs/asset-modules.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Static-asset imports for the docs pages.
+ *
+ * `tsconfig.json` pins `"types": ["node"]`, so `vite/client` — which normally declares these — is
+ * never loaded, and `tsconfig.docs.json` inherits that. Without this file `import cover from
+ * "../assets/cover-terrain.svg"` is a TS2307 even though Vite resolves it perfectly at build time,
+ * which is exactly how it passed locally and failed `typecheck:docs` in CI.
+ *
+ * Narrowed to the formats actually committed under `docs/assets`, and kept in step with
+ * ASSET_EXTENSIONS in `scripts/check-example-imports.mjs`, which decides the same question for the
+ * import guard.
+ */
+declare module "*.svg" {
+  const src: string;
+  export default src;
+}
+
+declare module "*.png" {
+  const src: string;
+  export default src;
+}
+
+declare module "*.jpg" {
+  const src: string;
+  export default src;
+}
+
+declare module "*.jpeg" {
+  const src: string;
+  export default src;
+}
+
+declare module "*.webp" {
+  const src: string;
+  export default src;
+}
+
+declare module "*.avif" {
+  const src: string;
+  export default src;
+}
+
+declare module "*.gif" {
+  const src: string;
+  export default src;
+}

package/docs/assets/cover-terrain.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="480" height="270" viewBox="0 0 480 270" role="img">
+  <rect width="480" height="270" fill="hsl(208 38% 66%)"/>
+  <circle cx="355" cy="81" r="38" fill="hsl(208 38% 84%)"/>
+  <path d="M0 270 L163 113 L288 270 Z" fill="hsl(208 38% 50%)"/>
+  <path d="M192 270 L346 151 L480 270 Z" fill="hsl(208 38% 58%)"/>
+</svg>

package/docs/assets/portrait-amber.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" role="img">
+  <rect width="96" height="96" fill="hsl(41 42% 62%)"/>
+  <circle cx="48" cy="40.32" r="19.200000000000003" fill="hsl(41 42% 82%)"/>
+  <path d="M21.12 96 a26.880000000000003 32.64 0 0 1 53.760000000000005 0 z" fill="hsl(41 42% 82%)"/>
+</svg>

package/docs/assets/portrait-clay.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" role="img">
+  <rect width="96" height="96" fill="hsl(12 42% 62%)"/>
+  <circle cx="48" cy="40.32" r="19.200000000000003" fill="hsl(12 42% 82%)"/>
+  <path d="M21.12 96 a26.880000000000003 32.64 0 0 1 53.760000000000005 0 z" fill="hsl(12 42% 82%)"/>
+</svg>

package/docs/assets/portrait-indigo.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" role="img">
+  <rect width="96" height="96" fill="hsl(224 42% 62%)"/>
+  <circle cx="48" cy="40.32" r="19.200000000000003" fill="hsl(224 42% 82%)"/>
+  <path d="M21.12 96 a26.880000000000003 32.64 0 0 1 53.760000000000005 0 z" fill="hsl(224 42% 82%)"/>
+</svg>

package/docs/assets/portrait-iris.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" role="img">
+  <rect width="96" height="96" fill="hsl(264 42% 62%)"/>
+  <circle cx="48" cy="40.32" r="19.200000000000003" fill="hsl(264 42% 82%)"/>
+  <path d="M21.12 96 a26.880000000000003 32.64 0 0 1 53.760000000000005 0 z" fill="hsl(264 42% 82%)"/>
+</svg>

package/docs/assets/portrait-moss.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" role="img">
+  <rect width="96" height="96" fill="hsl(152 42% 62%)"/>
+  <circle cx="48" cy="40.32" r="19.200000000000003" fill="hsl(152 42% 82%)"/>
+  <path d="M21.12 96 a26.880000000000003 32.64 0 0 1 53.760000000000005 0 z" fill="hsl(152 42% 82%)"/>
+</svg>

package/docs/assets/portrait-plum.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" role="img">
+  <rect width="96" height="96" fill="hsl(340 42% 62%)"/>
+  <circle cx="48" cy="40.32" r="19.200000000000003" fill="hsl(340 42% 82%)"/>
+  <path d="M21.12 96 a26.880000000000003 32.64 0 0 1 53.760000000000005 0 z" fill="hsl(340 42% 82%)"/>
+</svg>

package/docs/assets/portrait-slate.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" role="img">
+  <rect width="96" height="96" fill="hsl(212 42% 62%)"/>
+  <circle cx="48" cy="40.32" r="19.200000000000003" fill="hsl(212 42% 82%)"/>
+  <path d="M21.12 96 a26.880000000000003 32.64 0 0 1 53.760000000000005 0 z" fill="hsl(212 42% 82%)"/>
+</svg>

package/docs/charts/compact-bar-trend.tsx

@@ -0,0 +1,328 @@
+import type * as React from "react";
+import { Building2, UserPlus } from "lucide-react";
+import { CompactBarTrend } from "@godxjp/ui/charts/compact-bar-trend";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  StatCard,
+} from "@godxjp/ui/data-display";
+import { Text } from "@godxjp/ui/general";
+import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
+
+/**
+ * CompactBarTrend — the DEPENDENCY-FREE compact bar trend (gh#218).
+ *
+ * `BarChart` needs the `recharts` optional peer; a platform whose policy forbids screen
+ * implementers from adding dependencies cannot use it, and used to fall back to a page-local
+ * grid with inline heights. `CompactBarTrend` closes that gap: the marks are token-sized CSS
+ * blocks, so the canonical SCR-201 admin dashboard gets a real framework chart with zero
+ * consumer CSS, zero inline height math and zero hardcoded colour.
+ *
+ * Everything below is composed from real @godxjp/ui primitives only.
+ */
+
+/** Seven days of new organizations — the canonical SCR-201 dataset. */
+const newOrganizations = [
+  { date: "7/24", count: 4 },
+  { date: "7/25", count: 7 },
+  { date: "7/26", count: 2 },
+  { date: "7/27", count: 9 },
+  { date: "7/28", count: 5 },
+  { date: "7/29", count: 12 },
+  { date: "7/30", count: 8 },
+];
+
+/** N is not fixed at seven — a fortnight reads at the same density. */
+const fortnight = [
+  { date: "7/17", users: 120 },
+  { date: "7/18", users: 168 },
+  { date: "7/19", users: 96 },
+  { date: "7/20", users: 74 },
+  { date: "7/21", users: 210 },
+  { date: "7/22", users: 188 },
+  { date: "7/23", users: 152 },
+  { date: "7/24", users: 240 },
+  { date: "7/25", users: 196 },
+  { date: "7/26", users: 88 },
+  { date: "7/27", users: 132 },
+  { date: "7/28", users: 174 },
+  { date: "7/29", users: 262 },
+  { date: "7/30", users: 208 },
+];
+
+/** Three points, zeros and a negative — the edge-data frame. */
+const edgeData = [
+  { period: "第1四半期", revenue: 0 },
+  { period: "非常に長い期間ラベルの例", revenue: 4200000 },
+  { period: "第3四半期", revenue: -180000 },
+];
+
+const jpy = { style: "currency", currency: "JPY", notation: "compact" } as const;
+
+export default function Demo() {
+  return (
+    <PageContainer
+      title="CompactBarTrend"
+      subtitle="recharts 不要の軽量トレンド棒グラフ · 高さ・間隔・配色はすべて --chart-trend-* トークン"
+    >
+      <Flex direction="col" gap="lg">
+        {/* ── 1. The canonical SCR-201 dashboard summary row ─────────────────────── */}
+        <ResponsiveGrid columns={3}>
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>新規組織（7日間）</CardTitle>
+              <CardDescription>日別に作成された組織数。当日を強調表示。</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Flex direction="col" gap="md">
+                <StatCard label="今週の合計" value="47" delta="+18%" icon={Building2} />
+                <CompactBarTrend
+                  label="新規組織（7日間）"
+                  description="日別に作成された組織数"
+                  data={newOrganizations}
+                  categoryKey="date"
+                  valueKey="count"
+                  emphasizedIndex={5}
+                  size="xs"
+                />
+              </Flex>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>アクティビティフッター</CardTitle>
+              <CardDescription>
+                footer スロットはプロットの外側（role=img の外）に描画されるため、リンクも操作可能。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Flex direction="col" gap="md">
+                <StatCard label="新規ユーザー" value="1,284" delta="+6%" icon={UserPlus} />
+                <CompactBarTrend
+                  label="新規ユーザー（7日間）"
+                  data={newOrganizations}
+                  categoryKey="date"
+                  valueKey="count"
+                  emphasizedIndex={-1}
+                  footer={
+                    <Text size="xs" tone="muted">
+                      最終更新 2026-07-30 09:00 JST
+                    </Text>
+                  }
+                />
+              </Flex>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>空状態</CardTitle>
+              <CardDescription>data が空のとき EmptyState を描画します。</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Flex direction="col" gap="md">
+                <CompactBarTrend
+                  label="新規組織（データなし）"
+                  data={[]}
+                  categoryKey="date"
+                  valueKey="count"
+                  emptyMessage="この期間のデータはありません"
+                />
+                <CompactBarTrend
+                  label="既定の空メッセージ"
+                  data={[]}
+                  categoryKey="date"
+                  valueKey="count"
+                />
+              </Flex>
+            </CardContent>
+          </Card>
+        </ResponsiveGrid>
+
+        {/* ── 2. size — the xs|sm|md|lg plot-height tiers ────────────────────────── */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>size · 高さティア</CardTitle>
+            <CardDescription>
+              xs（ダッシュボード要約カードの既定）· sm · md · lg。高さは --chart-trend-plot-height-*
+              が所有し、px を書くことはありません。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveGrid columns={4}>
+              {(["xs", "sm", "md", "lg"] as const).map((size) => (
+                <CompactBarTrend
+                  key={size}
+                  label={`size="${size}"`}
+                  data={newOrganizations}
+                  categoryKey="date"
+                  valueKey="count"
+                  emphasizedIndex={-1}
+                  size={size}
+                />
+              ))}
+            </ResponsiveGrid>
+          </CardContent>
+        </Card>
+
+        {/* ── 3. emphasizedIndex + showCategoryLabels + numberFormat ─────────────── */}
+        <ResponsiveGrid columns={2}>
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>emphasizedIndex</CardTitle>
+              <CardDescription>
+                未指定＝強調なし · 正の index · 負の index（-1 は最新）。強調は色だけに頼らず、
+                代替テキストの該当行にも注記されます（WCAG 1.4.1）。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Flex direction="col" gap="md">
+                <CompactBarTrend
+                  label="強調なし"
+                  data={newOrganizations}
+                  categoryKey="date"
+                  valueKey="count"
+                  size="sm"
+                />
+                <CompactBarTrend
+                  label="emphasizedIndex={0}（最初の日）"
+                  data={newOrganizations}
+                  categoryKey="date"
+                  valueKey="count"
+                  emphasizedIndex={0}
+                  size="sm"
+                />
+                <CompactBarTrend
+                  label="emphasizedIndex={-1}（最新の日）"
+                  data={newOrganizations}
+                  categoryKey="date"
+                  valueKey="count"
+                  emphasizedIndex={-1}
+                  size="sm"
+                />
+              </Flex>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>showCategoryLabels · numberFormat</CardTitle>
+              <CardDescription>
+                ラベルを消してもデータは代替テキストに残ります。値の書式は Intl.NumberFormat
+                （ロケール自動）。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Flex direction="col" gap="md">
+                <CompactBarTrend
+                  label="14日間のアクティブユーザー（目盛りなし）"
+                  description="7 点固定ではありません。N 件の category/value に対応します。"
+                  data={fortnight}
+                  categoryKey="date"
+                  valueKey="users"
+                  emphasizedIndex={-1}
+                  showCategoryLabels={false}
+                  size="sm"
+                  numberFormat={{ notation: "compact" }}
+                />
+                <CompactBarTrend
+                  label="四半期売上（通貨・端数データ）"
+                  description="0・負数・長いカテゴリ名を含む edge-data フレーム。"
+                  data={edgeData}
+                  categoryKey="period"
+                  valueKey="revenue"
+                  emphasizedIndex={1}
+                  size="sm"
+                  numberFormat={jpy}
+                />
+              </Flex>
+            </CardContent>
+          </Card>
+        </ResponsiveGrid>
+
+        {/* ── 4. Responsive — 1440 / 1024 / 390 container widths ─────────────────── */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>レスポンシブ · 1440 / 1024 / 390</CardTitle>
+            <CardDescription>
+              棒は flex 1 1 0 で幅を分け合うため、同じマークアップがどのコンテナ幅にも収まります。
+              長い目盛りラベルはカードを広げずに省略されます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="lg">
+              {[1440, 1024, 390].map((width) => (
+                <Flex key={width} direction="col" gap="sm" style={{ maxInlineSize: `${width}px` }}>
+                  <Text size="xs" tone="muted">{`コンテナ幅 ${width}px`}</Text>
+                  <CompactBarTrend
+                    label="新規組織（7日間）"
+                    description="日別に作成された組織数"
+                    data={newOrganizations}
+                    categoryKey="date"
+                    valueKey="count"
+                    emphasizedIndex={5}
+                    footer={
+                      <Text size="xs" tone="muted">
+                        直近のアクティビティを見る
+                      </Text>
+                    }
+                  />
+                </Flex>
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+
+        {/* ── 5. Token theming (cardinal rules #44/#45) ──────────────────────────── */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>トークンでのテーマ適用</CardTitle>
+            <CardDescription>
+              サービス側の theme.css が --chart-trend-*
+              を一度上書きするだけで密度も配色も変わります。 ページ固有の CSS
+              は不要です。ベースラインは既定で「静か」（#44）、opt-in で表示します。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveGrid columns={2}>
+              <CompactBarTrend
+                label="既定"
+                data={newOrganizations}
+                categoryKey="date"
+                valueKey="count"
+                emphasizedIndex={-1}
+                size="sm"
+              />
+              <Flex
+                direction="col"
+                style={
+                  {
+                    "--chart-trend-bar-gap": "var(--space-1)",
+                    "--chart-trend-bar-radius": "var(--radius-pill)",
+                    "--chart-trend-bar-max-width": "var(--space-3)",
+                    "--chart-trend-bar-background": "hsl(var(--chart-2) / 0.35)",
+                    "--chart-trend-bar-emphasis-background": "hsl(var(--chart-2))",
+                    "--chart-trend-baseline-border": "1px solid hsl(var(--border))",
+                  } as React.CSSProperties
+                }
+              >
+                <CompactBarTrend
+                  label="テーマ適用（間隔・角丸・配色・ベースライン）"
+                  data={newOrganizations}
+                  categoryKey="date"
+                  valueKey="count"
+                  emphasizedIndex={-1}
+                  size="sm"
+                />
+              </Flex>
+            </ResponsiveGrid>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/charts/size-tiers.tsx

@@ -0,0 +1,192 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Text } from "@godxjp/ui/general";
+import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
+import { AreaChart, BarChart, LineChart, PieChart } from "@godxjp/ui/charts";
+
+/**
+ * Chart size tiers — the `size` prop of every recharts-backed chart
+ * (`LineChart` / `BarChart` / `AreaChart` / `PieChart`).
+ *
+ * `size` is the CANVAS HEIGHT tier: xs は密度の高いサマリーカード、sm はカード内の補助グラフ、
+ * md（既定）は本文の標準グラフ、lg は分析画面の主役グラフ向けです。高さはコンポーネントが所有し、
+ * 画面側が px を書くことはありません（`height` を渡した場合のみ size より優先されます）。
+ *
+ * 系列の配色は --chart-1..6 パレット、目盛りと凡例の数値は Intl.NumberFormat（ロケール自動）、
+ * 代替テキストは各グラフが内蔵しています。すべて real @godxjp/ui primitives のみで構成しています。
+ */
+
+const tiers = ["xs", "sm", "md", "lg"] as const;
+
+/** LineChart — 2 系列（計画と実績）。系列が複数あるため凡例は既定のまま表示します。 */
+const revenue = [
+  { month: "1月", plan: 1200000, actual: 980000 },
+  { month: "2月", plan: 1500000, actual: 1610000 },
+  { month: "3月", plan: 1800000, actual: 1750000 },
+  { month: "4月", plan: 1600000, actual: 1720000 },
+  { month: "5月", plan: 2000000, actual: 1980000 },
+  { month: "6月", plan: 2200000, actual: 2410000 },
+];
+
+/** BarChart — 単一系列。凡例は不要（見出しが系列名を兼ねます）。 */
+const organizations = [
+  { month: "1月", created: 24 },
+  { month: "2月", created: 31 },
+  { month: "3月", created: 18 },
+  { month: "4月", created: 42 },
+  { month: "5月", created: 37 },
+  { month: "6月", created: 51 },
+];
+
+/** AreaChart — 単一系列の推移。 */
+const sessions = [
+  { week: "第1週", sessions: 12400 },
+  { week: "第2週", sessions: 15800 },
+  { week: "第3週", sessions: 14200 },
+  { week: "第4週", sessions: 19600 },
+  { week: "第5週", sessions: 18100 },
+];
+
+/** PieChart — 少数スライスの構成比。 */
+const expenses = [
+  { category: "給与", amount: 4200000 },
+  { category: "家賃", amount: 1800000 },
+  { category: "システム", amount: 950000 },
+  { category: "光熱費", amount: 600000 },
+];
+
+const jpy = { style: "currency", currency: "JPY", notation: "compact" } as const;
+
+export default function Demo() {
+  return (
+    <PageContainer
+      title="Chart size tiers"
+      subtitle="LineChart · BarChart · AreaChart · PieChart の size = xs / sm / md / lg"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>LineChart · size</CardTitle>
+            <CardDescription>
+              複数系列の推移。size はキャンバス高さのティアだけを変え、配色・凡例・数値書式・
+              代替テキストはどのティアでも同じ契約のままです。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveGrid columns={2}>
+              {tiers.map((size) => (
+                <Flex key={size} direction="col" gap="xs">
+                  <Text size="2xs" mono tone="muted">
+                    {`size="${size}"`}
+                  </Text>
+                  <LineChart
+                    label={`月次売上（計画 vs 実績）size="${size}"`}
+                    data={revenue}
+                    categoryKey="month"
+                    series={[
+                      { dataKey: "plan", label: "計画" },
+                      { dataKey: "actual", label: "実績" },
+                    ]}
+                    numberFormat={jpy}
+                    size={size}
+                    curved
+                  />
+                </Flex>
+              ))}
+            </ResponsiveGrid>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>BarChart · size</CardTitle>
+            <CardDescription>
+              単一系列のため凡例は表示しません。xs はダッシュボードのサマリーカードに収まる密度、 lg
+              は分析画面の主役グラフです。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveGrid columns={2}>
+              {tiers.map((size) => (
+                <Flex key={size} direction="col" gap="xs">
+                  <Text size="2xs" mono tone="muted">
+                    {`size="${size}"`}
+                  </Text>
+                  <BarChart
+                    label={`新規組織数（月別）size="${size}"`}
+                    data={organizations}
+                    categoryKey="month"
+                    series={[{ dataKey: "created", label: "新規組織" }]}
+                    numberFormat={{ notation: "compact" }}
+                    showLegend={false}
+                    size={size}
+                  />
+                </Flex>
+              ))}
+            </ResponsiveGrid>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>AreaChart · size</CardTitle>
+            <CardDescription>
+              面グラフでも高さティアの扱いは同じです。低いティアでは縦軸の目盛りが自動的に
+              間引かれるため、密度の高いカードでも軸ラベルが衝突しません。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveGrid columns={2}>
+              {tiers.map((size) => (
+                <Flex key={size} direction="col" gap="xs">
+                  <Text size="2xs" mono tone="muted">
+                    {`size="${size}"`}
+                  </Text>
+                  <AreaChart
+                    label={`週次セッション数 size="${size}"`}
+                    data={sessions}
+                    categoryKey="week"
+                    series={[{ dataKey: "sessions", label: "セッション" }]}
+                    numberFormat={{ notation: "compact" }}
+                    showLegend={false}
+                    size={size}
+                    curved
+                  />
+                </Flex>
+              ))}
+            </ResponsiveGrid>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>PieChart · size</CardTitle>
+            <CardDescription>
+              円グラフは凡例で識別するため、どのティアでも凡例を残します。低いティアでは
+              凡例の分だけ描画領域が狭くなるので、スライスは 5 件以下に保つのが読みやすい設計です。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveGrid columns={2}>
+              {tiers.map((size) => (
+                <Flex key={size} direction="col" gap="xs">
+                  <Text size="2xs" mono tone="muted">
+                    {`size="${size}"`}
+                  </Text>
+                  <PieChart
+                    label={`経費内訳 size="${size}"`}
+                    data={expenses}
+                    dataKey="amount"
+                    nameKey="category"
+                    numberFormat={jpy}
+                    size={size}
+                    donut
+                  />
+                </Flex>
+              ))}
+            </ResponsiveGrid>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}