create-auto-app 1.34.0 → 1.35.0

package/templates/typical/client/src/components/ui/DesignSystem-Overview.stories.tsx

@@ -1,748 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Avatar, AvatarFallback, AvatarGroup, AvatarImage } from '@/components/ui/Avatar';
-import { Badge } from '@/components/ui/Badge';
-import { Button } from '@/components/ui/Button';
-import { ButtonGroup } from '@/components/ui/ButtonGroup';
-import { Checkbox } from '@/components/ui/Checkbox';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from '@/components/ui/DropdownMenu';
-import {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-} from '@/components/ui/Empty';
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSeparator,
-  FieldSet,
-  FieldTitle,
-} from '@/components/ui/Field';
-import { Input } from '@/components/ui/Input';
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-  InputGroupText,
-  InputGroupTextarea,
-} from '@/components/ui/InputGroup';
-import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from '@/components/ui/Item';
-import { RadioGroup, RadioGroupItem } from '@/components/ui/RadioGroup';
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/Select';
-import { Slider } from '@/components/ui/Slider';
-import { Spinner } from '@/components/ui/Spinner';
-import { Switch } from '@/components/ui/Switch';
-import { Textarea } from '@/components/ui/Textarea';
-import {
-  ArchiveIcon,
-  ArrowLeftIcon,
-  ArrowUpIcon,
-  BadgeCheckIcon,
-  CalendarPlusIcon,
-  ChevronRightIcon,
-  ClockIcon,
-  InfoIcon,
-  ListFilterIcon,
-  MailCheckIcon,
-  MoreHorizontalIcon,
-  PlusIcon,
-  SearchIcon,
-  TagIcon,
-  Trash2Icon,
-} from 'lucide-react';
-
-function PaymentMethodDemo() {
-  return (
-    <div className="w-full max-w-sm">
-      <form>
-        <FieldGroup>
-          <FieldSet>
-            <FieldLegend>Payment Method</FieldLegend>
-            <FieldDescription>All transactions are secure and encrypted</FieldDescription>
-            <FieldGroup>
-              <Field>
-                <FieldLabel htmlFor="card-name">Name on Card</FieldLabel>
-                <Input id="card-name" placeholder="John Doe" />
-              </Field>
-              <div className="grid grid-cols-4 gap-4">
-                <Field className="col-span-3">
-                  <FieldLabel htmlFor="card-number">Card Number</FieldLabel>
-                  <Input id="card-number" placeholder="1234 5678 9012 3456" />
-                </Field>
-                <Field className="col-span-1">
-                  <FieldLabel htmlFor="cvv">CVV</FieldLabel>
-                  <Input id="cvv" placeholder="123" />
-                </Field>
-              </div>
-              <FieldDescription className="-mt-2">Enter your 16-digit number.</FieldDescription>
-              <div className="grid grid-cols-2 gap-4">
-                <Field>
-                  <FieldLabel htmlFor="exp-month">Month</FieldLabel>
-                  <Select defaultValue="">
-                    <SelectTrigger id="exp-month">
-                      <SelectValue placeholder="MM" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectGroup>
-                        {['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'].map((month) => (
-                          <SelectItem key={month} value={month}>
-                            {month}
-                          </SelectItem>
-                        ))}
-                      </SelectGroup>
-                    </SelectContent>
-                  </Select>
-                </Field>
-                <Field>
-                  <FieldLabel htmlFor="exp-year">Year</FieldLabel>
-                  <Select defaultValue="">
-                    <SelectTrigger id="exp-year">
-                      <SelectValue placeholder="YYYY" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectGroup>
-                        {[2024, 2025, 2026, 2027, 2028, 2029].map((year) => (
-                          <SelectItem key={year} value={String(year)}>
-                            {year}
-                          </SelectItem>
-                        ))}
-                      </SelectGroup>
-                    </SelectContent>
-                  </Select>
-                </Field>
-              </div>
-            </FieldGroup>
-          </FieldSet>
-          <FieldSeparator />
-          <FieldSet>
-            <FieldLegend>Billing Address</FieldLegend>
-            <FieldDescription>The billing address associated with your payment method</FieldDescription>
-            <FieldGroup>
-              <Field orientation="horizontal">
-                <Checkbox id="same-as-shipping" defaultChecked />
-                <FieldLabel htmlFor="same-as-shipping" className="font-normal">
-                  Same as shipping address
-                </FieldLabel>
-              </Field>
-            </FieldGroup>
-          </FieldSet>
-          <FieldSeparator />
-          <FieldSet>
-            <FieldGroup>
-              <Field>
-                <FieldLabel htmlFor="comments">Comments</FieldLabel>
-                <Textarea id="comments" placeholder="Add any additional comments" />
-              </Field>
-            </FieldGroup>
-          </FieldSet>
-          <Field orientation="horizontal">
-            <Button type="submit">Submit</Button>
-            <Button variant="outline" type="button">
-              Cancel
-            </Button>
-          </Field>
-        </FieldGroup>
-      </form>
-    </div>
-  );
-}
-
-function EmptyAvatarGroupDemo() {
-  return (
-    <Empty className="flex-none py-4">
-      <EmptyHeader>
-        <EmptyMedia>
-          <AvatarGroup>
-            <Avatar>
-              <AvatarImage src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah" />
-              <AvatarFallback>SA</AvatarFallback>
-            </Avatar>
-            <Avatar>
-              <AvatarImage src="https://randomuser.me/api/portraits/men/32.jpg" alt="James" />
-              <AvatarFallback>JA</AvatarFallback>
-            </Avatar>
-            <Avatar>
-              <AvatarImage src="https://randomuser.me/api/portraits/women/68.jpg" alt="Maya" />
-              <AvatarFallback>MA</AvatarFallback>
-            </Avatar>
-          </AvatarGroup>
-        </EmptyMedia>
-        <EmptyTitle>No Team Members</EmptyTitle>
-        <EmptyDescription>Invite your team to collaborate on this project.</EmptyDescription>
-      </EmptyHeader>
-      <EmptyContent>
-        <Button size="sm">
-          <PlusIcon className="mr-2 size-4" />
-          Invite Members
-        </Button>
-      </EmptyContent>
-    </Empty>
-  );
-}
-
-function SpinnerBadgeDemo() {
-  return (
-    <div className="flex items-center gap-2">
-      <Badge>
-        <Spinner className="mr-1" />
-        Syncing
-      </Badge>
-      <Badge variant="secondary">
-        <Spinner className="mr-1" />
-        Updating
-      </Badge>
-      <Badge variant="outline">
-        <Spinner className="mr-1" />
-        Loading
-      </Badge>
-    </div>
-  );
-}
-
-function ButtonGroupDemo() {
-  const [label, setLabel] = React.useState('personal');
-
-  return (
-    <ButtonGroup>
-      <ButtonGroup className="hidden sm:flex">
-        <Button variant="outline" size="sm" aria-label="Go Back">
-          <ArrowLeftIcon className="size-4" />
-        </Button>
-      </ButtonGroup>
-      <ButtonGroup>
-        <Button variant="outline" size="sm">
-          Archive
-        </Button>
-        <Button variant="outline" size="sm">
-          Report
-        </Button>
-      </ButtonGroup>
-      <ButtonGroup>
-        <Button variant="outline" size="sm">
-          Snooze
-        </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="outline" size="sm" aria-label="More Options">
-              <MoreHorizontalIcon className="size-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-48">
-            <DropdownMenuGroup>
-              <DropdownMenuItem>
-                <MailCheckIcon className="mr-2 size-4" />
-                Mark as Read
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <ArchiveIcon className="mr-2 size-4" />
-                Archive
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <DropdownMenuItem>
-                <ClockIcon className="mr-2 size-4" />
-                Snooze
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <CalendarPlusIcon className="mr-2 size-4" />
-                Add to Calendar
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <ListFilterIcon className="mr-2 size-4" />
-                Add to List
-              </DropdownMenuItem>
-              <DropdownMenuSub>
-                <DropdownMenuSubTrigger>
-                  <TagIcon className="mr-2 size-4" />
-                  Label As...
-                </DropdownMenuSubTrigger>
-                <DropdownMenuSubContent>
-                  <DropdownMenuRadioGroup value={label} onValueChange={setLabel}>
-                    <DropdownMenuRadioItem value="personal">Personal</DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="work">Work</DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="other">Other</DropdownMenuRadioItem>
-                  </DropdownMenuRadioGroup>
-                </DropdownMenuSubContent>
-              </DropdownMenuSub>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <DropdownMenuItem className="text-destructive">
-                <Trash2Icon className="mr-2 size-4" />
-                Trash
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </ButtonGroup>
-    </ButtonGroup>
-  );
-}
-
-function FieldSliderDemo() {
-  const [value, setValue] = React.useState([200, 800]);
-  return (
-    <div className="w-full max-w-xs">
-      <Field>
-        <FieldTitle>Price Range</FieldTitle>
-        <FieldDescription>
-          Set your budget range ($<span className="font-medium tabular-nums">{value[0]}</span> -{' '}
-          <span className="font-medium tabular-nums">{value[1]}</span>).
-        </FieldDescription>
-        <Slider value={value} onValueChange={setValue} max={1000} min={0} step={10} className="mt-2 w-full" />
-      </Field>
-    </div>
-  );
-}
-
-function InputGroupDemo() {
-  return (
-    <div className="grid w-full max-w-xs gap-6">
-      <InputGroup>
-        <InputGroupInput placeholder="Search..." />
-        <InputGroupAddon>
-          <SearchIcon className="size-4" />
-        </InputGroupAddon>
-        <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
-      </InputGroup>
-      <InputGroup>
-        <InputGroupInput placeholder="example.com" className="!pl-1" />
-        <InputGroupAddon>
-          <InputGroupText>https://</InputGroupText>
-        </InputGroupAddon>
-        <InputGroupAddon align="inline-end">
-          <InputGroupButton className="rounded-full" size="sm" aria-label="Info">
-            <InfoIcon className="size-4" />
-          </InputGroupButton>
-        </InputGroupAddon>
-      </InputGroup>
-      <InputGroup>
-        <InputGroupTextarea placeholder="Ask, Search or Chat..." />
-        <InputGroupAddon align="block-end">
-          <InputGroupButton variant="outline" className="rounded-full" size="sm" aria-label="Add">
-            <PlusIcon className="size-4" />
-          </InputGroupButton>
-          <InputGroupText className="ml-auto">52% used</InputGroupText>
-          <InputGroupButton variant="default" className="rounded-full" size="sm">
-            <ArrowUpIcon className="size-4" />
-            <span className="sr-only">Send</span>
-          </InputGroupButton>
-        </InputGroupAddon>
-      </InputGroup>
-    </div>
-  );
-}
-
-function ItemDemo() {
-  return (
-    <div className="flex w-full max-w-xs flex-col gap-6">
-      <Item variant="outline">
-        <ItemContent>
-          <ItemTitle>Two-factor authentication</ItemTitle>
-          <ItemDescription>Verify via email or phone number.</ItemDescription>
-        </ItemContent>
-        <ItemActions>
-          <Button size="sm">Enable</Button>
-        </ItemActions>
-      </Item>
-      <Item variant="outline" size="sm" asChild>
-        <a href="/profile">
-          <ItemMedia>
-            <BadgeCheckIcon className="size-5" />
-          </ItemMedia>
-          <ItemContent>
-            <ItemTitle>Your profile has been verified.</ItemTitle>
-          </ItemContent>
-          <ItemActions>
-            <ChevronRightIcon className="size-4" />
-          </ItemActions>
-        </a>
-      </Item>
-    </div>
-  );
-}
-
-function AppearanceSettingsDemo() {
-  const [gpuCount, setGpuCount] = React.useState(8);
-
-  return (
-    <FieldSet>
-      <FieldGroup>
-        <FieldSet>
-          <FieldLegend>Compute Environment</FieldLegend>
-          <FieldDescription>Select the compute environment for your cluster.</FieldDescription>
-          <RadioGroup defaultValue="kubernetes">
-            <FieldLabel htmlFor="kubernetes">
-              <Field orientation="horizontal">
-                <FieldContent>
-                  <FieldTitle>Kubernetes</FieldTitle>
-                  <FieldDescription>Run GPU workloads on a K8s configured cluster. This is the default.</FieldDescription>
-                </FieldContent>
-                <RadioGroupItem value="kubernetes" id="kubernetes" aria-label="Kubernetes" />
-              </Field>
-            </FieldLabel>
-            <FieldLabel htmlFor="vm">
-              <Field orientation="horizontal">
-                <FieldContent>
-                  <FieldTitle>Virtual Machine</FieldTitle>
-                  <FieldDescription>Access a VM configured cluster to run workloads. (Coming soon)</FieldDescription>
-                </FieldContent>
-                <RadioGroupItem value="vm" id="vm" aria-label="Virtual Machine" />
-              </Field>
-            </FieldLabel>
-          </RadioGroup>
-        </FieldSet>
-        <FieldSeparator />
-        <Field orientation="horizontal">
-          <FieldContent>
-            <FieldLabel htmlFor="number-of-gpus">Number of GPUs</FieldLabel>
-            <FieldDescription>You can add more later.</FieldDescription>
-          </FieldContent>
-          <div className="flex items-center rounded-md border">
-            <Button
-              variant="ghost"
-              size="sm"
-              type="button"
-              aria-label="Decrement"
-              className="h-9 w-10 rounded-none border-r"
-              onClick={() => setGpuCount(Math.max(1, gpuCount - 1))}
-            >
-              -
-            </Button>
-            <span className="flex h-9 w-14 items-center justify-center font-mono text-sm">{gpuCount}</span>
-            <Button
-              variant="ghost"
-              size="sm"
-              type="button"
-              aria-label="Increment"
-              className="h-9 w-10 rounded-none border-l"
-              onClick={() => setGpuCount(Math.min(99, gpuCount + 1))}
-            >
-              +
-            </Button>
-          </div>
-        </Field>
-        <FieldSeparator />
-        <Field orientation="horizontal">
-          <FieldContent>
-            <FieldLabel htmlFor="tinting">Wallpaper Tinting</FieldLabel>
-            <FieldDescription>Allow the wallpaper to be tinted.</FieldDescription>
-          </FieldContent>
-          <Switch id="tinting" defaultChecked />
-        </Field>
-      </FieldGroup>
-    </FieldSet>
-  );
-}
-
-function SpinnerEmptyDemo() {
-  return (
-    <Empty className="w-full max-w-xs py-4">
-      <EmptyHeader>
-        <EmptyMedia variant="icon">
-          <Spinner />
-        </EmptyMedia>
-        <EmptyTitle>Processing your request</EmptyTitle>
-        <EmptyDescription>Please wait while we process your request. Do not refresh the page.</EmptyDescription>
-      </EmptyHeader>
-      <EmptyContent>
-        <Button variant="outline" size="sm">
-          Cancel
-        </Button>
-      </EmptyContent>
-    </Empty>
-  );
-}
-
-function FieldCheckboxDemo() {
-  return (
-    <FieldLabel htmlFor="checkbox-demo">
-      <Field orientation="horizontal">
-        <Checkbox id="checkbox-demo" defaultChecked />
-        <FieldLabel htmlFor="checkbox-demo" className="font-normal">
-          I agree to the terms and conditions
-        </FieldLabel>
-      </Field>
-    </FieldLabel>
-  );
-}
-
-function Tile({ children, className }: { children: React.ReactNode; className?: string }) {
-  return (
-    <div className={`rounded-xl border bg-card p-6 ${className ?? ''}`}>
-      {children}
-    </div>
-  );
-}
-
-function NotionPromptDemo() {
-  return (
-    <div className="w-full">
-      <InputGroup>
-        <InputGroupAddon>
-          <Button variant="outline" size="sm" className="h-6 gap-0.5 px-1.5 text-[10px]">
-            <PlusIcon className="size-2.5" />
-            Add context
-          </Button>
-        </InputGroupAddon>
-        <InputGroupInput placeholder="Ask, search, or make anything..." />
-      </InputGroup>
-    </div>
-  );
-}
-
-function SourceSelectorDemo() {
-  return (
-    <div className="flex items-center gap-2">
-      <Button variant="ghost" size="sm" className="h-8 gap-1.5">
-        <span className="size-4 rounded border" />
-        Auto
-      </Button>
-      <Button variant="ghost" size="sm" className="h-8 gap-1.5">
-        <span className="size-4 rounded-full border" />
-        All Sources
-      </Button>
-      <Button variant="default" size="sm" className="ml-auto size-8 rounded-full p-0">
-        <ArrowUpIcon className="size-4" />
-      </Button>
-    </div>
-  );
-}
-
-function UrlBookmarkDemo() {
-  return (
-    <InputGroup>
-      <InputGroupAddon>
-        <svg className="size-4 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
-          <circle cx="12" cy="12" r="10" />
-          <path d="M2 12h20" />
-          <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
-        </svg>
-      </InputGroupAddon>
-      <InputGroupInput placeholder="https://" />
-      <InputGroupAddon align="inline-end">
-        <Button variant="ghost" size="sm" className="size-6 p-0">
-          <svg className="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
-            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
-          </svg>
-        </Button>
-      </InputGroupAddon>
-    </InputGroup>
-  );
-}
-
-function PaginationDemo() {
-  return (
-    <div className="flex items-center gap-2">
-      <ButtonGroup>
-        <Button variant="outline" size="sm" className="size-8 p-0">1</Button>
-        <Button variant="outline" size="sm" className="size-8 p-0">2</Button>
-        <Button variant="outline" size="sm" className="size-8 p-0">3</Button>
-      </ButtonGroup>
-      <ButtonGroup>
-        <Button variant="outline" size="sm" className="size-8 p-0">
-          <ArrowLeftIcon className="size-4" />
-        </Button>
-        <Button variant="outline" size="sm" className="size-8 p-0">
-          <ChevronRightIcon className="size-4" />
-        </Button>
-      </ButtonGroup>
-    </div>
-  );
-}
-
-function CopilotDropdownDemo() {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="sm" className="gap-1.5">
-          <svg className="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
-            <rect x="3" y="3" width="18" height="18" rx="2" />
-            <path d="M3 9h18" />
-          </svg>
-          Copilot
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem>Option 1</DropdownMenuItem>
-        <DropdownMenuItem>Option 2</DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-
-function SurveyOptionsDemo() {
-  return (
-    <Field className="max-w-xs">
-      <FieldTitle>How did you hear about us?</FieldTitle>
-      <FieldDescription>Select the option that best describes how you...</FieldDescription>
-      <div className="mt-3 flex flex-wrap gap-2">
-        <div className="inline-flex cursor-pointer items-center gap-1.5 rounded-md border border-input bg-background px-3 py-1.5 text-sm font-medium shadow-xs hover:bg-accent hover:text-accent-foreground">
-          <Checkbox className="size-4" defaultChecked />
-          Social Media
-        </div>
-        <Button variant="outline" size="sm">Search Engine</Button>
-        <Button variant="outline" size="sm">Referral</Button>
-        <Button variant="outline" size="sm">Other</Button>
-      </div>
-    </Field>
-  );
-}
-
-function DesignSystemOverview() {
-  return (
-    <div className="mx-auto max-w-7xl p-6">
-      <header className="mb-10 text-center">
-        <h1 className="text-3xl font-bold tracking-tight">Design System</h1>
-        <p className="mt-2 text-muted-foreground">Reusable components that power your UI — explore the sidebar to see each in detail</p>
-        <p className="mt-2 text-s italic text-muted-foreground/70">Bring your own design system — coming soon!</p>
-      </header>
-      <div className="flex flex-col gap-4 sm:flex-row sm:items-start">
-        {/* Column 1 - Payment Method needs more space */}
-        <div className="flex flex-[1.3] flex-col gap-4">
-          <Tile>
-            <PaymentMethodDemo />
-          </Tile>
-          <Tile>
-            <SourceSelectorDemo />
-          </Tile>
-          <Tile>
-            <CopilotDropdownDemo />
-          </Tile>
-        </div>
-
-        {/* Column 2 */}
-        <div className="flex flex-1 flex-col gap-4">
-          <Tile>
-            <EmptyAvatarGroupDemo />
-          </Tile>
-          <Tile>
-            <InputGroupDemo />
-          </Tile>
-          <Tile>
-            <FieldSliderDemo />
-          </Tile>
-        </div>
-
-        {/* Column 3 */}
-        <div className="hidden flex-1 flex-col gap-4 lg:flex">
-          <Tile>
-            <UrlBookmarkDemo />
-          </Tile>
-          <Tile>
-            <ItemDemo />
-          </Tile>
-          <Tile>
-            <SpinnerBadgeDemo />
-          </Tile>
-          <Tile>
-            <AppearanceSettingsDemo />
-          </Tile>
-        </div>
-
-        {/* Column 4 */}
-        <div className="hidden flex-1 flex-col gap-4 2xl:flex">
-          <Tile>
-            <ButtonGroupDemo />
-          </Tile>
-          <Tile>
-            <FieldCheckboxDemo />
-          </Tile>
-          <Tile>
-            <NotionPromptDemo />
-          </Tile>
-          <Tile>
-            <PaginationDemo />
-          </Tile>
-          <Tile>
-            <SurveyOptionsDemo />
-          </Tile>
-          <Tile>
-            <SpinnerEmptyDemo />
-          </Tile>
-        </div>
-      </div>
-
-      {/* Overflow for column 3 on small/medium screens */}
-      <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:hidden">
-        <Tile>
-          <UrlBookmarkDemo />
-        </Tile>
-        <Tile>
-          <ItemDemo />
-        </Tile>
-        <Tile>
-          <SpinnerBadgeDemo />
-        </Tile>
-        <Tile>
-          <AppearanceSettingsDemo />
-        </Tile>
-      </div>
-
-      {/* Overflow for column 4 on medium/large screens */}
-      <div className="mt-4 grid grid-cols-2 gap-4 lg:grid-cols-3 2xl:hidden">
-        <Tile>
-          <ButtonGroupDemo />
-        </Tile>
-        <Tile>
-          <FieldCheckboxDemo />
-        </Tile>
-        <Tile>
-          <NotionPromptDemo />
-        </Tile>
-        <Tile>
-          <PaginationDemo />
-        </Tile>
-        <Tile>
-          <SurveyOptionsDemo />
-        </Tile>
-        <Tile>
-          <SpinnerEmptyDemo />
-        </Tile>
-      </div>
-    </div>
-  );
-}
-
-const meta: Meta = {
-  title: 'Design System/Overview',
-  component: DesignSystemOverview,
-  tags: ['!autodocs', '!manifest'],
-};
-export default meta;
-
-type Story = StoryObj;
-
-export const Default: Story = {
-  render: () => <DesignSystemOverview />,
-};