@godxjp/ui 19.2.0 → 19.4.0

package/docs/foundation/email-tokens.tsx

@@ -25,7 +25,7 @@ import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
 import { buildEmailSpecimenHtml } from "./_email-specimen";
 
 /**
- * Email tokens · the `@godxjp/ui/email` contract (issue #227).
+ * Email tokens · the `@godxjp/ui/email` contract.
  *
  * A transactional email is rendered by Blade/Twig/MJML, by clients that strip `<style>`, ignore
  * CSS custom properties and block remote images — so neither the React components nor the CSS
@@ -139,8 +139,12 @@ export default function Demo() {
             <iframe
               title="Transactional email specimen at 480px"
               srcDoc={specimen}
-              className="border-border bg-background w-full rounded-md border"
-              style={{ height: 560 }}
+              className="bg-background w-full"
+              style={{
+                border: "1px solid hsl(var(--border))",
+                borderRadius: "var(--radius-md)",
+                height: 560,
+              }}
             />
           </CardContent>
         </Card>
@@ -160,8 +164,13 @@ export default function Demo() {
             <iframe
               title="Transactional email specimen at 360px"
               srcDoc={specimen}
-              className="border-border bg-background rounded-md border"
-              style={{ width: 360, height: 620 }}
+              className="bg-background"
+              style={{
+                border: "1px solid hsl(var(--border))",
+                borderRadius: "var(--radius-md)",
+                width: 360,
+                height: 620,
+              }}
             />
           </CardContent>
         </Card>
@@ -182,39 +191,41 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <ResponsiveGrid columns={{ sm: 1, md: 3 }}>
-              {[
-                { label: "Inline <svg>", markup: EMAIL_BRAND_MARK.svg },
-                {
-                  // Prose label, not markup: it names the email delivery form. The real delivery
-                  // on the next line is a self-contained data: URI (email clients block remote
-                  // images) and it does carry alt="GoDX".
-                  // ui-audit-disable-next-line img-needs-alt
-                  label: "data: URL in <img>",
-                  markup: `<img src="${EMAIL_BRAND_MARK.dataUri}" width="${EMAIL_BRAND_MARK.widthPx}" height="${EMAIL_BRAND_MARK.heightPx}" alt="GoDX">`,
-                },
-                // Prose label, not markup: a raw <table> is the only brand-mark fallback that
-                // renders in email clients without SVG support, so the label names it literally.
-                // ui-audit-disable-next-line no-raw-table
-                { label: "<table> fallback", markup: EMAIL_BRAND_MARK.tableHtml },
-              ].map((item) => (
-                <Flex key={item.label} direction="col" gap="sm">
-                  <div
-                    // eslint-disable-next-line react/no-danger
-                    dangerouslySetInnerHTML={{ __html: item.markup }}
-                  />
-                  <Text size="sm" tone="muted">
-                    {item.label}
-                  </Text>
-                </Flex>
-              ))}
-            </ResponsiveGrid>
-            <Flex direction="col" gap="xs" className="mt-4">
-              <Text size="sm" tone="muted">
-                viewBox {EMAIL_BRAND_MARK.viewBox} · {EMAIL_BRAND_MARK.width}×
-                {EMAIL_BRAND_MARK.height} · capsule {EMAIL_COLORS.brand} · glyph{" "}
-                {EMAIL_COLORS.brandForeground}
-              </Text>
+            <Flex direction="col" gap="md">
+              <ResponsiveGrid columns={{ sm: 1, md: 3 }}>
+                {[
+                  { label: "Inline <svg>", markup: EMAIL_BRAND_MARK.svg },
+                  {
+                    // Prose label, not markup: it names the email delivery form. The real delivery
+                    // on the next line is a self-contained data: URI (email clients block remote
+                    // images) and it does carry alt="GoDX".
+                    // ui-audit-disable-next-line img-needs-alt
+                    label: "data: URL in <img>",
+                    markup: `<img src="${EMAIL_BRAND_MARK.dataUri}" width="${EMAIL_BRAND_MARK.widthPx}" height="${EMAIL_BRAND_MARK.heightPx}" alt="GoDX">`,
+                  },
+                  // Prose label, not markup: a raw <table> is the only brand-mark fallback that
+                  // renders in email clients without SVG support, so the label names it literally.
+                  // ui-audit-disable-next-line no-raw-table
+                  { label: "<table> fallback", markup: EMAIL_BRAND_MARK.tableHtml },
+                ].map((item) => (
+                  <Flex key={item.label} direction="col" gap="sm">
+                    <div
+                      // eslint-disable-next-line react/no-danger
+                      dangerouslySetInnerHTML={{ __html: item.markup }}
+                    />
+                    <Text size="sm" tone="muted">
+                      {item.label}
+                    </Text>
+                  </Flex>
+                ))}
+              </ResponsiveGrid>
+              <Flex direction="col" gap="xs">
+                <Text size="sm" tone="muted">
+                  viewBox {EMAIL_BRAND_MARK.viewBox} · {EMAIL_BRAND_MARK.width}×
+                  {EMAIL_BRAND_MARK.height} · capsule {EMAIL_COLORS.brand} · glyph{" "}
+                  {EMAIL_COLORS.brandForeground}
+                </Text>
+              </Flex>
             </Flex>
           </CardContent>
         </Card>
@@ -235,8 +246,12 @@ export default function Demo() {
               {colorRows.map((row) => (
                 <Flex key={row.token} direction="col" gap="xs">
                   <div
-                    className="border-border h-12 rounded-md border"
-                    style={{ backgroundColor: row.hex }}
+                    className="h-12"
+                    style={{
+                      border: "1px solid hsl(var(--border))",
+                      borderRadius: "var(--radius-md)",
+                      backgroundColor: row.hex,
+                    }}
                   />
                   <Text size="sm">{row.token}</Text>
                   <Flex gap="xs" align="center">
@@ -271,33 +286,35 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <Flex direction="col" gap="xs" className="mb-4">
-              {fontStacks.map((stack) => (
-                <Flex key={stack.label} direction="col" gap="xs">
-                  <Badge tone="neutral" variant="outline">
-                    {stack.label}
-                  </Badge>
-                  <Text size="sm" tone="muted">
-                    {stack.value}
-                  </Text>
-                </Flex>
-              ))}
+            <Flex direction="col" gap="md">
+              <Flex direction="col" gap="xs">
+                {fontStacks.map((stack) => (
+                  <Flex key={stack.label} direction="col" gap="xs">
+                    <Badge tone="neutral" variant="outline">
+                      {stack.label}
+                    </Badge>
+                    <Text size="sm" tone="muted">
+                      {stack.value}
+                    </Text>
+                  </Flex>
+                ))}
+              </Flex>
+              <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 4 }}>
+                {geometryGroups.map((group) => (
+                  <Flex key={group.title} direction="col" gap="xs">
+                    <Text weight="medium">{group.title}</Text>
+                    {group.rows.map(([label, value]) => (
+                      <Flex key={label} justify="between" gap="sm">
+                        <Text size="sm" tone="muted">
+                          {label}
+                        </Text>
+                        <Text size="sm">{value}</Text>
+                      </Flex>
+                    ))}
+                  </Flex>
+                ))}
+              </ResponsiveGrid>
             </Flex>
-            <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 4 }}>
-              {geometryGroups.map((group) => (
-                <Flex key={group.title} direction="col" gap="xs">
-                  <Text weight="medium">{group.title}</Text>
-                  {group.rows.map(([label, value]) => (
-                    <Flex key={label} justify="between" gap="sm">
-                      <Text size="sm" tone="muted">
-                        {label}
-                      </Text>
-                      <Text size="sm">{value}</Text>
-                    </Flex>
-                  ))}
-                </Flex>
-              ))}
-            </ResponsiveGrid>
           </CardContent>
         </Card>
       </Flex>

package/docs/foundation/radius-shadow.tsx

@@ -127,17 +127,19 @@ export default function Demo() {
                   </Text>
                 </Flex>
                 <Flex direction="col" gap="xs">
-                  <div
-                    className="bg-popover text-popover-foreground border-border rounded-md border p-4"
-                    style={{ boxShadow: "var(--shadow-lg)" }}
-                  >
-                    <Text as="div" weight="medium">
-                      Floating（ポップオーバー）
-                    </Text>
-                    <Text as="div" size="xs" tone="muted">
-                      --shadow-lg lifts it off the page
-                    </Text>
-                  </div>
+                  <Card>
+                    <CardContent flush>
+                      {/* ui-audit-disable-next-line no-utility-spacing — a tile showing the shadow token itself; the box IS the subject */}
+                      <div className="p-4" style={{ boxShadow: "var(--shadow-lg)" }}>
+                        <Text as="div" weight="medium">
+                          Floating（ポップオーバー）
+                        </Text>
+                        <Text as="div" size="xs" tone="muted">
+                          --shadow-lg lifts it off the page
+                        </Text>
+                      </div>
+                    </CardContent>
+                  </Card>
                   <Text as="div" size="xs" tone="muted">
                     floating surface · elevated
                   </Text>

package/docs/general/activity.tsx

@@ -12,7 +12,7 @@ import { Flex, PageContainer, Separator } from "@godxjp/ui/layout";
 
 /**
  * Activity · the official AMBIENT-motion primitive: a continuous, unbounded "something is happening
- * right now, elsewhere". The LOOP counterpart to `Reveal`'s one-shot entrance (gh#313).
+ * right now, elsewhere". The LOOP counterpart to `Reveal`'s one-shot entrance.
  *
  * Reads the DS motion tokens (`--activity-interval`, `--activity-stagger-step`,
  * `--activity-mark-offset`, `--activity-color`, `--ease-standard`) so a consumer never hand-rolls a

package/docs/layout/app-shell.tsx

@@ -138,7 +138,7 @@ export default function Demo() {
           {/* Decorative brand mark — hidden below `sm` where the hamburger already anchors the
               start of a narrow mobile topbar, so functional controls (entity switcher, search)
               keep priority and the bar never overflows. */}
-          <Avatar className="hidden rounded-md sm:inline-flex">
+          <Avatar className="rounded-md">
             <AvatarFallback className="bg-primary text-primary-foreground font-bold">
               C
             </AvatarFallback>
@@ -159,7 +159,7 @@ export default function Demo() {
               <DropdownMenuSeparator />
               {ENTITIES.map((e) => (
                 <DropdownMenuItem key={e.id} onSelect={() => setActiveEntity(e.name)}>
-                  <Building2 className="me-2 size-4" />
+                  <Building2 className="size-4" />
                   {e.name}
                 </DropdownMenuItem>
               ))}

package/docs/layout/aspect-ratio.tsx

@@ -27,9 +27,13 @@ export default function Demo() {
           </CardHeader>
           <CardContent>
             <AspectRatio ratio={16 / 9}>
-              <div className="bg-muted flex h-full w-full items-center justify-center rounded-md">
-                <Text tone="muted">16:9 動画プレビュー（サンプル）</Text>
-              </div>
+              <Card variant="muted" className="h-full w-full">
+                <CardContent flush>
+                  <Flex align="center" justify="center" gap="xs">
+                    <Text tone="muted">16:9 動画プレビュー（サンプル）</Text>
+                  </Flex>
+                </CardContent>
+              </Card>
             </AspectRatio>
           </CardContent>
         </Card>
@@ -45,9 +49,13 @@ export default function Demo() {
           <CardContent>
             <div className="max-w-xs">
               <AspectRatio ratio={4 / 3}>
-                <div className="bg-muted border-border flex h-full w-full items-center justify-center rounded-md border">
-                  <Text tone="muted">領収書スキャン 4:3</Text>
-                </div>
+                <Card variant="muted" className="h-full w-full">
+                  <CardContent flush>
+                    <Flex align="center" justify="center" gap="xs">
+                      <Text tone="muted">領収書スキャン 4:3</Text>
+                    </Flex>
+                  </CardContent>
+                </Card>
               </AspectRatio>
             </div>
           </CardContent>
@@ -66,11 +74,15 @@ export default function Demo() {
               {["株式会社 A", "合同会社 B", "有限会社 C"].map((name) => (
                 <div key={name} className="w-28">
                   <AspectRatio ratio={1}>
-                    <div className="bg-muted border-border flex h-full w-full items-center justify-center rounded-md border">
-                      <Text size="xs" tone="muted" className="px-1 text-center">
-                        {name}
-                      </Text>
-                    </div>
+                    <Card variant="muted" className="h-full w-full">
+                      <CardContent flush>
+                        <Flex align="center" justify="center" gap="xs">
+                          <Text size="xs" tone="muted" className="text-center">
+                            {name}
+                          </Text>
+                        </Flex>
+                      </CardContent>
+                    </Card>
                   </AspectRatio>
                 </div>
               ))}
@@ -90,9 +102,13 @@ export default function Demo() {
           </CardHeader>
           <CardContent>
             <AspectRatio ratio={21 / 9}>
-              <div className="bg-muted border-border flex h-full w-full items-center justify-center rounded-md border">
-                <Text tone="muted">月次売上推移グラフ（21:9）</Text>
-              </div>
+              <Card variant="muted" className="h-full w-full">
+                <CardContent flush>
+                  <Flex align="center" justify="center" gap="xs">
+                    <Text tone="muted">月次売上推移グラフ（21:9）</Text>
+                  </Flex>
+                </CardContent>
+              </Card>
             </AspectRatio>
           </CardContent>
         </Card>

package/docs/layout/auth-account-summary.tsx

@@ -8,7 +8,7 @@ import { AuthAccountSummary, AuthStack, PageContainer } from "@godxjp/ui/layout"
  * the account address, and exactly one ghost action. Everything else is consumer data.
  *
  * The address CLIPS with an ellipsis, so it declares its own line box rather than inheriting one
- * (gh#254): a tight inherited line-height makes the clip box shorter than the font's ascent plus
+ *: a tight inherited line-height makes the clip box shorter than the font's ascent plus
  * descent and shears Vietnamese tone marks and Latin descenders off, while the DOM text stays
  * correct. The Vietnamese row below is the regression case for that.
  */

package/docs/layout/auth-recovery/examples/mobile-390.tsx

@@ -9,7 +9,7 @@ import { AppSettingPicker } from "@godxjp/ui/navigation";
 /**
  * Viewport fixture — 390x844 (mobile). THE MOBILE CONTRACT, decided here.
  *
- * ⚠️ The 390 canonical reference supplied with gh#233 is a desktop 2x2 COMPOSITE that overflows and
+ * ⚠️ The 390 canonical reference supplied with is a desktop 2x2 COMPOSITE that overflows and
  * crops horizontally. It is not a route-level mobile artboard and it was NOT traced. The behaviour
  * below is a decided, documented contract — see the Overview page.
  *

package/docs/layout/auth-recovery/examples/password-recovery.tsx

@@ -28,8 +28,6 @@ export default function Demo() {
   const [password, setPassword] = useState("Godx-2026");
   const [confirmation, setConfirmation] = useState("Godx-202");
 
-  // The address is masked by the SERVER before it reaches the panel — the library never
-  // reconstructs an identifier, it only renders the string the consumer sends.
   const maskedEmail = "h*****@example.co.jp";
 
   return (

package/docs/layout/auth-shell-context.tsx

@@ -16,7 +16,7 @@ import { AuthFooter, AuthIdentity, AuthShell, Flex } from "@godxjp/ui/layout";
 import { AppSettingPicker } from "@godxjp/ui/navigation";
 
 /**
- * AuthShell preset="context-selection" (gh#217) — the canonical organisation / context picker.
+ * AuthShell preset="context-selection" — the canonical organisation / context picker.
  *
  * The preset owns the whole page measure: a 25rem card at 1440/1024 and an edge-to-edge card at
  * 390 (0 inline gutter), plus the vertical rhythm between the three direct sections of the auth

package/docs/layout/auth-shell-device.tsx

@@ -18,7 +18,7 @@ import {
 import { AppSettingPicker, Steps } from "@godxjp/ui/navigation";
 
 /**
- * AuthShell preset="device-authorization" (gh#220) — the canonical OAuth device-grant screen.
+ * AuthShell preset="device-authorization" — the canonical OAuth device-grant screen.
  *
  * The whole page measure is owned by the preset: a 380px card at 1440/1024 and a 5px inline page
  * gutter at 390 (card x=5px, width=380px). Nothing here sets a width, an inset or a colour — a
@@ -28,7 +28,7 @@ import { AppSettingPicker, Steps } from "@godxjp/ui/navigation";
  * `variant="canonical"` still owns control density + heading size; the preset only re-measures.
  * Verify at 1440x900 · 1024x900 · 390x844.
  *
- * gh#12 — the preset also owns the CODE FIELD now: `--otp-slot-{inline,block}-size` come from
+ * The preset also owns the CODE FIELD now: `--otp-slot-{inline,block}-size` come from
  * `--auth-shell-device-otp-slot-*`, so each 4-slot grouped box measures the canonical 112x54
  * instead of the 146x38 the square control tier produced. Nothing on this page sets it. The row is
  * centred with `align="center"` (not a wrapper div) and the progress marker is the canonical

package/docs/layout/auth-shell-registration.tsx

@@ -33,7 +33,7 @@ import {
 import { AppSettingPicker } from "@godxjp/ui/navigation";
 
 /**
- * AuthShell preset="registration" (gh#256) — the canonical sign-up measure.
+ * AuthShell preset="registration" — the canonical sign-up measure.
  *
  * The preset owns the whole page geometry: a 360px (22.5rem) form measure at 1440/1024, a 15px
  * inline gutter at 390 (card x=15, width=360 — the same page rhythm as preset="login", so

package/docs/layout/auth-shell.tsx

@@ -14,7 +14,7 @@ import {
  * SCR-001 Login visual contract. `?state=standalone|one-line|wrapped` drives the package visual
  * test; all three keep the same card anchor without consumer CSS or fake requester data.
  *
- * The composition mirrors the documented consumer page exactly (gh#263): NO top brand bar (the
+ * The composition mirrors the documented consumer page exactly: NO top brand bar (the
  * canonical SCR-001 artboard has none — the in-flow AuthIdentity mark IS the brand), a header-less
  * `<CardContent solo>` body, `AuthFooter` as the third direct child (the login preset's third grid
  * row), and a plain 12px text-link row like the artboard's.

package/docs/layout/flex.tsx

@@ -129,7 +129,8 @@ export default function Demo() {
                   direction="row"
                   gap="sm"
                   align={a}
-                  className="bg-muted min-h-20 rounded-md p-2"
+                  className="bg-muted min-h-20 rounded-md"
+                  style={{ padding: "var(--space-2)" }}
                 >
                   <Text size="xs" tone="muted" className="w-16">
                     {a}
@@ -166,7 +167,8 @@ export default function Demo() {
                     gap="xs"
                     align="center"
                     justify={j}
-                    className="bg-muted flex-1 rounded-md p-2"
+                    className="bg-muted flex-1 rounded-md"
+                    style={{ padding: "var(--space-2)" }}
                   >
                     <Badge variant="outline">借方</Badge>
                     <Badge variant="outline">貸方</Badge>
@@ -192,6 +194,7 @@ export default function Demo() {
                 <Text size="xs" tone="muted">
                   wrap=&#123;false&#125;（既定）
                 </Text>
+                {/* ui-audit-disable-next-line no-utility-spacing — a tinted tile so the gap between children is visible; the box IS the subject */}
                 <Flex direction="row" gap="xs" wrap={false} className="bg-muted rounded-md p-2">
                   <Badge variant="outline">勘定科目</Badge>
                   <Badge variant="outline">補助科目</Badge>
@@ -202,6 +205,7 @@ export default function Demo() {
                 <Text size="xs" tone="muted">
                   wrap=&#123;true&#125;
                 </Text>
+                {/* ui-audit-disable-next-line no-utility-spacing — a tinted tile so the gap between children is visible; the box IS the subject */}
                 <Flex direction="row" gap="xs" wrap className="bg-muted rounded-md p-2">
                   <Badge variant="outline">勘定科目</Badge>
                   <Badge variant="outline">補助科目</Badge>

package/docs/layout/master-detail.tsx

@@ -102,7 +102,7 @@ const COLLAPSE_STEPS = ["token", "sm", "md", "lg", "xl", "false"] as const;
 const MASTER_VIEWPORTS = ["auto", "compact", "standard"] as const;
 
 /**
- * 実サービスの「長い」コレクション (gh#231)。auto のままだと一覧が数千 px に伸び、
+ * 実サービスの「長い」コレクション。auto のままだと一覧が数千 px に伸び、
  * 積み重なった 390px 画面では詳細がフォールドの遥か下に押し出される。
  */
 const MEMBERS = Array.from({ length: 60 }, (_, i) => ({
@@ -339,7 +339,7 @@ export default function Demo() {
           </Card>
         </MasterDetail>
 
-        {/* ── 3. masterViewport — 長い実コレクションを境界付きビューポートに収める (gh#231)。
+        {/* ── 3. masterViewport — 長い実コレクションを境界付きビューポートに収める。
                auto: 一覧が 60 行ぶん伸び、390px では詳細がフォールドの遥か下に落ちる。
                compact / standard: --master-detail-master-viewport-* が block サイズを
                上限とし、コレクションは region の中でスクロールする。

package/docs/layout/mobile-shell.tsx

@@ -0,0 +1,101 @@
+import * as React from "react";
+import { Inbox, Package, ScanLine, Truck } from "lucide-react";
+
+import { Badge, Card, CardContent } from "@godxjp/ui/data-display";
+import { Button, Heading, Text } from "@godxjp/ui/general";
+import { Flex, MobileShell } from "@godxjp/ui/layout";
+
+/**
+ * MobileShell — the handheld app shell: a status band, an app bar, ONE scroll region, a sticky
+ * action bar and a bottom tab bar. The two things a composed `Card` stack cannot do are exactly
+ * what the shell owns: the root is one screen tall so the DOCUMENT never scrolls (the tab bar can
+ * never slide away under a collapsing URL bar), and every band pads itself out of the device
+ * safe areas. Zero custom CSS — no `min-h-dvh`, no `position: sticky`, no page gutter by hand.
+ */
+const ITEMS = [
+  { rc: "RC-204881", name: "洗顔フォーム", status: "未仕分け", tone: "warning" as const },
+  { rc: "RC-204882", name: "日焼け止め", status: "棚上", tone: "info" as const },
+  { rc: "RC-204879", name: "ビタミン B", status: "棚上", tone: "info" as const },
+  { rc: "RC-204875", name: "歯ブラシ", status: "梱包済み", tone: "muted" as const },
+  { rc: "RC-204871", name: "入浴剤", status: "棚上", tone: "info" as const },
+  { rc: "RC-204864", name: "解熱鎮痛薬", status: "梱包済み", tone: "muted" as const },
+];
+
+const TABS = [
+  { id: "inbound", label: "入庫", icon: Inbox },
+  { id: "packing", label: "梱包", icon: Package },
+  { id: "outbound", label: "出庫", icon: Truck },
+];
+
+export default function Demo() {
+  const [tab, setTab] = React.useState("inbound");
+
+  return (
+    <MobileShell
+      statusBar={
+        <>
+          <Text size="sm" weight="medium" tabular>
+            9:41
+          </Text>
+          <Text size="sm" weight="medium" tone="muted" tabular>
+            Acme Handy
+          </Text>
+        </>
+      }
+      header={
+        <Flex align="center" justify="between" gap="xs" className="w-full">
+          <Heading level={3} as="h1">
+            入庫
+          </Heading>
+          <Button variant="ghost" size="sm">
+            選択
+          </Button>
+        </Flex>
+      }
+      actions={
+        <>
+          <Button className="flex-[2]">
+            <ScanLine aria-hidden="true" />
+            スキャン
+          </Button>
+          <Button variant="outline" className="flex-1">
+            手入力
+          </Button>
+        </>
+      }
+      tabBar={TABS.map((t) => {
+        const Icon = t.icon;
+        return (
+          <Button
+            key={t.id}
+            variant="ghost"
+            onClick={() => setTab(t.id)}
+            aria-current={t.id === tab ? "page" : undefined}
+            className="h-full flex-col rounded-none"
+          >
+            <Icon aria-hidden="true" />
+            <Text size="2xs">{t.label}</Text>
+          </Button>
+        );
+      })}
+    >
+      <Flex direction="col" gap="sm">
+        {ITEMS.map((item) => (
+          <Card key={item.rc} density="tight">
+            <CardContent solo>
+              <Flex align="center" justify="between" gap="sm">
+                <Flex direction="col" gap="none">
+                  <Text weight="medium">{item.name}</Text>
+                  <Text size="xs" mono tone="muted" tabular>
+                    {item.rc}
+                  </Text>
+                </Flex>
+                <Badge tone={item.tone}>{item.status}</Badge>
+              </Flex>
+            </CardContent>
+          </Card>
+        ))}
+      </Flex>
+    </MobileShell>
+  );
+}