@godxjp/ui 31.31.8 → 32.0.1

package/docs/navigation/anchor.tsx

@@ -1,295 +0,0 @@
-import { useRef, useState } from "react";
-
-import {
-  Badge,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  Descriptions,
-  ScrollArea,
-} from "@godxjp/ui/data-display";
-import { Heading, Paragraph, Text } from "@godxjp/ui/general";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { Anchor, type AnchorItemProp } from "@godxjp/ui/navigation";
-
-/**
- * Anchor — Ant Design `Anchor` (6.6.5). The in-page section navigation, and the only thing in the
- * library that COMPUTES which section is current.
- *
- * This page is built out of the cases that break a table of contents, not the one that flatters it:
- *
- * — a FORTY-entry rail beside a TWO-entry one, in the same screen, because the rail that works at
- *   two entries is not the rail that works at forty (it scrolls, and the ink rail has to keep up);
- * — a 71-character UNBREAKABLE label, which is a real section title (a config key, a German
- *   compound, a URL) and the shape that widens a rail until the page grows a scrollbar;
- * — CJK beside Latin in the same list, where the same nominal size is a taller line box;
- * — a section TALLER than its scrollport, which is where an IntersectionObserver band goes blank
- *   and this component keeps answering;
- * — the HORIZONTAL direction, which is what a narrow viewport collapses to;
- * — and a bounded `getContainer`, because a page is very often not the thing that scrolls.
- *
- * Composed only from real @godxjp/ui components.
- */
-
-/** A real section title that cannot be broken anywhere. Exactly 71 characters. */
-const UNBREAKABLE = "RegionalDeploymentConfigurationParameterNamespaceIdentifierOverrides123";
-
-const PRIMER: AnchorItemProp[] = [
-  { key: "p1", href: "#primer-what", title: "What it resolves" },
-  { key: "p2", href: "#primer-why", title: "Why not sticky" },
-];
-
-const CHAPTERS = [
-  { id: "ch-intro", latin: "Introduction", cjk: "はじめに" },
-  { id: "ch-scope", latin: "Scope and audience", cjk: "対象範囲と読者" },
-  { id: "ch-terms", latin: "Defined terms", cjk: "用語の定義" },
-  { id: "ch-accounts", latin: "Accounts", cjk: "アカウント" },
-  { id: "ch-identity", latin: "Identity verification", cjk: "本人確認" },
-  { id: "ch-billing", latin: "Billing", cjk: "請求" },
-  { id: "ch-invoices", latin: "Invoices and receipts", cjk: "請求書と領収書" },
-  { id: "ch-taxes", latin: "Taxes", cjk: "税" },
-  { id: "ch-refunds", latin: "Refunds", cjk: "返金" },
-  { id: "ch-plans", latin: "Plans", cjk: "プラン" },
-  { id: "ch-limits", latin: "Usage limits", cjk: "利用上限" },
-  { id: "ch-fair-use", latin: "Fair use", cjk: "公正利用" },
-  { id: "ch-data", latin: "Data ownership", cjk: "データの帰属" },
-  { id: "ch-retention", latin: "Retention", cjk: "保持期間" },
-  { id: "ch-deletion", latin: "Deletion", cjk: "削除" },
-  { id: "ch-export", latin: "Export", cjk: "エクスポート" },
-  { id: "ch-security", latin: "Security", cjk: "セキュリティ" },
-  { id: "ch-incident", latin: "Incident response", cjk: "インシデント対応" },
-  { id: "ch-subprocessors", latin: "Sub-processors", cjk: "再委託先" },
-  { id: "ch-transfers", latin: "International transfers", cjk: "国際移転" },
-  { id: "ch-availability", latin: "Availability", cjk: "可用性" },
-  { id: "ch-maintenance", latin: "Maintenance windows", cjk: "メンテナンス" },
-  { id: "ch-support", latin: "Support", cjk: "サポート" },
-  { id: "ch-escalation", latin: "Escalation", cjk: "エスカレーション" },
-  { id: "ch-credits", latin: "Service credits", cjk: "サービスクレジット" },
-  { id: "ch-acceptable", latin: "Acceptable use", cjk: "禁止事項" },
-  { id: "ch-content", latin: "Customer content", cjk: "顧客コンテンツ" },
-  { id: "ch-ip", latin: "Intellectual property", cjk: "知的財産" },
-  { id: "ch-feedback", latin: "Feedback", cjk: "フィードバック" },
-  { id: "ch-publicity", latin: "Publicity", cjk: "公表" },
-  { id: "ch-warranty", latin: "Warranties", cjk: "保証" },
-  { id: "ch-liability", latin: "Limitation of liability", cjk: "責任の制限" },
-  { id: "ch-indemnity", latin: "Indemnity", cjk: "補償" },
-  { id: "ch-term", latin: "Term", cjk: "契約期間" },
-  { id: "ch-suspension", latin: "Suspension", cjk: "利用停止" },
-  { id: "ch-termination", latin: "Termination", cjk: "解約" },
-  { id: "ch-survival", latin: "Survival", cjk: "存続条項" },
-  { id: "ch-law", latin: "Governing law", cjk: "準拠法" },
-  { id: "ch-disputes", latin: "Disputes", cjk: "紛争解決" },
-  { id: "ch-namespace", latin: UNBREAKABLE, cjk: "名前空間の上書き" },
-  { id: "ch-changes", latin: "Changes to these terms", cjk: "本規約の変更" },
-  { id: "ch-contact", latin: "Contact", cjk: "お問い合わせ" },
-];
-
-const CHAPTER_ITEMS: AnchorItemProp[] = CHAPTERS.map((chapter) => ({
-  key: chapter.id,
-  href: `#${chapter.id}`,
-  // CJK beside Latin on ONE row: the same nominal size, a taller line box, and the rail has to
-  // hold both without the ink rail losing its alignment.
-  title: (
-    <>
-      {chapter.cjk} · {chapter.latin}
-    </>
-  ),
-}));
-
-const HORIZONTAL: AnchorItemProp[] = [
-  { key: "h-overview", href: "#bar-overview", title: "概要 · Overview" },
-  { key: "h-pricing", href: "#bar-pricing", title: "価格 · Pricing" },
-  { key: "h-security", href: "#bar-security", title: "セキュリティ · Security" },
-  { key: "h-faq", href: "#bar-faq", title: "よくある質問 · FAQ" },
-];
-
-function Chapter({ id, title, lines }: { id: string; title: string; lines: number }) {
-  return (
-    <section id={id} aria-labelledby={`${id}-heading`}>
-      <Heading level={3} id={`${id}-heading`}>
-        {title}
-      </Heading>
-      {Array.from({ length: lines }, (_, line) => (
-        <Paragraph key={line}>
-          本条は{title}について定めます。The clause is deliberately long enough that a reader spends
-          several scroll gestures inside it, which is the case an IntersectionObserver band cannot
-          answer and a decision line can.
-        </Paragraph>
-      ))}
-    </section>
-  );
-}
-
-export default function Demo() {
-  const primerRef = useRef<HTMLDivElement>(null);
-  const chaptersRef = useRef<HTMLDivElement>(null);
-  const barRef = useRef<HTMLDivElement>(null);
-  const [reading, setReading] = useState<string>("");
-
-  return (
-    <PageContainer
-      title="Anchor"
-      subtitle="antd Anchor · the decision line, the suppressed click, the landing hash, aria-current=location"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle>1 · Two entries, and what the component reports</CardTitle>
-            <CardDescription>
-              The smallest rail there is, bounded by its own `getContainer` rather than the page.
-              `onValueChange` hands back the href the SCROLL POSITION resolved, which is the value
-              printed below it.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex gap="lg" align="start">
-              <Anchor
-                affix={false}
-                showInkInFixed
-                label="Primer sections"
-                items={PRIMER}
-                getContainer={() => primerRef.current ?? window}
-                onValueChange={setReading}
-              />
-              <ScrollArea viewportRef={primerRef} className="h-64 flex-1" label="Primer">
-                <Flex direction="col" gap="md">
-                  <Chapter id="primer-what" title="What it resolves" lines={4} />
-                  <Chapter id="primer-why" title="Why not sticky" lines={4} />
-                </Flex>
-              </ScrollArea>
-            </Flex>
-            <Descriptions
-              items={[
-                { label: "onValueChange", children: <Text>{reading || "—"}</Text> },
-                {
-                  label: "aria-current",
-                  children: <Badge variant="secondary">location</Badge>,
-                },
-              ]}
-            />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>2 · Forty-two entries, CJK beside Latin, and a 71-character label</CardTitle>
-            <CardDescription>
-              The rail that works at two entries is not the rail that works at forty-two: this one
-              scrolls, the ink rail keeps up, and the `{UNBREAKABLE.length}`-character unbreakable
-              title wraps instead of widening the column until the page grows a scrollbar.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            {/* Side by side from md; on a phone the rail stacks above the text it indexes. A 256px
-                rail beside a 244px card left the chapters a column one glyph wide (gh#965). */}
-            <Flex direction={{ base: "col", md: "row" }} gap="lg" align="start">
-              <ScrollArea className="h-48 w-full shrink-0 md:h-96 md:w-64" label="Contents">
-                <Anchor
-                  affix={false}
-                  showInkInFixed
-                  label="Agreement contents"
-                  items={CHAPTER_ITEMS}
-                  getContainer={() => chaptersRef.current ?? window}
-                />
-              </ScrollArea>
-              <ScrollArea
-                viewportRef={chaptersRef}
-                className="h-96 w-full md:w-auto md:flex-1"
-                label="Agreement"
-              >
-                <Flex direction="col" gap="md">
-                  {CHAPTERS.map((chapter) => (
-                    <Chapter
-                      key={chapter.id}
-                      id={chapter.id}
-                      title={`${chapter.cjk} · ${chapter.latin}`}
-                      // One chapter is far taller than the scrollport on purpose — the case a
-                      // band-based scrollspy cannot answer and a decision line can.
-                      lines={chapter.id === "ch-billing" ? 24 : 3}
-                    />
-                  ))}
-                </Flex>
-              </ScrollArea>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>3 · direction=&quot;horizontal&quot; — the narrow case</CardTitle>
-            <CardDescription>
-              One row that scrolls inline rather than wrapping onto a second, because the ink rail
-              has to stay beside the label it belongs to. Nesting is not available here, and Ant
-              Design says the same.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Anchor
-              affix={false}
-              showInkInFixed
-              direction="horizontal"
-              label="Page sections"
-              items={HORIZONTAL}
-              getContainer={() => barRef.current ?? window}
-            />
-            <ScrollArea viewportRef={barRef} className="h-64" label="Sections">
-              <Flex direction="col" gap="md">
-                <Chapter id="bar-overview" title="概要 · Overview" lines={3} />
-                <Chapter id="bar-pricing" title="価格 · Pricing" lines={3} />
-                <Chapter id="bar-security" title="セキュリティ · Security" lines={3} />
-                <Chapter id="bar-faq" title="よくある質問 · FAQ" lines={3} />
-              </Flex>
-            </ScrollArea>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>4 · Against the page, pinned by Affix</CardTitle>
-            <CardDescription>
-              The default. `affix` is `true`, so the rail pins itself once it reaches the line;
-              `targetOffsetBlockStart` is the room a clicked section leaves for whatever is pinned
-              above it. Landing on one of these hashes selects the entry with no scroll event at
-              all, and the click moves FOCUS to the section, not just the scroll position.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex gap="lg" align="start">
-              {/* A pinned side rail has no room on a phone: at 320px it was squeezed to 58px and
-                  broke "Gamma" mid-word. Documentation sites drop the in-page rail below md. */}
-              <Flex hideBelow="md">
-                <Anchor
-                  offsetBlockStart={16}
-                  targetOffsetBlockStart={24}
-                  label="On this page"
-                  items={[
-                    { key: "page-a", href: "#page-alpha", title: "Alpha · 第一章" },
-                    {
-                      key: "page-b",
-                      href: "#page-beta",
-                      title: "Beta · 第二章",
-                      children: [
-                        { key: "page-b1", href: "#page-beta-one", title: "Beta, part one" },
-                        { key: "page-b2", href: "#page-beta-two", title: "Beta, part two" },
-                      ],
-                    },
-                    { key: "page-c", href: "#page-gamma", title: "Gamma · 第三章" },
-                  ]}
-                />
-              </Flex>
-              <Flex direction="col" gap="md" className="flex-1">
-                <Chapter id="page-alpha" title="Alpha · 第一章" lines={6} />
-                <Chapter id="page-beta" title="Beta · 第二章" lines={2} />
-                <Chapter id="page-beta-one" title="Beta, part one" lines={6} />
-                <Chapter id="page-beta-two" title="Beta, part two" lines={6} />
-                <Chapter id="page-gamma" title="Gamma · 第三章" lines={8} />
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/navigation/app-setting-picker.tsx

@@ -1,178 +0,0 @@
-import { AppProvider } from "@godxjp/ui/app";
-import {
-  Avatar,
-  AvatarFallback,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@godxjp/ui/data-display";
-import { Text } from "@godxjp/ui/general";
-import { Flex, PageContainer, Topbar, TopbarItem } from "@godxjp/ui/layout";
-import { AppSettingPicker } from "@godxjp/ui/navigation";
-
-/**
- * AppSettingPicker — ONE provider-bound Select for any single AppProvider setting,
- * chosen via `kind` (locale/timezone/date/time plus theme/brand/density/fontSize). It replaces the
- * former Locale/Timezone/Date-format/Time-format pickers (4 components → 1). Mount under
- * <AppProvider> and it reads/writes the matching context with NO value/onValueChange; pass
- * those to control it instead. Composed only from real @godxjp/ui components.
- */
-export default function Demo() {
-  return (
-    <AppProvider
-      defaultLocale="ja"
-      defaultTimezone="Asia/Tokyo"
-      defaultDateFormat="iso"
-      defaultTimeFormat="24h"
-      persist={false}
-    >
-      <PageContainer
-        title="AppSettingPicker"
-        subtitle="kind で 1 つの AppProvider 設定を読み書きする統合ピッカー"
-      >
-        <Flex direction="col" gap="lg">
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>インライン表示</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <Flex gap="md" align="center">
-                <Text>表示言語</Text>
-                <AppSettingPicker kind="locale" appearance="inline" id="setting-inline" />
-              </Flex>
-            </CardContent>
-          </Card>
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>kind で対象設定を選ぶ</CardTitle>
-              <CardDescription>
-                旧 Locale / Timezone / DateFormat / TimeFormat ピッカーを 1 コンポーネントに統合。
-                &lt;AppProvider&gt; 配下に置くと value / onValueChange
-                なしでコンテキストを読み書きする。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Flex direction="row" gap="md" wrap>
-                <Flex direction="col" gap="sm" className="min-w-40 flex-1">
-                  <Text weight="medium">表示言語</Text>
-                  {/* locale defaults to the icon-only switcher; a labeled settings-form row opts
-                      into the full trigger with an explicit appearance="labeled". */}
-                  <AppSettingPicker kind="locale" appearance="labeled" id="setting-locale" />
-                </Flex>
-                <Flex direction="col" gap="sm" className="min-w-56 flex-1">
-                  <Text weight="medium">タイムゾーン</Text>
-                  <AppSettingPicker kind="timezone" id="setting-timezone" />
-                </Flex>
-                <Flex direction="col" gap="sm" className="min-w-44 flex-1">
-                  <Text weight="medium">日付フォーマット</Text>
-                  <AppSettingPicker kind="dateFormat" id="setting-date-format" />
-                </Flex>
-                <Flex direction="col" gap="sm" className="min-w-44 flex-1">
-                  <Text weight="medium">時刻フォーマット</Text>
-                  <AppSettingPicker kind="timeFormat" id="setting-time-format" />
-                </Flex>
-                <Flex direction="col" gap="sm" className="min-w-36 flex-1">
-                  <Text weight="medium">テーマ</Text>
-                  <AppSettingPicker kind="theme" id="setting-theme" />
-                </Flex>
-                <Flex direction="col" gap="sm" className="min-w-44 flex-1">
-                  <Text weight="medium">ブランド</Text>
-                  <AppSettingPicker kind="brand" id="setting-brand" />
-                </Flex>
-                <Flex direction="col" gap="sm" className="min-w-40 flex-1">
-                  <Text weight="medium">密度</Text>
-                  <AppSettingPicker kind="density" id="setting-density" />
-                </Flex>
-                <Flex direction="col" gap="sm" className="min-w-36 flex-1">
-                  <Text weight="medium">文字サイズ</Text>
-                  <AppSettingPicker kind="fontSize" id="setting-font-size" />
-                </Flex>
-              </Flex>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>狭いコンテナと長いラベル</CardTitle>
-              <CardDescription>
-                320px 相当で長いタイムゾーン名の折返し・クリッピングを確認する。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Card className="max-w-80" lang="ja">
-                <CardContent>
-                  <AppSettingPicker kind="timezone" id="setting-timezone-narrow" />
-                </CardContent>
-              </Card>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>アイコンのみ（トップバー）</CardTitle>
-              <CardDescription>
-                appearance=&quot;icon&quot; は正方形トリガーとローカライズ済み accessible name
-                を保持し、選択肢はメニュー内で完全表示する。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Topbar
-                start={
-                  <Avatar className="rounded-md">
-                    <AvatarFallback>G</AvatarFallback>
-                  </Avatar>
-                }
-                end={
-                  <Flex direction="row" gap="sm" align="center">
-                    <AppSettingPicker kind="locale" appearance="inline" id="topbar-locale-inline" />
-                    <AppSettingPicker kind="locale" appearance="icon" id="topbar-locale-icon" />
-                  </Flex>
-                }
-              />
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>バーのセル（appearance=&quot;bar&quot;）</CardTitle>
-              <CardDescription>
-                <code>icon</code> と同じ構造上の省略を保ったまま、箱だけがバーの
-                <strong>セル</strong>になる。バーの高さいっぱいに伸び、角は
-                <code>--topbar-item-radius</code>（<code>TopbarItem</code> と同じつまみ）で四角い。
-                ホバーの面はバーそのものを塗る。
-                <code>icon</code> をバーに置くと <code>--control-height</code>
-                の丸い錠剤が背の高い帯の中に浮き、バー本来のクロームとは別系統に読める。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Topbar
-                start={<TopbarItem>プロジェクト</TopbarItem>}
-                end={
-                  <>
-                    <AppSettingPicker kind="locale" appearance="bar" id="topbar-locale-bar" />
-                    <AppSettingPicker kind="theme" appearance="bar" id="topbar-theme-bar" />
-                  </>
-                }
-              />
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>無効化</CardTitle>
-              <CardDescription>disabled で操作を止める。</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Flex direction="col" gap="sm" className="max-w-56">
-                <Text weight="medium">タイムゾーン (disabled)</Text>
-                <AppSettingPicker kind="timezone" id="setting-timezone-disabled" disabled />
-              </Flex>
-            </CardContent>
-          </Card>
-        </Flex>
-      </PageContainer>
-    </AppProvider>
-  );
-}

package/docs/navigation/app-setting-toggle.tsx

@@ -1,111 +0,0 @@
-import { AppProvider } from "@godxjp/ui/app";
-import {
-  Avatar,
-  AvatarFallback,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@godxjp/ui/data-display";
-import { Text } from "@godxjp/ui/general";
-import { Flex, PageContainer, Topbar } from "@godxjp/ui/layout";
-import { AppSettingToggle } from "@godxjp/ui/navigation";
-
-/**
- * AppSettingToggle — ONE button that steps a single AppProvider setting to its next value and
- * shows that value as its glyph. The no-menu counterpart to AppSettingPicker: same binding
- * contract, same option order, one tap instead of open-then-choose. `appearance="bar"` (the
- * default) is a CELL of the bar — full bar height, the bar's own hover surface, square corners.
- */
-export default function Demo() {
-  return (
-    <AppProvider defaultLocale="ja" defaultTimeFormat="24h" persist={false}>
-      <PageContainer
-        title="AppSettingToggle"
-        subtitle="押すたびに次の値へ送る 1 ボタン。ドロップダウンなし。"
-      >
-        <Flex direction="col" gap="lg">
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>トップバーのセル（既定）</CardTitle>
-              <CardDescription>
-                appearance=&quot;bar&quot; はバーの一部として全高で伸び、角は
-                --topbar-item-radius。--control-height の錠剤がバーの中に浮くことはない。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Topbar
-                start={
-                  <Avatar className="rounded-md">
-                    <AvatarFallback>G</AvatarFallback>
-                  </Avatar>
-                }
-                end={
-                  <>
-                    <AppSettingToggle kind="theme" id="topbar-theme-toggle" />
-                    <AppSettingToggle kind="density" id="topbar-density-toggle" />
-                    <AppSettingToggle kind="fontSize" id="topbar-font-size-toggle" />
-                    <AppSettingToggle kind="timeFormat" id="topbar-time-format-toggle" />
-                  </>
-                }
-              />
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>バー以外（appearance=&quot;icon&quot;）</CardTitle>
-              <CardDescription>
-                設定行やカードヘッダーなど、バーではない場所。--control-height
-                の正方形ゴーストボタン。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Flex direction="row" gap="md" align="center" wrap>
-                <Flex direction="row" gap="sm" align="center">
-                  <Text weight="medium">テーマ</Text>
-                  <AppSettingToggle kind="theme" appearance="icon" id="icon-theme-toggle" />
-                </Flex>
-                <Flex direction="row" gap="sm" align="center">
-                  <Text weight="medium">時刻形式</Text>
-                  <AppSettingToggle
-                    kind="timeFormat"
-                    appearance="icon"
-                    id="icon-time-format-toggle"
-                  />
-                </Flex>
-              </Flex>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle level={2}>制御モードと無効化</CardTitle>
-              <CardDescription>
-                value + onValueChange で外部状態に紐づけ、disabled で操作を止める。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Flex direction="row" gap="md" align="center">
-                <AppSettingToggle
-                  kind="density"
-                  appearance="icon"
-                  value="comfortable"
-                  onValueChange={() => {}}
-                  id="controlled-density-toggle"
-                />
-                <AppSettingToggle
-                  kind="theme"
-                  appearance="icon"
-                  disabled
-                  id="disabled-theme-toggle"
-                />
-              </Flex>
-            </CardContent>
-          </Card>
-        </Flex>
-      </PageContainer>
-    </AppProvider>
-  );
-}