@auto-engineer/generate-react-client 1.64.0 → 1.66.0

package/dist/starter/src/components/ui/DesignSystem-Overview.stories.tsx

@@ -1,748 +1,767 @@
 'use client';
 
-import * as React from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+	ArchiveIcon,
+	ArrowLeftIcon,
+	ArrowUpIcon,
+	BadgeCheckIcon,
+	CalendarPlusIcon,
+	ChevronRightIcon,
+	ClockIcon,
+	InfoIcon,
+	ListFilterIcon,
+	MailCheckIcon,
+	MoreHorizontalIcon,
+	PlusIcon,
+	SearchIcon,
+	TagIcon,
+	Trash2Icon,
+} from 'lucide-react';
+import * as React from 'react';
 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,
+	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 {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-} from '@/components/ui/Empty';
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSeparator,
-  FieldSet,
-  FieldTitle,
+	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,
+	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 { 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>
-  );
+	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>
-  );
+	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>
-  );
+	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');
+	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>
-  );
+	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>
-  );
+	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>
-  );
+	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>
-  );
+	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);
+	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>
-  );
+	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>
-  );
+	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>
-  );
+	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>
-  );
+	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>
-  );
+	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>
-  );
+	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>
-  );
+	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>
-  );
+	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>
-  );
+	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>
-  );
+	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>
+	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 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 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>
+				{/* 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 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>
-  );
+			{/* 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'],
+	title: 'Design System/Overview',
+	component: DesignSystemOverview,
+	tags: ['!autodocs', '!manifest'],
 };
 export default meta;
 
 type Story = StoryObj;
 
 export const Default: Story = {
-  render: () => <DesignSystemOverview />,
+	render: () => <DesignSystemOverview />,
 };