diff --git a/apps/v4/app/(app)/themes/layout.tsx b/apps/v4/app/(app)/themes/layout.tsx
deleted file mode 100644
index 99951af1ae..0000000000
--- a/apps/v4/app/(app)/themes/layout.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { type Metadata } from "next"
-import Link from "next/link"
-
-import { Announcement } from "@/components/announcement"
-import {
-  PageActions,
-  PageHeader,
-  PageHeaderDescription,
-  PageHeaderHeading,
-} from "@/components/page-header"
-import { Button } from "@/registry/new-york-v4/ui/button"
-
-const title = "Pick a Color. Make it yours."
-const description =
-  "Try our hand-picked themes. Copy and paste them into your project. New theme editor coming soon."
-
-export const metadata: Metadata = {
-  title,
-  description,
-  openGraph: {
-    images: [
-      {
-        url: `/og?title=${encodeURIComponent(
-          title
-        )}&description=${encodeURIComponent(description)}`,
-      },
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",
-    images: [
-      {
-        url: `/og?title=${encodeURIComponent(
-          title
-        )}&description=${encodeURIComponent(description)}`,
-      },
-    ],
-  },
-}
-
-export default function ThemesLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <div>
-      <PageHeader>
-        <Announcement />
-        <PageHeaderHeading>{title}</PageHeaderHeading>
-        <PageHeaderDescription>{description}</PageHeaderDescription>
-        <PageActions>
-          <Button asChild size="sm">
-            <a href="#themes">Browse Themes</a>
-          </Button>
-          <Button asChild variant="ghost" size="sm">
-            <Link href="/docs/theming">Documentation</Link>
-          </Button>
-        </PageActions>
-      </PageHeader>
-      {children}
-    </div>
-  )
-}
diff --git a/apps/v4/app/(app)/themes/page.tsx b/apps/v4/app/(app)/themes/page.tsx
deleted file mode 100644
index a9d44bd5f6..0000000000
--- a/apps/v4/app/(app)/themes/page.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { CardsDemo } from "@/components/cards"
-import { ThemeCustomizer } from "@/components/theme-customizer"
-
-export const dynamic = "force-static"
-export const revalidate = false
-
-export default function ThemesPage() {
-  return (
-    <>
-      <div id="themes" className="container-wrapper scroll-mt-20">
-        <div className="container flex items-center justify-between gap-8 px-6 py-4 md:px-8">
-          <ThemeCustomizer />
-        </div>
-      </div>
-      <div className="container-wrapper flex flex-1 flex-col section-soft pb-6">
-        <div className="container flex flex-1 flex-col theme-container">
-          <CardsDemo />
-        </div>
-      </div>
-    </>
-  )
-}
diff --git a/apps/v4/app/(examples)/dashboard-03/components/analytics-date-picker.tsx b/apps/v4/app/(examples)/dashboard-03/components/analytics-date-picker.tsx
deleted file mode 100644
index 54a8ff7ab4..0000000000
--- a/apps/v4/app/(examples)/dashboard-03/components/analytics-date-picker.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { addDays, format } from "date-fns"
-import { CalendarIcon } from "lucide-react"
-import { type DateRange } from "react-day-picker"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/registry/new-york-v4/ui/button"
-import { Calendar } from "@/registry/new-york-v4/ui/calendar"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/new-york-v4/ui/popover"
-
-export function AnalyticsDatePicker() {
-  const [date, setDate] = React.useState<DateRange | undefined>({
-    from: new Date(new Date().getFullYear(), 0, 20),
-    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),
-  })
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          id="date"
-          variant="outline"
-          className={cn(
-            "w-fit justify-start px-2 font-normal",
-            !date && "text-muted-foreground"
-          )}
-        >
-          <CalendarIcon className="text-muted-foreground" />
-          {date?.from ? (
-            date.to ? (
-              <>
-                {format(date.from, "LLL dd, y")} -{" "}
-                {format(date.to, "LLL dd, y")}
-              </>
-            ) : (
-              format(date.from, "LLL dd, y")
-            )
-          ) : (
-            <span>Pick a date</span>
-          )}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-auto p-0" align="end">
-        <Calendar
-          initialFocus
-          mode="range"
-          defaultMonth={date?.from}
-          selected={date}
-          onSelect={setDate}
-          numberOfMonths={2}
-        />
-      </PopoverContent>
-    </Popover>
-  )
-}
diff --git a/apps/v4/app/(examples)/dashboard-03/components/app-sidebar.tsx b/apps/v4/app/(examples)/dashboard-03/components/app-sidebar.tsx
deleted file mode 100644
index cbae5e4c6f..0000000000
--- a/apps/v4/app/(examples)/dashboard-03/components/app-sidebar.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  ChartLineIcon,
-  FileIcon,
-  HomeIcon,
-  LifeBuoy,
-  Send,
-  Settings2Icon,
-  ShoppingBagIcon,
-  ShoppingCartIcon,
-  UserIcon,
-} from "lucide-react"
-
-import { Sidebar, SidebarContent } from "@/registry/new-york-v4/ui/sidebar"
-import { NavMain } from "@/app/(examples)/dashboard-03/components/nav-main"
-import { NavSecondary } from "@/app/(examples)/dashboard-03/components/nav-secondary"
-
-const data = {
-  navMain: [
-    {
-      title: "Dashboard",
-      url: "/dashboard",
-      icon: HomeIcon,
-    },
-    {
-      title: "Analytics",
-      url: "/dashboard/analytics",
-      icon: ChartLineIcon,
-    },
-    {
-      title: "Orders",
-      url: "/dashboard/orders",
-      icon: ShoppingBagIcon,
-    },
-    {
-      title: "Products",
-      url: "/dashboard/products",
-      icon: ShoppingCartIcon,
-    },
-    {
-      title: "Invoices",
-      url: "/dashboard/invoices",
-      icon: FileIcon,
-    },
-    {
-      title: "Customers",
-      url: "/dashboard/customers",
-      icon: UserIcon,
-    },
-    {
-      title: "Settings",
-      url: "/dashboard/settings",
-      icon: Settings2Icon,
-    },
-  ],
-  navSecondary: [
-    {
-      title: "Support",
-      url: "#",
-      icon: LifeBuoy,
-    },
-    {
-      title: "Feedback",
-      url: "#",
-      icon: Send,
-    },
-  ],
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-  return (
-    <Sidebar
-      className="top-(--header-height) h-[calc(100svh-var(--header-height))]!"
-      {...props}
-    >
-      <SidebarContent>
-        <NavMain items={data.navMain} />
-        <NavSecondary items={data.navSecondary} className="mt-auto" />
-      </SidebarContent>
-    </Sidebar>
-  )
-}
diff --git a/apps/v4/app/(examples)/dashboard-03/components/chart-revenue.tsx b/apps/v4/app/(examples)/dashboard-03/components/chart-revenue.tsx
deleted file mode 100644
index f6cc9eb946..0000000000
--- a/apps/v4/app/(examples)/dashboard-03/components/chart-revenue.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-"use client"
-
-import { TrendingUp } from "lucide-react"
-import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york-v4/ui/card"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  type ChartConfig,
-} from "@/registry/new-york-v4/ui/chart"
-
-const chartData = [
-  { month: "January", desktop: 186, mobile: 80 },
-  { month: "February", desktop: 305, mobile: 200 },
-  { month: "March", desktop: 237, mobile: 120 },
-  { month: "April", desktop: 73, mobile: 190 },
-  { month: "May", desktop: 209, mobile: 130 },
-  { month: "June", desktop: 346, mobile: 140 },
-  { month: "July", desktop: 321, mobile: 275 },
-  { month: "August", desktop: 132, mobile: 95 },
-  { month: "September", desktop: 189, mobile: 225 },
-  { month: "October", desktop: 302, mobile: 248 },
-  { month: "November", desktop: 342, mobile: 285 },
-  { month: "December", desktop: 328, mobile: 290 },
-]
-
-const chartConfig = {
-  desktop: {
-    label: "Desktop",
-    color: "var(--chart-1)",
-  },
-  mobile: {
-    label: "Mobile",
-    color: "var(--chart-2)",
-  },
-} satisfies ChartConfig
-
-export function ChartRevenue() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardDescription>January - June 2024</CardDescription>
-        <CardTitle className="text-3xl font-bold tracking-tight">
-          $45,231.89
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
-        <ChartContainer config={chartConfig} className="aspect-[3/1]">
-          <BarChart
-            accessibilityLayer
-            data={chartData}
-            margin={{
-              left: -16,
-              right: 0,
-            }}
-          >
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey="month"
-              tickLine={false}
-              tickMargin={10}
-              axisLine={false}
-              tickFormatter={(value) => value.slice(0, 3)}
-            />
-            <YAxis
-              tickLine={false}
-              tickMargin={10}
-              axisLine={false}
-              tickFormatter={(value) => value.toLocaleString()}
-              domain={[0, "dataMax"]}
-            />
-            <ChartTooltip
-              cursor={false}
-              content={<ChartTooltipContent hideIndicator />}
-            />
-            <Bar
-              dataKey="desktop"
-              fill="var(--color-desktop)"
-              radius={[0, 0, 4, 4]}
-              stackId={1}
-            />
-            <Bar
-              dataKey="mobile"
-              fill="var(--color-mobile)"
-              radius={[4, 4, 0, 0]}
-              stackId={1}
-            />
-          </BarChart>
-        </ChartContainer>
-      </CardContent>
-      <CardFooter className="flex-col items-start gap-2 text-sm">
-        <div className="flex gap-2 leading-none font-medium">
-          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
-        </div>
-        <div className="leading-none text-muted-foreground">
-          Showing total visitors for the last 6 months
-        </div>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/v4/app/(examples)/dashboard-03/components/chart-visitors.tsx b/apps/v4/app/(examples)/dashboard-03/components/chart-visitors.tsx
deleted file mode 100644
index 472af3c5be..0000000000
--- a/apps/v4/app/(examples)/dashboard-03/components/chart-visitors.tsx
+++ /dev/null
@@ -1,199 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Label, Pie, PieChart, Sector } from "recharts"
-import type {
-  PieSectorDataItem,
-  PieSectorShapeProps,
-} from "recharts/types/polar/Pie"
-
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york-v4/ui/card"
-import {
-  ChartContainer,
-  ChartStyle,
-  ChartTooltip,
-  ChartTooltipContent,
-  type ChartConfig,
-} from "@/registry/new-york-v4/ui/chart"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york-v4/ui/select"
-
-const desktopData = [
-  { month: "january", desktop: 186, fill: "var(--color-january)" },
-  { month: "february", desktop: 305, fill: "var(--color-february)" },
-  { month: "march", desktop: 237, fill: "var(--color-march)" },
-  { month: "april", desktop: 173, fill: "var(--color-april)" },
-  { month: "may", desktop: 209, fill: "var(--color-may)" },
-]
-
-const chartConfig = {
-  visitors: {
-    label: "Visitors",
-  },
-  desktop: {
-    label: "Desktop",
-  },
-  mobile: {
-    label: "Mobile",
-  },
-  january: {
-    label: "January",
-    color: "var(--chart-1)",
-  },
-  february: {
-    label: "February",
-    color: "var(--chart-2)",
-  },
-  march: {
-    label: "March",
-    color: "var(--chart-3)",
-  },
-  april: {
-    label: "April",
-    color: "var(--chart-4)",
-  },
-  may: {
-    label: "May",
-    color: "var(--chart-5)",
-  },
-} satisfies ChartConfig
-
-export function ChartVisitors() {
-  const id = "pie-interactive"
-  const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)
-
-  const activeIndex = React.useMemo(
-    () => desktopData.findIndex((item) => item.month === activeMonth),
-    [activeMonth]
-  )
-  const months = React.useMemo(() => desktopData.map((item) => item.month), [])
-
-  const renderPieShape = React.useCallback(
-    ({ index, outerRadius = 0, ...props }: PieSectorShapeProps) => {
-      if (index === activeIndex) {
-        return (
-          <g>
-            <Sector {...props} outerRadius={outerRadius + 10} />
-            <Sector
-              {...props}
-              outerRadius={outerRadius + 25}
-              innerRadius={outerRadius + 12}
-            />
-          </g>
-        )
-      }
-
-      return <Sector {...props} outerRadius={outerRadius} />
-    },
-    [activeIndex]
-  )
-
-  return (
-    <Card data-chart={id}>
-      <ChartStyle id={id} config={chartConfig} />
-      <CardHeader>
-        <CardDescription>January - June 2024</CardDescription>
-        <CardTitle className="text-2xl font-bold">1,234 visitors</CardTitle>
-        <CardAction>
-          <Select value={activeMonth} onValueChange={setActiveMonth}>
-            <SelectTrigger
-              className="ml-auto h-8 w-[120px]"
-              aria-label="Select a value"
-            >
-              <SelectValue placeholder="Select month" />
-            </SelectTrigger>
-            <SelectContent align="end">
-              {months.map((key) => {
-                const config = chartConfig[key as keyof typeof chartConfig]
-
-                if (!config) {
-                  return null
-                }
-
-                const color = "color" in config ? config.color : undefined
-
-                return (
-                  <SelectItem key={key} value={key}>
-                    <div className="flex items-center gap-2 text-xs">
-                      <span
-                        className="flex h-3 w-3 shrink-0 rounded-sm"
-                        style={{
-                          backgroundColor: color,
-                        }}
-                      />
-                      {config?.label}
-                    </div>
-                  </SelectItem>
-                )
-              })}
-            </SelectContent>
-          </Select>
-        </CardAction>
-      </CardHeader>
-      <CardContent className="flex flex-1 justify-center pb-0">
-        <ChartContainer
-          id={id}
-          config={chartConfig}
-          className="mx-auto aspect-square w-full max-w-[300px]"
-        >
-          <PieChart>
-            <ChartTooltip
-              cursor={false}
-              content={<ChartTooltipContent hideLabel />}
-            />
-            <Pie
-              data={desktopData}
-              dataKey="desktop"
-              nameKey="month"
-              innerRadius={60}
-              strokeWidth={5}
-              shape={renderPieShape}
-            >
-              <Label
-                content={({ viewBox }) => {
-                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
-                    return (
-                      <text
-                        x={viewBox.cx}
-                        y={viewBox.cy}
-                        textAnchor="middle"
-                        dominantBaseline="middle"
-                      >
-                        <tspan
-                          x={viewBox.cx}
-                          y={viewBox.cy}
-                          className="fill-foreground text-3xl font-bold"
-                        >
-                          {desktopData[activeIndex].desktop.toLocaleString()}
-                        </tspan>
-                        <tspan
-                          x={viewBox.cx}
-                          y={(viewBox.cy || 0) + 24}
-                          className="fill-muted-foreground"
-                        >
-                          Visitors
-                        </tspan>
-                      </text>
-                    )
-                  }
-                }}
-              />
-            </Pie>
-          </PieChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/v4/app/(examples)/dashboard-03/components/mode-toggle.tsx b/apps/v4/app/(examples)/dashboard-03/components/mode-toggle.tsx
deleted file mode 100644
index ca63bb877b..0000000000
--- a/apps/v4/app/(examples)/dashboard-03/components/mode-toggle.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { MoonIcon, SunIcon } from "lucide-react"
-import { useTheme } from "next-themes"
-
-import { Button } from "@/registry/new-york-v4/ui/button"
-
-export function ModeToggle() {
-  const { setTheme, resolvedTheme } = useTheme()
-
-  const toggleTheme = React.useCallback(() => {
-    setTheme(resolvedTheme === "dark" ? "light" : "dark")
-  }, [resolvedTheme, setTheme])
-
-  return (
-    <Button
-      variant="secondary"
-      size="icon"
-      className="group/toggle size-8"
-      onClick={toggleTheme}
-    >
-      <SunIcon className="hidden [html.dark_&]:block" />
-      <MoonIcon className="hidden [html.light_&]:block" />
-      <span className="sr-only">Toggle theme</span>
-    </Button>
-  )
-}
diff --git a/apps/v4/app/(examples)/dashboard-03/components/nav-main.tsx b/apps/v4/app/(examples)/dashboard-03/components/nav-main.tsx
deleted file mode 100644
index e445bb29fe..0000000000
--- a/apps/v4/app/(examples)/dashboard-03/components/nav-main.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-"use client"
-
-import { usePathname } from "next/navigation"
-import { ChevronRight, type LucideIcon } from "lucide-react"
-
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/registry/new-york-v4/ui/collapsible"
-import {
-  SidebarGroup,
-  SidebarGroupLabel,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-} from "@/registry/new-york-v4/ui/sidebar"
-
-export function NavMain({
-  items,
-}: {
-  items: {
-    title: string
-    url: string
-    icon: LucideIcon
-    isActive?: boolean
-    items?: {
-      title: string
-      url: string
-    }[]
-    disabled?: boolean
-  }[]
-}) {
-  const pathname = usePathname()
-
-  return (
-    <SidebarGroup>
-      <SidebarGroupLabel>Dashboard</SidebarGroupLabel>
-      <SidebarMenu>
-        {items.map((item) => (
-          <Collapsible key={item.title} asChild defaultOpen={item.isActive}>
-            <SidebarMenuItem>
-              <SidebarMenuButton
-                asChild
-                tooltip={item.title}
-                isActive={pathname === item.url}
-                disabled={item.disabled}
-              >
-                <a
-                  href={item.disabled ? "#" : item.url}
-                  data-disabled={item.disabled}
-                  className="data-[disabled=true]:opacity-50"
-                >
-                  <item.icon className="text-muted-foreground" />
-                  <span>{item.title}</span>
-                </a>
-              </SidebarMenuButton>
-              {item.items?.length ? (
-                <>
-                  <CollapsibleTrigger asChild>
-                    <SidebarMenuAction className="data-[state=open]:rotate-90">
-                      <ChevronRight />
-                      <span className="sr-only">Toggle</span>
-                    </SidebarMenuAction>
-                  </CollapsibleTrigger>
-                  <CollapsibleContent>
-                    <SidebarMenuSub>
-                      {item.items?.map((subItem) => (
-                        <SidebarMenuSubItem key={subItem.title}>
-                          <SidebarMenuSubButton asChild>
-                            <a href={subItem.url}>
-                              <span>{subItem.title}</span>
-                            </a>
-                          </SidebarMenuSubButton>
-                        </SidebarMenuSubItem>
-                      ))}
-                    </SidebarMenuSub>
-                  </CollapsibleContent>
-                </>
-              ) : null}
-            </SidebarMenuItem>
-          </Collapsible>
-        ))}
-      </SidebarMenu>
-    </SidebarGroup>
-  )
-}
diff --git a/apps/v4/app/(examples)/dashboard-03/components/nav-secondary.tsx b/apps/v4/app/(examples)/dashboard-03/components/nav-secondary.tsx
deleted file mode 100644
index 66924a12dc..0000000000
--- a/apps/v4/app/(examples)/dashboard-03/components/nav-secondary.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import * as React from "react"
-import { type LucideIcon } from "lucide-react"
-
-import {
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-} from "@/registry/new-york-v4/ui/sidebar"
-
-export function NavSecondary({
-  items,
-  ...props
-}: {
-  items: {
-    title: string
-    url: string
-    icon: LucideIcon
-  }[]
-} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
-  return (
-    <SidebarGroup {...props}>
-      <SidebarGroupContent>
-        <SidebarMenu>
-          {items.map((item) => (
-            <SidebarMenuItem key={item.title}>
-              <SidebarMenuButton asChild size="sm">
-                <a href={item.url}>
-                  <item.icon />
-                  <span>{item.title}</span>
-                </a>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-          ))}
-        </SidebarMenu>
-      </SidebarGroupContent>
-    </SidebarGroup>
-  )
-}
diff --git a/apps/v4/app/(examples)/dashboard-03/components/nav-user.tsx b/apps/v4/app/(examples)/dashboard-03/components/nav-user.tsx
deleted file mode 100644
index 12c05be3a2..0000000000
--- a/apps/v4/app/(examples)/dashboard-03/components/nav-user.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-"use client"
-
-import { BadgeCheck, Bell, CreditCard, LogOut, Sparkles } from "lucide-react"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/new-york-v4/ui/avatar"
-import { Button } from "@/registry/new-york-v4/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/new-york-v4/ui/dropdown-menu"
-
-export function NavUser({
-  user,
-}: {
-  user: {
-    name: string
-    email: string
-    avatar: string
-  }
-}) {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="icon">
-          <Avatar className="size-8 rounded-md">
-            <AvatarImage src={user.avatar} alt={user.name} />
-            <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-          </Avatar>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent
-        className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
-        side="bottom"
-        align="end"
-        sideOffset={4}
-      >
-        <DropdownMenuLabel className="p-0 font-normal">
-          <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-            <Avatar className="h-8 w-8 rounded-lg">
-              <AvatarImage src={user.avatar} alt={user.name} />
-              <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-            </Avatar>
-            <div className="grid flex-1 text-left text-sm leading-tight">
-              <span className="truncate font-medium">{user.name}</span>
-              <span className="truncate text-xs text-muted-foreground">
-                {user.email}
-              </span>
-            </div>
-          </div>
-        </DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuGroup>
-          <DropdownMenuItem>
-            <Sparkles />
-            Upgrade to Pro
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuGroup>
-          <DropdownMenuItem>
-            <BadgeCheck />
-            Account
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            <CreditCard />
-            Billing
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            <Bell />
-            Notifications
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem>
-          <LogOut />
-          Log out
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
diff --git a/apps/v4/app/(examples)/dashboard-03/components/products-table.tsx b/apps/v4/app/(examples)/dashboard-03/components/products-table.tsx
deleted file mode 100644
index 2fb0ac58f6..0000000000
--- a/apps/v4/app/(examples)/dashboard-03/components/products-table.tsx
+++ /dev/null
@@ -1,217 +0,0 @@
-import {
-  ArrowUpDownIcon,
-  EllipsisVerticalIcon,
-  ListFilterIcon,
-  PlusIcon,
-} from "lucide-react"
-
-import { Badge } from "@/registry/new-york-v4/ui/badge"
-import { Button } from "@/registry/new-york-v4/ui/button"
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-} from "@/registry/new-york-v4/ui/card"
-import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/registry/new-york-v4/ui/dropdown-menu"
-import {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from "@/registry/new-york-v4/ui/pagination"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york-v4/ui/select"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/new-york-v4/ui/table"
-import { Tabs, TabsList, TabsTrigger } from "@/registry/new-york-v4/ui/tabs"
-
-export function ProductsTable({
-  products,
-}: {
-  products: {
-    id: string
-    name: string
-    price: number
-    stock: number
-    dateAdded: string
-    status: string
-  }[]
-}) {
-  return (
-    <Card className="flex w-full flex-col gap-4">
-      <CardHeader className="flex flex-row items-center justify-between">
-        <Tabs defaultValue="all">
-          <TabsList className="w-full @3xl/page:w-fit">
-            <TabsTrigger value="all">All Products</TabsTrigger>
-            <TabsTrigger value="in-stock">In Stock</TabsTrigger>
-            <TabsTrigger value="low-stock">Low Stock</TabsTrigger>
-            <TabsTrigger value="add-product" asChild>
-              <button>
-                <PlusIcon />
-              </button>
-            </TabsTrigger>
-          </TabsList>
-        </Tabs>
-        <div className="hidden items-center gap-2 **:data-[slot=button]:size-8 **:data-[slot=select-trigger]:h-8 @3xl/page:flex">
-          <Select defaultValue="all">
-            <SelectTrigger>
-              <span className="text-sm text-muted-foreground">Category:</span>
-              <SelectValue placeholder="Select a product" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">All</SelectItem>
-              <SelectItem value="in-stock">In Stock</SelectItem>
-              <SelectItem value="low-stock">Low Stock</SelectItem>
-              <SelectItem value="archived">Archived</SelectItem>
-            </SelectContent>
-          </Select>
-          <Select defaultValue="all">
-            <SelectTrigger>
-              <span className="text-sm text-muted-foreground">Price:</span>
-              <SelectValue placeholder="Select a product" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">$100-$200</SelectItem>
-              <SelectItem value="in-stock">$200-$300</SelectItem>
-              <SelectItem value="low-stock">$300-$400</SelectItem>
-              <SelectItem value="archived">$400-$500</SelectItem>
-            </SelectContent>
-          </Select>
-          <Select defaultValue="all">
-            <SelectTrigger>
-              <span className="text-sm text-muted-foreground">Status:</span>
-              <SelectValue placeholder="Select a product" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">In Stock</SelectItem>
-              <SelectItem value="in-stock">Low Stock</SelectItem>
-              <SelectItem value="low-stock">Archived</SelectItem>
-              <SelectItem value="archived">Archived</SelectItem>
-            </SelectContent>
-          </Select>
-          <Button variant="outline" size="icon">
-            <ListFilterIcon />
-          </Button>
-          <Button variant="outline" size="icon">
-            <ArrowUpDownIcon />
-          </Button>
-        </div>
-      </CardHeader>
-      <CardContent>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead className="w-12 px-4">
-                <Checkbox />
-              </TableHead>
-              <TableHead>Product</TableHead>
-              <TableHead className="text-right">Price</TableHead>
-              <TableHead className="text-right">Stock</TableHead>
-              <TableHead>Status</TableHead>
-              <TableHead>Date Added</TableHead>
-              <TableHead />
-            </TableRow>
-          </TableHeader>
-          <TableBody className="**:data-[slot=table-cell]:py-2.5">
-            {products.map((product) => (
-              <TableRow key={product.id}>
-                <TableCell className="px-4">
-                  <Checkbox />
-                </TableCell>
-                <TableCell className="font-medium">{product.name}</TableCell>
-                <TableCell className="text-right">
-                  ${product.price.toFixed(2)}
-                </TableCell>
-                <TableCell className="text-right">{product.stock}</TableCell>
-                <TableCell>
-                  <Badge
-                    variant="secondary"
-                    className={
-                      product.status === "Low Stock"
-                        ? "border-orange-700 bg-transparent text-orange-700 dark:border-orange-700 dark:bg-transparent dark:text-orange-700"
-                        : "bg-green-100 text-green-800 dark:bg-green-950 dark:text-green-100"
-                    }
-                  >
-                    {product.status}
-                  </Badge>
-                </TableCell>
-                <TableCell>
-                  {new Date(product.dateAdded).toLocaleDateString("en-US", {
-                    month: "long",
-                    day: "numeric",
-                    year: "numeric",
-                  })}
-                </TableCell>
-                <TableCell>
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <Button variant="ghost" size="icon" className="size-6">
-                        <EllipsisVerticalIcon />
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end">
-                      <DropdownMenuItem>Edit</DropdownMenuItem>
-                      <DropdownMenuItem variant="destructive">
-                        Delete
-                      </DropdownMenuItem>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </CardContent>
-      <CardFooter className="flex flex-col items-center justify-between border-t pt-6 @3xl/page:flex-row">
-        <div className="hidden text-sm text-muted-foreground @3xl/page:block">
-          Showing 1-10 of 100 products
-        </div>
-        <Pagination className="mx-0 w-fit">
-          <PaginationContent>
-            <PaginationItem>
-              <PaginationPrevious href="#" />
-            </PaginationItem>
-            <PaginationItem>
-              <PaginationLink href="#">1</PaginationLink>
-            </PaginationItem>
-            <PaginationItem>
-              <PaginationLink href="#" isActive>
-                2
-              </PaginationLink>
-            </PaginationItem>
-            <PaginationItem>
-              <PaginationLink href="#">3</PaginationLink>
-            </PaginationItem>
-            <PaginationItem>
-              <PaginationEllipsis />
-            </PaginationItem>
-            <PaginationItem>
-              <PaginationNext href="#" />
-            </PaginationItem>
-          </PaginationContent>
-        </Pagination>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/v4/app/(examples)/dashboard-03/components/search-form.tsx b/apps/v4/app/(examples)/dashboard-03/components/search-form.tsx
deleted file mode 100644
index 0491880e4d..0000000000
--- a/apps/v4/app/(examples)/dashboard-03/components/search-form.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Search } from "lucide-react"
-
-import { Label } from "@/registry/new-york-v4/ui/label"
-import { SidebarInput } from "@/registry/new-york-v4/ui/sidebar"
-
-export function SearchForm({ ...props }: React.ComponentProps<"form">) {
-  return (
-    <form {...props}>
-      <div className="relative">
-        <Label htmlFor="search" className="sr-only">
-          Search
-        </Label>
-        <SidebarInput
-          id="search"
-          placeholder="Type to search..."
-          className="h-8 pl-7"
-        />
-        <Search className="pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none" />
-      </div>
-    </form>
-  )
-}
diff --git a/apps/v4/app/(examples)/dashboard-03/components/site-header.tsx b/apps/v4/app/(examples)/dashboard-03/components/site-header.tsx
deleted file mode 100644
index 4fad66816f..0000000000
--- a/apps/v4/app/(examples)/dashboard-03/components/site-header.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-"use client"
-
-import { Fragment, useMemo } from "react"
-import { usePathname } from "next/navigation"
-import { SidebarIcon } from "lucide-react"
-
-import { ThemeSelector } from "@/components/theme-selector"
-import { SearchForm } from "@/registry/new-york-v4/blocks/sidebar-16/components/search-form"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york-v4/ui/breadcrumb"
-import { Button } from "@/registry/new-york-v4/ui/button"
-import { Separator } from "@/registry/new-york-v4/ui/separator"
-import { useSidebar } from "@/registry/new-york-v4/ui/sidebar"
-import { ModeToggle } from "@/app/(examples)/dashboard-03/components/mode-toggle"
-import { NavUser } from "@/app/(examples)/dashboard-03/components/nav-user"
-
-export function SiteHeader() {
-  const { toggleSidebar } = useSidebar()
-  const pathname = usePathname()
-
-  // Faux breadcrumbs for demo.
-  const breadcrumbs = useMemo(() => {
-    return pathname
-      .split("/")
-      .filter((path) => path !== "")
-      .map((path, index, array) => ({
-        label: path,
-        href: `/${array.slice(0, index + 1).join("/")}`,
-      }))
-  }, [pathname])
-
-  return (
-    <header
-      data-slot="site-header"
-      className="sticky top-0 z-50 flex w-full items-center border-b bg-background"
-    >
-      <div className="flex h-(--header-height) w-full items-center gap-2 px-2 pr-4">
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={toggleSidebar}
-          className="gap-2.5 has-[>svg]:px-2"
-        >
-          <SidebarIcon />
-          <span className="truncate font-medium">Acme Inc</span>
-        </Button>
-        <Separator
-          orientation="vertical"
-          className="mr-2 data-[orientation=vertical]:h-4"
-        />
-        <Breadcrumb className="hidden sm:block">
-          <BreadcrumbList>
-            <BreadcrumbItem>
-              <BreadcrumbLink href="/" className="capitalize">
-                Home
-              </BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            {breadcrumbs.map((breadcrumb, index) =>
-              index === breadcrumbs.length - 1 ? (
-                <BreadcrumbItem key={index}>
-                  <BreadcrumbPage className="capitalize">
-                    {breadcrumb.label}
-                  </BreadcrumbPage>
-                </BreadcrumbItem>
-              ) : (
-                <Fragment key={index}>
-                  <BreadcrumbItem>
-                    <BreadcrumbLink
-                      href={breadcrumb.href}
-                      className="capitalize"
-                    >
-                      {breadcrumb.label}
-                    </BreadcrumbLink>
-                  </BreadcrumbItem>
-                  <BreadcrumbSeparator />
-                </Fragment>
-              )
-            )}
-          </BreadcrumbList>
-        </Breadcrumb>
-        <div className="ml-auto flex items-center gap-2">
-          <SearchForm className="w-fullsm:w-auto" />
-          <ThemeSelector />
-          <ModeToggle />
-          <NavUser
-            user={{
-              name: "shadcn",
-              email: "m@example.com",
-              avatar: "/avatars/shadcn.jpg",
-            }}
-          />
-        </div>
-      </div>
-    </header>
-  )
-}
diff --git a/apps/v4/app/(examples)/dashboard-03/customers/page.tsx b/apps/v4/app/(examples)/dashboard-03/customers/page.tsx
deleted file mode 100644
index 512a007ea2..0000000000
--- a/apps/v4/app/(examples)/dashboard-03/customers/page.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export default function CustomersPage() {
-  return (
-    <div className="p-6">
-      <div className="bg-input p-4">Input</div>
-      <div className="bg-input/30 p-4">Input 50</div>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(examples)/dashboard-03/layout.tsx b/apps/v4/app/(examples)/dashboard-03/layout.tsx
deleted file mode 100644
index 6b4daad53c..0000000000
--- a/apps/v4/app/(examples)/dashboard-03/layout.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { cookies } from "next/headers"
-
-import {
-  SidebarInset,
-  SidebarProvider,
-} from "@/registry/new-york-v4/ui/sidebar"
-import { AppSidebar } from "@/app/(examples)/dashboard-03/components/app-sidebar"
-import { SiteHeader } from "@/app/(examples)/dashboard-03/components/site-header"
-
-export default async function DashboardLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  const cookieStore = await cookies()
-  const defaultOpen = cookieStore.get("sidebar_state")?.value === "true"
-
-  return (
-    <main className="[--header-height:calc(theme(spacing.14))]">
-      <SidebarProvider defaultOpen={defaultOpen} className="flex flex-col">
-        <SiteHeader />
-        <div className="flex flex-1">
-          <AppSidebar />
-          <SidebarInset>{children}</SidebarInset>
-        </div>
-      </SidebarProvider>
-    </main>
-  )
-}
diff --git a/apps/v4/app/(examples)/dashboard-03/page.tsx b/apps/v4/app/(examples)/dashboard-03/page.tsx
deleted file mode 100644
index 5cc7dce9c8..0000000000
--- a/apps/v4/app/(examples)/dashboard-03/page.tsx
+++ /dev/null
@@ -1,206 +0,0 @@
-import { type Metadata } from "next"
-import {
-  DownloadIcon,
-  FilterIcon,
-  TrendingDownIcon,
-  TrendingUpIcon,
-} from "lucide-react"
-
-import { Badge } from "@/registry/new-york-v4/ui/badge"
-import { Button } from "@/registry/new-york-v4/ui/button"
-import {
-  Card,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york-v4/ui/card"
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/registry/new-york-v4/ui/tabs"
-import { AnalyticsDatePicker } from "@/app/(examples)/dashboard-03/components/analytics-date-picker"
-import { ChartRevenue } from "@/app/(examples)/dashboard-03/components/chart-revenue"
-import { ChartVisitors } from "@/app/(examples)/dashboard-03/components/chart-visitors"
-import { ProductsTable } from "@/app/(examples)/dashboard-03/components/products-table"
-
-export const metadata: Metadata = {
-  title: "Dashboard",
-  description: "An example dashboard to test the new components.",
-}
-
-// Load from database.
-const products = [
-  {
-    id: "1",
-    name: "BJÖRKSNÄS Dining Table",
-    price: 599.99,
-    stock: 12,
-    dateAdded: "2023-06-15",
-    status: "In Stock",
-  },
-  {
-    id: "2",
-    name: "POÄNG Armchair",
-    price: 249.99,
-    stock: 28,
-    dateAdded: "2023-07-22",
-    status: "In Stock",
-  },
-  {
-    id: "3",
-    name: "MALM Bed Frame",
-    price: 399.99,
-    stock: 15,
-    dateAdded: "2023-08-05",
-    status: "In Stock",
-  },
-  {
-    id: "4",
-    name: "KALLAX Shelf Unit",
-    price: 179.99,
-    stock: 32,
-    dateAdded: "2023-09-12",
-    status: "In Stock",
-  },
-  {
-    id: "5",
-    name: "STOCKHOLM Rug",
-    price: 299.99,
-    stock: 8,
-    dateAdded: "2023-10-18",
-    status: "Low Stock",
-  },
-  {
-    id: "6",
-    name: "KIVIK Sofa",
-    price: 899.99,
-    stock: 6,
-    dateAdded: "2023-11-02",
-    status: "Low Stock",
-  },
-  {
-    id: "7",
-    name: "LISABO Coffee Table",
-    price: 149.99,
-    stock: 22,
-    dateAdded: "2023-11-29",
-    status: "In Stock",
-  },
-  {
-    id: "8",
-    name: "HEMNES Bookcase",
-    price: 249.99,
-    stock: 17,
-    dateAdded: "2023-12-10",
-    status: "In Stock",
-  },
-  {
-    id: "9",
-    name: "EKEDALEN Dining Chairs (Set of 2)",
-    price: 199.99,
-    stock: 14,
-    dateAdded: "2024-01-05",
-    status: "In Stock",
-  },
-  {
-    id: "10",
-    name: "FRIHETEN Sleeper Sofa",
-    price: 799.99,
-    stock: 9,
-    dateAdded: "2024-01-18",
-    status: "Low Stock",
-  },
-]
-
-export default function DashboardPage() {
-  return (
-    <div className="@container/page flex flex-1 flex-col gap-8 p-6">
-      <Tabs defaultValue="overview" className="gap-6">
-        <div
-          data-slot="dashboard-header"
-          className="flex items-center justify-between"
-        >
-          <TabsList className="w-full @3xl/page:w-fit">
-            <TabsTrigger value="overview">Overview</TabsTrigger>
-            <TabsTrigger value="analytics">Analytics</TabsTrigger>
-            <TabsTrigger value="reports">Reports</TabsTrigger>
-            <TabsTrigger value="exports" disabled>
-              Exports
-            </TabsTrigger>
-          </TabsList>
-          <div className="hidden items-center gap-2 @3xl/page:flex">
-            <AnalyticsDatePicker />
-            <Button variant="outline">
-              <FilterIcon />
-              Filter
-            </Button>
-            <Button variant="outline">
-              <DownloadIcon />
-              Export
-            </Button>
-          </div>
-        </div>
-        <TabsContent value="overview" className="flex flex-col gap-4">
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
-            <Card>
-              <CardHeader>
-                <CardTitle>Total Revenue</CardTitle>
-                <CardDescription>$1,250.00 in the last 30 days</CardDescription>
-              </CardHeader>
-              <CardFooter>
-                <Badge variant="outline">
-                  <TrendingUpIcon />
-                  +12.5%
-                </Badge>
-              </CardFooter>
-            </Card>
-            <Card>
-              <CardHeader>
-                <CardTitle>New Customers</CardTitle>
-                <CardDescription>-12 customers from last month</CardDescription>
-              </CardHeader>
-              <CardFooter>
-                <Badge variant="outline">
-                  <TrendingDownIcon />
-                  -20%
-                </Badge>
-              </CardFooter>
-            </Card>
-            <Card>
-              <CardHeader>
-                <CardTitle>Active Accounts</CardTitle>
-                <CardDescription>+2,345 users from last month</CardDescription>
-              </CardHeader>
-              <CardFooter>
-                <Badge variant="outline">
-                  <TrendingUpIcon />
-                  +12.5%
-                </Badge>
-              </CardFooter>
-            </Card>
-            <Card>
-              <CardHeader>
-                <CardTitle>Growth Rate</CardTitle>
-                <CardDescription>+12.5% increase per month</CardDescription>
-              </CardHeader>
-              <CardFooter>
-                <Badge variant="outline">
-                  <TrendingUpIcon />
-                  +4.5%
-                </Badge>
-              </CardFooter>
-            </Card>
-          </div>
-          <div className="grid grid-cols-1 gap-4 @4xl/page:grid-cols-[2fr_1fr]">
-            <ChartRevenue />
-            <ChartVisitors />
-          </div>
-          <ProductsTable products={products} />
-        </TabsContent>
-      </Tabs>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(examples)/dashboard-03/settings/page.tsx b/apps/v4/app/(examples)/dashboard-03/settings/page.tsx
deleted file mode 100644
index 76bbe89d44..0000000000
--- a/apps/v4/app/(examples)/dashboard-03/settings/page.tsx
+++ /dev/null
@@ -1,500 +0,0 @@
-import { type Metadata } from "next"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/registry/new-york-v4/ui/button"
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york-v4/ui/card"
-import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
-import { Input } from "@/registry/new-york-v4/ui/input"
-import { Label } from "@/registry/new-york-v4/ui/label"
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york-v4/ui/select"
-import { Switch } from "@/registry/new-york-v4/ui/switch"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/new-york-v4/ui/table"
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/registry/new-york-v4/ui/tabs"
-
-export const metadata: Metadata = {
-  title: "Settings",
-  description: "Manage your account settings",
-}
-
-const timezones = [
-  {
-    label: "Americas",
-    timezones: [
-      { value: "America/New_York", label: "(GMT-5) New York" },
-      { value: "America/Los_Angeles", label: "(GMT-8) Los Angeles" },
-      { value: "America/Chicago", label: "(GMT-6) Chicago" },
-      { value: "America/Toronto", label: "(GMT-5) Toronto" },
-      { value: "America/Vancouver", label: "(GMT-8) Vancouver" },
-      { value: "America/Sao_Paulo", label: "(GMT-3) São Paulo" },
-    ],
-  },
-  {
-    label: "Europe",
-    timezones: [
-      { value: "Europe/London", label: "(GMT+0) London" },
-      { value: "Europe/Paris", label: "(GMT+1) Paris" },
-      { value: "Europe/Berlin", label: "(GMT+1) Berlin" },
-      { value: "Europe/Rome", label: "(GMT+1) Rome" },
-      { value: "Europe/Madrid", label: "(GMT+1) Madrid" },
-      { value: "Europe/Amsterdam", label: "(GMT+1) Amsterdam" },
-    ],
-  },
-  {
-    label: "Asia/Pacific",
-    timezones: [
-      { value: "Asia/Tokyo", label: "(GMT+9) Tokyo" },
-      { value: "Asia/Shanghai", label: "(GMT+8) Shanghai" },
-      { value: "Asia/Singapore", label: "(GMT+8) Singapore" },
-      { value: "Asia/Dubai", label: "(GMT+4) Dubai" },
-      { value: "Australia/Sydney", label: "(GMT+11) Sydney" },
-      { value: "Asia/Seoul", label: "(GMT+9) Seoul" },
-    ],
-  },
-] as const
-
-const loginHistory = [
-  {
-    date: "2024-01-01",
-    ip: "192.168.1.1",
-    location: "New York, USA",
-  },
-  {
-    date: "2023-12-29",
-    ip: "172.16.0.100",
-    location: "London, UK",
-  },
-  {
-    date: "2023-12-28",
-    ip: "10.0.0.50",
-    location: "Toronto, Canada",
-  },
-  {
-    date: "2023-12-25",
-    ip: "192.168.2.15",
-    location: "Sydney, Australia",
-  },
-] as const
-
-const activeSessions = [
-  {
-    device: "MacBook Pro",
-    browser: "Chrome",
-    os: "macOS",
-  },
-  {
-    device: "iPhone",
-    browser: "Safari",
-    os: "iOS",
-  },
-  {
-    device: "iPad",
-    browser: "Safari",
-    os: "iOS",
-  },
-  {
-    device: "Android Phone",
-    browser: "Chrome",
-    os: "Android",
-  },
-] as const
-
-export default function SettingsPage() {
-  return (
-    <div className="@container/page flex flex-1 flex-col gap-8 p-6">
-      <Tabs defaultValue="account" className="gap-6">
-        <div
-          data-slot="dashboard-header"
-          className="flex items-center justify-between"
-        >
-          <TabsList>
-            <TabsTrigger value="account">Account</TabsTrigger>
-            <TabsTrigger value="security">Security</TabsTrigger>
-            <TabsTrigger value="notifications">Notifications</TabsTrigger>
-            <TabsTrigger value="privacy">Privacy</TabsTrigger>
-          </TabsList>
-        </div>
-        <TabsContent value="account" className="grid gap-6">
-          <Card>
-            <CardHeader>
-              <CardTitle>Account Settings</CardTitle>
-              <CardDescription>
-                Make changes to your account here.
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <form id="form-account" className="@container">
-                <FieldGroup>
-                  <Field>
-                    <Label htmlFor="name">Name</Label>
-                    <FieldControl>
-                      <Input
-                        id="name"
-                        placeholder="First and last name"
-                        required
-                      />
-                    </FieldControl>
-                    <FieldDescription>
-                      This is your public display name.
-                    </FieldDescription>
-                  </Field>
-                  <Field>
-                    <Label htmlFor="email">Email</Label>
-                    <FieldControl>
-                      <Input
-                        id="email"
-                        placeholder="you@example.com"
-                        required
-                      />
-                    </FieldControl>
-                  </Field>
-                  <Field>
-                    <Label htmlFor="timezone">Timezone</Label>
-                    <FieldControl>
-                      <Select>
-                        <SelectTrigger id="timezone">
-                          <SelectValue placeholder="Select a timezone" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {timezones.map((timezone) => (
-                            <SelectGroup key={timezone.label}>
-                              <SelectLabel>{timezone.label}</SelectLabel>
-                              {timezone.timezones.map((time) => (
-                                <SelectItem key={time.value} value={time.value}>
-                                  {time.label}
-                                </SelectItem>
-                              ))}
-                            </SelectGroup>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </FieldControl>
-                  </Field>
-                </FieldGroup>
-              </form>
-            </CardContent>
-            <CardFooter className="border-t">
-              <Button type="submit" form="form-account" variant="secondary">
-                Save changes
-              </Button>
-            </CardFooter>
-          </Card>
-          <Card>
-            <CardHeader>
-              <CardTitle>Notifications</CardTitle>
-              <CardDescription>
-                Manage how you receive notifications.
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <form id="form-notifications" className="@container">
-                <FieldGroup>
-                  <Field>
-                    <Label htmlFor="channels">Notification Channels</Label>
-                    <FieldControl className="flex flex-col gap-2">
-                      <div className="flex items-center gap-2">
-                        <Checkbox id="notification-email" />
-                        <Label htmlFor="notification-email">Email</Label>
-                      </div>
-                      <div className="flex items-center gap-2">
-                        <Checkbox id="notification-sms" />
-                        <Label htmlFor="notification-sms">SMS</Label>
-                      </div>
-                      <div className="flex items-center gap-2">
-                        <Checkbox id="notification-push" />
-                        <Label htmlFor="notification-push">Push</Label>
-                      </div>
-                    </FieldControl>
-                    <FieldDescription>
-                      Choose how you want to receive notifications.
-                    </FieldDescription>
-                  </Field>
-                  <Field>
-                    <Label htmlFor="types">Notification Types</Label>
-                    <FieldControl className="flex flex-col gap-2">
-                      <div className="flex items-center gap-2">
-                        <Checkbox id="notification-account" />
-                        <Label htmlFor="notification-account">
-                          Account Activity
-                        </Label>
-                      </div>
-                      <div className="flex items-center gap-2">
-                        <Checkbox
-                          id="notification-security"
-                          defaultChecked
-                          disabled
-                        />
-                        <Label htmlFor="notification-security">
-                          Security Alerts
-                        </Label>
-                      </div>
-                      <div className="flex items-center gap-2">
-                        <Checkbox id="notification-marketing" />
-                        <Label htmlFor="notification-marketing">
-                          Marketing & Promotions
-                        </Label>
-                      </div>
-                    </FieldControl>
-                    <FieldDescription>
-                      Choose how you want to receive notifications.
-                    </FieldDescription>
-                  </Field>
-                </FieldGroup>
-              </form>
-            </CardContent>
-            <CardFooter className="border-t">
-              <Button
-                type="submit"
-                form="form-notifications"
-                variant="secondary"
-              >
-                Save changes
-              </Button>
-            </CardFooter>
-          </Card>
-        </TabsContent>
-        <TabsContent
-          value="security"
-          className="grid gap-6 @3xl/page:grid-cols-2"
-        >
-          <Card className="@3xl/page:col-span-2">
-            <CardHeader>
-              <CardTitle>Security Settings</CardTitle>
-              <CardDescription>
-                Make changes to your security settings here.
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="@container">
-              <form id="form-security">
-                <FieldGroup>
-                  <Field>
-                    <Label htmlFor="current-password">Current Password</Label>
-                    <FieldControl>
-                      <Input
-                        id="current-password"
-                        placeholder="Current password"
-                        required
-                      />
-                    </FieldControl>
-                    <FieldDescription>
-                      This is your current password.
-                    </FieldDescription>
-                  </Field>
-                  <Field>
-                    <Label htmlFor="new-password">New Password</Label>
-                    <FieldControl>
-                      <Input
-                        id="new-password"
-                        placeholder="New password"
-                        required
-                      />
-                    </FieldControl>
-                  </Field>
-                  <Field>
-                    <Label htmlFor="confirm-password">Confirm Password</Label>
-                    <FieldControl>
-                      <Input
-                        id="confirm-password"
-                        placeholder="Confirm password"
-                      />
-                    </FieldControl>
-                  </Field>
-                  <Field>
-                    <FieldControl>
-                      <Switch
-                        id="enable-two-factor-auth"
-                        className="self-start"
-                      />
-                    </FieldControl>
-                    <Label htmlFor="enable-two-factor-auth">
-                      Enable two-factor authentication
-                    </Label>
-                    <FieldDescription>
-                      This will add an extra layer of security to your account.
-                      Make this an extra long description to test the layout.
-                    </FieldDescription>
-                  </Field>
-                </FieldGroup>
-              </form>
-            </CardContent>
-            <CardFooter className="border-t">
-              <Button type="submit" form="form-security" variant="secondary">
-                Save changes
-              </Button>
-            </CardFooter>
-          </Card>
-          <Card>
-            <CardHeader>
-              <CardTitle>Login History</CardTitle>
-              <CardDescription>
-                Recent login activities on your account.
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>Date</TableHead>
-                    <TableHead className="hidden @md/page:table-cell">
-                      IP
-                    </TableHead>
-                    <TableHead>Location</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {loginHistory.map((login) => (
-                    <TableRow key={login.date}>
-                      <TableCell>
-                        <div className="flex flex-col gap-1">
-                          {new Date(login.date).toLocaleDateString("en-US", {
-                            year: "numeric",
-                            month: "long",
-                            day: "numeric",
-                          })}
-                          <span className="flex @md/page:hidden">
-                            {login.ip}
-                          </span>
-                        </div>
-                      </TableCell>
-                      <TableCell className="hidden @md/page:table-cell">
-                        {login.ip}
-                      </TableCell>
-                      <TableCell>{login.location}</TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </CardContent>
-          </Card>
-          <Card>
-            <CardHeader>
-              <CardTitle>Active Sessions</CardTitle>
-              <CardDescription>
-                Current active sessions on your account.
-              </CardDescription>
-              <CardAction>
-                <Button variant="outline" size="sm">
-                  <span className="hidden @md/card-header:block">
-                    Manage Sessions
-                  </span>
-                  <span className="block @md/card-header:hidden">Manage</span>
-                </Button>
-              </CardAction>
-            </CardHeader>
-            <CardContent>
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>Device</TableHead>
-                    <TableHead>Browser</TableHead>
-                    <TableHead>OS</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {activeSessions.map((session) => (
-                    <TableRow key={session.device}>
-                      <TableCell>{session.device}</TableCell>
-                      <TableCell>{session.browser}</TableCell>
-                      <TableCell>{session.os}</TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </CardContent>
-          </Card>
-        </TabsContent>
-      </Tabs>
-    </div>
-  )
-}
-
-function FieldGroup({ children }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="field-group"
-      className="@container/field-group flex max-w-4xl min-w-0 flex-col gap-8 @3xl:gap-6"
-    >
-      {children}
-    </div>
-  )
-}
-
-function Field({ children, className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="field"
-      className={cn(
-        "grid auto-rows-min items-start gap-3 *:data-[slot=label]:col-start-1 *:data-[slot=label]:row-start-1 @3xl/field-group:grid-cols-2 @3xl/field-group:gap-6",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}
-
-function FieldControl({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="field-control"
-      className={cn(
-        "@3xl/field-group:col-start-2 @3xl/field-group:row-span-2 @3xl/field-group:row-start-1 @3xl/field-group:self-start",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}
-
-function FieldDescription({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<"p">) {
-  return (
-    <p
-      data-slot="field-description"
-      className={cn(
-        "text-sm text-muted-foreground @3xl/field-group:col-start-1 @3xl/field-group:row-start-1 @3xl/field-group:translate-y-6",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </p>
-  )
-}
diff --git a/apps/v4/app/(examples)/dashboard/components/app-sidebar.tsx b/apps/v4/app/(examples)/dashboard/components/app-sidebar.tsx
deleted file mode 100644
index 62bf35cb11..0000000000
--- a/apps/v4/app/(examples)/dashboard/components/app-sidebar.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  IconCamera,
-  IconChartBar,
-  IconDashboard,
-  IconDatabase,
-  IconFileAi,
-  IconFileDescription,
-  IconFileWord,
-  IconFolder,
-  IconHelp,
-  IconInnerShadowTop,
-  IconListDetails,
-  IconReport,
-  IconSearch,
-  IconSettings,
-  IconUsers,
-} from "@tabler/icons-react"
-
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarHeader,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-} from "@/registry/new-york-v4/ui/sidebar"
-import { NavDocuments } from "@/app/(examples)/dashboard/components/nav-documents"
-import { NavMain } from "@/app/(examples)/dashboard/components/nav-main"
-import { NavSecondary } from "@/app/(examples)/dashboard/components/nav-secondary"
-import { NavUser } from "@/app/(examples)/dashboard/components/nav-user"
-
-const data = {
-  user: {
-    name: "shadcn",
-    email: "m@example.com",
-    avatar: "/avatars/shadcn.jpg",
-  },
-  navMain: [
-    {
-      title: "Dashboard",
-      url: "#",
-      icon: IconDashboard,
-    },
-    {
-      title: "Lifecycle",
-      url: "#",
-      icon: IconListDetails,
-    },
-    {
-      title: "Analytics",
-      url: "#",
-      icon: IconChartBar,
-    },
-    {
-      title: "Projects",
-      url: "#",
-      icon: IconFolder,
-    },
-    {
-      title: "Team",
-      url: "#",
-      icon: IconUsers,
-    },
-  ],
-  navClouds: [
-    {
-      title: "Capture",
-      icon: IconCamera,
-      isActive: true,
-      url: "#",
-      items: [
-        {
-          title: "Active Proposals",
-          url: "#",
-        },
-        {
-          title: "Archived",
-          url: "#",
-        },
-      ],
-    },
-    {
-      title: "Proposal",
-      icon: IconFileDescription,
-      url: "#",
-      items: [
-        {
-          title: "Active Proposals",
-          url: "#",
-        },
-        {
-          title: "Archived",
-          url: "#",
-        },
-      ],
-    },
-    {
-      title: "Prompts",
-      icon: IconFileAi,
-      url: "#",
-      items: [
-        {
-          title: "Active Proposals",
-          url: "#",
-        },
-        {
-          title: "Archived",
-          url: "#",
-        },
-      ],
-    },
-  ],
-  navSecondary: [
-    {
-      title: "Settings",
-      url: "#",
-      icon: IconSettings,
-    },
-    {
-      title: "Get Help",
-      url: "#",
-      icon: IconHelp,
-    },
-    {
-      title: "Search",
-      url: "#",
-      icon: IconSearch,
-    },
-  ],
-  documents: [
-    {
-      name: "Data Library",
-      url: "#",
-      icon: IconDatabase,
-    },
-    {
-      name: "Reports",
-      url: "#",
-      icon: IconReport,
-    },
-    {
-      name: "Word Assistant",
-      url: "#",
-      icon: IconFileWord,
-    },
-  ],
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-  return (
-    <Sidebar collapsible="offcanvas" {...props}>
-      <SidebarHeader>
-        <SidebarMenu>
-          <SidebarMenuItem>
-            <SidebarMenuButton
-              asChild
-              className="data-[slot=sidebar-menu-button]:p-1.5!"
-            >
-              <a href="#">
-                <IconInnerShadowTop className="size-5!" />
-                <span className="text-base font-semibold">Acme Inc.</span>
-              </a>
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-        </SidebarMenu>
-      </SidebarHeader>
-      <SidebarContent>
-        <NavMain items={data.navMain} />
-        <NavDocuments items={data.documents} />
-        <NavSecondary items={data.navSecondary} className="mt-auto" />
-      </SidebarContent>
-      <SidebarFooter>
-        <NavUser user={data.user} />
-      </SidebarFooter>
-    </Sidebar>
-  )
-}
diff --git a/apps/v4/app/(examples)/dashboard/components/chart-area-interactive.tsx b/apps/v4/app/(examples)/dashboard/components/chart-area-interactive.tsx
deleted file mode 100644
index cb6b5fc22e..0000000000
--- a/apps/v4/app/(examples)/dashboard/components/chart-area-interactive.tsx
+++ /dev/null
@@ -1,292 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
-
-import { useIsMobile } from "@/registry/new-york-v4/hooks/use-mobile"
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york-v4/ui/card"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  type ChartConfig,
-} from "@/registry/new-york-v4/ui/chart"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york-v4/ui/select"
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@/registry/new-york-v4/ui/toggle-group"
-
-export const description = "An interactive area chart"
-
-const chartData = [
-  { date: "2024-04-01", desktop: 222, mobile: 150 },
-  { date: "2024-04-02", desktop: 97, mobile: 180 },
-  { date: "2024-04-03", desktop: 167, mobile: 120 },
-  { date: "2024-04-04", desktop: 242, mobile: 260 },
-  { date: "2024-04-05", desktop: 373, mobile: 290 },
-  { date: "2024-04-06", desktop: 301, mobile: 340 },
-  { date: "2024-04-07", desktop: 245, mobile: 180 },
-  { date: "2024-04-08", desktop: 409, mobile: 320 },
-  { date: "2024-04-09", desktop: 59, mobile: 110 },
-  { date: "2024-04-10", desktop: 261, mobile: 190 },
-  { date: "2024-04-11", desktop: 327, mobile: 350 },
-  { date: "2024-04-12", desktop: 292, mobile: 210 },
-  { date: "2024-04-13", desktop: 342, mobile: 380 },
-  { date: "2024-04-14", desktop: 137, mobile: 220 },
-  { date: "2024-04-15", desktop: 120, mobile: 170 },
-  { date: "2024-04-16", desktop: 138, mobile: 190 },
-  { date: "2024-04-17", desktop: 446, mobile: 360 },
-  { date: "2024-04-18", desktop: 364, mobile: 410 },
-  { date: "2024-04-19", desktop: 243, mobile: 180 },
-  { date: "2024-04-20", desktop: 89, mobile: 150 },
-  { date: "2024-04-21", desktop: 137, mobile: 200 },
-  { date: "2024-04-22", desktop: 224, mobile: 170 },
-  { date: "2024-04-23", desktop: 138, mobile: 230 },
-  { date: "2024-04-24", desktop: 387, mobile: 290 },
-  { date: "2024-04-25", desktop: 215, mobile: 250 },
-  { date: "2024-04-26", desktop: 75, mobile: 130 },
-  { date: "2024-04-27", desktop: 383, mobile: 420 },
-  { date: "2024-04-28", desktop: 122, mobile: 180 },
-  { date: "2024-04-29", desktop: 315, mobile: 240 },
-  { date: "2024-04-30", desktop: 454, mobile: 380 },
-  { date: "2024-05-01", desktop: 165, mobile: 220 },
-  { date: "2024-05-02", desktop: 293, mobile: 310 },
-  { date: "2024-05-03", desktop: 247, mobile: 190 },
-  { date: "2024-05-04", desktop: 385, mobile: 420 },
-  { date: "2024-05-05", desktop: 481, mobile: 390 },
-  { date: "2024-05-06", desktop: 498, mobile: 520 },
-  { date: "2024-05-07", desktop: 388, mobile: 300 },
-  { date: "2024-05-08", desktop: 149, mobile: 210 },
-  { date: "2024-05-09", desktop: 227, mobile: 180 },
-  { date: "2024-05-10", desktop: 293, mobile: 330 },
-  { date: "2024-05-11", desktop: 335, mobile: 270 },
-  { date: "2024-05-12", desktop: 197, mobile: 240 },
-  { date: "2024-05-13", desktop: 197, mobile: 160 },
-  { date: "2024-05-14", desktop: 448, mobile: 490 },
-  { date: "2024-05-15", desktop: 473, mobile: 380 },
-  { date: "2024-05-16", desktop: 338, mobile: 400 },
-  { date: "2024-05-17", desktop: 499, mobile: 420 },
-  { date: "2024-05-18", desktop: 315, mobile: 350 },
-  { date: "2024-05-19", desktop: 235, mobile: 180 },
-  { date: "2024-05-20", desktop: 177, mobile: 230 },
-  { date: "2024-05-21", desktop: 82, mobile: 140 },
-  { date: "2024-05-22", desktop: 81, mobile: 120 },
-  { date: "2024-05-23", desktop: 252, mobile: 290 },
-  { date: "2024-05-24", desktop: 294, mobile: 220 },
-  { date: "2024-05-25", desktop: 201, mobile: 250 },
-  { date: "2024-05-26", desktop: 213, mobile: 170 },
-  { date: "2024-05-27", desktop: 420, mobile: 460 },
-  { date: "2024-05-28", desktop: 233, mobile: 190 },
-  { date: "2024-05-29", desktop: 78, mobile: 130 },
-  { date: "2024-05-30", desktop: 340, mobile: 280 },
-  { date: "2024-05-31", desktop: 178, mobile: 230 },
-  { date: "2024-06-01", desktop: 178, mobile: 200 },
-  { date: "2024-06-02", desktop: 470, mobile: 410 },
-  { date: "2024-06-03", desktop: 103, mobile: 160 },
-  { date: "2024-06-04", desktop: 439, mobile: 380 },
-  { date: "2024-06-05", desktop: 88, mobile: 140 },
-  { date: "2024-06-06", desktop: 294, mobile: 250 },
-  { date: "2024-06-07", desktop: 323, mobile: 370 },
-  { date: "2024-06-08", desktop: 385, mobile: 320 },
-  { date: "2024-06-09", desktop: 438, mobile: 480 },
-  { date: "2024-06-10", desktop: 155, mobile: 200 },
-  { date: "2024-06-11", desktop: 92, mobile: 150 },
-  { date: "2024-06-12", desktop: 492, mobile: 420 },
-  { date: "2024-06-13", desktop: 81, mobile: 130 },
-  { date: "2024-06-14", desktop: 426, mobile: 380 },
-  { date: "2024-06-15", desktop: 307, mobile: 350 },
-  { date: "2024-06-16", desktop: 371, mobile: 310 },
-  { date: "2024-06-17", desktop: 475, mobile: 520 },
-  { date: "2024-06-18", desktop: 107, mobile: 170 },
-  { date: "2024-06-19", desktop: 341, mobile: 290 },
-  { date: "2024-06-20", desktop: 408, mobile: 450 },
-  { date: "2024-06-21", desktop: 169, mobile: 210 },
-  { date: "2024-06-22", desktop: 317, mobile: 270 },
-  { date: "2024-06-23", desktop: 480, mobile: 530 },
-  { date: "2024-06-24", desktop: 132, mobile: 180 },
-  { date: "2024-06-25", desktop: 141, mobile: 190 },
-  { date: "2024-06-26", desktop: 434, mobile: 380 },
-  { date: "2024-06-27", desktop: 448, mobile: 490 },
-  { date: "2024-06-28", desktop: 149, mobile: 200 },
-  { date: "2024-06-29", desktop: 103, mobile: 160 },
-  { date: "2024-06-30", desktop: 446, mobile: 400 },
-]
-
-const chartConfig = {
-  visitors: {
-    label: "Visitors",
-  },
-  desktop: {
-    label: "Desktop",
-    color: "var(--primary)",
-  },
-  mobile: {
-    label: "Mobile",
-    color: "var(--primary)",
-  },
-} satisfies ChartConfig
-
-export function ChartAreaInteractive() {
-  const isMobile = useIsMobile()
-  const [timeRange, setTimeRange] = React.useState("90d")
-
-  React.useEffect(() => {
-    if (isMobile) {
-      setTimeRange("7d")
-    }
-  }, [isMobile])
-
-  const filteredData = chartData.filter((item) => {
-    const date = new Date(item.date)
-    const referenceDate = new Date("2024-06-30")
-    let daysToSubtract = 90
-    if (timeRange === "30d") {
-      daysToSubtract = 30
-    } else if (timeRange === "7d") {
-      daysToSubtract = 7
-    }
-    const startDate = new Date(referenceDate)
-    startDate.setDate(startDate.getDate() - daysToSubtract)
-    return date >= startDate
-  })
-
-  return (
-    <Card className="@container/card">
-      <CardHeader>
-        <CardTitle>Total Visitors</CardTitle>
-        <CardDescription>
-          <span className="hidden @[540px]/card:block">
-            Total for the last 3 months
-          </span>
-          <span className="@[540px]/card:hidden">Last 3 months</span>
-        </CardDescription>
-        <CardAction>
-          <ToggleGroup
-            type="single"
-            value={timeRange}
-            onValueChange={setTimeRange}
-            variant="outline"
-            className="hidden *:data-[slot=toggle-group-item]:px-4! @[767px]/card:flex"
-          >
-            <ToggleGroupItem value="90d">Last 3 months</ToggleGroupItem>
-            <ToggleGroupItem value="30d">Last 30 days</ToggleGroupItem>
-            <ToggleGroupItem value="7d">Last 7 days</ToggleGroupItem>
-          </ToggleGroup>
-          <Select value={timeRange} onValueChange={setTimeRange}>
-            <SelectTrigger
-              className="flex w-40 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate @[767px]/card:hidden"
-              size="sm"
-              aria-label="Select a value"
-            >
-              <SelectValue placeholder="Last 3 months" />
-            </SelectTrigger>
-            <SelectContent className="rounded-xl">
-              <SelectItem value="90d" className="rounded-lg">
-                Last 3 months
-              </SelectItem>
-              <SelectItem value="30d" className="rounded-lg">
-                Last 30 days
-              </SelectItem>
-              <SelectItem value="7d" className="rounded-lg">
-                Last 7 days
-              </SelectItem>
-            </SelectContent>
-          </Select>
-        </CardAction>
-      </CardHeader>
-      <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
-        <ChartContainer
-          config={chartConfig}
-          className="aspect-auto h-[250px] w-full"
-        >
-          <AreaChart data={filteredData}>
-            <defs>
-              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
-                <stop
-                  offset="5%"
-                  stopColor="var(--color-desktop)"
-                  stopOpacity={1.0}
-                />
-                <stop
-                  offset="95%"
-                  stopColor="var(--color-desktop)"
-                  stopOpacity={0.1}
-                />
-              </linearGradient>
-              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
-                <stop
-                  offset="5%"
-                  stopColor="var(--color-mobile)"
-                  stopOpacity={0.8}
-                />
-                <stop
-                  offset="95%"
-                  stopColor="var(--color-mobile)"
-                  stopOpacity={0.1}
-                />
-              </linearGradient>
-            </defs>
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey="date"
-              tickLine={false}
-              axisLine={false}
-              tickMargin={8}
-              minTickGap={32}
-              tickFormatter={(value) => {
-                const date = new Date(value)
-                return date.toLocaleDateString("en-US", {
-                  month: "short",
-                  day: "numeric",
-                })
-              }}
-            />
-            <ChartTooltip
-              cursor={false}
-              defaultIndex={isMobile ? -1 : 10}
-              content={
-                <ChartTooltipContent
-                  labelFormatter={(value) => {
-                    return new Date(value).toLocaleDateString("en-US", {
-                      month: "short",
-                      day: "numeric",
-                    })
-                  }}
-                  indicator="dot"
-                />
-              }
-            />
-            <Area
-              dataKey="mobile"
-              type="natural"
-              fill="url(#fillMobile)"
-              stroke="var(--color-mobile)"
-              stackId="a"
-            />
-            <Area
-              dataKey="desktop"
-              type="natural"
-              fill="url(#fillDesktop)"
-              stroke="var(--color-desktop)"
-              stackId="a"
-            />
-          </AreaChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/v4/app/(examples)/dashboard/components/data-table.tsx b/apps/v4/app/(examples)/dashboard/components/data-table.tsx
deleted file mode 100644
index def0a697fe..0000000000
--- a/apps/v4/app/(examples)/dashboard/components/data-table.tsx
+++ /dev/null
@@ -1,807 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  closestCenter,
-  DndContext,
-  KeyboardSensor,
-  MouseSensor,
-  TouchSensor,
-  useSensor,
-  useSensors,
-  type DragEndEvent,
-  type UniqueIdentifier,
-} from "@dnd-kit/core"
-import { restrictToVerticalAxis } from "@dnd-kit/modifiers"
-import {
-  arrayMove,
-  SortableContext,
-  useSortable,
-  verticalListSortingStrategy,
-} from "@dnd-kit/sortable"
-import { CSS } from "@dnd-kit/utilities"
-import {
-  IconChevronDown,
-  IconChevronLeft,
-  IconChevronRight,
-  IconChevronsLeft,
-  IconChevronsRight,
-  IconCircleCheckFilled,
-  IconDotsVertical,
-  IconGripVertical,
-  IconLayoutColumns,
-  IconLoader,
-  IconPlus,
-  IconTrendingUp,
-} from "@tabler/icons-react"
-import {
-  flexRender,
-  getCoreRowModel,
-  getFacetedRowModel,
-  getFacetedUniqueValues,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-  type ColumnDef,
-  type ColumnFiltersState,
-  type Row,
-  type SortingState,
-  type VisibilityState,
-} from "@tanstack/react-table"
-import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
-import { toast } from "sonner"
-import { z } from "zod"
-
-import { useIsMobile } from "@/registry/new-york-v4/hooks/use-mobile"
-import { Badge } from "@/registry/new-york-v4/ui/badge"
-import { Button } from "@/registry/new-york-v4/ui/button"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  type ChartConfig,
-} from "@/registry/new-york-v4/ui/chart"
-import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "@/registry/new-york-v4/ui/drawer"
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/new-york-v4/ui/dropdown-menu"
-import { Input } from "@/registry/new-york-v4/ui/input"
-import { Label } from "@/registry/new-york-v4/ui/label"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york-v4/ui/select"
-import { Separator } from "@/registry/new-york-v4/ui/separator"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/new-york-v4/ui/table"
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/registry/new-york-v4/ui/tabs"
-
-export const schema = z.object({
-  id: z.number(),
-  header: z.string(),
-  type: z.string(),
-  status: z.string(),
-  target: z.string(),
-  limit: z.string(),
-  reviewer: z.string(),
-})
-
-// Create a separate component for the drag handle
-function DragHandle({ id }: { id: number }) {
-  const { attributes, listeners } = useSortable({
-    id,
-  })
-
-  return (
-    <Button
-      {...attributes}
-      {...listeners}
-      variant="ghost"
-      size="icon"
-      className="size-7 text-muted-foreground hover:bg-transparent"
-    >
-      <IconGripVertical className="size-3 text-muted-foreground" />
-      <span className="sr-only">Drag to reorder</span>
-    </Button>
-  )
-}
-
-const columns: ColumnDef<z.infer<typeof schema>>[] = [
-  {
-    id: "drag",
-    header: () => null,
-    cell: ({ row }) => <DragHandle id={row.original.id} />,
-  },
-  {
-    id: "select",
-    header: ({ table }) => (
-      <div className="flex items-center justify-center">
-        <Checkbox
-          checked={
-            table.getIsAllPageRowsSelected() ||
-            (table.getIsSomePageRowsSelected() && "indeterminate")
-          }
-          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-          aria-label="Select all"
-        />
-      </div>
-    ),
-    cell: ({ row }) => (
-      <div className="flex items-center justify-center">
-        <Checkbox
-          checked={row.getIsSelected()}
-          onCheckedChange={(value) => row.toggleSelected(!!value)}
-          aria-label="Select row"
-        />
-      </div>
-    ),
-    enableSorting: false,
-    enableHiding: false,
-  },
-  {
-    accessorKey: "header",
-    header: "Header",
-    cell: ({ row }) => {
-      return <TableCellViewer item={row.original} />
-    },
-    enableHiding: false,
-  },
-  {
-    accessorKey: "type",
-    header: "Section Type",
-    cell: ({ row }) => (
-      <div className="w-32">
-        <Badge variant="outline" className="px-1.5 text-muted-foreground">
-          {row.original.type}
-        </Badge>
-      </div>
-    ),
-  },
-  {
-    accessorKey: "status",
-    header: "Status",
-    cell: ({ row }) => (
-      <Badge variant="outline" className="px-1.5 text-muted-foreground">
-        {row.original.status === "Done" ? (
-          <IconCircleCheckFilled className="fill-green-500 dark:fill-green-400" />
-        ) : (
-          <IconLoader />
-        )}
-        {row.original.status}
-      </Badge>
-    ),
-  },
-  {
-    accessorKey: "target",
-    header: () => <div className="w-full text-right">Target</div>,
-    cell: ({ row }) => (
-      <form
-        onSubmit={(e) => {
-          e.preventDefault()
-          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {
-            loading: `Saving ${row.original.header}`,
-            success: "Done",
-            error: "Error",
-          })
-        }}
-      >
-        <Label htmlFor={`${row.original.id}-target`} className="sr-only">
-          Target
-        </Label>
-        <Input
-          className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30"
-          defaultValue={row.original.target}
-          id={`${row.original.id}-target`}
-        />
-      </form>
-    ),
-  },
-  {
-    accessorKey: "limit",
-    header: () => <div className="w-full text-right">Limit</div>,
-    cell: ({ row }) => (
-      <form
-        onSubmit={(e) => {
-          e.preventDefault()
-          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {
-            loading: `Saving ${row.original.header}`,
-            success: "Done",
-            error: "Error",
-          })
-        }}
-      >
-        <Label htmlFor={`${row.original.id}-limit`} className="sr-only">
-          Limit
-        </Label>
-        <Input
-          className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30"
-          defaultValue={row.original.limit}
-          id={`${row.original.id}-limit`}
-        />
-      </form>
-    ),
-  },
-  {
-    accessorKey: "reviewer",
-    header: "Reviewer",
-    cell: ({ row }) => {
-      const isAssigned = row.original.reviewer !== "Assign reviewer"
-
-      if (isAssigned) {
-        return row.original.reviewer
-      }
-
-      return (
-        <>
-          <Label htmlFor={`${row.original.id}-reviewer`} className="sr-only">
-            Reviewer
-          </Label>
-          <Select>
-            <SelectTrigger
-              className="w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate"
-              size="sm"
-              id={`${row.original.id}-reviewer`}
-            >
-              <SelectValue placeholder="Assign reviewer" />
-            </SelectTrigger>
-            <SelectContent align="end">
-              <SelectItem value="Eddie Lake">Eddie Lake</SelectItem>
-              <SelectItem value="Jamik Tashpulatov">
-                Jamik Tashpulatov
-              </SelectItem>
-            </SelectContent>
-          </Select>
-        </>
-      )
-    },
-  },
-  {
-    id: "actions",
-    cell: () => (
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant="ghost"
-            className="flex size-8 text-muted-foreground data-[state=open]:bg-muted"
-            size="icon"
-          >
-            <IconDotsVertical />
-            <span className="sr-only">Open menu</span>
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="w-32">
-          <DropdownMenuItem>Edit</DropdownMenuItem>
-          <DropdownMenuItem>Make a copy</DropdownMenuItem>
-          <DropdownMenuItem>Favorite</DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    ),
-  },
-]
-
-function DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {
-  const { transform, transition, setNodeRef, isDragging } = useSortable({
-    id: row.original.id,
-  })
-
-  return (
-    <TableRow
-      data-state={row.getIsSelected() && "selected"}
-      data-dragging={isDragging}
-      ref={setNodeRef}
-      className="relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80"
-      style={{
-        transform: CSS.Transform.toString(transform),
-        transition: transition,
-      }}
-    >
-      {row.getVisibleCells().map((cell) => (
-        <TableCell key={cell.id}>
-          {flexRender(cell.column.columnDef.cell, cell.getContext())}
-        </TableCell>
-      ))}
-    </TableRow>
-  )
-}
-
-export function DataTable({
-  data: initialData,
-}: {
-  data: z.infer<typeof schema>[]
-}) {
-  const [data, setData] = React.useState(() => initialData)
-  const [rowSelection, setRowSelection] = React.useState({})
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({})
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  )
-  const [sorting, setSorting] = React.useState<SortingState>([])
-  const [pagination, setPagination] = React.useState({
-    pageIndex: 0,
-    pageSize: 10,
-  })
-  const sortableId = React.useId()
-  const sensors = useSensors(
-    useSensor(MouseSensor, {}),
-    useSensor(TouchSensor, {}),
-    useSensor(KeyboardSensor, {})
-  )
-
-  const dataIds = React.useMemo<UniqueIdentifier[]>(
-    () => data?.map(({ id }) => id) || [],
-    [data]
-  )
-
-  const table = useReactTable({
-    data,
-    columns,
-    state: {
-      sorting,
-      columnVisibility,
-      rowSelection,
-      columnFilters,
-      pagination,
-    },
-    getRowId: (row) => row.id.toString(),
-    enableRowSelection: true,
-    onRowSelectionChange: setRowSelection,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    onColumnVisibilityChange: setColumnVisibility,
-    onPaginationChange: setPagination,
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFacetedRowModel: getFacetedRowModel(),
-    getFacetedUniqueValues: getFacetedUniqueValues(),
-  })
-
-  function handleDragEnd(event: DragEndEvent) {
-    const { active, over } = event
-    if (active && over && active.id !== over.id) {
-      setData((data) => {
-        const oldIndex = dataIds.indexOf(active.id)
-        const newIndex = dataIds.indexOf(over.id)
-        return arrayMove(data, oldIndex, newIndex)
-      })
-    }
-  }
-
-  return (
-    <Tabs
-      defaultValue="outline"
-      className="w-full flex-col justify-start gap-6"
-    >
-      <div className="flex items-center justify-between px-4 lg:px-6">
-        <Label htmlFor="view-selector" className="sr-only">
-          View
-        </Label>
-        <Select defaultValue="outline">
-          <SelectTrigger
-            className="flex w-fit @4xl/main:hidden"
-            size="sm"
-            id="view-selector"
-          >
-            <SelectValue placeholder="Select a view" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="outline">Outline</SelectItem>
-            <SelectItem value="past-performance">Past Performance</SelectItem>
-            <SelectItem value="key-personnel">Key Personnel</SelectItem>
-            <SelectItem value="focus-documents">Focus Documents</SelectItem>
-          </SelectContent>
-        </Select>
-        <TabsList className="hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:bg-muted-foreground/30 **:data-[slot=badge]:px-1 @4xl/main:flex">
-          <TabsTrigger value="outline">Outline</TabsTrigger>
-          <TabsTrigger value="past-performance">
-            Past Performance <Badge variant="secondary">3</Badge>
-          </TabsTrigger>
-          <TabsTrigger value="key-personnel">
-            Key Personnel <Badge variant="secondary">2</Badge>
-          </TabsTrigger>
-          <TabsTrigger value="focus-documents">Focus Documents</TabsTrigger>
-        </TabsList>
-        <div className="flex items-center gap-2">
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="outline" size="sm">
-                <IconLayoutColumns />
-                <span className="hidden lg:inline">Customize Columns</span>
-                <span className="lg:hidden">Columns</span>
-                <IconChevronDown />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-56">
-              {table
-                .getAllColumns()
-                .filter(
-                  (column) =>
-                    typeof column.accessorFn !== "undefined" &&
-                    column.getCanHide()
-                )
-                .map((column) => {
-                  return (
-                    <DropdownMenuCheckboxItem
-                      key={column.id}
-                      className="capitalize"
-                      checked={column.getIsVisible()}
-                      onCheckedChange={(value) =>
-                        column.toggleVisibility(!!value)
-                      }
-                    >
-                      {column.id}
-                    </DropdownMenuCheckboxItem>
-                  )
-                })}
-            </DropdownMenuContent>
-          </DropdownMenu>
-          <Button variant="outline" size="sm">
-            <IconPlus />
-            <span className="hidden lg:inline">Add Section</span>
-          </Button>
-        </div>
-      </div>
-      <TabsContent
-        value="outline"
-        className="relative flex flex-col gap-4 overflow-auto px-4 lg:px-6"
-      >
-        <div className="overflow-hidden rounded-lg border">
-          <DndContext
-            collisionDetection={closestCenter}
-            modifiers={[restrictToVerticalAxis]}
-            onDragEnd={handleDragEnd}
-            sensors={sensors}
-            id={sortableId}
-          >
-            <Table>
-              <TableHeader className="sticky top-0 z-10 bg-muted">
-                {table.getHeaderGroups().map((headerGroup) => (
-                  <TableRow key={headerGroup.id}>
-                    {headerGroup.headers.map((header) => {
-                      return (
-                        <TableHead key={header.id} colSpan={header.colSpan}>
-                          {header.isPlaceholder
-                            ? null
-                            : flexRender(
-                                header.column.columnDef.header,
-                                header.getContext()
-                              )}
-                        </TableHead>
-                      )
-                    })}
-                  </TableRow>
-                ))}
-              </TableHeader>
-              <TableBody className="**:data-[slot=table-cell]:first:w-8">
-                {table.getRowModel().rows?.length ? (
-                  <SortableContext
-                    items={dataIds}
-                    strategy={verticalListSortingStrategy}
-                  >
-                    {table.getRowModel().rows.map((row) => (
-                      <DraggableRow key={row.id} row={row} />
-                    ))}
-                  </SortableContext>
-                ) : (
-                  <TableRow>
-                    <TableCell
-                      colSpan={columns.length}
-                      className="h-24 text-center"
-                    >
-                      No results.
-                    </TableCell>
-                  </TableRow>
-                )}
-              </TableBody>
-            </Table>
-          </DndContext>
-        </div>
-        <div className="flex items-center justify-between px-4">
-          <div className="hidden flex-1 text-sm text-muted-foreground lg:flex">
-            {table.getFilteredSelectedRowModel().rows.length} of{" "}
-            {table.getFilteredRowModel().rows.length} row(s) selected.
-          </div>
-          <div className="flex w-full items-center gap-8 lg:w-fit">
-            <div className="hidden items-center gap-2 lg:flex">
-              <Label htmlFor="rows-per-page" className="text-sm font-medium">
-                Rows per page
-              </Label>
-              <Select
-                value={`${table.getState().pagination.pageSize}`}
-                onValueChange={(value) => {
-                  table.setPageSize(Number(value))
-                }}
-              >
-                <SelectTrigger size="sm" className="w-20" id="rows-per-page">
-                  <SelectValue
-                    placeholder={table.getState().pagination.pageSize}
-                  />
-                </SelectTrigger>
-                <SelectContent side="top">
-                  {[10, 20, 30, 40, 50].map((pageSize) => (
-                    <SelectItem key={pageSize} value={`${pageSize}`}>
-                      {pageSize}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="flex w-fit items-center justify-center text-sm font-medium">
-              Page {table.getState().pagination.pageIndex + 1} of{" "}
-              {table.getPageCount()}
-            </div>
-            <div className="ml-auto flex items-center gap-2 lg:ml-0">
-              <Button
-                variant="outline"
-                className="hidden h-8 w-8 p-0 lg:flex"
-                onClick={() => table.setPageIndex(0)}
-                disabled={!table.getCanPreviousPage()}
-              >
-                <span className="sr-only">Go to first page</span>
-                <IconChevronsLeft />
-              </Button>
-              <Button
-                variant="outline"
-                className="size-8"
-                size="icon"
-                onClick={() => table.previousPage()}
-                disabled={!table.getCanPreviousPage()}
-              >
-                <span className="sr-only">Go to previous page</span>
-                <IconChevronLeft />
-              </Button>
-              <Button
-                variant="outline"
-                className="size-8"
-                size="icon"
-                onClick={() => table.nextPage()}
-                disabled={!table.getCanNextPage()}
-              >
-                <span className="sr-only">Go to next page</span>
-                <IconChevronRight />
-              </Button>
-              <Button
-                variant="outline"
-                className="hidden size-8 lg:flex"
-                size="icon"
-                onClick={() => table.setPageIndex(table.getPageCount() - 1)}
-                disabled={!table.getCanNextPage()}
-              >
-                <span className="sr-only">Go to last page</span>
-                <IconChevronsRight />
-              </Button>
-            </div>
-          </div>
-        </div>
-      </TabsContent>
-      <TabsContent
-        value="past-performance"
-        className="flex flex-col px-4 lg:px-6"
-      >
-        <div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
-      </TabsContent>
-      <TabsContent value="key-personnel" className="flex flex-col px-4 lg:px-6">
-        <div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
-      </TabsContent>
-      <TabsContent
-        value="focus-documents"
-        className="flex flex-col px-4 lg:px-6"
-      >
-        <div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
-      </TabsContent>
-    </Tabs>
-  )
-}
-
-const chartData = [
-  { month: "January", desktop: 186, mobile: 80 },
-  { month: "February", desktop: 305, mobile: 200 },
-  { month: "March", desktop: 237, mobile: 120 },
-  { month: "April", desktop: 73, mobile: 190 },
-  { month: "May", desktop: 209, mobile: 130 },
-  { month: "June", desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-  desktop: {
-    label: "Desktop",
-    color: "var(--primary)",
-  },
-  mobile: {
-    label: "Mobile",
-    color: "var(--primary)",
-  },
-} satisfies ChartConfig
-
-function TableCellViewer({ item }: { item: z.infer<typeof schema> }) {
-  const isMobile = useIsMobile()
-
-  return (
-    <Drawer direction={isMobile ? "bottom" : "right"}>
-      <DrawerTrigger asChild>
-        <Button variant="link" className="w-fit px-0 text-left text-foreground">
-          {item.header}
-        </Button>
-      </DrawerTrigger>
-      <DrawerContent>
-        <DrawerHeader className="gap-1">
-          <DrawerTitle>{item.header}</DrawerTitle>
-          <DrawerDescription>
-            Showing total visitors for the last 6 months
-          </DrawerDescription>
-        </DrawerHeader>
-        <div className="flex flex-col gap-4 overflow-y-auto px-4 text-sm">
-          {!isMobile && (
-            <>
-              <ChartContainer config={chartConfig}>
-                <AreaChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                    left: 0,
-                    right: 10,
-                  }}
-                >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                    dataKey="month"
-                    tickLine={false}
-                    axisLine={false}
-                    tickMargin={8}
-                    tickFormatter={(value) => value.slice(0, 3)}
-                    hide
-                  />
-                  <ChartTooltip
-                    cursor={false}
-                    content={<ChartTooltipContent indicator="dot" />}
-                  />
-                  <Area
-                    dataKey="mobile"
-                    type="natural"
-                    fill="var(--color-mobile)"
-                    fillOpacity={0.6}
-                    stroke="var(--color-mobile)"
-                    stackId="a"
-                  />
-                  <Area
-                    dataKey="desktop"
-                    type="natural"
-                    fill="var(--color-desktop)"
-                    fillOpacity={0.4}
-                    stroke="var(--color-desktop)"
-                    stackId="a"
-                  />
-                </AreaChart>
-              </ChartContainer>
-              <Separator />
-              <div className="grid gap-2">
-                <div className="flex gap-2 leading-none font-medium">
-                  Trending up by 5.2% this month{" "}
-                  <IconTrendingUp className="size-4" />
-                </div>
-                <div className="text-muted-foreground">
-                  Showing total visitors for the last 6 months. This is just
-                  some random text to test the layout. It spans multiple lines
-                  and should wrap around.
-                </div>
-              </div>
-              <Separator />
-            </>
-          )}
-          <form className="flex flex-col gap-4">
-            <div className="flex flex-col gap-3">
-              <Label htmlFor="header">Header</Label>
-              <Input id="header" defaultValue={item.header} />
-            </div>
-            <div className="grid grid-cols-2 gap-4">
-              <div className="flex flex-col gap-3">
-                <Label htmlFor="type">Type</Label>
-                <Select defaultValue={item.type}>
-                  <SelectTrigger id="type" className="w-full">
-                    <SelectValue placeholder="Select a type" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="Table of Contents">
-                      Table of Contents
-                    </SelectItem>
-                    <SelectItem value="Executive Summary">
-                      Executive Summary
-                    </SelectItem>
-                    <SelectItem value="Technical Approach">
-                      Technical Approach
-                    </SelectItem>
-                    <SelectItem value="Design">Design</SelectItem>
-                    <SelectItem value="Capabilities">Capabilities</SelectItem>
-                    <SelectItem value="Focus Documents">
-                      Focus Documents
-                    </SelectItem>
-                    <SelectItem value="Narrative">Narrative</SelectItem>
-                    <SelectItem value="Cover Page">Cover Page</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="flex flex-col gap-3">
-                <Label htmlFor="status">Status</Label>
-                <Select defaultValue={item.status}>
-                  <SelectTrigger id="status" className="w-full">
-                    <SelectValue placeholder="Select a status" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="Done">Done</SelectItem>
-                    <SelectItem value="In Progress">In Progress</SelectItem>
-                    <SelectItem value="Not Started">Not Started</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-            <div className="grid grid-cols-2 gap-4">
-              <div className="flex flex-col gap-3">
-                <Label htmlFor="target">Target</Label>
-                <Input id="target" defaultValue={item.target} />
-              </div>
-              <div className="flex flex-col gap-3">
-                <Label htmlFor="limit">Limit</Label>
-                <Input id="limit" defaultValue={item.limit} />
-              </div>
-            </div>
-            <div className="flex flex-col gap-3">
-              <Label htmlFor="reviewer">Reviewer</Label>
-              <Select defaultValue={item.reviewer}>
-                <SelectTrigger id="reviewer" className="w-full">
-                  <SelectValue placeholder="Select a reviewer" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="Eddie Lake">Eddie Lake</SelectItem>
-                  <SelectItem value="Jamik Tashpulatov">
-                    Jamik Tashpulatov
-                  </SelectItem>
-                  <SelectItem value="Emily Whalen">Emily Whalen</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-          </form>
-        </div>
-        <DrawerFooter>
-          <Button>Submit</Button>
-          <DrawerClose asChild>
-            <Button variant="outline">Done</Button>
-          </DrawerClose>
-        </DrawerFooter>
-      </DrawerContent>
-    </Drawer>
-  )
-}
diff --git a/apps/v4/app/(examples)/dashboard/components/mode-toggle.tsx b/apps/v4/app/(examples)/dashboard/components/mode-toggle.tsx
deleted file mode 100644
index 29c689878f..0000000000
--- a/apps/v4/app/(examples)/dashboard/components/mode-toggle.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { IconBrightness } from "@tabler/icons-react"
-import { useTheme } from "next-themes"
-
-import { Button } from "@/registry/new-york-v4/ui/button"
-
-export function ModeToggle() {
-  const { setTheme, resolvedTheme } = useTheme()
-
-  const toggleTheme = React.useCallback(() => {
-    setTheme(resolvedTheme === "dark" ? "light" : "dark")
-  }, [resolvedTheme, setTheme])
-
-  return (
-    <Button
-      variant="secondary"
-      size="icon"
-      className="group/toggle size-8"
-      onClick={toggleTheme}
-    >
-      <IconBrightness />
-      <span className="sr-only">Toggle theme</span>
-    </Button>
-  )
-}
diff --git a/apps/v4/app/(examples)/dashboard/components/nav-documents.tsx b/apps/v4/app/(examples)/dashboard/components/nav-documents.tsx
deleted file mode 100644
index 5a09c82b28..0000000000
--- a/apps/v4/app/(examples)/dashboard/components/nav-documents.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-"use client"
-
-import {
-  IconDots,
-  IconFolder,
-  IconShare3,
-  IconTrash,
-  type Icon,
-} from "@tabler/icons-react"
-
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/new-york-v4/ui/dropdown-menu"
-import {
-  SidebarGroup,
-  SidebarGroupLabel,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  useSidebar,
-} from "@/registry/new-york-v4/ui/sidebar"
-
-export function NavDocuments({
-  items,
-}: {
-  items: {
-    name: string
-    url: string
-    icon: Icon
-  }[]
-}) {
-  const { isMobile } = useSidebar()
-
-  return (
-    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
-      <SidebarGroupLabel>Documents</SidebarGroupLabel>
-      <SidebarMenu>
-        {items.map((item) => (
-          <SidebarMenuItem key={item.name}>
-            <SidebarMenuButton asChild>
-              <a href={item.url}>
-                <item.icon />
-                <span>{item.name}</span>
-              </a>
-            </SidebarMenuButton>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <SidebarMenuAction
-                  showOnHover
-                  className="rounded-sm data-[state=open]:bg-accent"
-                >
-                  <IconDots />
-                  <span className="sr-only">More</span>
-                </SidebarMenuAction>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent
-                className="w-24 rounded-lg"
-                side={isMobile ? "bottom" : "right"}
-                align={isMobile ? "end" : "start"}
-              >
-                <DropdownMenuItem>
-                  <IconFolder />
-                  <span>Open</span>
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <IconShare3 />
-                  <span>Share</span>
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem variant="destructive">
-                  <IconTrash />
-                  <span>Delete</span>
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </SidebarMenuItem>
-        ))}
-        <SidebarMenuItem>
-          <SidebarMenuButton className="text-sidebar-foreground/70">
-            <IconDots className="text-sidebar-foreground/70" />
-            <span>More</span>
-          </SidebarMenuButton>
-        </SidebarMenuItem>
-      </SidebarMenu>
-    </SidebarGroup>
-  )
-}
diff --git a/apps/v4/app/(examples)/dashboard/components/nav-main.tsx b/apps/v4/app/(examples)/dashboard/components/nav-main.tsx
deleted file mode 100644
index 3fcecdd1a0..0000000000
--- a/apps/v4/app/(examples)/dashboard/components/nav-main.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-"use client"
-
-import { IconCirclePlusFilled, IconMail, type Icon } from "@tabler/icons-react"
-
-import { Button } from "@/registry/new-york-v4/ui/button"
-import {
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-} from "@/registry/new-york-v4/ui/sidebar"
-
-export function NavMain({
-  items,
-}: {
-  items: {
-    title: string
-    url: string
-    icon?: Icon
-  }[]
-}) {
-  return (
-    <SidebarGroup>
-      <SidebarGroupContent className="flex flex-col gap-2">
-        <SidebarMenu>
-          <SidebarMenuItem className="flex items-center gap-2">
-            <SidebarMenuButton
-              tooltip="Quick Create"
-              className="min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground"
-            >
-              <IconCirclePlusFilled />
-              <span>Quick Create</span>
-            </SidebarMenuButton>
-            <Button
-              size="icon"
-              className="size-8 group-data-[collapsible=icon]:opacity-0"
-              variant="outline"
-            >
-              <IconMail />
-              <span className="sr-only">Inbox</span>
-            </Button>
-          </SidebarMenuItem>
-        </SidebarMenu>
-        <SidebarMenu>
-          {items.map((item) => (
-            <SidebarMenuItem key={item.title}>
-              <SidebarMenuButton tooltip={item.title}>
-                {item.icon && <item.icon />}
-                <span>{item.title}</span>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-          ))}
-        </SidebarMenu>
-      </SidebarGroupContent>
-    </SidebarGroup>
-  )
-}
diff --git a/apps/v4/app/(examples)/dashboard/components/nav-secondary.tsx b/apps/v4/app/(examples)/dashboard/components/nav-secondary.tsx
deleted file mode 100644
index e5177a9693..0000000000
--- a/apps/v4/app/(examples)/dashboard/components/nav-secondary.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { IconBrightness, type Icon } from "@tabler/icons-react"
-import { useTheme } from "next-themes"
-
-import {
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-} from "@/registry/new-york-v4/ui/sidebar"
-import { Skeleton } from "@/registry/new-york-v4/ui/skeleton"
-import { Switch } from "@/registry/new-york-v4/ui/switch"
-
-export function NavSecondary({
-  items,
-  ...props
-}: {
-  items: {
-    title: string
-    url: string
-    icon: Icon
-  }[]
-} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
-  const { resolvedTheme, setTheme } = useTheme()
-  const [mounted, setMounted] = React.useState(false)
-
-  React.useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  return (
-    <SidebarGroup {...props}>
-      <SidebarGroupContent>
-        <SidebarMenu>
-          {items.map((item) => (
-            <SidebarMenuItem key={item.title}>
-              <SidebarMenuButton asChild>
-                <a href={item.url}>
-                  <item.icon />
-                  <span>{item.title}</span>
-                </a>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-          ))}
-          <SidebarMenuItem className="group-data-[collapsible=icon]:hidden">
-            <SidebarMenuButton asChild>
-              <label>
-                <IconBrightness />
-                <span>Dark Mode</span>
-                {mounted ? (
-                  <Switch
-                    className="ml-auto"
-                    checked={resolvedTheme !== "light"}
-                    onCheckedChange={() =>
-                      setTheme(resolvedTheme === "dark" ? "light" : "dark")
-                    }
-                  />
-                ) : (
-                  <Skeleton className="ml-auto h-4 w-8 rounded-full" />
-                )}
-              </label>
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-        </SidebarMenu>
-      </SidebarGroupContent>
-    </SidebarGroup>
-  )
-}
diff --git a/apps/v4/app/(examples)/dashboard/components/nav-user.tsx b/apps/v4/app/(examples)/dashboard/components/nav-user.tsx
deleted file mode 100644
index bdb066d28e..0000000000
--- a/apps/v4/app/(examples)/dashboard/components/nav-user.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-"use client"
-
-import {
-  IconCreditCard,
-  IconDotsVertical,
-  IconLogout,
-  IconNotification,
-  IconUserCircle,
-} from "@tabler/icons-react"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/new-york-v4/ui/avatar"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/new-york-v4/ui/dropdown-menu"
-import {
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  useSidebar,
-} from "@/registry/new-york-v4/ui/sidebar"
-
-export function NavUser({
-  user,
-}: {
-  user: {
-    name: string
-    email: string
-    avatar: string
-  }
-}) {
-  const { isMobile } = useSidebar()
-
-  return (
-    <SidebarMenu>
-      <SidebarMenuItem>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <SidebarMenuButton
-              size="lg"
-              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-            >
-              <Avatar className="h-8 w-8 rounded-lg grayscale">
-                <AvatarImage src={user.avatar} alt={user.name} />
-                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-              </Avatar>
-              <div className="grid flex-1 text-left text-sm leading-tight">
-                <span className="truncate font-medium">{user.name}</span>
-                <span className="truncate text-xs text-muted-foreground">
-                  {user.email}
-                </span>
-              </div>
-              <IconDotsVertical className="ml-auto size-4" />
-            </SidebarMenuButton>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
-            side={isMobile ? "bottom" : "right"}
-            align="end"
-            sideOffset={4}
-          >
-            <DropdownMenuLabel className="p-0 font-normal">
-              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                <Avatar className="h-8 w-8 rounded-lg">
-                  <AvatarImage src={user.avatar} alt={user.name} />
-                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                </Avatar>
-                <div className="grid flex-1 text-left text-sm leading-tight">
-                  <span className="truncate font-medium">{user.name}</span>
-                  <span className="truncate text-xs text-muted-foreground">
-                    {user.email}
-                  </span>
-                </div>
-              </div>
-            </DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <DropdownMenuItem>
-                <IconUserCircle />
-                Account
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <IconCreditCard />
-                Billing
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <IconNotification />
-                Notifications
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem>
-              <IconLogout />
-              Log out
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </SidebarMenuItem>
-    </SidebarMenu>
-  )
-}
diff --git a/apps/v4/app/(examples)/dashboard/components/section-cards.tsx b/apps/v4/app/(examples)/dashboard/components/section-cards.tsx
deleted file mode 100644
index 8419b5e92a..0000000000
--- a/apps/v4/app/(examples)/dashboard/components/section-cards.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { IconTrendingDown, IconTrendingUp } from "@tabler/icons-react"
-
-import { Badge } from "@/registry/new-york-v4/ui/badge"
-import {
-  Card,
-  CardAction,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york-v4/ui/card"
-
-export function SectionCards() {
-  return (
-    <div className="grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4 dark:*:data-[slot=card]:bg-card">
-      <Card className="@container/card">
-        <CardHeader>
-          <CardDescription>Total Revenue</CardDescription>
-          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
-            $1,250.00
-          </CardTitle>
-          <CardAction>
-            <Badge variant="outline">
-              <IconTrendingUp />
-              +12.5%
-            </Badge>
-          </CardAction>
-        </CardHeader>
-        <CardFooter className="flex-col items-start gap-1.5 text-sm">
-          <div className="line-clamp-1 flex gap-2 font-medium">
-            Trending up this month <IconTrendingUp className="size-4" />
-          </div>
-          <div className="text-muted-foreground">
-            Visitors for the last 6 months
-          </div>
-        </CardFooter>
-      </Card>
-      <Card className="@container/card">
-        <CardHeader>
-          <CardDescription>New Customers</CardDescription>
-          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
-            1,234
-          </CardTitle>
-          <CardAction>
-            <Badge variant="outline">
-              <IconTrendingDown />
-              -20%
-            </Badge>
-          </CardAction>
-        </CardHeader>
-        <CardFooter className="flex-col items-start gap-1.5 text-sm">
-          <div className="line-clamp-1 flex gap-2 font-medium">
-            Down 20% this period <IconTrendingDown className="size-4" />
-          </div>
-          <div className="text-muted-foreground">
-            Acquisition needs attention
-          </div>
-        </CardFooter>
-      </Card>
-      <Card className="@container/card">
-        <CardHeader>
-          <CardDescription>Active Accounts</CardDescription>
-          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
-            45,678
-          </CardTitle>
-          <CardAction>
-            <Badge variant="outline">
-              <IconTrendingUp />
-              +12.5%
-            </Badge>
-          </CardAction>
-        </CardHeader>
-        <CardFooter className="flex-col items-start gap-1.5 text-sm">
-          <div className="line-clamp-1 flex gap-2 font-medium">
-            Strong user retention <IconTrendingUp className="size-4" />
-          </div>
-          <div className="text-muted-foreground">Engagement exceed targets</div>
-        </CardFooter>
-      </Card>
-      <Card className="@container/card">
-        <CardHeader>
-          <CardDescription>Growth Rate</CardDescription>
-          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
-            4.5%
-          </CardTitle>
-          <CardAction>
-            <Badge variant="outline">
-              <IconTrendingUp />
-              +4.5%
-            </Badge>
-          </CardAction>
-        </CardHeader>
-        <CardFooter className="flex-col items-start gap-1.5 text-sm">
-          <div className="line-clamp-1 flex gap-2 font-medium">
-            Steady performance increase <IconTrendingUp className="size-4" />
-          </div>
-          <div className="text-muted-foreground">Meets growth projections</div>
-        </CardFooter>
-      </Card>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(examples)/dashboard/components/site-header.tsx b/apps/v4/app/(examples)/dashboard/components/site-header.tsx
deleted file mode 100644
index 0796a0aa3a..0000000000
--- a/apps/v4/app/(examples)/dashboard/components/site-header.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Button } from "@/registry/new-york-v4/ui/button"
-import { Separator } from "@/registry/new-york-v4/ui/separator"
-import { SidebarTrigger } from "@/registry/new-york-v4/ui/sidebar"
-import { ModeToggle } from "@/app/(examples)/dashboard/components/mode-toggle"
-import { ThemeSelector } from "@/app/(examples)/dashboard/components/theme-selector"
-
-export function SiteHeader() {
-  return (
-    <header className="flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
-      <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
-        <SidebarTrigger className="-ml-1" />
-        <Separator
-          orientation="vertical"
-          className="mx-2 data-[orientation=vertical]:h-4"
-        />
-        <h1 className="text-base font-medium">Documents</h1>
-        <div className="ml-auto flex items-center gap-2">
-          <Button variant="ghost" asChild size="sm" className="hidden sm:flex">
-            <a
-              href="https://github.com/shadcn-ui/ui/tree/main/apps/v4/app/(examples)/dashboard"
-              rel="noopener noreferrer"
-              target="_blank"
-              className="dark:text-foreground"
-            >
-              GitHub
-            </a>
-          </Button>
-          <ThemeSelector />
-          <ModeToggle />
-        </div>
-      </div>
-    </header>
-  )
-}
diff --git a/apps/v4/app/(examples)/dashboard/components/theme-selector.tsx b/apps/v4/app/(examples)/dashboard/components/theme-selector.tsx
deleted file mode 100644
index a9c2a8cc0a..0000000000
--- a/apps/v4/app/(examples)/dashboard/components/theme-selector.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-"use client"
-
-import { useThemeConfig } from "@/components/active-theme"
-import { Label } from "@/registry/new-york-v4/ui/label"
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york-v4/ui/select"
-
-const DEFAULT_THEMES = [
-  {
-    name: "Default",
-    value: "default",
-  },
-  {
-    name: "Blue",
-    value: "blue",
-  },
-  {
-    name: "Green",
-    value: "green",
-  },
-  {
-    name: "Amber",
-    value: "amber",
-  },
-]
-
-const SCALED_THEMES = [
-  {
-    name: "Default",
-    value: "default-scaled",
-  },
-  {
-    name: "Blue",
-    value: "blue-scaled",
-  },
-]
-
-const MONO_THEMES = [
-  {
-    name: "Mono",
-    value: "mono-scaled",
-  },
-]
-
-export function ThemeSelector() {
-  const { activeTheme, setActiveTheme } = useThemeConfig()
-
-  return (
-    <div className="flex items-center gap-2">
-      <Label htmlFor="theme-selector" className="sr-only">
-        Theme
-      </Label>
-      <Select value={activeTheme} onValueChange={setActiveTheme}>
-        <SelectTrigger
-          id="theme-selector"
-          size="sm"
-          className="justify-start *:data-[slot=select-value]:w-12"
-        >
-          <span className="hidden text-muted-foreground sm:block">
-            Select a theme:
-          </span>
-          <span className="block text-muted-foreground sm:hidden">Theme</span>
-          <SelectValue placeholder="Select a theme" />
-        </SelectTrigger>
-        <SelectContent align="end">
-          <SelectGroup>
-            <SelectLabel>Default</SelectLabel>
-            {DEFAULT_THEMES.map((theme) => (
-              <SelectItem key={theme.name} value={theme.value}>
-                {theme.name}
-              </SelectItem>
-            ))}
-          </SelectGroup>
-          <SelectSeparator />
-          <SelectGroup>
-            <SelectLabel>Scaled</SelectLabel>
-            {SCALED_THEMES.map((theme) => (
-              <SelectItem key={theme.name} value={theme.value}>
-                {theme.name}
-              </SelectItem>
-            ))}
-          </SelectGroup>
-          <SelectGroup>
-            <SelectLabel>Monospaced</SelectLabel>
-            {MONO_THEMES.map((theme) => (
-              <SelectItem key={theme.name} value={theme.value}>
-                {theme.name}
-              </SelectItem>
-            ))}
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(examples)/dashboard/data.json b/apps/v4/app/(examples)/dashboard/data.json
deleted file mode 100644
index ec0873641b..0000000000
--- a/apps/v4/app/(examples)/dashboard/data.json
+++ /dev/null
@@ -1,614 +0,0 @@
-[
-  {
-    "id": 1,
-    "header": "Cover page",
-    "type": "Cover page",
-    "status": "In Process",
-    "target": "18",
-    "limit": "5",
-    "reviewer": "Eddie Lake"
-  },
-  {
-    "id": 2,
-    "header": "Table of contents",
-    "type": "Table of contents",
-    "status": "Done",
-    "target": "29",
-    "limit": "24",
-    "reviewer": "Eddie Lake"
-  },
-  {
-    "id": 3,
-    "header": "Executive summary",
-    "type": "Narrative",
-    "status": "Done",
-    "target": "10",
-    "limit": "13",
-    "reviewer": "Eddie Lake"
-  },
-  {
-    "id": 4,
-    "header": "Technical approach",
-    "type": "Narrative",
-    "status": "Done",
-    "target": "27",
-    "limit": "23",
-    "reviewer": "Jamik Tashpulatov"
-  },
-  {
-    "id": 5,
-    "header": "Design",
-    "type": "Narrative",
-    "status": "In Process",
-    "target": "2",
-    "limit": "16",
-    "reviewer": "Jamik Tashpulatov"
-  },
-  {
-    "id": 6,
-    "header": "Capabilities",
-    "type": "Narrative",
-    "status": "In Process",
-    "target": "20",
-    "limit": "8",
-    "reviewer": "Jamik Tashpulatov"
-  },
-  {
-    "id": 7,
-    "header": "Integration with existing systems",
-    "type": "Narrative",
-    "status": "In Process",
-    "target": "19",
-    "limit": "21",
-    "reviewer": "Jamik Tashpulatov"
-  },
-  {
-    "id": 8,
-    "header": "Innovation and Advantages",
-    "type": "Narrative",
-    "status": "Done",
-    "target": "25",
-    "limit": "26",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 9,
-    "header": "Overview of EMR's Innovative Solutions",
-    "type": "Technical content",
-    "status": "Done",
-    "target": "7",
-    "limit": "23",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 10,
-    "header": "Advanced Algorithms and Machine Learning",
-    "type": "Narrative",
-    "status": "Done",
-    "target": "30",
-    "limit": "28",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 11,
-    "header": "Adaptive Communication Protocols",
-    "type": "Narrative",
-    "status": "Done",
-    "target": "9",
-    "limit": "31",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 12,
-    "header": "Advantages Over Current Technologies",
-    "type": "Narrative",
-    "status": "Done",
-    "target": "12",
-    "limit": "0",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 13,
-    "header": "Past Performance",
-    "type": "Narrative",
-    "status": "Done",
-    "target": "22",
-    "limit": "33",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 14,
-    "header": "Customer Feedback and Satisfaction Levels",
-    "type": "Narrative",
-    "status": "Done",
-    "target": "15",
-    "limit": "34",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 15,
-    "header": "Implementation Challenges and Solutions",
-    "type": "Narrative",
-    "status": "Done",
-    "target": "3",
-    "limit": "35",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 16,
-    "header": "Security Measures and Data Protection Policies",
-    "type": "Narrative",
-    "status": "In Process",
-    "target": "6",
-    "limit": "36",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 17,
-    "header": "Scalability and Future Proofing",
-    "type": "Narrative",
-    "status": "Done",
-    "target": "4",
-    "limit": "37",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 18,
-    "header": "Cost-Benefit Analysis",
-    "type": "Plain language",
-    "status": "Done",
-    "target": "14",
-    "limit": "38",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 19,
-    "header": "User Training and Onboarding Experience",
-    "type": "Narrative",
-    "status": "Done",
-    "target": "17",
-    "limit": "39",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 20,
-    "header": "Future Development Roadmap",
-    "type": "Narrative",
-    "status": "Done",
-    "target": "11",
-    "limit": "40",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 21,
-    "header": "System Architecture Overview",
-    "type": "Technical content",
-    "status": "In Process",
-    "target": "24",
-    "limit": "18",
-    "reviewer": "Maya Johnson"
-  },
-  {
-    "id": 22,
-    "header": "Risk Management Plan",
-    "type": "Narrative",
-    "status": "Done",
-    "target": "15",
-    "limit": "22",
-    "reviewer": "Carlos Rodriguez"
-  },
-  {
-    "id": 23,
-    "header": "Compliance Documentation",
-    "type": "Legal",
-    "status": "In Process",
-    "target": "31",
-    "limit": "27",
-    "reviewer": "Sarah Chen"
-  },
-  {
-    "id": 24,
-    "header": "API Documentation",
-    "type": "Technical content",
-    "status": "Done",
-    "target": "8",
-    "limit": "12",
-    "reviewer": "Raj Patel"
-  },
-  {
-    "id": 25,
-    "header": "User Interface Mockups",
-    "type": "Visual",
-    "status": "In Process",
-    "target": "19",
-    "limit": "25",
-    "reviewer": "Leila Ahmadi"
-  },
-  {
-    "id": 26,
-    "header": "Database Schema",
-    "type": "Technical content",
-    "status": "Done",
-    "target": "22",
-    "limit": "20",
-    "reviewer": "Thomas Wilson"
-  },
-  {
-    "id": 27,
-    "header": "Testing Methodology",
-    "type": "Technical content",
-    "status": "In Process",
-    "target": "17",
-    "limit": "14",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 28,
-    "header": "Deployment Strategy",
-    "type": "Narrative",
-    "status": "Done",
-    "target": "26",
-    "limit": "30",
-    "reviewer": "Eddie Lake"
-  },
-  {
-    "id": 29,
-    "header": "Budget Breakdown",
-    "type": "Financial",
-    "status": "In Process",
-    "target": "13",
-    "limit": "16",
-    "reviewer": "Jamik Tashpulatov"
-  },
-  {
-    "id": 30,
-    "header": "Market Analysis",
-    "type": "Research",
-    "status": "Done",
-    "target": "29",
-    "limit": "32",
-    "reviewer": "Sophia Martinez"
-  },
-  {
-    "id": 31,
-    "header": "Competitor Comparison",
-    "type": "Research",
-    "status": "In Process",
-    "target": "21",
-    "limit": "19",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 32,
-    "header": "Maintenance Plan",
-    "type": "Technical content",
-    "status": "Done",
-    "target": "16",
-    "limit": "23",
-    "reviewer": "Alex Thompson"
-  },
-  {
-    "id": 33,
-    "header": "User Personas",
-    "type": "Research",
-    "status": "In Process",
-    "target": "27",
-    "limit": "24",
-    "reviewer": "Nina Patel"
-  },
-  {
-    "id": 34,
-    "header": "Accessibility Compliance",
-    "type": "Legal",
-    "status": "Done",
-    "target": "18",
-    "limit": "21",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 35,
-    "header": "Performance Metrics",
-    "type": "Technical content",
-    "status": "In Process",
-    "target": "23",
-    "limit": "26",
-    "reviewer": "David Kim"
-  },
-  {
-    "id": 36,
-    "header": "Disaster Recovery Plan",
-    "type": "Technical content",
-    "status": "Done",
-    "target": "14",
-    "limit": "17",
-    "reviewer": "Jamik Tashpulatov"
-  },
-  {
-    "id": 37,
-    "header": "Third-party Integrations",
-    "type": "Technical content",
-    "status": "In Process",
-    "target": "25",
-    "limit": "28",
-    "reviewer": "Eddie Lake"
-  },
-  {
-    "id": 38,
-    "header": "User Feedback Summary",
-    "type": "Research",
-    "status": "Done",
-    "target": "20",
-    "limit": "15",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 39,
-    "header": "Localization Strategy",
-    "type": "Narrative",
-    "status": "In Process",
-    "target": "12",
-    "limit": "19",
-    "reviewer": "Maria Garcia"
-  },
-  {
-    "id": 40,
-    "header": "Mobile Compatibility",
-    "type": "Technical content",
-    "status": "Done",
-    "target": "28",
-    "limit": "31",
-    "reviewer": "James Wilson"
-  },
-  {
-    "id": 41,
-    "header": "Data Migration Plan",
-    "type": "Technical content",
-    "status": "In Process",
-    "target": "19",
-    "limit": "22",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 42,
-    "header": "Quality Assurance Protocols",
-    "type": "Technical content",
-    "status": "Done",
-    "target": "30",
-    "limit": "33",
-    "reviewer": "Priya Singh"
-  },
-  {
-    "id": 43,
-    "header": "Stakeholder Analysis",
-    "type": "Research",
-    "status": "In Process",
-    "target": "11",
-    "limit": "14",
-    "reviewer": "Eddie Lake"
-  },
-  {
-    "id": 44,
-    "header": "Environmental Impact Assessment",
-    "type": "Research",
-    "status": "Done",
-    "target": "24",
-    "limit": "27",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 45,
-    "header": "Intellectual Property Rights",
-    "type": "Legal",
-    "status": "In Process",
-    "target": "17",
-    "limit": "20",
-    "reviewer": "Sarah Johnson"
-  },
-  {
-    "id": 46,
-    "header": "Customer Support Framework",
-    "type": "Narrative",
-    "status": "Done",
-    "target": "22",
-    "limit": "25",
-    "reviewer": "Jamik Tashpulatov"
-  },
-  {
-    "id": 47,
-    "header": "Version Control Strategy",
-    "type": "Technical content",
-    "status": "In Process",
-    "target": "15",
-    "limit": "18",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 48,
-    "header": "Continuous Integration Pipeline",
-    "type": "Technical content",
-    "status": "Done",
-    "target": "26",
-    "limit": "29",
-    "reviewer": "Michael Chen"
-  },
-  {
-    "id": 49,
-    "header": "Regulatory Compliance",
-    "type": "Legal",
-    "status": "In Process",
-    "target": "13",
-    "limit": "16",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 50,
-    "header": "User Authentication System",
-    "type": "Technical content",
-    "status": "Done",
-    "target": "28",
-    "limit": "31",
-    "reviewer": "Eddie Lake"
-  },
-  {
-    "id": 51,
-    "header": "Data Analytics Framework",
-    "type": "Technical content",
-    "status": "In Process",
-    "target": "21",
-    "limit": "24",
-    "reviewer": "Jamik Tashpulatov"
-  },
-  {
-    "id": 52,
-    "header": "Cloud Infrastructure",
-    "type": "Technical content",
-    "status": "Done",
-    "target": "16",
-    "limit": "19",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 53,
-    "header": "Network Security Measures",
-    "type": "Technical content",
-    "status": "In Process",
-    "target": "29",
-    "limit": "32",
-    "reviewer": "Lisa Wong"
-  },
-  {
-    "id": 54,
-    "header": "Project Timeline",
-    "type": "Planning",
-    "status": "Done",
-    "target": "14",
-    "limit": "17",
-    "reviewer": "Eddie Lake"
-  },
-  {
-    "id": 55,
-    "header": "Resource Allocation",
-    "type": "Planning",
-    "status": "In Process",
-    "target": "27",
-    "limit": "30",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 56,
-    "header": "Team Structure and Roles",
-    "type": "Planning",
-    "status": "Done",
-    "target": "20",
-    "limit": "23",
-    "reviewer": "Jamik Tashpulatov"
-  },
-  {
-    "id": 57,
-    "header": "Communication Protocols",
-    "type": "Planning",
-    "status": "In Process",
-    "target": "15",
-    "limit": "18",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 58,
-    "header": "Success Metrics",
-    "type": "Planning",
-    "status": "Done",
-    "target": "30",
-    "limit": "33",
-    "reviewer": "Eddie Lake"
-  },
-  {
-    "id": 59,
-    "header": "Internationalization Support",
-    "type": "Technical content",
-    "status": "In Process",
-    "target": "23",
-    "limit": "26",
-    "reviewer": "Jamik Tashpulatov"
-  },
-  {
-    "id": 60,
-    "header": "Backup and Recovery Procedures",
-    "type": "Technical content",
-    "status": "Done",
-    "target": "18",
-    "limit": "21",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 61,
-    "header": "Monitoring and Alerting System",
-    "type": "Technical content",
-    "status": "In Process",
-    "target": "25",
-    "limit": "28",
-    "reviewer": "Daniel Park"
-  },
-  {
-    "id": 62,
-    "header": "Code Review Guidelines",
-    "type": "Technical content",
-    "status": "Done",
-    "target": "12",
-    "limit": "15",
-    "reviewer": "Eddie Lake"
-  },
-  {
-    "id": 63,
-    "header": "Documentation Standards",
-    "type": "Technical content",
-    "status": "In Process",
-    "target": "27",
-    "limit": "30",
-    "reviewer": "Jamik Tashpulatov"
-  },
-  {
-    "id": 64,
-    "header": "Release Management Process",
-    "type": "Planning",
-    "status": "Done",
-    "target": "22",
-    "limit": "25",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 65,
-    "header": "Feature Prioritization Matrix",
-    "type": "Planning",
-    "status": "In Process",
-    "target": "19",
-    "limit": "22",
-    "reviewer": "Emma Davis"
-  },
-  {
-    "id": 66,
-    "header": "Technical Debt Assessment",
-    "type": "Technical content",
-    "status": "Done",
-    "target": "24",
-    "limit": "27",
-    "reviewer": "Eddie Lake"
-  },
-  {
-    "id": 67,
-    "header": "Capacity Planning",
-    "type": "Planning",
-    "status": "In Process",
-    "target": "21",
-    "limit": "24",
-    "reviewer": "Jamik Tashpulatov"
-  },
-  {
-    "id": 68,
-    "header": "Service Level Agreements",
-    "type": "Legal",
-    "status": "Done",
-    "target": "26",
-    "limit": "29",
-    "reviewer": "Assign reviewer"
-  }
-]
diff --git a/apps/v4/app/(examples)/dashboard/layout.tsx b/apps/v4/app/(examples)/dashboard/layout.tsx
deleted file mode 100644
index da69ec0595..0000000000
--- a/apps/v4/app/(examples)/dashboard/layout.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { cookies } from "next/headers"
-
-import {
-  SidebarInset,
-  SidebarProvider,
-} from "@/registry/new-york-v4/ui/sidebar"
-import { AppSidebar } from "@/app/(examples)/dashboard/components/app-sidebar"
-import { SiteHeader } from "@/app/(examples)/dashboard/components/site-header"
-
-import "@/app/(examples)/dashboard/theme.css"
-
-export default async function DashboardLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  const cookieStore = await cookies()
-  const defaultOpen = cookieStore.get("sidebar_state")?.value === "true"
-
-  return (
-    <SidebarProvider
-      defaultOpen={defaultOpen}
-      style={
-        {
-          "--sidebar-width": "calc(var(--spacing) * 72)",
-        } as React.CSSProperties
-      }
-    >
-      <AppSidebar variant="inset" />
-      <SidebarInset>
-        <SiteHeader />
-        <div className="flex flex-1 flex-col">{children}</div>
-      </SidebarInset>
-    </SidebarProvider>
-  )
-}
diff --git a/apps/v4/app/(examples)/dashboard/page.tsx b/apps/v4/app/(examples)/dashboard/page.tsx
deleted file mode 100644
index e6ea868938..0000000000
--- a/apps/v4/app/(examples)/dashboard/page.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ChartAreaInteractive } from "@/app/(examples)/dashboard/components/chart-area-interactive"
-import { DataTable } from "@/app/(examples)/dashboard/components/data-table"
-import { SectionCards } from "@/app/(examples)/dashboard/components/section-cards"
-import data from "@/app/(examples)/dashboard/data.json"
-
-export default function Page() {
-  return (
-    <div className="@container/main flex flex-1 flex-col gap-2">
-      <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
-        <SectionCards />
-        <div className="px-4 lg:px-6">
-          <ChartAreaInteractive />
-        </div>
-        <DataTable data={data} />
-      </div>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(examples)/dashboard/theme.css b/apps/v4/app/(examples)/dashboard/theme.css
deleted file mode 100644
index fd549d6677..0000000000
--- a/apps/v4/app/(examples)/dashboard/theme.css
+++ /dev/null
@@ -1,105 +0,0 @@
-body {
-  @apply overscroll-none bg-transparent;
-}
-
-:root {
-  --font-sans: var(--font-inter);
-  --header-height: calc(var(--spacing) * 12 + 1px);
-}
-
-.theme-scaled {
-  @media (min-width: 1024px) {
-    --radius: 0.6rem;
-    --text-lg: 1.05rem;
-    --text-base: 0.85rem;
-    --text-sm: 0.8rem;
-    --spacing: 0.222222rem;
-  }
-
-  [data-slot="card"] {
-    --spacing: 0.16rem;
-  }
-
-  [data-slot="select-trigger"],
-  [data-slot="toggle-group-item"] {
-    --spacing: 0.222222rem;
-  }
-}
-
-.theme-default,
-.theme-default-scaled {
-  --primary: var(--color-neutral-600);
-  --primary-foreground: var(--color-neutral-50);
-
-  @variant dark {
-    --primary: var(--color-neutral-500);
-    --primary-foreground: var(--color-neutral-50);
-  }
-}
-
-.theme-blue,
-.theme-blue-scaled {
-  --primary: var(--color-blue-600);
-  --primary-foreground: var(--color-blue-50);
-
-  @variant dark {
-    --primary: var(--color-blue-500);
-    --primary-foreground: var(--color-blue-50);
-  }
-}
-
-.theme-green,
-.theme-green-scaled {
-  --primary: var(--color-lime-600);
-  --primary-foreground: var(--color-lime-50);
-
-  @variant dark {
-    --primary: var(--color-lime-600);
-    --primary-foreground: var(--color-lime-50);
-  }
-}
-
-.theme-amber,
-.theme-amber-scaled {
-  --primary: var(--color-amber-600);
-  --primary-foreground: var(--color-amber-50);
-
-  @variant dark {
-    --primary: var(--color-amber-500);
-    --primary-foreground: var(--color-amber-50);
-  }
-}
-
-.theme-mono,
-.theme-mono-scaled {
-  --font-sans: var(--font-mono);
-  --primary: var(--color-neutral-600);
-  --primary-foreground: var(--color-neutral-50);
-
-  @variant dark {
-    --primary: var(--color-neutral-500);
-    --primary-foreground: var(--color-neutral-50);
-  }
-
-  .rounded-xs,
-  .rounded-sm,
-  .rounded-md,
-  .rounded-lg,
-  .rounded-xl {
-    @apply !rounded-none;
-    border-radius: 0;
-  }
-
-  .shadow-xs,
-  .shadow-sm,
-  .shadow-md,
-  .shadow-lg,
-  .shadow-xl {
-    @apply !shadow-none;
-  }
-
-  [data-slot="toggle-group"],
-  [data-slot="toggle-group-item"] {
-    @apply !rounded-none !shadow-none;
-  }
-}
diff --git a/apps/v4/app/(internal)/sink/(pages)/forms/appearance-settings.tsx b/apps/v4/app/(internal)/sink/(pages)/forms/appearance-settings.tsx
deleted file mode 100644
index 9ca2857781..0000000000
--- a/apps/v4/app/(internal)/sink/(pages)/forms/appearance-settings.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-import Image from "next/image"
-import { CheckIcon } from "lucide-react"
-
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSeparator,
-  FieldSet,
-  FieldTitle,
-} from "@/registry/new-york-v4/ui/field"
-import { Label } from "@/registry/new-york-v4/ui/label"
-import {
-  RadioGroup,
-  RadioGroupItem,
-} from "@/registry/new-york-v4/ui/radio-group"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york-v4/ui/select"
-import { Switch } from "@/registry/new-york-v4/ui/switch"
-
-const modes = [
-  {
-    name: "Light",
-    value: "light",
-    image: "/placeholder.svg",
-  },
-  {
-    name: "Dark",
-    value: "dark",
-    image: "/placeholder.svg",
-  },
-  {
-    name: "System",
-    value: "system",
-    image: "/placeholder.svg",
-  },
-]
-
-const accents = [
-  {
-    name: "Blue",
-    value: "#007AFF",
-  },
-  {
-    name: "Purple",
-    value: "#6A4695",
-  },
-  {
-    name: "Red",
-    value: "#FF3B30",
-  },
-  {
-    name: "Orange",
-    value: "#FF9500",
-  },
-]
-
-export function AppearanceSettings() {
-  return (
-    <FieldSet>
-      <FieldLegend>Appearance</FieldLegend>
-      <FieldDescription>
-        Configure appearance. accent, scroll bar, and more.
-      </FieldDescription>
-      <FieldGroup>
-        <FieldSet>
-          <FieldLegend variant="label">Mode</FieldLegend>
-          <FieldDescription>
-            Select the mode to use for the appearance.
-          </FieldDescription>
-          <RadioGroup
-            className="flex flex-col gap-4 @min-[28rem]/field-group:grid @min-[28rem]/field-group:grid-cols-3"
-            defaultValue="light"
-          >
-            {modes.map((mode) => (
-              <FieldLabel
-                htmlFor={mode.value}
-                className="gap-0 overflow-hidden"
-                key={mode.value}
-              >
-                <Image
-                  src={mode.image}
-                  alt={mode.name}
-                  width={160}
-                  height={90}
-                  className="hidden aspect-video w-full object-cover @min-[28rem]/field-group:block dark:brightness-[0.2] dark:grayscale"
-                />
-                <Field
-                  orientation="horizontal"
-                  className="@min-[28rem]/field-group:border-t @min-[28rem]/field-group:border-t-input"
-                >
-                  <FieldTitle>{mode.name}</FieldTitle>
-                  <RadioGroupItem id={mode.value} value={mode.value} />
-                </Field>
-              </FieldLabel>
-            ))}
-          </RadioGroup>
-        </FieldSet>
-        <FieldSeparator />
-        <Field orientation="horizontal">
-          <FieldContent>
-            <FieldTitle>Accent</FieldTitle>
-            <FieldDescription>
-              Select the accent color to use for the appearance.
-            </FieldDescription>
-          </FieldContent>
-          <FieldSet aria-label="Accent">
-            <RadioGroup className="flex flex-wrap gap-2" defaultValue="#007AFF">
-              {accents.map((accent) => (
-                <Label
-                  htmlFor={accent.value}
-                  key={accent.value}
-                  className="flex size-6 items-center justify-center rounded-full"
-                  style={{ backgroundColor: accent.value }}
-                >
-                  <RadioGroupItem
-                    id={accent.value}
-                    value={accent.value}
-                    aria-label={accent.name}
-                    className="peer sr-only"
-                  />
-                  <CheckIcon className="hidden size-4 stroke-white peer-data-[state=checked]:block" />
-                </Label>
-              ))}
-            </RadioGroup>
-          </FieldSet>
-        </Field>
-        <FieldSeparator />
-        <Field orientation="responsive">
-          <FieldContent>
-            <FieldLabel htmlFor="icon-size">Sidebar Icon Size</FieldLabel>
-            <FieldDescription>
-              Select the size of the sidebar icons.
-            </FieldDescription>
-          </FieldContent>
-          <Select>
-            <SelectTrigger id="icon-size" className="ml-auto">
-              <SelectValue placeholder="Select" />
-            </SelectTrigger>
-            <SelectContent align="end">
-              <SelectItem value="small">Small</SelectItem>
-              <SelectItem value="medium">Medium</SelectItem>
-              <SelectItem value="large">Large</SelectItem>
-            </SelectContent>
-          </Select>
-        </Field>
-        <FieldSeparator />
-        <Field orientation="horizontal">
-          <FieldContent>
-            <FieldLabel htmlFor="tinting">Wallpaper Tinting</FieldLabel>
-            <FieldDescription>
-              Allow the wallpaper to be tinted with the accent color.
-            </FieldDescription>
-          </FieldContent>
-          <Switch id="tinting" defaultChecked />
-        </Field>
-      </FieldGroup>
-    </FieldSet>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/(pages)/forms/chat-settings.tsx b/apps/v4/app/(internal)/sink/(pages)/forms/chat-settings.tsx
deleted file mode 100644
index d77d3b81a4..0000000000
--- a/apps/v4/app/(internal)/sink/(pages)/forms/chat-settings.tsx
+++ /dev/null
@@ -1,463 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import { CircleIcon, InfoIcon } from "lucide-react"
-
-import { Button } from "@/registry/new-york-v4/ui/button"
-import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldSeparator,
-  FieldSet,
-  FieldTitle,
-} from "@/registry/new-york-v4/ui/field"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-} from "@/registry/new-york-v4/ui/input-group"
-import { Kbd } from "@/registry/new-york-v4/ui/kbd"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york-v4/ui/select"
-import { Switch } from "@/registry/new-york-v4/ui/switch"
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/registry/new-york-v4/ui/tabs"
-import { Textarea } from "@/registry/new-york-v4/ui/textarea"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/new-york-v4/ui/tooltip"
-
-const spokenLanguages = [
-  { label: "English", value: "en" },
-  { label: "Spanish", value: "es" },
-  { label: "French", value: "fr" },
-  { label: "German", value: "de" },
-  { label: "Italian", value: "it" },
-  { label: "Portuguese", value: "pt" },
-  { label: "Russian", value: "ru" },
-  { label: "Chinese", value: "zh" },
-  { label: "Japanese", value: "ja" },
-  { label: "Korean", value: "ko" },
-  { label: "Arabic", value: "ar" },
-  { label: "Hindi", value: "hi" },
-  { label: "Bengali", value: "bn" },
-  { label: "Telugu", value: "te" },
-  { label: "Marathi", value: "mr" },
-  { label: "Kannada", value: "kn" },
-  { label: "Malayalam", value: "ml" },
-]
-
-const voices = [
-  { label: "Samantha", value: "samantha" },
-  { label: "Alex", value: "alex" },
-  { label: "Fred", value: "fred" },
-  { label: "Victoria", value: "victoria" },
-  { label: "Tom", value: "tom" },
-  { label: "Karen", value: "karen" },
-  { label: "Sam", value: "sam" },
-  { label: "Daniel", value: "daniel" },
-]
-
-const personalities = [
-  {
-    label: "Friendly",
-    value: "friendly",
-    description: "Friendly and approachable.",
-  },
-  {
-    label: "Professional",
-    value: "professional",
-    description: "Professional and authoritative.",
-  },
-  { label: "Funny", value: "funny", description: "Funny and light-hearted." },
-  {
-    label: "Sarcastic",
-    value: "sarcastic",
-    description: "Sarcastic and witty.",
-  },
-  { label: "Cynical", value: "cynical", description: "Cynical and skeptical." },
-]
-
-const instructions = [
-  {
-    label: "Witty",
-    value: "witty",
-    description: "Use quick and clever responses when appropriate.",
-  },
-  {
-    label: "Professional",
-    value: "professional",
-    description: "Have a professional and authoritative tone.",
-  },
-  {
-    label: "Funny",
-    value: "funny",
-    description: "Use humor and wit to engage the user.",
-  },
-  {
-    label: "Sarcastic",
-    value: "sarcastic",
-    description: "Use sarcasm and wit to engage the user.",
-  },
-  {
-    label: "Cynical",
-    value: "cynical",
-    description: "Use cynicism and skepticism to engage the user.",
-  },
-]
-
-export function ChatSettings() {
-  const [tab, setTab] = useState("general")
-  const [theme, setTheme] = useState("system")
-  const [accentColor, setAccentColor] = useState("default")
-  const [spokenLanguage, setSpokenLanguage] = useState("en")
-  const [voice, setVoice] = useState("samantha")
-  const [personality, setPersonality] = useState("friendly")
-  const [customInstructions, setCustomInstructions] = useState("")
-
-  return (
-    <div className="flex flex-col gap-4">
-      <Button variant="outline" asChild className="w-full md:hidden">
-        <select
-          value={tab}
-          onChange={(e) => setTab(e.target.value)}
-          className="appearance-none"
-        >
-          <option value="general">General</option>
-          <option value="notifications">Notifications</option>
-          <option value="personalization">Personalization</option>
-          <option value="security">Security</option>
-        </select>
-      </Button>
-      <Tabs value={tab} onValueChange={setTab}>
-        <TabsList className="hidden md:flex">
-          <TabsTrigger value="general">General</TabsTrigger>
-          <TabsTrigger value="notifications">Notifications</TabsTrigger>
-          <TabsTrigger value="personalization">Personalization</TabsTrigger>
-          <TabsTrigger value="security">Security</TabsTrigger>
-        </TabsList>
-        <div className="rounded-lg border p-6 [&_[data-slot=select-trigger]]:min-w-[125px]">
-          <TabsContent value="general">
-            <FieldSet>
-              <FieldGroup>
-                <Field orientation="horizontal">
-                  <FieldLabel htmlFor="theme">Theme</FieldLabel>
-                  <Select value={theme} onValueChange={setTheme}>
-                    <SelectTrigger id="theme">
-                      <SelectValue placeholder="Select" />
-                    </SelectTrigger>
-                    <SelectContent align="end">
-                      <SelectItem value="light">Light</SelectItem>
-                      <SelectItem value="dark">Dark</SelectItem>
-                      <SelectItem value="system">System</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </Field>
-                <FieldSeparator />
-                <Field orientation="horizontal">
-                  <FieldLabel htmlFor="accent-color">Accent Color</FieldLabel>
-                  <Select value={accentColor} onValueChange={setAccentColor}>
-                    <SelectTrigger id="accent-color">
-                      <SelectValue placeholder="Select" />
-                    </SelectTrigger>
-                    <SelectContent align="end">
-                      <SelectItem value="default">
-                        <CircleIcon className="fill-neutral-500 stroke-neutral-500 dark:fill-neutral-400 dark:stroke-neutral-400" />
-                        Default
-                      </SelectItem>
-                      <SelectItem value="red">
-                        <CircleIcon className="fill-red-500 stroke-red-500 dark:fill-red-400 dark:stroke-red-400" />
-                        Red
-                      </SelectItem>
-                      <SelectItem value="blue">
-                        <CircleIcon className="fill-blue-500 stroke-blue-500 dark:fill-blue-400 dark:stroke-blue-400" />
-                        Blue
-                      </SelectItem>
-                      <SelectItem value="green">
-                        <CircleIcon className="fill-green-500 stroke-green-500 dark:fill-green-400 dark:stroke-green-400" />
-                        Green
-                      </SelectItem>
-                      <SelectItem value="purple">
-                        <CircleIcon className="fill-purple-500 stroke-purple-500 dark:fill-purple-400 dark:stroke-purple-400" />
-                        Purple
-                      </SelectItem>
-                      <SelectItem value="pink">
-                        <CircleIcon className="fill-pink-500 stroke-pink-500 dark:fill-pink-400 dark:stroke-pink-400" />
-                        Pink
-                      </SelectItem>
-                    </SelectContent>
-                  </Select>
-                </Field>
-                <FieldSeparator />
-                <Field orientation="responsive">
-                  <FieldContent>
-                    <FieldLabel htmlFor="spoken-language">
-                      Spoken Language
-                    </FieldLabel>
-                    <FieldDescription>
-                      For best results, select the language you mainly speak. If
-                      it&apos;s not listed, it may still be supported via
-                      auto-detection.
-                    </FieldDescription>
-                  </FieldContent>
-                  <Select
-                    value={spokenLanguage}
-                    onValueChange={setSpokenLanguage}
-                  >
-                    <SelectTrigger id="spoken-language">
-                      <SelectValue placeholder="Select" />
-                    </SelectTrigger>
-                    <SelectContent align="end" position="item-aligned">
-                      <SelectItem value="auto">Auto</SelectItem>
-                      <SelectSeparator />
-                      {spokenLanguages.map((language) => (
-                        <SelectItem key={language.value} value={language.value}>
-                          {language.label}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </Field>
-                <FieldSeparator />
-                <Field orientation="horizontal">
-                  <FieldLabel htmlFor="voice">Voice</FieldLabel>
-                  <Select value={voice} onValueChange={setVoice}>
-                    <SelectTrigger id="voice">
-                      <SelectValue placeholder="Select" />
-                    </SelectTrigger>
-                    <SelectContent align="end" position="item-aligned">
-                      {voices.map((voice) => (
-                        <SelectItem key={voice.value} value={voice.value}>
-                          {voice.label}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </Field>
-              </FieldGroup>
-            </FieldSet>
-          </TabsContent>
-          <TabsContent value="notifications">
-            <FieldGroup>
-              <FieldSet>
-                <FieldLabel>Responses</FieldLabel>
-                <FieldDescription>
-                  Get notified when ChatGPT responds to requests that take time,
-                  like research or image generation.
-                </FieldDescription>
-                <FieldGroup data-slot="checkbox-group">
-                  <Field orientation="horizontal">
-                    <Checkbox id="push" defaultChecked disabled />
-                    <FieldLabel htmlFor="push" className="font-normal">
-                      Push notifications
-                    </FieldLabel>
-                  </Field>
-                </FieldGroup>
-              </FieldSet>
-              <FieldSeparator />
-              <FieldSet>
-                <FieldLabel>Tasks</FieldLabel>
-                <FieldDescription>
-                  Get notified when tasks you&apos;ve created have updates.{" "}
-                  <a href="#">Manage tasks</a>
-                </FieldDescription>
-                <FieldGroup data-slot="checkbox-group">
-                  <Field orientation="horizontal">
-                    <Checkbox id="push-tasks" />
-                    <FieldLabel htmlFor="push-tasks" className="font-normal">
-                      Push notifications
-                    </FieldLabel>
-                  </Field>
-                  <Field orientation="horizontal">
-                    <Checkbox id="email-tasks" />
-                    <FieldLabel htmlFor="email-tasks" className="font-normal">
-                      Email notifications
-                    </FieldLabel>
-                  </Field>
-                </FieldGroup>
-              </FieldSet>
-            </FieldGroup>
-          </TabsContent>
-          <TabsContent value="personalization">
-            <FieldGroup>
-              <Field orientation="responsive">
-                <FieldLabel htmlFor="nickname">Nickname</FieldLabel>
-                <InputGroup>
-                  <InputGroupInput
-                    id="nickname"
-                    placeholder="Broski"
-                    className="@md/field-group:max-w-[200px]"
-                  />
-                  <InputGroupAddon align="inline-end">
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <InputGroupButton size="icon-xs">
-                          <InfoIcon />
-                        </InputGroupButton>
-                      </TooltipTrigger>
-                      <TooltipContent className="flex items-center gap-2">
-                        Used to identify you in the chat. <Kbd>N</Kbd>
-                      </TooltipContent>
-                    </Tooltip>
-                  </InputGroupAddon>
-                </InputGroup>
-              </Field>
-              <FieldSeparator />
-              <Field
-                orientation="responsive"
-                className="@md/field-group:flex-col @2xl/field-group:flex-row"
-              >
-                <FieldContent>
-                  <FieldLabel htmlFor="about">More about you</FieldLabel>
-                  <FieldDescription>
-                    Tell us more about yourself. This will be used to help us
-                    personalize your experience.
-                  </FieldDescription>
-                </FieldContent>
-                <Textarea
-                  id="about"
-                  placeholder="I'm a software engineer..."
-                  className="min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]"
-                />
-              </Field>
-              <FieldSeparator />
-              <FieldLabel>
-                <Field orientation="horizontal">
-                  <FieldContent>
-                    <FieldLabel htmlFor="customization">
-                      Enable customizations
-                    </FieldLabel>
-                    <FieldDescription>
-                      Enable customizations to make ChatGPT more personalized.
-                    </FieldDescription>
-                  </FieldContent>
-                  <Switch id="customization" defaultChecked />
-                </Field>
-              </FieldLabel>
-              <FieldSeparator />
-              <Field orientation="responsive">
-                <FieldContent>
-                  <FieldLabel htmlFor="personality">
-                    ChatGPT Personality
-                  </FieldLabel>
-                  <FieldDescription>
-                    Set the style and tone ChatGPT should use when responding.
-                  </FieldDescription>
-                </FieldContent>
-                <Select value={personality} onValueChange={setPersonality}>
-                  <SelectTrigger id="personality">
-                    {personalities.find((p) => p.value === personality)?.label}
-                  </SelectTrigger>
-                  <SelectContent align="end">
-                    {personalities.map((personality) => (
-                      <SelectItem
-                        key={personality.value}
-                        value={personality.value}
-                      >
-                        <FieldContent className="gap-0.5">
-                          <FieldLabel>{personality.label}</FieldLabel>
-                          <FieldDescription className="text-xs">
-                            {personality.description}
-                          </FieldDescription>
-                        </FieldContent>
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </Field>
-              <FieldSeparator />
-              <Field>
-                <FieldLabel htmlFor="instructions">
-                  Custom Instructions
-                </FieldLabel>
-                <Textarea
-                  id="instructions"
-                  value={customInstructions}
-                  onChange={(e) => setCustomInstructions(e.target.value)}
-                />
-                <div className="flex flex-wrap gap-2">
-                  {instructions.map((instruction) => (
-                    <Button
-                      variant="outline"
-                      key={instruction.value}
-                      value={instruction.value}
-                      className="rounded-full"
-                      size="sm"
-                      onClick={() =>
-                        setCustomInstructions(
-                          `${customInstructions} ${instruction.description}`
-                        )
-                      }
-                    >
-                      {instruction.label}
-                    </Button>
-                  ))}
-                </div>
-              </Field>
-            </FieldGroup>
-          </TabsContent>
-          <TabsContent value="security">
-            <FieldGroup>
-              <Field orientation="horizontal">
-                <FieldContent>
-                  <FieldLabel htmlFor="2fa">
-                    Multi-factor authentication
-                  </FieldLabel>
-                  <FieldDescription>
-                    Enable multi-factor authentication to secure your account.
-                    If you do not have a two-factor authentication device, you
-                    can use a one-time code sent to your email.
-                  </FieldDescription>
-                </FieldContent>
-                <Switch id="2fa" />
-              </Field>
-              <FieldSeparator />
-              <Field orientation="horizontal">
-                <FieldContent>
-                  <FieldTitle>Log out</FieldTitle>
-                  <FieldDescription>
-                    Log out of your account on this device.
-                  </FieldDescription>
-                </FieldContent>
-                <Button variant="outline" size="sm">
-                  Log Out
-                </Button>
-              </Field>
-              <FieldSeparator />
-              <Field orientation="horizontal">
-                <FieldContent>
-                  <FieldTitle>Log out of all devices</FieldTitle>
-                  <FieldDescription>
-                    This will log you out of all devices, including the current
-                    session. It may take up to 30 minutes for the changes to
-                    take effect.
-                  </FieldDescription>
-                </FieldContent>
-                <Button variant="outline" size="sm">
-                  Log Out All
-                </Button>
-              </Field>
-            </FieldGroup>
-          </TabsContent>
-        </div>
-      </Tabs>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/(pages)/forms/display-settings.tsx b/apps/v4/app/(internal)/sink/(pages)/forms/display-settings.tsx
deleted file mode 100644
index 74792dc37f..0000000000
--- a/apps/v4/app/(internal)/sink/(pages)/forms/display-settings.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import { SunDimIcon, SunIcon } from "lucide-react"
-
-import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSeparator,
-  FieldSet,
-  FieldTitle,
-} from "@/registry/new-york-v4/ui/field"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york-v4/ui/select"
-import { Slider } from "@/registry/new-york-v4/ui/slider"
-import { Switch } from "@/registry/new-york-v4/ui/switch"
-
-export function DisplaySettings() {
-  return (
-    <FieldSet>
-      <FieldLegend>Display</FieldLegend>
-      <FieldDescription>
-        Configure display settings, brightness, refresh rate, and more.
-      </FieldDescription>
-      <FieldGroup>
-        <Field orientation="responsive">
-          <FieldContent>
-            <FieldLabel htmlFor="resolution">Resolution</FieldLabel>
-            <FieldDescription>Select the display resolution.</FieldDescription>
-          </FieldContent>
-          <Select>
-            <SelectTrigger id="resolution" className="ml-auto">
-              <SelectValue placeholder="Select" />
-            </SelectTrigger>
-            <SelectContent align="end">
-              <SelectItem value="1920x1080">1920 x 1080</SelectItem>
-              <SelectItem value="2560x1440">2560 x 1440</SelectItem>
-              <SelectItem value="3840x2160">3840 x 2160</SelectItem>
-              <SelectItem value="auto">Auto</SelectItem>
-            </SelectContent>
-          </Select>
-        </Field>
-        <FieldSeparator />
-        <Field orientation="responsive">
-          <FieldContent>
-            <FieldTitle>Brightness</FieldTitle>
-            <FieldDescription>
-              Adjust the display brightness level.
-            </FieldDescription>
-          </FieldContent>
-          <div className="flex min-w-[150px] items-center gap-2">
-            <SunDimIcon className="size-4 shrink-0" />
-            <Slider
-              id="brightness"
-              defaultValue={[75]}
-              max={100}
-              step={1}
-              aria-label="Brightness"
-            />
-            <SunIcon className="size-4 shrink-0" />
-          </div>
-        </Field>
-        <FieldSeparator />
-        <Field orientation="horizontal">
-          <FieldContent>
-            <FieldLabel htmlFor="auto-brightness">
-              Automatically Adjust Brightness
-            </FieldLabel>
-            <FieldDescription>
-              Automatically adjust brightness based on ambient light.
-            </FieldDescription>
-          </FieldContent>
-          <Checkbox id="auto-brightness" defaultChecked />
-        </Field>
-        <FieldSeparator />
-        <Field orientation="horizontal">
-          <FieldContent>
-            <FieldLabel htmlFor="true-tone">True Tone</FieldLabel>
-            <FieldDescription>
-              Automatically adjust colors to match ambient lighting.
-            </FieldDescription>
-          </FieldContent>
-          <Switch id="true-tone" />
-        </Field>
-        <FieldSeparator />
-        <Field orientation="responsive">
-          <FieldContent>
-            <FieldLabel htmlFor="refresh-rate">Refresh Rate</FieldLabel>
-            <FieldDescription>
-              Select the display refresh rate.
-            </FieldDescription>
-          </FieldContent>
-          <Select>
-            <SelectTrigger id="refresh-rate" className="ml-auto min-w-[200px]">
-              <SelectValue placeholder="Select" />
-            </SelectTrigger>
-            <SelectContent align="end">
-              <SelectItem value="60hz">60 Hz</SelectItem>
-              <SelectItem value="120hz">120 Hz</SelectItem>
-              <SelectItem value="144hz">144 Hz</SelectItem>
-              <SelectItem value="240hz">240 Hz</SelectItem>
-            </SelectContent>
-          </Select>
-        </Field>
-        <FieldSeparator />
-        <Field orientation="responsive">
-          <FieldContent>
-            <FieldLabel htmlFor="tv-connection">
-              When connected to TV
-            </FieldLabel>
-            <FieldDescription>
-              Choose display behavior when connected to a TV.
-            </FieldDescription>
-          </FieldContent>
-          <Select>
-            <SelectTrigger id="tv-connection" className="ml-auto">
-              <SelectValue placeholder="Select" />
-            </SelectTrigger>
-            <SelectContent align="end">
-              <SelectItem value="mirror">Mirror Display</SelectItem>
-              <SelectItem value="extend">Extend Display</SelectItem>
-              <SelectItem value="tv-only">TV Only</SelectItem>
-              <SelectItem value="auto">Auto</SelectItem>
-            </SelectContent>
-          </Select>
-        </Field>
-      </FieldGroup>
-    </FieldSet>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/(pages)/forms/notion-prompt-form.tsx b/apps/v4/app/(internal)/sink/(pages)/forms/notion-prompt-form.tsx
deleted file mode 100644
index 910263e5d2..0000000000
--- a/apps/v4/app/(internal)/sink/(pages)/forms/notion-prompt-form.tsx
+++ /dev/null
@@ -1,464 +0,0 @@
-"use client"
-
-import { useMemo, useState } from "react"
-import {
-  IconApps,
-  IconArrowUp,
-  IconAt,
-  IconBook,
-  IconBrandAbstract,
-  IconBrandOpenai,
-  IconBrandZeit,
-  IconCircleDashedPlus,
-  IconPaperclip,
-  IconPlus,
-  IconWorld,
-  IconX,
-} from "@tabler/icons-react"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/new-york-v4/ui/avatar"
-import { Badge } from "@/registry/new-york-v4/ui/badge"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/registry/new-york-v4/ui/command"
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "@/registry/new-york-v4/ui/dropdown-menu"
-import { Field, FieldLabel } from "@/registry/new-york-v4/ui/field"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupTextarea,
-} from "@/registry/new-york-v4/ui/input-group"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/new-york-v4/ui/popover"
-import { Switch } from "@/registry/new-york-v4/ui/switch"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/new-york-v4/ui/tooltip"
-
-const SAMPLE_DATA = {
-  mentionable: [
-    {
-      type: "page",
-      title: "Meeting Notes",
-      image: "📝",
-    },
-    {
-      type: "page",
-      title: "Project Dashboard",
-      image: "📊",
-    },
-    {
-      type: "page",
-      title: "Ideas & Brainstorming",
-      image: "💡",
-    },
-    {
-      type: "page",
-      title: "Calendar & Events",
-      image: "📅",
-    },
-    {
-      type: "page",
-      title: "Documentation",
-      image: "📚",
-    },
-    {
-      type: "page",
-      title: "Goals & Objectives",
-      image: "🎯",
-    },
-    {
-      type: "page",
-      title: "Budget Planning",
-      image: "💰",
-    },
-    {
-      type: "page",
-      title: "Team Directory",
-      image: "👥",
-    },
-    {
-      type: "page",
-      title: "Technical Specs",
-      image: "🔧",
-    },
-    {
-      type: "page",
-      title: "Analytics Report",
-      image: "📈",
-    },
-    {
-      type: "user",
-      title: "shadcn",
-      image: "https://github.com/shadcn.png",
-      workspace: "Workspace",
-    },
-    {
-      type: "user",
-      title: "maxleiter",
-      image: "https://github.com/maxleiter.png",
-      workspace: "Cursor",
-    },
-    {
-      type: "user",
-      title: "evilrabbit",
-      image: "https://github.com/evilrabbit.png",
-      workspace: "Vercel",
-    },
-  ],
-  models: [
-    {
-      name: "Auto",
-      icon: IconBrandZeit,
-    },
-    {
-      name: "Claude Sonnet 4",
-      icon: IconBrandAbstract,
-      badge: "Beta",
-    },
-    {
-      name: "GPT-5",
-      icon: IconBrandOpenai,
-      badge: "Beta",
-    },
-  ],
-}
-
-function MentionableIcon({
-  item,
-}: {
-  item: (typeof SAMPLE_DATA.mentionable)[0]
-}) {
-  return item.type === "page" ? (
-    <span className="flex size-4 items-center justify-center">
-      {item.image}
-    </span>
-  ) : (
-    <Avatar className="size-4">
-      <AvatarImage src={item.image} />
-      <AvatarFallback>{item.title[0]}</AvatarFallback>
-    </Avatar>
-  )
-}
-
-export function NotionPromptForm() {
-  const [mentions, setMentions] = useState<string[]>([])
-  const [mentionPopoverOpen, setMentionPopoverOpen] = useState(false)
-  const [modelPopoverOpen, setModelPopoverOpen] = useState(false)
-  const [selectedModel, setSelectedModel] = useState<
-    (typeof SAMPLE_DATA.models)[0]
-  >(SAMPLE_DATA.models[0])
-  const [scopeMenuOpen, setScopeMenuOpen] = useState(false)
-
-  const grouped = useMemo(() => {
-    return SAMPLE_DATA.mentionable.reduce(
-      (acc, item) => {
-        const isAvailable = !mentions.includes(item.title)
-
-        if (isAvailable) {
-          if (!acc[item.type]) {
-            acc[item.type] = []
-          }
-          acc[item.type].push(item)
-        }
-        return acc
-      },
-      {} as Record<string, typeof SAMPLE_DATA.mentionable>
-    )
-  }, [mentions])
-
-  const hasMentions = mentions.length > 0
-
-  return (
-    <form className="[--radius:1.2rem]">
-      <Field>
-        <FieldLabel htmlFor="notion-prompt" className="sr-only">
-          Prompt
-        </FieldLabel>
-        <InputGroup className="bg-background shadow-none dark:bg-background">
-          <InputGroupTextarea
-            id="notion-prompt"
-            placeholder="Ask, search, or make anything..."
-          />
-          <InputGroupAddon align="block-start">
-            <Popover
-              open={mentionPopoverOpen}
-              onOpenChange={setMentionPopoverOpen}
-            >
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <PopoverTrigger asChild>
-                    <InputGroupButton
-                      variant="outline"
-                      size={!hasMentions ? "sm" : "icon-sm"}
-                      className="rounded-full transition-transform"
-                    >
-                      <IconAt /> {!hasMentions && "Add context"}
-                    </InputGroupButton>
-                  </PopoverTrigger>
-                </TooltipTrigger>
-                <TooltipContent>Mention a person, page, or date</TooltipContent>
-              </Tooltip>
-              <PopoverContent className="p-0 [--radius:1.2rem]" align="start">
-                <Command>
-                  <CommandInput placeholder="Search pages..." />
-                  <CommandList>
-                    <CommandEmpty>No pages found</CommandEmpty>
-                    {Object.entries(grouped).map(([type, items]) => (
-                      <CommandGroup
-                        key={type}
-                        heading={type === "page" ? "Pages" : "Users"}
-                      >
-                        {items.map((item) => (
-                          <CommandItem
-                            key={item.title}
-                            value={item.title}
-                            onSelect={(currentValue) => {
-                              setMentions((prev) => [...prev, currentValue])
-                              setMentionPopoverOpen(false)
-                            }}
-                          >
-                            <MentionableIcon item={item} />
-                            {item.title}
-                          </CommandItem>
-                        ))}
-                      </CommandGroup>
-                    ))}
-                  </CommandList>
-                </Command>
-              </PopoverContent>
-            </Popover>
-            <div className="-m-1.5 no-scrollbar flex gap-1 overflow-y-auto p-1.5">
-              {mentions.map((mention) => {
-                const item = SAMPLE_DATA.mentionable.find(
-                  (item) => item.title === mention
-                )
-
-                if (!item) {
-                  return null
-                }
-
-                return (
-                  <InputGroupButton
-                    key={mention}
-                    size="sm"
-                    variant="secondary"
-                    className="rounded-full pl-2!"
-                    onClick={() => {
-                      setMentions((prev) => prev.filter((m) => m !== mention))
-                    }}
-                  >
-                    <MentionableIcon item={item} />
-                    {item.title}
-                    <IconX />
-                  </InputGroupButton>
-                )
-              })}
-            </div>
-          </InputGroupAddon>
-          <InputGroupAddon align="block-end" className="gap-1">
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <InputGroupButton
-                  size="icon-sm"
-                  className="rounded-full"
-                  aria-label="Attach file"
-                >
-                  <IconPaperclip />
-                </InputGroupButton>
-              </TooltipTrigger>
-              <TooltipContent>Attach file</TooltipContent>
-            </Tooltip>
-            <DropdownMenu
-              open={modelPopoverOpen}
-              onOpenChange={setModelPopoverOpen}
-            >
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <DropdownMenuTrigger asChild>
-                    <InputGroupButton size="sm" className="rounded-full">
-                      {selectedModel.icon && selectedModel.name !== "Auto" && (
-                        <selectedModel.icon />
-                      )}
-                      {selectedModel.name}
-                    </InputGroupButton>
-                  </DropdownMenuTrigger>
-                </TooltipTrigger>
-                <TooltipContent>Select AI model</TooltipContent>
-              </Tooltip>
-              <DropdownMenuContent
-                side="top"
-                align="start"
-                className="[--radius:1.2rem]"
-              >
-                <DropdownMenuGroup className="w-72">
-                  <DropdownMenuLabel className="text-xs text-muted-foreground">
-                    Get answers about your workspace
-                  </DropdownMenuLabel>
-                  {SAMPLE_DATA.models.map((model) => (
-                    <DropdownMenuCheckboxItem
-                      key={model.name}
-                      checked={model.name === selectedModel.name}
-                      onCheckedChange={(checked) => {
-                        if (checked) {
-                          setSelectedModel(model)
-                        }
-                      }}
-                      className="pl-2 *:[span:first-child]:right-2 *:[span:first-child]:left-auto"
-                    >
-                      {model.icon && <model.icon />}
-                      {model.name}
-                      {model.badge && (
-                        <Badge
-                          variant="secondary"
-                          className="h-5 rounded-sm bg-blue-100 px-1 text-xs text-blue-800 dark:bg-blue-900 dark:text-blue-100"
-                        >
-                          {model.badge}
-                        </Badge>
-                      )}
-                    </DropdownMenuCheckboxItem>
-                  ))}
-                </DropdownMenuGroup>
-              </DropdownMenuContent>
-            </DropdownMenu>
-            <DropdownMenu open={scopeMenuOpen} onOpenChange={setScopeMenuOpen}>
-              <DropdownMenuTrigger asChild>
-                <InputGroupButton size="sm" className="rounded-full">
-                  <IconWorld /> All Sources
-                </InputGroupButton>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent
-                side="top"
-                align="start"
-                className="[--radius:1.2rem]"
-              >
-                <DropdownMenuGroup>
-                  <DropdownMenuItem
-                    asChild
-                    onSelect={(e) => e.preventDefault()}
-                  >
-                    <label htmlFor="web-search">
-                      <IconWorld /> Web Search{" "}
-                      <Switch
-                        id="web-search"
-                        className="ml-auto"
-                        defaultChecked
-                      />
-                    </label>
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuItem
-                    asChild
-                    onSelect={(e) => e.preventDefault()}
-                  >
-                    <label htmlFor="apps">
-                      <IconApps /> Apps and Integrations
-                      <Switch id="apps" className="ml-auto" defaultChecked />
-                    </label>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <IconCircleDashedPlus /> All Sources I can access
-                  </DropdownMenuItem>
-                  <DropdownMenuSub>
-                    <DropdownMenuSubTrigger>
-                      <Avatar className="size-4">
-                        <AvatarImage src="https://github.com/shadcn.png" />
-                        <AvatarFallback>CN</AvatarFallback>
-                      </Avatar>
-                      shadcn
-                    </DropdownMenuSubTrigger>
-                    <DropdownMenuSubContent className="w-72 p-0 [--radius:1.2rem]">
-                      <Command>
-                        <CommandInput
-                          placeholder="Find or use knowledge in..."
-                          autoFocus
-                        />
-                        <CommandList>
-                          <CommandEmpty>No knowledge found</CommandEmpty>
-                          <CommandGroup>
-                            {SAMPLE_DATA.mentionable
-                              .filter((item) => item.type === "user")
-                              .map((user) => (
-                                <CommandItem
-                                  key={user.title}
-                                  value={user.title}
-                                  onSelect={() => {
-                                    // Handle user selection here
-                                    console.log("Selected user:", user.title)
-                                  }}
-                                >
-                                  <Avatar className="size-4">
-                                    <AvatarImage src={user.image} />
-                                    <AvatarFallback>
-                                      {user.title[0]}
-                                    </AvatarFallback>
-                                  </Avatar>
-                                  {user.title}{" "}
-                                  <span className="text-muted-foreground">
-                                    - {user.workspace}
-                                  </span>
-                                </CommandItem>
-                              ))}
-                          </CommandGroup>
-                        </CommandList>
-                      </Command>
-                    </DropdownMenuSubContent>
-                  </DropdownMenuSub>
-                  <DropdownMenuItem>
-                    <IconBook /> Help Center
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuItem>
-                    <IconPlus /> Connect Apps
-                  </DropdownMenuItem>
-                  <DropdownMenuLabel className="text-xs text-muted-foreground">
-                    We&apos;ll only search in the sources selected here.
-                  </DropdownMenuLabel>
-                </DropdownMenuGroup>
-              </DropdownMenuContent>
-            </DropdownMenu>
-            <InputGroupButton
-              aria-label="Send"
-              className="ml-auto rounded-full"
-              variant="default"
-              size="icon-sm"
-            >
-              <IconArrowUp />
-            </InputGroupButton>
-          </InputGroupAddon>
-        </InputGroup>
-      </Field>
-    </form>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/(pages)/forms/page.tsx b/apps/v4/app/(internal)/sink/(pages)/forms/page.tsx
deleted file mode 100644
index 9145edcf6a..0000000000
--- a/apps/v4/app/(internal)/sink/(pages)/forms/page.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { AppearanceSettings } from "@/app/(internal)/sink/(pages)/forms/appearance-settings"
-import { ChatSettings } from "@/app/(internal)/sink/(pages)/forms/chat-settings"
-import { DisplaySettings } from "@/app/(internal)/sink/(pages)/forms/display-settings"
-import { NotionPromptForm } from "@/app/(internal)/sink/(pages)/forms/notion-prompt-form"
-import { ShipRegistrationForm } from "@/app/(internal)/sink/(pages)/forms/ship-registration-form"
-import { ShippingForm } from "@/app/(internal)/sink/(pages)/forms/shipping-form"
-
-export default function FormsPage() {
-  return (
-    <div className="@container flex flex-1 flex-col gap-12 p-4">
-      <div className="grid flex-1 gap-12 @3xl:grid-cols-2 @5xl:grid-cols-3 @[120rem]:grid-cols-4 [&>div]:max-w-lg">
-        <div className="flex flex-col gap-12">
-          <NotionPromptForm />
-          <ChatSettings />
-        </div>
-        <div className="flex flex-col gap-12">
-          <AppearanceSettings />
-        </div>
-        <div className="flex flex-col gap-12">
-          <DisplaySettings />
-        </div>
-        <div className="flex flex-col gap-12">
-          <ShippingForm />
-        </div>
-        <div className="col-span-2 flex flex-col gap-12">
-          <ShipRegistrationForm />
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/(pages)/forms/ship-registration-form.tsx b/apps/v4/app/(internal)/sink/(pages)/forms/ship-registration-form.tsx
deleted file mode 100644
index 7d1fd5ae96..0000000000
--- a/apps/v4/app/(internal)/sink/(pages)/forms/ship-registration-form.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-import { Button } from "@/registry/new-york-v4/ui/button"
-import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSet,
-  FieldTitle,
-} from "@/registry/new-york-v4/ui/field"
-import { Input } from "@/registry/new-york-v4/ui/input"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-} from "@/registry/new-york-v4/ui/input-group"
-import {
-  RadioGroup,
-  RadioGroupItem,
-} from "@/registry/new-york-v4/ui/radio-group"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york-v4/ui/select"
-import { Textarea } from "@/registry/new-york-v4/ui/textarea"
-
-export function ShipRegistrationForm() {
-  return (
-    <div className="flex max-w-md flex-col gap-6">
-      <div className="flex flex-col gap-2">
-        <h1 className="text-2xl font-bold tracking-tight">
-          Join us in SF or online on October 23
-        </h1>
-        <FieldDescription>
-          Already signed up? <a href="#">Log in</a>
-        </FieldDescription>
-      </div>
-      <form>
-        <FieldGroup>
-          <FieldSet>
-            <FieldLegend>1. Select your ticket type</FieldLegend>
-            <FieldDescription>
-              Select your ticket type to join us in San Francisco or online on
-              October 23.
-            </FieldDescription>
-            <Field>
-              <RadioGroup>
-                <FieldLabel htmlFor="in-person">
-                  <Field orientation="horizontal">
-                    <FieldContent>
-                      <FieldTitle>In Person</FieldTitle>
-                      <FieldDescription>
-                        Join us in San Francisco on October 23.
-                      </FieldDescription>
-                    </FieldContent>
-                    <RadioGroupItem value="in-person" id="in-person" />
-                  </Field>
-                </FieldLabel>
-                <FieldLabel htmlFor="online">
-                  <Field orientation="horizontal">
-                    <FieldContent>
-                      <FieldTitle>Online</FieldTitle>
-                      <FieldDescription>
-                        Join us online on October 23.
-                      </FieldDescription>
-                    </FieldContent>
-                    <RadioGroupItem value="online" id="online" />
-                  </Field>
-                </FieldLabel>
-              </RadioGroup>
-            </Field>
-          </FieldSet>
-          <Field orientation="horizontal">
-            <Checkbox id="next-conf" />
-            <FieldLabel htmlFor="next-conf">
-              Also sign up for Next.js Conf 2025
-            </FieldLabel>
-          </Field>
-          <FieldSet>
-            <FieldLegend>2. Complete your attendee information</FieldLegend>
-            <FieldDescription>
-              By entering your information, you acknowledge that you have read
-              and agree to the <a href="#">Terms of Service</a> and{" "}
-              <a href="#">Privacy Policy</a>.
-            </FieldDescription>
-            <FieldGroup className="grid grid-cols-2 gap-x-4">
-              <Field>
-                <FieldLabel htmlFor="first-name">First Name</FieldLabel>
-                <Input id="first-name" placeholder="Jane" required />
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="last-name">Last Name</FieldLabel>
-                <Input id="last-name" placeholder="Doe" required />
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="email">Email</FieldLabel>
-                <Input id="email" placeholder="jane.doe@example.com" required />
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="company">Company</FieldLabel>
-                <Input id="company" placeholder="Example Inc." required />
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="job-title">Job Title</FieldLabel>
-                <Input
-                  id="job-title"
-                  placeholder="Software Engineer"
-                  required
-                />
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="country">Country</FieldLabel>
-                <Select>
-                  <SelectTrigger>
-                    <SelectValue placeholder="Select a country" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="us">United States</SelectItem>
-                    <SelectItem value="uk">United Kingdom</SelectItem>
-                    <SelectItem value="ca">Canada</SelectItem>
-                  </SelectContent>
-                </Select>
-              </Field>
-              <Field className="col-span-2">
-                <FieldLabel htmlFor="topics">
-                  What AI-related topics are you most curious about?
-                </FieldLabel>
-                <Textarea
-                  id="topics"
-                  placeholder="Agents, Security, Improving UX/Personalization, etc."
-                  className="min-h-[100px]"
-                />
-              </Field>
-              <Field className="col-span-2">
-                <FieldLabel htmlFor="workloads">
-                  What types of AI workloads are you tackling right now?
-                </FieldLabel>
-                <Textarea id="workloads" className="min-h-[100px]" />
-              </Field>
-            </FieldGroup>
-          </FieldSet>
-          <FieldSet>
-            <FieldLegend>3. Buy your ticket</FieldLegend>
-            <FieldDescription>
-              Enter your card details to purchase your ticket.
-            </FieldDescription>
-            <FieldGroup className="grid grid-cols-2 gap-x-4">
-              <Field className="col-span-2">
-                <FieldLabel htmlFor="card-number">Card Number</FieldLabel>
-                <Input
-                  id="card-number"
-                  placeholder="1234 5678 9012 3456"
-                  required
-                />
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="expiry-date">Expiry Date</FieldLabel>
-                <Input id="expiry-date" placeholder="MM/YY" required />
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="cvv">CVV</FieldLabel>
-                <Input id="cvv" placeholder="123" required />
-              </Field>
-              <Field className="col-span-2">
-                <FieldLabel htmlFor="promo-code">Promo Code</FieldLabel>
-                <InputGroup>
-                  <InputGroupInput id="promo-code" placeholder="PROMO10" />
-                  <InputGroupAddon align="inline-end">
-                    <InputGroupButton>Apply</InputGroupButton>
-                  </InputGroupAddon>
-                </InputGroup>
-              </Field>
-            </FieldGroup>
-          </FieldSet>
-          <Field>
-            <Button type="submit">Purchase Ticket</Button>
-            <FieldDescription>
-              By clicking Purchase Ticket, you agree to the{" "}
-              <a href="#">Terms of Service</a> and{" "}
-              <a href="#">Privacy Policy</a>.
-            </FieldDescription>
-          </Field>
-        </FieldGroup>
-      </form>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/(pages)/forms/shipping-form.tsx b/apps/v4/app/(internal)/sink/(pages)/forms/shipping-form.tsx
deleted file mode 100644
index ab39daa500..0000000000
--- a/apps/v4/app/(internal)/sink/(pages)/forms/shipping-form.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import { Badge } from "@/registry/new-york-v4/ui/badge"
-import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSet,
-  FieldTitle,
-} from "@/registry/new-york-v4/ui/field"
-import { Input } from "@/registry/new-york-v4/ui/input"
-import {
-  RadioGroup,
-  RadioGroupItem,
-} from "@/registry/new-york-v4/ui/radio-group"
-import { Textarea } from "@/registry/new-york-v4/ui/textarea"
-
-export function ShippingForm() {
-  return (
-    <FieldSet>
-      <FieldLegend>Shipping Details</FieldLegend>
-      <FieldDescription>
-        Please provide your shipping details so we can deliver your order.
-      </FieldDescription>
-      <FieldGroup>
-        <Field>
-          <FieldLabel htmlFor="street-address">Street Address</FieldLabel>
-          <Input id="street-address" autoComplete="off" />
-        </Field>
-        <Field>
-          <FieldLabel htmlFor="city">City</FieldLabel>
-          <Input id="city" />
-        </Field>
-        <FieldSet>
-          <FieldLegend variant="label">Shipping Method</FieldLegend>
-          <FieldDescription>
-            Please select the shipping method for your order.
-          </FieldDescription>
-          <RadioGroup>
-            <Field orientation="horizontal">
-              <RadioGroupItem value="standard" id="shipping-method-1" />
-              <FieldLabel htmlFor="shipping-method-1" className="font-normal">
-                Standard{" "}
-                <Badge className="rounded-full py-px" variant="outline">
-                  Free
-                </Badge>
-              </FieldLabel>
-            </Field>
-            <Field orientation="horizontal">
-              <RadioGroupItem value="express" id="shipping-method-2" />
-              <FieldLabel htmlFor="shipping-method-2" className="font-normal">
-                Express
-              </FieldLabel>
-            </Field>
-          </RadioGroup>
-        </FieldSet>
-        <Field>
-          <FieldLabel htmlFor="message">Message</FieldLabel>
-          <Textarea id="message" />
-          <FieldDescription>Anything else you want to add?</FieldDescription>
-        </Field>
-        <FieldSet>
-          <FieldLegend>Additional Items</FieldLegend>
-          <FieldDescription>
-            Please select the additional items for your order.
-          </FieldDescription>
-          <FieldGroup data-slot="checkbox-group">
-            <FieldLabel htmlFor="gift-wrapping">
-              <Field orientation="horizontal">
-                <Checkbox
-                  value="gift-wrapping"
-                  id="gift-wrapping"
-                  aria-label="Gift Wrapping"
-                />
-                <FieldContent>
-                  <FieldTitle>Gift Wrapping</FieldTitle>
-                  <FieldDescription>
-                    Add elegant gift wrapping with a personalized message.
-                  </FieldDescription>
-                </FieldContent>
-              </Field>
-            </FieldLabel>
-            <FieldLabel htmlFor="insurance">
-              <Field orientation="horizontal">
-                <Checkbox
-                  value="insurance"
-                  id="insurance"
-                  aria-label="Package Insurance"
-                />
-                <FieldContent>
-                  <FieldTitle>Package Insurance</FieldTitle>
-                  <FieldDescription>
-                    Protect your shipment with comprehensive insurance coverage.
-                  </FieldDescription>
-                </FieldContent>
-              </Field>
-            </FieldLabel>
-            <FieldLabel htmlFor="signature-confirmation">
-              <Field orientation="horizontal">
-                <Checkbox
-                  value="signature-confirmation"
-                  id="signature-confirmation"
-                  aria-label="Signature Confirmation"
-                />
-                <FieldContent>
-                  <FieldTitle>Signature Confirmation</FieldTitle>
-                  <FieldDescription>
-                    Require recipient signature upon delivery for added
-                    security.
-                  </FieldDescription>
-                </FieldContent>
-              </Field>
-            </FieldLabel>
-          </FieldGroup>
-        </FieldSet>
-      </FieldGroup>
-    </FieldSet>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/(pages)/next-form/actions.ts b/apps/v4/app/(internal)/sink/(pages)/next-form/actions.ts
deleted file mode 100644
index 146e12d758..0000000000
--- a/apps/v4/app/(internal)/sink/(pages)/next-form/actions.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-"use server"
-
-import { type FormState } from "@/app/(internal)/sink/(pages)/next-form/example-form"
-import { exampleFormSchema } from "@/app/(internal)/sink/(pages)/schema"
-
-export async function subscriptionAction(
-  _prevState: FormState,
-  formData: FormData
-): Promise<FormState> {
-  // Simulate server processing
-  await new Promise((resolve) => setTimeout(resolve, 1000))
-
-  const values = {
-    name: formData.get("name") as string,
-    email: formData.get("email") as string,
-    plan: formData.get("plan") as "basic" | "pro",
-    billingPeriod: formData.get("billingPeriod") as string,
-    addons: formData.getAll("addons") as string[],
-    teamSize: parseInt(formData.get("teamSize") as string) || 1,
-    emailNotifications: formData.get("emailNotifications") === "on",
-    startDate: formData.get("startDate")
-      ? new Date(formData.get("startDate") as string)
-      : new Date(),
-    theme: formData.get("theme") as string,
-    password: formData.get("password") as string,
-    comments: formData.get("comments") as string,
-  }
-
-  const result = exampleFormSchema.safeParse(values)
-
-  if (!result.success) {
-    return {
-      values,
-      success: false,
-      errors: result.error.flatten().fieldErrors,
-    }
-  }
-
-  // Simulate some business logic validation
-  if (result.data.email.includes("invalid")) {
-    return {
-      values,
-      success: false,
-      errors: {
-        email: ["This email domain is not supported"],
-      },
-    }
-  }
-
-  return {
-    values,
-    errors: null,
-    success: true,
-  }
-}
diff --git a/apps/v4/app/(internal)/sink/(pages)/next-form/example-form.tsx b/apps/v4/app/(internal)/sink/(pages)/next-form/example-form.tsx
deleted file mode 100644
index ec701a0994..0000000000
--- a/apps/v4/app/(internal)/sink/(pages)/next-form/example-form.tsx
+++ /dev/null
@@ -1,394 +0,0 @@
-"use client"
-
-import * as React from "react"
-import Form from "next/form"
-import { type z } from "zod"
-
-import { Button } from "@/registry/new-york-v4/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york-v4/ui/card"
-import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/registry/new-york-v4/ui/dialog"
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldError,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSeparator,
-  FieldSet,
-  FieldTitle,
-} from "@/registry/new-york-v4/ui/field"
-import { Input } from "@/registry/new-york-v4/ui/input"
-import {
-  RadioGroup,
-  RadioGroupItem,
-} from "@/registry/new-york-v4/ui/radio-group"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york-v4/ui/select"
-import { Spinner } from "@/registry/new-york-v4/ui/spinner"
-import { Switch } from "@/registry/new-york-v4/ui/switch"
-import { Textarea } from "@/registry/new-york-v4/ui/textarea"
-import {
-  addons,
-  type exampleFormSchema,
-} from "@/app/(internal)/sink/(pages)/schema"
-
-import { subscriptionAction } from "./actions"
-
-export type FormState = {
-  values: z.infer<typeof exampleFormSchema>
-  errors: null | Partial<
-    Record<keyof z.infer<typeof exampleFormSchema>, string[]>
-  >
-  success: boolean
-}
-
-export function ExampleForm() {
-  const formId = React.useId()
-  const [formKey, setFormKey] = React.useState(formId)
-  const [showResults, setShowResults] = React.useState(false)
-  const [formState, formAction, pending] = React.useActionState<
-    FormState,
-    FormData
-  >(subscriptionAction, {
-    values: {
-      name: "",
-      email: "",
-      plan: "basic",
-      billingPeriod: "",
-      addons: ["analytics"],
-      teamSize: 1,
-      emailNotifications: false,
-      comments: "",
-      startDate: new Date(),
-      theme: "system",
-      password: "",
-    },
-    errors: null,
-    success: false,
-  })
-
-  React.useEffect(() => {
-    if (formState.success) {
-      setShowResults(true)
-    }
-  }, [formState.success])
-
-  return (
-    <>
-      <Card className="w-full max-w-sm">
-        <CardHeader className="border-b">
-          <CardTitle>Subscription Form</CardTitle>
-          <CardDescription>
-            Create your subscription using server actions and useActionState.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <Form action={formAction} id="subscription-form" key={formKey}>
-            <FieldGroup>
-              <Field data-invalid={!!formState.errors?.name?.length}>
-                <FieldLabel htmlFor="name">Name</FieldLabel>
-                <Input
-                  id="name"
-                  name="name"
-                  defaultValue={formState.values.name}
-                  disabled={pending}
-                  aria-invalid={!!formState.errors?.name?.length}
-                  autoComplete="off"
-                />
-                <FieldDescription>Enter your name</FieldDescription>
-                {formState.errors?.name && (
-                  <FieldError>{formState.errors.name[0]}</FieldError>
-                )}
-              </Field>
-              <Field data-invalid={!!formState.errors?.email?.length}>
-                <FieldLabel htmlFor="email">Email</FieldLabel>
-                <Input
-                  id="email"
-                  name="email"
-                  type="email"
-                  defaultValue={formState.values.email}
-                  disabled={pending}
-                  aria-invalid={!!formState.errors?.email?.length}
-                  autoComplete="off"
-                />
-                <FieldDescription>Enter your email address</FieldDescription>
-                {formState.errors?.email && (
-                  <FieldError>{formState.errors.email[0]}</FieldError>
-                )}
-              </Field>
-              <FieldSeparator />
-              <FieldSet data-invalid={!!formState.errors?.plan?.length}>
-                <FieldLegend>Subscription Plan</FieldLegend>
-                <FieldDescription>
-                  Choose your subscription plan.
-                </FieldDescription>
-                <RadioGroup
-                  name="plan"
-                  defaultValue={formState.values.plan}
-                  disabled={pending}
-                  aria-invalid={!!formState.errors?.plan?.length}
-                >
-                  <FieldLabel htmlFor="basic">
-                    <Field orientation="horizontal">
-                      <FieldContent>
-                        <FieldTitle>Basic</FieldTitle>
-                        <FieldDescription>
-                          For individuals and small teams
-                        </FieldDescription>
-                      </FieldContent>
-                      <RadioGroupItem value="basic" id="basic" />
-                    </Field>
-                  </FieldLabel>
-                  <FieldLabel htmlFor="pro">
-                    <Field orientation="horizontal">
-                      <FieldContent>
-                        <FieldTitle>Pro</FieldTitle>
-                        <FieldDescription>
-                          For businesses with higher demands
-                        </FieldDescription>
-                      </FieldContent>
-                      <RadioGroupItem value="pro" id="pro" />
-                    </Field>
-                  </FieldLabel>
-                </RadioGroup>
-                {formState.errors?.plan && (
-                  <FieldError>{formState.errors.plan[0]}</FieldError>
-                )}
-              </FieldSet>
-              <FieldSeparator />
-              <Field data-invalid={!!formState.errors?.billingPeriod?.length}>
-                <FieldLabel htmlFor="billingPeriod">Billing Period</FieldLabel>
-                <Select
-                  name="billingPeriod"
-                  defaultValue={formState.values.billingPeriod}
-                  disabled={pending}
-                  aria-invalid={!!formState.errors?.billingPeriod?.length}
-                >
-                  <SelectTrigger id="billingPeriod">
-                    <SelectValue placeholder="Select billing period" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="monthly">Monthly</SelectItem>
-                    <SelectItem value="yearly">Yearly</SelectItem>
-                  </SelectContent>
-                </Select>
-                <FieldDescription>
-                  Choose how often you want to be billed.
-                </FieldDescription>
-                {formState.errors?.billingPeriod && (
-                  <FieldError>{formState.errors.billingPeriod[0]}</FieldError>
-                )}
-              </Field>
-              <FieldSeparator />
-              <FieldSet data-invalid={!!formState.errors?.addons?.length}>
-                <FieldLegend>Add-ons</FieldLegend>
-                <FieldDescription>
-                  Select additional features you&apos;d like to include.
-                </FieldDescription>
-                <FieldGroup data-slot="checkbox-group">
-                  {addons.map((addon) => (
-                    <Field key={addon.id} orientation="horizontal">
-                      <Checkbox
-                        id={addon.id}
-                        name="addons"
-                        value={addon.id}
-                        defaultChecked={formState.values.addons.includes(
-                          addon.id
-                        )}
-                        disabled={pending}
-                        aria-invalid={!!formState.errors?.addons?.length}
-                      />
-                      <FieldContent>
-                        <FieldLabel htmlFor={addon.id}>
-                          {addon.title}
-                        </FieldLabel>
-                        <FieldDescription>{addon.description}</FieldDescription>
-                      </FieldContent>
-                    </Field>
-                  ))}
-                </FieldGroup>
-                {formState.errors?.addons && (
-                  <FieldError>{formState.errors.addons[0]}</FieldError>
-                )}
-              </FieldSet>
-              <FieldSeparator />
-              <Field data-invalid={!!formState.errors?.teamSize?.length}>
-                <FieldLabel htmlFor="teamSize">Team Size</FieldLabel>
-                <Input
-                  id="teamSize"
-                  name="teamSize"
-                  type="number"
-                  min="1"
-                  max="50"
-                  defaultValue={formState.values.teamSize.toString()}
-                  disabled={pending}
-                  aria-invalid={!!formState.errors?.teamSize?.length}
-                />
-                <FieldDescription>
-                  How many people will be using the subscription? (1-50)
-                </FieldDescription>
-                {formState.errors?.teamSize && (
-                  <FieldError>{formState.errors.teamSize[0]}</FieldError>
-                )}
-              </Field>
-              <FieldSeparator />
-              <Field orientation="horizontal">
-                <FieldContent>
-                  <FieldLabel htmlFor="emailNotifications">
-                    Email Notifications
-                  </FieldLabel>
-                  <FieldDescription>
-                    Receive email updates about your subscription
-                  </FieldDescription>
-                </FieldContent>
-                <Switch
-                  id="emailNotifications"
-                  name="emailNotifications"
-                  defaultChecked={formState.values.emailNotifications}
-                  disabled={pending}
-                  aria-invalid={!!formState.errors?.emailNotifications?.length}
-                />
-              </Field>
-              <FieldSeparator />
-              <Field data-invalid={!!formState.errors?.startDate?.length}>
-                <FieldLabel htmlFor="startDate">Start Date</FieldLabel>
-                <Input
-                  id="startDate"
-                  name="startDate"
-                  type="date"
-                  defaultValue={
-                    formState.values.startDate.toISOString().split("T")[0]
-                  }
-                  disabled={pending}
-                  aria-invalid={!!formState.errors?.startDate?.length}
-                />
-                <FieldDescription>
-                  Choose when your subscription should start
-                </FieldDescription>
-                {formState.errors?.startDate && (
-                  <FieldError>{formState.errors.startDate[0]}</FieldError>
-                )}
-              </Field>
-              <FieldSeparator />
-              <Field data-invalid={!!formState.errors?.theme?.length}>
-                <FieldLabel htmlFor="theme">Theme Preference</FieldLabel>
-                <Select
-                  name="theme"
-                  defaultValue={formState.values.theme}
-                  disabled={pending}
-                  aria-invalid={!!formState.errors?.theme?.length}
-                >
-                  <SelectTrigger id="theme">
-                    <SelectValue placeholder="Select theme" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="light">Light</SelectItem>
-                    <SelectItem value="dark">Dark</SelectItem>
-                    <SelectItem value="system">System</SelectItem>
-                  </SelectContent>
-                </Select>
-                <FieldDescription>
-                  Choose your preferred color theme
-                </FieldDescription>
-                {formState.errors?.theme && (
-                  <FieldError>{formState.errors.theme[0]}</FieldError>
-                )}
-              </Field>
-              <FieldSeparator />
-              <Field data-invalid={!!formState.errors?.password?.length}>
-                <FieldLabel htmlFor="password">Password</FieldLabel>
-                <Input
-                  id="password"
-                  name="password"
-                  type="password"
-                  defaultValue={formState.values.password}
-                  placeholder="Enter your password"
-                  disabled={pending}
-                  aria-invalid={!!formState.errors?.password?.length}
-                />
-                <FieldDescription>
-                  Must contain uppercase, lowercase, number, and be 8+
-                  characters
-                </FieldDescription>
-                {formState.errors?.password && (
-                  <FieldError>{formState.errors.password[0]}</FieldError>
-                )}
-              </Field>
-              <FieldSeparator />
-              <Field data-invalid={!!formState.errors?.comments?.length}>
-                <FieldLabel htmlFor="comments">Additional Comments</FieldLabel>
-                <Textarea
-                  id="comments"
-                  name="comments"
-                  defaultValue={formState.values.comments}
-                  placeholder="Tell us more about your needs..."
-                  rows={3}
-                  disabled={pending}
-                  aria-invalid={!!formState.errors?.comments?.length}
-                />
-                <FieldDescription>
-                  Share any additional requirements or feedback (10-240
-                  characters)
-                </FieldDescription>
-                {formState.errors?.comments && (
-                  <FieldError>{formState.errors.comments[0]}</FieldError>
-                )}
-              </Field>
-            </FieldGroup>
-          </Form>
-        </CardContent>
-        <CardFooter className="border-t">
-          <Field orientation="horizontal" className="justify-end">
-            <Button
-              type="button"
-              variant="outline"
-              disabled={pending}
-              form="subscription-form"
-              onClick={() => setFormKey(formKey + 1)}
-            >
-              Reset
-            </Button>
-            <Button type="submit" disabled={pending} form="subscription-form">
-              {pending && <Spinner />}
-              Create Subscription
-            </Button>
-          </Field>
-        </CardFooter>
-      </Card>
-      <Dialog open={showResults} onOpenChange={setShowResults}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Subscription Created!</DialogTitle>
-            <DialogDescription>
-              Here are the details of your subscription.
-            </DialogDescription>
-          </DialogHeader>
-          <pre className="overflow-x-auto rounded-md bg-black p-4 font-mono text-sm text-white">
-            <code>{JSON.stringify(formState.values, null, 2)}</code>
-          </pre>
-        </DialogContent>
-      </Dialog>
-    </>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/(pages)/next-form/page.tsx b/apps/v4/app/(internal)/sink/(pages)/next-form/page.tsx
deleted file mode 100644
index dd65f28b0d..0000000000
--- a/apps/v4/app/(internal)/sink/(pages)/next-form/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { ExampleForm } from "@/app/(internal)/sink/(pages)/next-form/example-form"
-
-export default function NextFormPage() {
-  return (
-    <div className="flex min-h-screen items-center justify-center p-4">
-      <ExampleForm />
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/(pages)/react-hook-form/example-form.tsx b/apps/v4/app/(internal)/sink/(pages)/react-hook-form/example-form.tsx
deleted file mode 100644
index e16192be99..0000000000
--- a/apps/v4/app/(internal)/sink/(pages)/react-hook-form/example-form.tsx
+++ /dev/null
@@ -1,490 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import { zodResolver } from "@hookform/resolvers/zod"
-import { format } from "date-fns"
-import { Controller, useForm } from "react-hook-form"
-import type z from "zod"
-
-import { Button } from "@/registry/new-york-v4/ui/button"
-import { Calendar } from "@/registry/new-york-v4/ui/calendar"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york-v4/ui/card"
-import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/registry/new-york-v4/ui/dialog"
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldError,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSeparator,
-  FieldSet,
-  FieldTitle,
-} from "@/registry/new-york-v4/ui/field"
-import { Input } from "@/registry/new-york-v4/ui/input"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/new-york-v4/ui/popover"
-import {
-  RadioGroup,
-  RadioGroupItem,
-} from "@/registry/new-york-v4/ui/radio-group"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york-v4/ui/select"
-import { Slider } from "@/registry/new-york-v4/ui/slider"
-import { Switch } from "@/registry/new-york-v4/ui/switch"
-import { Textarea } from "@/registry/new-york-v4/ui/textarea"
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@/registry/new-york-v4/ui/toggle-group"
-import { addons, exampleFormSchema } from "@/app/(internal)/sink/(pages)/schema"
-
-export function ExampleForm() {
-  const [values, setValues] = useState<z.infer<typeof exampleFormSchema>>()
-  const [open, setOpen] = useState(false)
-  const form = useForm<z.infer<typeof exampleFormSchema>>({
-    resolver: zodResolver(exampleFormSchema),
-    mode: "onChange",
-    defaultValues: {
-      name: "",
-      email: "",
-      plan: "basic" as const,
-      billingPeriod: "",
-      addons: ["analytics"],
-      emailNotifications: false,
-      teamSize: 1,
-      comments: "",
-      startDate: new Date(),
-      theme: "system",
-      password: "",
-    },
-  })
-
-  function onSubmit(data: z.infer<typeof exampleFormSchema>) {
-    setValues(data)
-    setOpen(true)
-  }
-
-  return (
-    <>
-      <Card className="w-full max-w-sm">
-        <CardHeader className="border-b">
-          <CardTitle>React Hook Form</CardTitle>
-          <CardDescription>
-            This form uses React Hook Form with Zod validation.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form id="subscription-form" onSubmit={form.handleSubmit(onSubmit)}>
-            <FieldGroup>
-              <Controller
-                name="name"
-                control={form.control}
-                render={({ field, fieldState }) => {
-                  const isInvalid = fieldState.invalid
-                  return (
-                    <Field data-invalid={isInvalid}>
-                      <FieldLabel htmlFor={field.name}>Name</FieldLabel>
-                      <Input
-                        {...field}
-                        id={field.name}
-                        aria-invalid={isInvalid}
-                        autoComplete="off"
-                      />
-                      <FieldDescription>Enter your name</FieldDescription>
-                      {isInvalid && <FieldError errors={[fieldState.error]} />}
-                    </Field>
-                  )
-                }}
-              />
-              <Controller
-                name="email"
-                control={form.control}
-                render={({ field, fieldState }) => {
-                  const isInvalid = fieldState.invalid
-                  return (
-                    <Field data-invalid={isInvalid}>
-                      <FieldLabel htmlFor={field.name}>Email</FieldLabel>
-                      <Input
-                        {...field}
-                        type="email"
-                        id={field.name}
-                        aria-invalid={isInvalid}
-                        autoComplete="off"
-                      />
-                      <FieldDescription>
-                        Enter your email address
-                      </FieldDescription>
-                      {isInvalid && <FieldError errors={[fieldState.error]} />}
-                    </Field>
-                  )
-                }}
-              />
-              <FieldSeparator />
-              <Controller
-                name="plan"
-                control={form.control}
-                render={({ field, fieldState }) => {
-                  const isInvalid = fieldState.invalid
-                  return (
-                    <FieldSet data-invalid={isInvalid}>
-                      <FieldLegend>Subscription Plan</FieldLegend>
-                      <FieldDescription>
-                        Choose your subscription plan.
-                      </FieldDescription>
-                      <RadioGroup
-                        name={field.name}
-                        value={field.value}
-                        onValueChange={field.onChange}
-                        aria-invalid={isInvalid}
-                      >
-                        <FieldLabel htmlFor="basic">
-                          <Field orientation="horizontal">
-                            <FieldContent>
-                              <FieldTitle>Basic</FieldTitle>
-                              <FieldDescription>
-                                For individuals and small teams
-                              </FieldDescription>
-                            </FieldContent>
-                            <RadioGroupItem
-                              value="basic"
-                              id="basic"
-                              aria-invalid={isInvalid}
-                            />
-                          </Field>
-                        </FieldLabel>
-                        <FieldLabel htmlFor="pro">
-                          <Field orientation="horizontal">
-                            <FieldContent>
-                              <FieldTitle>Pro</FieldTitle>
-                              <FieldDescription>
-                                For businesses with higher demands
-                              </FieldDescription>
-                            </FieldContent>
-                            <RadioGroupItem
-                              value="pro"
-                              id="pro"
-                              aria-invalid={isInvalid}
-                            />
-                          </Field>
-                        </FieldLabel>
-                      </RadioGroup>
-                      {isInvalid && <FieldError errors={[fieldState.error]} />}
-                    </FieldSet>
-                  )
-                }}
-              />
-              <FieldSeparator />
-              <Controller
-                name="billingPeriod"
-                control={form.control}
-                render={({ field, fieldState }) => {
-                  const isInvalid = fieldState.invalid
-                  return (
-                    <Field data-invalid={isInvalid}>
-                      <FieldLabel htmlFor={field.name}>
-                        Billing Period
-                      </FieldLabel>
-                      <Select
-                        name={field.name}
-                        value={field.value}
-                        onValueChange={field.onChange}
-                        aria-invalid={isInvalid}
-                      >
-                        <SelectTrigger id={field.name}>
-                          <SelectValue placeholder="Select billing period" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="monthly">Monthly</SelectItem>
-                          <SelectItem value="yearly">Yearly</SelectItem>
-                        </SelectContent>
-                      </Select>
-                      <FieldDescription>
-                        Choose how often you want to be billed.
-                      </FieldDescription>
-                      {isInvalid && <FieldError errors={[fieldState.error]} />}
-                    </Field>
-                  )
-                }}
-              />
-              <FieldSeparator />
-              <Controller
-                name="addons"
-                control={form.control}
-                render={({ field, fieldState }) => {
-                  const isInvalid = fieldState.invalid
-                  return (
-                    <FieldSet data-invalid={isInvalid}>
-                      <FieldLegend>Add-ons</FieldLegend>
-                      <FieldDescription>
-                        Select additional features you&apos;d like to include.
-                      </FieldDescription>
-                      <FieldGroup data-slot="checkbox-group">
-                        {addons.map((addon) => (
-                          <Field key={addon.id} orientation="horizontal">
-                            <Checkbox
-                              id={addon.id}
-                              name={field.name}
-                              aria-invalid={isInvalid}
-                              checked={field.value.includes(addon.id)}
-                              onCheckedChange={(checked) => {
-                                const newValue = checked
-                                  ? [...field.value, addon.id]
-                                  : field.value.filter(
-                                      (value) => value !== addon.id
-                                    )
-                                field.onChange(newValue)
-                                field.onBlur()
-                              }}
-                            />
-                            <FieldContent>
-                              <FieldLabel htmlFor={addon.id}>
-                                {addon.title}
-                              </FieldLabel>
-                              <FieldDescription>
-                                {addon.description}
-                              </FieldDescription>
-                            </FieldContent>
-                          </Field>
-                        ))}
-                      </FieldGroup>
-                      {isInvalid && <FieldError errors={[fieldState.error]} />}
-                    </FieldSet>
-                  )
-                }}
-              />
-              <FieldSeparator />
-              <Controller
-                name="teamSize"
-                control={form.control}
-                render={({ field, fieldState }) => {
-                  const isInvalid = fieldState.invalid
-                  return (
-                    <Field data-invalid={isInvalid}>
-                      <FieldTitle>Team Size</FieldTitle>
-                      <FieldDescription>
-                        How many people will be using the subscription?
-                      </FieldDescription>
-                      <Slider
-                        id={field.name}
-                        name={field.name}
-                        value={[field.value]}
-                        onValueChange={field.onChange}
-                        min={1}
-                        max={50}
-                        step={1}
-                        aria-invalid={isInvalid}
-                      />
-                      {isInvalid && <FieldError errors={[fieldState.error]} />}
-                    </Field>
-                  )
-                }}
-              />
-              <FieldSeparator />
-              <Controller
-                name="emailNotifications"
-                control={form.control}
-                render={({ field, fieldState }) => {
-                  const isInvalid = fieldState.invalid
-                  return (
-                    <Field orientation="horizontal">
-                      <FieldContent>
-                        <FieldLabel htmlFor={field.name}>
-                          Email Notifications
-                        </FieldLabel>
-                        <FieldDescription>
-                          Receive email updates about your subscription
-                        </FieldDescription>
-                      </FieldContent>
-                      <Switch
-                        id={field.name}
-                        name={field.name}
-                        checked={field.value}
-                        onCheckedChange={field.onChange}
-                        aria-invalid={isInvalid}
-                      />
-                      {isInvalid && <FieldError errors={[fieldState.error]} />}
-                    </Field>
-                  )
-                }}
-              />
-              <FieldSeparator />
-              <Controller
-                name="startDate"
-                control={form.control}
-                render={({ field, fieldState }) => {
-                  const isInvalid = fieldState.invalid
-                  return (
-                    <Field data-invalid={isInvalid}>
-                      <FieldLabel htmlFor={field.name}>Start Date</FieldLabel>
-                      <Popover>
-                        <PopoverTrigger asChild>
-                          <Button
-                            id={field.name}
-                            variant="outline"
-                            className="justify-start"
-                            aria-invalid={isInvalid}
-                          >
-                            {field.value ? (
-                              format(field.value, "PPP")
-                            ) : (
-                              <span>Pick a date</span>
-                            )}
-                          </Button>
-                        </PopoverTrigger>
-                        <PopoverContent className="w-auto p-0" align="start">
-                          <Calendar
-                            required
-                            mode="single"
-                            selected={field.value}
-                            onSelect={field.onChange}
-                          />
-                        </PopoverContent>
-                      </Popover>
-                      <FieldDescription>
-                        Choose when your subscription should start
-                      </FieldDescription>
-                      {isInvalid && <FieldError errors={[fieldState.error]} />}
-                    </Field>
-                  )
-                }}
-              />
-              <FieldSeparator />
-              <Controller
-                name="theme"
-                control={form.control}
-                render={({ field, fieldState }) => {
-                  const isInvalid = fieldState.invalid
-                  return (
-                    <Field data-invalid={isInvalid}>
-                      <FieldTitle>Theme Preference</FieldTitle>
-                      <ToggleGroup
-                        type="single"
-                        variant="outline"
-                        value={field.value}
-                        onValueChange={(value) =>
-                          value && field.onChange(value)
-                        }
-                        aria-invalid={isInvalid}
-                      >
-                        <ToggleGroupItem value="light">Light</ToggleGroupItem>
-                        <ToggleGroupItem value="dark">Dark</ToggleGroupItem>
-                        <ToggleGroupItem value="system">System</ToggleGroupItem>
-                      </ToggleGroup>
-                      <FieldDescription>
-                        Choose your preferred color theme
-                      </FieldDescription>
-                      {isInvalid && <FieldError errors={[fieldState.error]} />}
-                    </Field>
-                  )
-                }}
-              />
-              <FieldSeparator />
-              <Controller
-                name="password"
-                control={form.control}
-                render={({ field, fieldState }) => {
-                  const isInvalid = fieldState.invalid
-                  return (
-                    <Field data-invalid={isInvalid}>
-                      <FieldLabel htmlFor={field.name}>Password</FieldLabel>
-                      <Input
-                        {...field}
-                        type="password"
-                        placeholder="Enter your password"
-                        id={field.name}
-                        aria-invalid={isInvalid}
-                      />
-                      <FieldDescription>
-                        Must contain uppercase, lowercase, number, and be 8+
-                        characters
-                      </FieldDescription>
-                      {isInvalid && <FieldError errors={[fieldState.error]} />}
-                    </Field>
-                  )
-                }}
-              />
-              <FieldSeparator />
-              <Controller
-                name="comments"
-                control={form.control}
-                render={({ field, fieldState }) => {
-                  const isInvalid = fieldState.invalid
-                  return (
-                    <Field data-invalid={isInvalid}>
-                      <FieldLabel htmlFor={field.name}>
-                        Additional Comments
-                      </FieldLabel>
-                      <Textarea
-                        {...field}
-                        id={field.name}
-                        placeholder="Tell us more about your needs..."
-                        rows={3}
-                        aria-invalid={isInvalid}
-                      />
-                      <FieldDescription>
-                        Share any additional requirements or feedback (10-240
-                        characters)
-                      </FieldDescription>
-                      {isInvalid && <FieldError errors={[fieldState.error]} />}
-                    </Field>
-                  )
-                }}
-              />
-            </FieldGroup>
-          </form>
-        </CardContent>
-        <CardFooter className="border-t">
-          <Field orientation="horizontal" className="justify-end">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => form.reset()}
-            >
-              Reset
-            </Button>
-            <Button type="submit" form="subscription-form">
-              Submit
-            </Button>
-          </Field>
-        </CardFooter>
-      </Card>
-      <Dialog open={open} onOpenChange={setOpen}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Submitted Values</DialogTitle>
-            <DialogDescription>
-              Here are the values you submitted.
-            </DialogDescription>
-          </DialogHeader>
-          <pre className="overflow-x-auto rounded-md bg-black p-4 font-mono text-sm text-white">
-            <code>{JSON.stringify(values, null, 2)}</code>
-          </pre>
-        </DialogContent>
-      </Dialog>
-    </>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/(pages)/react-hook-form/page.tsx b/apps/v4/app/(internal)/sink/(pages)/react-hook-form/page.tsx
deleted file mode 100644
index ae6c242f7a..0000000000
--- a/apps/v4/app/(internal)/sink/(pages)/react-hook-form/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { ExampleForm } from "@/app/(internal)/sink/(pages)/react-hook-form/example-form"
-
-export default function ReactHookFormPage() {
-  return (
-    <div className="flex min-h-screen items-center justify-center p-4">
-      <ExampleForm />
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/(pages)/schema.ts b/apps/v4/app/(internal)/sink/(pages)/schema.ts
deleted file mode 100644
index 6d30ee6d5e..0000000000
--- a/apps/v4/app/(internal)/sink/(pages)/schema.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-import { z } from "zod"
-
-export const addons = [
-  {
-    id: "analytics",
-    title: "Analytics",
-    description: "Advanced analytics and reporting",
-  },
-  {
-    id: "backup",
-    title: "Backup",
-    description: "Automated daily backups",
-  },
-  {
-    id: "support",
-    title: "Priority Support",
-    description: "24/7 premium customer support",
-  },
-] as const
-
-export const exampleFormSchema = z.object({
-  name: z
-    .string({
-      required_error: "Name is required",
-      invalid_type_error: "Name must be a string",
-    })
-    .min(2, "Name must be at least 2 characters")
-    .max(50, "Name must be less than 50 characters")
-    .refine((value) => !/\d/.test(value), {
-      message: "Name must not contain numbers",
-    }),
-
-  email: z
-    .string({
-      required_error: "Email is required",
-    })
-    .email("Please enter a valid email address"),
-
-  plan: z
-    .string({
-      required_error: "Please select a subscription plan",
-    })
-    .min(1, "Please select a subscription plan")
-    .refine((value) => value === "basic" || value === "pro", {
-      message: "Invalid plan selection. Please choose Basic or Pro",
-    }),
-
-  billingPeriod: z
-    .string({
-      required_error: "Please select a billing period",
-    })
-    .min(1, "Please select a billing period"),
-
-  addons: z
-    .array(z.string())
-    .min(1, "Please select at least one add-on")
-    .max(3, "You can select up to 3 add-ons"),
-
-  teamSize: z.number().min(1).max(10),
-  emailNotifications: z.boolean({
-    required_error: "Please choose email notification preference",
-  }),
-  comments: z
-    .string()
-    .min(10, "Comments must be at least 10 characters")
-    .max(240, "Comments must not exceed 240 characters"),
-  startDate: z
-    .date({
-      required_error: "Please select a start date",
-      invalid_type_error: "Invalid date format",
-    })
-    .min(new Date(), "Start date cannot be in the past")
-    .refine(
-      (date) => {
-        const now = new Date()
-        const oneWeekFromNow = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000)
-        return date <= oneWeekFromNow
-      },
-      {
-        message: "Start date must be within the current week",
-      }
-    ),
-  theme: z
-    .string({
-      required_error: "Please select a theme",
-    })
-    .min(1, "Please select a theme"),
-  password: z
-    .string({
-      required_error: "Password is required",
-    })
-    .min(8, "Password must be at least 8 characters")
-    .regex(
-      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/,
-      "Password must contain at least one uppercase letter, one lowercase letter, and one number"
-    ),
-})
diff --git a/apps/v4/app/(internal)/sink/(pages)/tanstack-form/example-form.tsx b/apps/v4/app/(internal)/sink/(pages)/tanstack-form/example-form.tsx
deleted file mode 100644
index 3ec8529f0a..0000000000
--- a/apps/v4/app/(internal)/sink/(pages)/tanstack-form/example-form.tsx
+++ /dev/null
@@ -1,532 +0,0 @@
-/* eslint-disable react/no-children-prop */
-"use client"
-
-import * as React from "react"
-import { useForm } from "@tanstack/react-form"
-import { format } from "date-fns"
-
-import { Button } from "@/registry/new-york-v4/ui/button"
-import { Calendar } from "@/registry/new-york-v4/ui/calendar"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york-v4/ui/card"
-import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/registry/new-york-v4/ui/dialog"
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldError,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSeparator,
-  FieldSet,
-  FieldTitle,
-} from "@/registry/new-york-v4/ui/field"
-import { Input } from "@/registry/new-york-v4/ui/input"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/new-york-v4/ui/popover"
-import {
-  RadioGroup,
-  RadioGroupItem,
-} from "@/registry/new-york-v4/ui/radio-group"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york-v4/ui/select"
-import { Slider } from "@/registry/new-york-v4/ui/slider"
-import { Switch } from "@/registry/new-york-v4/ui/switch"
-import { Textarea } from "@/registry/new-york-v4/ui/textarea"
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@/registry/new-york-v4/ui/toggle-group"
-import { addons, exampleFormSchema } from "@/app/(internal)/sink/(pages)/schema"
-
-export function ExampleForm() {
-  const form = useForm({
-    defaultValues: {
-      name: "",
-      email: "",
-      plan: "",
-      billingPeriod: "",
-      addons: ["analytics"],
-      emailNotifications: false,
-      teamSize: 1,
-      comments: "",
-      startDate: new Date(),
-      theme: "system",
-      password: "",
-    },
-    validators: {
-      onBlur: exampleFormSchema,
-    },
-    onSubmit: async ({ value }) => {
-      setValues(value)
-      setOpen(true)
-    },
-  })
-  const [values, setValues] = React.useState<typeof form.state.values>()
-  const [open, setOpen] = React.useState(false)
-
-  return (
-    <>
-      <Card className="w-full max-w-sm">
-        <CardHeader className="border-b">
-          <CardTitle>Example Form</CardTitle>
-          <CardDescription>
-            This is an example form using TanStack Form.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form
-            id="example-form"
-            onSubmit={(e) => {
-              e.preventDefault()
-              e.stopPropagation()
-              void form.handleSubmit()
-            }}
-          >
-            <FieldGroup>
-              <form.Field
-                name="name"
-                children={(field) => {
-                  const isInvalid =
-                    field.state.meta.isTouched && !field.state.meta.isValid
-                  return (
-                    <Field data-invalid={isInvalid}>
-                      <FieldLabel htmlFor={field.name}>Name</FieldLabel>
-                      <Input
-                        id={field.name}
-                        name={field.name}
-                        value={field.state.value}
-                        onBlur={field.handleBlur}
-                        onChange={(e) => field.handleChange(e.target.value)}
-                        aria-invalid={isInvalid}
-                        autoComplete="off"
-                      />
-                      <FieldDescription>Enter your name</FieldDescription>
-                      {isInvalid && (
-                        <FieldError errors={field.state.meta.errors} />
-                      )}
-                    </Field>
-                  )
-                }}
-              />
-              <form.Field
-                name="email"
-                children={(field) => {
-                  const isInvalid =
-                    field.state.meta.isTouched && !field.state.meta.isValid
-                  return (
-                    <Field data-invalid={isInvalid}>
-                      <FieldLabel htmlFor={field.name}>Email</FieldLabel>
-                      <Input
-                        id={field.name}
-                        name={field.name}
-                        type="email"
-                        value={field.state.value}
-                        onBlur={field.handleBlur}
-                        onChange={(e) => field.handleChange(e.target.value)}
-                        aria-invalid={isInvalid}
-                        autoComplete="off"
-                      />
-                      <FieldDescription>
-                        Enter your email address
-                      </FieldDescription>
-                      {isInvalid && (
-                        <FieldError errors={field.state.meta.errors} />
-                      )}
-                    </Field>
-                  )
-                }}
-              />
-              <FieldSeparator />
-              <form.Field
-                name="plan"
-                children={(field) => {
-                  const isInvalid =
-                    field.state.meta.isTouched && !field.state.meta.isValid
-                  return (
-                    <FieldSet data-invalid={isInvalid}>
-                      <FieldLegend>Subscription Plan</FieldLegend>
-                      <FieldDescription>
-                        Choose your subscription plan.
-                      </FieldDescription>
-                      <RadioGroup
-                        name={field.name}
-                        value={field.state.value}
-                        onValueChange={field.handleChange}
-                        aria-invalid={isInvalid}
-                      >
-                        <FieldLabel htmlFor="basic">
-                          <Field orientation="horizontal">
-                            <FieldContent>
-                              <FieldTitle>Basic</FieldTitle>
-                              <FieldDescription>
-                                For individuals and small teams
-                              </FieldDescription>
-                            </FieldContent>
-                            <RadioGroupItem
-                              value="basic"
-                              id="basic"
-                              aria-invalid={isInvalid}
-                            />
-                          </Field>
-                        </FieldLabel>
-                        <FieldLabel htmlFor="pro">
-                          <Field orientation="horizontal">
-                            <FieldContent>
-                              <FieldTitle>Pro</FieldTitle>
-                              <FieldDescription>
-                                For businesses with higher demands
-                              </FieldDescription>
-                            </FieldContent>
-                            <RadioGroupItem
-                              value="pro"
-                              id="pro"
-                              aria-invalid={isInvalid}
-                            />
-                          </Field>
-                        </FieldLabel>
-                      </RadioGroup>
-                      {isInvalid && (
-                        <FieldError errors={field.state.meta.errors} />
-                      )}
-                    </FieldSet>
-                  )
-                }}
-              />
-              <FieldSeparator />
-              <form.Field
-                name="billingPeriod"
-                children={(field) => {
-                  const isInvalid =
-                    field.state.meta.isTouched && !field.state.meta.isValid
-                  return (
-                    <Field data-invalid={isInvalid}>
-                      <FieldLabel htmlFor={field.name}>
-                        Billing Period
-                      </FieldLabel>
-                      <Select
-                        name={field.name}
-                        value={field.state.value}
-                        onValueChange={field.handleChange}
-                        aria-invalid={isInvalid}
-                      >
-                        <SelectTrigger id={field.name}>
-                          <SelectValue placeholder="Select billing period" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="monthly">Monthly</SelectItem>
-                          <SelectItem value="yearly">Yearly</SelectItem>
-                        </SelectContent>
-                      </Select>
-                      <FieldDescription>
-                        Choose how often you want to be billed.
-                      </FieldDescription>
-                      {isInvalid && (
-                        <FieldError errors={field.state.meta.errors} />
-                      )}
-                    </Field>
-                  )
-                }}
-              />
-              <FieldSeparator />
-              <form.Field
-                name="addons"
-                mode="array"
-                children={(field) => {
-                  const isInvalid =
-                    field.state.meta.isTouched && !field.state.meta.isValid
-                  return (
-                    <FieldSet data-invalid={isInvalid}>
-                      <FieldLegend>Add-ons</FieldLegend>
-                      <FieldDescription>
-                        Select additional features you&apos;d like to include.
-                      </FieldDescription>
-                      <FieldGroup data-slot="checkbox-group">
-                        {addons.map((addon) => (
-                          <Field key={addon.id} orientation="horizontal">
-                            <Checkbox
-                              id={addon.id}
-                              name={field.name}
-                              aria-invalid={isInvalid}
-                              checked={field.state.value.includes(addon.id)}
-                              onCheckedChange={(checked) => {
-                                if (checked) {
-                                  field.pushValue(addon.id)
-                                } else {
-                                  const index = field.state.value.indexOf(
-                                    addon.id
-                                  )
-                                  if (index > -1) {
-                                    field.removeValue(index)
-                                  }
-                                }
-                              }}
-                            />
-                            <FieldContent>
-                              <FieldLabel htmlFor={addon.id}>
-                                {addon.title}
-                              </FieldLabel>
-                              <FieldDescription>
-                                {addon.description}
-                              </FieldDescription>
-                            </FieldContent>
-                          </Field>
-                        ))}
-                      </FieldGroup>
-                      {isInvalid && (
-                        <FieldError errors={field.state.meta.errors} />
-                      )}
-                    </FieldSet>
-                  )
-                }}
-              />
-              <FieldSeparator />
-              <form.Field
-                name="teamSize"
-                children={(field) => {
-                  const isInvalid =
-                    field.state.meta.isTouched && !field.state.meta.isValid
-                  return (
-                    <Field data-invalid={isInvalid}>
-                      <FieldTitle>Team Size</FieldTitle>
-                      <FieldDescription>
-                        How many people will be using the subscription?
-                      </FieldDescription>
-                      <Slider
-                        id={field.name}
-                        name={field.name}
-                        value={[field.state.value]}
-                        onValueChange={(value) => field.handleChange(value[0])}
-                        min={1}
-                        max={50}
-                        step={10}
-                      />
-                      {isInvalid && (
-                        <FieldError errors={field.state.meta.errors} />
-                      )}
-                    </Field>
-                  )
-                }}
-              />
-              <FieldSeparator />
-              <form.Field
-                name="emailNotifications"
-                children={(field) => {
-                  const isInvalid =
-                    field.state.meta.isTouched && !field.state.meta.isValid
-                  return (
-                    <Field orientation="horizontal">
-                      <FieldContent>
-                        <FieldLabel htmlFor={field.name}>
-                          Email Notifications
-                        </FieldLabel>
-                        <FieldDescription>
-                          Receive email updates about your subscription
-                        </FieldDescription>
-                      </FieldContent>
-                      <Switch
-                        id={field.name}
-                        name={field.name}
-                        checked={field.state.value}
-                        onCheckedChange={field.handleChange}
-                      />
-                      {isInvalid && (
-                        <FieldError errors={field.state.meta.errors} />
-                      )}
-                    </Field>
-                  )
-                }}
-              />
-              <FieldSeparator />
-              <form.Field
-                name="startDate"
-                children={(field) => {
-                  const isInvalid =
-                    field.state.meta.isTouched && !field.state.meta.isValid
-                  return (
-                    <Field data-invalid={isInvalid}>
-                      <FieldLabel htmlFor={field.name}>Start Date</FieldLabel>
-                      <Popover>
-                        <PopoverTrigger asChild>
-                          <Button
-                            id={field.name}
-                            variant="outline"
-                            className="justify-start"
-                          >
-                            {field.state.value ? (
-                              format(field.state.value, "PPP")
-                            ) : (
-                              <span>Pick a date</span>
-                            )}
-                          </Button>
-                        </PopoverTrigger>
-                        <PopoverContent className="w-auto p-0" align="start">
-                          <Calendar
-                            required
-                            mode="single"
-                            selected={field.state.value}
-                            onSelect={field.handleChange}
-                          />
-                        </PopoverContent>
-                      </Popover>
-                      <FieldDescription>
-                        Choose when your subscription should start
-                      </FieldDescription>
-                      {isInvalid && (
-                        <FieldError errors={field.state.meta.errors} />
-                      )}
-                    </Field>
-                  )
-                }}
-              />
-              <FieldSeparator />
-              <form.Field
-                name="theme"
-                children={(field) => {
-                  const isInvalid =
-                    field.state.meta.isTouched && !field.state.meta.isValid
-                  return (
-                    <Field data-invalid={isInvalid}>
-                      <FieldTitle>Theme Preference</FieldTitle>
-                      <ToggleGroup
-                        id={field.name}
-                        type="single"
-                        variant="outline"
-                        value={field.state.value}
-                        onValueChange={(value) =>
-                          value && field.handleChange(value)
-                        }
-                        aria-invalid={isInvalid}
-                      >
-                        <ToggleGroupItem value="light">Light</ToggleGroupItem>
-                        <ToggleGroupItem value="dark">Dark</ToggleGroupItem>
-                        <ToggleGroupItem value="system">System</ToggleGroupItem>
-                      </ToggleGroup>
-                      <FieldDescription>
-                        Choose your preferred color theme
-                      </FieldDescription>
-                      {isInvalid && (
-                        <FieldError errors={field.state.meta.errors} />
-                      )}
-                    </Field>
-                  )
-                }}
-              />
-              <FieldSeparator />
-              <form.Field
-                name="password"
-                children={(field) => {
-                  const isInvalid =
-                    field.state.meta.isTouched && !field.state.meta.isValid
-                  return (
-                    <Field data-invalid={isInvalid}>
-                      <FieldLabel htmlFor={field.name}>Password</FieldLabel>
-                      <Input
-                        id={field.name}
-                        name={field.name}
-                        type="password"
-                        value={field.state.value}
-                        onChange={(e) => field.handleChange(e.target.value)}
-                        onBlur={field.handleBlur}
-                        placeholder="Enter your password"
-                        aria-invalid={isInvalid}
-                      />
-                      <FieldDescription>
-                        Must contain uppercase, lowercase, number, and be 8+
-                        characters
-                      </FieldDescription>
-                      {isInvalid && (
-                        <FieldError errors={field.state.meta.errors} />
-                      )}
-                    </Field>
-                  )
-                }}
-              />
-              <FieldSeparator />
-              <form.Field
-                name="comments"
-                children={(field) => {
-                  const isInvalid =
-                    field.state.meta.isTouched && !field.state.meta.isValid
-                  return (
-                    <Field data-invalid={isInvalid}>
-                      <FieldLabel htmlFor={field.name}>
-                        Additional Comments
-                      </FieldLabel>
-                      <Textarea
-                        id={field.name}
-                        name={field.name}
-                        value={field.state.value}
-                        onChange={(e) => field.handleChange(e.target.value)}
-                        onBlur={field.handleBlur}
-                        placeholder="Tell us more about your needs..."
-                        rows={3}
-                        aria-invalid={isInvalid}
-                      />
-                      <FieldDescription>
-                        Share any additional requirements or feedback (10-240
-                        characters)
-                      </FieldDescription>
-                      {isInvalid && (
-                        <FieldError errors={field.state.meta.errors} />
-                      )}
-                    </Field>
-                  )
-                }}
-              />
-            </FieldGroup>
-          </form>
-        </CardContent>
-        <CardFooter className="border-t">
-          <Field orientation="horizontal" className="justify-end">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => form.reset()}
-            >
-              Reset
-            </Button>
-            <Button type="submit" form="example-form">
-              Submit
-            </Button>
-          </Field>
-        </CardFooter>
-      </Card>
-      <Dialog open={open} onOpenChange={setOpen}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Submitted Values</DialogTitle>
-            <DialogDescription>
-              Here are the values you submitted.
-            </DialogDescription>
-          </DialogHeader>
-          <pre className="overflow-x-auto rounded-md bg-black p-4 font-mono text-sm text-white">
-            <code>{JSON.stringify(values, null, 2)}</code>
-          </pre>
-        </DialogContent>
-      </Dialog>
-    </>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/(pages)/tanstack-form/page.tsx b/apps/v4/app/(internal)/sink/(pages)/tanstack-form/page.tsx
deleted file mode 100644
index 47b601e467..0000000000
--- a/apps/v4/app/(internal)/sink/(pages)/tanstack-form/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { ExampleForm } from "@/app/(internal)/sink/(pages)/tanstack-form/example-form"
-
-export default function TanstackFormPage() {
-  return (
-    <div className="flex min-h-screen items-center justify-center p-4">
-      <ExampleForm />
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/[name]/page.tsx b/apps/v4/app/(internal)/sink/[name]/page.tsx
deleted file mode 100644
index 5c4cdc6032..0000000000
--- a/apps/v4/app/(internal)/sink/[name]/page.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { type Metadata } from "next"
-import { notFound } from "next/navigation"
-
-import { componentRegistry } from "@/app/(internal)/sink/component-registry"
-
-export const dynamic = "force-static"
-export const revalidate = false
-
-export async function generateStaticParams() {
-  return Object.keys(componentRegistry).map((name) => ({
-    name,
-  }))
-}
-
-export async function generateMetadata({
-  params,
-}: {
-  params: Promise<{ name: string }>
-}): Promise<Metadata> {
-  const { name } = await params
-  const component = componentRegistry[name as keyof typeof componentRegistry]
-
-  if (!component) {
-    return {
-      title: "Component Not Found",
-    }
-  }
-
-  return {
-    title: `${component.name} - Kitchen Sink`,
-    description: `Demo page for ${component.name} component`,
-  }
-}
-
-export default async function ComponentPage({
-  params,
-}: {
-  params: Promise<{ name: string }>
-}) {
-  const { name } = await params
-  const component = componentRegistry[name as keyof typeof componentRegistry]
-
-  if (!component) {
-    notFound()
-  }
-
-  const Component = component.component
-
-  return (
-    <div className="p-6">
-      <Component />
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/component-registry.ts b/apps/v4/app/(internal)/sink/component-registry.ts
deleted file mode 100644
index 01961354e0..0000000000
--- a/apps/v4/app/(internal)/sink/component-registry.ts
+++ /dev/null
@@ -1,437 +0,0 @@
-import FormsPage from "@/app/(internal)/sink/(pages)/forms/page"
-
-import NextFormPage from "./(pages)/next-form/page"
-import ReactHookFormPage from "./(pages)/react-hook-form/page"
-import TanstackFormPage from "./(pages)/tanstack-form/page"
-import { AccordionDemo } from "./components/accordion-demo"
-import { AlertDemo } from "./components/alert-demo"
-import { AlertDialogDemo } from "./components/alert-dialog-demo"
-import { AspectRatioDemo } from "./components/aspect-ratio-demo"
-import { AvatarDemo } from "./components/avatar-demo"
-import { BadgeDemo } from "./components/badge-demo"
-import { BreadcrumbDemo } from "./components/breadcrumb-demo"
-import { ButtonDemo } from "./components/button-demo"
-import { ButtonGroupDemo } from "./components/button-group-demo"
-import { CalendarDemo } from "./components/calendar-demo"
-import { CardDemo } from "./components/card-demo"
-import { CarouselDemo } from "./components/carousel-demo"
-import { ChartDemo } from "./components/chart-demo"
-import { CheckboxDemo } from "./components/checkbox-demo"
-import { CollapsibleDemo } from "./components/collapsible-demo"
-import { ComboboxDemo } from "./components/combobox-demo"
-import { CommandDemo } from "./components/command-demo"
-import { ContextMenuDemo } from "./components/context-menu-demo"
-import { DatePickerDemo } from "./components/date-picker-demo"
-import { DialogDemo } from "./components/dialog-demo"
-import { DrawerDemo } from "./components/drawer-demo"
-import { DropdownMenuDemo } from "./components/dropdown-menu-demo"
-import { EmptyDemo } from "./components/empty-demo"
-import { FieldDemo } from "./components/field-demo"
-import { FormDemo } from "./components/form-demo"
-import { HoverCardDemo } from "./components/hover-card-demo"
-import { InputDemo } from "./components/input-demo"
-import { InputGroupDemo } from "./components/input-group-demo"
-import { InputOTPDemo } from "./components/input-otp-demo"
-import { ItemDemo } from "./components/item-demo"
-import { KbdDemo } from "./components/kbd-demo"
-import { LabelDemo } from "./components/label-demo"
-import { MenubarDemo } from "./components/menubar-demo"
-import { NativeSelectDemo } from "./components/native-select-demo"
-import { NavigationMenuDemo } from "./components/navigation-menu-demo"
-import { PaginationDemo } from "./components/pagination-demo"
-import { PopoverDemo } from "./components/popover-demo"
-import { ProgressDemo } from "./components/progress-demo"
-import { RadioGroupDemo } from "./components/radio-group-demo"
-import { ResizableDemo } from "./components/resizable-demo"
-import { ScrollAreaDemo } from "./components/scroll-area-demo"
-import { SelectDemo } from "./components/select-demo"
-import { SeparatorDemo } from "./components/separator-demo"
-import { SheetDemo } from "./components/sheet-demo"
-import { SkeletonDemo } from "./components/skeleton-demo"
-import { SliderDemo } from "./components/slider-demo"
-import { SonnerDemo } from "./components/sonner-demo"
-import { SpinnerDemo } from "./components/spinner-demo"
-import { SwitchDemo } from "./components/switch-demo"
-import { TableDemo } from "./components/table-demo"
-import { TabsDemo } from "./components/tabs-demo"
-import { TextareaDemo } from "./components/textarea-demo"
-import { ToggleDemo } from "./components/toggle-demo"
-import { ToggleGroupDemo } from "./components/toggle-group-demo"
-import { TooltipDemo } from "./components/tooltip-demo"
-
-type ComponentConfig = {
-  name: string
-  component: React.ComponentType
-  className?: string
-  type: "registry:ui" | "registry:page" | "registry:block"
-  href: string
-  label?: string
-}
-
-export const componentRegistry: Record<string, ComponentConfig> = {
-  accordion: {
-    name: "Accordion",
-    component: AccordionDemo,
-    type: "registry:ui",
-    href: "/sink/accordion",
-  },
-  alert: {
-    name: "Alert",
-    component: AlertDemo,
-    type: "registry:ui",
-    href: "/sink/alert",
-  },
-  "alert-dialog": {
-    name: "Alert Dialog",
-    component: AlertDialogDemo,
-    type: "registry:ui",
-    href: "/sink/alert-dialog",
-  },
-  "aspect-ratio": {
-    name: "Aspect Ratio",
-    component: AspectRatioDemo,
-    type: "registry:ui",
-    href: "/sink/aspect-ratio",
-  },
-  avatar: {
-    name: "Avatar",
-    component: AvatarDemo,
-    type: "registry:ui",
-    href: "/sink/avatar",
-  },
-  badge: {
-    name: "Badge",
-    component: BadgeDemo,
-    type: "registry:ui",
-    href: "/sink/badge",
-  },
-  breadcrumb: {
-    name: "Breadcrumb",
-    component: BreadcrumbDemo,
-    type: "registry:ui",
-    href: "/sink/breadcrumb",
-  },
-  button: {
-    name: "Button",
-    component: ButtonDemo,
-    type: "registry:ui",
-    href: "/sink/button",
-  },
-  "button-group": {
-    name: "Button Group",
-    component: ButtonGroupDemo,
-    type: "registry:ui",
-    href: "/sink/button-group",
-    label: "New",
-  },
-  calendar: {
-    name: "Calendar",
-    component: CalendarDemo,
-    type: "registry:ui",
-    href: "/sink/calendar",
-  },
-  card: {
-    name: "Card",
-    component: CardDemo,
-    type: "registry:ui",
-    href: "/sink/card",
-  },
-  carousel: {
-    name: "Carousel",
-    component: CarouselDemo,
-    type: "registry:ui",
-    href: "/sink/carousel",
-  },
-  chart: {
-    name: "Chart",
-    component: ChartDemo,
-    className: "w-full",
-    type: "registry:ui",
-    href: "/sink/chart",
-  },
-  checkbox: {
-    name: "Checkbox",
-    component: CheckboxDemo,
-    type: "registry:ui",
-    href: "/sink/checkbox",
-  },
-  collapsible: {
-    name: "Collapsible",
-    component: CollapsibleDemo,
-    type: "registry:ui",
-    href: "/sink/collapsible",
-  },
-  combobox: {
-    name: "Combobox",
-    component: ComboboxDemo,
-    type: "registry:ui",
-    href: "/sink/combobox",
-  },
-  command: {
-    name: "Command",
-    component: CommandDemo,
-    type: "registry:ui",
-    href: "/sink/command",
-  },
-  "context-menu": {
-    name: "Context Menu",
-    component: ContextMenuDemo,
-    type: "registry:ui",
-    href: "/sink/context-menu",
-  },
-  "date-picker": {
-    name: "Date Picker",
-    component: DatePickerDemo,
-    type: "registry:ui",
-    href: "/sink/date-picker",
-  },
-  dialog: {
-    name: "Dialog",
-    component: DialogDemo,
-    type: "registry:ui",
-    href: "/sink/dialog",
-  },
-  drawer: {
-    name: "Drawer",
-    component: DrawerDemo,
-    type: "registry:ui",
-    href: "/sink/drawer",
-  },
-  "dropdown-menu": {
-    name: "Dropdown Menu",
-    component: DropdownMenuDemo,
-    type: "registry:ui",
-    href: "/sink/dropdown-menu",
-  },
-  empty: {
-    name: "Empty",
-    component: EmptyDemo,
-    type: "registry:ui",
-    href: "/sink/empty",
-    label: "New",
-  },
-  field: {
-    name: "Field",
-    component: FieldDemo,
-    type: "registry:ui",
-    href: "/sink/field",
-    label: "New",
-  },
-  form: {
-    name: "Form",
-    component: FormDemo,
-    type: "registry:ui",
-    href: "/sink/form",
-  },
-  "hover-card": {
-    name: "Hover Card",
-    component: HoverCardDemo,
-    type: "registry:ui",
-    href: "/sink/hover-card",
-  },
-  input: {
-    name: "Input",
-    component: InputDemo,
-    type: "registry:ui",
-    href: "/sink/input",
-  },
-  "input-group": {
-    name: "Input Group",
-    component: InputGroupDemo,
-    type: "registry:ui",
-    href: "/sink/input-group",
-    label: "New",
-  },
-  "input-otp": {
-    name: "Input OTP",
-    component: InputOTPDemo,
-    type: "registry:ui",
-    href: "/sink/input-otp",
-  },
-  item: {
-    name: "Item",
-    component: ItemDemo,
-    type: "registry:ui",
-    href: "/sink/item",
-    label: "New",
-  },
-  kbd: {
-    name: "Kbd",
-    component: KbdDemo,
-    type: "registry:ui",
-    href: "/sink/kbd",
-    label: "New",
-  },
-  label: {
-    name: "Label",
-    component: LabelDemo,
-    type: "registry:ui",
-    href: "/sink/label",
-  },
-  menubar: {
-    name: "Menubar",
-    component: MenubarDemo,
-    type: "registry:ui",
-    href: "/sink/menubar",
-  },
-  "navigation-menu": {
-    name: "Navigation Menu",
-    component: NavigationMenuDemo,
-    type: "registry:ui",
-    href: "/sink/navigation-menu",
-  },
-  "native-select": {
-    name: "Native Select",
-    component: NativeSelectDemo,
-    type: "registry:ui",
-    href: "/sink/native-select",
-    label: "New",
-  },
-  pagination: {
-    name: "Pagination",
-    component: PaginationDemo,
-    type: "registry:ui",
-    href: "/sink/pagination",
-  },
-  popover: {
-    name: "Popover",
-    component: PopoverDemo,
-    type: "registry:ui",
-    href: "/sink/popover",
-  },
-  progress: {
-    name: "Progress",
-    component: ProgressDemo,
-    type: "registry:ui",
-    href: "/sink/progress",
-  },
-  "radio-group": {
-    name: "Radio Group",
-    component: RadioGroupDemo,
-    type: "registry:ui",
-    href: "/sink/radio-group",
-  },
-  resizable: {
-    name: "Resizable",
-    component: ResizableDemo,
-    type: "registry:ui",
-    href: "/sink/resizable",
-  },
-  "scroll-area": {
-    name: "Scroll Area",
-    component: ScrollAreaDemo,
-    type: "registry:ui",
-    href: "/sink/scroll-area",
-  },
-  select: {
-    name: "Select",
-    component: SelectDemo,
-    type: "registry:ui",
-    href: "/sink/select",
-  },
-  separator: {
-    name: "Separator",
-    component: SeparatorDemo,
-    type: "registry:ui",
-    href: "/sink/separator",
-  },
-  sheet: {
-    name: "Sheet",
-    component: SheetDemo,
-    type: "registry:ui",
-    href: "/sink/sheet",
-  },
-  skeleton: {
-    name: "Skeleton",
-    component: SkeletonDemo,
-    type: "registry:ui",
-    href: "/sink/skeleton",
-  },
-  slider: {
-    name: "Slider",
-    component: SliderDemo,
-    type: "registry:ui",
-    href: "/sink/slider",
-  },
-  sonner: {
-    name: "Sonner",
-    component: SonnerDemo,
-    type: "registry:ui",
-    href: "/sink/sonner",
-  },
-  spinner: {
-    name: "Spinner",
-    component: SpinnerDemo,
-    type: "registry:ui",
-    href: "/sink/spinner",
-    label: "New",
-  },
-  switch: {
-    name: "Switch",
-    component: SwitchDemo,
-    type: "registry:ui",
-    href: "/sink/switch",
-  },
-  table: {
-    name: "Table",
-    component: TableDemo,
-    type: "registry:ui",
-    href: "/sink/table",
-  },
-  tabs: {
-    name: "Tabs",
-    component: TabsDemo,
-    type: "registry:ui",
-    href: "/sink/tabs",
-  },
-  textarea: {
-    name: "Textarea",
-    component: TextareaDemo,
-    type: "registry:ui",
-    href: "/sink/textarea",
-  },
-  toggle: {
-    name: "Toggle",
-    component: ToggleDemo,
-    type: "registry:ui",
-    href: "/sink/toggle",
-  },
-  "toggle-group": {
-    name: "Toggle Group",
-    component: ToggleGroupDemo,
-    type: "registry:ui",
-    href: "/sink/toggle-group",
-  },
-  tooltip: {
-    name: "Tooltip",
-    component: TooltipDemo,
-    type: "registry:ui",
-    href: "/sink/tooltip",
-  },
-  blocks: {
-    name: "Forms",
-    component: FormsPage,
-    type: "registry:page",
-    href: "/sink/forms",
-  },
-  "next-form": {
-    name: "Next.js Form",
-    component: NextFormPage,
-    type: "registry:page",
-    href: "/sink/next-form",
-  },
-  "tanstack-form": {
-    name: "Tanstack Form",
-    component: TanstackFormPage,
-    type: "registry:page",
-    href: "/sink/tanstack-form",
-  },
-  "react-hook-form": {
-    name: "React Hook Form",
-    component: ReactHookFormPage,
-    type: "registry:page",
-    href: "/sink/react-hook-form",
-  },
-}
-
-export type ComponentKey = keyof typeof componentRegistry
diff --git a/apps/v4/app/(internal)/sink/components/accordion-demo.tsx b/apps/v4/app/(internal)/sink/components/accordion-demo.tsx
deleted file mode 100644
index 1f616ac858..0000000000
--- a/apps/v4/app/(internal)/sink/components/accordion-demo.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/registry/new-york-v4/ui/accordion"
-
-export function AccordionDemo() {
-  return (
-    <div className="grid w-full max-w-xl gap-4">
-      <Accordion type="single" collapsible className="w-full">
-        <AccordionItem value="item-1">
-          <AccordionTrigger>Is it accessible?</AccordionTrigger>
-          <AccordionContent>
-            Yes. It adheres to the WAI-ARIA design pattern.
-          </AccordionContent>
-        </AccordionItem>
-        <AccordionItem value="item-2">
-          <AccordionTrigger>Is it styled?</AccordionTrigger>
-          <AccordionContent>
-            Yes. It comes with default styles that matches the other
-            components&apos; aesthetic.
-          </AccordionContent>
-        </AccordionItem>
-        <AccordionItem value="item-3">
-          <AccordionTrigger>Is it animated?</AccordionTrigger>
-          <AccordionContent>
-            Yes. It&apos;s animated by default, but you can disable it if you
-            prefer.
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
-      <Accordion type="single" collapsible className="w-full">
-        <AccordionItem value="item-1">
-          <AccordionTrigger>
-            What are the key considerations when implementing a comprehensive
-            enterprise-level authentication system?
-          </AccordionTrigger>
-          <AccordionContent>
-            Implementing a robust enterprise authentication system requires
-            careful consideration of multiple factors. This includes secure
-            password hashing and storage, multi-factor authentication (MFA)
-            implementation, session management, OAuth2 and SSO integration,
-            regular security audits, rate limiting to prevent brute force
-            attacks, and maintaining detailed audit logs. Additionally,
-            you&apos;ll need to consider scalability, performance impact, and
-            compliance with relevant data protection regulations such as GDPR or
-            HIPAA.
-          </AccordionContent>
-        </AccordionItem>
-        <AccordionItem value="item-2">
-          <AccordionTrigger>
-            How does modern distributed system architecture handle eventual
-            consistency and data synchronization across multiple regions?
-          </AccordionTrigger>
-          <AccordionContent>
-            Modern distributed systems employ various strategies to maintain
-            data consistency across regions. This often involves using
-            techniques like CRDT (Conflict-Free Replicated Data Types), vector
-            clocks, and gossip protocols. Systems might implement event sourcing
-            patterns, utilize message queues for asynchronous updates, and
-            employ sophisticated conflict resolution strategies. Popular
-            solutions like Amazon&apos;s DynamoDB and Google&apos;s Spanner
-            demonstrate different approaches to solving these challenges,
-            balancing between consistency, availability, and partition tolerance
-            as described in the CAP theorem.
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/alert-demo.tsx b/apps/v4/app/(internal)/sink/components/alert-demo.tsx
deleted file mode 100644
index 9c893efc22..0000000000
--- a/apps/v4/app/(internal)/sink/components/alert-demo.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import {
-  AlertCircleIcon,
-  BookmarkCheckIcon,
-  CheckCircle2Icon,
-  GiftIcon,
-  PopcornIcon,
-  ShieldAlertIcon,
-} from "lucide-react"
-
-import {
-  Alert,
-  AlertDescription,
-  AlertTitle,
-} from "@/registry/new-york-v4/ui/alert"
-import { Button } from "@/registry/new-york-v4/ui/button"
-
-export function AlertDemo() {
-  return (
-    <div className="grid max-w-xl items-start gap-4">
-      <Alert>
-        <CheckCircle2Icon />
-        <AlertTitle>Success! Your changes have been saved</AlertTitle>
-        <AlertDescription>
-          This is an alert with icon, title and description.
-        </AlertDescription>
-      </Alert>
-      <Alert>
-        <BookmarkCheckIcon>Heads up!</BookmarkCheckIcon>
-        <AlertDescription>
-          This one has an icon and a description only. No title.
-        </AlertDescription>
-      </Alert>
-      <Alert>
-        <AlertDescription>
-          This one has a description only. No title. No icon.
-        </AlertDescription>
-      </Alert>
-      <Alert>
-        <PopcornIcon />
-        <AlertTitle>Let&apos;s try one with icon and title.</AlertTitle>
-      </Alert>
-      <Alert>
-        <ShieldAlertIcon />
-        <AlertTitle>
-          This is a very long alert title that demonstrates how the component
-          handles extended text content and potentially wraps across multiple
-          lines
-        </AlertTitle>
-      </Alert>
-      <Alert>
-        <GiftIcon />
-        <AlertDescription>
-          This is a very long alert description that demonstrates how the
-          component handles extended text content and potentially wraps across
-          multiple lines
-        </AlertDescription>
-      </Alert>
-      <Alert>
-        <AlertCircleIcon />
-        <AlertTitle>
-          This is an extremely long alert title that spans multiple lines to
-          demonstrate how the component handles very lengthy headings while
-          maintaining readability and proper text wrapping behavior
-        </AlertTitle>
-        <AlertDescription>
-          This is an equally long description that contains detailed information
-          about the alert. It shows how the component can accommodate extensive
-          content while preserving proper spacing, alignment, and readability
-          across different screen sizes and viewport widths. This helps ensure
-          the user experience remains consistent regardless of the content
-          length.
-        </AlertDescription>
-      </Alert>
-      <Alert variant="destructive">
-        <AlertCircleIcon />
-        <AlertTitle>Something went wrong!</AlertTitle>
-        <AlertDescription>
-          Your session has expired. Please log in again.
-        </AlertDescription>
-      </Alert>
-      <Alert variant="destructive">
-        <AlertCircleIcon />
-        <AlertTitle>Unable to process your payment.</AlertTitle>
-        <AlertDescription>
-          <p>Please verify your billing information and try again.</p>
-          <ul className="list-inside list-disc text-sm">
-            <li>Check your card details</li>
-            <li>Ensure sufficient funds</li>
-            <li>Verify billing address</li>
-          </ul>
-        </AlertDescription>
-      </Alert>
-      <Alert>
-        <CheckCircle2Icon />
-        <AlertTitle className="max-w-[calc(100%-4rem)] overflow-ellipsis">
-          The selected emails have been marked as spam.
-        </AlertTitle>
-        <Button
-          size="sm"
-          variant="outline"
-          className="absolute top-2.5 right-3 h-6 shadow-none"
-        >
-          Undo
-        </Button>
-      </Alert>
-      <Alert className="border-amber-50 bg-amber-50 text-amber-900 dark:border-amber-950 dark:bg-amber-950 dark:text-amber-100">
-        <CheckCircle2Icon />
-        <AlertTitle>Plot Twist: This Alert is Actually Amber!</AlertTitle>
-        <AlertDescription>
-          This one has custom colors for light and dark mode.
-        </AlertDescription>
-      </Alert>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/alert-dialog-demo.tsx b/apps/v4/app/(internal)/sink/components/alert-dialog-demo.tsx
deleted file mode 100644
index 7bd075cda8..0000000000
--- a/apps/v4/app/(internal)/sink/components/alert-dialog-demo.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { TrashIcon } from "lucide-react"
-
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogMedia,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@/registry/new-york-v4/ui/alert-dialog"
-import { Button } from "@/registry/new-york-v4/ui/button"
-
-export function AlertDialogDemo() {
-  return (
-    <div className="flex flex-wrap gap-4">
-      <AlertDialog>
-        <AlertDialogTrigger asChild>
-          <Button variant="outline">Default</Button>
-        </AlertDialogTrigger>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-            <AlertDialogDescription>
-              This action cannot be undone. This will permanently delete your
-              account and remove your data from our servers.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction>Continue</AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-      <AlertDialog>
-        <AlertDialogTrigger asChild>
-          <Button variant="outline">With Media</Button>
-        </AlertDialogTrigger>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogMedia>
-              <TrashIcon className="size-8" />
-            </AlertDialogMedia>
-            <AlertDialogTitle>Delete this item?</AlertDialogTitle>
-            <AlertDialogDescription>
-              This action cannot be undone. This will permanently delete the
-              item from your account.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-      <AlertDialog>
-        <AlertDialogTrigger asChild>
-          <Button variant="outline">Small Size</Button>
-        </AlertDialogTrigger>
-        <AlertDialogContent size="sm">
-          <AlertDialogHeader>
-            <AlertDialogMedia>
-              <TrashIcon className="size-8" />
-            </AlertDialogMedia>
-            <AlertDialogTitle>Delete this item?</AlertDialogTitle>
-            <AlertDialogDescription>
-              This action cannot be undone.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/app-breadcrumbs.tsx b/apps/v4/app/(internal)/sink/components/app-breadcrumbs.tsx
deleted file mode 100644
index bd879dbe12..0000000000
--- a/apps/v4/app/(internal)/sink/components/app-breadcrumbs.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-"use client"
-
-import { useParams } from "next/navigation"
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york-v4/ui/breadcrumb"
-
-export function AppBreadcrumbs() {
-  const params = useParams()
-  const { name } = params
-
-  if (!name) {
-    return (
-      <Breadcrumb>
-        <BreadcrumbList>
-          <BreadcrumbItem>
-            <BreadcrumbPage>Kitchen Sink</BreadcrumbPage>
-          </BreadcrumbItem>
-        </BreadcrumbList>
-      </Breadcrumb>
-    )
-  }
-
-  return (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/sink">Kitchen Sink</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator className="hidden sm:flex" />
-        <BreadcrumbItem className="hidden sm:block">
-          <BreadcrumbPage className="capitalize">{name}</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/app-sidebar.tsx b/apps/v4/app/(internal)/sink/components/app-sidebar.tsx
deleted file mode 100644
index a52ac88ca2..0000000000
--- a/apps/v4/app/(internal)/sink/components/app-sidebar.tsx
+++ /dev/null
@@ -1,297 +0,0 @@
-"use client"
-
-import * as React from "react"
-import Link from "next/link"
-import { usePathname } from "next/navigation"
-import {
-  AudioWaveform,
-  BookOpen,
-  Bot,
-  ChevronRightIcon,
-  Command,
-  GalleryVerticalEnd,
-  SearchIcon,
-  Settings2,
-  SquareTerminal,
-} from "lucide-react"
-
-import { Index } from "@/registry/__index__"
-import { NavUser } from "@/registry/new-york-v4/blocks/sidebar-07/components/nav-user"
-import { TeamSwitcher } from "@/registry/new-york-v4/blocks/sidebar-07/components/team-switcher"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/registry/new-york-v4/ui/collapsible"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
-} from "@/registry/new-york-v4/ui/input-group"
-import { Label } from "@/registry/new-york-v4/ui/label"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarRail,
-} from "@/registry/new-york-v4/ui/sidebar"
-import { componentRegistry } from "@/app/(internal)/sink/component-registry"
-
-// This is sample data.
-const data = {
-  user: {
-    name: "shadcn",
-    email: "m@example.com",
-    avatar: "/avatars/shadcn.jpg",
-  },
-  teams: [
-    {
-      name: "Acme Inc",
-      logo: GalleryVerticalEnd,
-      plan: "Enterprise",
-    },
-    {
-      name: "Acme Corp.",
-      logo: AudioWaveform,
-      plan: "Startup",
-    },
-    {
-      name: "Evil Corp.",
-      logo: Command,
-      plan: "Free",
-    },
-  ],
-  navMain: [
-    {
-      title: "Playground",
-      url: "#",
-      icon: SquareTerminal,
-      isActive: true,
-      items: [
-        {
-          title: "History",
-          url: "#",
-        },
-        {
-          title: "Starred",
-          url: "#",
-        },
-        {
-          title: "Settings",
-          url: "#",
-        },
-      ],
-    },
-    {
-      title: "Models",
-      url: "#",
-      icon: Bot,
-      items: [
-        {
-          title: "Genesis",
-          url: "#",
-        },
-        {
-          title: "Explorer",
-          url: "#",
-        },
-        {
-          title: "Quantum",
-          url: "#",
-        },
-      ],
-    },
-    {
-      title: "Documentation",
-      url: "#",
-      icon: BookOpen,
-      items: [
-        {
-          title: "Introduction",
-          url: "#",
-        },
-        {
-          title: "Get Started",
-          url: "#",
-        },
-        {
-          title: "Tutorials",
-          url: "#",
-        },
-        {
-          title: "Changelog",
-          url: "#",
-        },
-      ],
-    },
-    {
-      title: "Settings",
-      url: "#",
-      icon: Settings2,
-      items: [
-        {
-          title: "General",
-          url: "#",
-        },
-        {
-          title: "Team",
-          url: "#",
-        },
-        {
-          title: "Billing",
-          url: "#",
-        },
-        {
-          title: "Limits",
-          url: "#",
-        },
-      ],
-    },
-  ],
-  components: Object.values(Index)
-    .filter((item) => item.type === "registry:ui")
-    .concat([
-      {
-        name: "combobox",
-      },
-    ])
-    .sort((a, b) => a.name.localeCompare(b.name)),
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-  const pathname = usePathname()
-  return (
-    <Sidebar side="left" collapsible="icon" {...props}>
-      <SidebarHeader>
-        <TeamSwitcher teams={data.teams} />
-        <SidebarGroup className="py-0 group-data-[collapsible=icon]:hidden">
-          <SidebarGroupContent>
-            <form className="relative">
-              <Label htmlFor="search" className="sr-only">
-                Search
-              </Label>
-              <InputGroup className="h-8 bg-background shadow-none">
-                <InputGroupInput
-                  id="search"
-                  placeholder="Search the docs..."
-                  className="h-7"
-                  data-slot="input-group-control"
-                />
-                <InputGroupAddon>
-                  <SearchIcon className="text-muted-foreground" />
-                </InputGroupAddon>
-              </InputGroup>
-            </form>
-          </SidebarGroupContent>
-        </SidebarGroup>
-      </SidebarHeader>
-      <SidebarContent>
-        <SidebarGroup>
-          <SidebarGroupLabel>Platform</SidebarGroupLabel>
-          <SidebarMenu>
-            {data.navMain.map((item) => (
-              <Collapsible
-                key={item.title}
-                asChild
-                defaultOpen={item.isActive}
-                className="group/collapsible"
-              >
-                <SidebarMenuItem>
-                  <CollapsibleTrigger asChild>
-                    <SidebarMenuButton tooltip={item.title}>
-                      {item.icon && <item.icon />}
-                      <span>{item.title}</span>
-                      <ChevronRightIcon className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-                    </SidebarMenuButton>
-                  </CollapsibleTrigger>
-                  <CollapsibleContent>
-                    <SidebarMenuSub>
-                      {item.items?.map((subItem) => (
-                        <SidebarMenuSubItem key={subItem.title}>
-                          <SidebarMenuSubButton asChild>
-                            <a href={subItem.url}>
-                              <span>{subItem.title}</span>
-                            </a>
-                          </SidebarMenuSubButton>
-                        </SidebarMenuSubItem>
-                      ))}
-                    </SidebarMenuSub>
-                  </CollapsibleContent>
-                </SidebarMenuItem>
-              </Collapsible>
-            ))}
-          </SidebarMenu>
-        </SidebarGroup>
-        <SidebarGroup className="group-data-[collapsible=icon]:hidden">
-          <SidebarMenu>
-            {["registry:ui", "registry:page", "registry:block"].map((type) => {
-              const typeComponents = Object.entries(componentRegistry).filter(
-                ([, item]) => item.type === type
-              )
-              if (typeComponents.length === 0) {
-                return null
-              }
-
-              return (
-                <Collapsible
-                  key={type}
-                  asChild
-                  defaultOpen={pathname.includes("/sink/")}
-                  className="group/collapsible"
-                >
-                  <SidebarMenuItem>
-                    <CollapsibleTrigger asChild>
-                      <SidebarMenuButton>
-                        <span>
-                          {type === "registry:ui"
-                            ? "Components"
-                            : type === "registry:page"
-                              ? "Pages"
-                              : "Blocks"}
-                        </span>
-                        <ChevronRightIcon className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-                      </SidebarMenuButton>
-                    </CollapsibleTrigger>
-                    <CollapsibleContent>
-                      <SidebarMenuSub>
-                        {typeComponents.map(([key, item]) => (
-                          <SidebarMenuSubItem key={key}>
-                            <SidebarMenuSubButton
-                              asChild
-                              isActive={pathname === item.href}
-                            >
-                              <Link href={item.href}>
-                                <span>{item.name}</span>
-                                {item.label && (
-                                  <span className="flex size-2 rounded-full bg-blue-500" />
-                                )}
-                              </Link>
-                            </SidebarMenuSubButton>
-                          </SidebarMenuSubItem>
-                        ))}
-                      </SidebarMenuSub>
-                    </CollapsibleContent>
-                  </SidebarMenuItem>
-                </Collapsible>
-              )
-            })}
-          </SidebarMenu>
-        </SidebarGroup>
-      </SidebarContent>
-      <SidebarFooter>
-        <NavUser user={data.user} />
-      </SidebarFooter>
-      <SidebarRail />
-    </Sidebar>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/aspect-ratio-demo.tsx b/apps/v4/app/(internal)/sink/components/aspect-ratio-demo.tsx
deleted file mode 100644
index 1d74a861eb..0000000000
--- a/apps/v4/app/(internal)/sink/components/aspect-ratio-demo.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import Image from "next/image"
-
-import { AspectRatio } from "@/registry/new-york-v4/ui/aspect-ratio"
-
-export function AspectRatioDemo() {
-  return (
-    <div className="grid w-full max-w-sm items-start gap-4">
-      <AspectRatio ratio={16 / 9} className="rounded-lg bg-muted">
-        <Image
-          src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
-          alt="Photo by Drew Beamer"
-          fill
-          className="h-full w-full rounded-lg object-cover dark:brightness-[0.2] dark:grayscale"
-        />
-      </AspectRatio>
-      <AspectRatio ratio={1 / 1} className="rounded-lg bg-muted">
-        <Image
-          src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
-          alt="Photo by Drew Beamer"
-          fill
-          className="h-full w-full rounded-lg object-cover dark:brightness-[0.2] dark:grayscale"
-        />
-      </AspectRatio>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/avatar-demo.tsx b/apps/v4/app/(internal)/sink/components/avatar-demo.tsx
deleted file mode 100644
index ffdf68de38..0000000000
--- a/apps/v4/app/(internal)/sink/components/avatar-demo.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-import { PlusIcon } from "lucide-react"
-
-import {
-  Avatar,
-  AvatarBadge,
-  AvatarFallback,
-  AvatarGroup,
-  AvatarGroupCount,
-  AvatarImage,
-} from "@/registry/new-york-v4/ui/avatar"
-
-export function AvatarDemo() {
-  return (
-    <div className="flex flex-col gap-6">
-      {/* Sizes. */}
-      <div className="flex flex-row flex-wrap items-center gap-4">
-        <Avatar size="sm">
-          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-          <AvatarFallback>CN</AvatarFallback>
-        </Avatar>
-        <Avatar>
-          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-          <AvatarFallback>CN</AvatarFallback>
-        </Avatar>
-        <Avatar size="lg">
-          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-          <AvatarFallback>CN</AvatarFallback>
-        </Avatar>
-      </div>
-      {/* Fallback. */}
-      <div className="flex flex-row flex-wrap items-center gap-4">
-        <Avatar size="sm">
-          <AvatarFallback>CN</AvatarFallback>
-        </Avatar>
-        <Avatar>
-          <AvatarFallback>CN</AvatarFallback>
-        </Avatar>
-        <Avatar size="lg">
-          <AvatarFallback>CN</AvatarFallback>
-        </Avatar>
-      </div>
-      {/* With badge. */}
-      <div className="flex flex-row flex-wrap items-center gap-4">
-        <Avatar size="sm">
-          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-          <AvatarFallback>CN</AvatarFallback>
-          <AvatarBadge />
-        </Avatar>
-        <Avatar>
-          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-          <AvatarFallback>CN</AvatarFallback>
-          <AvatarBadge />
-        </Avatar>
-        <Avatar size="lg">
-          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-          <AvatarFallback>CN</AvatarFallback>
-          <AvatarBadge>
-            <PlusIcon />
-          </AvatarBadge>
-        </Avatar>
-      </div>
-      {/* Avatar group. */}
-      <div className="flex flex-row flex-wrap items-center gap-4">
-        <AvatarGroup>
-          <Avatar size="sm">
-            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-            <AvatarFallback>CN</AvatarFallback>
-          </Avatar>
-          <Avatar size="sm">
-            <AvatarImage
-              src="https://github.com/maxleiter.png"
-              alt="@maxleiter"
-            />
-            <AvatarFallback>ML</AvatarFallback>
-          </Avatar>
-          <Avatar size="sm">
-            <AvatarImage
-              src="https://github.com/evilrabbit.png"
-              alt="@evilrabbit"
-            />
-            <AvatarFallback>ER</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-        <AvatarGroup>
-          <Avatar>
-            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-            <AvatarFallback>CN</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarImage
-              src="https://github.com/maxleiter.png"
-              alt="@maxleiter"
-            />
-            <AvatarFallback>ML</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarImage
-              src="https://github.com/evilrabbit.png"
-              alt="@evilrabbit"
-            />
-            <AvatarFallback>ER</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-        <AvatarGroup>
-          <Avatar size="lg">
-            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-            <AvatarFallback>CN</AvatarFallback>
-          </Avatar>
-          <Avatar size="lg">
-            <AvatarImage
-              src="https://github.com/maxleiter.png"
-              alt="@maxleiter"
-            />
-            <AvatarFallback>ML</AvatarFallback>
-          </Avatar>
-          <Avatar size="lg">
-            <AvatarImage
-              src="https://github.com/evilrabbit.png"
-              alt="@evilrabbit"
-            />
-            <AvatarFallback>ER</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      </div>
-      {/* Avatar group with count. */}
-      <div className="flex flex-row flex-wrap items-center gap-4">
-        <AvatarGroup>
-          <Avatar>
-            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-            <AvatarFallback>CN</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarImage
-              src="https://github.com/maxleiter.png"
-              alt="@maxleiter"
-            />
-            <AvatarFallback>ML</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarImage
-              src="https://github.com/evilrabbit.png"
-              alt="@evilrabbit"
-            />
-            <AvatarFallback>ER</AvatarFallback>
-          </Avatar>
-          <AvatarGroupCount>+3</AvatarGroupCount>
-        </AvatarGroup>
-        <AvatarGroup>
-          <Avatar>
-            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-            <AvatarFallback>CN</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarImage
-              src="https://github.com/maxleiter.png"
-              alt="@maxleiter"
-            />
-            <AvatarFallback>ML</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarImage
-              src="https://github.com/evilrabbit.png"
-              alt="@evilrabbit"
-            />
-            <AvatarFallback>ER</AvatarFallback>
-          </Avatar>
-          <AvatarGroupCount>
-            <PlusIcon />
-          </AvatarGroupCount>
-        </AvatarGroup>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/badge-demo.tsx b/apps/v4/app/(internal)/sink/components/badge-demo.tsx
deleted file mode 100644
index d98c5b44da..0000000000
--- a/apps/v4/app/(internal)/sink/components/badge-demo.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { AlertCircleIcon, ArrowRightIcon, CheckIcon } from "lucide-react"
-
-import { Badge } from "@/registry/new-york-v4/ui/badge"
-
-export function BadgeDemo() {
-  return (
-    <div className="flex flex-col items-center gap-2">
-      <div className="flex w-full flex-wrap gap-2">
-        <Badge>Badge</Badge>
-        <Badge variant="secondary">Secondary</Badge>
-        <Badge variant="destructive">Destructive</Badge>
-        <Badge variant="outline">Outline</Badge>
-        <Badge variant="ghost">Ghost</Badge>
-        <Badge variant="link">Link</Badge>
-      </div>
-      <div className="flex w-full flex-wrap gap-2">
-        <Badge variant="outline">
-          <CheckIcon />
-          Badge
-        </Badge>
-        <Badge variant="destructive">
-          <AlertCircleIcon />
-          Alert
-        </Badge>
-        <Badge className="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">
-          8
-        </Badge>
-        <Badge
-          className="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
-          variant="destructive"
-        >
-          99
-        </Badge>
-        <Badge
-          className="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
-          variant="outline"
-        >
-          20+
-        </Badge>
-      </div>
-      <div className="flex w-full flex-wrap gap-2">
-        <Badge asChild>
-          <a href="#">
-            Link <ArrowRightIcon />
-          </a>
-        </Badge>
-        <Badge asChild variant="secondary">
-          <a href="#">
-            Link <ArrowRightIcon />
-          </a>
-        </Badge>
-        <Badge asChild variant="destructive">
-          <a href="#">
-            Link <ArrowRightIcon />
-          </a>
-        </Badge>
-        <Badge asChild variant="outline">
-          <a href="#">
-            Link <ArrowRightIcon />
-          </a>
-        </Badge>
-        <Badge asChild variant="ghost">
-          <a href="#">
-            Link <ArrowRightIcon />
-          </a>
-        </Badge>
-        <Badge asChild variant="link">
-          <a href="#">
-            Link <ArrowRightIcon />
-          </a>
-        </Badge>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/breadcrumb-demo.tsx b/apps/v4/app/(internal)/sink/components/breadcrumb-demo.tsx
deleted file mode 100644
index 058579162c..0000000000
--- a/apps/v4/app/(internal)/sink/components/breadcrumb-demo.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import {
-  Breadcrumb,
-  BreadcrumbEllipsis,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york-v4/ui/breadcrumb"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/registry/new-york-v4/ui/dropdown-menu"
-
-export function BreadcrumbDemo() {
-  return (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/">Home</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <DropdownMenu>
-            <DropdownMenuTrigger className="flex items-center gap-1">
-              <BreadcrumbEllipsis className="h-4 w-4" />
-              <span className="sr-only">Toggle menu</span>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="start">
-              <DropdownMenuItem>Documentation</DropdownMenuItem>
-              <DropdownMenuItem>Themes</DropdownMenuItem>
-              <DropdownMenuItem>GitHub</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/button-demo.tsx b/apps/v4/app/(internal)/sink/components/button-demo.tsx
deleted file mode 100644
index f6a90626c0..0000000000
--- a/apps/v4/app/(internal)/sink/components/button-demo.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import { ArrowRightIcon, Loader2Icon, PlusIcon, SendIcon } from "lucide-react"
-
-import { Button } from "@/registry/new-york-v4/ui/button"
-
-export function ButtonDemo() {
-  return (
-    <div className="flex flex-col gap-6">
-      <div className="flex flex-wrap items-center gap-2 md:flex-row">
-        <Button size="xs">Extra Small</Button>
-        <Button variant="outline" size="xs">
-          Outline
-        </Button>
-        <Button variant="ghost" size="xs">
-          Ghost
-        </Button>
-        <Button variant="destructive" size="xs">
-          Destructive
-        </Button>
-        <Button variant="secondary" size="xs">
-          Secondary
-        </Button>
-        <Button variant="link" size="xs">
-          Link
-        </Button>
-        <Button variant="outline" size="xs">
-          <SendIcon /> Send
-        </Button>
-      </div>
-      <div className="flex flex-wrap items-center gap-2 md:flex-row">
-        <Button size="sm">Small</Button>
-        <Button variant="outline" size="sm">
-          Outline
-        </Button>
-        <Button variant="ghost" size="sm">
-          Ghost
-        </Button>
-        <Button variant="destructive" size="sm">
-          Destructive
-        </Button>
-        <Button variant="secondary" size="sm">
-          Secondary
-        </Button>
-        <Button variant="link" size="sm">
-          Link
-        </Button>
-        <Button variant="outline" size="sm">
-          <SendIcon /> Send
-        </Button>
-      </div>
-      <div className="flex flex-wrap items-center gap-2 md:flex-row">
-        <Button>Button</Button>
-        <Button variant="outline">Outline</Button>
-        <Button variant="ghost">Ghost</Button>
-        <Button variant="destructive">Destructive</Button>
-        <Button variant="secondary">Secondary</Button>
-        <Button variant="link">Link</Button>
-        <Button variant="outline">
-          <SendIcon /> Send
-        </Button>
-        <Button variant="outline">
-          Learn More <ArrowRightIcon />
-        </Button>
-        <Button disabled variant="outline">
-          <Loader2Icon className="animate-spin" />
-          Please wait
-        </Button>
-      </div>
-      <div className="flex flex-wrap items-center gap-2 md:flex-row">
-        <Button size="lg">Large</Button>
-        <Button variant="outline" size="lg">
-          Outline
-        </Button>
-        <Button variant="ghost" size="lg">
-          Ghost
-        </Button>
-        <Button variant="destructive" size="lg">
-          Destructive
-        </Button>
-        <Button variant="secondary" size="lg">
-          Secondary
-        </Button>
-        <Button variant="link" size="lg">
-          Link
-        </Button>
-        <Button variant="outline" size="lg">
-          <SendIcon /> Send
-        </Button>
-      </div>
-      <div className="flex flex-wrap items-center gap-2 md:flex-row">
-        <Button size="icon-xs" variant="outline">
-          <PlusIcon />
-        </Button>
-        <Button size="icon-sm" variant="outline">
-          <PlusIcon />
-        </Button>
-        <Button size="icon" variant="outline">
-          <PlusIcon />
-        </Button>
-        <Button size="icon-lg" variant="outline">
-          <PlusIcon />
-        </Button>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/button-group-demo.tsx b/apps/v4/app/(internal)/sink/components/button-group-demo.tsx
deleted file mode 100644
index deec8f5d6e..0000000000
--- a/apps/v4/app/(internal)/sink/components/button-group-demo.tsx
+++ /dev/null
@@ -1,581 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import {
-  IconArrowRight,
-  IconBrandGithubCopilot,
-  IconChevronDown,
-  IconCircleCheck,
-  IconCloudCode,
-  IconHeart,
-  IconMinus,
-  IconPin,
-  IconPlus,
-  IconUserCircle,
-} from "@tabler/icons-react"
-import {
-  AlertTriangleIcon,
-  ArrowLeftIcon,
-  ArrowRightIcon,
-  AudioLinesIcon,
-  CheckIcon,
-  ChevronDownIcon,
-  CopyIcon,
-  FlipHorizontalIcon,
-  FlipVerticalIcon,
-  MoreHorizontalIcon,
-  PercentIcon,
-  RotateCwIcon,
-  SearchIcon,
-  ShareIcon,
-  TrashIcon,
-  UserRoundXIcon,
-  VolumeOffIcon,
-} from "lucide-react"
-
-import { Button } from "@/registry/new-york-v4/ui/button"
-import {
-  ButtonGroup,
-  ButtonGroupSeparator,
-  ButtonGroupText,
-} from "@/registry/new-york-v4/ui/button-group"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/new-york-v4/ui/dropdown-menu"
-import { Field, FieldGroup } from "@/registry/new-york-v4/ui/field"
-import { Input } from "@/registry/new-york-v4/ui/input"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-} from "@/registry/new-york-v4/ui/input-group"
-import { Label } from "@/registry/new-york-v4/ui/label"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/new-york-v4/ui/popover"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york-v4/ui/select"
-import { Separator } from "@/registry/new-york-v4/ui/separator"
-import { Textarea } from "@/registry/new-york-v4/ui/textarea"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/new-york-v4/ui/tooltip"
-
-export function ButtonGroupDemo() {
-  const [currency, setCurrency] = useState("$")
-  return (
-    <div className="flex gap-12">
-      <div className="flex max-w-sm flex-col gap-6">
-        <ButtonGroup>
-          <Button>Button</Button>
-          <Button>
-            Get Started <IconArrowRight />
-          </Button>
-        </ButtonGroup>
-        <ButtonGroup>
-          <Button>Button</Button>
-          <ButtonGroupSeparator className="bg-primary/80" />
-          <Button>
-            Get Started <IconArrowRight />
-          </Button>
-        </ButtonGroup>
-        <ButtonGroup>
-          <Button variant="outline">Button</Button>
-          <Input placeholder="Type something here..." />
-        </ButtonGroup>
-        <ButtonGroup>
-          <Input placeholder="Type something here..." />
-          <Button variant="outline">Button</Button>
-        </ButtonGroup>
-        <ButtonGroup>
-          <Button variant="outline">Button</Button>
-          <Button variant="outline">Another Button</Button>
-        </ButtonGroup>
-        <ButtonGroup>
-          <ButtonGroupText>Text</ButtonGroupText>
-          <Button variant="outline">Another Button</Button>
-        </ButtonGroup>
-        <ButtonGroup>
-          <ButtonGroupText asChild>
-            <Label htmlFor="input">
-              <IconCloudCode /> GPU Size
-            </Label>
-          </ButtonGroupText>
-          <Input id="input" placeholder="Type something here..." />
-        </ButtonGroup>
-        <ButtonGroup>
-          <ButtonGroupText>Prefix</ButtonGroupText>
-          <Input id="input" placeholder="Type something here..." />
-          <ButtonGroupText>Suffix</ButtonGroupText>
-        </ButtonGroup>
-        <div className="flex gap-4">
-          <ButtonGroup>
-            <Button variant="outline">Update</Button>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="outline">
-                  <ChevronDownIcon />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                <DropdownMenuItem>Disable</DropdownMenuItem>
-                <DropdownMenuItem variant="destructive">
-                  Uninstall
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </ButtonGroup>
-          <ButtonGroup className="[--radius:9999px]">
-            <Button variant="outline">Follow</Button>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="outline" className="pl-2!">
-                  <ChevronDownIcon />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" className="[--radius:0.95rem]">
-                <DropdownMenuGroup>
-                  <DropdownMenuItem>
-                    <VolumeOffIcon />
-                    Mute Conversation
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <CheckIcon />
-                    Mark as Read
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <AlertTriangleIcon />
-                    Report Conversation
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <UserRoundXIcon />
-                    Block User
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <ShareIcon />
-                    Share Conversation
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <CopyIcon />
-                    Copy Conversation
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuItem variant="destructive">
-                    <TrashIcon />
-                    Delete Conversation
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </ButtonGroup>
-          <ButtonGroup className="[--radius:0.9rem]">
-            <Button variant="secondary">Actions</Button>
-            <ButtonGroupSeparator />
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="secondary">
-                  <MoreHorizontalIcon />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" className="[--radius:0.9rem]">
-                <DropdownMenuGroup>
-                  <DropdownMenuItem>
-                    <IconCircleCheck />
-                    Select Messages
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <IconPin />
-                    Edit Pins
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <IconUserCircle />
-                    Set Up Name & Photo
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </ButtonGroup>
-        </div>
-        <Field>
-          <Label htmlFor="amount">Amount</Label>
-          <ButtonGroup>
-            <Select value={currency} onValueChange={setCurrency}>
-              <SelectTrigger className="font-mono">{currency}</SelectTrigger>
-              <SelectContent>
-                <SelectItem value="$">$</SelectItem>
-                <SelectItem value="€">€</SelectItem>
-                <SelectItem value="£">£</SelectItem>
-              </SelectContent>
-            </Select>
-            <Input placeholder="Enter amount to send" />
-            <Button variant="outline">
-              <ArrowRightIcon />
-            </Button>
-          </ButtonGroup>
-        </Field>
-      </div>
-      <div className="flex max-w-xs flex-col gap-6">
-        <ButtonGroup className="[--spacing:0.2rem]">
-          <Button variant="outline">
-            <FlipHorizontalIcon />
-          </Button>
-          <Button variant="outline">
-            <FlipVerticalIcon />
-          </Button>
-          <Button variant="outline">
-            <RotateCwIcon />
-          </Button>
-          <InputGroup>
-            <InputGroupInput placeholder="0.00" />
-            <InputGroupAddon
-              align="inline-end"
-              className="text-muted-foreground"
-            >
-              <PercentIcon />
-            </InputGroupAddon>
-          </InputGroup>
-        </ButtonGroup>
-        <div className="flex gap-2 [--radius:0.95rem] [--ring:var(--color-blue-300)] [--spacing:0.22rem] **:[.shadow-xs]:shadow-none">
-          <InputGroup>
-            <InputGroupInput placeholder="Type to search..." />
-            <InputGroupAddon
-              align="inline-start"
-              className="text-muted-foreground"
-            >
-              <SearchIcon />
-            </InputGroupAddon>
-          </InputGroup>
-          <ButtonGroup>
-            <Button variant="outline">
-              <IconBrandGithubCopilot />
-            </Button>
-            <Popover>
-              <PopoverTrigger asChild>
-                <Button variant="outline">
-                  <IconCloudCode />
-                  <IconChevronDown />
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent align="end" className="rounded-xl p-0 text-sm">
-                <div className="px-4 py-3">
-                  <div className="text-sm font-medium">Agent Tasks</div>
-                </div>
-                <Separator />
-                <div className="p-4 *:[p:not(:last-child)]:mb-2">
-                  <Textarea
-                    placeholder="Describe your task in natural language."
-                    className="mb-4 resize-none"
-                  />
-                  <p className="font-medium">Start a new task with Copilot</p>
-                  <p className="text-muted-foreground">
-                    Describe your task in natural language. Copilot will work in
-                    the background and open a pull request for your review.
-                  </p>
-                </div>
-              </PopoverContent>
-            </Popover>
-          </ButtonGroup>
-        </div>
-        <FieldGroup className="grid grid-cols-2 gap-4 [--spacing:0.22rem]">
-          <Field>
-            <Label htmlFor="width">Width</Label>
-            <ButtonGroup>
-              <InputGroup>
-                <InputGroupInput id="width" />
-                <InputGroupAddon className="text-muted-foreground">
-                  W
-                </InputGroupAddon>
-                <InputGroupAddon
-                  align="inline-end"
-                  className="text-muted-foreground"
-                >
-                  px
-                </InputGroupAddon>
-              </InputGroup>
-              <Button variant="outline" size="icon">
-                <IconMinus />
-              </Button>
-              <Button variant="outline" size="icon">
-                <IconPlus />
-              </Button>
-            </ButtonGroup>
-          </Field>
-          <Field className="w-full">
-            <Label htmlFor="color">Color</Label>
-            <ButtonGroup className="w-full">
-              <InputGroup>
-                <InputGroupInput id="color" />
-                <InputGroupAddon align="inline-start">
-                  <Popover>
-                    <PopoverTrigger asChild>
-                      <InputGroupButton>
-                        <span className="size-4 rounded-xs bg-blue-600" />
-                      </InputGroupButton>
-                    </PopoverTrigger>
-                    <PopoverContent
-                      align="start"
-                      className="max-w-48 rounded-lg p-2"
-                      alignOffset={-8}
-                      sideOffset={8}
-                    >
-                      <div className="flex flex-wrap gap-1.5">
-                        {[
-                          "#EA4335", // Red
-                          "#FBBC04", // Yellow
-                          "#34A853", // Green
-                          "#4285F4", // Blue
-                          "#9333EA", // Purple
-                          "#EC4899", // Pink
-                          "#10B981", // Emerald
-                          "#F97316", // Orange
-                          "#6366F1", // Indigo
-                          "#14B8A6", // Teal
-                          "#8B5CF6", // Violet
-                          "#F59E0B", // Amber
-                        ].map((color) => (
-                          <div
-                            key={color}
-                            className="size-6 cursor-pointer rounded-sm transition-transform hover:scale-110"
-                            style={{ backgroundColor: color }}
-                          />
-                        ))}
-                      </div>
-                    </PopoverContent>
-                  </Popover>
-                </InputGroupAddon>
-                <InputGroupAddon
-                  align="inline-end"
-                  className="text-muted-foreground"
-                >
-                  %
-                </InputGroupAddon>
-              </InputGroup>
-            </ButtonGroup>
-          </Field>
-        </FieldGroup>
-        <ButtonGroup>
-          <Button variant="outline">
-            <IconHeart /> Like
-          </Button>
-          <Button
-            variant="outline"
-            asChild
-            className="pointer-events-none px-2 text-muted-foreground"
-          >
-            <span>1.2K</span>
-          </Button>
-        </ButtonGroup>
-        <ExportButtonGroup />
-        <ButtonGroup>
-          <Select defaultValue="hours">
-            <SelectTrigger id="duration">
-              <SelectValue placeholder="Select duration" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="hours">Hours</SelectItem>
-              <SelectItem value="days">Days</SelectItem>
-              <SelectItem value="weeks">Weeks</SelectItem>
-            </SelectContent>
-          </Select>
-          <Input />
-        </ButtonGroup>
-        <ButtonGroup className="[--radius:9999rem]">
-          <ButtonGroup>
-            <Button variant="outline" size="icon">
-              <IconPlus />
-            </Button>
-          </ButtonGroup>
-          <ButtonGroup>
-            <InputGroup>
-              <InputGroupInput placeholder="Send a message..." />
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <InputGroupAddon align="inline-end">
-                    <AudioLinesIcon />
-                  </InputGroupAddon>
-                </TooltipTrigger>
-                <TooltipContent>Voice Mode</TooltipContent>
-              </Tooltip>
-            </InputGroup>
-          </ButtonGroup>
-        </ButtonGroup>
-        <ButtonGroup>
-          <Button variant="outline" size="sm">
-            <ArrowLeftIcon />
-            Previous
-          </Button>
-          <Button variant="outline" size="sm">
-            1
-          </Button>
-          <Button variant="outline" size="sm">
-            2
-          </Button>
-          <Button variant="outline" size="sm">
-            3
-          </Button>
-          <Button variant="outline" size="sm">
-            4
-          </Button>
-          <Button variant="outline" size="sm">
-            5
-          </Button>
-          <Button variant="outline" size="sm">
-            Next
-            <ArrowRightIcon />
-          </Button>
-        </ButtonGroup>
-        <ButtonGroup className="[--radius:0.9rem] [--spacing:0.22rem]">
-          <ButtonGroup>
-            <Button variant="outline">1</Button>
-            <Button variant="outline">2</Button>
-            <Button variant="outline">3</Button>
-            <Button variant="outline">4</Button>
-            <Button variant="outline">5</Button>
-          </ButtonGroup>
-          <ButtonGroup>
-            <Button variant="outline" size="icon">
-              <ArrowLeftIcon />
-            </Button>
-            <Button variant="outline" size="icon">
-              <ArrowRightIcon />
-            </Button>
-          </ButtonGroup>
-        </ButtonGroup>
-        <ButtonGroup>
-          <ButtonGroup>
-            <Button variant="outline">
-              <ArrowLeftIcon />
-            </Button>
-            <Button variant="outline">
-              <ArrowRightIcon />
-            </Button>
-          </ButtonGroup>
-          <ButtonGroup aria-label="Single navigation button">
-            <Button variant="outline" size="icon">
-              <ArrowLeftIcon />
-            </Button>
-          </ButtonGroup>
-        </ButtonGroup>
-      </div>
-      <div className="flex max-w-xs flex-col gap-6">
-        <Field>
-          <Label id="alignment-label">Text Alignment</Label>
-          <ButtonGroup aria-labelledby="alignment-label">
-            <Button variant="outline" size="sm">
-              Left
-            </Button>
-            <Button variant="outline" size="sm">
-              Center
-            </Button>
-            <Button variant="outline" size="sm">
-              Right
-            </Button>
-            <Button variant="outline" size="sm">
-              Justify
-            </Button>
-          </ButtonGroup>
-        </Field>
-        <div className="flex gap-6">
-          <ButtonGroup
-            orientation="vertical"
-            aria-label="Media controls"
-            className="h-fit"
-          >
-            <Button variant="outline" size="icon">
-              <IconPlus />
-            </Button>
-            <Button variant="outline" size="icon">
-              <IconMinus />
-            </Button>
-          </ButtonGroup>
-          <ButtonGroup orientation="vertical" aria-label="Design tools palette">
-            <ButtonGroup orientation="vertical">
-              <Button variant="outline" size="icon">
-                <SearchIcon />
-              </Button>
-              <Button variant="outline" size="icon">
-                <CopyIcon />
-              </Button>
-              <Button variant="outline" size="icon">
-                <ShareIcon />
-              </Button>
-            </ButtonGroup>
-            <ButtonGroup orientation="vertical">
-              <Button variant="outline" size="icon">
-                <FlipHorizontalIcon />
-              </Button>
-              <Button variant="outline" size="icon">
-                <FlipVerticalIcon />
-              </Button>
-              <Button variant="outline" size="icon">
-                <RotateCwIcon />
-              </Button>
-            </ButtonGroup>
-            <ButtonGroup>
-              <Button variant="outline" size="icon">
-                <TrashIcon />
-              </Button>
-            </ButtonGroup>
-          </ButtonGroup>
-          <ButtonGroup orientation="vertical">
-            <Button variant="outline" size="sm">
-              <IconPlus /> Increase
-            </Button>
-            <Button variant="outline" size="sm">
-              <IconMinus /> Decrease
-            </Button>
-          </ButtonGroup>
-          <ButtonGroup orientation="vertical">
-            <Button variant="secondary" size="sm">
-              <IconPlus /> Increase
-            </Button>
-            <ButtonGroupSeparator orientation="horizontal" />
-            <Button variant="secondary" size="sm">
-              <IconMinus /> Decrease
-            </Button>
-          </ButtonGroup>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function ExportButtonGroup() {
-  const [exportType, setExportType] = useState("pdf")
-
-  return (
-    <ButtonGroup>
-      <Input />
-      <Select value={exportType} onValueChange={setExportType}>
-        <SelectTrigger>
-          <SelectValue asChild>
-            <span>{exportType}</span>
-          </SelectValue>
-        </SelectTrigger>
-        <SelectContent align="end">
-          <SelectItem value="pdf">pdf</SelectItem>
-          <SelectItem value="xlsx">xlsx</SelectItem>
-          <SelectItem value="csv">csv</SelectItem>
-          <SelectItem value="json">json</SelectItem>
-        </SelectContent>
-      </Select>
-    </ButtonGroup>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/calendar-demo.tsx b/apps/v4/app/(internal)/sink/components/calendar-demo.tsx
deleted file mode 100644
index 7878aaa884..0000000000
--- a/apps/v4/app/(internal)/sink/components/calendar-demo.tsx
+++ /dev/null
@@ -1,276 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { addDays } from "date-fns"
-import { Clock2Icon } from "lucide-react"
-import { type DateRange } from "react-day-picker"
-import { es } from "react-day-picker/locale"
-
-import { Button } from "@/registry/new-york-v4/ui/button"
-import { Calendar, CalendarDayButton } from "@/registry/new-york-v4/ui/calendar"
-import { Card, CardContent, CardFooter } from "@/registry/new-york-v4/ui/card"
-import { Input } from "@/registry/new-york-v4/ui/input"
-import { Label } from "@/registry/new-york-v4/ui/label"
-
-export function CalendarDemo() {
-  return (
-    <div className="flex flex-1 flex-col flex-wrap justify-center gap-8 bg-muted p-10 lg:flex-row">
-      <CalendarSingle />
-      <CalendarMultiple />
-      <CalendarRange />
-      <CalendarBookedDates />
-      <CalendarRangeMultipleMonths />
-      <CalendarWithTime />
-      <CalendarWithPresets />
-      <CalendarCustomDays />
-    </div>
-  )
-}
-
-function CalendarSingle() {
-  const [date, setDate] = React.useState<Date | undefined>(
-    new Date(new Date().getFullYear(), new Date().getMonth(), 12)
-  )
-  return (
-    <div className="flex flex-col gap-3">
-      <div className="px-2 text-center text-sm">Single Selection</div>
-      <Calendar
-        mode="single"
-        selected={date}
-        onSelect={setDate}
-        className="rounded-lg border shadow-sm"
-        captionLayout="dropdown"
-      />
-    </div>
-  )
-}
-
-function CalendarMultiple() {
-  return (
-    <div className="flex flex-col gap-3">
-      <div className="px-2 text-center text-sm">Multiple Selection</div>
-      <Calendar mode="multiple" className="rounded-lg border shadow-sm" />
-    </div>
-  )
-}
-
-function CalendarRange() {
-  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
-    from: new Date(new Date().getFullYear(), 0, 12),
-    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),
-  })
-
-  return (
-    <div className="flex flex-col gap-3">
-      <div className="px-2 text-center text-sm">Range Selection</div>
-      <Calendar
-        mode="range"
-        defaultMonth={dateRange?.from}
-        selected={dateRange}
-        onSelect={setDateRange}
-        numberOfMonths={2}
-        disabled={(date) => date > new Date() || date < new Date("1900-01-01")}
-        className="rounded-lg border shadow-sm"
-      />
-    </div>
-  )
-}
-
-function CalendarRangeMultipleMonths() {
-  const [range, setRange] = React.useState<DateRange | undefined>({
-    from: new Date(new Date().getFullYear(), 3, 12),
-    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),
-  })
-
-  return (
-    <div className="flex flex-col gap-3">
-      <div className="px-2 text-center text-sm">Range Selection + Locale</div>
-      <Calendar
-        mode="range"
-        defaultMonth={range?.from}
-        selected={range}
-        onSelect={setRange}
-        numberOfMonths={3}
-        locale={es}
-        fixedWeeks
-        className="rounded-lg border shadow-sm"
-      />
-    </div>
-  )
-}
-
-function CalendarBookedDates() {
-  const [date, setDate] = React.useState<Date | undefined>(
-    new Date(new Date().getFullYear(), 1, 3)
-  )
-  const bookedDates = Array.from(
-    { length: 15 },
-    (_, i) => new Date(new Date().getFullYear(), new Date().getMonth(), 12 + i)
-  )
-
-  return (
-    <div className="flex flex-col gap-3">
-      <div className="px-2 text-center text-sm">With booked dates</div>
-      <Calendar
-        mode="single"
-        defaultMonth={date}
-        selected={date}
-        onSelect={setDate}
-        disabled={bookedDates}
-        modifiers={{
-          booked: bookedDates,
-        }}
-        modifiersClassNames={{
-          booked: "[&>button]:line-through opacity-100",
-        }}
-        className="rounded-lg border shadow-sm"
-      />
-    </div>
-  )
-}
-
-function CalendarWithTime() {
-  const [date, setDate] = React.useState<Date | undefined>(
-    new Date(new Date().getFullYear(), new Date().getMonth(), 12)
-  )
-
-  return (
-    <div className="flex flex-col gap-3">
-      <div className="px-2 text-center text-sm">With Time Input</div>
-      <Card className="w-fit py-4">
-        <CardContent className="px-4">
-          <Calendar
-            mode="single"
-            selected={date}
-            onSelect={setDate}
-            className="p-0"
-          />
-        </CardContent>
-        <CardFooter className="flex flex-col gap-3 border-t px-4 pt-4">
-          <div className="flex w-full flex-col gap-2">
-            <Label htmlFor="time-from">Start Time</Label>
-            <div className="relative flex w-full items-center gap-2">
-              <Clock2Icon className="pointer-events-none absolute left-2.5 size-4 text-muted-foreground select-none" />
-              <Input
-                id="time-from"
-                type="time"
-                step="1"
-                defaultValue="10:30:00"
-                className="appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
-              />
-            </div>
-          </div>
-          <div className="flex w-full flex-col gap-2">
-            <Label htmlFor="time-to">End Time</Label>
-            <div className="relative flex w-full items-center gap-2">
-              <Clock2Icon className="pointer-events-none absolute left-2.5 size-4 text-muted-foreground select-none" />
-              <Input
-                id="time-to"
-                type="time"
-                step="1"
-                defaultValue="12:30:00"
-                className="appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
-              />
-            </div>
-          </div>
-        </CardFooter>
-      </Card>
-    </div>
-  )
-}
-
-function CalendarCustomDays() {
-  const [range, setRange] = React.useState<DateRange | undefined>({
-    from: new Date(new Date().getFullYear(), 11, 8),
-    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),
-  })
-
-  return (
-    <div className="flex flex-col gap-3">
-      <div className="px-2 text-center text-sm">
-        With Custom Days and Formatters
-      </div>
-      <Calendar
-        mode="range"
-        defaultMonth={range?.from}
-        selected={range}
-        onSelect={setRange}
-        numberOfMonths={1}
-        captionLayout="dropdown"
-        className="rounded-lg border shadow-sm [--cell-size:--spacing(12)]"
-        formatters={{
-          formatMonthDropdown: (date) => {
-            return date.toLocaleString("default", { month: "long" })
-          },
-        }}
-        components={{
-          DayButton: ({ children, modifiers, day, ...props }) => {
-            const isWeekend = day.date.getDay() === 0 || day.date.getDay() === 6
-
-            return (
-              <CalendarDayButton day={day} modifiers={modifiers} {...props}>
-                {children}
-                {!modifiers.outside && (
-                  <span>{isWeekend ? "$120" : "$100"}</span>
-                )}
-              </CalendarDayButton>
-            )
-          },
-        }}
-      />
-    </div>
-  )
-}
-
-function CalendarWithPresets() {
-  const [date, setDate] = React.useState<Date | undefined>(
-    new Date(new Date().getFullYear(), 1, 12)
-  )
-  const [currentMonth, setCurrentMonth] = React.useState<Date>(
-    new Date(new Date().getFullYear(), new Date().getMonth(), 1)
-  )
-
-  return (
-    <div className="flex max-w-[300px] flex-col gap-3">
-      <div className="px-2 text-center text-sm">With Presets</div>
-      <Card className="w-fit py-4">
-        <CardContent className="px-4">
-          <Calendar
-            mode="single"
-            selected={date}
-            onSelect={setDate}
-            month={currentMonth}
-            onMonthChange={setCurrentMonth}
-            fixedWeeks
-            className="p-0 [--cell-size:--spacing(9.5)]"
-          />
-        </CardContent>
-        <CardFooter className="flex flex-wrap gap-2 border-t px-4 pt-4">
-          {[
-            { label: "Today", value: 0 },
-            { label: "Tomorrow", value: 1 },
-            { label: "In 3 days", value: 3 },
-            { label: "In a week", value: 7 },
-            { label: "In 2 weeks", value: 14 },
-          ].map((preset) => (
-            <Button
-              key={preset.value}
-              variant="outline"
-              size="sm"
-              className="flex-1"
-              onClick={() => {
-                const newDate = addDays(new Date(), preset.value)
-                setDate(newDate)
-                setCurrentMonth(
-                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)
-                )
-              }}
-            >
-              {preset.label}
-            </Button>
-          ))}
-        </CardFooter>
-      </Card>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/card-demo.tsx b/apps/v4/app/(internal)/sink/components/card-demo.tsx
deleted file mode 100644
index 6470dec453..0000000000
--- a/apps/v4/app/(internal)/sink/components/card-demo.tsx
+++ /dev/null
@@ -1,209 +0,0 @@
-import Image from "next/image"
-import { BathIcon, BedIcon, LandPlotIcon } from "lucide-react"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/new-york-v4/ui/avatar"
-import { Badge } from "@/registry/new-york-v4/ui/badge"
-import { Button } from "@/registry/new-york-v4/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york-v4/ui/card"
-import { Input } from "@/registry/new-york-v4/ui/input"
-import { Label } from "@/registry/new-york-v4/ui/label"
-
-export function CardDemo() {
-  return (
-    <div className="flex flex-col items-start gap-4">
-      <Card className="w-full max-w-sm">
-        <CardHeader>
-          <CardTitle>Login to your account</CardTitle>
-          <CardDescription>
-            Enter your email below to login to your account
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form>
-            <div className="flex flex-col gap-6">
-              <div className="grid gap-2">
-                <Label htmlFor="email">Email</Label>
-                <Input
-                  id="email"
-                  type="email"
-                  placeholder="m@example.com"
-                  required
-                />
-              </div>
-              <div className="grid gap-2">
-                <div className="flex items-center">
-                  <Label htmlFor="password">Password</Label>
-                  <a
-                    href="#"
-                    className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
-                  >
-                    Forgot your password?
-                  </a>
-                </div>
-                <Input id="password" type="password" required />
-              </div>
-            </div>
-          </form>
-        </CardContent>
-        <CardFooter className="flex-col gap-2">
-          <Button type="submit" className="w-full">
-            Login
-          </Button>
-          <Button variant="outline" className="w-full">
-            Login with Google
-          </Button>
-          <div className="mt-4 text-center text-sm">
-            Don&apos;t have an account?{" "}
-            <a href="#" className="underline underline-offset-4">
-              Sign up
-            </a>
-          </div>
-        </CardFooter>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Meeting Notes</CardTitle>
-          <CardDescription>
-            Transcript from the meeting with the client.
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="text-sm">
-          <p>
-            Client requested dashboard redesign with focus on mobile
-            responsiveness.
-          </p>
-          <ol className="mt-4 flex list-decimal flex-col gap-2 pl-6">
-            <li>New analytics widgets for daily/weekly metrics</li>
-            <li>Simplified navigation menu</li>
-            <li>Dark mode support</li>
-            <li>Timeline: 6 weeks</li>
-            <li>Follow-up meeting scheduled for next Tuesday</li>
-          </ol>
-        </CardContent>
-        <CardFooter>
-          <div className="flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale">
-            <Avatar>
-              <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-              <AvatarFallback>CN</AvatarFallback>
-            </Avatar>
-            <Avatar>
-              <AvatarImage
-                src="https://github.com/maxleiter.png"
-                alt="@maxleiter"
-              />
-              <AvatarFallback>LR</AvatarFallback>
-            </Avatar>
-            <Avatar>
-              <AvatarImage
-                src="https://github.com/evilrabbit.png"
-                alt="@evilrabbit"
-              />
-              <AvatarFallback>ER</AvatarFallback>
-            </Avatar>
-          </div>
-        </CardFooter>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Is this an image?</CardTitle>
-          <CardDescription>This is a card with an image.</CardDescription>
-        </CardHeader>
-        <CardContent className="px-0">
-          <Image
-            src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
-            alt="Photo by Drew Beamer"
-            className="aspect-video object-cover"
-            width={500}
-            height={500}
-          />
-        </CardContent>
-        <CardFooter className="flex items-center gap-2">
-          <Badge variant="outline">
-            <BedIcon /> 4
-          </Badge>
-          <Badge variant="outline">
-            <BathIcon /> 2
-          </Badge>
-          <Badge variant="outline">
-            <LandPlotIcon /> 350m²
-          </Badge>
-          <div className="ml-auto font-medium tabular-nums">$135,000</div>
-        </CardFooter>
-      </Card>
-      <div className="flex w-full flex-wrap items-start gap-8 md:*:data-[slot=card]:basis-1/4">
-        <Card>
-          <CardContent className="text-sm">Content Only</CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle>Header Only</CardTitle>
-            <CardDescription>
-              This is a card with a header and a description.
-            </CardDescription>
-          </CardHeader>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle>Header and Content</CardTitle>
-            <CardDescription>
-              This is a card with a header and a content.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="text-sm">Content</CardContent>
-        </Card>
-        <Card>
-          <CardFooter className="text-sm">Footer Only</CardFooter>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle>Header + Footer</CardTitle>
-            <CardDescription>
-              This is a card with a header and a footer.
-            </CardDescription>
-          </CardHeader>
-          <CardFooter className="text-sm">Footer</CardFooter>
-        </Card>
-        <Card>
-          <CardContent className="text-sm">Content</CardContent>
-          <CardFooter className="text-sm">Footer</CardFooter>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle>Header + Footer</CardTitle>
-            <CardDescription>
-              This is a card with a header and a footer.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="text-sm">Content</CardContent>
-          <CardFooter className="text-sm">Footer</CardFooter>
-        </Card>
-        <Card>
-          <CardHeader className="border-b">
-            <CardTitle>Header with Border</CardTitle>
-            <CardDescription>
-              This is a card with a header that has a bottom border.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="text-sm">Content</CardContent>
-        </Card>
-        <Card>
-          <CardContent className="text-sm">Content</CardContent>
-          <CardFooter className="border-t text-sm">
-            Footer with Border
-          </CardFooter>
-        </Card>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/carousel-demo.tsx b/apps/v4/app/(internal)/sink/components/carousel-demo.tsx
deleted file mode 100644
index 88568b0806..0000000000
--- a/apps/v4/app/(internal)/sink/components/carousel-demo.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import * as React from "react"
-
-import { Card, CardContent } from "@/registry/new-york-v4/ui/card"
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from "@/registry/new-york-v4/ui/carousel"
-
-export function CarouselDemo() {
-  return (
-    <div className="hidden w-full flex-col items-center gap-4 @4xl:flex">
-      <Carousel className="max-w-sm *:data-[slot=carousel-next]:hidden *:data-[slot=carousel-previous]:hidden *:data-[slot=carousel-next]:md:inline-flex *:data-[slot=carousel-previous]:md:inline-flex">
-        <CarouselContent>
-          {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem key={index}>
-              <div className="p-1">
-                <Card>
-                  <CardContent className="flex aspect-square items-center justify-center p-6">
-                    <span className="text-4xl font-semibold">{index + 1}</span>
-                  </CardContent>
-                </Card>
-              </div>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
-      </Carousel>
-      <Carousel
-        className="max-w-sm *:data-[slot=carousel-next]:hidden *:data-[slot=carousel-previous]:hidden *:data-[slot=carousel-next]:md:inline-flex *:data-[slot=carousel-previous]:md:inline-flex"
-        opts={{
-          align: "start",
-        }}
-      >
-        <CarouselContent>
-          {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
-              <div className="p-1">
-                <Card>
-                  <CardContent className="flex aspect-square items-center justify-center p-6">
-                    <span className="text-3xl font-semibold">{index + 1}</span>
-                  </CardContent>
-                </Card>
-              </div>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
-      </Carousel>
-      <Carousel className="max-w-sm *:data-[slot=carousel-next]:hidden *:data-[slot=carousel-previous]:hidden *:data-[slot=carousel-next]:md:inline-flex *:data-[slot=carousel-previous]:md:inline-flex">
-        <CarouselContent className="-ml-1">
-          {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem key={index} className="pl-1 md:basis-1/2">
-              <div className="p-1">
-                <Card>
-                  <CardContent className="flex aspect-square items-center justify-center p-6">
-                    <span className="text-2xl font-semibold">{index + 1}</span>
-                  </CardContent>
-                </Card>
-              </div>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
-      </Carousel>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/chart-area-demo.tsx b/apps/v4/app/(internal)/sink/components/chart-area-demo.tsx
deleted file mode 100644
index 4055369291..0000000000
--- a/apps/v4/app/(internal)/sink/components/chart-area-demo.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-"use client"
-
-import { TrendingUp } from "lucide-react"
-import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york-v4/ui/card"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  type ChartConfig,
-} from "@/registry/new-york-v4/ui/chart"
-
-export const description = "A simple area chart"
-
-const chartData = [
-  { month: "January", desktop: 186 },
-  { month: "February", desktop: 305 },
-  { month: "March", desktop: 237 },
-  { month: "April", desktop: 73 },
-  { month: "May", desktop: 209 },
-  { month: "June", desktop: 214 },
-]
-
-const chartConfig = {
-  desktop: {
-    label: "Desktop",
-    color: "var(--chart-1)",
-  },
-} satisfies ChartConfig
-
-export function ChartAreaDemo() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Area Chart</CardTitle>
-        <CardDescription>
-          Showing total visitors for the last 6 months
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <ChartContainer config={chartConfig}>
-          <AreaChart
-            accessibilityLayer
-            data={chartData}
-            margin={{
-              left: 12,
-              right: 12,
-            }}
-          >
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey="month"
-              tickLine={false}
-              axisLine={false}
-              tickMargin={8}
-              tickFormatter={(value) => value.slice(0, 3)}
-            />
-            <ChartTooltip
-              cursor={false}
-              content={<ChartTooltipContent indicator="line" />}
-            />
-            <Area
-              dataKey="desktop"
-              type="natural"
-              fill="var(--color-desktop)"
-              fillOpacity={0.4}
-              stroke="var(--color-desktop)"
-            />
-          </AreaChart>
-        </ChartContainer>
-      </CardContent>
-      <CardFooter>
-        <div className="flex w-full items-start gap-2 text-sm">
-          <div className="grid gap-2">
-            <div className="flex items-center gap-2 leading-none font-medium">
-              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
-            </div>
-            <div className="flex items-center gap-2 leading-none text-muted-foreground">
-              January - June 2024
-            </div>
-          </div>
-        </div>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/chart-bar-demo.tsx b/apps/v4/app/(internal)/sink/components/chart-bar-demo.tsx
deleted file mode 100644
index c1afa1abf2..0000000000
--- a/apps/v4/app/(internal)/sink/components/chart-bar-demo.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-"use client"
-
-import { TrendingUp } from "lucide-react"
-import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york-v4/ui/card"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  type ChartConfig,
-} from "@/registry/new-york-v4/ui/chart"
-
-export const description = "A multiple bar chart"
-
-const chartData = [
-  { month: "January", desktop: 186, mobile: 80 },
-  { month: "February", desktop: 305, mobile: 200 },
-  { month: "March", desktop: 237, mobile: 120 },
-  { month: "April", desktop: 73, mobile: 190 },
-  { month: "May", desktop: 209, mobile: 130 },
-  { month: "June", desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-  desktop: {
-    label: "Desktop",
-    color: "var(--chart-1)",
-  },
-  mobile: {
-    label: "Mobile",
-    color: "var(--chart-2)",
-  },
-} satisfies ChartConfig
-
-export function ChartBarDemo() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Bar Chart - Multiple</CardTitle>
-        <CardDescription>January - June 2024</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <ChartContainer config={chartConfig}>
-          <BarChart accessibilityLayer data={chartData}>
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey="month"
-              tickLine={false}
-              tickMargin={10}
-              axisLine={false}
-              tickFormatter={(value) => value.slice(0, 3)}
-            />
-            <ChartTooltip
-              cursor={false}
-              content={<ChartTooltipContent indicator="dashed" />}
-            />
-            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
-            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
-          </BarChart>
-        </ChartContainer>
-      </CardContent>
-      <CardFooter className="flex-col items-start gap-2 text-sm">
-        <div className="flex gap-2 leading-none font-medium">
-          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
-        </div>
-        <div className="leading-none text-muted-foreground">
-          Showing total visitors for the last 6 months
-        </div>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/chart-bar-mixed.tsx b/apps/v4/app/(internal)/sink/components/chart-bar-mixed.tsx
deleted file mode 100644
index bac07d75f0..0000000000
--- a/apps/v4/app/(internal)/sink/components/chart-bar-mixed.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-"use client"
-
-import { TrendingUp } from "lucide-react"
-import { Bar, BarChart, XAxis, YAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york-v4/ui/card"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  type ChartConfig,
-} from "@/registry/new-york-v4/ui/chart"
-
-export const description = "A mixed bar chart"
-
-const chartData = [
-  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
-  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
-  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
-  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
-  { browser: "other", visitors: 90, fill: "var(--color-other)" },
-]
-
-const chartConfig = {
-  visitors: {
-    label: "Visitors",
-  },
-  chrome: {
-    label: "Chrome",
-    color: "var(--chart-1)",
-  },
-  safari: {
-    label: "Safari",
-    color: "var(--chart-2)",
-  },
-  firefox: {
-    label: "Firefox",
-    color: "var(--chart-3)",
-  },
-  edge: {
-    label: "Edge",
-    color: "var(--chart-4)",
-  },
-  other: {
-    label: "Other",
-    color: "var(--chart-5)",
-  },
-} satisfies ChartConfig
-
-export function ChartBarMixed() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Bar Chart - Mixed</CardTitle>
-        <CardDescription>January - June 2024</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <ChartContainer config={chartConfig}>
-          <BarChart
-            accessibilityLayer
-            data={chartData}
-            layout="vertical"
-            margin={{
-              left: 0,
-            }}
-          >
-            <YAxis
-              dataKey="browser"
-              type="category"
-              tickLine={false}
-              tickMargin={10}
-              axisLine={false}
-              tickFormatter={(value) =>
-                chartConfig[value as keyof typeof chartConfig]?.label
-              }
-            />
-            <XAxis dataKey="visitors" type="number" hide />
-            <ChartTooltip
-              cursor={false}
-              content={<ChartTooltipContent hideLabel />}
-            />
-            <Bar dataKey="visitors" radius={5} />
-          </BarChart>
-        </ChartContainer>
-      </CardContent>
-      <CardFooter className="flex-col items-start gap-2 text-sm">
-        <div className="flex gap-2 leading-none font-medium">
-          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
-        </div>
-        <div className="leading-none text-muted-foreground">
-          Showing total visitors for the last 6 months
-        </div>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/chart-demo.tsx b/apps/v4/app/(internal)/sink/components/chart-demo.tsx
deleted file mode 100644
index a17d80bcb1..0000000000
--- a/apps/v4/app/(internal)/sink/components/chart-demo.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { ChartBarMixed } from "@/registry/new-york-v4/charts/chart-bar-mixed"
-import { ChartAreaDemo } from "@/app/(internal)/sink/components/chart-area-demo"
-import { ChartBarDemo } from "@/app/(internal)/sink/components/chart-bar-demo"
-import { ChartLineDemo } from "@/app/(internal)/sink/components/chart-line-demo"
-
-export function ChartDemo() {
-  return (
-    <div className="grid w-full max-w-screen-2xl gap-4 *:data-[slot=card]:flex-1 @2xl:grid-cols-2 @6xl:grid-cols-3">
-      <ChartAreaDemo />
-      <ChartBarDemo />
-      <ChartBarMixed />
-      <div className="@6xl:hidden">
-        <ChartLineDemo />
-      </div>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/chart-line-demo.tsx b/apps/v4/app/(internal)/sink/components/chart-line-demo.tsx
deleted file mode 100644
index 1800e9f605..0000000000
--- a/apps/v4/app/(internal)/sink/components/chart-line-demo.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-"use client"
-
-import { TrendingUp } from "lucide-react"
-import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york-v4/ui/card"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  type ChartConfig,
-} from "@/registry/new-york-v4/ui/chart"
-
-export const description = "A multiple line chart"
-
-const chartData = [
-  { month: "January", desktop: 186, mobile: 80 },
-  { month: "February", desktop: 305, mobile: 200 },
-  { month: "March", desktop: 237, mobile: 120 },
-  { month: "April", desktop: 73, mobile: 190 },
-  { month: "May", desktop: 209, mobile: 130 },
-  { month: "June", desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-  desktop: {
-    label: "Desktop",
-    color: "var(--chart-1)",
-  },
-  mobile: {
-    label: "Mobile",
-    color: "var(--chart-2)",
-  },
-} satisfies ChartConfig
-
-export function ChartLineDemo() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Line Chart - Multiple</CardTitle>
-        <CardDescription>January - June 2024</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <ChartContainer config={chartConfig}>
-          <LineChart
-            accessibilityLayer
-            data={chartData}
-            margin={{
-              left: 12,
-              right: 12,
-            }}
-          >
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey="month"
-              tickLine={false}
-              axisLine={false}
-              tickMargin={8}
-              tickFormatter={(value) => value.slice(0, 3)}
-            />
-            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
-            <Line
-              dataKey="desktop"
-              type="monotone"
-              stroke="var(--color-desktop)"
-              strokeWidth={2}
-              dot={false}
-            />
-            <Line
-              dataKey="mobile"
-              type="monotone"
-              stroke="var(--color-mobile)"
-              strokeWidth={2}
-              dot={false}
-            />
-          </LineChart>
-        </ChartContainer>
-      </CardContent>
-      <CardFooter>
-        <div className="flex w-full items-start gap-2 text-sm">
-          <div className="grid gap-2">
-            <div className="flex items-center gap-2 leading-none font-medium">
-              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
-            </div>
-            <div className="flex items-center gap-2 leading-none text-muted-foreground">
-              Showing total visitors for the last 6 months
-            </div>
-          </div>
-        </div>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/checkbox-demo.tsx b/apps/v4/app/(internal)/sink/components/checkbox-demo.tsx
deleted file mode 100644
index 7f3592e8f5..0000000000
--- a/apps/v4/app/(internal)/sink/components/checkbox-demo.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-"use client"
-
-import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
-import { Label } from "@/registry/new-york-v4/ui/label"
-
-export function CheckboxDemo() {
-  return (
-    <div className="flex flex-col gap-6">
-      <div className="flex items-center gap-3">
-        <Checkbox id="terms" />
-        <Label htmlFor="terms">Accept terms and conditions</Label>
-      </div>
-      <div className="flex items-start gap-3">
-        <Checkbox id="terms-2" defaultChecked />
-        <div className="grid gap-2">
-          <Label htmlFor="terms-2">Accept terms and conditions</Label>
-          <p className="text-sm text-muted-foreground">
-            By clicking this checkbox, you agree to the terms and conditions.
-          </p>
-        </div>
-      </div>
-      <div className="flex items-start gap-3">
-        <Checkbox id="toggle" disabled />
-        <Label htmlFor="toggle">Enable notifications</Label>
-      </div>
-      <Label className="flex items-start gap-3 rounded-lg border p-3 hover:bg-accent/50 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950">
-        <Checkbox
-          id="toggle-2"
-          defaultChecked
-          className="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700"
-        />
-        <div className="grid gap-1.5 font-normal">
-          <p className="text-sm leading-none font-medium">
-            Enable notifications
-          </p>
-          <p className="text-sm text-muted-foreground">
-            You can enable or disable notifications at any time.
-          </p>
-        </div>
-      </Label>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/collapsible-demo.tsx b/apps/v4/app/(internal)/sink/components/collapsible-demo.tsx
deleted file mode 100644
index a2da7994ac..0000000000
--- a/apps/v4/app/(internal)/sink/components/collapsible-demo.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { ChevronsUpDown } from "lucide-react"
-
-import { Button } from "@/registry/new-york-v4/ui/button"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/registry/new-york-v4/ui/collapsible"
-
-export function CollapsibleDemo() {
-  const [isOpen, setIsOpen] = React.useState(false)
-
-  return (
-    <Collapsible
-      open={isOpen}
-      onOpenChange={setIsOpen}
-      className="flex w-full flex-col gap-2 md:w-[350px]"
-    >
-      <div className="flex items-center justify-between gap-4 px-4">
-        <h4 className="line-clamp-1 text-sm font-semibold">
-          @peduarte starred 3 repositories
-        </h4>
-        <CollapsibleTrigger asChild>
-          <Button variant="ghost" size="sm">
-            <ChevronsUpDown className="h-4 w-4" />
-            <span className="sr-only">Toggle</span>
-          </Button>
-        </CollapsibleTrigger>
-      </div>
-      <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-xs">
-        @radix-ui/primitives
-      </div>
-      <CollapsibleContent className="flex flex-col gap-2">
-        <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-xs">
-          @radix-ui/colors
-        </div>
-        <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-xs">
-          @stitches/react
-        </div>
-      </CollapsibleContent>
-    </Collapsible>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/combobox-demo.tsx b/apps/v4/app/(internal)/sink/components/combobox-demo.tsx
deleted file mode 100644
index 51f945bc5a..0000000000
--- a/apps/v4/app/(internal)/sink/components/combobox-demo.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-import { Button } from "@/registry/new-york-v4/ui/button"
-import {
-  Combobox,
-  ComboboxChip,
-  ComboboxChips,
-  ComboboxChipsInput,
-  ComboboxCollection,
-  ComboboxContent,
-  ComboboxEmpty,
-  ComboboxGroup,
-  ComboboxInput,
-  ComboboxItem,
-  ComboboxLabel,
-  ComboboxList,
-  ComboboxTrigger,
-  ComboboxValue,
-  useComboboxAnchor,
-} from "@/registry/new-york-v4/ui/combobox"
-
-const frameworks = [
-  "Next.js",
-  "SvelteKit",
-  "Nuxt.js",
-  "Remix",
-  "Astro",
-] as const
-
-const timezones = [
-  {
-    value: "Americas",
-    items: ["(GMT-5) New York", "(GMT-8) Los Angeles", "(GMT-6) Chicago"],
-  },
-  {
-    value: "Europe",
-    items: ["(GMT+0) London", "(GMT+1) Paris", "(GMT+1) Berlin"],
-  },
-  {
-    value: "Asia/Pacific",
-    items: ["(GMT+9) Tokyo", "(GMT+8) Shanghai", "(GMT+8) Singapore"],
-  },
-] as const
-
-const countries = [
-  { code: "", value: "", label: "Select country" },
-  { code: "us", value: "united-states", label: "United States" },
-  { code: "ca", value: "canada", label: "Canada" },
-  { code: "gb", value: "united-kingdom", label: "United Kingdom" },
-  { code: "de", value: "germany", label: "Germany" },
-  { code: "fr", value: "france", label: "France" },
-  { code: "jp", value: "japan", label: "Japan" },
-]
-
-export function ComboboxDemo() {
-  return (
-    <div className="flex w-full flex-col gap-6">
-      {/* Basic combobox. */}
-      <div className="flex flex-wrap items-start gap-4">
-        <Combobox items={frameworks}>
-          <ComboboxInput placeholder="Select a framework" />
-          <ComboboxContent>
-            <ComboboxEmpty>No items found.</ComboboxEmpty>
-            <ComboboxList>
-              {(item) => (
-                <ComboboxItem key={item} value={item}>
-                  {item}
-                </ComboboxItem>
-              )}
-            </ComboboxList>
-          </ComboboxContent>
-        </Combobox>
-      </div>
-      {/* With clear button. */}
-      <div className="flex flex-wrap items-start gap-4">
-        <Combobox items={frameworks} defaultValue={frameworks[0]}>
-          <ComboboxInput placeholder="Select a framework" showClear />
-          <ComboboxContent>
-            <ComboboxEmpty>No items found.</ComboboxEmpty>
-            <ComboboxList>
-              {(item) => (
-                <ComboboxItem key={item} value={item}>
-                  {item}
-                </ComboboxItem>
-              )}
-            </ComboboxList>
-          </ComboboxContent>
-        </Combobox>
-      </div>
-      {/* With groups. */}
-      <div className="flex flex-wrap items-start gap-4">
-        <Combobox items={timezones}>
-          <ComboboxInput placeholder="Select a timezone" />
-          <ComboboxContent>
-            <ComboboxEmpty>No timezones found.</ComboboxEmpty>
-            <ComboboxList>
-              {(group) => (
-                <ComboboxGroup key={group.value} items={group.items}>
-                  <ComboboxLabel>{group.value}</ComboboxLabel>
-                  <ComboboxCollection>
-                    {(item) => (
-                      <ComboboxItem key={item} value={item}>
-                        {item}
-                      </ComboboxItem>
-                    )}
-                  </ComboboxCollection>
-                </ComboboxGroup>
-              )}
-            </ComboboxList>
-          </ComboboxContent>
-        </Combobox>
-      </div>
-      {/* With trigger button. */}
-      <div className="flex flex-wrap items-start gap-4">
-        <Combobox items={countries} defaultValue={countries[0]}>
-          <ComboboxTrigger
-            render={
-              <Button
-                variant="outline"
-                className="w-64 justify-between font-normal"
-              />
-            }
-          >
-            <ComboboxValue />
-          </ComboboxTrigger>
-          <ComboboxContent>
-            <ComboboxInput showTrigger={false} placeholder="Search" />
-            <ComboboxEmpty>No items found.</ComboboxEmpty>
-            <ComboboxList>
-              {(item) => (
-                <ComboboxItem key={item.code} value={item}>
-                  {item.label}
-                </ComboboxItem>
-              )}
-            </ComboboxList>
-          </ComboboxContent>
-        </Combobox>
-      </div>
-      {/* Multiple selection with chips. */}
-      <ComboboxMultiple />
-    </div>
-  )
-}
-
-function ComboboxMultiple() {
-  const anchor = useComboboxAnchor()
-
-  return (
-    <div className="flex flex-wrap items-start gap-4">
-      <Combobox
-        multiple
-        autoHighlight
-        items={frameworks}
-        defaultValue={[frameworks[0]]}
-      >
-        <ComboboxChips ref={anchor}>
-          <ComboboxValue>
-            {(values) => (
-              <React.Fragment>
-                {values.map((value: string) => (
-                  <ComboboxChip key={value}>{value}</ComboboxChip>
-                ))}
-                <ComboboxChipsInput placeholder="Add framework..." />
-              </React.Fragment>
-            )}
-          </ComboboxValue>
-        </ComboboxChips>
-        <ComboboxContent anchor={anchor}>
-          <ComboboxEmpty>No items found.</ComboboxEmpty>
-          <ComboboxList>
-            {(item) => (
-              <ComboboxItem key={item} value={item}>
-                {item}
-              </ComboboxItem>
-            )}
-          </ComboboxList>
-        </ComboboxContent>
-      </Combobox>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/command-demo.tsx b/apps/v4/app/(internal)/sink/components/command-demo.tsx
deleted file mode 100644
index f61c180c95..0000000000
--- a/apps/v4/app/(internal)/sink/components/command-demo.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  Calculator,
-  Calendar,
-  CreditCard,
-  Settings,
-  Smile,
-  User,
-} from "lucide-react"
-
-import {
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-  CommandShortcut,
-} from "@/registry/new-york-v4/ui/command"
-
-export function CommandDemo() {
-  const [open, setOpen] = React.useState(false)
-
-  React.useEffect(() => {
-    const down = (e: KeyboardEvent) => {
-      if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault()
-        setOpen((open) => !open)
-      }
-    }
-
-    document.addEventListener("keydown", down)
-    return () => document.removeEventListener("keydown", down)
-  }, [])
-
-  return (
-    <>
-      <p className="text-sm text-muted-foreground">
-        Press{" "}
-        <kbd className="pointer-events-none inline-flex h-5 items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100 select-none">
-          <span className="text-xs">⌘</span>J
-        </kbd>
-      </p>
-      <CommandDialog open={open} onOpenChange={setOpen}>
-        <CommandInput placeholder="Type a command or search..." />
-        <CommandList>
-          <CommandEmpty>No results found.</CommandEmpty>
-          <CommandGroup heading="Suggestions">
-            <CommandItem>
-              <Calendar />
-              <span>Calendar</span>
-            </CommandItem>
-            <CommandItem>
-              <Smile />
-              <span>Search Emoji</span>
-            </CommandItem>
-            <CommandItem>
-              <Calculator />
-              <span>Calculator</span>
-            </CommandItem>
-          </CommandGroup>
-          <CommandSeparator />
-          <CommandGroup heading="Settings">
-            <CommandItem>
-              <User />
-              <span>Profile</span>
-              <CommandShortcut>⌘P</CommandShortcut>
-            </CommandItem>
-            <CommandItem>
-              <CreditCard />
-              <span>Billing</span>
-              <CommandShortcut>⌘B</CommandShortcut>
-            </CommandItem>
-            <CommandItem>
-              <Settings />
-              <span>Settings</span>
-              <CommandShortcut>⌘S</CommandShortcut>
-            </CommandItem>
-          </CommandGroup>
-        </CommandList>
-      </CommandDialog>
-    </>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/component-wrapper.tsx b/apps/v4/app/(internal)/sink/components/component-wrapper.tsx
deleted file mode 100644
index 46ed741cf5..0000000000
--- a/apps/v4/app/(internal)/sink/components/component-wrapper.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-import { cn } from "@/registry/new-york-v4/lib/utils"
-
-export function ComponentWrapper({
-  className,
-  name,
-  children,
-  ...props
-}: React.ComponentPropsWithoutRef<"div"> & { name: string }) {
-  return (
-    <ComponentErrorBoundary name={name}>
-      <div
-        id={name}
-        data-name={name.toLowerCase()}
-        className={cn(
-          "flex w-full scroll-mt-16 flex-col rounded-lg border",
-          className
-        )}
-        {...props}
-      >
-        <div className="border-b px-4 py-3">
-          <div className="text-sm font-medium">{getComponentName(name)}</div>
-        </div>
-        <div className="flex flex-1 items-center gap-2 p-4">{children}</div>
-      </div>
-    </ComponentErrorBoundary>
-  )
-}
-
-class ComponentErrorBoundary extends React.Component<
-  { children: React.ReactNode; name: string },
-  { hasError: boolean }
-> {
-  constructor(props: { children: React.ReactNode; name: string }) {
-    super(props)
-    this.state = { hasError: false }
-  }
-
-  static getDerivedStateFromError() {
-    return { hasError: true }
-  }
-
-  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-    console.error(`Error in component ${this.props.name}:`, error, errorInfo)
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return (
-        <div className="p-4 text-red-500">
-          Something went wrong in component: {this.props.name}
-        </div>
-      )
-    }
-
-    return this.props.children
-  }
-}
-
-function getComponentName(name: string) {
-  // convert kebab-case to title case
-  return name.replace(/-/g, " ").replace(/\b\w/g, (char) => char.toUpperCase())
-}
diff --git a/apps/v4/app/(internal)/sink/components/context-menu-demo.tsx b/apps/v4/app/(internal)/sink/components/context-menu-demo.tsx
deleted file mode 100644
index d16e9c9d5e..0000000000
--- a/apps/v4/app/(internal)/sink/components/context-menu-demo.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { Code2Icon, PlusIcon, TrashIcon } from "lucide-react"
-
-import {
-  ContextMenu,
-  ContextMenuCheckboxItem,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuLabel,
-  ContextMenuRadioGroup,
-  ContextMenuRadioItem,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuTrigger,
-} from "@/registry/new-york-v4/ui/context-menu"
-
-export function ContextMenuDemo() {
-  return (
-    <ContextMenu>
-      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
-        Right click here
-      </ContextMenuTrigger>
-      <ContextMenuContent className="w-64">
-        <ContextMenuItem inset>
-          Back
-          <ContextMenuShortcut>⌘[</ContextMenuShortcut>
-        </ContextMenuItem>
-        <ContextMenuItem inset disabled>
-          Forward
-          <ContextMenuShortcut>⌘]</ContextMenuShortcut>
-        </ContextMenuItem>
-        <ContextMenuItem inset>
-          Reload
-          <ContextMenuShortcut>⌘R</ContextMenuShortcut>
-        </ContextMenuItem>
-        <ContextMenuSub>
-          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
-          <ContextMenuSubContent className="w-48">
-            <ContextMenuItem inset>
-              Save Page...
-              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
-            </ContextMenuItem>
-            <ContextMenuItem>
-              <PlusIcon />
-              Create Shortcut...
-            </ContextMenuItem>
-            <ContextMenuItem inset>Name Window...</ContextMenuItem>
-            <ContextMenuSeparator />
-            <ContextMenuItem>
-              <Code2Icon />
-              Developer Tools
-            </ContextMenuItem>
-            <ContextMenuSeparator />
-            <ContextMenuItem variant="destructive">
-              <TrashIcon />
-              Delete
-            </ContextMenuItem>
-          </ContextMenuSubContent>
-        </ContextMenuSub>
-        <ContextMenuSeparator />
-        <ContextMenuCheckboxItem checked>
-          Show Bookmarks Bar
-          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
-        </ContextMenuCheckboxItem>
-        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
-        <ContextMenuSeparator />
-        <ContextMenuRadioGroup value="pedro">
-          <ContextMenuLabel inset>People</ContextMenuLabel>
-          <ContextMenuRadioItem value="pedro">
-            Pedro Duarte
-          </ContextMenuRadioItem>
-          <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
-        </ContextMenuRadioGroup>
-      </ContextMenuContent>
-    </ContextMenu>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/date-picker-demo.tsx b/apps/v4/app/(internal)/sink/components/date-picker-demo.tsx
deleted file mode 100644
index d314842435..0000000000
--- a/apps/v4/app/(internal)/sink/components/date-picker-demo.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { addDays, format } from "date-fns"
-import { CalendarIcon } from "lucide-react"
-import { type DateRange } from "react-day-picker"
-
-import { cn } from "@/lib/utils"
-import { useIsMobile } from "@/hooks/use-mobile"
-import { Button } from "@/registry/new-york-v4/ui/button"
-import { Calendar } from "@/registry/new-york-v4/ui/calendar"
-import {
-  Drawer,
-  DrawerContent,
-  DrawerDescription,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "@/registry/new-york-v4/ui/drawer"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/new-york-v4/ui/popover"
-
-export function DatePickerDemo() {
-  return (
-    <div className="flex flex-col items-start gap-4 md:flex-row">
-      <DatePickerSimple />
-      <DataPickerWithDropdowns />
-      <DatePickerWithRange />
-    </div>
-  )
-}
-
-function DatePickerSimple() {
-  const [date, setDate] = React.useState<Date>()
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          variant={"outline"}
-          className={cn(
-            "min-w-[200px] justify-start px-2 font-normal",
-            !date && "text-muted-foreground"
-          )}
-        >
-          <CalendarIcon className="text-muted-foreground" />
-          {date ? format(date, "PPP") : <span>Pick a date</span>}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-auto p-0" align="start">
-        <Calendar mode="single" selected={date} onSelect={setDate} />
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-function DatePickerWithRange() {
-  const [date, setDate] = React.useState<DateRange | undefined>({
-    from: new Date(new Date().getFullYear(), 0, 20),
-    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),
-  })
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          id="date"
-          variant={"outline"}
-          className={cn(
-            "w-fit justify-start px-2 font-normal",
-            !date && "text-muted-foreground"
-          )}
-        >
-          <CalendarIcon className="text-muted-foreground" />
-          {date?.from ? (
-            date.to ? (
-              <>
-                {format(date.from, "LLL dd, y")} -{" "}
-                {format(date.to, "LLL dd, y")}
-              </>
-            ) : (
-              format(date.from, "LLL dd, y")
-            )
-          ) : (
-            <span>Pick a date</span>
-          )}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-auto p-0" align="start">
-        <Calendar
-          mode="range"
-          defaultMonth={date?.from}
-          selected={date}
-          onSelect={setDate}
-          numberOfMonths={2}
-        />
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-function DataPickerWithDropdowns() {
-  const [date, setDate] = React.useState<Date>()
-  const [open, setOpen] = React.useState(false)
-  const isMobile = useIsMobile(450)
-
-  if (isMobile) {
-    return (
-      <Drawer open={open} onOpenChange={setOpen}>
-        <DrawerTrigger asChild>
-          <Button
-            variant="outline"
-            className={cn(
-              "min-w-[200px] justify-start px-2 font-normal",
-              !date && "text-muted-foreground"
-            )}
-          >
-            {date ? format(date, "PPP") : <span>Pick a date</span>}
-            <CalendarIcon className="ml-auto text-muted-foreground" />
-          </Button>
-        </DrawerTrigger>
-        <DrawerContent>
-          <DrawerHeader className="sr-only">
-            <DrawerTitle>Select a date</DrawerTitle>
-            <DrawerDescription>
-              Pick a date for your appointment.
-            </DrawerDescription>
-          </DrawerHeader>
-          <Calendar
-            mode="single"
-            selected={date}
-            onSelect={(day) => {
-              setDate(day)
-              setOpen(false)
-            }}
-          />
-        </DrawerContent>
-      </Drawer>
-    )
-  }
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          className={cn(
-            "min-w-[200px] justify-start px-2 font-normal",
-            !date && "text-muted-foreground"
-          )}
-        >
-          {date ? format(date, "PPP") : <span>Pick a date</span>}
-          <CalendarIcon className="ml-auto text-muted-foreground" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-auto p-0" align="start">
-        <Calendar
-          mode="single"
-          selected={date}
-          onSelect={setDate}
-          captionLayout="dropdown"
-        />
-        <div className="flex gap-2 border-t p-2">
-          <Button
-            variant="outline"
-            size="sm"
-            className="w-full"
-            onClick={() => setOpen(false)}
-          >
-            Done
-          </Button>
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/dialog-demo.tsx b/apps/v4/app/(internal)/sink/components/dialog-demo.tsx
deleted file mode 100644
index 25d115a623..0000000000
--- a/apps/v4/app/(internal)/sink/components/dialog-demo.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import { Button } from "@/registry/new-york-v4/ui/button"
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/registry/new-york-v4/ui/dialog"
-import { Input } from "@/registry/new-york-v4/ui/input"
-import { Label } from "@/registry/new-york-v4/ui/label"
-
-export function DialogDemo() {
-  return (
-    <div className="flex flex-col items-start gap-4 md:flex-row">
-      <DialogWithForm />
-      <DialogScrollableContent />
-      <DialogWithStickyFooter />
-    </div>
-  )
-}
-
-function DialogWithForm() {
-  return (
-    <Dialog>
-      <form>
-        <DialogTrigger asChild>
-          <Button variant="outline">Edit Profile</Button>
-        </DialogTrigger>
-        <DialogContent className="sm:max-w-[425px]">
-          <DialogHeader>
-            <DialogTitle>Edit profile</DialogTitle>
-            <DialogDescription>
-              Make changes to your profile here. Click save when you&apos;re
-              done.
-            </DialogDescription>
-          </DialogHeader>
-          <div className="grid gap-4">
-            <div className="grid gap-3">
-              <Label htmlFor="name-1">Name</Label>
-              <Input id="name-1" name="name" defaultValue="Pedro Duarte" />
-            </div>
-            <div className="grid gap-3">
-              <Label htmlFor="username-1">Username</Label>
-              <Input id="username-1" name="username" defaultValue="@peduarte" />
-            </div>
-          </div>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button variant="outline">Cancel</Button>
-            </DialogClose>
-            <Button type="submit">Save changes</Button>
-          </DialogFooter>
-        </DialogContent>
-      </form>
-    </Dialog>
-  )
-}
-
-function DialogScrollableContent() {
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button variant="outline">Scrollable Content</Button>
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-[425px]">
-        <DialogHeader>
-          <DialogTitle>Scrollable Content</DialogTitle>
-          <DialogDescription>
-            This is a dialog with scrollable content.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="-mx-6 max-h-[500px] overflow-y-auto px-6 text-sm">
-          <h4 className="mb-4 text-lg leading-none font-medium">Lorem Ipsum</h4>
-          {Array.from({ length: 10 }).map((_, index) => (
-            <p key={index} className="mb-4 leading-normal">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
-              enim ad minim veniam, quis nostrud exercitation ullamco laboris
-              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
-              reprehenderit in voluptate velit esse cillum dolore eu fugiat
-              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
-              sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-          ))}
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-function DialogWithStickyFooter() {
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button variant="outline">Sticky Footer</Button>
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-lg">
-        <DialogHeader>
-          <DialogTitle>Scrollable Content</DialogTitle>
-          <DialogDescription>
-            This is a dialog with scrollable content.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="-mx-6 max-h-[500px] overflow-y-auto px-6 text-sm">
-          <h4 className="mb-4 text-lg leading-none font-medium">Lorem Ipsum</h4>
-          {Array.from({ length: 10 }).map((_, index) => (
-            <p key={index} className="mb-4 leading-normal">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
-              enim ad minim veniam, quis nostrud exercitation ullamco laboris
-              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
-              reprehenderit in voluptate velit esse cillum dolore eu fugiat
-              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
-              sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-          ))}
-        </div>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Close</Button>
-          </DialogClose>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/drawer-demo.tsx b/apps/v4/app/(internal)/sink/components/drawer-demo.tsx
deleted file mode 100644
index a7e3786098..0000000000
--- a/apps/v4/app/(internal)/sink/components/drawer-demo.tsx
+++ /dev/null
@@ -1,228 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Minus, Plus } from "lucide-react"
-import { Bar, BarChart, ResponsiveContainer } from "recharts"
-
-import { Button } from "@/registry/new-york-v4/ui/button"
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "@/registry/new-york-v4/ui/drawer"
-
-const data = [
-  {
-    goal: 400,
-  },
-  {
-    goal: 300,
-  },
-  {
-    goal: 200,
-  },
-  {
-    goal: 300,
-  },
-  {
-    goal: 200,
-  },
-  {
-    goal: 278,
-  },
-  {
-    goal: 189,
-  },
-  {
-    goal: 239,
-  },
-  {
-    goal: 300,
-  },
-  {
-    goal: 200,
-  },
-  {
-    goal: 278,
-  },
-  {
-    goal: 189,
-  },
-  {
-    goal: 349,
-  },
-]
-
-export function DrawerDemo() {
-  return (
-    <div className="flex flex-wrap items-start gap-4">
-      <DrawerBottom />
-      <DrawerScrollableContent />
-      <DrawerDirections />
-    </div>
-  )
-}
-
-function DrawerBottom() {
-  const [goal, setGoal] = React.useState(350)
-
-  const onClick = React.useCallback((adjustment: number) => {
-    setGoal((prevGoal) => Math.max(200, Math.min(400, prevGoal + adjustment)))
-  }, [])
-
-  return (
-    <Drawer>
-      <DrawerTrigger asChild>
-        <Button variant="outline">Open Drawer</Button>
-      </DrawerTrigger>
-      <DrawerContent>
-        <div className="mx-auto w-full max-w-sm">
-          <DrawerHeader>
-            <DrawerTitle>Move Goal</DrawerTitle>
-            <DrawerDescription>Set your daily activity goal.</DrawerDescription>
-          </DrawerHeader>
-          <div className="p-4 pb-0">
-            <div className="flex items-center justify-center space-x-2">
-              <Button
-                variant="outline"
-                size="icon"
-                className="h-8 w-8 shrink-0 rounded-full"
-                onClick={() => onClick(-10)}
-                disabled={goal <= 200}
-              >
-                <Minus />
-                <span className="sr-only">Decrease</span>
-              </Button>
-              <div className="flex-1 text-center">
-                <div className="text-7xl font-bold tracking-tighter">
-                  {goal}
-                </div>
-                <div className="text-[0.70rem] text-muted-foreground uppercase">
-                  Calories/day
-                </div>
-              </div>
-              <Button
-                variant="outline"
-                size="icon"
-                className="h-8 w-8 shrink-0 rounded-full"
-                onClick={() => onClick(10)}
-                disabled={goal >= 400}
-              >
-                <Plus />
-                <span className="sr-only">Increase</span>
-              </Button>
-            </div>
-            <div className="mt-3 h-[120px]">
-              <ResponsiveContainer width="100%" height="100%">
-                <BarChart data={data}>
-                  <Bar
-                    dataKey="goal"
-                    style={
-                      {
-                        fill: "var(--primary)",
-                        opacity: 0.9,
-                      } as React.CSSProperties
-                    }
-                  />
-                </BarChart>
-              </ResponsiveContainer>
-            </div>
-          </div>
-          <DrawerFooter>
-            <Button>Submit</Button>
-            <DrawerClose asChild>
-              <Button variant="outline">Cancel</Button>
-            </DrawerClose>
-          </DrawerFooter>
-        </div>
-      </DrawerContent>
-    </Drawer>
-  )
-}
-
-function DrawerScrollableContent() {
-  return (
-    <Drawer direction="right">
-      <DrawerTrigger asChild>
-        <Button variant="outline">Scrollable Content</Button>
-      </DrawerTrigger>
-      <DrawerContent>
-        <DrawerHeader>
-          <DrawerTitle>Move Goal</DrawerTitle>
-          <DrawerDescription>Set your daily activity goal.</DrawerDescription>
-        </DrawerHeader>
-        <div className="overflow-y-auto px-4 text-sm">
-          <h4 className="mb-4 text-lg leading-none font-medium">Lorem Ipsum</h4>
-          {Array.from({ length: 10 }).map((_, index) => (
-            <p key={index} className="mb-4 leading-normal">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
-              enim ad minim veniam, quis nostrud exercitation ullamco laboris
-              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
-              reprehenderit in voluptate velit esse cillum dolore eu fugiat
-              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
-              sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-          ))}
-        </div>
-        <DrawerFooter>
-          <Button>Submit</Button>
-          <DrawerClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DrawerClose>
-        </DrawerFooter>
-      </DrawerContent>
-    </Drawer>
-  )
-}
-
-const directions = ["top", "right", "bottom", "left"] as const
-
-function DrawerDirections() {
-  return (
-    <>
-      {directions.map((direction) => (
-        <Drawer key={direction} direction={direction}>
-          <DrawerTrigger asChild>
-            <Button variant="outline" className="capitalize">
-              {direction}
-            </Button>
-          </DrawerTrigger>
-          <DrawerContent>
-            <DrawerHeader>
-              <DrawerTitle>Move Goal</DrawerTitle>
-              <DrawerDescription>
-                Set your daily activity goal.
-              </DrawerDescription>
-            </DrawerHeader>
-            <div className="overflow-y-auto px-4 text-sm">
-              {Array.from({ length: 10 }).map((_, index) => (
-                <p key={index} className="mb-4 leading-normal">
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
-                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                  Ut enim ad minim veniam, quis nostrud exercitation ullamco
-                  laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-                  irure dolor in reprehenderit in voluptate velit esse cillum
-                  dolore eu fugiat nulla pariatur. Excepteur sint occaecat
-                  cupidatat non proident, sunt in culpa qui officia deserunt
-                  mollit anim id est laborum.
-                </p>
-              ))}
-            </div>
-            <DrawerFooter>
-              <Button>Submit</Button>
-              <DrawerClose asChild>
-                <Button variant="outline">Cancel</Button>
-              </DrawerClose>
-            </DrawerFooter>
-          </DrawerContent>
-        </Drawer>
-      ))}
-    </>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/dropdown-menu-demo.tsx b/apps/v4/app/(internal)/sink/components/dropdown-menu-demo.tsx
deleted file mode 100644
index d9b971b806..0000000000
--- a/apps/v4/app/(internal)/sink/components/dropdown-menu-demo.tsx
+++ /dev/null
@@ -1,471 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/new-york-v4/ui/avatar"
-import { Button } from "@/registry/new-york-v4/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "@/registry/new-york-v4/ui/dropdown-menu"
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
-export function DropdownMenuDemo() {
-  return (
-    <div className="flex flex-wrap items-start gap-4">
-      <DropdownMenuSimple />
-      <DropdownMenuCheckboxes />
-      <DropdownMenuRadioGroupDemo />
-      <DropdownMenuWithAvatar />
-      <DropdownMenuAvatarOnly />
-      <DropdownMenuIconColor />
-    </div>
-  )
-}
-
-function DropdownMenuSimple() {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline">Open</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="start" className="w-56">
-        <DropdownMenuLabel>My Account</DropdownMenuLabel>
-        <DropdownMenuGroup>
-          <DropdownMenuItem>
-            Profile
-            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            Billing
-            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            Settings
-            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            Keyboard shortcuts
-            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuGroup>
-          <DropdownMenuItem>Team</DropdownMenuItem>
-          <DropdownMenuSub>
-            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
-            <DropdownMenuPortal>
-              <DropdownMenuSubContent>
-                <DropdownMenuItem>Email</DropdownMenuItem>
-                <DropdownMenuItem>Message</DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem>More...</DropdownMenuItem>
-              </DropdownMenuSubContent>
-            </DropdownMenuPortal>
-          </DropdownMenuSub>
-          <DropdownMenuItem>
-            New Team
-            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem>GitHub</DropdownMenuItem>
-        <DropdownMenuItem>Support</DropdownMenuItem>
-        <DropdownMenuItem disabled>API</DropdownMenuItem>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem>
-          Log out
-          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-
-function DropdownMenuCheckboxes() {
-  const [showStatusBar, setShowStatusBar] = React.useState(true)
-  const [showActivityBar, setShowActivityBar] = React.useState(false)
-  const [showPanel, setShowPanel] = React.useState(false)
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline">Checkboxes</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="start" className="w-56">
-        <DropdownMenuGroup>
-          <DropdownMenuLabel>Account</DropdownMenuLabel>
-          <DropdownMenuItem>
-            <IconPlaceholder
-              lucide="UserIcon"
-              tabler="IconUser"
-              hugeicons="UserIcon"
-              phosphor="UserIcon"
-              remixicon="RiUserLine"
-            />
-            Profile
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            <IconPlaceholder
-              lucide="CreditCardIcon"
-              tabler="IconCreditCard"
-              hugeicons="CreditCardIcon"
-              phosphor="CreditCardIcon"
-              remixicon="RiBankCardLine"
-            />
-            Billing
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            <IconPlaceholder
-              lucide="SettingsIcon"
-              tabler="IconSettings"
-              hugeicons="SettingsIcon"
-              phosphor="GearIcon"
-              remixicon="RiSettings3Line"
-            />
-            Settings
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuGroup>
-          <DropdownMenuLabel>Appearance</DropdownMenuLabel>
-          <DropdownMenuCheckboxItem
-            checked={showStatusBar}
-            onCheckedChange={setShowStatusBar}
-          >
-            Status Bar
-          </DropdownMenuCheckboxItem>
-          <DropdownMenuCheckboxItem
-            checked={showActivityBar}
-            onCheckedChange={setShowActivityBar}
-            disabled
-          >
-            Activity Bar
-          </DropdownMenuCheckboxItem>
-          <DropdownMenuCheckboxItem
-            checked={showPanel}
-            onCheckedChange={setShowPanel}
-          >
-            Panel
-          </DropdownMenuCheckboxItem>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuGroup>
-          <DropdownMenuItem>
-            <IconPlaceholder
-              lucide="LogOutIcon"
-              tabler="IconLogout"
-              hugeicons="LogoutIcon"
-              phosphor="SignOutIcon"
-              remixicon="RiLogoutBoxLine"
-            />
-            Sign Out
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-
-function DropdownMenuRadioGroupDemo() {
-  const [position, setPosition] = React.useState("bottom")
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline">Radio Group</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="start" className="w-56">
-        <DropdownMenuLabel inset>Panel Position</DropdownMenuLabel>
-        <DropdownMenuGroup>
-          <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
-            <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
-            <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
-            <DropdownMenuRadioItem value="right" disabled>
-              Right
-            </DropdownMenuRadioItem>
-          </DropdownMenuRadioGroup>
-        </DropdownMenuGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-
-function DropdownMenuWithAvatar() {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant="outline"
-          className="h-12 justify-start px-2 md:max-w-[200px]"
-        >
-          <Avatar>
-            <AvatarImage src="https://github.com/shadcn.png" alt="Shadcn" />
-            <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-          </Avatar>
-          <div className="grid flex-1 text-left text-sm leading-tight">
-            <span className="truncate font-semibold">shadcn</span>
-            <span className="truncate text-xs text-muted-foreground">
-              shadcn@example.com
-            </span>
-          </div>
-          <IconPlaceholder
-            lucide="ChevronsUpDownIcon"
-            tabler="IconChevronsUpDown"
-            hugeicons="ChevronUpDownIcon"
-            phosphor="CaretUpDownIcon"
-            remixicon="RiExpandUpDownLine"
-            className="ml-auto text-muted-foreground"
-          />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent
-        className="w-(--radix-dropdown-menu-trigger-width) min-w-56"
-        align="start"
-      >
-        <DropdownMenuLabel className="p-0 font-normal">
-          <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-            <Avatar>
-              <AvatarImage src="https://github.com/shadcn.png" alt="Shadcn" />
-              <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-            </Avatar>
-            <div className="grid flex-1 text-left text-sm leading-tight">
-              <span className="truncate font-semibold">shadcn</span>
-              <span className="truncate text-xs text-muted-foreground">
-                shadcn@example.com
-              </span>
-            </div>
-          </div>
-        </DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuGroup>
-          <DropdownMenuItem>
-            <IconPlaceholder
-              lucide="SparklesIcon"
-              tabler="IconSparkles"
-              hugeicons="SparklesIcon"
-              phosphor="SparklesIcon"
-              remixicon="RiSparklingLine"
-            />
-            Upgrade to Pro
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuGroup>
-          <DropdownMenuItem>
-            <IconPlaceholder
-              lucide="BadgeCheckIcon"
-              tabler="IconBadgeCheck"
-              hugeicons="BadgeCheckIcon"
-              phosphor="CheckCircleIcon"
-              remixicon="RiVerifiedBadgeLine"
-            />
-            Account
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            <IconPlaceholder
-              lucide="CreditCardIcon"
-              tabler="IconCreditCard"
-              hugeicons="CreditCardIcon"
-              phosphor="CreditCardIcon"
-              remixicon="RiBankCardLine"
-            />
-            Billing
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            <IconPlaceholder
-              lucide="BellIcon"
-              tabler="IconBell"
-              hugeicons="BellIcon"
-              phosphor="BellIcon"
-              remixicon="RiNotification3Line"
-            />
-            Notifications
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem>
-          <IconPlaceholder
-            lucide="LogOutIcon"
-            tabler="IconLogout"
-            hugeicons="LogoutIcon"
-            phosphor="SignOutIcon"
-            remixicon="RiLogoutBoxLine"
-          />
-          Sign Out
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-
-function DropdownMenuAvatarOnly() {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant="outline"
-          className="size-8 rounded-full border-none p-0"
-        >
-          <Avatar>
-            <AvatarImage
-              src="https://github.com/maxleiter.png"
-              alt="maxleiter"
-            />
-            <AvatarFallback className="rounded-lg">LR</AvatarFallback>
-          </Avatar>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent
-        className="w-(--radix-dropdown-menu-trigger-width) min-w-56"
-        align="start"
-      >
-        <DropdownMenuLabel className="p-0 font-normal">
-          <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-            <Avatar>
-              <AvatarImage
-                src="https://github.com/maxleiter.png"
-                alt="maxleiter"
-              />
-              <AvatarFallback className="rounded-lg">LR</AvatarFallback>
-            </Avatar>
-            <div className="grid flex-1 text-left text-sm leading-tight">
-              <span className="truncate font-semibold">maxleiter</span>
-              <span className="truncate text-xs text-muted-foreground">
-                maxleiter@example.com
-              </span>
-            </div>
-          </div>
-        </DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuGroup>
-          <DropdownMenuItem>
-            <IconPlaceholder
-              lucide="SparklesIcon"
-              tabler="IconSparkles"
-              hugeicons="SparklesIcon"
-              phosphor="SparklesIcon"
-              remixicon="RiSparklingLine"
-            />
-            Upgrade to Pro
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuGroup>
-          <DropdownMenuItem>
-            <IconPlaceholder
-              lucide="BadgeCheckIcon"
-              tabler="IconBadgeCheck"
-              hugeicons="BadgeCheckIcon"
-              phosphor="CheckCircleIcon"
-              remixicon="RiVerifiedBadgeLine"
-            />
-            Account
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            <IconPlaceholder
-              lucide="CreditCardIcon"
-              tabler="IconCreditCard"
-              hugeicons="CreditCardIcon"
-              phosphor="CreditCardIcon"
-              remixicon="RiBankCardLine"
-            />
-            Billing
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            <IconPlaceholder
-              lucide="BellIcon"
-              tabler="IconBell"
-              hugeicons="BellIcon"
-              phosphor="BellIcon"
-              remixicon="RiNotification3Line"
-            />
-            Notifications
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem>
-          <IconPlaceholder
-            lucide="LogOutIcon"
-            tabler="IconLogout"
-            hugeicons="LogoutIcon"
-            phosphor="SignOutIcon"
-            remixicon="RiLogoutBoxLine"
-          />
-          Sign Out
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-
-function DropdownMenuIconColor() {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="icon">
-          <IconPlaceholder
-            lucide="MoreHorizontalIcon"
-            tabler="IconDots"
-            hugeicons="MoreHorizontalCircle01Icon"
-            phosphor="DotsThreeOutlineIcon"
-            remixicon="RiMoreLine"
-          />
-          <span className="sr-only">Toggle menu</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="start">
-        <DropdownMenuGroup>
-          <DropdownMenuItem>
-            <IconPlaceholder
-              lucide="PencilIcon"
-              tabler="IconPencil"
-              hugeicons="EditIcon"
-              phosphor="PencilIcon"
-              remixicon="RiPencilLine"
-            />
-            Edit
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            <IconPlaceholder
-              lucide="ShareIcon"
-              tabler="IconShare"
-              hugeicons="ShareIcon"
-              phosphor="ShareIcon"
-              remixicon="RiShareLine"
-            />
-            Share
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem variant="destructive">
-            <IconPlaceholder
-              lucide="TrashIcon"
-              tabler="IconTrash"
-              hugeicons="DeleteIcon"
-              phosphor="TrashIcon"
-              remixicon="RiDeleteBinLine"
-            />
-            Delete
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/empty-demo.tsx b/apps/v4/app/(internal)/sink/components/empty-demo.tsx
deleted file mode 100644
index a02ceeb87c..0000000000
--- a/apps/v4/app/(internal)/sink/components/empty-demo.tsx
+++ /dev/null
@@ -1,250 +0,0 @@
-import { IconArrowUpRight, IconFolderCode } from "@tabler/icons-react"
-import { PlusIcon, SearchIcon } from "lucide-react"
-
-import { Button } from "@/registry/new-york-v4/ui/button"
-import { Card, CardContent } from "@/registry/new-york-v4/ui/card"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/registry/new-york-v4/ui/dialog"
-import {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-} from "@/registry/new-york-v4/ui/empty"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
-} from "@/registry/new-york-v4/ui/input-group"
-import { Kbd } from "@/registry/new-york-v4/ui/kbd"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/new-york-v4/ui/popover"
-
-export function EmptyDemo() {
-  return (
-    <div className="grid w-full gap-8">
-      <Empty className="min-h-[80svh]">
-        <EmptyHeader>
-          <EmptyMedia variant="icon">
-            <IconFolderCode />
-          </EmptyMedia>
-          <EmptyTitle>No projects yet</EmptyTitle>
-          <EmptyDescription>
-            You haven&apos;t created any projects yet. Get started by creating
-            your first project.
-          </EmptyDescription>
-        </EmptyHeader>
-        <EmptyContent>
-          <div className="flex gap-2">
-            <Button asChild>
-              <a href="#">Create project</a>
-            </Button>
-            <Button variant="outline">Import project</Button>
-          </div>
-          <Button variant="link" asChild className="text-muted-foreground">
-            <a href="#">
-              Learn more <IconArrowUpRight />
-            </a>
-          </Button>
-        </EmptyContent>
-      </Empty>
-      <Empty className="min-h-[80svh] bg-muted">
-        <EmptyHeader>
-          <EmptyTitle>No results found</EmptyTitle>
-          <EmptyDescription>
-            No results found for your search. Try adjusting your search terms.
-          </EmptyDescription>
-        </EmptyHeader>
-        <EmptyContent>
-          <Button>Try again</Button>
-          <Button variant="link" asChild className="text-muted-foreground">
-            <a href="#">
-              Learn more <IconArrowUpRight />
-            </a>
-          </Button>
-        </EmptyContent>
-      </Empty>
-      <Empty className="min-h-[80svh] border">
-        <EmptyHeader>
-          <EmptyTitle>404 - Not Found</EmptyTitle>
-          <EmptyDescription>
-            The page you&apos;re looking for doesn&apos;t exist. Try searching
-            for what you need below.
-          </EmptyDescription>
-        </EmptyHeader>
-        <EmptyContent>
-          <InputGroup className="w-3/4">
-            <InputGroupInput placeholder="Try searching for pages..." />
-            <InputGroupAddon>
-              <SearchIcon />
-            </InputGroupAddon>
-            <InputGroupAddon align="inline-end">
-              <Kbd>/</Kbd>
-            </InputGroupAddon>
-          </InputGroup>
-          <EmptyDescription>
-            Need help? <a href="#">Contact support</a>
-          </EmptyDescription>
-        </EmptyContent>
-      </Empty>
-      <Empty className="min-h-[80svh]">
-        <EmptyHeader>
-          <EmptyTitle>Nothing to see here</EmptyTitle>
-          <EmptyDescription>
-            No posts have been created yet. Get started by{" "}
-            <a href="#">creating your first post</a> to share with the
-            community.
-          </EmptyDescription>
-        </EmptyHeader>
-        <EmptyContent>
-          <Button variant="outline">
-            <PlusIcon />
-            New Post
-          </Button>
-        </EmptyContent>
-      </Empty>
-      <div className="flex min-h-[800px] items-center justify-center rounded-lg bg-muted p-20">
-        <Card className="max-w-sm">
-          <CardContent>
-            <Empty className="p-4">
-              <EmptyHeader>
-                <EmptyTitle>404 - Not Found</EmptyTitle>
-                <EmptyDescription>
-                  The page you&apos;re looking for doesn&apos;t exist. Try
-                  searching for what you need below.
-                </EmptyDescription>
-              </EmptyHeader>
-              <EmptyContent>
-                <InputGroup className="w-3/4">
-                  <InputGroupInput placeholder="Try searching for pages..." />
-                  <InputGroupAddon>
-                    <SearchIcon />
-                  </InputGroupAddon>
-                  <InputGroupAddon align="inline-end">
-                    <Kbd>/</Kbd>
-                  </InputGroupAddon>
-                </InputGroup>
-                <EmptyDescription>
-                  Need help? <a href="#">Contact support</a>
-                </EmptyDescription>
-              </EmptyContent>
-            </Empty>
-          </CardContent>
-        </Card>
-      </div>
-      <div className="flex min-h-[800px] items-center justify-center rounded-lg bg-muted p-20">
-        <Card className="max-w-sm">
-          <CardContent>
-            <Empty className="p-4">
-              <EmptyHeader>
-                <EmptyMedia variant="icon">
-                  <IconFolderCode />
-                </EmptyMedia>
-                <EmptyTitle>No projects yet</EmptyTitle>
-                <EmptyDescription>
-                  You haven&apos;t created any projects yet. Get started by
-                  creating your first project.
-                </EmptyDescription>
-              </EmptyHeader>
-              <EmptyContent>
-                <div className="flex gap-2">
-                  <Button asChild>
-                    <a href="#">Create project</a>
-                  </Button>
-                  <Button variant="outline">Import project</Button>
-                </div>
-                <Button
-                  variant="link"
-                  asChild
-                  className="text-muted-foreground"
-                >
-                  <a href="#">
-                    Learn more <IconArrowUpRight />
-                  </a>
-                </Button>
-              </EmptyContent>
-            </Empty>
-          </CardContent>
-        </Card>
-      </div>
-      <div className="grid grid-cols-3 gap-6">
-        <div className="flex gap-4">
-          <Dialog>
-            <DialogTrigger asChild>
-              <Button>Open Dialog</Button>
-            </DialogTrigger>
-            <DialogContent>
-              <DialogHeader className="sr-only">
-                <DialogTitle>Dialog Title</DialogTitle>
-                <DialogDescription>Dialog Description</DialogDescription>
-              </DialogHeader>
-              <Empty className="p-4">
-                <EmptyHeader>
-                  <EmptyMedia variant="icon">
-                    <IconFolderCode />
-                  </EmptyMedia>
-                  <EmptyTitle>No projects yet</EmptyTitle>
-                  <EmptyDescription>
-                    You haven&apos;t created any projects yet. Get started by
-                    creating your first project.
-                  </EmptyDescription>
-                </EmptyHeader>
-                <EmptyContent>
-                  <div className="flex gap-2">
-                    <Button asChild>
-                      <a href="#">Create project</a>
-                    </Button>
-                    <Button variant="outline">Import project</Button>
-                  </div>
-                  <Button
-                    variant="link"
-                    asChild
-                    className="text-muted-foreground"
-                  >
-                    <a href="#">
-                      Learn more <IconArrowUpRight />
-                    </a>
-                  </Button>
-                </EmptyContent>
-              </Empty>
-            </DialogContent>
-          </Dialog>
-          <Popover>
-            <PopoverTrigger asChild>
-              <Button variant="outline">Open Popover</Button>
-            </PopoverTrigger>
-            <PopoverContent className="rounded-2xl p-2">
-              <Empty className="rounded-sm p-6">
-                <EmptyHeader>
-                  <EmptyTitle>Nothing to see here</EmptyTitle>
-                  <EmptyDescription>
-                    No posts have been created yet.{" "}
-                    <a href="#">Create your first post</a> to share with the
-                    community.
-                  </EmptyDescription>
-                </EmptyHeader>
-                <EmptyContent>
-                  <Button variant="outline">
-                    <PlusIcon />
-                    New Post
-                  </Button>
-                </EmptyContent>
-              </Empty>
-            </PopoverContent>
-          </Popover>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/field-demo.tsx b/apps/v4/app/(internal)/sink/components/field-demo.tsx
deleted file mode 100644
index 5f457ba284..0000000000
--- a/apps/v4/app/(internal)/sink/components/field-demo.tsx
+++ /dev/null
@@ -1,4957 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import {
-  IconCircle,
-  IconCircleCheckFilled,
-  IconInfoCircle,
-  IconMinus,
-  IconPlus,
-  IconUsers,
-  IconWorld,
-} from "@tabler/icons-react"
-import { addDays, format } from "date-fns"
-import { REGEXP_ONLY_DIGITS } from "input-otp"
-import {
-  CalendarIcon,
-  ClockIcon,
-  DownloadIcon,
-  FileTextIcon,
-  FolderIcon,
-  MonitorIcon,
-} from "lucide-react"
-import { type DateRange } from "react-day-picker"
-
-import { cn } from "@/lib/utils"
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/new-york-v4/ui/avatar"
-import { Badge } from "@/registry/new-york-v4/ui/badge"
-import { Button } from "@/registry/new-york-v4/ui/button"
-import { ButtonGroup } from "@/registry/new-york-v4/ui/button-group"
-import { Calendar } from "@/registry/new-york-v4/ui/calendar"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york-v4/ui/card"
-import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSeparator,
-  FieldSet,
-  FieldTitle,
-} from "@/registry/new-york-v4/ui/field"
-import { Input } from "@/registry/new-york-v4/ui/input"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
-} from "@/registry/new-york-v4/ui/input-group"
-import {
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSeparator,
-  InputOTPSlot,
-} from "@/registry/new-york-v4/ui/input-otp"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/new-york-v4/ui/popover"
-import {
-  RadioGroup,
-  RadioGroupItem,
-} from "@/registry/new-york-v4/ui/radio-group"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york-v4/ui/select"
-import { Separator } from "@/registry/new-york-v4/ui/separator"
-import { Slider } from "@/registry/new-york-v4/ui/slider"
-import { Switch } from "@/registry/new-york-v4/ui/switch"
-import { Textarea } from "@/registry/new-york-v4/ui/textarea"
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@/registry/new-york-v4/ui/toggle-group"
-
-export function FieldDemo() {
-  return (
-    <div className="@container w-full">
-      <div className="grid gap-4 bg-muted p-4 @3xl:grid-cols-2 @5xl:grid-cols-3 @[120rem]:grid-cols-4 @[140rem]:grid-cols-5">
-        <div className="flex flex-col gap-6">
-          <BasicFields />
-          <PrivacySettings />
-          <HearAboutUs />
-          <ClusterConfig />
-          <ShippingMethods />
-        </div>
-        <div className="flex flex-col gap-6">
-          <SubscriptionPlan />
-          <FormInputDemo />
-          <FormInputTypesDemo />
-          <FeedbackForm />
-          <JobApplicationForm />
-          <FormDatePickerDemo />
-          <LoginForm />
-        </div>
-        <div className="flex flex-col gap-6">
-          <FormSpecialInputTypesDemo />
-          <FormTextareaDemo />
-          <FormSelectDemo />
-          <ProfileSettingsForm />
-          <FormFieldGroupOutlineDemo />
-          <SurveyForm />
-          <SignupForm />
-        </div>
-        <div className="flex flex-col gap-6">
-          <FormRadioDemo />
-          <FormCheckboxDemo />
-          <FormSliderDemo />
-          <NewsletterForm />
-          <PaymentForm />
-          <ContactForm />
-          <ComplexFormDemo />
-          <ComplexFormInvalidDemo />
-        </div>
-        <div className="flex flex-col gap-6">
-          <CheckoutForm />
-          <FormSwitchDemo />
-          <FormToggleGroupDemo />
-          <FormOTPDemo />
-          <FormFieldSetDemo />
-          <FormFieldSeparatorDemo />
-          <FinderPreferencesForm />
-        </div>
-        <div className="flex flex-col gap-6"></div>
-      </div>
-    </div>
-  )
-}
-
-function BasicFields() {
-  return (
-    <Card>
-      <CardContent>
-        <FieldSet>
-          <FieldGroup>
-            <Field>
-              <FieldLabel htmlFor="name-x8k">Name</FieldLabel>
-              <FieldDescription>
-                Enter your name so it is long enough to test the layout.
-              </FieldDescription>
-              <Input id="name-x8k" type="text" />
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="message-x8k">Message</FieldLabel>
-              <FieldDescription>
-                Enter your message so it is long enough to test the layout.
-              </FieldDescription>
-              <Textarea id="message-x8k" placeholder="Enter your message" />
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="message-x28k">Message</FieldLabel>
-              <Textarea id="message-x28k" placeholder="Enter your message" />
-              <FieldDescription>
-                Enter your message so it is long enough to test the layout.
-              </FieldDescription>
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="name-2-p9m">
-                Name{" "}
-                <Badge variant="secondary" className="ml-auto">
-                  Recommended
-                </Badge>
-              </FieldLabel>
-              <Input id="name-2-p9m" type="text" />
-              <FieldDescription>
-                Enter your name so it is long enough to test the layout.
-              </FieldDescription>
-            </Field>
-            <FieldSeparator />
-            <Field orientation="horizontal">
-              <Checkbox id="terms-21f-q7r" />
-              <FieldLabel htmlFor="terms-21f-q7r">
-                Accept terms and conditions
-              </FieldLabel>
-            </Field>
-            <Field orientation="horizontal">
-              <FieldLabel htmlFor="terms-21f-w4t">
-                Accept terms and conditions
-              </FieldLabel>
-              <Checkbox id="terms-21f-w4t" />
-            </Field>
-            <Field orientation="horizontal">
-              <FieldLabel htmlFor="dark-mode-b5n">Dark Mode</FieldLabel>
-              <Switch id="dark-mode-b5n" />
-            </Field>
-            <RadioGroup>
-              <Field orientation="horizontal">
-                <FieldLabel htmlFor="dark-mode-22-f3j">Dark Mode</FieldLabel>
-                <RadioGroupItem value="dark-mode-22" id="dark-mode-22-f3j" />
-              </Field>
-            </RadioGroup>
-            <FieldSeparator />
-            <Field orientation="horizontal">
-              <Checkbox id="enable-touch-id-m8v" />
-              <FieldContent>
-                <FieldLabel htmlFor="enable-touch-id-m8v">
-                  Enable Touch ID
-                </FieldLabel>
-                <FieldDescription>
-                  Enable Touch ID to quickly unlock your device.
-                </FieldDescription>
-              </FieldContent>
-            </Field>
-            <Field orientation="horizontal">
-              <Checkbox id="enable-touch-id-88v" />
-              <FieldContent>
-                <FieldLabel htmlFor="enable-touch-id-88v">
-                  Enable Touch ID and Face ID to make it even faster to unlock
-                  your device. This is a long label to test the layout.
-                </FieldLabel>
-                <FieldDescription>
-                  Enable Touch ID to quickly unlock your device.
-                </FieldDescription>
-              </FieldContent>
-            </Field>
-            <FieldLabel htmlFor="enable-touch-id-m8x">
-              <Field orientation="horizontal">
-                <Checkbox id="enable-touch-id-m8x" />
-                <FieldContent>
-                  <FieldTitle>Enable Touch ID</FieldTitle>
-                  <FieldDescription>
-                    Enable Touch ID to quickly unlock your device.
-                  </FieldDescription>
-                </FieldContent>
-              </Field>
-            </FieldLabel>
-            <FieldLabel htmlFor="enable-touch-id-18v">
-              <Field orientation="horizontal">
-                <Checkbox id="enable-touch-id-18v" />
-                <FieldContent>
-                  <FieldTitle>
-                    Enable Touch ID and Face ID to make it even faster to unlock
-                    your device. This is a long label to test the layout.
-                  </FieldTitle>
-                  <FieldDescription>
-                    Enable Touch ID to quickly unlock your device.
-                  </FieldDescription>
-                </FieldContent>
-              </Field>
-            </FieldLabel>
-            <RadioGroup className="gap-6">
-              <Field orientation="horizontal">
-                <RadioGroupItem
-                  value="enable-touch-id-m10v"
-                  id="enable-touch-id-m10v"
-                />
-                <FieldContent>
-                  <FieldLabel htmlFor="enable-touch-id-m10v">
-                    Enable Touch ID
-                  </FieldLabel>
-                  <FieldDescription>
-                    Enable Touch ID to quickly unlock your device.
-                  </FieldDescription>
-                </FieldContent>
-              </Field>
-              <Field orientation="horizontal">
-                <RadioGroupItem
-                  value="enable-touch-id-m10v"
-                  id="enable-touch-id-m10v"
-                />
-                <FieldContent>
-                  <FieldLabel htmlFor="enable-touch-id-m10v">
-                    Enable Touch ID and Face ID to make it even faster to unlock
-                    your device. This is a long label to test the layout.
-                  </FieldLabel>
-                  <FieldDescription>
-                    Enable Touch ID to quickly unlock your device.
-                  </FieldDescription>
-                </FieldContent>
-              </Field>
-            </RadioGroup>
-            <RadioGroup className="gap-3">
-              <FieldLabel htmlFor="enable-touch-id-m2222v">
-                <Field orientation="horizontal">
-                  <RadioGroupItem
-                    value="enable-touch-id-m2222v"
-                    id="enable-touch-id-m2222v"
-                  />
-                  <FieldContent>
-                    <FieldTitle>Enable Touch ID</FieldTitle>
-                    <FieldDescription>
-                      Enable Touch ID to quickly unlock your device.
-                    </FieldDescription>
-                  </FieldContent>
-                </Field>
-              </FieldLabel>
-              <FieldLabel htmlFor="enable-touch-id-m10xx">
-                <Field orientation="horizontal">
-                  <RadioGroupItem
-                    value="enable-touch-id-m10xx"
-                    id="enable-touch-id-m10xx"
-                  />
-                  <FieldContent>
-                    <FieldTitle>
-                      Enable Touch ID and Face ID to make it even faster to
-                      unlock your device. This is a long label to test the
-                      layout.
-                    </FieldTitle>
-                    <FieldDescription>
-                      Enable Touch ID to quickly unlock your device.
-                    </FieldDescription>
-                  </FieldContent>
-                </Field>
-              </FieldLabel>
-            </RadioGroup>
-            <FieldSeparator />
-            <FieldSet>
-              <FieldLegend variant="label">Battery Level</FieldLegend>
-              <FieldDescription>
-                Choose your preferred battery level.
-              </FieldDescription>
-              <RadioGroup>
-                <Field orientation="horizontal">
-                  <RadioGroupItem value="high" id="battery-level-high-k6p" />
-                  <FieldLabel htmlFor="battery-level-high-k6p">High</FieldLabel>
-                </Field>
-                <Field orientation="horizontal">
-                  <RadioGroupItem
-                    value="medium"
-                    id="battery-level-medium-z9l"
-                  />
-                  <FieldLabel htmlFor="battery-level-medium-z9l">
-                    Medium
-                  </FieldLabel>
-                </Field>
-                <Field orientation="horizontal">
-                  <RadioGroupItem value="low" id="battery-level-low-v1c" />
-                  <FieldLabel htmlFor="battery-level-low-v1c">Low</FieldLabel>
-                </Field>
-              </RadioGroup>
-            </FieldSet>
-            <FieldSeparator />
-            <FieldSet>
-              <FieldLegend variant="label">
-                Search Results Search Results
-              </FieldLegend>
-              <FieldDescription>
-                Only selected categories will appear in search results.
-              </FieldDescription>
-              <FieldGroup className="gap-3">
-                <Field orientation="horizontal">
-                  <Checkbox id="search-results-application-r8s" />
-                  <FieldLabel htmlFor="search-results-application-r8s">
-                    Application
-                  </FieldLabel>
-                </Field>
-                <Field orientation="horizontal">
-                  <Checkbox id="search-results-music-n3w" />
-                  <FieldLabel htmlFor="search-results-music-n3w">
-                    Music
-                  </FieldLabel>
-                </Field>
-                <Field orientation="horizontal">
-                  <Checkbox id="search-results-video-u7y" />
-                  <FieldLabel htmlFor="search-results-video-u7y">
-                    Video
-                  </FieldLabel>
-                </Field>
-                <Field orientation="horizontal">
-                  <Checkbox id="search-results-photo-a4e" />
-                  <FieldLabel htmlFor="search-results-photo-a4e">
-                    Photo
-                  </FieldLabel>
-                </Field>
-                <Field orientation="horizontal">
-                  <Checkbox id="search-results-document-i9o" />
-                  <FieldLabel htmlFor="search-results-document-i9o">
-                    Document
-                  </FieldLabel>
-                </Field>
-                <Field orientation="horizontal">
-                  <Checkbox id="search-results-other-h2k" />
-                  <FieldLabel htmlFor="search-results-other-h2k">
-                    Other
-                  </FieldLabel>
-                </Field>
-              </FieldGroup>
-            </FieldSet>
-            <FieldSeparator />
-            <FieldSet>
-              <FieldLegend>Measurement System</FieldLegend>
-              <FieldDescription>
-                Select your preferred measurement system.
-              </FieldDescription>
-              <RadioGroup>
-                <FieldLabel htmlFor="metric-l6m">
-                  <Field orientation="horizontal">
-                    <FieldTitle>Metric</FieldTitle>
-                    <RadioGroupItem value="metric" id="metric-l6m" />
-                  </Field>
-                </FieldLabel>
-                <FieldLabel>
-                  <Field orientation="horizontal">
-                    <RadioGroupItem value="imperial" id="imperial-x8j" />
-                    <FieldTitle>Imperial</FieldTitle>
-                  </Field>
-                </FieldLabel>
-                <FieldLabel htmlFor="custom-units-p3v">
-                  <Field orientation="horizontal">
-                    <FieldTitle>Custom</FieldTitle>
-                    <RadioGroupItem
-                      value="custom-units"
-                      id="custom-units-p3v"
-                    />
-                  </Field>
-                </FieldLabel>
-              </RadioGroup>
-            </FieldSet>
-          </FieldGroup>
-        </FieldSet>
-      </CardContent>
-    </Card>
-  )
-}
-
-function SubscriptionPlan() {
-  return (
-    <Card>
-      <CardContent>
-        <FieldGroup>
-          <FieldSet>
-            <FieldLegend>Subscription Plan</FieldLegend>
-            <FieldDescription>Choose your subscription plan.</FieldDescription>
-            <RadioGroup defaultValue="plus">
-              <FieldLabel htmlFor="plus-g4s">
-                <Field orientation="horizontal">
-                  <FieldContent>
-                    <FieldTitle>Plus</FieldTitle>
-                    <FieldDescription>
-                      For individuals and small teams
-                    </FieldDescription>
-                  </FieldContent>
-                  <RadioGroupItem value="plus" id="plus-g4s" />
-                </Field>
-              </FieldLabel>
-              <FieldLabel htmlFor="pro-m9d">
-                <Field orientation="horizontal">
-                  <FieldContent>
-                    <FieldTitle>Pro</FieldTitle>
-                    <FieldDescription>
-                      For individuals and small teams
-                    </FieldDescription>
-                  </FieldContent>
-                  <RadioGroupItem value="pro" id="pro-m9d" />
-                </Field>
-              </FieldLabel>
-              <FieldLabel htmlFor="enterprise-k7w">
-                <Field orientation="horizontal">
-                  <FieldContent>
-                    <FieldTitle>Enterprise</FieldTitle>
-                    <FieldDescription>
-                      For large teams and enterprises
-                    </FieldDescription>
-                  </FieldContent>
-                  <RadioGroupItem value="enterprise" id="enterprise-k7w" />
-                </Field>
-              </FieldLabel>
-              <FieldLabel htmlFor="custom-plan-r3t">
-                <Field orientation="horizontal">
-                  <FieldContent>
-                    <FieldTitle>Custom</FieldTitle>
-                    <FieldDescription>
-                      For large teams and enterprises
-                    </FieldDescription>
-                  </FieldContent>
-                  <RadioGroupItem value="custom-plan" id="custom-plan-r3t" />
-                </Field>
-              </FieldLabel>
-            </RadioGroup>
-          </FieldSet>
-          <FieldSet>
-            <FieldLegend>Display Settings</FieldLegend>
-            <FieldDescription>Manage your display settings.</FieldDescription>
-            <Field>
-              <FieldLabel htmlFor="increase-contrast-b8h">
-                <Field orientation="horizontal">
-                  <FieldContent>
-                    <FieldTitle>Increase Contrast</FieldTitle>
-                    <FieldDescription>
-                      Increase the contrast of the UI to make it easier to read.
-                    </FieldDescription>
-                  </FieldContent>
-                  <Switch id="increase-contrast-b8h" />
-                </Field>
-              </FieldLabel>
-              <FieldLabel htmlFor="reduce-transparency-v5l">
-                <Field orientation="horizontal">
-                  <FieldContent>
-                    <FieldTitle>Reduce Transparency</FieldTitle>
-                    <FieldDescription>
-                      Reduce the transparency of the UI to make it easier to
-                      read.
-                    </FieldDescription>
-                  </FieldContent>
-                  <Switch id="reduce-transparency-v5l" />
-                </Field>
-              </FieldLabel>
-              <FieldLabel htmlFor="reduce-motion-n2j">
-                <Field orientation="horizontal">
-                  <FieldContent>
-                    <FieldTitle>Reduce Motion</FieldTitle>
-                    <FieldDescription>
-                      Reduce motion of the UI to make it easier to read.
-                    </FieldDescription>
-                  </FieldContent>
-                  <Switch id="reduce-motion-n2j" />
-                </Field>
-              </FieldLabel>
-              <FieldLabel htmlFor="enable-dark-mode-w6q">
-                <Field orientation="horizontal">
-                  <FieldContent>
-                    <FieldTitle>Enable Dark Mode</FieldTitle>
-                    <FieldDescription>
-                      Enable dark mode to make the UI easier to read.
-                    </FieldDescription>
-                  </FieldContent>
-                  <Switch id="enable-dark-mode-w6q" />
-                </Field>
-              </FieldLabel>
-            </Field>
-            <FieldSet>
-              <FieldLegend>Display Resolution</FieldLegend>
-              <FieldDescription>
-                Select your preferred display resolution.
-              </FieldDescription>
-              <RadioGroup className="grid grid-cols-2 gap-2">
-                <FieldLabel htmlFor="1080p-z4c">
-                  <Field orientation="horizontal">
-                    <RadioGroupItem value="1080p" id="1080p-z4c" />
-                    <FieldTitle>1920x1080</FieldTitle>
-                  </Field>
-                </FieldLabel>
-                <FieldLabel htmlFor="1440p-x7y">
-                  <Field orientation="horizontal">
-                    <RadioGroupItem value="1440p" id="1440p-x7y" />
-                    <FieldTitle>2560x1440</FieldTitle>
-                  </Field>
-                </FieldLabel>
-                <FieldLabel htmlFor="4k-p1v">
-                  <Field orientation="horizontal">
-                    <RadioGroupItem value="4k" id="4k-p1v" />
-                    <FieldTitle>3840x2160</FieldTitle>
-                  </Field>
-                </FieldLabel>
-                <FieldLabel htmlFor="8k-u9e">
-                  <Field orientation="horizontal">
-                    <RadioGroupItem value="8k" id="8k-u9e" />
-                    <FieldTitle>7680x4320</FieldTitle>
-                  </Field>
-                </FieldLabel>
-              </RadioGroup>
-            </FieldSet>
-          </FieldSet>
-        </FieldGroup>
-      </CardContent>
-    </Card>
-  )
-}
-
-function PrivacySettings() {
-  return (
-    <div className="flex flex-col gap-6">
-      <Card>
-        <CardHeader>
-          <CardTitle>Privacy Settings</CardTitle>
-          <CardDescription>
-            Choose who can see your profile and what they can see.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <RadioGroup>
-            <FieldLabel htmlFor="everyone-f8k">
-              <Field orientation="horizontal">
-                <FieldContent>
-                  <FieldTitle>
-                    Everyone <Badge className="rounded-full">Default</Badge>
-                  </FieldTitle>
-                  <FieldDescription>
-                    Anyone can see your profile.
-                  </FieldDescription>
-                </FieldContent>
-                <RadioGroupItem
-                  value="everyone"
-                  id="everyone-f8k"
-                  className="sr-only"
-                />
-                <IconCircle className="size-5 stroke-input stroke-1 group-has-data-[state=checked]/field:hidden" />
-                <IconCircleCheckFilled className="hidden size-5 fill-primary group-has-data-[state=checked]/field:block" />
-              </Field>
-            </FieldLabel>
-            <FieldLabel htmlFor="followers-s7m">
-              <Field orientation="horizontal">
-                <FieldContent>
-                  <FieldTitle>Followers</FieldTitle>
-                  <FieldDescription>
-                    Visible to your followers and connections.
-                  </FieldDescription>
-                </FieldContent>
-                <RadioGroupItem
-                  value="followers"
-                  id="followers-s7m"
-                  className="sr-only"
-                />
-                <IconCircle className="size-5 stroke-input stroke-1 group-has-data-[state=checked]/field:hidden" />
-                <IconCircleCheckFilled className="hidden size-5 fill-primary group-has-data-[state=checked]/field:block" />
-              </Field>
-            </FieldLabel>
-            <FieldLabel htmlFor="custom-q3r">
-              <Field orientation="horizontal">
-                <FieldContent>
-                  <FieldTitle>Custom</FieldTitle>
-                  <FieldDescription>
-                    Choose who can see your profile.
-                  </FieldDescription>
-                </FieldContent>
-                <RadioGroupItem
-                  value="custom"
-                  id="custom-q3r"
-                  className="sr-only"
-                />
-                <IconCircle className="size-5 stroke-input stroke-1 group-has-data-[state=checked]/field:hidden" />
-                <IconCircleCheckFilled className="hidden size-5 fill-primary group-has-data-[state=checked]/field:block" />
-              </Field>
-            </FieldLabel>
-          </RadioGroup>
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Privacy Settings</CardTitle>
-          <CardDescription>
-            Choose who can see your profile and what they can see.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <RadioGroup>
-            <FieldLabel htmlFor="everyone-b9p">
-              <Field orientation="horizontal">
-                <RadioGroupItem value="everyone" id="everyone-b9p" />
-                <FieldContent>
-                  <FieldTitle>Everyone</FieldTitle>
-                  <FieldDescription>
-                    Anyone can see your profile.
-                  </FieldDescription>
-                </FieldContent>
-              </Field>
-            </FieldLabel>
-            <FieldLabel htmlFor="followers-v3n">
-              <Field orientation="horizontal">
-                <RadioGroupItem value="followers" id="followers-v3n" />
-                <FieldContent>
-                  <FieldTitle>Followers</FieldTitle>
-                  <FieldDescription>
-                    Visible to your followers and connections.
-                  </FieldDescription>
-                </FieldContent>
-              </Field>
-            </FieldLabel>
-            <FieldLabel htmlFor="custom-t8v">
-              <Field orientation="horizontal">
-                <RadioGroupItem value="custom" id="custom-t8v" />
-                <FieldContent>
-                  <FieldTitle>Custom</FieldTitle>
-                  <FieldDescription>
-                    Choose who can see your profile.
-                  </FieldDescription>
-                </FieldContent>
-                <Button variant="outline" className="w-fit">
-                  Choose
-                </Button>
-              </Field>
-            </FieldLabel>
-          </RadioGroup>
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Privacy Settings</CardTitle>
-          <CardDescription>
-            Choose who can see your profile and what they can see.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <RadioGroup>
-            <FieldLabel htmlFor="everyone-3-k4p">
-              <Field orientation="horizontal">
-                <div className="flex size-8 shrink-0 items-center justify-center rounded-full border bg-muted transition-all duration-100 group-has-data-[state=checked]/field:border-primary group-has-data-[state=checked]/field:bg-primary group-has-data-[state=checked]/field:text-primary-foreground">
-                  <IconWorld className="size-4" />
-                </div>
-                <FieldContent>
-                  <FieldTitle>Everyone</FieldTitle>
-                  <FieldDescription>
-                    Anyone can see your profile.
-                  </FieldDescription>
-                </FieldContent>
-                <RadioGroupItem
-                  value="everyone"
-                  id="everyone-3-k4p"
-                  className="sr-only"
-                />
-                <IconCircle className="size-5 stroke-input stroke-1 group-has-data-[state=checked]/field:hidden" />
-                <IconCircleCheckFilled className="hidden size-5 fill-primary group-has-data-[state=checked]/field:block" />
-              </Field>
-            </FieldLabel>
-            <FieldLabel htmlFor="followers-3-m7j">
-              <Field orientation="horizontal">
-                <div className="flex size-8 shrink-0 items-center justify-center rounded-full border bg-muted transition-all duration-100 group-has-data-[state=checked]/field:border-primary group-has-data-[state=checked]/field:bg-primary group-has-data-[state=checked]/field:text-primary-foreground">
-                  <IconUsers className="size-4" />
-                </div>
-                <FieldContent>
-                  <FieldTitle>Followers</FieldTitle>
-                  <FieldDescription>
-                    Visible to your followers and connections.
-                  </FieldDescription>
-                </FieldContent>
-                <RadioGroupItem
-                  value="followers-3"
-                  id="followers-3-m7j"
-                  className="sr-only"
-                />
-                <IconCircle className="size-5 stroke-input stroke-1 group-has-data-[state=checked]/field:hidden" />
-                <IconCircleCheckFilled className="hidden size-5 fill-primary group-has-data-[state=checked]/field:block" />
-              </Field>
-            </FieldLabel>
-            <FieldLabel htmlFor="custom-3-r9w">
-              <Field orientation="horizontal">
-                <div className="flex size-8 shrink-0 items-center justify-center rounded-full border bg-muted transition-all duration-100 group-has-data-[state=checked]/field:border-primary group-has-data-[state=checked]/field:bg-primary group-has-data-[state=checked]/field:text-primary-foreground">
-                  <IconPlus className="size-4" />
-                </div>
-                <FieldContent>
-                  <FieldTitle>Custom</FieldTitle>
-                  <FieldDescription>
-                    Choose who can see your profile.
-                  </FieldDescription>
-                </FieldContent>
-                <RadioGroupItem
-                  value="custom-3"
-                  id="custom-3-r9w"
-                  className="sr-only"
-                />
-                <IconCircle className="size-5 stroke-input stroke-1 group-has-data-[state=checked]/field:hidden" />
-                <IconCircleCheckFilled className="hidden size-5 fill-primary group-has-data-[state=checked]/field:block" />
-              </Field>
-            </FieldLabel>
-          </RadioGroup>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}
-
-function HearAboutUs() {
-  return (
-    <Card>
-      <CardContent>
-        <form>
-          <FieldGroup>
-            <FieldSet>
-              <FieldLegend>How did you hear about us?</FieldLegend>
-              <FieldDescription>
-                Select the option that best describes how you heard about us.
-              </FieldDescription>
-              <FieldGroup className="flex flex-row flex-wrap gap-2 [--radius:9999rem] **:data-[slot=checkbox]:rounded-full **:data-[slot=field]:gap-2 **:data-[slot=field]:overflow-hidden **:data-[slot=field]:px-2.5 **:data-[slot=field]:py-2 *:data-[slot=field-label]:w-fit">
-                <FieldLabel htmlFor="social-media-b2s">
-                  <Field orientation="horizontal">
-                    <Checkbox
-                      value="social-media"
-                      id="social-media-b2s"
-                      className="-ml-6 -translate-x-1 transition-all duration-100 group-has-data-[state=checked]/field-label:ml-0 group-has-data-[state=checked]/field-label:translate-x-0"
-                    />
-                    <FieldTitle>Social Media</FieldTitle>
-                  </Field>
-                </FieldLabel>
-                <FieldLabel htmlFor="search-engine-f6h">
-                  <Field orientation="horizontal">
-                    <Checkbox
-                      value="search-engine"
-                      id="search-engine-f6h"
-                      className="-ml-6 -translate-x-1 transition-all duration-100 group-has-data-[state=checked]/field-label:ml-0 group-has-data-[state=checked]/field-label:translate-x-0"
-                    />
-                    <FieldTitle>Search Engine</FieldTitle>
-                  </Field>
-                </FieldLabel>
-                <FieldLabel htmlFor="referral-l3n">
-                  <Field orientation="horizontal">
-                    <Checkbox
-                      value="referral"
-                      id="referral-l3n"
-                      className="-ml-6 -translate-x-1 transition-all duration-100 group-has-data-[state=checked]/field-label:ml-0 group-has-data-[state=checked]/field-label:translate-x-0"
-                    />
-                    <FieldTitle>Referral</FieldTitle>
-                  </Field>
-                </FieldLabel>
-                <FieldLabel htmlFor="other-u5c">
-                  <Field orientation="horizontal">
-                    <Checkbox
-                      value="other"
-                      id="other-u5c"
-                      className="-ml-6 -translate-x-1 transition-all duration-100 group-has-data-[state=checked]/field-label:ml-0 group-has-data-[state=checked]/field-label:translate-x-0"
-                    />
-                    <FieldTitle>Other (Please specify)</FieldTitle>
-                  </Field>
-                </FieldLabel>
-              </FieldGroup>
-            </FieldSet>
-          </FieldGroup>
-        </form>
-      </CardContent>
-    </Card>
-  )
-}
-
-function ClusterConfig() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Buy your cluster</CardTitle>
-        <CardDescription>
-          Need a custom setup? <a href="#">Contact us</a>.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <form>
-          <FieldGroup>
-            <FieldSet>
-              <FieldLegend>GPU Type</FieldLegend>
-              <FieldDescription>
-                Select the GPU type for your cluster.
-              </FieldDescription>
-              <RadioGroup defaultValue="h100">
-                <FieldLabel htmlFor="h100-k9s">
-                  <Field orientation="horizontal">
-                    <RadioGroupItem value="h100" id="h100-k9s" />
-                    <FieldContent>
-                      <FieldTitle>NVIDIA H100</FieldTitle>
-                      <FieldDescription>SXM5 80GB VRAM</FieldDescription>
-                    </FieldContent>
-                  </Field>
-                </FieldLabel>
-                <FieldLabel htmlFor="h200-m3v">
-                  <Field orientation="horizontal">
-                    <RadioGroupItem value="h200" id="h200-m3v" />
-                    <FieldContent>
-                      <FieldTitle>NVIDIA H200</FieldTitle>
-                      <FieldDescription>SXM5 141GB VRAM</FieldDescription>
-                    </FieldContent>
-                  </Field>
-                </FieldLabel>
-              </RadioGroup>
-            </FieldSet>
-            <Field>
-              <FieldLabel htmlFor="compute-environment-p8w">
-                Compute Environment
-              </FieldLabel>
-              <RadioGroup defaultValue="kubernetes">
-                <FieldLabel htmlFor="kubernetes-r2h">
-                  <Field orientation="horizontal">
-                    <RadioGroupItem value="kubernetes" id="kubernetes-r2h" />
-                    <FieldContent>
-                      <FieldTitle>Kubernetes</FieldTitle>
-                      <FieldDescription>
-                        Run GPU workloads on a K8s configured cluster.
-                      </FieldDescription>
-                    </FieldContent>
-                  </Field>
-                </FieldLabel>
-                <FieldLabel htmlFor="vm-z4k">
-                  <Field orientation="horizontal">
-                    <RadioGroupItem value="vm" id="vm-z4k" />
-                    <FieldContent>
-                      <FieldTitle>Virtual Machine</FieldTitle>
-                      <FieldDescription>
-                        Access a VM configured cluster via SSH to run GPU
-                        workloads.
-                      </FieldDescription>
-                    </FieldContent>
-                  </Field>
-                </FieldLabel>
-              </RadioGroup>
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="number-of-gpus-f6l">
-                Number of GPUs
-              </FieldLabel>
-              <FieldDescription>
-                Buy a single node with 8 GPUs or many interconnected nodes. You
-                can add more GPUs later.
-              </FieldDescription>
-              <ButtonGroup>
-                <Input />
-                <Button variant="outline" size="icon">
-                  <IconMinus />
-                </Button>
-                <Button variant="outline" size="icon">
-                  <IconPlus />
-                </Button>
-              </ButtonGroup>
-            </Field>
-            <FieldSet>
-              <FieldLegend>Starting date</FieldLegend>
-              <RadioGroup defaultValue="today">
-                <FieldLabel htmlFor="today-n7t">
-                  <Field orientation="horizontal">
-                    <RadioGroupItem value="today" id="today-n7t" />
-                    <FieldContent>
-                      <FieldTitle>Start cluster now</FieldTitle>
-                      <FieldDescription>
-                        Your cluster will be ready to use immediately.
-                      </FieldDescription>
-                    </FieldContent>
-                  </Field>
-                </FieldLabel>
-                <FieldLabel htmlFor="scheduled-u5j">
-                  <Field orientation="horizontal">
-                    <RadioGroupItem value="scheduled" id="scheduled-u5j" />
-                    <FieldContent>
-                      <FieldTitle>Schedule a start date and time</FieldTitle>
-                      <FieldDescription>
-                        Set a start date and time for your cluster.
-                      </FieldDescription>
-                    </FieldContent>
-                  </Field>
-                </FieldLabel>
-              </RadioGroup>
-            </FieldSet>
-            <Field>
-              <FieldLabel htmlFor="duration-b9p">Duration</FieldLabel>
-              <FieldDescription>You can add more time later.</FieldDescription>
-              <ButtonGroup>
-                <Input />
-                <Select defaultValue="hours">
-                  <SelectTrigger id="duration-b9p" className="w-24">
-                    <SelectValue placeholder="Select duration" />
-                  </SelectTrigger>
-                  <SelectContent align="end">
-                    <SelectItem value="hours">Hours</SelectItem>
-                    <SelectItem value="days">Days</SelectItem>
-                    <SelectItem value="weeks">Weeks</SelectItem>
-                  </SelectContent>
-                </Select>
-              </ButtonGroup>
-            </Field>
-            <Field orientation="horizontal">
-              <Button type="submit">Get Instant Quote</Button>
-            </Field>
-          </FieldGroup>
-        </form>
-      </CardContent>
-    </Card>
-  )
-}
-
-function ShippingMethods() {
-  return (
-    <div className="flex flex-col gap-6">
-      <Card>
-        <CardContent>
-          <FieldSet>
-            <FieldLegend>Shipping Method</FieldLegend>
-            <FieldDescription>
-              Select the shipping method for your order.
-            </FieldDescription>
-            <RadioGroup>
-              <FieldLabel htmlFor="pickup-x8m">
-                <Field orientation="horizontal">
-                  <RadioGroupItem value="pickup" id="pickup-x8m" />
-                  <FieldContent>
-                    <FieldTitle>
-                      Pick up your order at a nearby store
-                    </FieldTitle>
-                    <FieldDescription>
-                      Available at most stores.
-                    </FieldDescription>
-                  </FieldContent>
-                  <Badge
-                    variant="secondary"
-                    className="group-has-data-[state=checked]/field-label:bg-primary group-has-data-[state=checked]/field-label:text-primary-foreground"
-                  >
-                    Free
-                  </Badge>
-                </Field>
-              </FieldLabel>
-              <FieldLabel htmlFor="delivery-v3s">
-                <Field orientation="horizontal">
-                  <RadioGroupItem value="delivery" id="delivery-v3s" />
-                  <FieldContent>
-                    <FieldTitle>Delivery to your door</FieldTitle>
-                    <FieldDescription>
-                      We will deliver your order to your door.
-                    </FieldDescription>
-                  </FieldContent>
-                  <Badge
-                    variant="secondary"
-                    className="group-has-data-[state=checked]/field-label:bg-primary group-has-data-[state=checked]/field-label:text-primary-foreground"
-                  >
-                    $10.00
-                  </Badge>
-                </Field>
-              </FieldLabel>
-              <FieldLabel htmlFor="express-l7r">
-                <Field orientation="horizontal">
-                  <RadioGroupItem value="express" id="express-l7r" />
-                  <FieldContent>
-                    <FieldTitle>Express delivery</FieldTitle>
-                    <FieldDescription>
-                      Next day delivery. Available in most areas.
-                    </FieldDescription>
-                  </FieldContent>
-                  <Badge
-                    variant="secondary"
-                    className="group-has-data-[state=checked]/field-label:bg-primary group-has-data-[state=checked]/field-label:text-primary-foreground"
-                  >
-                    $15.00
-                  </Badge>
-                </Field>
-              </FieldLabel>
-            </RadioGroup>
-          </FieldSet>
-        </CardContent>
-      </Card>
-      <form>
-        <FieldGroup className="gap-6 rounded-lg border bg-background p-6">
-          <FieldSet>
-            <FieldLegend>GPU Type</FieldLegend>
-            <FieldDescription>
-              Select the GPU type for your cluster.
-            </FieldDescription>
-            <RadioGroup defaultValue="h100">
-              <FieldLabel htmlFor="h100-v00">
-                <Field orientation="horizontal">
-                  <RadioGroupItem value="h100" id="h100-v00" />
-                  <FieldContent>
-                    <FieldTitle>NVIDIA H100</FieldTitle>
-                    <FieldDescription>SXM5 80GB VRAM</FieldDescription>
-                  </FieldContent>
-                </Field>
-              </FieldLabel>
-              <FieldLabel htmlFor="h200-n86">
-                <Field orientation="horizontal">
-                  <RadioGroupItem value="h200" id="h200-n86" />
-                  <FieldContent>
-                    <FieldTitle>NVIDIA H200</FieldTitle>
-                    <FieldDescription>SXM5 141GB VRAM</FieldDescription>
-                  </FieldContent>
-                </Field>
-              </FieldLabel>
-            </RadioGroup>
-          </FieldSet>
-          <FieldSeparator />
-          <FieldSet>
-            <FieldLegend>Compute Environment</FieldLegend>
-            <FieldDescription>
-              Select the compute environment for your cluster.
-            </FieldDescription>
-            <RadioGroup defaultValue="kubernetes">
-              <FieldLabel htmlFor="kubernetes-dtv">
-                <Field orientation="horizontal">
-                  <RadioGroupItem value="kubernetes" id="kubernetes-dtv" />
-                  <FieldContent>
-                    <FieldTitle>Kubernetes</FieldTitle>
-                    <FieldDescription>
-                      Run GPU workloads on a K8s configured cluster.
-                    </FieldDescription>
-                  </FieldContent>
-                </Field>
-              </FieldLabel>
-              <FieldLabel htmlFor="vm-8rk">
-                <Field orientation="horizontal">
-                  <RadioGroupItem value="vm" id="vm-8rk" />
-                  <FieldContent>
-                    <FieldTitle>Virtual Machine</FieldTitle>
-                    <FieldDescription>
-                      Access a VM configured cluster via SSH to run GPU
-                      workloads.
-                    </FieldDescription>
-                  </FieldContent>
-                </Field>
-              </FieldLabel>
-            </RadioGroup>
-          </FieldSet>
-          <FieldSeparator />
-          <FieldSet>
-            <FieldLegend>Starting date</FieldLegend>
-            <FieldDescription>
-              When you want to start your cluster.
-            </FieldDescription>
-            <RadioGroup defaultValue="today">
-              <FieldLabel htmlFor="today-pmd">
-                <Field orientation="horizontal">
-                  <RadioGroupItem value="today" id="today-pmd" />
-                  <FieldContent>
-                    <FieldTitle>Start cluster now</FieldTitle>
-                    <FieldDescription>
-                      Your cluster will be ready to use immediately.
-                    </FieldDescription>
-                  </FieldContent>
-                </Field>
-              </FieldLabel>
-              <FieldLabel htmlFor="scheduled-tc9">
-                <Field orientation="horizontal">
-                  <RadioGroupItem value="scheduled" id="scheduled-tc9" />
-                  <FieldContent>
-                    <FieldTitle>Schedule a start date and time</FieldTitle>
-                    <FieldDescription>
-                      Set a start date and time for your cluster.
-                    </FieldDescription>
-                  </FieldContent>
-                </Field>
-              </FieldLabel>
-            </RadioGroup>
-          </FieldSet>
-          <Field>
-            <Button type="submit">Get Instant Quote</Button>
-          </Field>
-        </FieldGroup>
-      </form>
-    </div>
-  )
-}
-
-function SignupForm() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Create an account</CardTitle>
-        <CardDescription>
-          Enter your information below to create your account
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <form>
-          <FieldGroup>
-            <Field>
-              <FieldLabel htmlFor="signup-name-us1">Full Name</FieldLabel>
-              <Input
-                id="signup-name-us1"
-                type="text"
-                placeholder="John Doe"
-                required
-              />
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="signup-email-zvy">Email</FieldLabel>
-              <Input
-                id="signup-email-zvy"
-                type="email"
-                placeholder="m@example.com"
-                required
-              />
-              <FieldDescription>
-                We&apos;ll use this to contact you. We will not share your email
-                with anyone else.
-              </FieldDescription>
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="signup-password-rh7">Password</FieldLabel>
-              <Input id="signup-password-rh7" type="password" required />
-              <FieldDescription>
-                Must be at least 8 characters long.
-              </FieldDescription>
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="signup-confirm-password-ha8">
-                Confirm Password
-              </FieldLabel>
-              <Input
-                id="signup-confirm-password-ha8"
-                type="password"
-                required
-              />
-              <FieldDescription>Please confirm your password.</FieldDescription>
-            </Field>
-            <FieldGroup>
-              <Field>
-                <Button type="submit" className="w-full">
-                  Create Account
-                </Button>
-                <Button variant="outline" className="w-full">
-                  Sign up with Google
-                </Button>
-              </Field>
-              <Field>
-                <p className="text-center text-sm">
-                  Already have an account?{" "}
-                  <a href="#" className="underline underline-offset-4">
-                    Sign in
-                  </a>
-                </p>
-              </Field>
-            </FieldGroup>
-          </FieldGroup>
-        </form>
-      </CardContent>
-    </Card>
-  )
-}
-
-function LoginForm() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Sign in to your account</CardTitle>
-        <CardDescription>
-          Enter your credentials to access your account
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <form>
-          <FieldGroup>
-            <Field>
-              <FieldLabel htmlFor="login-7x9-email-2kg">Email</FieldLabel>
-              <Input
-                id="login-7x9-email-2kg"
-                type="email"
-                placeholder="m@example.com"
-                required
-              />
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="login-7x9-password-5l8">Password</FieldLabel>
-              <Input id="login-7x9-password-5l8" type="password" required />
-              <FieldDescription>
-                <a href="#" className="text-sm underline underline-offset-4">
-                  Forgot your password?
-                </a>
-              </FieldDescription>
-            </Field>
-            <Field orientation="horizontal">
-              <Checkbox id="login-7x9-remember-6lp" />
-              <FieldLabel
-                htmlFor="login-7x9-remember-6lp"
-                className="font-normal"
-              >
-                Remember me for 30 days
-              </FieldLabel>
-            </Field>
-            <Button type="submit" className="w-full">
-              Sign In
-            </Button>
-
-            <FieldSeparator />
-
-            <FieldGroup>
-              <Button variant="outline" className="w-full">
-                <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24">
-                  <path
-                    d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
-                    fill="#4285F4"
-                  />
-                  <path
-                    d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-                    fill="#34A853"
-                  />
-                  <path
-                    d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
-                    fill="#FBBC05"
-                  />
-                  <path
-                    d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-                    fill="#EA4335"
-                  />
-                </svg>
-                Continue with Google
-              </Button>
-              <Button variant="outline" className="w-full">
-                <svg
-                  className="mr-2 h-4 w-4"
-                  fill="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
-                </svg>
-                Continue with GitHub
-              </Button>
-              <Button variant="outline" className="w-full">
-                <svg
-                  className="mr-2 h-4 w-4"
-                  fill="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.879V14.89h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.989C18.343 21.129 22 16.99 22 12c0-5.523-4.477-10-10-10z" />
-                </svg>
-                Continue with Facebook
-              </Button>
-            </FieldGroup>
-
-            <FieldSeparator>New to our platform?</FieldSeparator>
-
-            <Field>
-              <p className="text-center text-sm">
-                Don&apos;t have an account?{" "}
-                <a
-                  href="#"
-                  className="font-medium underline underline-offset-4"
-                >
-                  Create an account
-                </a>
-              </p>
-            </Field>
-          </FieldGroup>
-        </form>
-      </CardContent>
-    </Card>
-  )
-}
-
-function FinderPreferencesForm() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Finder Preferences</CardTitle>
-        <CardDescription>
-          Configure what items appear on your desktop
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <form>
-          <FieldGroup>
-            <Field>
-              <FieldLabel>Show these items on the desktop:</FieldLabel>
-              <Field orientation="horizontal">
-                <Checkbox id="finder-pref-9k2-hard-disks-ljj" />
-                <FieldLabel
-                  htmlFor="finder-pref-9k2-hard-disks-ljj"
-                  className="font-normal"
-                >
-                  Hard disks
-                </FieldLabel>
-              </Field>
-              <Field orientation="horizontal">
-                <Checkbox id="finder-pref-9k2-external-disks-1yg" />
-                <FieldLabel
-                  htmlFor="finder-pref-9k2-external-disks-1yg"
-                  className="font-normal"
-                >
-                  External disks
-                </FieldLabel>
-              </Field>
-              <Field orientation="horizontal">
-                <Checkbox id="finder-pref-9k2-cds-dvds-fzt" />
-                <FieldLabel
-                  htmlFor="finder-pref-9k2-cds-dvds-fzt"
-                  className="font-normal"
-                >
-                  CDs, DVDs, and iPods
-                </FieldLabel>
-              </Field>
-              <Field orientation="horizontal">
-                <Checkbox id="finder-pref-9k2-connected-servers-6l2" />
-                <FieldLabel
-                  htmlFor="finder-pref-9k2-connected-servers-6l2"
-                  className="font-normal"
-                >
-                  Connected servers
-                </FieldLabel>
-              </Field>
-            </Field>
-            <FieldSeparator />
-            <Field>
-              <FieldLabel>New Finder windows show:</FieldLabel>
-              <Select defaultValue="home">
-                <SelectTrigger id="finder-pref-9k2-new-window-zga">
-                  <SelectValue placeholder="Select location" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="recents">
-                    <ClockIcon />
-                    Recents
-                  </SelectItem>
-                  <SelectItem value="home">
-                    <FolderIcon />
-                    shadcn
-                  </SelectItem>
-                  <SelectItem value="desktop">
-                    <MonitorIcon /> Desktop
-                  </SelectItem>
-                  <SelectItem value="documents">
-                    <FileTextIcon /> Documents
-                  </SelectItem>
-                  <SelectItem value="downloads">
-                    <DownloadIcon /> Downloads
-                  </SelectItem>
-                </SelectContent>
-              </Select>
-              <InputGroup>
-                <InputGroupInput placeholder="Select location" />
-                <InputGroupAddon>
-                  <IconInfoCircle />
-                </InputGroupAddon>
-              </InputGroup>
-            </Field>
-            <FieldSeparator />
-            <Field orientation="horizontal">
-              <Checkbox id="finder-pref-9k2-sync-folders-nep" defaultChecked />
-              <FieldContent>
-                <FieldLabel htmlFor="finder-pref-9k2-sync-folders-nep">
-                  Sync Desktop & Documents folders
-                </FieldLabel>
-                <FieldDescription>
-                  Your Desktop & Documents folders are being synced with iCloud
-                  Drive. You can access them from other devices.
-                </FieldDescription>
-              </FieldContent>
-            </Field>
-            <Field orientation="horizontal">
-              <Checkbox id="finder-pref-9k2-open-tabs-uui" defaultChecked />
-              <FieldLabel htmlFor="finder-pref-9k2-open-tabs-uui">
-                Open folders in tabs instead of new windows
-              </FieldLabel>
-            </Field>
-          </FieldGroup>
-        </form>
-      </CardContent>
-    </Card>
-  )
-}
-
-function ContactForm() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Contact Us</CardTitle>
-        <CardDescription>
-          Get in touch with our team for any questions or support
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <form>
-          <FieldGroup>
-            <div className="grid grid-cols-2 gap-4">
-              <Field>
-                <FieldLabel htmlFor="contact-3k1-firstName-ggc">
-                  First Name
-                </FieldLabel>
-                <Input
-                  id="contact-3k1-firstName-ggc"
-                  placeholder="John"
-                  required
-                />
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="contact-3k2-lastName-m0n">
-                  Last Name
-                </FieldLabel>
-                <Input
-                  id="contact-3k2-lastName-m0n"
-                  placeholder="Doe"
-                  required
-                />
-              </Field>
-            </div>
-            <Field>
-              <FieldLabel htmlFor="contact-3k2-email-acn">Email</FieldLabel>
-              <Input
-                id="contact-3k2-email-acn"
-                type="email"
-                placeholder="john@example.com"
-                required
-              />
-              <FieldDescription>
-                We&apos;ll use this to contact you. We will not share your email
-                with anyone else.
-              </FieldDescription>
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="subject-exn">Subject</FieldLabel>
-              <Select>
-                <SelectTrigger>
-                  <SelectValue placeholder="Select a subject" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="general">General Inquiry</SelectItem>
-                  <SelectItem value="support">Technical Support</SelectItem>
-                  <SelectItem value="billing">Billing Question</SelectItem>
-                  <SelectItem value="partnership">Partnership</SelectItem>
-                </SelectContent>
-              </Select>
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="contact-3k2-message-k3i">Message</FieldLabel>
-              <Textarea
-                id="contact-3k2-message-k3i"
-                placeholder="Tell us how we can help you..."
-                className="min-h-[100px]"
-                required
-              />
-              <FieldDescription>
-                Please provide as much detail as possible to help us assist you
-                better.
-              </FieldDescription>
-            </Field>
-            <Button type="submit">Send Message</Button>
-          </FieldGroup>
-        </form>
-      </CardContent>
-    </Card>
-  )
-}
-
-function FeedbackForm() {
-  const [rating, setRating] = useState([5])
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Feedback Form</CardTitle>
-        <CardDescription>
-          Help us improve by sharing your experience
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <form>
-          <FieldGroup>
-            <Field>
-              <FieldLabel htmlFor="feedback-8m4-name-wql">
-                Name (Optional)
-              </FieldLabel>
-              <Input id="feedback-8m4-name-wql" placeholder="Your name" />
-              <FieldDescription>Your name is optional.</FieldDescription>
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="feedback-8m4-email-kkm">
-                Email (Optional)
-              </FieldLabel>
-              <Input
-                id="feedback-8m4-email-kkm"
-                type="email"
-                placeholder="your@email.com"
-              />
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="feedback-8m4-rating-gw9">
-                How would you rate your experience?
-              </FieldLabel>
-              <Slider
-                value={rating}
-                onValueChange={setRating}
-                max={10}
-                min={1}
-                step={1}
-                id="feedback-8m4-rating-gw9"
-              />
-              <FieldDescription>
-                Poor (1) /{" "}
-                <span className="font-medium">Rating: {rating[0]}</span> /
-                Excellent (10)
-              </FieldDescription>
-            </Field>
-            <Field>
-              <FieldLabel>What type of feedback is this?</FieldLabel>
-              <RadioGroup defaultValue="general">
-                <Field orientation="horizontal">
-                  <RadioGroupItem value="bug" id="feedback-8m4-bug" />
-                  <FieldLabel
-                    htmlFor="feedback-8m4-bug"
-                    className="font-normal"
-                  >
-                    Bug Report
-                  </FieldLabel>
-                </Field>
-                <Field orientation="horizontal">
-                  <RadioGroupItem
-                    value="feature"
-                    id="feedback-8m4-feature-c2h"
-                  />
-                  <FieldLabel
-                    htmlFor="feedback-8m4-feature-c2h"
-                    className="font-normal"
-                  >
-                    Feature Request
-                  </FieldLabel>
-                </Field>
-                <Field orientation="horizontal">
-                  <RadioGroupItem
-                    value="general"
-                    id="feedback-8m4-general-9wc"
-                  />
-                  <FieldContent>
-                    <FieldLabel
-                      htmlFor="feedback-8m4-general-9wc"
-                      className="font-normal"
-                    >
-                      General Feedback
-                    </FieldLabel>
-                  </FieldContent>
-                </Field>
-                <Field orientation="horizontal">
-                  <RadioGroupItem
-                    value="complaint"
-                    id="feedback-8m4-complaint-9lo"
-                  />
-                  <FieldLabel
-                    htmlFor="feedback-8m4-complaint-9lo"
-                    className="font-normal"
-                  >
-                    Complaint
-                  </FieldLabel>
-                </Field>
-              </RadioGroup>
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="feedback-8m4-message-ym5">
-                Your Feedback
-              </FieldLabel>
-              <Textarea
-                id="feedback-8m4-message-ym5"
-                placeholder="Please share your thoughts, suggestions, or report any issues..."
-                className="min-h-[120px]"
-                required
-              />
-              <FieldDescription>
-                Please share your thoughts, suggestions, or report any issues...
-              </FieldDescription>
-            </Field>
-            <Field orientation="horizontal">
-              <Button variant="outline">Cancel</Button>
-              <Button type="submit">Submit</Button>
-            </Field>
-          </FieldGroup>
-        </form>
-      </CardContent>
-    </Card>
-  )
-}
-
-export function JobApplicationForm() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Job Application</CardTitle>
-        <CardDescription>Apply for a position at our company</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <form>
-          <FieldGroup>
-            <div className="grid grid-cols-2 gap-4">
-              <Field>
-                <FieldLabel htmlFor="job-5p7-firstName-jel">
-                  First Name
-                </FieldLabel>
-                <Input id="job-5p7-firstName-jel" placeholder="John" required />
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="job-5p7-lastName-fl0">
-                  Last Name
-                </FieldLabel>
-                <Input id="job-5p7-lastName-fl0" placeholder="Doe" required />
-              </Field>
-            </div>
-            <Field>
-              <FieldLabel htmlFor="job-5p7-email-6cz">Email</FieldLabel>
-              <Input
-                id="job-5p7-email-6cz"
-                type="email"
-                placeholder="john@example.com"
-                required
-              />
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="job-5p7-phone-389">Phone Number</FieldLabel>
-              <Input
-                id="job-5p7-phone-389"
-                type="tel"
-                placeholder="+1 (555) 123-4567"
-                required
-              />
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="position-k7f">Position</FieldLabel>
-              <Select>
-                <SelectTrigger>
-                  <SelectValue placeholder="Select position" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="frontend">Frontend Developer</SelectItem>
-                  <SelectItem value="backend">Backend Developer</SelectItem>
-                  <SelectItem value="fullstack">
-                    Full Stack Developer
-                  </SelectItem>
-                  <SelectItem value="designer">UI/UX Designer</SelectItem>
-                  <SelectItem value="manager">Product Manager</SelectItem>
-                </SelectContent>
-              </Select>
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="experience-5ih">
-                Years of Experience
-              </FieldLabel>
-              <Select>
-                <SelectTrigger>
-                  <SelectValue placeholder="Select experience level" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="0-1">0-1 years</SelectItem>
-                  <SelectItem value="2-3">2-3 years</SelectItem>
-                  <SelectItem value="4-6">4-6 years</SelectItem>
-                  <SelectItem value="7-10">7-10 years</SelectItem>
-                  <SelectItem value="10+">10+ years</SelectItem>
-                </SelectContent>
-              </Select>
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="job-5p7-portfolio-u1j">
-                Portfolio/LinkedIn URL
-              </FieldLabel>
-              <Input
-                id="job-5p7-portfolio-u1j"
-                type="url"
-                placeholder="https://..."
-              />
-              <FieldDescription>
-                Optional: Share your portfolio or professional profile.
-              </FieldDescription>
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="job-5p7-coverLetter-h91">
-                Cover Letter
-              </FieldLabel>
-              <Textarea
-                id="job-5p7-coverLetter-h91"
-                placeholder="Tell us why you're interested in this position..."
-                className="min-h-[120px]"
-                required
-              />
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="job-5p7-resume-ejb">Resume</FieldLabel>
-              <Input
-                id="job-5p7-resume-ejb"
-                type="file"
-                accept=".pdf,.doc,.docx"
-              />
-              <FieldDescription>
-                Upload your resume in PDF, DOC, or DOCX format (max 5MB).
-              </FieldDescription>
-            </Field>
-            <Field orientation="horizontal">
-              <Checkbox id="job-5p7-terms-slt" required />
-              <FieldLabel htmlFor="job-5p7-terms-slt">
-                I authorize the company to contact me.
-              </FieldLabel>
-            </Field>
-
-            <Button type="submit">Submit Application</Button>
-          </FieldGroup>
-        </form>
-      </CardContent>
-    </Card>
-  )
-}
-
-export function NewsletterForm() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Newsletter Signup</CardTitle>
-        <CardDescription>
-          Stay updated with our latest news and updates
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <form>
-          <FieldGroup>
-            <Field>
-              <FieldLabel htmlFor="newsletter-2q8-name-sig">Name</FieldLabel>
-              <Input
-                id="newsletter-2q8-name-sig"
-                placeholder="Your name"
-                required
-              />
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="newsletter-2q8-email-wfn">Email</FieldLabel>
-              <Input
-                id="newsletter-2q8-email-wfn"
-                type="email"
-                placeholder="your@email.com"
-                required
-              />
-              <FieldDescription>
-                We&apos;ll send our newsletter to this email address.
-              </FieldDescription>
-            </Field>
-            <FieldSet>
-              <FieldLegend>Interests (Select all that apply)</FieldLegend>
-              <FieldGroup data-slot="checkbox-group">
-                <Field orientation="horizontal">
-                  <Checkbox id="newsletter-2q8-tech-b8o" />
-                  <FieldLabel
-                    htmlFor="newsletter-2q8-tech-b8o"
-                    className="font-normal"
-                  >
-                    Technology News
-                  </FieldLabel>
-                </Field>
-                <Field orientation="horizontal">
-                  <Checkbox id="newsletter-2q8-product-3rm" />
-                  <FieldLabel
-                    htmlFor="newsletter-2q8-product-3rm"
-                    className="font-normal"
-                  >
-                    Product Updates
-                  </FieldLabel>
-                </Field>
-                <Field orientation="horizontal">
-                  <Checkbox id="newsletter-2q8-tips-9bh" />
-                  <FieldLabel
-                    htmlFor="newsletter-2q8-tips-9bh"
-                    className="font-normal"
-                  >
-                    Tips & Tutorials
-                  </FieldLabel>
-                </Field>
-                <Field orientation="horizontal">
-                  <Checkbox id="newsletter-2q8-events-r4m" />
-                  <FieldLabel
-                    htmlFor="newsletter-2q8-events-r4m"
-                    className="font-normal"
-                  >
-                    Events & Webinars
-                  </FieldLabel>
-                </Field>
-              </FieldGroup>
-            </FieldSet>
-            <Field orientation="horizontal">
-              <Checkbox id="newsletter-2q8-privacy-26q" required />
-              <FieldLabel htmlFor="newsletter-2q8-privacy-26q">
-                I agree to receive marketing emails.
-              </FieldLabel>
-            </Field>
-
-            <Button type="submit">Subscribe to Newsletter</Button>
-          </FieldGroup>
-        </form>
-      </CardContent>
-    </Card>
-  )
-}
-
-export function PaymentForm() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Payment Information</CardTitle>
-        <CardDescription>
-          Enter your payment details to complete your purchase
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <form>
-          <FieldGroup>
-            <Field>
-              <FieldLabel htmlFor="payment-9n3-cardNumber-wre">
-                Card Number
-              </FieldLabel>
-              <Input
-                id="payment-9n3-cardNumber-wre"
-                placeholder="1234 5678 9012 3456"
-                maxLength={19}
-              />
-            </Field>
-
-            <div className="grid grid-cols-2 gap-4">
-              <Field>
-                <FieldLabel htmlFor="payment-9n3-expiry-9oa">
-                  Expiry Date
-                </FieldLabel>
-                <Input
-                  id="payment-9n3-expiry-9oa"
-                  placeholder="MM/YY"
-                  maxLength={5}
-                />
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="payment-9n3-cvv">CVV</FieldLabel>
-                <Input id="payment-9n3-cvv" placeholder="123" maxLength={4} />
-                <FieldDescription>3 or 4 digit security code.</FieldDescription>
-              </Field>
-            </div>
-
-            <Field>
-              <FieldLabel htmlFor="payment-9n3-cardName-tko">
-                Name on Card
-              </FieldLabel>
-              <Input id="payment-9n3-cardName-tko" placeholder="John Doe" />
-            </Field>
-
-            <Separator />
-
-            <FieldSet>
-              <FieldLegend>Billing Address</FieldLegend>
-              <FieldDescription>
-                Please enter your billing address.
-              </FieldDescription>
-              <FieldGroup>
-                <Field>
-                  <FieldLabel htmlFor="payment-9n3-address-a7f">
-                    Address
-                  </FieldLabel>
-                  <Input
-                    id="payment-9n3-address-a7f"
-                    placeholder="123 Main St"
-                  />
-                </Field>
-                <div className="grid grid-cols-2 gap-4">
-                  <Field>
-                    <FieldLabel htmlFor="payment-9n3-city-sgj">City</FieldLabel>
-                    <Input id="payment-9n3-city-sgj" placeholder="New York" />
-                  </Field>
-                  <Field>
-                    <FieldLabel htmlFor="payment-9n3-zip">ZIP Code</FieldLabel>
-                    <Input id="payment-9n3-zip" placeholder="10001" />
-                  </Field>
-                </div>
-                <Field>
-                  <FieldLabel htmlFor="payment-9n3-country-7r4">
-                    Country
-                  </FieldLabel>
-                  <Select>
-                    <SelectTrigger>
-                      <SelectValue placeholder="Select country" />
-                    </SelectTrigger>
-                    <SelectContent position="item-aligned">
-                      <SelectItem value="us">United States</SelectItem>
-                      <SelectItem value="ca">Canada</SelectItem>
-                      <SelectItem value="uk">United Kingdom</SelectItem>
-                      <SelectItem value="au">Australia</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </Field>
-              </FieldGroup>
-            </FieldSet>
-
-            <Field className="justify-between">
-              <Button variant="outline">Cancel</Button>
-              <Button type="submit">Complete Payment</Button>
-            </Field>
-          </FieldGroup>
-        </form>
-      </CardContent>
-    </Card>
-  )
-}
-
-export function FormInputDemo() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Input Fields</CardTitle>
-        <CardDescription>Different input field configurations</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <FieldGroup>
-          <Field>
-            <FieldLabel htmlFor="input-1a2-basic-ian">Basic Input</FieldLabel>
-            <Input id="input-1a2-basic-ian" placeholder="Enter text" />
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="input-1a2-withDesc-k18">
-              Input with Description
-            </FieldLabel>
-            <Input
-              id="input-1a2-withDesc-k18"
-              placeholder="Enter your username"
-            />
-            <FieldDescription>
-              Choose a unique username for your account.
-            </FieldDescription>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="input-1a2-descFirst-omn">
-              Email Address
-            </FieldLabel>
-            <FieldDescription>
-              We&apos;ll never share your email with anyone.
-            </FieldDescription>
-            <Input
-              id="input-1a2-descFirst-omn"
-              type="email"
-              placeholder="email@example.com"
-            />
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="input-1a2-required-hao">
-              Required Field <span className="text-destructive">*</span>
-            </FieldLabel>
-            <Input
-              id="input-1a2-required-hao"
-              placeholder="This field is required"
-              required
-            />
-            <FieldDescription>This field must be filled out.</FieldDescription>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="input-1a2-disabled-xb6">
-              Disabled Input
-            </FieldLabel>
-            <Input
-              id="input-1a2-disabled-xb6"
-              placeholder="Cannot edit"
-              disabled
-            />
-            <FieldDescription>
-              This field is currently disabled.
-            </FieldDescription>
-          </Field>
-        </FieldGroup>
-      </CardContent>
-    </Card>
-  )
-}
-
-export function FormTextareaDemo() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Textarea Fields</CardTitle>
-        <CardDescription>
-          Different textarea field configurations
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <FieldGroup>
-          <Field>
-            <FieldLabel htmlFor="textarea-3b5-basic-cag">
-              Basic Textarea
-            </FieldLabel>
-            <Textarea
-              id="textarea-3b5-basic-cag"
-              placeholder="Enter your message"
-            />
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="textarea-3b5-comments-16o">
-              Comments
-            </FieldLabel>
-            <Textarea
-              id="textarea-3b5-comments-16o"
-              placeholder="Share your thoughts..."
-              className="min-h-[100px]"
-            />
-            <FieldDescription>Maximum 500 characters allowed.</FieldDescription>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="textarea-3b5-bio">Bio</FieldLabel>
-            <FieldDescription>
-              Tell us about yourself in a few sentences.
-            </FieldDescription>
-            <Textarea
-              id="textarea-3b5-bio"
-              placeholder="I am a..."
-              className="min-h-[120px]"
-            />
-          </Field>
-        </FieldGroup>
-      </CardContent>
-    </Card>
-  )
-}
-
-export function FormSelectDemo() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Select Fields</CardTitle>
-        <CardDescription>Different select field configurations</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <FieldGroup>
-          <Field>
-            <FieldLabel htmlFor="select-4c6-basic-ttc">Basic Select</FieldLabel>
-            <Select>
-              <SelectTrigger id="select-4c6-basic-ttc">
-                <SelectValue placeholder="Choose an option" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="option1">Option 1</SelectItem>
-                <SelectItem value="option2">Option 2</SelectItem>
-                <SelectItem value="option3">Option 3</SelectItem>
-              </SelectContent>
-            </Select>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="select-4c6-country-dc2">Country</FieldLabel>
-            <Select>
-              <SelectTrigger id="select-4c6-country-dc2">
-                <SelectValue placeholder="Select your country" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="us">United States</SelectItem>
-                <SelectItem value="uk">United Kingdom</SelectItem>
-                <SelectItem value="ca">Canada</SelectItem>
-              </SelectContent>
-            </Select>
-            <FieldDescription>
-              Select the country where you currently reside.
-            </FieldDescription>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="select-4c6-timezone-es6">Timezone</FieldLabel>
-            <FieldDescription>
-              Choose your local timezone for accurate scheduling.
-            </FieldDescription>
-            <Select>
-              <SelectTrigger id="select-4c6-timezone-es6">
-                <SelectValue placeholder="Select timezone" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="utc">UTC</SelectItem>
-                <SelectItem value="est">Eastern Time</SelectItem>
-                <SelectItem value="pst">Pacific Time</SelectItem>
-              </SelectContent>
-            </Select>
-          </Field>
-        </FieldGroup>
-      </CardContent>
-    </Card>
-  )
-}
-
-export function FormRadioDemo() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Radio Fields</CardTitle>
-        <CardDescription>Different radio field configurations</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <FieldGroup>
-          <FieldSet>
-            <FieldLegend>Subscription Plan</FieldLegend>
-            <RadioGroup defaultValue="free">
-              <Field orientation="horizontal">
-                <RadioGroupItem value="free" id="free-ejb" />
-                <FieldLabel htmlFor="free-ejb" className="font-normal">
-                  Free Plan
-                </FieldLabel>
-              </Field>
-              <Field orientation="horizontal">
-                <RadioGroupItem value="pro" id="pro-y3g" />
-                <FieldLabel htmlFor="pro-y3g" className="font-normal">
-                  Pro Plan
-                </FieldLabel>
-              </Field>
-              <Field orientation="horizontal">
-                <RadioGroupItem value="enterprise" id="enterprise-l4t" />
-                <FieldLabel htmlFor="enterprise-l4t" className="font-normal">
-                  Enterprise
-                </FieldLabel>
-              </Field>
-            </RadioGroup>
-          </FieldSet>
-          <FieldSet>
-            <FieldLegend>Size</FieldLegend>
-            <FieldDescription>Select your preferred size.</FieldDescription>
-            <RadioGroup
-              defaultValue="medium"
-              className="grid w-fit grid-cols-2"
-            >
-              <Field orientation="horizontal">
-                <RadioGroupItem value="small" id="size-small-1g9" />
-                <FieldLabel htmlFor="size-small-1g9" className="font-normal">
-                  Small
-                </FieldLabel>
-              </Field>
-              <Field orientation="horizontal">
-                <RadioGroupItem value="medium" id="size-medium-okp" />
-                <FieldLabel htmlFor="size-medium-okp" className="font-normal">
-                  Medium
-                </FieldLabel>
-              </Field>
-              <Field orientation="horizontal">
-                <RadioGroupItem value="large" id="size-large-tzy" />
-                <FieldLabel htmlFor="size-large-tzy" className="font-normal">
-                  Large
-                </FieldLabel>
-              </Field>
-              <Field orientation="horizontal">
-                <RadioGroupItem value="xlarge" id="size-xlarge-2nn" />
-                <FieldLabel htmlFor="size-xlarge-2nn" className="font-normal">
-                  X-Large
-                </FieldLabel>
-              </Field>
-            </RadioGroup>
-          </FieldSet>
-          <FieldSet>
-            <FieldLegend>Notification Preferences</FieldLegend>
-            <FieldDescription>
-              Choose how you want to receive notifications.
-            </FieldDescription>
-            <RadioGroup defaultValue="email">
-              <Field orientation="horizontal">
-                <RadioGroupItem value="email" id="notify-email-enh" />
-                <FieldLabel htmlFor="notify-email-enh" className="font-normal">
-                  Email only
-                </FieldLabel>
-              </Field>
-              <Field orientation="horizontal">
-                <RadioGroupItem value="sms" id="notify-sms" />
-                <FieldLabel htmlFor="notify-sms" className="font-normal">
-                  SMS only
-                </FieldLabel>
-              </Field>
-              <Field orientation="horizontal">
-                <RadioGroupItem value="both" id="notify-both-0ed" />
-                <FieldLabel htmlFor="notify-both-0ed" className="font-normal">
-                  Both Email & SMS
-                </FieldLabel>
-              </Field>
-            </RadioGroup>
-          </FieldSet>
-          <FieldSet>
-            <FieldLegend>Delivery Speed</FieldLegend>
-            <RadioGroup
-              defaultValue="standard"
-              className="flex flex-wrap gap-4"
-            >
-              <Field orientation="horizontal">
-                <RadioGroupItem value="express" id="delivery-express-n5l" />
-                <FieldContent>
-                  <FieldLabel
-                    htmlFor="delivery-express-n5l"
-                    className="font-normal"
-                  >
-                    Express (1-2 days)
-                  </FieldLabel>
-                  <FieldDescription>Get your order quickly.</FieldDescription>
-                </FieldContent>
-              </Field>
-              <Field orientation="horizontal">
-                <RadioGroupItem value="standard" id="delivery-standard-14i" />
-                <FieldContent>
-                  <FieldLabel
-                    htmlFor="delivery-standard-14i"
-                    className="font-normal"
-                  >
-                    Standard (3-5 days)
-                  </FieldLabel>
-                  <FieldDescription>
-                    Get your order in a few days.
-                  </FieldDescription>
-                </FieldContent>
-              </Field>
-              <Field orientation="horizontal">
-                <RadioGroupItem value="economy" id="delivery-economy-594" />
-                <FieldContent>
-                  <FieldLabel
-                    htmlFor="delivery-economy-594"
-                    className="font-normal"
-                  >
-                    Economy (5-7 days)
-                  </FieldLabel>
-                  <FieldDescription>
-                    Get your order in a few days.
-                  </FieldDescription>
-                </FieldContent>
-              </Field>
-            </RadioGroup>
-          </FieldSet>
-        </FieldGroup>
-      </CardContent>
-    </Card>
-  )
-}
-
-export function FormCheckboxDemo() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Checkbox Fields</CardTitle>
-        <CardDescription>
-          Different checkbox field configurations
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <FieldGroup>
-          <Field orientation="horizontal">
-            <Checkbox id="terms-y7h" />
-            <FieldLabel htmlFor="terms-y7h" className="font-normal">
-              I agree to the terms and conditions
-            </FieldLabel>
-          </Field>
-          <Field orientation="horizontal">
-            <Checkbox id="newsletter-sw8" />
-            <FieldContent>
-              <FieldLabel htmlFor="newsletter-sw8">
-                Subscribe to newsletter
-              </FieldLabel>
-              <FieldDescription>
-                Receive weekly updates about new features and promotions.
-              </FieldDescription>
-            </FieldContent>
-          </Field>
-          <FieldSet>
-            <FieldLegend>Preferences</FieldLegend>
-            <FieldDescription>
-              Select all that apply to customize your experience.
-            </FieldDescription>
-            <FieldGroup data-slot="checkbox-group">
-              <Field orientation="horizontal">
-                <Checkbox id="pref-dark-rfv" />
-                <FieldLabel htmlFor="pref-dark-rfv" className="font-normal">
-                  Dark mode
-                </FieldLabel>
-              </Field>
-              <Field orientation="horizontal">
-                <Checkbox id="pref-compact-ti2" />
-                <FieldLabel htmlFor="pref-compact-ti2" className="font-normal">
-                  Compact view
-                </FieldLabel>
-              </Field>
-              <Field orientation="horizontal">
-                <Checkbox id="pref-notifications-tut" />
-                <FieldLabel
-                  htmlFor="pref-notifications-tut"
-                  className="font-normal"
-                >
-                  Enable notifications
-                </FieldLabel>
-              </Field>
-            </FieldGroup>
-          </FieldSet>
-          <FieldSet>
-            <FieldLegend>Skills</FieldLegend>
-            <FieldGroup className="flex-row flex-wrap gap-3 *:data-[slot=field]:w-fit">
-              <Field orientation="horizontal">
-                <Checkbox id="javascript-4ee" />
-                <FieldLabel htmlFor="javascript-4ee" className="font-normal">
-                  JavaScript
-                </FieldLabel>
-              </Field>
-              <Field orientation="horizontal">
-                <Checkbox id="typescript-cdv" />
-                <FieldLabel htmlFor="typescript-cdv" className="font-normal">
-                  TypeScript
-                </FieldLabel>
-              </Field>
-              <Field orientation="horizontal">
-                <Checkbox id="react-qhm" />
-                <FieldLabel htmlFor="react-qhm" className="font-normal">
-                  React
-                </FieldLabel>
-              </Field>
-              <Field orientation="horizontal">
-                <Checkbox id="nodejs-ug1" />
-                <FieldLabel htmlFor="nodejs-ug1" className="font-normal">
-                  Node.js
-                </FieldLabel>
-              </Field>
-              <Field orientation="horizontal">
-                <Checkbox id="python-azl" />
-                <FieldLabel htmlFor="python-azl" className="font-normal">
-                  Python
-                </FieldLabel>
-              </Field>
-              <Field orientation="horizontal">
-                <Checkbox id="database-br8" />
-                <FieldLabel htmlFor="database-br8" className="font-normal">
-                  Database
-                </FieldLabel>
-              </Field>
-            </FieldGroup>
-            <FieldDescription>
-              Select all technologies you are proficient with.
-            </FieldDescription>
-          </FieldSet>
-        </FieldGroup>
-      </CardContent>
-    </Card>
-  )
-}
-
-export function FormSliderDemo() {
-  const [volume, setVolume] = useState([50])
-  const [brightness, setBrightness] = useState([75])
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Slider Fields</CardTitle>
-        <CardDescription>Different slider field configurations</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <FieldGroup>
-          <Field>
-            <FieldLabel htmlFor="volume-viy">Volume</FieldLabel>
-            <Slider
-              id="volume-viy"
-              value={volume}
-              onValueChange={setVolume}
-              max={100}
-              step={1}
-            />
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="brightness-zke">Screen Brightness</FieldLabel>
-            <Slider
-              id="brightness-zke"
-              value={brightness}
-              onValueChange={setBrightness}
-              max={100}
-              step={5}
-            />
-            <FieldDescription>
-              Current brightness: {brightness[0]}%
-            </FieldDescription>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="quality-ccr">Video Quality</FieldLabel>
-            <FieldDescription>
-              Higher quality uses more bandwidth.
-            </FieldDescription>
-            <Slider
-              id="quality-ccr"
-              defaultValue={[720]}
-              max={1080}
-              min={360}
-              step={360}
-            />
-          </Field>
-        </FieldGroup>
-      </CardContent>
-    </Card>
-  )
-}
-
-export function FormSwitchDemo() {
-  const [notifications, setNotifications] = useState(false)
-  const [marketing, setMarketing] = useState(true)
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Switch Fields</CardTitle>
-        <CardDescription>Different switch field configurations</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <FieldGroup>
-          <Field orientation="horizontal">
-            <FieldContent>
-              <FieldLabel htmlFor="airplane-mode-c10">Airplane Mode</FieldLabel>
-              <FieldDescription>
-                Turn on airplane mode to disable all connections.
-              </FieldDescription>
-            </FieldContent>
-            <Switch id="airplane-mode-c10" />
-          </Field>
-          <Field orientation="horizontal">
-            <FieldContent>
-              <FieldLabel htmlFor="notifications-rfq">
-                Push Notifications
-              </FieldLabel>
-              <FieldDescription>
-                Receive notifications about updates and new features.
-              </FieldDescription>
-            </FieldContent>
-            <Switch
-              id="notifications-rfq"
-              checked={notifications}
-              onCheckedChange={setNotifications}
-            />
-          </Field>
-          <Field orientation="horizontal">
-            <Switch
-              id="marketing-7o6"
-              checked={marketing}
-              onCheckedChange={setMarketing}
-              className="mt-0.5"
-            />
-            <FieldContent>
-              <FieldLabel htmlFor="marketing-7o6">Marketing Emails</FieldLabel>
-              <FieldDescription>
-                Receive emails about new products, features, and more.
-              </FieldDescription>
-            </FieldContent>
-          </Field>
-          <Field orientation="horizontal">
-            <Switch id="auto-save-eux" defaultChecked />
-            <FieldContent>
-              <FieldLabel htmlFor="auto-save-eux">Auto-save</FieldLabel>
-              <FieldDescription>
-                Automatically save your work every 5 minutes.
-              </FieldDescription>
-            </FieldContent>
-          </Field>
-          <Field>
-            <FieldLabel>Privacy Settings</FieldLabel>
-            <FieldDescription>
-              Manage your privacy preferences.
-            </FieldDescription>
-            <Field orientation="horizontal">
-              <Switch id="profile-visible-zaq" defaultChecked />
-              <FieldContent>
-                <FieldLabel
-                  htmlFor="profile-visible-zaq"
-                  className="font-normal"
-                >
-                  Make profile visible to others
-                </FieldLabel>
-              </FieldContent>
-            </Field>
-            <Field orientation="horizontal">
-              <Switch id="show-email-x90" />
-              <FieldContent>
-                <FieldLabel htmlFor="show-email-x90" className="font-normal">
-                  Show email on profile
-                </FieldLabel>
-              </FieldContent>
-            </Field>
-            <Field orientation="horizontal">
-              <Switch id="allow-indexing-d58" defaultChecked />
-              <FieldContent>
-                <FieldLabel
-                  htmlFor="allow-indexing-d58"
-                  className="font-normal"
-                >
-                  Allow search engines to index profile
-                </FieldLabel>
-              </FieldContent>
-            </Field>
-          </Field>
-          <Field orientation="horizontal">
-            <Switch id="disabled-switch-4eu" disabled />
-            <FieldContent>
-              <FieldLabel htmlFor="disabled-switch-4eu" className="opacity-50">
-                Disabled Feature
-              </FieldLabel>
-              <FieldDescription>
-                This feature is currently unavailable.
-              </FieldDescription>
-            </FieldContent>
-          </Field>
-        </FieldGroup>
-      </CardContent>
-    </Card>
-  )
-}
-
-export function FormToggleGroupDemo() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Toggle Group Fields</CardTitle>
-        <CardDescription>Different toggle group configurations</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <FieldGroup>
-          <Field>
-            <FieldLabel>View Mode</FieldLabel>
-            <ToggleGroup
-              type="single"
-              defaultValue="grid"
-              variant="outline"
-              className="w-full"
-            >
-              <ToggleGroupItem value="list" className="flex-1">
-                List
-              </ToggleGroupItem>
-              <ToggleGroupItem value="grid" className="flex-1">
-                Grid
-              </ToggleGroupItem>
-              <ToggleGroupItem value="cards" className="flex-1">
-                Cards
-              </ToggleGroupItem>
-            </ToggleGroup>
-          </Field>
-          <Field>
-            <FieldLabel>Status Filter</FieldLabel>
-            <ToggleGroup type="single" variant="outline" className="flex-wrap">
-              <ToggleGroupItem value="active">Active</ToggleGroupItem>
-              <ToggleGroupItem value="pending">Pending</ToggleGroupItem>
-              <ToggleGroupItem value="completed">Completed</ToggleGroupItem>
-            </ToggleGroup>
-            <FieldDescription>Filter by multiple statuses.</FieldDescription>
-          </Field>
-          <Field>
-            <FieldLabel>Subscription Plan</FieldLabel>
-            <FieldDescription>
-              Select the subscription plan that you want to subscribe to.
-            </FieldDescription>
-            <ToggleGroup type="single" variant="outline" className="flex-wrap">
-              <ToggleGroupItem value="basic">Basic</ToggleGroupItem>
-              <ToggleGroupItem value="pro">Pro</ToggleGroupItem>
-              <ToggleGroupItem value="enterprise">Enterprise</ToggleGroupItem>
-            </ToggleGroup>
-          </Field>
-          <Field>
-            <FieldLabel>Disabled Toggle Group</FieldLabel>
-            <ToggleGroup type="single" disabled variant="outline">
-              <ToggleGroupItem value="option1">Option 1</ToggleGroupItem>
-              <ToggleGroupItem value="option2">Option 2</ToggleGroupItem>
-              <ToggleGroupItem value="option3">Option 3</ToggleGroupItem>
-            </ToggleGroup>
-            <FieldDescription>This toggle group is disabled.</FieldDescription>
-          </Field>
-        </FieldGroup>
-      </CardContent>
-    </Card>
-  )
-}
-
-export function FormInputTypesDemo() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Text Input Types</CardTitle>
-        <CardDescription>Text-based HTML input variations</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <FieldGroup>
-          <Field>
-            <FieldLabel htmlFor="text-input-qmg">Text</FieldLabel>
-            <Input id="text-input-qmg" type="text" placeholder="Enter text" />
-            <FieldDescription>Standard text input field.</FieldDescription>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="email-input-19f">Email</FieldLabel>
-            <Input
-              id="email-input-19f"
-              type="email"
-              placeholder="name@example.com"
-            />
-            <FieldDescription>Email address with validation.</FieldDescription>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="password-input-63z">Password</FieldLabel>
-            <Input
-              id="password-input-63z"
-              type="password"
-              placeholder="Enter password"
-            />
-            <FieldDescription>
-              Password field with hidden text.
-            </FieldDescription>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="tel-input-iw1">Phone</FieldLabel>
-            <Input
-              id="tel-input-iw1"
-              type="tel"
-              placeholder="+1 (555) 123-4567"
-            />
-            <FieldDescription>Telephone number input.</FieldDescription>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="url-input-ku7">URL</FieldLabel>
-            <Input
-              id="url-input-ku7"
-              type="url"
-              placeholder="https://example.com"
-            />
-            <FieldDescription>Website URL with validation.</FieldDescription>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="search-input-mhf">Search</FieldLabel>
-            <Input
-              id="search-input-mhf"
-              type="search"
-              placeholder="Search..."
-            />
-            <FieldDescription>Search field with clear button.</FieldDescription>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="number-input-u7u">Number</FieldLabel>
-            <Input
-              id="number-input-u7u"
-              type="number"
-              placeholder="42"
-              min="0"
-              max="100"
-              step="1"
-            />
-            <FieldDescription>Numeric input (0-100).</FieldDescription>
-          </Field>
-        </FieldGroup>
-      </CardContent>
-    </Card>
-  )
-}
-
-export function FormSpecialInputTypesDemo() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Special Input Types</CardTitle>
-        <CardDescription>
-          Date, time, file and other special inputs
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <FieldGroup>
-          <Field>
-            <FieldLabel htmlFor="date-input-u7h">Date</FieldLabel>
-            <Input id="date-input-u7h" type="date" />
-            <FieldDescription>Native date picker.</FieldDescription>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="time-input-2oj">Time</FieldLabel>
-            <Input id="time-input-2oj" type="time" />
-            <FieldDescription>
-              Time selection (24-hour format).
-            </FieldDescription>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="datetime-input-3jq">Date & Time</FieldLabel>
-            <Input id="datetime-input-3jq" type="datetime-local" />
-            <FieldDescription>Combined date and time picker.</FieldDescription>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="month-input-667">Month</FieldLabel>
-            <Input id="month-input-667" type="month" />
-            <FieldDescription>Month and year selector.</FieldDescription>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="week-input-3bv">Week</FieldLabel>
-            <Input id="week-input-3bv" type="week" />
-            <FieldDescription>Week number selector.</FieldDescription>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="file-input-hmb">File Upload</FieldLabel>
-            <Input id="file-input-hmb" type="file" accept="image/*,.pdf" />
-            <FieldDescription>Upload images or PDF files.</FieldDescription>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="files-input-p9u">Multiple Files</FieldLabel>
-            <Input
-              id="files-input-p9u"
-              type="file"
-              multiple
-              accept=".jpg,.jpeg,.png"
-            />
-            <FieldDescription>Upload multiple image files.</FieldDescription>
-          </Field>
-        </FieldGroup>
-      </CardContent>
-    </Card>
-  )
-}
-
-export function FormOTPDemo() {
-  const [value, setValue] = useState("")
-  const [pinValue, setPinValue] = useState("")
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>OTP Input Fields</CardTitle>
-        <CardDescription>Different OTP input configurations</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <FieldGroup>
-          <Field>
-            <FieldLabel htmlFor="basic-otp">Verification Code</FieldLabel>
-            <InputOTP id="basic-otp" maxLength={6}>
-              <InputOTPGroup>
-                <InputOTPSlot index={0} />
-                <InputOTPSlot index={1} />
-                <InputOTPSlot index={2} />
-                <InputOTPSlot index={3} />
-                <InputOTPSlot index={4} />
-                <InputOTPSlot index={5} />
-              </InputOTPGroup>
-            </InputOTP>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="otp-with-desc-5xp">Enter OTP</FieldLabel>
-            <InputOTP
-              id="otp-with-desc-5xp"
-              maxLength={6}
-              value={value}
-              onChange={setValue}
-            >
-              <InputOTPGroup>
-                <InputOTPSlot index={0} />
-                <InputOTPSlot index={1} />
-                <InputOTPSlot index={2} />
-                <InputOTPSlot index={3} />
-                <InputOTPSlot index={4} />
-                <InputOTPSlot index={5} />
-              </InputOTPGroup>
-            </InputOTP>
-            <FieldDescription>
-              Enter the 6-digit code sent to your email.
-            </FieldDescription>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="otp-separator-h39">
-              Two-Factor Authentication
-            </FieldLabel>
-            <InputOTP id="otp-separator-h39" maxLength={6}>
-              <InputOTPGroup>
-                <InputOTPSlot index={0} />
-                <InputOTPSlot index={1} />
-                <InputOTPSlot index={2} />
-              </InputOTPGroup>
-              <InputOTPSeparator />
-              <InputOTPGroup>
-                <InputOTPSlot index={3} />
-                <InputOTPSlot index={4} />
-                <InputOTPSlot index={5} />
-              </InputOTPGroup>
-            </InputOTP>
-            <FieldDescription>
-              Enter the code from your authenticator app.
-            </FieldDescription>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="pin-input-lqx">PIN Code</FieldLabel>
-            <InputOTP
-              id="pin-input-lqx"
-              maxLength={4}
-              pattern={REGEXP_ONLY_DIGITS}
-              value={pinValue}
-              onChange={setPinValue}
-            >
-              <InputOTPGroup>
-                <InputOTPSlot index={0} />
-                <InputOTPSlot index={1} />
-                <InputOTPSlot index={2} />
-                <InputOTPSlot index={3} />
-              </InputOTPGroup>
-            </InputOTP>
-            <FieldDescription>
-              Enter your 4-digit PIN (numbers only).
-            </FieldDescription>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="otp-multi-sep">License Key</FieldLabel>
-            <InputOTP id="otp-multi-sep" maxLength={8}>
-              <InputOTPGroup>
-                <InputOTPSlot index={0} />
-                <InputOTPSlot index={1} />
-              </InputOTPGroup>
-              <InputOTPSeparator />
-              <InputOTPGroup>
-                <InputOTPSlot index={2} />
-                <InputOTPSlot index={3} />
-              </InputOTPGroup>
-              <InputOTPSeparator />
-              <InputOTPGroup>
-                <InputOTPSlot index={4} />
-                <InputOTPSlot index={5} />
-              </InputOTPGroup>
-              <InputOTPSeparator />
-              <InputOTPGroup>
-                <InputOTPSlot index={6} />
-                <InputOTPSlot index={7} />
-              </InputOTPGroup>
-            </InputOTP>
-            <FieldDescription>
-              Enter your 8-character license key.
-            </FieldDescription>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="otp-custom-hip">Security Code</FieldLabel>
-            <FieldDescription>
-              Enter the security code to continue.
-            </FieldDescription>
-            <InputOTP id="otp-custom-hip" maxLength={6}>
-              <InputOTPGroup className="gap-2">
-                <InputOTPSlot index={0} className="rounded-md border" />
-                <InputOTPSlot index={1} className="rounded-md border" />
-                <InputOTPSlot index={2} className="rounded-md border" />
-                <InputOTPSlot index={3} className="rounded-md border" />
-                <InputOTPSlot index={4} className="rounded-md border" />
-                <InputOTPSlot index={5} className="rounded-md border" />
-              </InputOTPGroup>
-            </InputOTP>
-          </Field>
-        </FieldGroup>
-      </CardContent>
-    </Card>
-  )
-}
-
-export function FormDatePickerDemo() {
-  const [date, setDate] = useState<Date>()
-  const [birthDate, setBirthDate] = useState<Date>()
-  const [appointmentDate, setAppointmentDate] = useState<Date>()
-  const [dateRange, setDateRange] = useState<DateRange | undefined>()
-  const [vacationDates, setVacationDates] = useState<DateRange | undefined>({
-    from: new Date(),
-    to: addDays(new Date(), 7),
-  })
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Date Picker Fields</CardTitle>
-        <CardDescription>Different date picker configurations</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <FieldGroup>
-          <Field data-invalid={true}>
-            <FieldLabel htmlFor="basic-date-6st">Select Date</FieldLabel>
-            <Popover>
-              <PopoverTrigger asChild>
-                <Button
-                  id="basic-date-6st"
-                  variant="outline"
-                  aria-invalid={true}
-                  className={cn(
-                    "w-full justify-start text-left font-normal",
-                    !date && "text-muted-foreground"
-                  )}
-                >
-                  <CalendarIcon />
-                  {date ? format(date, "PPP") : <span>Pick a date</span>}
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent className="w-auto p-0" align="start">
-                <Calendar mode="single" selected={date} onSelect={setDate} />
-              </PopoverContent>
-            </Popover>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="birth-date-0fq">Date of Birth</FieldLabel>
-            <Popover>
-              <PopoverTrigger asChild>
-                <Button
-                  id="birth-date-0fq"
-                  variant="outline"
-                  className={cn(
-                    "w-full justify-start text-left font-normal",
-                    !birthDate && "text-muted-foreground"
-                  )}
-                >
-                  <CalendarIcon />
-                  {birthDate ? (
-                    format(birthDate, "PPP")
-                  ) : (
-                    <span>Select your birth date</span>
-                  )}
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent className="w-auto p-0" align="start">
-                <Calendar
-                  mode="single"
-                  selected={birthDate}
-                  onSelect={setBirthDate}
-                />
-              </PopoverContent>
-            </Popover>
-            <FieldDescription>
-              We use this to calculate your age and provide age-appropriate
-              content.
-            </FieldDescription>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="appointment-f44">Appointment Date</FieldLabel>
-            <FieldDescription>
-              Select a date for your appointment (weekdays only).
-            </FieldDescription>
-            <Popover>
-              <PopoverTrigger asChild>
-                <Button
-                  id="appointment-f44"
-                  variant="outline"
-                  className={cn(
-                    "w-full justify-start text-left font-normal",
-                    !appointmentDate && "text-muted-foreground"
-                  )}
-                >
-                  <CalendarIcon />
-                  {appointmentDate ? (
-                    format(appointmentDate, "PPP")
-                  ) : (
-                    <span>Schedule appointment</span>
-                  )}
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent className="w-auto p-0" align="start">
-                <Calendar
-                  mode="single"
-                  selected={appointmentDate}
-                  onSelect={setAppointmentDate}
-                  disabled={(date) =>
-                    date < new Date() ||
-                    date.getDay() === 0 ||
-                    date.getDay() === 6
-                  }
-                />
-              </PopoverContent>
-            </Popover>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="date-range-7yr">Date Range</FieldLabel>
-            <Popover>
-              <PopoverTrigger asChild>
-                <Button
-                  id="date-range-7yr"
-                  variant="outline"
-                  className={cn(
-                    "w-full justify-start text-left font-normal",
-                    !dateRange && "text-muted-foreground"
-                  )}
-                >
-                  <CalendarIcon />
-                  {dateRange?.from ? (
-                    dateRange.to ? (
-                      <>
-                        {format(dateRange.from, "LLL dd, y")} -{" "}
-                        {format(dateRange.to, "LLL dd, y")}
-                      </>
-                    ) : (
-                      format(dateRange.from, "LLL dd, y")
-                    )
-                  ) : (
-                    <span>Pick a date range</span>
-                  )}
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent className="w-auto p-0" align="start">
-                <Calendar
-                  mode="range"
-                  defaultMonth={dateRange?.from}
-                  selected={dateRange}
-                  onSelect={setDateRange}
-                  numberOfMonths={2}
-                />
-              </PopoverContent>
-            </Popover>
-            <FieldDescription>
-              Select start and end dates for your report.
-            </FieldDescription>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="vacation-w9w">Vacation Dates</FieldLabel>
-            <Popover>
-              <PopoverTrigger asChild>
-                <Button
-                  id="vacation-w9w"
-                  variant="outline"
-                  className={cn(
-                    "w-full justify-start text-left font-normal",
-                    !vacationDates && "text-muted-foreground"
-                  )}
-                >
-                  <CalendarIcon />
-                  {vacationDates?.from ? (
-                    vacationDates.to ? (
-                      <>
-                        {format(vacationDates.from, "LLL dd, y")} -{" "}
-                        {format(vacationDates.to, "LLL dd, y")}
-                      </>
-                    ) : (
-                      format(vacationDates.from, "LLL dd, y")
-                    )
-                  ) : (
-                    <span>Select vacation dates</span>
-                  )}
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent className="w-auto p-0" align="start">
-                <div className="flex flex-col">
-                  <div className="flex gap-2 border-b p-3">
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={() =>
-                        setVacationDates({
-                          from: new Date(),
-                          to: addDays(new Date(), 7),
-                        })
-                      }
-                    >
-                      Next 7 days
-                    </Button>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={() =>
-                        setVacationDates({
-                          from: new Date(),
-                          to: addDays(new Date(), 14),
-                        })
-                      }
-                    >
-                      Next 2 weeks
-                    </Button>
-                  </div>
-                  <Calendar
-                    mode="range"
-                    defaultMonth={vacationDates?.from}
-                    selected={vacationDates}
-                    onSelect={setVacationDates}
-                    numberOfMonths={2}
-                  />
-                </div>
-              </PopoverContent>
-            </Popover>
-            <FieldDescription>
-              Choose your vacation period. Quick presets available.
-            </FieldDescription>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="disabled-date-1vz" className="opacity-50">
-              Event Date (Disabled)
-            </FieldLabel>
-            <Button
-              id="disabled-date-1vz"
-              variant="outline"
-              className="w-full justify-start text-left font-normal opacity-50"
-              disabled
-            >
-              <CalendarIcon />
-              <span>Date selection disabled</span>
-            </Button>
-            <FieldDescription>
-              This field is currently disabled.
-            </FieldDescription>
-          </Field>
-        </FieldGroup>
-      </CardContent>
-    </Card>
-  )
-}
-
-export function FormFieldSetDemo() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>FieldSet & FieldLegend</CardTitle>
-        <CardDescription>Different fieldset configurations</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <FieldGroup>
-          <FieldSet>
-            <FieldLegend>Basic FieldSet</FieldLegend>
-            <FieldGroup>
-              <Field>
-                <FieldLabel htmlFor="basic-name-czt">Name</FieldLabel>
-                <Input id="basic-name-czt" placeholder="Enter your name" />
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="basic-email-32q">Email</FieldLabel>
-                <Input
-                  id="basic-email-32q"
-                  type="email"
-                  placeholder="email@example.com"
-                />
-              </Field>
-            </FieldGroup>
-          </FieldSet>
-          <FieldSet>
-            <FieldLegend>FieldSet with Description</FieldLegend>
-            <FieldDescription>
-              This fieldset includes a description to provide context.
-            </FieldDescription>
-            <FieldGroup>
-              <Field>
-                <FieldLabel htmlFor="address-street-atj">
-                  Street Address
-                </FieldLabel>
-                <Input id="address-street-atj" placeholder="123 Main St" />
-              </Field>
-              <FieldGroup className="grid grid-cols-2 gap-4">
-                <Field>
-                  <FieldLabel htmlFor="address-city-tpi">City</FieldLabel>
-                  <Input id="address-city-tpi" placeholder="New York" />
-                </Field>
-                <Field>
-                  <FieldLabel htmlFor="address-zip">ZIP Code</FieldLabel>
-                  <Input id="address-zip" placeholder="10001" />
-                </Field>
-              </FieldGroup>
-            </FieldGroup>
-          </FieldSet>
-          <FieldSet>
-            <FieldLegend>Communication Preferences</FieldLegend>
-            <FieldDescription>
-              Choose how you&apos;d like us to keep in touch with you.
-            </FieldDescription>
-            <FieldGroup>
-              <FieldSet>
-                <FieldLegend className="text-sm">
-                  Preferred Contact Method
-                </FieldLegend>
-                <FieldDescription>
-                  Choose how you&apos;d like us to keep in touch with you.
-                </FieldDescription>
-                <RadioGroup defaultValue="email">
-                  <Field orientation="horizontal">
-                    <RadioGroupItem value="email" id="contact-email-hxb" />
-                    <FieldLabel
-                      htmlFor="contact-email-hxb"
-                      className="font-normal"
-                    >
-                      Email
-                    </FieldLabel>
-                  </Field>
-                  <Field orientation="horizontal">
-                    <RadioGroupItem value="phone" id="contact-phone-7id" />
-                    <FieldLabel
-                      htmlFor="contact-phone-7id"
-                      className="font-normal"
-                    >
-                      Phone
-                    </FieldLabel>
-                  </Field>
-                  <Field orientation="horizontal">
-                    <RadioGroupItem value="sms" id="contact-sms" />
-                    <FieldLabel htmlFor="contact-sms" className="font-normal">
-                      SMS
-                    </FieldLabel>
-                  </Field>
-                </RadioGroup>
-              </FieldSet>
-              <FieldSet>
-                <FieldLegend className="text-sm">
-                  Notification Types
-                </FieldLegend>
-                <FieldDescription>
-                  Choose which notifications you&apos;d like to receive.
-                </FieldDescription>
-                <FieldGroup className="gap-3">
-                  <Field orientation="horizontal">
-                    <Checkbox id="updates-2sv" defaultChecked />
-                    <FieldLabel htmlFor="updates-2sv" className="font-normal">
-                      Product updates
-                    </FieldLabel>
-                  </Field>
-                  <Field orientation="horizontal">
-                    <Checkbox id="newsletters-ejn" />
-                    <FieldLabel
-                      htmlFor="newsletters-ejn"
-                      className="font-normal"
-                    >
-                      Newsletters
-                    </FieldLabel>
-                  </Field>
-                  <Field orientation="horizontal">
-                    <Checkbox id="promotions-9xv" />
-                    <FieldLabel
-                      htmlFor="promotions-9xv"
-                      className="font-normal"
-                    >
-                      Promotional offers
-                    </FieldLabel>
-                  </Field>
-                </FieldGroup>
-              </FieldSet>
-            </FieldGroup>
-          </FieldSet>
-          <FieldSet>
-            <FieldLegend>Account Settings</FieldLegend>
-            <FieldGroup>
-              <Field orientation="horizontal">
-                <FieldContent>
-                  <FieldLabel htmlFor="two-factor-kei">
-                    Two-Factor Authentication
-                  </FieldLabel>
-                  <FieldDescription>
-                    Add an extra layer of security to your account.
-                  </FieldDescription>
-                </FieldContent>
-                <Switch id="two-factor-kei" />
-              </Field>
-              <Field orientation="horizontal">
-                <FieldContent>
-                  <FieldLabel htmlFor="public-profile-bbt">
-                    Public Profile
-                  </FieldLabel>
-                  <FieldDescription>
-                    Make your profile visible to other users.
-                  </FieldDescription>
-                </FieldContent>
-                <Switch id="public-profile-bbt" defaultChecked />
-              </Field>
-              <Field orientation="horizontal">
-                <FieldContent>
-                  <FieldLabel htmlFor="activity-status-2la">
-                    Show Activity Status
-                  </FieldLabel>
-                  <FieldDescription>
-                    Let others see when you&apos;re online.
-                  </FieldDescription>
-                </FieldContent>
-                <Switch id="activity-status-2la" />
-              </Field>
-            </FieldGroup>
-          </FieldSet>
-
-          <FieldSet>
-            <FieldLegend>Emergency Contact</FieldLegend>
-            <FieldDescription>
-              Provide emergency contact information for safety purposes.
-            </FieldDescription>
-            <FieldGroup>
-              <Field>
-                <FieldLabel htmlFor="emergency-name-id4">
-                  Contact Name
-                </FieldLabel>
-                <Input id="emergency-name-id4" placeholder="Jane Doe" />
-                <FieldDescription>
-                  Full name of your emergency contact.
-                </FieldDescription>
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="emergency-relationship-9ja">
-                  Relationship
-                </FieldLabel>
-                <Select>
-                  <SelectTrigger id="emergency-relationship-9ja">
-                    <SelectValue placeholder="Select relationship" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="spouse">Spouse</SelectItem>
-                    <SelectItem value="parent">Parent</SelectItem>
-                    <SelectItem value="sibling">Sibling</SelectItem>
-                    <SelectItem value="friend">Friend</SelectItem>
-                    <SelectItem value="other">Other</SelectItem>
-                  </SelectContent>
-                </Select>
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="emergency-phone-3de">
-                  Phone Number
-                </FieldLabel>
-                <Input
-                  id="emergency-phone-3de"
-                  type="tel"
-                  placeholder="+1 (555) 123-4567"
-                />
-                <FieldDescription>
-                  Best number to reach your emergency contact.
-                </FieldDescription>
-              </Field>
-            </FieldGroup>
-          </FieldSet>
-          <FieldSet>
-            <FieldLegend>Additional Information</FieldLegend>
-            <FieldGroup>
-              <Field>
-                <FieldLabel htmlFor="comments-sxl">Comments</FieldLabel>
-                <Textarea
-                  id="comments-sxl"
-                  placeholder="Any additional information..."
-                  className="min-h-[100px]"
-                />
-              </Field>
-              <Field orientation="horizontal">
-                <Checkbox id="agree-terms-04d" />
-                <FieldContent>
-                  <FieldLabel htmlFor="agree-terms-04d" className="font-normal">
-                    I agree to the terms and conditions
-                  </FieldLabel>
-                </FieldContent>
-              </Field>
-            </FieldGroup>
-          </FieldSet>
-        </FieldGroup>
-      </CardContent>
-    </Card>
-  )
-}
-
-export function FormFieldSeparatorDemo() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Field Separator</CardTitle>
-        <CardDescription>
-          Different ways to use the FieldSeparator component
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <FieldGroup>
-          <Field>
-            <FieldLabel htmlFor="section1-input-ieg">Section 1</FieldLabel>
-            <Input id="section1-input-ieg" placeholder="First section input" />
-            <FieldDescription>
-              This is the first section of the form.
-            </FieldDescription>
-          </Field>
-          <FieldSeparator />
-          <Field>
-            <FieldLabel htmlFor="section2-input-mh9">Section 2</FieldLabel>
-            <Input id="section2-input-mh9" placeholder="Second section input" />
-            <FieldDescription>
-              A simple separator line appears above this section.
-            </FieldDescription>
-          </Field>
-          <FieldSeparator>Or continue with</FieldSeparator>
-          <Field>
-            <Button variant="outline" className="w-full">
-              Alternative Option 1
-            </Button>
-            <Button variant="outline" className="w-full">
-              Alternative Option 2
-            </Button>
-          </Field>
-          <FieldSeparator>Additional Options</FieldSeparator>
-          <FieldGroup>
-            <Field orientation="horizontal">
-              <Checkbox id="option1-ntl" />
-              <FieldContent>
-                <FieldLabel htmlFor="option1-ntl" className="font-normal">
-                  Enable additional features
-                </FieldLabel>
-              </FieldContent>
-            </Field>
-            <Field orientation="horizontal">
-              <Checkbox id="option2-n0m" />
-              <FieldContent>
-                <FieldLabel htmlFor="option2-n0m" className="font-normal">
-                  Subscribe to updates
-                </FieldLabel>
-              </FieldContent>
-            </Field>
-          </FieldGroup>
-          <FieldSeparator />
-          <Field>
-            <FieldLabel htmlFor="final-section-mk8">Final Section</FieldLabel>
-            <Textarea
-              id="final-section-mk8"
-              placeholder="Any additional comments..."
-              className="min-h-[80px]"
-            />
-          </Field>
-          <FieldSeparator>Or choose a different path</FieldSeparator>
-          <RadioGroup defaultValue="option1">
-            <Field orientation="horizontal">
-              <RadioGroupItem value="option1" id="path1-pgt" />
-              <FieldLabel htmlFor="path1-pgt" className="font-normal">
-                Option Path 1
-              </FieldLabel>
-            </Field>
-            <Field orientation="horizontal">
-              <RadioGroupItem value="option2" id="path2-7pd" />
-              <FieldLabel htmlFor="path2-7pd" className="font-normal">
-                Option Path 2
-              </FieldLabel>
-            </Field>
-          </RadioGroup>
-          <FieldSeparator>Account Settings</FieldSeparator>
-          <FieldGroup>
-            <Field orientation="horizontal">
-              <Switch id="separator-7e9-notifications-5r4" />
-              <FieldContent>
-                <FieldLabel htmlFor="separator-7e9-notifications-5r4">
-                  Enable Notifications
-                </FieldLabel>
-                <FieldDescription>
-                  Receive updates about your account activity.
-                </FieldDescription>
-              </FieldContent>
-            </Field>
-            <Field orientation="horizontal">
-              <Switch id="separator-7e9-privacy-81v" />
-              <FieldContent>
-                <FieldLabel htmlFor="separator-7e9-privacy-81v">
-                  Make Profile Public
-                </FieldLabel>
-                <FieldDescription>
-                  Allow others to view your profile information.
-                </FieldDescription>
-              </FieldContent>
-            </Field>
-          </FieldGroup>
-          <Field>
-            <Button type="submit" className="w-full">
-              Submit Form
-            </Button>
-          </Field>
-        </FieldGroup>
-      </CardContent>
-    </Card>
-  )
-}
-
-export function FormFieldGroupOutlineDemo() {
-  return (
-    <FieldGroup>
-      <FieldSet>
-        <FieldLegend>Notification Settings</FieldLegend>
-        <FieldDescription>
-          Configure how and when you receive notifications
-        </FieldDescription>
-        <FieldGroup>
-          <Field orientation="horizontal">
-            <FieldContent>
-              <FieldLabel htmlFor="outline-demo-8h3-email-notif-vk0">
-                Email Notifications
-              </FieldLabel>
-              <FieldDescription>
-                Receive updates via email about your account activity
-              </FieldDescription>
-            </FieldContent>
-            <Switch id="outline-demo-8h3-email-notif-vk0" defaultChecked />
-          </Field>
-          <FieldSeparator />
-          <Field orientation="horizontal">
-            <FieldContent>
-              <FieldLabel htmlFor="outline-demo-8h3-push-notif-5m7">
-                Push Notifications
-              </FieldLabel>
-              <FieldDescription>
-                Get instant notifications on your device
-              </FieldDescription>
-            </FieldContent>
-            <Switch id="outline-demo-8h3-push-notif-5m7" defaultChecked />
-          </Field>
-          <FieldSeparator />
-          <Field orientation="horizontal">
-            <Switch id="outline-demo-8h3-sms-notif-ew4" />
-            <FieldContent>
-              <FieldLabel htmlFor="outline-demo-8h3-sms-notif-ew4">
-                SMS Notifications
-              </FieldLabel>
-              <FieldDescription>
-                Receive text messages for important updates
-              </FieldDescription>
-            </FieldContent>
-          </Field>
-          <FieldSeparator />
-          <Field orientation="horizontal">
-            <Switch id="outline-demo-8h3-weekly-digest-xor" defaultChecked />
-            <FieldContent>
-              <FieldLabel htmlFor="outline-demo-8h3-weekly-digest-xor">
-                Weekly Digest
-              </FieldLabel>
-              <FieldDescription>
-                Get a summary of your activity every week
-              </FieldDescription>
-            </FieldContent>
-          </Field>
-        </FieldGroup>
-      </FieldSet>
-      <FieldSet>
-        <FieldLegend>Privacy Settings</FieldLegend>
-        <FieldDescription>
-          Control your privacy and data sharing preferences
-        </FieldDescription>
-        <FieldGroup>
-          <Field>
-            <FieldLabel htmlFor="contact-3k2-firstName-q1r">
-              First Name
-            </FieldLabel>
-            <Input id="contact-3k2-firstName-q1r" placeholder="John" required />
-          </Field>
-          <FieldSet>
-            <FieldLegend variant="label">
-              Show these items on the desktop:
-            </FieldLegend>
-            <FieldDescription>
-              Select the items you want to show on the desktop.
-            </FieldDescription>
-            <FieldGroup className="gap-3">
-              <Field orientation="horizontal">
-                <Checkbox id="finder-pref-9k2-hard-disks-ljj" />
-                <FieldLabel
-                  htmlFor="finder-pref-9k2-hard-disks-ljj"
-                  className="font-normal"
-                >
-                  Hard disks
-                </FieldLabel>
-              </Field>
-              <Field orientation="horizontal">
-                <Checkbox id="finder-pref-9k2-external-disks-1yg" />
-                <FieldLabel
-                  htmlFor="finder-pref-9k2-external-disks-1yg"
-                  className="font-normal"
-                >
-                  External disks
-                </FieldLabel>
-              </Field>
-              <Field orientation="horizontal">
-                <Checkbox id="finder-pref-9k2-cds-dvds-fzt" />
-                <FieldLabel
-                  htmlFor="finder-pref-9k2-cds-dvds-fzt"
-                  className="font-normal"
-                >
-                  CDs, DVDs, and iPods
-                </FieldLabel>
-              </Field>
-              <Field orientation="horizontal">
-                <Checkbox id="finder-pref-9k2-connected-servers-6l2" />
-                <FieldLabel
-                  htmlFor="finder-pref-9k2-connected-servers-6l2"
-                  className="font-normal"
-                >
-                  Connected servers
-                </FieldLabel>
-              </Field>
-            </FieldGroup>
-          </FieldSet>
-          <FieldSeparator />
-          <Field orientation="horizontal">
-            <FieldContent>
-              <FieldLabel htmlFor="outline-demo-8h3-profile-public-agy">
-                Public Profile
-              </FieldLabel>
-              <FieldDescription>
-                Make your profile visible to everyone
-              </FieldDescription>
-            </FieldContent>
-            <Switch id="outline-demo-8h3-profile-public-agy" />
-          </Field>
-          <FieldSeparator />
-          <Field orientation="horizontal">
-            <FieldContent>
-              <FieldLabel htmlFor="outline-demo-8h3-share-data-088">
-                Share Usage Data
-              </FieldLabel>
-              <FieldDescription>
-                Help improve our services by sharing anonymous usage data. This
-                data helps us understand how our product is used and how we can
-                improve it.
-              </FieldDescription>
-            </FieldContent>
-            <Switch id="outline-demo-8h3-share-data-088" />
-          </Field>
-        </FieldGroup>
-      </FieldSet>
-    </FieldGroup>
-  )
-}
-
-export function ProfileSettingsForm() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Profile Settings</CardTitle>
-        <CardDescription>
-          Update your profile information and preferences
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <form>
-          <FieldGroup>
-            <Field>
-              <FieldLabel>Profile Photo</FieldLabel>
-              <div className="flex items-center space-x-4">
-                <Avatar className="size-12">
-                  <AvatarImage src="/abstract-profile.png" />
-                  <AvatarFallback>JD</AvatarFallback>
-                </Avatar>
-                <Button variant="outline" type="button">
-                  Change Photo
-                </Button>
-              </div>
-            </Field>
-
-            <div className="grid grid-cols-2 gap-4">
-              <Field>
-                <FieldLabel htmlFor="profileFirstName-h2r">
-                  First Name
-                </FieldLabel>
-                <Input id="profileFirstName-h2r" defaultValue="John" />
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="profileLastName-cal">Last Name</FieldLabel>
-                <Input id="profileLastName-cal" defaultValue="Doe" />
-              </Field>
-            </div>
-
-            <Field>
-              <FieldLabel htmlFor="profileEmail-e4m">Email</FieldLabel>
-              <Input
-                id="profileEmail-e4m"
-                type="email"
-                defaultValue="john@example.com"
-              />
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="phone-olk">Phone Number</FieldLabel>
-              <Input
-                id="phone-olk"
-                type="tel"
-                placeholder="+1 (555) 123-4567"
-              />
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="bio-jlq">Bio</FieldLabel>
-              <Textarea
-                id="bio-jlq"
-                placeholder="Tell us about yourself..."
-                className="min-h-[80px]"
-              />
-            </Field>
-
-            <FieldSet>
-              <FieldLegend>Notification Preferences</FieldLegend>
-              <FieldDescription>
-                Manage your notification preferences.
-              </FieldDescription>
-              <FieldGroup>
-                <Field orientation="horizontal">
-                  <FieldContent>
-                    <FieldLabel htmlFor="emailNotifications-xfj">
-                      Email notifications
-                    </FieldLabel>
-                    <FieldDescription>
-                      Receive emails about new products, features, and more. If
-                      you don&apos;t want to receive these emails, you can turn
-                      them off.
-                    </FieldDescription>
-                  </FieldContent>
-                  <Switch
-                    id="emailNotifications-xfj"
-                    defaultChecked
-                    className="ml-auto"
-                  />
-                </Field>
-                <Field orientation="horizontal">
-                  <FieldLabel htmlFor="pushNotifications-ofh">
-                    Push notifications
-                  </FieldLabel>
-                  <Switch id="pushNotifications-ofh" />
-                </Field>
-                <Field orientation="horizontal">
-                  <FieldLabel htmlFor="marketingEmails-8hc">
-                    Marketing emails
-                  </FieldLabel>
-                  <Switch
-                    id="marketingEmails-8hc"
-                    defaultChecked
-                    className="ml-auto"
-                  />
-                </Field>
-              </FieldGroup>
-            </FieldSet>
-            <Field orientation="horizontal" className="justify-end">
-              <Button type="button" variant="outline">
-                Cancel
-              </Button>
-              <Button type="submit">Save Changes</Button>
-            </Field>
-          </FieldGroup>
-        </form>
-      </CardContent>
-    </Card>
-  )
-}
-
-export function SurveyForm() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Customer Survey</CardTitle>
-        <CardDescription>
-          Help us understand your needs better (5 minutes)
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <form>
-          <FieldGroup>
-            <Field>
-              <FieldLabel htmlFor="surveyName-eqj">Name (Optional)</FieldLabel>
-              <Input id="surveyName-eqj" placeholder="Your name" />
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="ageGroup-302">Age Group</FieldLabel>
-              <Select>
-                <SelectTrigger>
-                  <SelectValue placeholder="Select age group" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="18-24">18-24</SelectItem>
-                  <SelectItem value="25-34">25-34</SelectItem>
-                  <SelectItem value="35-44">35-44</SelectItem>
-                  <SelectItem value="45-54">45-54</SelectItem>
-                  <SelectItem value="55+">55+</SelectItem>
-                </SelectContent>
-              </Select>
-            </Field>
-            <Field>
-              <FieldLabel>How often do you use our product?</FieldLabel>
-              <RadioGroup>
-                <Field orientation="horizontal">
-                  <RadioGroupItem value="daily" id="daily-lrv" />
-                  <FieldLabel htmlFor="daily-lrv">Daily</FieldLabel>
-                </Field>
-                <Field orientation="horizontal">
-                  <RadioGroupItem value="weekly" id="weekly-mga" />
-                  <FieldLabel htmlFor="weekly-mga">Weekly</FieldLabel>
-                </Field>
-                <Field orientation="horizontal">
-                  <RadioGroupItem value="monthly" id="monthly-7gl" />
-                  <FieldLabel htmlFor="monthly-7gl">Monthly</FieldLabel>
-                </Field>
-                <Field orientation="horizontal">
-                  <RadioGroupItem value="rarely" id="rarely-hlw" />
-                  <FieldLabel htmlFor="rarely-hlw">Rarely</FieldLabel>
-                </Field>
-              </RadioGroup>
-            </Field>
-            <Field>
-              <FieldLabel>
-                Which features do you use most? (Select all that apply)
-              </FieldLabel>
-              <div className="grid w-full grid-cols-2 gap-2">
-                <Field orientation="horizontal">
-                  <Checkbox id="dashboard-epk" />
-                  <FieldLabel htmlFor="dashboar d-epk" className="text-sm">
-                    Dashboard
-                  </FieldLabel>
-                </Field>
-                <Field orientation="horizontal">
-                  <Checkbox id="reports-jkm" />
-                  <FieldLabel htmlFor="reports-jkm" className="text-sm">
-                    Reports
-                  </FieldLabel>
-                </Field>
-                <Field orientation="horizontal">
-                  <Checkbox id="analytics-kwm" />
-                  <FieldLabel htmlFor="analytics-kwm" className="text-sm">
-                    Analytics
-                  </FieldLabel>
-                </Field>
-                <Field orientation="horizontal">
-                  <Checkbox id="integrations-euz" />
-                  <FieldLabel htmlFor="integrations-euz" className="text-sm">
-                    Integrations
-                  </FieldLabel>
-                </Field>
-                <Field orientation="horizontal">
-                  <Checkbox id="api-e2h" />
-                  <FieldLabel htmlFor="api-e2h" className="text-sm">
-                    API Access
-                  </FieldLabel>
-                </Field>
-                <Field orientation="horizontal">
-                  <Checkbox id="support-qq9" />
-                  <FieldLabel htmlFor="support-qq9" className="text-sm">
-                    Support
-                  </FieldLabel>
-                </Field>
-              </div>
-            </Field>
-            <Field>
-              <FieldLabel>How satisfied are you with our product?</FieldLabel>
-              <RadioGroup>
-                <Field orientation="horizontal">
-                  <RadioGroupItem
-                    value="very-satisfied"
-                    id="very-satisfied-ok5"
-                  />
-                  <FieldLabel htmlFor="very-satisfied-ok5">
-                    Very Satisfied
-                  </FieldLabel>
-                </Field>
-                <Field orientation="horizontal">
-                  <RadioGroupItem value="satisfied" id="satisfied-hn4" />
-                  <FieldLabel htmlFor="satisfied-hn4">Satisfied</FieldLabel>
-                </Field>
-                <Field orientation="horizontal">
-                  <RadioGroupItem value="neutral" id="neutral-6az" />
-                  <FieldLabel htmlFor="neutral-6az">Neutral</FieldLabel>
-                </Field>
-                <Field orientation="horizontal">
-                  <RadioGroupItem value="dissatisfied" id="dissatisfied-sy9" />
-                  <FieldLabel htmlFor="dissatisfied-sy9">
-                    Dissatisfied
-                  </FieldLabel>
-                </Field>
-                <Field orientation="horizontal">
-                  <RadioGroupItem
-                    value="very-dissatisfied"
-                    id="very-dissatisfied-xs2"
-                  />
-                  <FieldLabel htmlFor="very-dissatisfied-xs2">
-                    Very Dissatisfied
-                  </FieldLabel>
-                </Field>
-              </RadioGroup>
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="improvements-u5u">
-                What improvements would you like to see?
-              </FieldLabel>
-              <Textarea
-                id="improvements-u5u"
-                placeholder="Share your suggestions for improvements..."
-                className="min-h-[80px]"
-              />
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="recommend-aym">
-                Would you recommend our product to others?
-              </FieldLabel>
-              <Select>
-                <SelectTrigger>
-                  <SelectValue placeholder="Select recommendation level" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="definitely">Definitely</SelectItem>
-                  <SelectItem value="probably">Probably</SelectItem>
-                  <SelectItem value="maybe">Maybe</SelectItem>
-                  <SelectItem value="probably-not">Probably Not</SelectItem>
-                  <SelectItem value="definitely-not">Definitely Not</SelectItem>
-                </SelectContent>
-              </Select>
-            </Field>
-
-            <Button type="submit" className="w-full">
-              Submit
-            </Button>
-          </FieldGroup>
-        </form>
-      </CardContent>
-    </Card>
-  )
-}
-
-export function ComplexFormDemo() {
-  return (
-    <Card className="w-full max-w-3xl">
-      <CardHeader>
-        <CardTitle>Job Application Form</CardTitle>
-        <CardDescription>
-          Complete all sections to submit your application
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <form>
-          <FieldGroup>
-            <FieldSet>
-              <FieldLegend>Personal Information</FieldLegend>
-              <FieldDescription>
-                Your basic contact information.
-              </FieldDescription>
-              <FieldGroup>
-                <div className="grid grid-cols-2 gap-4">
-                  <Field>
-                    <FieldLabel htmlFor="complex-6d8-firstName-dsv">
-                      First Name
-                    </FieldLabel>
-                    <Input
-                      id="complex-6d8-firstName-dsv"
-                      placeholder="John"
-                      required
-                    />
-                  </Field>
-                  <Field>
-                    <FieldLabel htmlFor="complex-6d8-lastName-i08">
-                      Last Name
-                    </FieldLabel>
-                    <Input
-                      id="complex-6d8-lastName-i08"
-                      placeholder="Doe"
-                      required
-                    />
-                  </Field>
-                </div>
-
-                <Field>
-                  <FieldLabel htmlFor="complex-6d8-email-yq8">
-                    Email Address
-                  </FieldLabel>
-                  <Input
-                    id="complex-6d8-email-yq8"
-                    type="email"
-                    placeholder="john.doe@example.com"
-                    required
-                  />
-                  <FieldDescription>
-                    We&apos;ll use this for all communications.
-                  </FieldDescription>
-                </Field>
-                <Field>
-                  <FieldLabel htmlFor="complex-6d8-phone-a7k">
-                    Phone Number
-                  </FieldLabel>
-                  <Input
-                    id="complex-6d8-phone-a7k"
-                    type="tel"
-                    placeholder="+1 (555) 123-4567"
-                  />
-                </Field>
-              </FieldGroup>
-            </FieldSet>
-            <FieldSeparator />
-            <FieldSet>
-              <FieldLegend>Professional Background</FieldLegend>
-              <FieldGroup>
-                <Field>
-                  <FieldLabel htmlFor="position-k7f">
-                    Position Applying For
-                  </FieldLabel>
-                  <Select>
-                    <SelectTrigger id="position-k7f">
-                      <SelectValue placeholder="Select a position" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="frontend">
-                        Frontend Developer
-                      </SelectItem>
-                      <SelectItem value="backend">Backend Developer</SelectItem>
-                      <SelectItem value="fullstack">
-                        Full Stack Developer
-                      </SelectItem>
-                      <SelectItem value="designer">UI/UX Designer</SelectItem>
-                      <SelectItem value="pm">Product Manager</SelectItem>
-                      <SelectItem value="devops">DevOps Engineer</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </Field>
-
-                <Field>
-                  <FieldLabel htmlFor="experience-5ih">
-                    Years of Experience
-                  </FieldLabel>
-                  <Slider id="experience-5ih" max={20} min={0} step={1} />
-                  <FieldDescription>Years of experience</FieldDescription>
-                </Field>
-
-                <Field>
-                  <FieldLabel>Employment Type Preference</FieldLabel>
-                  <ToggleGroup
-                    type="single"
-                    variant="outline"
-                    className="w-full"
-                  >
-                    <ToggleGroupItem value="remote" className="flex-1">
-                      Remote
-                    </ToggleGroupItem>
-                    <ToggleGroupItem value="office" className="flex-1">
-                      Office
-                    </ToggleGroupItem>
-                    <ToggleGroupItem value="hybrid" className="flex-1">
-                      Hybrid
-                    </ToggleGroupItem>
-                  </ToggleGroup>
-                </Field>
-              </FieldGroup>
-            </FieldSet>
-
-            <FieldSeparator />
-
-            <FieldSet>
-              <FieldLegend>Additional Information</FieldLegend>
-              <FieldGroup>
-                <Field>
-                  <FieldLabel htmlFor="portfolio-6km">Portfolio URL</FieldLabel>
-                  <Input
-                    id="portfolio-6km"
-                    type="url"
-                    placeholder="https://yourportfolio.com"
-                  />
-                  <FieldDescription>
-                    Optional: Share your portfolio or GitHub profile
-                  </FieldDescription>
-                </Field>
-
-                <Field>
-                  <FieldLabel htmlFor="coverLetter-6re">
-                    Cover Letter
-                  </FieldLabel>
-                  <Textarea
-                    id="coverLetter-6re"
-                    placeholder="Tell us why you're a great fit for this position..."
-                    className="min-h-[120px]"
-                  />
-                  <FieldDescription>
-                    Briefly describe your interest and qualifications (500 words
-                    max)
-                  </FieldDescription>
-                </Field>
-
-                <Field>
-                  <FieldLabel htmlFor="resume-yyr">Upload Resume</FieldLabel>
-                  <Input id="resume-yyr" type="file" accept=".pdf,.doc,.docx" />
-                  <FieldDescription>
-                    PDF or Word document (max 5MB)
-                  </FieldDescription>
-                </Field>
-
-                <Field>
-                  <FieldLabel htmlFor="references-fcs">
-                    References Available
-                  </FieldLabel>
-                  <RadioGroup defaultValue="yes">
-                    <Field orientation="horizontal">
-                      <RadioGroupItem value="yes" id="ref-yes" />
-                      <FieldLabel htmlFor="ref-yes" className="font-normal">
-                        Yes, upon request
-                      </FieldLabel>
-                    </Field>
-                    <Field orientation="horizontal">
-                      <RadioGroupItem value="no" id="ref-no-pqi" />
-                      <FieldLabel htmlFor="ref-no-pqi" className="font-normal">
-                        No
-                      </FieldLabel>
-                    </Field>
-                  </RadioGroup>
-                </Field>
-              </FieldGroup>
-            </FieldSet>
-
-            <FieldSeparator />
-
-            <FieldSet>
-              <FieldLegend>Verification</FieldLegend>
-              <FieldGroup>
-                <Field>
-                  <FieldLabel htmlFor="verification-pj8">
-                    Enter Verification Code
-                  </FieldLabel>
-                  <FieldDescription>
-                    Enter the 6-digit code sent to your email
-                  </FieldDescription>
-                  <InputOTP id="verification-pj8" maxLength={6}>
-                    <InputOTPGroup>
-                      <InputOTPSlot index={0} />
-                      <InputOTPSlot index={1} />
-                      <InputOTPSlot index={2} />
-                    </InputOTPGroup>
-                    <InputOTPSeparator />
-                    <InputOTPGroup>
-                      <InputOTPSlot index={3} />
-                      <InputOTPSlot index={4} />
-                      <InputOTPSlot index={5} />
-                    </InputOTPGroup>
-                  </InputOTP>
-                </Field>
-
-                <Field orientation="horizontal">
-                  <FieldContent>
-                    <FieldLabel htmlFor="notifications-rfq">
-                      Email Notifications
-                    </FieldLabel>
-                    <FieldDescription>
-                      Receive updates about your application status
-                    </FieldDescription>
-                  </FieldContent>
-                  <Switch id="notifications-rfq" defaultChecked />
-                </Field>
-                <FieldGroup>
-                  <Field orientation="horizontal">
-                    <Checkbox id="terms-y7h" required />
-                    <FieldLabel htmlFor="terms-y7h" className="font-normal">
-                      I agree to the terms and conditions and privacy policy
-                    </FieldLabel>
-                  </Field>
-                  <Field orientation="horizontal">
-                    <Checkbox id="accurate-vte" required />
-                    <FieldLabel htmlFor="accurate-vte" className="font-normal">
-                      I confirm that all information provided is accurate
-                    </FieldLabel>
-                  </Field>
-                </FieldGroup>
-              </FieldGroup>
-            </FieldSet>
-            <Field orientation="horizontal">
-              <Button variant="outline">Save Draft</Button>
-              <Button type="submit">Submit Application</Button>
-            </Field>
-          </FieldGroup>
-        </form>
-      </CardContent>
-    </Card>
-  )
-}
-
-export function ComplexFormInvalidDemo() {
-  const [startDate, setStartDate] = useState<Date>()
-  const [experience, setExperience] = useState([3])
-  const [workType, setWorkType] = useState("hybrid")
-
-  return (
-    <Card className="w-full max-w-3xl">
-      <CardContent>
-        <form>
-          <FieldGroup>
-            <FieldSet>
-              <FieldLegend>Personal Information</FieldLegend>
-              <FieldDescription>
-                Your basic contact information.
-              </FieldDescription>
-              <FieldGroup>
-                <div className="grid grid-cols-2 gap-4">
-                  <Field data-invalid>
-                    <FieldLabel htmlFor="firstName-invalid-ygm">
-                      First Name
-                    </FieldLabel>
-                    <Input
-                      id="firstName-invalid-ygm"
-                      placeholder="John"
-                      required
-                      aria-invalid
-                    />
-                  </Field>
-                  <Field data-invalid>
-                    <FieldLabel htmlFor="lastName-invalid-qlq">
-                      Last Name
-                    </FieldLabel>
-                    <Input
-                      id="lastName-invalid-qlq"
-                      placeholder="Doe"
-                      required
-                      aria-invalid
-                    />
-                  </Field>
-                </div>
-                <Field data-invalid>
-                  <FieldLabel htmlFor="email-invalid-8tl">
-                    Email Address
-                  </FieldLabel>
-                  <Input
-                    id="email-invalid-8tl"
-                    type="email"
-                    placeholder="john.doe@example.com"
-                    required
-                    aria-invalid
-                  />
-                  <FieldDescription>
-                    We&apos;ll use this for all communications.
-                  </FieldDescription>
-                </Field>
-                <div className="grid grid-cols-2 gap-4">
-                  <Field data-invalid>
-                    <FieldLabel htmlFor="phone-invalid-2r4">
-                      Phone Number
-                    </FieldLabel>
-                    <Input
-                      id="phone-invalid-2r4"
-                      type="tel"
-                      placeholder="+1 (555) 123-4567"
-                      aria-invalid
-                    />
-                  </Field>
-                  <Field data-invalid>
-                    <FieldLabel htmlFor="birthdate-invalid-49m">
-                      Date of Birth
-                    </FieldLabel>
-                    <Popover>
-                      <PopoverTrigger asChild>
-                        <Button
-                          id="birthdate-invalid-49m"
-                          variant="outline"
-                          className={cn(
-                            "w-full justify-start text-left font-normal",
-                            !startDate && "text-muted-foreground"
-                          )}
-                        >
-                          <CalendarIcon />
-                          {startDate ? (
-                            format(startDate, "PPP")
-                          ) : (
-                            <span>Pick a date</span>
-                          )}
-                        </Button>
-                      </PopoverTrigger>
-                      <PopoverContent className="w-auto p-0" align="start">
-                        <Calendar
-                          mode="single"
-                          selected={startDate}
-                          onSelect={setStartDate}
-                          aria-invalid
-                        />
-                      </PopoverContent>
-                    </Popover>
-                  </Field>
-                </div>
-                <Field data-invalid>
-                  <FieldLabel htmlFor="coverLetter-invalid-6n9">
-                    Cover Letter
-                  </FieldLabel>
-                  <Textarea
-                    id="coverLetter-invalid-6n9"
-                    placeholder="Tell us why you're a great fit for this position..."
-                    className="min-h-[120px]"
-                    aria-invalid
-                  />
-                  <FieldDescription>
-                    Briefly describe your interest and qualifications (500 words
-                    max)
-                  </FieldDescription>
-                </Field>
-                <Field data-invalid>
-                  <FieldLabel htmlFor="resume-invalid-b6z">
-                    Upload Resume
-                  </FieldLabel>
-                  <Input
-                    id="resume-invalid-b6z"
-                    type="file"
-                    accept=".pdf,.doc,.docx"
-                    aria-invalid
-                  />
-                  <FieldDescription>
-                    PDF or Word document (max 5MB)
-                  </FieldDescription>
-                </Field>
-              </FieldGroup>
-            </FieldSet>
-            <FieldSeparator />
-            <FieldSet>
-              <FieldLegend>Professional Background</FieldLegend>
-              <FieldGroup>
-                <Field data-invalid>
-                  <FieldLabel htmlFor="position-invalid-1fv">
-                    Position Applying For
-                  </FieldLabel>
-                  <Select>
-                    <SelectTrigger id="position-invalid-1fv" aria-invalid>
-                      <SelectValue placeholder="Select a position" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="frontend">
-                        Frontend Developer
-                      </SelectItem>
-                      <SelectItem value="backend">Backend Developer</SelectItem>
-                      <SelectItem value="fullstack">
-                        Full Stack Developer
-                      </SelectItem>
-                      <SelectItem value="designer">UI/UX Designer</SelectItem>
-                      <SelectItem value="pm">Product Manager</SelectItem>
-                      <SelectItem value="devops">DevOps Engineer</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </Field>
-                <Field data-invalid>
-                  <FieldLabel htmlFor="experience-invalid-xri">
-                    Years of Experience
-                  </FieldLabel>
-                  <Slider
-                    id="experience-invalid-xri"
-                    value={experience}
-                    onValueChange={setExperience}
-                    max={20}
-                    min={0}
-                    step={1}
-                  />
-                  <FieldDescription>
-                    {experience[0]} {experience[0] === 1 ? "year" : "years"} of
-                    experience
-                  </FieldDescription>
-                </Field>
-                <Field data-invalid>
-                  <FieldLabel>Employment Type Preference</FieldLabel>
-                  <ToggleGroup
-                    type="single"
-                    value={workType}
-                    onValueChange={setWorkType}
-                    variant="outline"
-                    className="w-full"
-                  >
-                    <ToggleGroupItem value="remote" className="flex-1">
-                      Remote
-                    </ToggleGroupItem>
-                    <ToggleGroupItem value="office" className="flex-1">
-                      Office
-                    </ToggleGroupItem>
-                    <ToggleGroupItem value="hybrid" className="flex-1">
-                      Hybrid
-                    </ToggleGroupItem>
-                  </ToggleGroup>
-                </Field>
-                <FieldSet>
-                  <FieldLegend>Technical Skills</FieldLegend>
-                  <FieldDescription>Select all that apply</FieldDescription>
-                  <FieldGroup className="grid grid-cols-3 gap-3">
-                    <Field data-invalid orientation="horizontal">
-                      <Checkbox id="skill-ts-invalid-khi" aria-invalid />
-                      <FieldLabel
-                        htmlFor="skill-ts-invalid-khi"
-                        className="font-normal"
-                      >
-                        TypeScript
-                      </FieldLabel>
-                    </Field>
-                    <Field data-invalid orientation="horizontal">
-                      <Checkbox id="skill-react-invalid-oxj" aria-invalid />
-                      <FieldLabel
-                        htmlFor="skill-react-invalid-oxj"
-                        className="font-normal"
-                      >
-                        React
-                      </FieldLabel>
-                    </Field>
-                    <Field data-invalid orientation="horizontal">
-                      <Checkbox id="skill-node-invalid-y18" aria-invalid />
-                      <FieldLabel
-                        htmlFor="skill-node-invalid-y18"
-                        className="font-normal"
-                      >
-                        Node.js
-                      </FieldLabel>
-                    </Field>
-                    <Field data-invalid orientation="horizontal">
-                      <Checkbox id="skill-python-invalid-3jp" aria-invalid />
-                      <FieldLabel
-                        htmlFor="skill-python-invalid-3jp"
-                        className="font-normal"
-                      >
-                        Python
-                      </FieldLabel>
-                    </Field>
-                    <Field data-invalid orientation="horizontal">
-                      <Checkbox id="skill-docker-invalid-5b0" aria-invalid />
-                      <FieldLabel
-                        htmlFor="skill-docker-invalid-5b0"
-                        className="font-normal"
-                      >
-                        Docker
-                      </FieldLabel>
-                    </Field>
-                  </FieldGroup>
-                </FieldSet>
-              </FieldGroup>
-            </FieldSet>
-            <FieldSeparator />
-            <FieldSet>
-              <FieldLegend>Verification</FieldLegend>
-              <FieldGroup>
-                <Field data-invalid>
-                  <FieldLabel htmlFor="verification-invalid-zyx">
-                    Enter Verification Code
-                  </FieldLabel>
-                  <FieldDescription>
-                    Enter the 6-digit code sent to your email
-                  </FieldDescription>
-                  <InputOTP id="verification-invalid-zyx" maxLength={6}>
-                    <InputOTPGroup>
-                      <InputOTPSlot index={0} aria-invalid />
-                      <InputOTPSlot index={1} aria-invalid />
-                      <InputOTPSlot index={2} aria-invalid />
-                    </InputOTPGroup>
-                    <InputOTPSeparator />
-                    <InputOTPGroup>
-                      <InputOTPSlot index={3} aria-invalid />
-                      <InputOTPSlot index={4} aria-invalid />
-                      <InputOTPSlot index={5} aria-invalid />
-                    </InputOTPGroup>
-                  </InputOTP>
-                </Field>
-                <Field data-invalid orientation="horizontal">
-                  <FieldContent>
-                    <FieldLabel htmlFor="notifications-invalid-73q">
-                      Email Notifications
-                    </FieldLabel>
-                    <FieldDescription>
-                      Receive updates about your application status
-                    </FieldDescription>
-                  </FieldContent>
-                  <Switch
-                    id="notifications-invalid-73q"
-                    defaultChecked
-                    className="ml-auto"
-                    aria-invalid
-                  />
-                </Field>
-                <FieldGroup>
-                  <Field data-invalid orientation="horizontal">
-                    <Checkbox id="terms-invalid-0x4" required />
-                    <FieldLabel
-                      htmlFor="terms-invalid-0x4"
-                      className="font-normal"
-                    >
-                      I agree to the terms and conditions and privacy policy
-                    </FieldLabel>
-                  </Field>
-                  <Field data-invalid orientation="horizontal">
-                    <Checkbox id="accurate-invalid-z0j" required />
-                    <FieldLabel
-                      htmlFor="accurate-invalid-z0j"
-                      className="font-normal"
-                    >
-                      I confirm that all information provided is accurate
-                    </FieldLabel>
-                  </Field>
-                </FieldGroup>
-              </FieldGroup>
-            </FieldSet>
-            <Field orientation="horizontal">
-              <Button variant="outline">Save Draft</Button>
-              <Button type="submit">Submit Application</Button>
-            </Field>
-          </FieldGroup>
-        </form>
-      </CardContent>
-    </Card>
-  )
-}
-
-export function FormOrientationDemo() {
-  return (
-    <Card className="w-full max-w-2xl">
-      <CardHeader>
-        <CardTitle>Field Orientation Examples</CardTitle>
-        <CardDescription>
-          Demonstrating vertical, horizontal, and responsive orientations
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <FieldGroup>
-          <FieldSet>
-            <FieldLegend>Vertical Orientation (Default)</FieldLegend>
-            <FieldDescription>
-              Label appears above the input - best for mobile and narrow layouts
-            </FieldDescription>
-            <FieldGroup>
-              <Field>
-                <FieldLabel htmlFor="vertical-name">Full Name</FieldLabel>
-                <Input id="vertical-name" placeholder="Enter your name" />
-                <FieldDescription>
-                  This field uses vertical orientation
-                </FieldDescription>
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="vertical-select">Country</FieldLabel>
-                <Select>
-                  <SelectTrigger id="vertical-select">
-                    <SelectValue placeholder="Select country" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="us">United States</SelectItem>
-                    <SelectItem value="uk">United Kingdom</SelectItem>
-                    <SelectItem value="ca">Canada</SelectItem>
-                  </SelectContent>
-                </Select>
-              </Field>
-              <Field orientation="horizontal">
-                <FieldContent>
-                  <FieldLabel htmlFor="vertical-notifications">
-                    Email Notifications
-                  </FieldLabel>
-                  <FieldDescription>
-                    Receive product updates and news
-                  </FieldDescription>
-                </FieldContent>
-                <Switch id="vertical-notifications" />
-              </Field>
-            </FieldGroup>
-          </FieldSet>
-
-          <FieldSeparator />
-
-          <FieldSet>
-            <FieldLegend>Horizontal Orientation</FieldLegend>
-            <FieldDescription>
-              Label appears to the left of the input - great for desktop forms
-              with short labels
-            </FieldDescription>
-            <FieldGroup>
-              <Field orientation="horizontal">
-                <FieldContent>
-                  <FieldLabel htmlFor="horizontal-name">Name</FieldLabel>
-                  <FieldDescription>Your display name</FieldDescription>
-                </FieldContent>
-                <Input id="horizontal-name" placeholder="Enter name" />
-              </Field>
-              <Field orientation="horizontal">
-                <FieldContent>
-                  <FieldLabel htmlFor="horizontal-theme">Theme</FieldLabel>
-                  <FieldDescription>
-                    Choose your preferred theme
-                  </FieldDescription>
-                </FieldContent>
-                <Select>
-                  <SelectTrigger id="horizontal-theme">
-                    <SelectValue placeholder="Select theme" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="light">Light</SelectItem>
-                    <SelectItem value="dark">Dark</SelectItem>
-                    <SelectItem value="system">System</SelectItem>
-                  </SelectContent>
-                </Select>
-              </Field>
-              <Field orientation="horizontal">
-                <FieldContent>
-                  <FieldLabel htmlFor="horizontal-volume">Volume</FieldLabel>
-                  <FieldDescription>Adjust audio level</FieldDescription>
-                </FieldContent>
-                <Slider id="horizontal-volume" defaultValue={[50]} max={100} />
-              </Field>
-              <Field orientation="horizontal">
-                <FieldContent>
-                  <FieldLabel htmlFor="horizontal-auto-save">
-                    Auto Save
-                  </FieldLabel>
-                  <FieldDescription>
-                    Automatically save changes
-                  </FieldDescription>
-                </FieldContent>
-                <Switch id="horizontal-auto-save" defaultChecked />
-              </Field>
-            </FieldGroup>
-          </FieldSet>
-
-          <FieldSeparator />
-
-          <FieldSet>
-            <FieldLegend>Responsive Orientation</FieldLegend>
-            <FieldDescription>
-              Vertical on mobile, horizontal on desktop - the best of both
-              worlds
-            </FieldDescription>
-            <FieldGroup>
-              <Field orientation="responsive">
-                <FieldContent>
-                  <FieldLabel htmlFor="responsive-username">
-                    Username
-                  </FieldLabel>
-                  <FieldDescription>Choose a unique username</FieldDescription>
-                </FieldContent>
-                <Input id="responsive-username" placeholder="username" />
-              </Field>
-              <Field orientation="responsive">
-                <FieldContent>
-                  <FieldLabel htmlFor="responsive-language">
-                    Language
-                  </FieldLabel>
-                  <FieldDescription>
-                    Select your preferred language
-                  </FieldDescription>
-                </FieldContent>
-                <Select>
-                  <SelectTrigger id="responsive-language">
-                    <SelectValue placeholder="Select language" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="en">English</SelectItem>
-                    <SelectItem value="es">Spanish</SelectItem>
-                    <SelectItem value="fr">French</SelectItem>
-                    <SelectItem value="de">German</SelectItem>
-                  </SelectContent>
-                </Select>
-              </Field>
-              <Field orientation="responsive">
-                <FieldContent>
-                  <FieldLabel htmlFor="responsive-brightness">
-                    Brightness
-                  </FieldLabel>
-                  <FieldDescription>Adjust screen brightness</FieldDescription>
-                </FieldContent>
-                <Slider
-                  id="responsive-brightness"
-                  defaultValue={[75]}
-                  max={100}
-                />
-              </Field>
-              <Field orientation="responsive">
-                <FieldContent>
-                  <FieldLabel htmlFor="responsive-location">
-                    Location Services
-                  </FieldLabel>
-                  <FieldDescription>
-                    Allow apps to access your location
-                  </FieldDescription>
-                </FieldContent>
-                <Switch id="responsive-location" />
-              </Field>
-              <Field orientation="responsive">
-                <Checkbox id="responsive-checkbox" />
-                <FieldLabel
-                  htmlFor="responsive-checkbox"
-                  className="font-normal"
-                >
-                  I agree to the terms and conditions
-                </FieldLabel>
-              </Field>
-            </FieldGroup>
-          </FieldSet>
-        </FieldGroup>
-      </CardContent>
-    </Card>
-  )
-}
-
-function CheckoutForm() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Checkout</CardTitle>
-        <CardDescription>
-          Complete your order by filling in the details below
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <form>
-          <FieldGroup>
-            <FieldSet>
-              <FieldLegend>Shipping Information</FieldLegend>
-              <FieldDescription>
-                Enter your shipping address where we&apos;ll deliver your order
-              </FieldDescription>
-              <FieldGroup>
-                <div className="grid grid-cols-2 gap-4">
-                  <Field>
-                    <FieldLabel htmlFor="checkout-7j9-first-name-dso">
-                      First Name
-                    </FieldLabel>
-                    <Input
-                      id="checkout-7j9-first-name-dso"
-                      placeholder="John"
-                      required
-                    />
-                  </Field>
-                  <Field>
-                    <FieldLabel htmlFor="checkout-7j9-last-name-qmb">
-                      Last Name
-                    </FieldLabel>
-                    <Input
-                      id="checkout-7j9-last-name-qmb"
-                      placeholder="Doe"
-                      required
-                    />
-                  </Field>
-                </div>
-                <Field>
-                  <FieldLabel htmlFor="checkout-7j9-email-t33">
-                    Email
-                  </FieldLabel>
-                  <Input
-                    id="checkout-7j9-email-t33"
-                    type="email"
-                    placeholder="john.doe@example.com"
-                    required
-                  />
-                  <FieldDescription>
-                    We&apos;ll send your receipt to this email
-                  </FieldDescription>
-                </Field>
-                <Field>
-                  <FieldLabel htmlFor="checkout-7j9-address-zgo">
-                    Street Address
-                  </FieldLabel>
-                  <Input
-                    id="checkout-7j9-address-zgo"
-                    placeholder="123 Main Street"
-                    required
-                  />
-                </Field>
-                <Field>
-                  <FieldLabel htmlFor="checkout-7j9-address2-d4t">
-                    Apartment, suite, etc. (optional)
-                  </FieldLabel>
-                  <Input
-                    id="checkout-7j9-address2-d4t"
-                    placeholder="Apartment 4B"
-                  />
-                </Field>
-                <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
-                  <Field className="sm:col-span-2">
-                    <FieldLabel htmlFor="checkout-7j9-city-poj">
-                      City
-                    </FieldLabel>
-                    <Input
-                      id="checkout-7j9-city-poj"
-                      placeholder="New York"
-                      required
-                    />
-                  </Field>
-                  <Field>
-                    <FieldLabel htmlFor="checkout-7j9-state-psg">
-                      State
-                    </FieldLabel>
-                    <Select defaultValue="">
-                      <SelectTrigger id="checkout-7j9-state-psg">
-                        <SelectValue placeholder="Select" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="ca">CA</SelectItem>
-                        <SelectItem value="ny">NY</SelectItem>
-                        <SelectItem value="tx">TX</SelectItem>
-                        <SelectItem value="fl">FL</SelectItem>
-                        <SelectItem value="wa">WA</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </Field>
-                  <Field>
-                    <FieldLabel htmlFor="checkout-7j9-zip">ZIP Code</FieldLabel>
-                    <Input id="checkout-7j9-zip" placeholder="10001" required />
-                  </Field>
-                </div>
-                <div className="grid grid-cols-4 gap-4">
-                  <Field>
-                    <FieldLabel htmlFor="checkout-7j9-country-code-fl7">
-                      Code
-                    </FieldLabel>
-                    <Select defaultValue="us">
-                      <SelectTrigger id="checkout-7j9-country-code-fl7">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="us">+1</SelectItem>
-                        <SelectItem value="uk">+44</SelectItem>
-                        <SelectItem value="ca">+1</SelectItem>
-                        <SelectItem value="au">+61</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </Field>
-                  <Field className="col-span-3">
-                    <FieldLabel htmlFor="checkout-7j9-phone-g63">
-                      Phone Number
-                    </FieldLabel>
-                    <Input
-                      id="checkout-7j9-phone-g63"
-                      type="tel"
-                      placeholder="(555) 123-4567"
-                      required
-                    />
-                  </Field>
-                </div>
-              </FieldGroup>
-            </FieldSet>
-            <FieldSeparator />
-            <FieldSet>
-              <FieldLegend>Payment Method</FieldLegend>
-              <FieldDescription>
-                All transactions are secure and encrypted
-              </FieldDescription>
-              <FieldGroup>
-                <Field>
-                  <FieldLabel htmlFor="checkout-7j9-card-name-43j">
-                    Name on Card
-                  </FieldLabel>
-                  <Input
-                    id="checkout-7j9-card-name-43j"
-                    placeholder="John Doe"
-                    required
-                  />
-                </Field>
-                <Field>
-                  <FieldLabel htmlFor="checkout-7j9-card-number-uw1">
-                    Card Number
-                  </FieldLabel>
-                  <Input
-                    id="checkout-7j9-card-number-uw1"
-                    placeholder="1234 5678 9012 3456"
-                    required
-                  />
-                  <FieldDescription>
-                    Enter your 16-digit card number
-                  </FieldDescription>
-                </Field>
-                <div className="grid grid-cols-3 gap-4">
-                  <Field>
-                    <FieldLabel htmlFor="checkout-7j9-exp-month-ts6">
-                      Month
-                    </FieldLabel>
-                    <Select defaultValue="">
-                      <SelectTrigger id="checkout-7j9-exp-month-ts6">
-                        <SelectValue placeholder="MM" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="01">01</SelectItem>
-                        <SelectItem value="02">02</SelectItem>
-                        <SelectItem value="03">03</SelectItem>
-                        <SelectItem value="04">04</SelectItem>
-                        <SelectItem value="05">05</SelectItem>
-                        <SelectItem value="06">06</SelectItem>
-                        <SelectItem value="07">07</SelectItem>
-                        <SelectItem value="08">08</SelectItem>
-                        <SelectItem value="09">09</SelectItem>
-                        <SelectItem value="10">10</SelectItem>
-                        <SelectItem value="11">11</SelectItem>
-                        <SelectItem value="12">12</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </Field>
-                  <Field>
-                    <FieldLabel htmlFor="checkout-7j9-exp-year-f59">
-                      Year
-                    </FieldLabel>
-                    <Select defaultValue="">
-                      <SelectTrigger id="checkout-7j9-exp-year-f59">
-                        <SelectValue placeholder="YYYY" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="2024">2024</SelectItem>
-                        <SelectItem value="2025">2025</SelectItem>
-                        <SelectItem value="2026">2026</SelectItem>
-                        <SelectItem value="2027">2027</SelectItem>
-                        <SelectItem value="2028">2028</SelectItem>
-                        <SelectItem value="2029">2029</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </Field>
-                  <Field>
-                    <FieldLabel htmlFor="checkout-7j9-cvv">CVV</FieldLabel>
-                    <Input id="checkout-7j9-cvv" placeholder="123" required />
-                  </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="checkout-7j9-same-as-shipping-wgm"
-                    defaultChecked
-                  />
-                  <FieldLabel
-                    htmlFor="checkout-7j9-same-as-shipping-wgm"
-                    className="font-normal"
-                  >
-                    Same as shipping address
-                  </FieldLabel>
-                </Field>
-              </FieldGroup>
-            </FieldSet>
-            <FieldSeparator />
-            <FieldSet>
-              <FieldLegend>Additional Options</FieldLegend>
-              <FieldDescription>
-                Choose how you&apos;d like us to stay in touch
-              </FieldDescription>
-              <FieldGroup className="gap-3">
-                <Field orientation="horizontal">
-                  <Checkbox id="checkout-7j9-save-info-zdo" />
-                  <FieldLabel
-                    htmlFor="checkout-7j9-save-info-zdo"
-                    className="font-normal"
-                  >
-                    Save my information for faster checkout next time
-                  </FieldLabel>
-                </Field>
-                <Field orientation="horizontal">
-                  <Checkbox id="checkout-7j9-newsletter-6yv" />
-                  <FieldLabel
-                    htmlFor="checkout-7j9-newsletter-6yv"
-                    className="font-normal"
-                  >
-                    Email me with news and offers
-                  </FieldLabel>
-                </Field>
-              </FieldGroup>
-            </FieldSet>
-            <Field>
-              <Button type="submit" className="flex-1">
-                Complete Order
-              </Button>
-              <Button variant="outline" className="flex-1">
-                Return to Cart
-              </Button>
-            </Field>
-          </FieldGroup>
-        </form>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/form-demo.tsx b/apps/v4/app/(internal)/sink/components/form-demo.tsx
deleted file mode 100644
index 98b12029ae..0000000000
--- a/apps/v4/app/(internal)/sink/components/form-demo.tsx
+++ /dev/null
@@ -1,399 +0,0 @@
-"use client"
-
-import { zodResolver } from "@hookform/resolvers/zod"
-import { format } from "date-fns"
-import { CalendarIcon } from "lucide-react"
-import { useForm } from "react-hook-form"
-import { toast } from "sonner"
-import { z } from "zod"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/registry/new-york-v4/ui/button"
-import { Calendar } from "@/registry/new-york-v4/ui/calendar"
-import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/registry/new-york-v4/ui/form"
-import { Input } from "@/registry/new-york-v4/ui/input"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/new-york-v4/ui/popover"
-import {
-  RadioGroup,
-  RadioGroupItem,
-} from "@/registry/new-york-v4/ui/radio-group"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york-v4/ui/select"
-import { Switch } from "@/registry/new-york-v4/ui/switch"
-import { Textarea } from "@/registry/new-york-v4/ui/textarea"
-
-const items = [
-  {
-    id: "recents",
-    label: "Recents",
-  },
-  {
-    id: "home",
-    label: "Home",
-  },
-  {
-    id: "applications",
-    label: "Applications",
-  },
-  {
-    id: "desktop",
-    label: "Desktop",
-  },
-  {
-    id: "downloads",
-    label: "Downloads",
-  },
-  {
-    id: "documents",
-    label: "Documents",
-  },
-] as const
-
-const FormSchema = z.object({
-  username: z.string().min(2, {
-    message: "Username must be at least 2 characters.",
-  }),
-  bio: z
-    .string()
-    .min(10, {
-      message: "Bio must be at least 10 characters.",
-    })
-    .max(160, {
-      message: "Bio must not be longer than 30 characters.",
-    }),
-  email: z
-    .string({
-      required_error: "Please select an email to display.",
-    })
-    .email(),
-  type: z.enum(["all", "mentions", "none"], {
-    required_error: "You need to select a notification type.",
-  }),
-  mobile: z.boolean().default(false).optional(),
-  items: z.array(z.string()).refine((value) => value.some((item) => item), {
-    message: "You have to select at least one item.",
-  }),
-  dob: z.date({
-    required_error: "A date of birth is required.",
-  }),
-  marketing_emails: z.boolean().default(false).optional(),
-  security_emails: z.boolean(),
-})
-
-export function FormDemo() {
-  const form = useForm<z.infer<typeof FormSchema>>({
-    resolver: zodResolver(FormSchema),
-    defaultValues: {
-      username: "",
-      items: ["recents", "home"],
-    },
-  })
-
-  function onSubmit(data: z.infer<typeof FormSchema>) {
-    toast("You submitted the following values:", {
-      description: (
-        <pre className="mt-2 w-[320px] rounded-md bg-neutral-950 p-4">
-          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-        </pre>
-      ),
-    })
-  }
-
-  return (
-    <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit(onSubmit)}
-        className="grid w-full max-w-sm gap-6"
-      >
-        <FormField
-          control={form.control}
-          name="username"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Username</FormLabel>
-              <FormControl>
-                <Input placeholder="shadcn" {...field} />
-              </FormControl>
-              <FormDescription>
-                This is your public display name.
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="email"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Email</FormLabel>
-              <Select onValueChange={field.onChange} defaultValue={field.value}>
-                <FormControl>
-                  <SelectTrigger>
-                    <SelectValue placeholder="Select a verified email to display" />
-                  </SelectTrigger>
-                </FormControl>
-                <SelectContent>
-                  <SelectItem value="m@example.com">m@example.com</SelectItem>
-                  <SelectItem value="m@google.com">m@google.com</SelectItem>
-                  <SelectItem value="m@support.com">m@support.com</SelectItem>
-                </SelectContent>
-              </Select>
-              <FormDescription>
-                You can manage email addresses in your email settings.
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="bio"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Bio</FormLabel>
-              <FormControl>
-                <Textarea
-                  placeholder="Tell us a little bit about yourself"
-                  className="resize-none"
-                  {...field}
-                />
-              </FormControl>
-              <FormDescription>
-                You can <span>@mention</span> other users and organizations.
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="type"
-          render={({ field }) => (
-            <FormItem className="flex flex-col gap-3">
-              <FormLabel>Notify me about...</FormLabel>
-              <FormControl>
-                <RadioGroup
-                  onValueChange={field.onChange}
-                  defaultValue={field.value}
-                  className="flex flex-col gap-3"
-                >
-                  <FormItem className="flex items-center gap-2">
-                    <FormControl>
-                      <RadioGroupItem value="all" />
-                    </FormControl>
-                    <FormLabel className="font-normal">
-                      All new messages
-                    </FormLabel>
-                  </FormItem>
-                  <FormItem className="flex items-center gap-2">
-                    <FormControl>
-                      <RadioGroupItem value="mentions" />
-                    </FormControl>
-                    <FormLabel className="font-normal">
-                      Direct messages and mentions
-                    </FormLabel>
-                  </FormItem>
-                  <FormItem className="flex items-center gap-2">
-                    <FormControl>
-                      <RadioGroupItem value="none" />
-                    </FormControl>
-                    <FormLabel className="font-normal">Nothing</FormLabel>
-                  </FormItem>
-                </RadioGroup>
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="mobile"
-          render={({ field }) => (
-            <FormItem className="flex flex-row items-start gap-3 rounded-md border p-4 shadow-xs">
-              <FormControl>
-                <Checkbox
-                  checked={field.value}
-                  onCheckedChange={field.onChange}
-                />
-              </FormControl>
-              <div className="flex flex-col gap-1">
-                <FormLabel className="leading-snug">
-                  Use different settings for my mobile devices
-                </FormLabel>
-                <FormDescription className="leading-snug">
-                  You can manage your mobile notifications in the mobile
-                  settings page.
-                </FormDescription>
-              </div>
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="items"
-          render={() => (
-            <FormItem className="flex flex-col gap-4">
-              <div>
-                <FormLabel className="text-base">Sidebar</FormLabel>
-                <FormDescription>
-                  Select the items you want to display in the sidebar.
-                </FormDescription>
-              </div>
-              <div className="flex flex-col gap-2">
-                {items.map((item) => (
-                  <FormField
-                    key={item.id}
-                    control={form.control}
-                    name="items"
-                    render={({ field }) => {
-                      return (
-                        <FormItem
-                          key={item.id}
-                          className="flex items-start gap-3"
-                        >
-                          <FormControl>
-                            <Checkbox
-                              checked={field.value?.includes(item.id)}
-                              onCheckedChange={(checked) => {
-                                return checked
-                                  ? field.onChange([...field.value, item.id])
-                                  : field.onChange(
-                                      field.value?.filter(
-                                        (value) => value !== item.id
-                                      )
-                                    )
-                              }}
-                            />
-                          </FormControl>
-                          <FormLabel className="text-sm leading-tight font-normal">
-                            {item.label}
-                          </FormLabel>
-                        </FormItem>
-                      )
-                    }}
-                  />
-                ))}
-              </div>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="dob"
-          render={({ field }) => (
-            <FormItem className="flex flex-col">
-              <FormLabel>Date of birth</FormLabel>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <FormControl>
-                    <Button
-                      variant={"outline"}
-                      className={cn(
-                        "w-[240px] pl-3 text-left font-normal",
-                        !field.value && "text-muted-foreground"
-                      )}
-                    >
-                      {field.value ? (
-                        format(field.value, "PPP")
-                      ) : (
-                        <span>Pick a date</span>
-                      )}
-                      <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-                    </Button>
-                  </FormControl>
-                </PopoverTrigger>
-                <PopoverContent className="w-auto p-0" align="start">
-                  <Calendar
-                    mode="single"
-                    selected={field.value}
-                    onSelect={field.onChange}
-                    disabled={(date: Date) =>
-                      date > new Date() || date < new Date("1900-01-01")
-                    }
-                    initialFocus
-                  />
-                </PopoverContent>
-              </Popover>
-              <FormDescription>
-                Your date of birth is used to calculate your age.
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <div>
-          <h3 className="mb-4 text-lg font-medium">Email Notifications</h3>
-          <div className="flex flex-col gap-4">
-            <FormField
-              control={form.control}
-              name="marketing_emails"
-              render={({ field }) => (
-                <FormItem className="flex flex-row items-start justify-between rounded-lg border p-4 shadow-xs">
-                  <div className="flex flex-col gap-0.5">
-                    <FormLabel className="leading-normal">
-                      Marketing emails
-                    </FormLabel>
-                    <FormDescription className="leading-snug">
-                      Receive emails about new products, features, and more.
-                    </FormDescription>
-                  </div>
-                  <FormControl>
-                    <Switch
-                      checked={field.value}
-                      onCheckedChange={field.onChange}
-                    />
-                  </FormControl>
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name="security_emails"
-              render={({ field }) => (
-                <FormItem className="flex flex-row items-start justify-between rounded-lg border p-4 shadow-xs">
-                  <div className="flex flex-col gap-0.5 opacity-60">
-                    <FormLabel className="leading-normal">
-                      Security emails
-                    </FormLabel>
-                    <FormDescription className="leading-snug">
-                      Receive emails about your account security.
-                    </FormDescription>
-                  </div>
-                  <FormControl>
-                    <Switch
-                      checked={field.value}
-                      onCheckedChange={field.onChange}
-                      disabled
-                      aria-readonly
-                    />
-                  </FormControl>
-                </FormItem>
-              )}
-            />
-          </div>
-        </div>
-        <Button type="submit">Submit</Button>
-      </form>
-    </Form>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/hover-card-demo.tsx b/apps/v4/app/(internal)/sink/components/hover-card-demo.tsx
deleted file mode 100644
index 3ac291ceff..0000000000
--- a/apps/v4/app/(internal)/sink/components/hover-card-demo.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { CalendarIcon } from "lucide-react"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/new-york-v4/ui/avatar"
-import { Button } from "@/registry/new-york-v4/ui/button"
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from "@/registry/new-york-v4/ui/hover-card"
-
-export function HoverCardDemo() {
-  return (
-    <HoverCard>
-      <HoverCardTrigger asChild>
-        <Button variant="link">@nextjs</Button>
-      </HoverCardTrigger>
-      <HoverCardContent className="w-80" side="right">
-        <div className="flex justify-between gap-4">
-          <Avatar>
-            <AvatarImage src="https://github.com/vercel.png" />
-            <AvatarFallback>VC</AvatarFallback>
-          </Avatar>
-          <div className="flex flex-col gap-1">
-            <h4 className="text-sm font-semibold">@nextjs</h4>
-            <p className="text-sm">
-              The React Framework – created and maintained by @vercel.
-            </p>
-            <div className="mt-1 flex items-center gap-2">
-              <CalendarIcon className="size-4 text-muted-foreground" />{" "}
-              <span className="text-xs text-muted-foreground">
-                Joined December 2021
-              </span>
-            </div>
-          </div>
-        </div>
-      </HoverCardContent>
-    </HoverCard>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/input-demo.tsx b/apps/v4/app/(internal)/sink/components/input-demo.tsx
deleted file mode 100644
index bcd50a6264..0000000000
--- a/apps/v4/app/(internal)/sink/components/input-demo.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Input } from "@/registry/new-york-v4/ui/input"
-
-export function InputDemo() {
-  return (
-    <div className="flex flex-col flex-wrap gap-4 md:flex-row">
-      <Input type="email" placeholder="Email" />
-      <Input type="text" placeholder="Error" aria-invalid="true" />
-      <Input type="password" placeholder="Password" />
-      <Input type="number" placeholder="Number" />
-      <Input type="file" placeholder="File" />
-      <Input type="tel" placeholder="Tel" />
-      <Input type="text" placeholder="Text" />
-      <Input type="url" placeholder="URL" />
-      <Input type="search" placeholder="Search" />
-      <Input type="date" placeholder="Date" />
-      <Input type="datetime-local" placeholder="Datetime Local" />
-      <Input type="month" placeholder="Month" />
-      <Input type="time" placeholder="Time" />
-      <Input type="week" placeholder="Week" />
-      <Input disabled placeholder="Disabled" />
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/input-group-demo.tsx b/apps/v4/app/(internal)/sink/components/input-group-demo.tsx
deleted file mode 100644
index 1d6171d053..0000000000
--- a/apps/v4/app/(internal)/sink/components/input-group-demo.tsx
+++ /dev/null
@@ -1,663 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import {
-  IconBrandJavascript,
-  IconCheck,
-  IconChevronDown,
-  IconCopy,
-  IconInfoCircle,
-  IconLoader2,
-  IconMicrophone,
-  IconPlayerRecordFilled,
-  IconPlus,
-  IconRefresh,
-  IconSearch,
-  IconServerSpark,
-  IconStar,
-  IconTrash,
-} from "@tabler/icons-react"
-import {
-  ArrowRightIcon,
-  ArrowUpIcon,
-  ChevronDownIcon,
-  EyeClosedIcon,
-  FlipVerticalIcon,
-  SearchIcon,
-} from "lucide-react"
-import { toast } from "sonner"
-
-import { Button } from "@/registry/new-york-v4/ui/button"
-import {
-  ButtonGroup,
-  ButtonGroupText,
-} from "@/registry/new-york-v4/ui/button-group"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/registry/new-york-v4/ui/dropdown-menu"
-import {
-  Field,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-} from "@/registry/new-york-v4/ui/field"
-import { Input } from "@/registry/new-york-v4/ui/input"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-  InputGroupText,
-  InputGroupTextarea,
-} from "@/registry/new-york-v4/ui/input-group"
-import { Kbd, KbdGroup } from "@/registry/new-york-v4/ui/kbd"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/new-york-v4/ui/popover"
-import { Spinner } from "@/registry/new-york-v4/ui/spinner"
-import { Textarea } from "@/registry/new-york-v4/ui/textarea"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/new-york-v4/ui/tooltip"
-
-export function InputGroupDemo() {
-  const [country, setCountry] = useState("+1")
-
-  return (
-    <div className="flex w-full flex-wrap gap-12 pb-72 *:[div]:w-full *:[div]:max-w-sm">
-      <div className="flex flex-col gap-10">
-        <Field>
-          <FieldLabel htmlFor="input-default-01">
-            Default (No Input Group)
-          </FieldLabel>
-          <Input placeholder="Default" id="input-default-01" />
-        </Field>
-        <Field>
-          <FieldLabel htmlFor="input-group-02">Input Group</FieldLabel>
-          <InputGroup>
-            <InputGroupInput id="input-group-02" placeholder="Default" />
-          </InputGroup>
-        </Field>
-        <Field data-disabled="true">
-          <FieldLabel htmlFor="input-disabled-03">Disabled</FieldLabel>
-          <InputGroup>
-            <InputGroupInput
-              id="input-disabled-03"
-              placeholder="This field is disabled"
-              disabled
-            />
-          </InputGroup>
-        </Field>
-        <Field data-invalid="true">
-          <FieldLabel htmlFor="input-invalid-04">Invalid</FieldLabel>
-          <InputGroup>
-            <InputGroupInput
-              id="input-invalid-04"
-              placeholder="This field is invalid"
-              aria-invalid="true"
-            />
-          </InputGroup>
-        </Field>
-        <Field>
-          <FieldLabel htmlFor="input-icon-left-05">Icon (left)</FieldLabel>
-          <InputGroup>
-            <InputGroupInput id="input-icon-left-05" />
-            <InputGroupAddon>
-              <SearchIcon className="text-muted-foreground" />
-            </InputGroupAddon>
-          </InputGroup>
-          <InputGroup>
-            <InputGroupInput id="input-icon-left-06" />
-            <InputGroupAddon>
-              <FlipVerticalIcon className="text-muted-foreground" />
-            </InputGroupAddon>
-          </InputGroup>
-        </Field>
-        <Field>
-          <FieldLabel htmlFor="input-icon-right-07">Icon (right)</FieldLabel>
-          <InputGroup>
-            <InputGroupInput id="input-icon-right-07" />
-            <InputGroupAddon align="inline-end">
-              <EyeClosedIcon />
-            </InputGroupAddon>
-          </InputGroup>
-          <InputGroup>
-            <InputGroupInput id="input-icon-right-08" />
-            <InputGroupAddon align="inline-end">
-              <IconLoader2 className="animate-spin text-muted-foreground" />
-            </InputGroupAddon>
-          </InputGroup>
-        </Field>
-        <Field>
-          <FieldLabel htmlFor="input-icon-both-09">Icon (both)</FieldLabel>
-          <InputGroup>
-            <InputGroupInput id="input-icon-both-09" />
-            <InputGroupAddon>
-              <IconMicrophone className="text-muted-foreground" />
-            </InputGroupAddon>
-            <InputGroupAddon align="inline-end">
-              <IconPlayerRecordFilled className="animate-pulse text-red-500" />
-            </InputGroupAddon>
-          </InputGroup>
-        </Field>
-        <Field>
-          <FieldLabel htmlFor="input-icon-both-10">Multiple Icons</FieldLabel>
-          <InputGroup>
-            <InputGroupInput id="input-icon-both-10" />
-            <InputGroupAddon align="inline-end">
-              <IconStar />
-              <InputGroupButton
-                size="icon-xs"
-                onClick={() => toast.success("Copied to clipboard")}
-              >
-                <IconCopy />
-              </InputGroupButton>
-            </InputGroupAddon>
-            <InputGroupAddon>
-              <IconPlayerRecordFilled className="animate-pulse text-red-500" />
-            </InputGroupAddon>
-          </InputGroup>
-        </Field>
-        <Field>
-          <FieldLabel htmlFor="input-description-10">Description</FieldLabel>
-          <InputGroup>
-            <InputGroupInput id="input-description-10" />
-            <InputGroupAddon align="inline-end">
-              <IconInfoCircle />
-            </InputGroupAddon>
-          </InputGroup>
-          <FieldDescription>
-            This is a description of the input group.
-          </FieldDescription>
-        </Field>
-        <FieldGroup className="grid grid-cols-2 gap-4">
-          <Field>
-            <FieldLabel htmlFor="input-group-11">First Name</FieldLabel>
-            <InputGroup>
-              <InputGroupInput id="input-group-11" placeholder="First Name" />
-              <InputGroupAddon align="inline-end">
-                <IconInfoCircle />
-              </InputGroupAddon>
-            </InputGroup>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="input-group-12">Last Name</FieldLabel>
-            <InputGroup>
-              <InputGroupInput id="input-group-12" placeholder="Last Name" />
-              <InputGroupAddon align="inline-end">
-                <IconInfoCircle />
-              </InputGroupAddon>
-            </InputGroup>
-          </Field>
-        </FieldGroup>
-      </div>
-      <div className="flex flex-col gap-10">
-        <Field>
-          <FieldLabel htmlFor="input-tooltip-20">Tooltip</FieldLabel>
-          <InputGroup>
-            <InputGroupInput id="input-tooltip-20" />
-            <InputGroupAddon align="inline-end">
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <InputGroupButton className="rounded-full" size="icon-xs">
-                    <IconInfoCircle />
-                  </InputGroupButton>
-                </TooltipTrigger>
-                <TooltipContent>This is content in a tooltip.</TooltipContent>
-              </Tooltip>
-            </InputGroupAddon>
-          </InputGroup>
-        </Field>
-        <Field>
-          <FieldLabel htmlFor="input-dropdown-21">Dropdown</FieldLabel>
-          <InputGroup>
-            <InputGroupInput id="input-dropdown-21" />
-            <InputGroupAddon>
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <InputGroupButton className="text-muted-foreground tabular-nums">
-                    {country} <ChevronDownIcon />
-                  </InputGroupButton>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent
-                  align="start"
-                  className="min-w-16"
-                  sideOffset={10}
-                  alignOffset={-8}
-                >
-                  <DropdownMenuItem onClick={() => setCountry("+1")}>
-                    +1
-                  </DropdownMenuItem>
-                  <DropdownMenuItem onClick={() => setCountry("+44")}>
-                    +44
-                  </DropdownMenuItem>
-                  <DropdownMenuItem onClick={() => setCountry("+46")}>
-                    +46
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </InputGroupAddon>
-          </InputGroup>
-        </Field>
-        <Field>
-          <FieldLabel htmlFor="input-label-10">Label</FieldLabel>
-          <InputGroup>
-            <InputGroupAddon>
-              <FieldLabel htmlFor="input-label-10">Label</FieldLabel>
-            </InputGroupAddon>
-            <InputGroupInput id="input-label-10" />
-          </InputGroup>
-          <InputGroup className="gap-0">
-            <InputGroupAddon>
-              <FieldLabel
-                htmlFor="input-prefix-11"
-                className="text-muted-foreground"
-              >
-                example.com/
-              </FieldLabel>
-            </InputGroupAddon>
-            <InputGroupInput id="input-prefix-11" />
-          </InputGroup>
-          <InputGroup>
-            <InputGroupInput id="input-optional-12" />
-            <InputGroupAddon align="inline-end">
-              <InputGroupText>(optional)</InputGroupText>
-            </InputGroupAddon>
-          </InputGroup>
-        </Field>
-        <Field>
-          <FieldLabel htmlFor="input-button-13">Button</FieldLabel>
-          <InputGroup>
-            <InputGroupInput id="input-button-13" />
-            <InputGroupAddon>
-              <InputGroupButton>Button</InputGroupButton>
-            </InputGroupAddon>
-          </InputGroup>
-          <InputGroup>
-            <InputGroupInput id="input-button-14" />
-            <InputGroupAddon>
-              <InputGroupButton variant="outline">Button</InputGroupButton>
-            </InputGroupAddon>
-          </InputGroup>
-          <InputGroup>
-            <InputGroupInput id="input-button-15" />
-            <InputGroupAddon>
-              <InputGroupButton variant="secondary">Button</InputGroupButton>
-            </InputGroupAddon>
-          </InputGroup>
-          <InputGroup>
-            <InputGroupInput id="input-button-16" />
-            <InputGroupAddon align="inline-end">
-              <InputGroupButton variant="secondary">Button</InputGroupButton>
-            </InputGroupAddon>
-          </InputGroup>
-          <InputGroup>
-            <InputGroupInput id="input-button-17" />
-            <InputGroupAddon align="inline-end">
-              <InputGroupButton size="icon-xs">
-                <IconCopy />
-              </InputGroupButton>
-            </InputGroupAddon>
-          </InputGroup>
-          <InputGroup>
-            <InputGroupInput id="input-button-18" />
-            <InputGroupAddon align="inline-end">
-              <InputGroupButton variant="secondary" size="icon-xs">
-                <IconTrash />
-              </InputGroupButton>
-            </InputGroupAddon>
-          </InputGroup>
-          <InputGroup className="[--radius:9999px]">
-            <Popover>
-              <PopoverTrigger asChild>
-                <InputGroupAddon>
-                  <InputGroupButton variant="secondary" size="icon-xs">
-                    <IconInfoCircle />
-                  </InputGroupButton>
-                </InputGroupAddon>
-              </PopoverTrigger>
-              <PopoverContent
-                align="start"
-                className="flex flex-col gap-1 rounded-xl text-sm"
-              >
-                <p className="font-medium">Your connection is not secure.</p>
-                <p>
-                  You should not enter any sensitive information on this site.
-                </p>
-              </PopoverContent>
-            </Popover>
-            <InputGroupAddon className="text-muted-foreground">
-              https://
-            </InputGroupAddon>
-            <InputGroupInput id="input-secure-19" />
-            <InputGroupAddon align="inline-end">
-              <InputGroupButton
-                size="icon-xs"
-                onClick={() => toast.success("Added to favorites")}
-              >
-                <IconStar />
-              </InputGroupButton>
-            </InputGroupAddon>
-          </InputGroup>
-        </Field>
-        <Field>
-          <FieldLabel htmlFor="input-addon-20">Addon (block-start)</FieldLabel>
-          <InputGroup className="h-auto">
-            <InputGroupInput id="input-addon-20" />
-            <InputGroupAddon align="block-start">
-              <InputGroupText>First Name</InputGroupText>
-              <IconInfoCircle className="ml-auto text-muted-foreground" />
-            </InputGroupAddon>
-          </InputGroup>
-        </Field>
-        <Field>
-          <FieldLabel htmlFor="input-addon-21">Addon (block-end)</FieldLabel>
-          <InputGroup className="h-auto">
-            <InputGroupInput id="input-addon-21" />
-            <InputGroupAddon align="block-end">
-              <InputGroupText>20/240 characters</InputGroupText>
-              <IconInfoCircle className="ml-auto text-muted-foreground" />
-            </InputGroupAddon>
-          </InputGroup>
-        </Field>
-        <Field>
-          <FieldLabel htmlFor="textarea-comment-33">Default Button</FieldLabel>
-          <InputGroup>
-            <InputGroupTextarea
-              id="textarea-comment-33"
-              placeholder="Share your thoughts..."
-              className="py-2.5"
-            />
-            <InputGroupAddon align="block-end">
-              <ButtonGroup>
-                <Button variant="outline" size="sm">
-                  Button
-                </Button>
-                <Button variant="outline" size="icon" className="size-8">
-                  <IconChevronDown />
-                </Button>
-              </ButtonGroup>
-              <Button variant="ghost" className="ml-auto" size="sm">
-                Cancel
-              </Button>
-              <Button variant="default" size="sm">
-                Post <ArrowRightIcon />
-              </Button>
-            </InputGroupAddon>
-          </InputGroup>
-        </Field>
-      </div>
-      <div className="flex flex-col gap-10">
-        <Field>
-          <FieldLabel htmlFor="input-kbd-22">Input Group with Kbd</FieldLabel>
-          <InputGroup>
-            <InputGroupInput id="input-kbd-22" />
-            <InputGroupAddon>
-              <Kbd>⌘K</Kbd>
-            </InputGroupAddon>
-          </InputGroup>
-          <InputGroup>
-            <InputGroupInput id="input-kbd-23" />
-            <InputGroupAddon align="inline-end">
-              <Kbd>⌘K</Kbd>
-            </InputGroupAddon>
-          </InputGroup>
-          <InputGroup>
-            <InputGroupInput
-              id="input-search-apps-24"
-              placeholder="Search for Apps..."
-            />
-            <InputGroupAddon align="inline-end">Ask AI</InputGroupAddon>
-            <InputGroupAddon align="inline-end">
-              <Kbd>Tab</Kbd>
-            </InputGroupAddon>
-          </InputGroup>
-          <InputGroup>
-            <InputGroupInput
-              id="input-search-type-25"
-              placeholder="Type to search..."
-            />
-            <InputGroupAddon align="inline-start">
-              <IconServerSpark />
-            </InputGroupAddon>
-            <InputGroupAddon align="inline-end">
-              <KbdGroup>
-                <Kbd>Ctrl</Kbd>
-                <Kbd>C</Kbd>
-              </KbdGroup>
-            </InputGroupAddon>
-          </InputGroup>
-        </Field>
-        <Field>
-          <FieldLabel htmlFor="input-username-26">Username</FieldLabel>
-          <InputGroup>
-            <InputGroupInput id="input-username-26" defaultValue="shadcn" />
-            <InputGroupAddon align="inline-end">
-              <div className="flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800">
-                <IconCheck className="size-3 text-white" />
-              </div>
-            </InputGroupAddon>
-          </InputGroup>
-          <FieldDescription className="text-green-700">
-            This username is available.
-          </FieldDescription>
-        </Field>
-        <InputGroup>
-          <InputGroupInput
-            id="input-search-docs-27"
-            placeholder="Search documentation..."
-          />
-          <InputGroupAddon>
-            <IconSearch />
-          </InputGroupAddon>
-          <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
-        </InputGroup>
-        <InputGroup data-disabled="true">
-          <InputGroupInput
-            id="input-search-disabled-28"
-            placeholder="Search documentation..."
-            disabled
-          />
-          <InputGroupAddon>
-            <IconSearch />
-          </InputGroupAddon>
-          <InputGroupAddon align="inline-end">Disabled</InputGroupAddon>
-        </InputGroup>
-        <Field>
-          <FieldLabel htmlFor="url">With Button Group</FieldLabel>
-          <ButtonGroup>
-            <ButtonGroupText>https://</ButtonGroupText>
-            <InputGroup>
-              <InputGroupInput id="url" />
-              <InputGroupAddon align="inline-end">
-                <IconInfoCircle />
-              </InputGroupAddon>
-            </InputGroup>
-            <ButtonGroupText>.com</ButtonGroupText>
-          </ButtonGroup>
-          <FieldDescription>
-            This is a description of the input group.
-          </FieldDescription>
-        </Field>
-        <Field data-disabled="true">
-          <FieldLabel htmlFor="input-group-29">Loading</FieldLabel>
-          <FieldDescription>
-            This is a description of the input group.
-          </FieldDescription>
-          <InputGroup>
-            <InputGroupInput
-              id="input-group-29"
-              disabled
-              defaultValue="shadcn"
-            />
-            <InputGroupAddon align="inline-end">
-              <Spinner />
-            </InputGroupAddon>
-          </InputGroup>
-        </Field>
-
-        <Field>
-          <FieldLabel htmlFor="textarea-code-32">Code Editor</FieldLabel>
-          <InputGroup>
-            <InputGroupTextarea
-              id="textarea-code-32"
-              placeholder="console.log('Hello, world!');"
-              className="min-h-[300px] py-3"
-            />
-            <InputGroupAddon align="block-start" className="border-b">
-              <InputGroupText className="font-mono font-medium">
-                <IconBrandJavascript />
-                script.js
-              </InputGroupText>
-              <InputGroupButton size="icon-xs" className="ml-auto">
-                <IconRefresh />
-              </InputGroupButton>
-              <InputGroupButton size="icon-xs" variant="ghost">
-                <IconCopy />
-              </InputGroupButton>
-            </InputGroupAddon>
-            <InputGroupAddon align="block-end" className="border-t">
-              <InputGroupText>Line 1, Column 1</InputGroupText>
-              <InputGroupText className="ml-auto">JavaScript</InputGroupText>
-            </InputGroupAddon>
-          </InputGroup>
-        </Field>
-      </div>
-      <div className="flex flex-col gap-10">
-        <Field>
-          <FieldLabel htmlFor="textarea-header-footer-12">Default</FieldLabel>
-          <Textarea
-            id="textarea-header-footer-12"
-            placeholder="Enter your text here..."
-          />
-        </Field>
-        <Field>
-          <FieldLabel htmlFor="textarea-header-footer-13">
-            Input Group
-          </FieldLabel>
-          <InputGroup>
-            <InputGroupTextarea
-              id="textarea-header-footer-13"
-              placeholder="Enter your text here..."
-            />
-          </InputGroup>
-          <FieldDescription>
-            This is a description of the input group.
-          </FieldDescription>
-        </Field>
-        <Field data-invalid="true">
-          <FieldLabel htmlFor="textarea-header-footer-14">Invalid</FieldLabel>
-          <InputGroup>
-            <InputGroupTextarea
-              id="textarea-header-footer-14"
-              placeholder="Enter your text here..."
-              aria-invalid="true"
-            />
-          </InputGroup>
-          <FieldDescription>
-            This is a description of the input group.
-          </FieldDescription>
-        </Field>
-        <Field data-disabled="true">
-          <FieldLabel htmlFor="textarea-header-footer-15">Disabled</FieldLabel>
-          <InputGroup>
-            <InputGroupTextarea
-              id="textarea-header-footer-15"
-              placeholder="Enter your text here..."
-              disabled
-            />
-          </InputGroup>
-          <FieldDescription>
-            This is a description of the input group.
-          </FieldDescription>
-        </Field>
-        <Field>
-          <FieldLabel htmlFor="textarea-header-footer-30">Textarea</FieldLabel>
-          <InputGroup>
-            <InputGroupTextarea
-              id="textarea-header-footer-30"
-              placeholder="Enter your text here..."
-            />
-            <InputGroupAddon align="block-end">
-              <InputGroupText>0/280 characters</InputGroupText>
-              <InputGroupButton
-                variant="default"
-                size="icon-xs"
-                className="ml-auto rounded-full"
-              >
-                <ArrowUpIcon />
-                <span className="sr-only">Send</span>
-              </InputGroupButton>
-            </InputGroupAddon>
-          </InputGroup>
-        </Field>
-        <Field>
-          <FieldLabel htmlFor="prompt-31">Enter your prompt</FieldLabel>
-          <InputGroup>
-            <InputGroupTextarea
-              id="prompt-31"
-              placeholder="Ask, Search or Chat..."
-            />
-            <InputGroupAddon align="block-end">
-              <InputGroupButton
-                variant="outline"
-                className="rounded-full"
-                size="icon-xs"
-              >
-                <IconPlus />
-              </InputGroupButton>
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <InputGroupButton variant="ghost">Auto</InputGroupButton>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent side="top" align="start">
-                  <DropdownMenuItem>Auto</DropdownMenuItem>
-                  <DropdownMenuItem>Agent</DropdownMenuItem>
-                  <DropdownMenuItem>Manual</DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-              <InputGroupText className="ml-auto">
-                12 messages left
-              </InputGroupText>
-              <InputGroupButton
-                variant="default"
-                className="rounded-full"
-                size="icon-xs"
-              >
-                <ArrowUpIcon />
-                <span className="sr-only">Send</span>
-              </InputGroupButton>
-            </InputGroupAddon>
-          </InputGroup>
-          <FieldDescription>
-            This is a description of the input group.
-          </FieldDescription>
-        </Field>
-        <Field>
-          <FieldLabel htmlFor="textarea-comment-31">Comment Box</FieldLabel>
-          <InputGroup>
-            <InputGroupTextarea
-              id="textarea-comment-31"
-              placeholder="Share your thoughts..."
-            />
-            <InputGroupAddon align="block-end">
-              <InputGroupButton variant="ghost" className="ml-auto" size="sm">
-                Cancel
-              </InputGroupButton>
-              <InputGroupButton variant="default" size="sm">
-                Post Comment
-              </InputGroupButton>
-            </InputGroupAddon>
-          </InputGroup>
-        </Field>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/input-otp-demo.tsx b/apps/v4/app/(internal)/sink/components/input-otp-demo.tsx
deleted file mode 100644
index 81da12719b..0000000000
--- a/apps/v4/app/(internal)/sink/components/input-otp-demo.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { REGEXP_ONLY_DIGITS } from "input-otp"
-
-import {
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSeparator,
-  InputOTPSlot,
-} from "@/registry/new-york-v4/ui/input-otp"
-import { Label } from "@/registry/new-york-v4/ui/label"
-
-export function InputOTPDemo() {
-  return (
-    <div className="flex flex-col flex-wrap gap-6 md:flex-row">
-      <InputOTPSimple />
-      <InputOTPPattern />
-      <InputOTPWithSeparator />
-      <InputOTPWithSpacing />
-    </div>
-  )
-}
-
-function InputOTPSimple() {
-  return (
-    <div className="grid gap-2">
-      <Label htmlFor="simple">Simple</Label>
-      <InputOTP id="simple" maxLength={6}>
-        <InputOTPGroup>
-          <InputOTPSlot index={0} />
-          <InputOTPSlot index={1} />
-          <InputOTPSlot index={2} />
-        </InputOTPGroup>
-        <InputOTPSeparator />
-        <InputOTPGroup>
-          <InputOTPSlot index={3} />
-          <InputOTPSlot index={4} />
-          <InputOTPSlot index={5} />
-        </InputOTPGroup>
-      </InputOTP>
-    </div>
-  )
-}
-
-function InputOTPPattern() {
-  return (
-    <div className="grid gap-2">
-      <Label htmlFor="digits-only">Digits Only</Label>
-      <InputOTP id="digits-only" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>
-        <InputOTPGroup>
-          <InputOTPSlot index={0} />
-          <InputOTPSlot index={1} />
-          <InputOTPSlot index={2} />
-          <InputOTPSlot index={3} />
-          <InputOTPSlot index={4} />
-          <InputOTPSlot index={5} />
-        </InputOTPGroup>
-      </InputOTP>
-    </div>
-  )
-}
-
-function InputOTPWithSeparator() {
-  const [value, setValue] = React.useState("123456")
-
-  return (
-    <div className="grid gap-2">
-      <Label htmlFor="with-separator">With Separator</Label>
-      <InputOTP
-        id="with-separator"
-        maxLength={6}
-        value={value}
-        onChange={setValue}
-      >
-        <InputOTPGroup>
-          <InputOTPSlot index={0} />
-          <InputOTPSlot index={1} />
-        </InputOTPGroup>
-        <InputOTPSeparator />
-        <InputOTPGroup>
-          <InputOTPSlot index={2} />
-          <InputOTPSlot index={3} />
-        </InputOTPGroup>
-        <InputOTPSeparator />
-        <InputOTPGroup>
-          <InputOTPSlot index={4} />
-          <InputOTPSlot index={5} />
-        </InputOTPGroup>
-      </InputOTP>
-    </div>
-  )
-}
-
-function InputOTPWithSpacing() {
-  return (
-    <div className="grid gap-2">
-      <Label htmlFor="with-spacing">With Spacing</Label>
-      <InputOTP id="with-spacing" maxLength={6}>
-        <InputOTPGroup className="gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border">
-          <InputOTPSlot index={0} aria-invalid="true" />
-          <InputOTPSlot index={1} aria-invalid="true" />
-          <InputOTPSlot index={2} aria-invalid="true" />
-          <InputOTPSlot index={3} aria-invalid="true" />
-        </InputOTPGroup>
-      </InputOTP>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/item-demo.tsx b/apps/v4/app/(internal)/sink/components/item-demo.tsx
deleted file mode 100644
index 6aa0169e79..0000000000
--- a/apps/v4/app/(internal)/sink/components/item-demo.tsx
+++ /dev/null
@@ -1,392 +0,0 @@
-import * as React from "react"
-import Image from "next/image"
-import { IconChevronRight, IconDownload } from "@tabler/icons-react"
-import { PlusIcon, TicketIcon } from "lucide-react"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/new-york-v4/ui/avatar"
-import { Button } from "@/registry/new-york-v4/ui/button"
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldLabel,
-  FieldTitle,
-} from "@/registry/new-york-v4/ui/field"
-import {
-  Item,
-  ItemActions,
-  ItemContent,
-  ItemDescription,
-  ItemFooter,
-  ItemGroup,
-  ItemHeader,
-  ItemMedia,
-  ItemSeparator,
-  ItemTitle,
-} from "@/registry/new-york-v4/ui/item"
-import { Progress } from "@/registry/new-york-v4/ui/progress"
-import { Spinner } from "@/registry/new-york-v4/ui/spinner"
-
-const people = [
-  {
-    username: "shadcn",
-    avatar: "https://github.com/shadcn.png",
-    message: "Just shipped a component that fixes itself",
-  },
-  {
-    username: "pranathip",
-    avatar: "https://github.com/pranathip.png",
-    message: "My code is so clean, it does its own laundry",
-  },
-  {
-    username: "evilrabbit",
-    avatar: "https://github.com/evilrabbit.png",
-    message:
-      "Debugging is like being a detective in a crime movie where you're also the murderer",
-  },
-  {
-    username: "maxleiter",
-    avatar: "https://github.com/maxleiter.png",
-    message:
-      "I don't always test my code, but when I do, I test it in production",
-  },
-]
-
-const music = [
-  {
-    title: "Midnight City Lights",
-    artist: "Neon Dreams",
-    album: "Electric Nights",
-    duration: "3:45",
-  },
-  {
-    title: "Coffee Shop Conversations",
-    artist: "The Morning Brew",
-    album: "Urban Stories",
-    duration: "4:05",
-  },
-  {
-    title: "Digital Rain",
-    artist: "Cyber Symphony",
-    album: "Binary Beats",
-    duration: "3:30",
-  },
-  {
-    title: "Sunset Boulevard",
-    artist: "Golden Hour",
-    album: "California Dreams",
-    duration: "3:55",
-  },
-  {
-    title: "Neon Sign Romance",
-    artist: "Retro Wave",
-    album: "80s Forever",
-    duration: "4:10",
-  },
-  {
-    title: "Ocean Depths",
-    artist: "Deep Blue",
-    album: "Underwater Symphony",
-    duration: "3:40",
-  },
-  {
-    title: "Space Station Alpha",
-    artist: "Cosmic Explorers",
-    album: "Galactic Journey",
-    duration: "3:50",
-  },
-  {
-    title: "Forest Whispers",
-    artist: "Nature's Choir",
-    album: "Woodland Tales",
-    duration: "3:35",
-  },
-]
-
-const issues = [
-  {
-    number: 1247,
-    date: "March 15, 2024",
-    title:
-      "Button component doesn't respect disabled state when using custom variants",
-    description:
-      "When applying custom variants to the Button component, the disabled prop is ignored and the button remains clickable. This affects accessibility and user experience.",
-  },
-  {
-    number: 892,
-    date: "February 8, 2024",
-    title: "Dialog component causes scroll lock on mobile devices",
-    description:
-      "The Dialog component prevents scrolling on the background content but doesn't restore scroll position properly on mobile Safari and Chrome, causing layout shifts.",
-  },
-  {
-    number: 1156,
-    date: "January 22, 2024",
-    title: "TypeScript errors with Select component in strict mode",
-    description:
-      "Using the Select component with TypeScript strict mode enabled throws type errors related to generic constraints and value prop typing.",
-  },
-  {
-    number: 734,
-    date: "December 3, 2023",
-    title: "Dark mode toggle causes flash of unstyled content",
-    description:
-      "When switching between light and dark themes, there's a brief moment where components render with incorrect styling before the theme transition completes.",
-  },
-  {
-    number: 1389,
-    date: "April 2, 2024",
-    title: "Form validation messages overlap with floating labels",
-    description:
-      "Error messages in Form components with floating labels appear underneath the label text, making them difficult to read. Need better positioning logic for validation feedback.",
-  },
-]
-
-export function ItemDemo() {
-  return (
-    <div className="@container w-full">
-      <div className="flex flex-wrap gap-6 2xl:gap-12">
-        <div className="flex max-w-sm flex-col gap-6">
-          <Item>
-            <ItemContent>
-              <ItemTitle>Item Title</ItemTitle>
-            </ItemContent>
-            <ItemActions>
-              <Button variant="outline">Button</Button>
-            </ItemActions>
-          </Item>
-          <Item variant="outline">
-            <ItemContent>
-              <ItemTitle>Item Title</ItemTitle>
-            </ItemContent>
-            <ItemActions>
-              <Button variant="outline">Button</Button>
-            </ItemActions>
-          </Item>
-          <Item>
-            <ItemContent>
-              <ItemTitle>Item Title</ItemTitle>
-              <ItemDescription>Item Description</ItemDescription>
-            </ItemContent>
-            <ItemActions>
-              <Button variant="outline">Button</Button>
-            </ItemActions>
-          </Item>
-          <Item variant="outline">
-            <ItemContent>
-              <ItemTitle>Item Title</ItemTitle>
-              <ItemDescription>Item Description</ItemDescription>
-            </ItemContent>
-          </Item>
-          <Item variant="muted">
-            <ItemContent>
-              <ItemTitle>Item Title</ItemTitle>
-              <ItemDescription>Item Description</ItemDescription>
-            </ItemContent>
-          </Item>
-          <Item variant="muted">
-            <ItemContent>
-              <ItemTitle>Item Title</ItemTitle>
-              <ItemDescription>Item Description</ItemDescription>
-            </ItemContent>
-            <ItemActions>
-              <Button variant="outline">Button</Button>
-              <Button variant="outline">Button</Button>
-            </ItemActions>
-          </Item>
-          <Item variant="outline">
-            <ItemMedia variant="icon">
-              <TicketIcon />
-            </ItemMedia>
-            <ItemContent>
-              <ItemTitle>Item Title</ItemTitle>
-            </ItemContent>
-            <ItemActions>
-              <Button size="sm">Purchase</Button>
-            </ItemActions>
-          </Item>
-          <Item variant="muted">
-            <ItemMedia variant="icon">
-              <TicketIcon />
-            </ItemMedia>
-            <ItemContent>
-              <ItemTitle>Item Title</ItemTitle>
-              <ItemDescription>Item Description</ItemDescription>
-            </ItemContent>
-            <ItemActions>
-              <Button size="sm">Upgrade</Button>
-            </ItemActions>
-          </Item>
-          <FieldLabel>
-            <Field orientation="horizontal">
-              <FieldContent>
-                <FieldTitle>Field Title</FieldTitle>
-                <FieldDescription>Field Description</FieldDescription>
-              </FieldContent>
-              <Button variant="outline">Button</Button>
-            </Field>
-          </FieldLabel>
-        </div>
-        <div className="flex max-w-sm flex-col gap-6">
-          <ItemGroup>
-            {people.map((person, index) => (
-              <React.Fragment key={person.username}>
-                <Item>
-                  <ItemMedia>
-                    <Avatar>
-                      <AvatarImage src={person.avatar} />
-                      <AvatarFallback>
-                        {person.username.charAt(0)}
-                      </AvatarFallback>
-                    </Avatar>
-                  </ItemMedia>
-                  <ItemContent>
-                    <ItemTitle>{person.username}</ItemTitle>
-                    <ItemDescription>{person.message}</ItemDescription>
-                  </ItemContent>
-                  <ItemActions>
-                    <Button
-                      variant="outline"
-                      size="icon"
-                      className="size-8 rounded-full"
-                    >
-                      <PlusIcon />
-                    </Button>
-                  </ItemActions>
-                </Item>
-                {index !== people.length - 1 && <ItemSeparator />}
-              </React.Fragment>
-            ))}
-          </ItemGroup>
-          <Item variant="outline">
-            <ItemMedia>
-              <div className="flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale">
-                <Avatar>
-                  <AvatarImage
-                    src="https://github.com/shadcn.png"
-                    alt="@shadcn"
-                  />
-                  <AvatarFallback>CN</AvatarFallback>
-                </Avatar>
-                <Avatar>
-                  <AvatarImage
-                    src="https://github.com/maxleiter.png"
-                    alt="@maxleiter"
-                  />
-                  <AvatarFallback>LR</AvatarFallback>
-                </Avatar>
-                <Avatar>
-                  <AvatarImage
-                    src="https://github.com/evilrabbit.png"
-                    alt="@evilrabbit"
-                  />
-                  <AvatarFallback>ER</AvatarFallback>
-                </Avatar>
-              </div>
-            </ItemMedia>
-            <ItemContent>
-              <ItemTitle>Design Department</ItemTitle>
-              <ItemDescription>
-                Meet our team of designers, engineers, and researchers.
-              </ItemDescription>
-            </ItemContent>
-            <ItemActions className="self-start">
-              <Button
-                variant="outline"
-                size="icon"
-                className="size-8 rounded-full"
-              >
-                <IconChevronRight />
-              </Button>
-            </ItemActions>
-          </Item>
-          <Item variant="outline">
-            <ItemHeader>Your download has started.</ItemHeader>
-            <ItemMedia variant="icon">
-              <Spinner />
-            </ItemMedia>
-            <ItemContent>
-              <ItemTitle>Downloading...</ItemTitle>
-              <ItemDescription>129 MB / 1000 MB</ItemDescription>
-            </ItemContent>
-            <ItemActions>
-              <Button variant="outline" size="sm">
-                Cancel
-              </Button>
-            </ItemActions>
-            <ItemFooter>
-              <Progress value={50} />
-            </ItemFooter>
-          </Item>
-        </div>
-        <div className="flex max-w-lg flex-col gap-6">
-          <ItemGroup className="gap-4">
-            {music.map((song) => (
-              <Item key={song.title} variant="outline" asChild role="listitem">
-                <a href="#">
-                  <ItemMedia variant="image">
-                    <Image
-                      src={`https://avatar.vercel.sh/${song.title}`}
-                      alt={song.title}
-                      width={32}
-                      height={32}
-                      className="grayscale"
-                    />
-                  </ItemMedia>
-                  <ItemContent>
-                    <ItemTitle className="line-clamp-1">
-                      {song.title} -{" "}
-                      <span className="text-muted-foreground">
-                        {song.album}
-                      </span>
-                    </ItemTitle>
-                    <ItemDescription>{song.artist}</ItemDescription>
-                  </ItemContent>
-                  <ItemContent className="flex-none text-center">
-                    <ItemDescription>{song.duration}</ItemDescription>
-                  </ItemContent>
-                  <ItemActions>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="size-8 rounded-full"
-                      aria-label="Download"
-                    >
-                      <IconDownload />
-                    </Button>
-                  </ItemActions>
-                </a>
-              </Item>
-            ))}
-          </ItemGroup>
-        </div>
-        <div className="flex max-w-lg flex-col gap-6">
-          <ItemGroup>
-            {issues.map((issue) => (
-              <React.Fragment key={issue.number}>
-                <Item asChild className="rounded-none">
-                  <a href="#">
-                    <ItemContent>
-                      <ItemTitle className="line-clamp-1">
-                        {issue.title}
-                      </ItemTitle>
-                      <ItemDescription>{issue.description}</ItemDescription>
-                    </ItemContent>
-                    <ItemContent className="self-start">
-                      #{issue.number}
-                    </ItemContent>
-                  </a>
-                </Item>
-                <ItemSeparator />
-              </React.Fragment>
-            ))}
-          </ItemGroup>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/kbd-demo.tsx b/apps/v4/app/(internal)/sink/components/kbd-demo.tsx
deleted file mode 100644
index 9eaa8ba316..0000000000
--- a/apps/v4/app/(internal)/sink/components/kbd-demo.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { IconArrowLeft, IconArrowRight } from "@tabler/icons-react"
-import { CommandIcon, WavesIcon } from "lucide-react"
-
-import { Button } from "@/registry/new-york-v4/ui/button"
-import { ButtonGroup } from "@/registry/new-york-v4/ui/button-group"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
-} from "@/registry/new-york-v4/ui/input-group"
-import { Kbd, KbdGroup } from "@/registry/new-york-v4/ui/kbd"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/new-york-v4/ui/tooltip"
-
-export function KbdDemo() {
-  return (
-    <div className="flex max-w-xs flex-col items-start gap-4">
-      <div className="flex items-center gap-2">
-        <Kbd>Ctrl</Kbd>
-        <Kbd>⌘K</Kbd>
-        <Kbd>Ctrl + B</Kbd>
-      </div>
-      <div className="flex items-center gap-2">
-        <Kbd>⌘</Kbd>
-        <Kbd>C</Kbd>
-      </div>
-      <KbdGroup>
-        <Kbd>Ctrl</Kbd>
-        <Kbd>Shift</Kbd>
-        <Kbd>P</Kbd>
-      </KbdGroup>
-      <div className="flex items-center gap-2">
-        <Kbd>↑</Kbd>
-        <Kbd>↓</Kbd>
-        <Kbd>←</Kbd>
-        <Kbd>→</Kbd>
-      </div>
-      <KbdGroup>
-        <Kbd>
-          <CommandIcon />
-        </Kbd>
-        <Kbd>
-          <IconArrowLeft />
-        </Kbd>
-        <Kbd>
-          <IconArrowRight />
-        </Kbd>
-      </KbdGroup>
-      <KbdGroup>
-        <Kbd>
-          <IconArrowLeft />
-          Left
-        </Kbd>
-        <Kbd>
-          <WavesIcon />
-          Voice Enabled
-        </Kbd>
-      </KbdGroup>
-      <InputGroup>
-        <InputGroupInput />
-        <InputGroupAddon>
-          <Kbd>Space</Kbd>
-        </InputGroupAddon>
-      </InputGroup>
-      <ButtonGroup>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button size="sm" variant="outline">
-              Save
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>
-            <div className="flex items-center gap-2">
-              Save Changes <Kbd>S</Kbd>
-            </div>
-          </TooltipContent>
-        </Tooltip>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button size="sm" variant="outline">
-              Print
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>
-            <div className="flex items-center gap-2">
-              Print Document{" "}
-              <KbdGroup>
-                <Kbd>Ctrl</Kbd>
-                <Kbd>P</Kbd>
-              </KbdGroup>
-            </div>
-          </TooltipContent>
-        </Tooltip>
-      </ButtonGroup>
-      <Kbd>
-        <samp>File</samp>
-      </Kbd>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/label-demo.tsx b/apps/v4/app/(internal)/sink/components/label-demo.tsx
deleted file mode 100644
index d3ed8060fb..0000000000
--- a/apps/v4/app/(internal)/sink/components/label-demo.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
-import { Input } from "@/registry/new-york-v4/ui/input"
-import { Label } from "@/registry/new-york-v4/ui/label"
-import { Textarea } from "@/registry/new-york-v4/ui/textarea"
-
-export function LabelDemo() {
-  return (
-    <div className="grid w-full max-w-sm gap-6">
-      <div className="flex items-center gap-3">
-        <Checkbox id="label-demo-terms" />
-        <Label htmlFor="label-demo-terms">Accept terms and conditions</Label>
-      </div>
-      <div className="grid gap-3">
-        <Label htmlFor="label-demo-username">Username</Label>
-        <Input id="label-demo-username" placeholder="Username" />
-      </div>
-      <div className="group grid gap-3" data-disabled={true}>
-        <Label htmlFor="label-demo-disabled">Disabled</Label>
-        <Input id="label-demo-disabled" placeholder="Disabled" disabled />
-      </div>
-      <div className="grid gap-3">
-        <Label htmlFor="label-demo-message">Message</Label>
-        <Textarea id="label-demo-message" placeholder="Message" />
-      </div>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/menubar-demo.tsx b/apps/v4/app/(internal)/sink/components/menubar-demo.tsx
deleted file mode 100644
index 1ece3f98ca..0000000000
--- a/apps/v4/app/(internal)/sink/components/menubar-demo.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import { HelpCircleIcon, SettingsIcon, Trash2Icon } from "lucide-react"
-
-import {
-  Menubar,
-  MenubarCheckboxItem,
-  MenubarContent,
-  MenubarGroup,
-  MenubarItem,
-  MenubarMenu,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarSeparator,
-  MenubarShortcut,
-  MenubarSub,
-  MenubarSubContent,
-  MenubarSubTrigger,
-  MenubarTrigger,
-} from "@/registry/new-york-v4/ui/menubar"
-
-export function MenubarDemo() {
-  return (
-    <Menubar>
-      <MenubarMenu>
-        <MenubarTrigger>File</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>
-            New Tab <MenubarShortcut>⌘T</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem>
-            New Window <MenubarShortcut>⌘N</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem disabled>New Incognito Window</MenubarItem>
-          <MenubarSeparator />
-          <MenubarSub>
-            <MenubarSubTrigger>Share</MenubarSubTrigger>
-            <MenubarSubContent>
-              <MenubarItem>Email link</MenubarItem>
-              <MenubarItem>Messages</MenubarItem>
-              <MenubarItem>Notes</MenubarItem>
-            </MenubarSubContent>
-          </MenubarSub>
-          <MenubarSeparator />
-          <MenubarItem>
-            Print... <MenubarShortcut>⌘P</MenubarShortcut>
-          </MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-      <MenubarMenu>
-        <MenubarTrigger>Edit</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>
-            Undo <MenubarShortcut>⌘Z</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem>
-            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarSub>
-            <MenubarSubTrigger>Find</MenubarSubTrigger>
-            <MenubarSubContent>
-              <MenubarItem>Search the web</MenubarItem>
-              <MenubarSeparator />
-              <MenubarItem>Find...</MenubarItem>
-              <MenubarItem>Find Next</MenubarItem>
-              <MenubarItem>Find Previous</MenubarItem>
-            </MenubarSubContent>
-          </MenubarSub>
-          <MenubarSeparator />
-          <MenubarItem>Cut</MenubarItem>
-          <MenubarItem>Copy</MenubarItem>
-          <MenubarItem>Paste</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-      <MenubarMenu>
-        <MenubarTrigger>View</MenubarTrigger>
-        <MenubarContent>
-          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
-          <MenubarCheckboxItem checked>
-            Always Show Full URLs
-          </MenubarCheckboxItem>
-          <MenubarSeparator />
-          <MenubarItem inset>
-            Reload <MenubarShortcut>⌘R</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem disabled inset>
-            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem inset>Toggle Fullscreen</MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem inset>Hide Sidebar</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-      <MenubarMenu>
-        <MenubarTrigger>Profiles</MenubarTrigger>
-        <MenubarContent>
-          <MenubarRadioGroup value="benoit">
-            <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
-            <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
-            <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
-          </MenubarRadioGroup>
-          <MenubarSeparator />
-          <MenubarItem inset>Edit...</MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem inset>Add Profile...</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-      <MenubarMenu>
-        <MenubarTrigger>More</MenubarTrigger>
-        <MenubarContent>
-          <MenubarGroup>
-            <MenubarItem>
-              <SettingsIcon />
-              Settings
-            </MenubarItem>
-            <MenubarItem>
-              <HelpCircleIcon />
-              Help
-            </MenubarItem>
-            <MenubarSeparator />
-            <MenubarItem variant="destructive">
-              <Trash2Icon />
-              Delete
-            </MenubarItem>
-          </MenubarGroup>
-        </MenubarContent>
-      </MenubarMenu>
-    </Menubar>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/native-select-demo.tsx b/apps/v4/app/(internal)/sink/components/native-select-demo.tsx
deleted file mode 100644
index 9f26a80635..0000000000
--- a/apps/v4/app/(internal)/sink/components/native-select-demo.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import {
-  NativeSelect,
-  NativeSelectOptGroup,
-  NativeSelectOption,
-} from "@/registry/new-york-v4/ui/native-select"
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york-v4/ui/select"
-
-export function NativeSelectDemo() {
-  return (
-    <div className="flex flex-col gap-8">
-      <div className="flex flex-col gap-3">
-        <div className="text-sm font-medium text-muted-foreground">
-          Basic Select
-        </div>
-        <div className="flex flex-col gap-4">
-          <NativeSelect>
-            <NativeSelectOption value="">Select a fruit</NativeSelectOption>
-            <NativeSelectOption value="apple">Apple</NativeSelectOption>
-            <NativeSelectOption value="banana">Banana</NativeSelectOption>
-            <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
-            <NativeSelectOption value="grapes" disabled>
-              Grapes
-            </NativeSelectOption>
-            <NativeSelectOption value="pineapple">Pineapple</NativeSelectOption>
-          </NativeSelect>
-          <Select>
-            <SelectTrigger>
-              <SelectValue placeholder="Select a fruit" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="apple">Apple</SelectItem>
-              <SelectItem value="banana">Banana</SelectItem>
-              <SelectItem value="blueberry">Blueberry</SelectItem>
-              <SelectItem value="grapes" disabled>
-                Grapes
-              </SelectItem>
-              <SelectItem value="pineapple">Pineapple</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-      <div className="flex flex-col gap-3">
-        <div className="text-sm font-medium text-muted-foreground">
-          With Groups
-        </div>
-        <div className="flex flex-col gap-4">
-          <NativeSelect>
-            <NativeSelectOption value="">Select a food</NativeSelectOption>
-            <NativeSelectOptGroup label="Fruits">
-              <NativeSelectOption value="apple">Apple</NativeSelectOption>
-              <NativeSelectOption value="banana">Banana</NativeSelectOption>
-              <NativeSelectOption value="blueberry">
-                Blueberry
-              </NativeSelectOption>
-            </NativeSelectOptGroup>
-            <NativeSelectOptGroup label="Vegetables">
-              <NativeSelectOption value="carrot">Carrot</NativeSelectOption>
-              <NativeSelectOption value="broccoli">Broccoli</NativeSelectOption>
-              <NativeSelectOption value="spinach">Spinach</NativeSelectOption>
-            </NativeSelectOptGroup>
-          </NativeSelect>
-          <Select>
-            <SelectTrigger>
-              <SelectValue placeholder="Select a food" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectGroup>
-                <SelectLabel>Fruits</SelectLabel>
-                <SelectItem value="apple">Apple</SelectItem>
-                <SelectItem value="banana">Banana</SelectItem>
-                <SelectItem value="blueberry">Blueberry</SelectItem>
-              </SelectGroup>
-              <SelectGroup>
-                <SelectLabel>Vegetables</SelectLabel>
-                <SelectItem value="carrot">Carrot</SelectItem>
-                <SelectItem value="broccoli">Broccoli</SelectItem>
-                <SelectItem value="spinach">Spinach</SelectItem>
-              </SelectGroup>
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-      <div className="flex flex-col gap-3">
-        <div className="text-sm font-medium text-muted-foreground">
-          Disabled State
-        </div>
-        <div className="flex flex-col gap-4">
-          <NativeSelect disabled>
-            <NativeSelectOption value="">Disabled</NativeSelectOption>
-            <NativeSelectOption value="apple">Apple</NativeSelectOption>
-            <NativeSelectOption value="banana">Banana</NativeSelectOption>
-          </NativeSelect>
-          <Select disabled>
-            <SelectTrigger>
-              <SelectValue placeholder="Disabled" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="apple">Apple</SelectItem>
-              <SelectItem value="banana">Banana</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-      <div className="flex flex-col gap-3">
-        <div className="text-sm font-medium text-muted-foreground">
-          Error State
-        </div>
-        <div className="flex flex-col gap-4">
-          <NativeSelect aria-invalid="true">
-            <NativeSelectOption value="">Error state</NativeSelectOption>
-            <NativeSelectOption value="apple">Apple</NativeSelectOption>
-            <NativeSelectOption value="banana">Banana</NativeSelectOption>
-          </NativeSelect>
-          <Select>
-            <SelectTrigger aria-invalid="true">
-              <SelectValue placeholder="Error state" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="apple">Apple</SelectItem>
-              <SelectItem value="banana">Banana</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/navigation-menu-demo.tsx b/apps/v4/app/(internal)/sink/components/navigation-menu-demo.tsx
deleted file mode 100644
index 6e47c943b9..0000000000
--- a/apps/v4/app/(internal)/sink/components/navigation-menu-demo.tsx
+++ /dev/null
@@ -1,227 +0,0 @@
-import * as React from "react"
-import Link from "next/link"
-import { CircleCheckIcon, CircleHelpIcon, CircleIcon } from "lucide-react"
-
-import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  navigationMenuTriggerStyle,
-} from "@/registry/new-york-v4/ui/navigation-menu"
-
-const components: { title: string; href: string; description: string }[] = [
-  {
-    title: "Alert Dialog",
-    href: "/docs/primitives/alert-dialog",
-    description:
-      "A modal dialog that interrupts the user with important content and expects a response.",
-  },
-  {
-    title: "Hover Card",
-    href: "/docs/primitives/hover-card",
-    description:
-      "For sighted users to preview content available behind a link.",
-  },
-  {
-    title: "Progress",
-    href: "/docs/primitives/progress",
-    description:
-      "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
-  },
-  {
-    title: "Scroll-area",
-    href: "/docs/primitives/scroll-area",
-    description: "Visually or semantically separates content.",
-  },
-  {
-    title: "Tabs",
-    href: "/docs/primitives/tabs",
-    description:
-      "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
-  },
-  {
-    title: "Tooltip",
-    href: "/docs/primitives/tooltip",
-    description:
-      "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
-  },
-]
-
-export function NavigationMenuDemo() {
-  return (
-    <div className="hidden w-full flex-col items-center justify-center gap-6 @xl:flex">
-      <NavigationMenu>
-        <NavigationMenuList>
-          <NavigationMenuItem>
-            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
-            <NavigationMenuContent>
-              <ul className="grid gap-2 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
-                <li className="row-span-3">
-                  <NavigationMenuLink asChild>
-                    <a
-                      className="flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b from-muted/50 to-muted p-6 no-underline outline-hidden select-none focus:shadow-md"
-                      href="/"
-                    >
-                      <div className="mt-4 mb-2 text-lg font-medium">
-                        shadcn/ui
-                      </div>
-                      <p className="text-sm leading-tight text-muted-foreground">
-                        Beautifully designed components built with Tailwind CSS.
-                      </p>
-                    </a>
-                  </NavigationMenuLink>
-                </li>
-                <ListItem href="/docs" title="Introduction">
-                  Re-usable components built using Radix UI and Tailwind CSS.
-                </ListItem>
-                <ListItem href="/docs/installation" title="Installation">
-                  How to install dependencies and structure your app.
-                </ListItem>
-                <ListItem href="/docs/primitives/typography" title="Typography">
-                  Styles for headings, paragraphs, lists...etc
-                </ListItem>
-              </ul>
-            </NavigationMenuContent>
-          </NavigationMenuItem>
-          <NavigationMenuItem>
-            <NavigationMenuTrigger>Components</NavigationMenuTrigger>
-            <NavigationMenuContent>
-              <ul className="grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
-                {components.map((component) => (
-                  <ListItem
-                    key={component.title}
-                    title={component.title}
-                    href={component.href}
-                  >
-                    {component.description}
-                  </ListItem>
-                ))}
-              </ul>
-            </NavigationMenuContent>
-          </NavigationMenuItem>
-          <NavigationMenuItem>
-            <NavigationMenuLink
-              asChild
-              className={navigationMenuTriggerStyle()}
-            >
-              <Link href="/docs">Documentation</Link>
-            </NavigationMenuLink>
-          </NavigationMenuItem>
-        </NavigationMenuList>
-      </NavigationMenu>
-      <NavigationMenu viewport={false}>
-        <NavigationMenuList>
-          <NavigationMenuItem>
-            <NavigationMenuLink
-              asChild
-              className={navigationMenuTriggerStyle()}
-            >
-              <Link href="/docs">Documentation</Link>
-            </NavigationMenuLink>
-          </NavigationMenuItem>
-          <NavigationMenuItem>
-            <NavigationMenuTrigger>List</NavigationMenuTrigger>
-            <NavigationMenuContent>
-              <ul className="grid w-[300px] gap-4">
-                <li>
-                  <NavigationMenuLink asChild>
-                    <Link href="#">
-                      <div className="font-medium">Components</div>
-                      <div className="text-muted-foreground">
-                        Browse all components in the library.
-                      </div>
-                    </Link>
-                  </NavigationMenuLink>
-                  <NavigationMenuLink asChild>
-                    <Link href="#">
-                      <div className="font-medium">Documentation</div>
-                      <div className="text-muted-foreground">
-                        Learn how to use the library.
-                      </div>
-                    </Link>
-                  </NavigationMenuLink>
-                  <NavigationMenuLink asChild>
-                    <Link href="#">
-                      <div className="font-medium">Blog</div>
-                      <div className="text-muted-foreground">
-                        Read our latest blog posts.
-                      </div>
-                    </Link>
-                  </NavigationMenuLink>
-                </li>
-              </ul>
-            </NavigationMenuContent>
-          </NavigationMenuItem>
-          <NavigationMenuItem>
-            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>
-            <NavigationMenuContent>
-              <ul className="grid w-[200px] gap-4">
-                <li>
-                  <NavigationMenuLink asChild>
-                    <Link href="#">Components</Link>
-                  </NavigationMenuLink>
-                  <NavigationMenuLink asChild>
-                    <Link href="#">Documentation</Link>
-                  </NavigationMenuLink>
-                  <NavigationMenuLink asChild>
-                    <Link href="#">Blocks</Link>
-                  </NavigationMenuLink>
-                </li>
-              </ul>
-            </NavigationMenuContent>
-          </NavigationMenuItem>
-          <NavigationMenuItem>
-            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>
-            <NavigationMenuContent>
-              <ul className="grid w-[200px] gap-4">
-                <li>
-                  <NavigationMenuLink asChild>
-                    <Link href="#" className="flex-row items-center gap-2">
-                      <CircleHelpIcon />
-                      Backlog
-                    </Link>
-                  </NavigationMenuLink>
-                  <NavigationMenuLink asChild>
-                    <Link href="#" className="flex-row items-center gap-2">
-                      <CircleIcon />
-                      To Do
-                    </Link>
-                  </NavigationMenuLink>
-                  <NavigationMenuLink asChild>
-                    <Link href="#" className="flex-row items-center gap-2">
-                      <CircleCheckIcon />
-                      Done
-                    </Link>
-                  </NavigationMenuLink>
-                </li>
-              </ul>
-            </NavigationMenuContent>
-          </NavigationMenuItem>
-        </NavigationMenuList>
-      </NavigationMenu>
-    </div>
-  )
-}
-
-function ListItem({
-  title,
-  children,
-  href,
-  ...props
-}: React.ComponentPropsWithoutRef<"li"> & { href: string }) {
-  return (
-    <li {...props}>
-      <NavigationMenuLink asChild>
-        <Link href={href}>
-          <div className="text-sm leading-none font-medium">{title}</div>
-          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
-            {children}
-          </p>
-        </Link>
-      </NavigationMenuLink>
-    </li>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/pagination-demo.tsx b/apps/v4/app/(internal)/sink/components/pagination-demo.tsx
deleted file mode 100644
index 451eb8b278..0000000000
--- a/apps/v4/app/(internal)/sink/components/pagination-demo.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from "@/registry/new-york-v4/ui/pagination"
-
-export function PaginationDemo() {
-  return (
-    <div className="flex flex-col gap-6">
-      <Pagination>
-        <PaginationContent>
-          <PaginationItem>
-            <PaginationPrevious href="#" />
-          </PaginationItem>
-          <PaginationItem>
-            <PaginationLink href="#">1</PaginationLink>
-          </PaginationItem>
-          <PaginationItem>
-            <PaginationLink href="#" isActive>
-              2
-            </PaginationLink>
-          </PaginationItem>
-          <PaginationItem>
-            <PaginationLink href="#">3</PaginationLink>
-          </PaginationItem>
-          <PaginationItem>
-            <PaginationEllipsis />
-          </PaginationItem>
-          <PaginationItem>
-            <PaginationNext href="#" />
-          </PaginationItem>
-        </PaginationContent>
-      </Pagination>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/popover-demo.tsx b/apps/v4/app/(internal)/sink/components/popover-demo.tsx
deleted file mode 100644
index ef316de2d1..0000000000
--- a/apps/v4/app/(internal)/sink/components/popover-demo.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { Button } from "@/registry/new-york-v4/ui/button"
-import { Input } from "@/registry/new-york-v4/ui/input"
-import { Label } from "@/registry/new-york-v4/ui/label"
-import {
-  Popover,
-  PopoverContent,
-  PopoverDescription,
-  PopoverHeader,
-  PopoverTitle,
-  PopoverTrigger,
-} from "@/registry/new-york-v4/ui/popover"
-
-export function PopoverDemo() {
-  return (
-    <div className="flex gap-4">
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button variant="outline">Open popover</Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-80" align="start">
-          <div className="grid gap-4">
-            <PopoverHeader>
-              <PopoverTitle>Dimensions</PopoverTitle>
-              <PopoverDescription>
-                Set the dimensions for the layer.
-              </PopoverDescription>
-            </PopoverHeader>
-            <div className="grid gap-2">
-              <div className="grid grid-cols-3 items-center gap-4">
-                <Label htmlFor="width">Width</Label>
-                <Input
-                  id="width"
-                  defaultValue="100%"
-                  className="col-span-2 h-8"
-                />
-              </div>
-              <div className="grid grid-cols-3 items-center gap-4">
-                <Label htmlFor="maxWidth">Max. width</Label>
-                <Input
-                  id="maxWidth"
-                  defaultValue="300px"
-                  className="col-span-2 h-8"
-                />
-              </div>
-              <div className="grid grid-cols-3 items-center gap-4">
-                <Label htmlFor="height">Height</Label>
-                <Input
-                  id="height"
-                  defaultValue="25px"
-                  className="col-span-2 h-8"
-                />
-              </div>
-              <div className="grid grid-cols-3 items-center gap-4">
-                <Label htmlFor="maxHeight">Max. height</Label>
-                <Input
-                  id="maxHeight"
-                  defaultValue="none"
-                  className="col-span-2 h-8"
-                />
-              </div>
-            </div>
-          </div>
-        </PopoverContent>
-      </Popover>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/progress-demo.tsx b/apps/v4/app/(internal)/sink/components/progress-demo.tsx
deleted file mode 100644
index ee94673b9b..0000000000
--- a/apps/v4/app/(internal)/sink/components/progress-demo.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-import { Progress } from "@/registry/new-york-v4/ui/progress"
-
-export function ProgressDemo() {
-  const [progress, setProgress] = React.useState(13)
-
-  React.useEffect(() => {
-    const timer = setTimeout(() => setProgress(66), 500)
-    return () => clearTimeout(timer)
-  }, [])
-
-  return <Progress value={progress} className="w-[60%]" />
-}
diff --git a/apps/v4/app/(internal)/sink/components/radio-group-demo.tsx b/apps/v4/app/(internal)/sink/components/radio-group-demo.tsx
deleted file mode 100644
index f15fc0c1d7..0000000000
--- a/apps/v4/app/(internal)/sink/components/radio-group-demo.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { Label } from "@/registry/new-york-v4/ui/label"
-import {
-  RadioGroup,
-  RadioGroupItem,
-} from "@/registry/new-york-v4/ui/radio-group"
-
-const plans = [
-  {
-    id: "starter",
-    name: "Starter Plan",
-    description:
-      "Perfect for small businesses getting started with our platform",
-    price: "$10",
-  },
-  {
-    id: "pro",
-    name: "Pro Plan",
-    description: "Advanced features for growing businesses with higher demands",
-    price: "$20",
-  },
-] as const
-
-export function RadioGroupDemo() {
-  return (
-    <div className="flex flex-col gap-6">
-      <RadioGroup defaultValue="comfortable">
-        <div className="flex items-center gap-3">
-          <RadioGroupItem value="default" id="r1" />
-          <Label htmlFor="r1">Default</Label>
-        </div>
-        <div className="flex items-center gap-3">
-          <RadioGroupItem value="comfortable" id="r2" />
-          <Label htmlFor="r2">Comfortable</Label>
-        </div>
-        <div className="flex items-center gap-3">
-          <RadioGroupItem value="compact" id="r3" />
-          <Label htmlFor="r3">Compact</Label>
-        </div>
-      </RadioGroup>
-      <RadioGroup defaultValue="starter" className="max-w-sm">
-        {plans.map((plan) => (
-          <Label
-            className="flex items-start gap-3 rounded-lg border p-4 hover:bg-accent/50 has-[[data-state=checked]]:border-green-600 has-[[data-state=checked]]:bg-green-50 dark:has-[[data-state=checked]]:border-green-900 dark:has-[[data-state=checked]]:bg-green-950"
-            key={plan.id}
-          >
-            <RadioGroupItem
-              value={plan.id}
-              id={plan.name}
-              className="shadow-none data-[state=checked]:border-green-600 data-[state=checked]:bg-green-600 *:data-[slot=radio-group-indicator]:[&>svg]:fill-white *:data-[slot=radio-group-indicator]:[&>svg]:stroke-white"
-            />
-            <div className="grid gap-1 font-normal">
-              <div className="font-medium">{plan.name}</div>
-              <div className="leading-snug text-muted-foreground">
-                {plan.description}
-              </div>
-            </div>
-          </Label>
-        ))}
-      </RadioGroup>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/resizable-demo.tsx b/apps/v4/app/(internal)/sink/components/resizable-demo.tsx
deleted file mode 100644
index 2ce698b783..0000000000
--- a/apps/v4/app/(internal)/sink/components/resizable-demo.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from "@/registry/new-york-v4/ui/resizable"
-
-export function ResizableDemo() {
-  return (
-    <div className="flex w-full flex-col gap-6">
-      <ResizablePanelGroup
-        orientation="horizontal"
-        className="max-w-md rounded-lg border md:min-w-[450px]"
-      >
-        <ResizablePanel defaultSize="50%">
-          <div className="flex h-[200px] items-center justify-center p-6">
-            <span className="font-semibold">One</span>
-          </div>
-        </ResizablePanel>
-        <ResizableHandle />
-        <ResizablePanel defaultSize="50%">
-          <ResizablePanelGroup orientation="vertical">
-            <ResizablePanel defaultSize="25%">
-              <div className="flex h-full items-center justify-center p-6">
-                <span className="font-semibold">Two</span>
-              </div>
-            </ResizablePanel>
-            <ResizableHandle />
-            <ResizablePanel defaultSize="75%">
-              <div className="flex h-full items-center justify-center p-6">
-                <span className="font-semibold">Three</span>
-              </div>
-            </ResizablePanel>
-          </ResizablePanelGroup>
-        </ResizablePanel>
-      </ResizablePanelGroup>
-      <ResizablePanelGroup
-        orientation="horizontal"
-        className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
-      >
-        <ResizablePanel defaultSize="25%">
-          <div className="flex h-full items-center justify-center p-6">
-            <span className="font-semibold">Sidebar</span>
-          </div>
-        </ResizablePanel>
-        <ResizableHandle withHandle />
-        <ResizablePanel defaultSize="75%">
-          <div className="flex h-full items-center justify-center p-6">
-            <span className="font-semibold">Content</span>
-          </div>
-        </ResizablePanel>
-      </ResizablePanelGroup>
-      <ResizablePanelGroup
-        orientation="vertical"
-        className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
-      >
-        <ResizablePanel defaultSize="25%">
-          <div className="flex h-full items-center justify-center p-6">
-            <span className="font-semibold">Header</span>
-          </div>
-        </ResizablePanel>
-        <ResizableHandle />
-        <ResizablePanel defaultSize="75%">
-          <div className="flex h-full items-center justify-center p-6">
-            <span className="font-semibold">Content</span>
-          </div>
-        </ResizablePanel>
-      </ResizablePanelGroup>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/scroll-area-demo.tsx b/apps/v4/app/(internal)/sink/components/scroll-area-demo.tsx
deleted file mode 100644
index 25db5ab70e..0000000000
--- a/apps/v4/app/(internal)/sink/components/scroll-area-demo.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import * as React from "react"
-import Image from "next/image"
-
-import { ScrollArea, ScrollBar } from "@/registry/new-york-v4/ui/scroll-area"
-import { Separator } from "@/registry/new-york-v4/ui/separator"
-
-export function ScrollAreaDemo() {
-  return (
-    <div className="flex flex-col gap-6">
-      <ScrollAreaVertical />
-      <ScrollAreaHorizontalDemo />
-    </div>
-  )
-}
-
-const tags = Array.from({ length: 50 }).map(
-  (_, i, a) => `v1.2.0-beta.${a.length - i}`
-)
-
-function ScrollAreaVertical() {
-  return (
-    <div className="flex flex-col gap-6">
-      <ScrollArea className="h-72 w-48 rounded-md border">
-        <div className="p-4">
-          <h4 className="mb-4 text-sm leading-none font-medium">Tags</h4>
-          {tags.map((tag) => (
-            <React.Fragment key={tag}>
-              <div className="text-sm">{tag}</div>
-              <Separator className="my-2" />
-            </React.Fragment>
-          ))}
-        </div>
-      </ScrollArea>
-    </div>
-  )
-}
-
-export const works = [
-  {
-    artist: "Ornella Binni",
-    art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80",
-  },
-  {
-    artist: "Tom Byrom",
-    art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80",
-  },
-  {
-    artist: "Vladimir Malyav",
-    art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80",
-  },
-] as const
-
-function ScrollAreaHorizontalDemo() {
-  return (
-    <ScrollArea className="w-full max-w-96 rounded-md border p-4">
-      <div className="flex gap-4">
-        {works.map((artwork) => (
-          <figure key={artwork.artist} className="shrink-0">
-            <div className="overflow-hidden rounded-md">
-              <Image
-                src={artwork.art}
-                alt={`Photo by ${artwork.artist}`}
-                className="aspect-[3/4] h-fit w-fit object-cover"
-                width={300}
-                height={400}
-              />
-            </div>
-            <figcaption className="pt-2 text-xs text-muted-foreground">
-              Photo by{" "}
-              <span className="font-semibold text-foreground">
-                {artwork.artist}
-              </span>
-            </figcaption>
-          </figure>
-        ))}
-      </div>
-      <ScrollBar orientation="horizontal" />
-    </ScrollArea>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/select-demo.tsx b/apps/v4/app/(internal)/sink/components/select-demo.tsx
deleted file mode 100644
index eb4a6a195d..0000000000
--- a/apps/v4/app/(internal)/sink/components/select-demo.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import * as React from "react"
-import {
-  ChartBarIcon,
-  ChartLineIcon,
-  ChartPieIcon,
-  CircleDashed,
-} from "lucide-react"
-
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york-v4/ui/select"
-
-export function SelectDemo() {
-  return (
-    <div className="flex flex-wrap items-start gap-4">
-      <Select>
-        <SelectTrigger className="w-[180px]">
-          <SelectValue placeholder="Select a fruit" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>Fruits</SelectLabel>
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</SelectItem>
-            <SelectItem value="blueberry">Blueberry</SelectItem>
-            <SelectItem value="grapes" disabled>
-              Grapes
-            </SelectItem>
-            <SelectItem value="pineapple">Pineapple</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-      <Select>
-        <SelectTrigger className="w-[180px]">
-          <SelectValue placeholder="Large List" />
-        </SelectTrigger>
-        <SelectContent>
-          {Array.from({ length: 100 }).map((_, i) => (
-            <SelectItem key={i} value={`item-${i}`}>
-              Item {i}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-      <Select disabled>
-        <SelectTrigger className="w-[180px]">
-          <SelectValue placeholder="Disabled" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="apple">Apple</SelectItem>
-          <SelectItem value="banana">Banana</SelectItem>
-          <SelectItem value="blueberry">Blueberry</SelectItem>
-          <SelectItem value="grapes" disabled>
-            Grapes
-          </SelectItem>
-          <SelectItem value="pineapple">Pineapple</SelectItem>
-        </SelectContent>
-      </Select>
-      <Select>
-        <SelectTrigger className="w-[180px]">
-          <SelectValue
-            placeholder={
-              <>
-                <CircleDashed className="text-muted-foreground" />
-                With Icon
-              </>
-            }
-          />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="line">
-            <ChartLineIcon />
-            Line
-          </SelectItem>
-          <SelectItem value="bar">
-            <ChartBarIcon />
-            Bar
-          </SelectItem>
-          <SelectItem value="pie">
-            <ChartPieIcon />
-            Pie
-          </SelectItem>
-        </SelectContent>
-      </Select>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/separator-demo.tsx b/apps/v4/app/(internal)/sink/components/separator-demo.tsx
deleted file mode 100644
index 9943453f12..0000000000
--- a/apps/v4/app/(internal)/sink/components/separator-demo.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Separator } from "@/registry/new-york-v4/ui/separator"
-
-export function SeparatorDemo() {
-  return (
-    <div>
-      <div className="flex flex-col gap-1">
-        <div className="text-sm leading-none font-medium">Tailwind CSS</div>
-        <div className="text-sm text-muted-foreground">
-          A utility-first CSS framework.
-        </div>
-      </div>
-      <Separator className="my-4" />
-      <div className="flex h-5 items-center gap-4 text-sm">
-        <div>Blog</div>
-        <Separator orientation="vertical" />
-        <div>Docs</div>
-        <Separator orientation="vertical" />
-        <div>Source</div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/sheet-demo.tsx b/apps/v4/app/(internal)/sink/components/sheet-demo.tsx
deleted file mode 100644
index 10eb5494a4..0000000000
--- a/apps/v4/app/(internal)/sink/components/sheet-demo.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import { Button } from "@/registry/new-york-v4/ui/button"
-import { Input } from "@/registry/new-york-v4/ui/input"
-import { Label } from "@/registry/new-york-v4/ui/label"
-import {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from "@/registry/new-york-v4/ui/sheet"
-
-const SHEET_SIDES = ["top", "right", "bottom", "left"] as const
-
-export function SheetDemo() {
-  return (
-    <div className="flex flex-col gap-6 md:flex-row">
-      <Sheet>
-        <SheetTrigger asChild>
-          <Button variant="outline">Open</Button>
-        </SheetTrigger>
-        <SheetContent>
-          <SheetHeader>
-            <SheetTitle>Edit profile</SheetTitle>
-            <SheetDescription>
-              Make changes to your profile here. Click save when you&apos;re
-              done.
-            </SheetDescription>
-          </SheetHeader>
-          <div className="grid flex-1 auto-rows-min gap-6 px-4">
-            <div className="grid gap-3">
-              <Label htmlFor="sheet-demo-name">Name</Label>
-              <Input id="sheet-demo-name" defaultValue="Pedro Duarte" />
-            </div>
-            <div className="grid gap-3">
-              <Label htmlFor="sheet-demo-username">Username</Label>
-              <Input id="sheet-demo-username" defaultValue="@peduarte" />
-            </div>
-          </div>
-          <SheetFooter>
-            <Button type="submit">Save changes</Button>
-            <SheetClose asChild>
-              <Button variant="outline">Close</Button>
-            </SheetClose>
-          </SheetFooter>
-        </SheetContent>
-      </Sheet>
-      <Sheet>
-        <SheetTrigger asChild>
-          <Button variant="outline">No Close Button</Button>
-        </SheetTrigger>
-        <SheetContent showCloseButton={false}>
-          <SheetHeader>
-            <SheetTitle>Custom Close</SheetTitle>
-            <SheetDescription>
-              This sheet has no default close button. Use the footer buttons
-              instead.
-            </SheetDescription>
-          </SheetHeader>
-          <div className="flex-1 px-4" />
-          <SheetFooter>
-            <SheetClose asChild>
-              <Button variant="outline">Cancel</Button>
-            </SheetClose>
-            <Button type="submit">Save</Button>
-          </SheetFooter>
-        </SheetContent>
-      </Sheet>
-      <div className="flex gap-2">
-        {SHEET_SIDES.map((side) => (
-          <Sheet key={side}>
-            <SheetTrigger asChild>
-              <Button variant="outline" className="capitalize">
-                {side}
-              </Button>
-            </SheetTrigger>
-            <SheetContent side={side}>
-              <SheetHeader>
-                <SheetTitle>Edit profile</SheetTitle>
-                <SheetDescription>
-                  Make changes to your profile here. Click save when you&apos;re
-                  done.
-                </SheetDescription>
-              </SheetHeader>
-              <div className="overflow-y-auto px-4 text-sm">
-                <h4 className="mb-4 text-lg leading-none font-medium">
-                  Lorem Ipsum
-                </h4>
-                {Array.from({ length: 10 }).map((_, index) => (
-                  <p key={index} className="mb-4 leading-normal">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
-                    do eiusmod tempor incididunt ut labore et dolore magna
-                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                    Duis aute irure dolor in reprehenderit in voluptate velit
-                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-                    occaecat cupidatat non proident, sunt in culpa qui officia
-                    deserunt mollit anim id est laborum.
-                  </p>
-                ))}
-              </div>
-              <SheetFooter>
-                <Button type="submit">Save changes</Button>
-                <SheetClose asChild>
-                  <Button variant="outline">Cancel</Button>
-                </SheetClose>
-              </SheetFooter>
-            </SheetContent>
-          </Sheet>
-        ))}
-      </div>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/skeleton-demo.tsx b/apps/v4/app/(internal)/sink/components/skeleton-demo.tsx
deleted file mode 100644
index 66a6b61997..0000000000
--- a/apps/v4/app/(internal)/sink/components/skeleton-demo.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Card, CardContent, CardHeader } from "@/registry/new-york-v4/ui/card"
-import { Skeleton } from "@/registry/new-york-v4/ui/skeleton"
-
-export function SkeletonDemo() {
-  return (
-    <div className="flex w-full flex-wrap items-start gap-4">
-      <div className="flex items-center gap-4">
-        <Skeleton className="size-10 shrink-0 rounded-full" />
-        <div className="grid gap-2">
-          <Skeleton className="h-4 w-[150px]" />
-          <Skeleton className="h-4 w-[100px]" />
-        </div>
-      </div>
-      <div className="flex w-full flex-wrap items-start gap-4">
-        {Array.from({ length: 3 }).map((_, index) => (
-          <Card key={index} className="w-full @md:w-auto @md:min-w-sm">
-            <CardHeader>
-              <Skeleton className="h-4 w-2/3" />
-              <Skeleton className="h-4 w-1/2" />
-            </CardHeader>
-            <CardContent>
-              <Skeleton className="aspect-square w-full" />
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/slider-demo.tsx b/apps/v4/app/(internal)/sink/components/slider-demo.tsx
deleted file mode 100644
index 0932dac158..0000000000
--- a/apps/v4/app/(internal)/sink/components/slider-demo.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-import { Label } from "@/registry/new-york-v4/ui/label"
-import { Slider } from "@/registry/new-york-v4/ui/slider"
-
-export function SliderDemo() {
-  return (
-    <div className="flex w-full max-w-sm flex-col flex-wrap gap-6 md:flex-row">
-      <Slider defaultValue={[50]} max={100} step={1} />
-      <Slider defaultValue={[25, 50]} max={100} step={1} />
-      <Slider defaultValue={[10, 20]} max={100} step={10} />
-      <div className="flex w-full items-center gap-6">
-        <Slider defaultValue={[50]} max={100} step={1} orientation="vertical" />
-        <Slider defaultValue={[25]} max={100} step={1} orientation="vertical" />
-      </div>
-      <SliderControlled />
-    </div>
-  )
-}
-
-function SliderControlled() {
-  const [value, setValue] = React.useState([0.3, 0.7])
-
-  return (
-    <div className="grid w-full gap-3">
-      <div className="flex items-center justify-between gap-2">
-        <Label htmlFor="slider-demo-temperature">Temperature</Label>
-        <span className="text-sm text-muted-foreground">
-          {value.join(", ")}
-        </span>
-      </div>
-      <Slider
-        id="slider-demo-temperature"
-        value={value}
-        onValueChange={setValue}
-        min={0}
-        max={1}
-        step={0.1}
-      />
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/sonner-demo.tsx b/apps/v4/app/(internal)/sink/components/sonner-demo.tsx
deleted file mode 100644
index eb2656bb70..0000000000
--- a/apps/v4/app/(internal)/sink/components/sonner-demo.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { toast } from "sonner"
-
-import { Button } from "@/registry/new-york-v4/ui/button"
-
-const promiseCode = "`${data.name} toast has been added`"
-
-const allTypes = [
-  {
-    name: "Default",
-    snippet: `toast('Event has been created')`,
-    action: () => toast("Event has been created"),
-  },
-  {
-    name: "Description",
-    snippet: `toast.message('Event has been created', {
-  description: 'Monday, January 3rd at 6:00pm',
-})`,
-    action: () =>
-      toast("Event has been created", {
-        description: "Monday, January 3rd at 6:00pm",
-      }),
-  },
-  {
-    name: "Success",
-    snippet: `toast.success('Event has been created')`,
-    action: () => toast.success("Event has been created"),
-  },
-  {
-    name: "Info",
-    snippet: `toast.info('Be at the area 10 minutes before the event time')`,
-    action: () => toast.info("Be at the area 10 minutes before the event time"),
-  },
-  {
-    name: "Warning",
-    snippet: `toast.warning('Event start time cannot be earlier than 8am')`,
-    action: () => toast.warning("Event start time cannot be earlier than 8am"),
-  },
-  {
-    name: "Error",
-    snippet: `toast.error('Event has not been created')`,
-    action: () => toast.error("Event has not been created"),
-  },
-  {
-    name: "Action",
-    action: () =>
-      toast.message("Event has been created", {
-        action: {
-          label: "Undo",
-          onClick: () => console.log("Undo"),
-        },
-      }),
-  },
-  {
-    name: "Cancel",
-    action: () =>
-      toast.message("Event has been created", {
-        cancel: {
-          label: "Cancel",
-          onClick: () => console.log("Cancel"),
-        },
-      }),
-  },
-  {
-    name: "Promise",
-    snippet: `const promise = () => new Promise((resolve) => setTimeout(() => resolve({ name: 'Sonner' }), 2000));
-
-toast.promise(promise, {
-  loading: 'Loading...',
-  success: (data) => {
-    return ${promiseCode};
-  },
-  error: 'Error',
-});`,
-    action: () =>
-      toast.promise<{ name: string }>(
-        () =>
-          new Promise((resolve) => {
-            setTimeout(() => {
-              resolve({ name: "Sonner" })
-            }, 2000)
-          }),
-        {
-          loading: "Loading...",
-          success: (data) => {
-            return `${data.name} toast has been added`
-          },
-          error: "Error",
-        }
-      ),
-  },
-]
-
-export function SonnerDemo() {
-  const [activeType, setActiveType] = React.useState(allTypes[0])
-  return (
-    <div className="flex flex-wrap gap-4">
-      <Button onClick={() => toast("My first toast")} variant="outline">
-        Give me a toast
-      </Button>
-      <Button
-        variant="outline"
-        onClick={() =>
-          toast("Event has been created", {
-            description: "Sunday, December 03, 2023 at 9:00 AM",
-            action: {
-              label: "Undo",
-              onClick: () => console.log("Undo"),
-            },
-          })
-        }
-      >
-        Show Toast
-      </Button>
-      {allTypes.map((type) => (
-        <Button
-          variant="ghost"
-          data-active={activeType.name === type.name}
-          onClick={() => {
-            type.action()
-            setActiveType(type)
-          }}
-          key={type.name}
-        >
-          {type.name}
-        </Button>
-      ))}
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/spinner-demo.tsx b/apps/v4/app/(internal)/sink/components/spinner-demo.tsx
deleted file mode 100644
index f59f3570a0..0000000000
--- a/apps/v4/app/(internal)/sink/components/spinner-demo.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { ArrowRightIcon } from "lucide-react"
-
-import { Badge } from "@/registry/new-york-v4/ui/badge"
-import { Button } from "@/registry/new-york-v4/ui/button"
-import {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-} from "@/registry/new-york-v4/ui/empty"
-import { Field, FieldLabel } from "@/registry/new-york-v4/ui/field"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
-} from "@/registry/new-york-v4/ui/input-group"
-import { Spinner } from "@/registry/new-york-v4/ui/spinner"
-
-export function SpinnerDemo() {
-  return (
-    <div className="flex w-full flex-col gap-12">
-      <div className="flex items-center gap-6">
-        <Spinner />
-        <Spinner className="size-8" />
-      </div>
-      <div className="flex items-center gap-6">
-        <Button>
-          <Spinner /> Submit
-        </Button>
-        <Button disabled>
-          <Spinner /> Disabled
-        </Button>
-        <Button size="sm">
-          <Spinner /> Small
-        </Button>
-        <Button variant="outline" disabled>
-          <Spinner /> Outline
-        </Button>
-        <Button variant="outline" size="icon" disabled>
-          <Spinner />
-          <span className="sr-only">Loading...</span>
-        </Button>
-        <Button variant="destructive" disabled>
-          <Spinner />
-          Remove
-        </Button>
-      </div>
-      <div className="flex items-center gap-6">
-        <Badge>
-          <Spinner />
-          Badge
-        </Badge>
-        <Badge variant="secondary">
-          <Spinner />
-          Badge
-        </Badge>
-        <Badge variant="destructive">
-          <Spinner />
-          Badge
-        </Badge>
-        <Badge variant="outline">
-          <Spinner />
-          Badge
-        </Badge>
-      </div>
-      <div className="flex max-w-xs items-center gap-6">
-        <Field>
-          <FieldLabel htmlFor="input-group-spinner">Input Group</FieldLabel>
-          <InputGroup>
-            <InputGroupInput id="input-group-spinner" />
-            <InputGroupAddon>
-              <Spinner />
-            </InputGroupAddon>
-          </InputGroup>
-        </Field>
-      </div>
-      <Empty className="min-h-[80svh]">
-        <EmptyHeader>
-          <EmptyMedia variant="icon">
-            <Spinner />
-          </EmptyMedia>
-          <EmptyTitle>No projects yet</EmptyTitle>
-          <EmptyDescription>
-            You haven&apos;t created any projects yet. Get started by creating
-            your first project.
-          </EmptyDescription>
-        </EmptyHeader>
-        <EmptyContent>
-          <div className="flex gap-2">
-            <Button asChild>
-              <a href="#">Create project</a>
-            </Button>
-            <Button variant="outline">Import project</Button>
-          </div>
-          <Button variant="link" asChild className="text-muted-foreground">
-            <a href="#">
-              Learn more <ArrowRightIcon />
-            </a>
-          </Button>
-        </EmptyContent>
-      </Empty>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/switch-demo.tsx b/apps/v4/app/(internal)/sink/components/switch-demo.tsx
deleted file mode 100644
index 80413f9660..0000000000
--- a/apps/v4/app/(internal)/sink/components/switch-demo.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Label } from "@/registry/new-york-v4/ui/label"
-import { Switch } from "@/registry/new-york-v4/ui/switch"
-
-export function SwitchDemo() {
-  return (
-    <div className="flex flex-col gap-6">
-      {/* Sizes. */}
-      <div className="flex items-center gap-4">
-        <div className="flex items-center gap-2">
-          <Switch id="switch-demo-sm" size="sm" />
-          <Label htmlFor="switch-demo-sm">Small</Label>
-        </div>
-        <div className="flex items-center gap-2">
-          <Switch id="switch-demo-default" />
-          <Label htmlFor="switch-demo-default">Default</Label>
-        </div>
-      </div>
-      <div className="flex items-center gap-2">
-        <Switch id="switch-demo-airplane-mode" />
-        <Label htmlFor="switch-demo-airplane-mode">Airplane Mode</Label>
-      </div>
-      <div className="flex items-center gap-2">
-        <Switch
-          id="switch-demo-bluetooth"
-          className="data-[state=checked]:bg-blue-500 dark:data-[state=checked]:bg-blue-600"
-          defaultChecked
-        />
-        <Label htmlFor="switch-demo-bluetooth">Bluetooth</Label>
-      </div>
-      <Label className="flex items-center gap-6 rounded-lg border p-4 has-[[data-state=checked]]:border-blue-600">
-        <div className="flex flex-col gap-1">
-          <div className="font-medium">Share across devices</div>
-          <div className="text-sm font-normal text-muted-foreground">
-            Focus is shared across devices, and turns off when you leave the
-            app.
-          </div>
-        </div>
-        <Switch
-          id="switch-demo-focus-mode"
-          className="data-[state=checked]:bg-blue-500 dark:data-[state=checked]:bg-blue-600"
-        />
-      </Label>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/table-demo.tsx b/apps/v4/app/(internal)/sink/components/table-demo.tsx
deleted file mode 100644
index c1269df1ba..0000000000
--- a/apps/v4/app/(internal)/sink/components/table-demo.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/new-york-v4/ui/table"
-
-const invoices = [
-  {
-    invoice: "INV001",
-    paymentStatus: "Paid",
-    totalAmount: "$250.00",
-    paymentMethod: "Credit Card",
-  },
-  {
-    invoice: "INV002",
-    paymentStatus: "Pending",
-    totalAmount: "$150.00",
-    paymentMethod: "PayPal",
-  },
-  {
-    invoice: "INV003",
-    paymentStatus: "Unpaid",
-    totalAmount: "$350.00",
-    paymentMethod: "Bank Transfer",
-  },
-  {
-    invoice: "INV004",
-    paymentStatus: "Paid",
-    totalAmount: "$450.00",
-    paymentMethod: "Credit Card",
-  },
-  {
-    invoice: "INV005",
-    paymentStatus: "Paid",
-    totalAmount: "$550.00",
-    paymentMethod: "PayPal",
-  },
-  {
-    invoice: "INV006",
-    paymentStatus: "Pending",
-    totalAmount: "$200.00",
-    paymentMethod: "Bank Transfer",
-  },
-  {
-    invoice: "INV007",
-    paymentStatus: "Unpaid",
-    totalAmount: "$300.00",
-    paymentMethod: "Credit Card",
-  },
-]
-
-export function TableDemo() {
-  return (
-    <Table>
-      <TableCaption>A list of your recent invoices.</TableCaption>
-      <TableHeader>
-        <TableRow>
-          <TableHead className="w-[100px]">Invoice</TableHead>
-          <TableHead>Status</TableHead>
-          <TableHead>Method</TableHead>
-          <TableHead className="text-right">Amount</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {invoices.map((invoice) => (
-          <TableRow key={invoice.invoice}>
-            <TableCell className="font-medium">{invoice.invoice}</TableCell>
-            <TableCell>{invoice.paymentStatus}</TableCell>
-            <TableCell>{invoice.paymentMethod}</TableCell>
-            <TableCell className="text-right">{invoice.totalAmount}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-      <TableFooter>
-        <TableRow>
-          <TableCell colSpan={3}>Total</TableCell>
-          <TableCell className="text-right">$2,500.00</TableCell>
-        </TableRow>
-      </TableFooter>
-    </Table>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/tabs-demo.tsx b/apps/v4/app/(internal)/sink/components/tabs-demo.tsx
deleted file mode 100644
index 7388730c97..0000000000
--- a/apps/v4/app/(internal)/sink/components/tabs-demo.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-import { AppWindowIcon, CodeIcon } from "lucide-react"
-
-import { Button } from "@/registry/new-york-v4/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york-v4/ui/card"
-import { Input } from "@/registry/new-york-v4/ui/input"
-import { Label } from "@/registry/new-york-v4/ui/label"
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/registry/new-york-v4/ui/tabs"
-
-export function TabsDemo() {
-  return (
-    <div className="flex w-full max-w-sm flex-col gap-6">
-      <Tabs defaultValue="account">
-        <TabsList className="grid w-full grid-cols-2">
-          <TabsTrigger value="account">Account</TabsTrigger>
-          <TabsTrigger value="password">Password</TabsTrigger>
-        </TabsList>
-        <TabsContent value="account">
-          <Card>
-            <CardHeader>
-              <CardTitle>Account</CardTitle>
-              <CardDescription>
-                Make changes to your account here. Click save when you&apos;re
-                done.
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="grid gap-6">
-              <div className="grid gap-3">
-                <Label htmlFor="tabs-demo-name">Name</Label>
-                <Input id="tabs-demo-name" defaultValue="Pedro Duarte" />
-              </div>
-              <div className="grid gap-3">
-                <Label htmlFor="tabs-demo-username">Username</Label>
-                <Input id="tabs-demo-username" defaultValue="@peduarte" />
-              </div>
-            </CardContent>
-            <CardFooter>
-              <Button>Save changes</Button>
-            </CardFooter>
-          </Card>
-        </TabsContent>
-        <TabsContent value="password">
-          <Card>
-            <CardHeader>
-              <CardTitle>Password</CardTitle>
-              <CardDescription>
-                Change your password here. After saving, you&apos;ll be logged
-                out.
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="grid gap-6">
-              <div className="grid gap-3">
-                <Label htmlFor="tabs-demo-current">Current password</Label>
-                <Input id="tabs-demo-current" type="password" />
-              </div>
-              <div className="grid gap-3">
-                <Label htmlFor="tabs-demo-new">New password</Label>
-                <Input id="tabs-demo-new" type="password" />
-              </div>
-            </CardContent>
-            <CardFooter>
-              <Button>Save password</Button>
-            </CardFooter>
-          </Card>
-        </TabsContent>
-      </Tabs>
-      <Tabs defaultValue="home">
-        <TabsList>
-          <TabsTrigger value="home">Home</TabsTrigger>
-          <TabsTrigger value="settings">Settings</TabsTrigger>
-        </TabsList>
-      </Tabs>
-      <Tabs defaultValue="home">
-        <TabsList>
-          <TabsTrigger value="home">Home</TabsTrigger>
-          <TabsTrigger value="settings" disabled>
-            Disabled
-          </TabsTrigger>
-        </TabsList>
-      </Tabs>
-      <Tabs defaultValue="preview">
-        <TabsList>
-          <TabsTrigger value="preview">
-            <AppWindowIcon />
-            Preview
-          </TabsTrigger>
-          <TabsTrigger value="code">
-            <CodeIcon />
-            Code
-          </TabsTrigger>
-        </TabsList>
-      </Tabs>
-      {/* Line variant. */}
-      <Tabs defaultValue="preview">
-        <TabsList variant="line">
-          <TabsTrigger value="preview">
-            <AppWindowIcon />
-            Preview
-          </TabsTrigger>
-          <TabsTrigger value="code">
-            <CodeIcon />
-            Code
-          </TabsTrigger>
-        </TabsList>
-      </Tabs>
-      {/* Vertical orientation. */}
-      <Tabs defaultValue="preview" orientation="vertical">
-        <TabsList>
-          <TabsTrigger value="preview">
-            <AppWindowIcon />
-            Preview
-          </TabsTrigger>
-          <TabsTrigger value="code">
-            <CodeIcon />
-            Code
-          </TabsTrigger>
-        </TabsList>
-      </Tabs>
-      {/* Vertical orientation with line variant. */}
-      <Tabs defaultValue="preview" orientation="vertical">
-        <TabsList variant="line">
-          <TabsTrigger value="preview">
-            <AppWindowIcon />
-            Preview
-          </TabsTrigger>
-          <TabsTrigger value="code">
-            <CodeIcon />
-            Code
-          </TabsTrigger>
-        </TabsList>
-      </Tabs>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/textarea-demo.tsx b/apps/v4/app/(internal)/sink/components/textarea-demo.tsx
deleted file mode 100644
index 8ba32fb2a3..0000000000
--- a/apps/v4/app/(internal)/sink/components/textarea-demo.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Label } from "@/registry/new-york-v4/ui/label"
-import { Textarea } from "@/registry/new-york-v4/ui/textarea"
-
-export function TextareaDemo() {
-  return (
-    <div className="flex w-full flex-col gap-10">
-      <Textarea placeholder="Type your message here." />
-      <Textarea placeholder="Type your message here." aria-invalid="true" />
-      <div className="grid gap-3">
-        <Label htmlFor="textarea-demo-message">Label</Label>
-        <Textarea
-          id="textarea-demo-message"
-          placeholder="Type your message here."
-          rows={6}
-        />
-      </div>
-      <div className="grid gap-3">
-        <Label htmlFor="textarea-demo-message-2">
-          With label and description
-        </Label>
-        <Textarea
-          id="textarea-demo-message-2"
-          placeholder="Type your message here."
-          rows={6}
-        />
-        <div className="text-sm text-muted-foreground">
-          Type your message and press enter to send.
-        </div>
-      </div>
-      <div className="grid gap-3">
-        <Label htmlFor="textarea-demo-disabled">Disabled</Label>
-        <Textarea
-          id="textarea-demo-disabled"
-          placeholder="Type your message here."
-          disabled
-        />
-      </div>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/theme-selector.tsx b/apps/v4/app/(internal)/sink/components/theme-selector.tsx
deleted file mode 100644
index e8a03f00a8..0000000000
--- a/apps/v4/app/(internal)/sink/components/theme-selector.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-"use client"
-
-import { cn } from "@/lib/utils"
-import { useThemeConfig } from "@/components/active-theme"
-import { Label } from "@/registry/new-york-v4/ui/label"
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york-v4/ui/select"
-
-const THEMES = {
-  sizes: [
-    {
-      name: "Default",
-      value: "default",
-    },
-    {
-      name: "Scaled",
-      value: "scaled",
-    },
-    {
-      name: "Mono",
-      value: "mono",
-    },
-  ],
-  colors: [
-    {
-      name: "Blue",
-      value: "blue",
-    },
-    {
-      name: "Green",
-      value: "green",
-    },
-    {
-      name: "Amber",
-      value: "amber",
-    },
-    {
-      name: "Rose",
-      value: "rose",
-    },
-    {
-      name: "Purple",
-      value: "purple",
-    },
-    {
-      name: "Orange",
-      value: "orange",
-    },
-    {
-      name: "Teal",
-      value: "teal",
-    },
-  ],
-  fonts: [
-    {
-      name: "Inter",
-      value: "inter",
-    },
-    {
-      name: "Noto Sans",
-      value: "noto-sans",
-    },
-    {
-      name: "Nunito Sans",
-      value: "nunito-sans",
-    },
-    {
-      name: "Figtree",
-      value: "figtree",
-    },
-  ],
-  radius: [
-    {
-      name: "None",
-      value: "rounded-none",
-    },
-    {
-      name: "Small",
-      value: "rounded-small",
-    },
-    {
-      name: "Medium",
-      value: "rounded-medium",
-    },
-    {
-      name: "Large",
-      value: "rounded-large",
-    },
-    {
-      name: "Full",
-      value: "rounded-full",
-    },
-  ],
-}
-
-export function ThemeSelector({ className }: React.ComponentProps<"div">) {
-  const { activeTheme, setActiveTheme } = useThemeConfig()
-
-  return (
-    <div className={cn("flex items-center gap-2", className)}>
-      <Label htmlFor="theme-selector" className="sr-only">
-        Theme
-      </Label>
-      <Select value={activeTheme} onValueChange={setActiveTheme}>
-        <SelectTrigger
-          id="theme-selector"
-          size="sm"
-          className="justify-start border-secondary bg-secondary text-secondary-foreground shadow-none *:data-[slot=select-value]:w-16"
-        >
-          <SelectValue placeholder="Select" />
-        </SelectTrigger>
-        <SelectContent align="end">
-          {Object.entries(THEMES).map(
-            ([key, themes], index) =>
-              themes.length > 0 && (
-                <div key={key}>
-                  {index > 0 && <SelectSeparator />}
-                  <SelectGroup>
-                    <SelectLabel>
-                      {key.charAt(0).toUpperCase() + key.slice(1)}
-                    </SelectLabel>
-                    {themes.map((theme) => (
-                      <SelectItem
-                        key={theme.name}
-                        value={theme.value}
-                        className="data-[state=checked]:opacity-50"
-                      >
-                        {theme.name}
-                      </SelectItem>
-                    ))}
-                  </SelectGroup>
-                </div>
-              )
-          )}
-        </SelectContent>
-      </Select>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/toggle-demo.tsx b/apps/v4/app/(internal)/sink/components/toggle-demo.tsx
deleted file mode 100644
index 466025c646..0000000000
--- a/apps/v4/app/(internal)/sink/components/toggle-demo.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { BoldIcon, BookmarkIcon, ItalicIcon, UnderlineIcon } from "lucide-react"
-
-import { Toggle } from "@/registry/new-york-v4/ui/toggle"
-
-export function ToggleDemo() {
-  return (
-    <div className="flex flex-wrap items-center gap-6">
-      <Toggle aria-label="Toggle italic">
-        <BoldIcon />
-      </Toggle>
-      <Toggle aria-label="Toggle italic" variant="default">
-        <UnderlineIcon />
-      </Toggle>
-      <Toggle aria-label="Toggle italic" variant="default" disabled>
-        Disabled
-      </Toggle>
-      <Toggle variant="outline" aria-label="Toggle italic">
-        <ItalicIcon />
-        Italic
-      </Toggle>
-      <Toggle
-        aria-label="Toggle book"
-        className="data-[state=on]:[&_svg]:fill-accent-foreground"
-      >
-        <BookmarkIcon />
-      </Toggle>
-      <Toggle variant="outline" aria-label="Toggle italic" size="sm">
-        Small
-      </Toggle>
-      <Toggle variant="outline" aria-label="Toggle italic" size="lg">
-        Large
-      </Toggle>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/toggle-group-demo.tsx b/apps/v4/app/(internal)/sink/components/toggle-group-demo.tsx
deleted file mode 100644
index b8c9fc4267..0000000000
--- a/apps/v4/app/(internal)/sink/components/toggle-group-demo.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import {
-  BoldIcon,
-  BookmarkIcon,
-  HeartIcon,
-  ItalicIcon,
-  StarIcon,
-  UnderlineIcon,
-} from "lucide-react"
-
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@/registry/new-york-v4/ui/toggle-group"
-
-export function ToggleGroupDemo() {
-  return (
-    <div className="flex flex-wrap items-start gap-4">
-      <ToggleGroup type="multiple" spacing={2}>
-        <ToggleGroupItem value="bold" aria-label="Toggle bold">
-          <BoldIcon />
-        </ToggleGroupItem>
-        <ToggleGroupItem value="italic" aria-label="Toggle italic">
-          <ItalicIcon />
-        </ToggleGroupItem>
-        <ToggleGroupItem
-          value="strikethrough"
-          aria-label="Toggle strikethrough"
-        >
-          <UnderlineIcon />
-        </ToggleGroupItem>
-      </ToggleGroup>
-      <ToggleGroup
-        variant="outline"
-        type="single"
-        defaultValue="all"
-        className="*:data-[slot=toggle-group-item]:w-20"
-      >
-        <ToggleGroupItem value="all" aria-label="Toggle all">
-          All
-        </ToggleGroupItem>
-        <ToggleGroupItem value="missed" aria-label="Toggle missed">
-          Missed
-        </ToggleGroupItem>
-      </ToggleGroup>
-
-      <ToggleGroup
-        variant="outline"
-        type="single"
-        size="sm"
-        defaultValue="last-24-hours"
-        className="*:data-[slot=toggle-group-item]:px-3"
-      >
-        <ToggleGroupItem
-          value="last-24-hours"
-          aria-label="Toggle last 24 hours"
-        >
-          Last 24 hours
-        </ToggleGroupItem>
-        <ToggleGroupItem value="last-7-days" aria-label="Toggle last 7 days">
-          Last 7 days
-        </ToggleGroupItem>
-      </ToggleGroup>
-
-      <ToggleGroup type="single" size="sm" defaultValue="last-24-hours">
-        <ToggleGroupItem
-          value="last-24-hours"
-          aria-label="Toggle last 24 hours"
-        >
-          Last 24 hours
-        </ToggleGroupItem>
-        <ToggleGroupItem value="last-7-days" aria-label="Toggle last 7 days">
-          Last 7 days
-        </ToggleGroupItem>
-      </ToggleGroup>
-      <ToggleGroup type="single" size="sm" defaultValue="top" variant="outline">
-        <ToggleGroupItem value="top" aria-label="Toggle top">
-          Top
-        </ToggleGroupItem>
-        <ToggleGroupItem value="bottom" aria-label="Toggle bottom">
-          Bottom
-        </ToggleGroupItem>
-        <ToggleGroupItem value="left" aria-label="Toggle left">
-          Left
-        </ToggleGroupItem>
-        <ToggleGroupItem value="right" aria-label="Toggle right">
-          Right
-        </ToggleGroupItem>
-      </ToggleGroup>
-
-      <ToggleGroup
-        type="single"
-        size="sm"
-        defaultValue="top"
-        variant="outline"
-        spacing={2}
-      >
-        <ToggleGroupItem value="top" aria-label="Toggle top">
-          Top
-        </ToggleGroupItem>
-        <ToggleGroupItem value="bottom" aria-label="Toggle bottom">
-          Bottom
-        </ToggleGroupItem>
-        <ToggleGroupItem value="left" aria-label="Toggle left">
-          Left
-        </ToggleGroupItem>
-        <ToggleGroupItem value="right" aria-label="Toggle right">
-          Right
-        </ToggleGroupItem>
-      </ToggleGroup>
-
-      <ToggleGroup type="multiple" variant="outline" spacing={2} size="sm">
-        <ToggleGroupItem
-          value="star"
-          aria-label="Toggle star"
-          className="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-yellow-500 data-[state=on]:*:[svg]:stroke-yellow-500"
-        >
-          <StarIcon />
-          Star
-        </ToggleGroupItem>
-        <ToggleGroupItem
-          value="heart"
-          aria-label="Toggle heart"
-          className="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-red-500 data-[state=on]:*:[svg]:stroke-red-500"
-        >
-          <HeartIcon />
-          Heart
-        </ToggleGroupItem>
-        <ToggleGroupItem
-          value="bookmark"
-          aria-label="Toggle bookmark"
-          className="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-blue-500 data-[state=on]:*:[svg]:stroke-blue-500"
-        >
-          <BookmarkIcon />
-          Bookmark
-        </ToggleGroupItem>
-      </ToggleGroup>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/components/tooltip-demo.tsx b/apps/v4/app/(internal)/sink/components/tooltip-demo.tsx
deleted file mode 100644
index cdf55188d9..0000000000
--- a/apps/v4/app/(internal)/sink/components/tooltip-demo.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { InfoIcon } from "lucide-react"
-
-import { Button } from "@/registry/new-york-v4/ui/button"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/new-york-v4/ui/tooltip"
-
-export function TooltipDemo() {
-  return (
-    <div className="flex flex-wrap items-start gap-4">
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button variant="outline">Hover</Button>
-        </TooltipTrigger>
-        <TooltipContent>
-          <p>Add to library</p>
-        </TooltipContent>
-      </Tooltip>
-      <div className="flex gap-2">
-        {["top", "right", "bottom", "left"].map((side) => (
-          <Tooltip key={side}>
-            <TooltipTrigger asChild>
-              <Button variant="outline" className="capitalize">
-                {side}
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side={side as "top" | "right" | "bottom" | "left"}>
-              <p>Add to library</p>
-            </TooltipContent>
-          </Tooltip>
-        ))}
-      </div>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button variant="ghost" size="icon">
-            <InfoIcon />
-            <span className="sr-only">Info</span>
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>
-          To learn more about how this works, check out the docs. If you have
-          any questions, please reach out to us.
-        </TooltipContent>
-      </Tooltip>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/layout.tsx b/apps/v4/app/(internal)/sink/layout.tsx
deleted file mode 100644
index 5bb2c725e4..0000000000
--- a/apps/v4/app/(internal)/sink/layout.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { Figtree, Inter, Noto_Sans, Nunito_Sans } from "next/font/google"
-
-import { cn } from "@/lib/utils"
-import { ModeSwitcher } from "@/components/mode-switcher"
-import { Separator } from "@/registry/new-york-v4/ui/separator"
-import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/registry/new-york-v4/ui/sidebar"
-import { AppBreadcrumbs } from "@/app/(internal)/sink/components/app-breadcrumbs"
-import { AppSidebar } from "@/app/(internal)/sink/components/app-sidebar"
-import { ThemeSelector } from "@/app/(internal)/sink/components/theme-selector"
-
-const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-inter",
-})
-
-const notoSans = Noto_Sans({
-  subsets: ["latin"],
-  variable: "--font-noto-sans",
-})
-
-const nunitoSans = Nunito_Sans({
-  subsets: ["latin"],
-  variable: "--font-nunito-sans",
-})
-
-const figtree = Figtree({
-  subsets: ["latin"],
-  variable: "--font-figtree",
-})
-
-export default async function SinkLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <SidebarProvider
-      defaultOpen={true}
-      className={cn(
-        "theme-container",
-        inter.variable,
-        notoSans.variable,
-        nunitoSans.variable,
-        figtree.variable
-      )}
-    >
-      <AppSidebar />
-      <SidebarInset>
-        <header className="sticky top-0 z-10 flex h-14 items-center border-b bg-background p-4">
-          <SidebarTrigger />
-          <Separator orientation="vertical" className="mr-4 ml-2 h-4!" />
-          <AppBreadcrumbs />
-          <div className="ml-auto flex items-center gap-2">
-            <ModeSwitcher />
-            <ThemeSelector />
-          </div>
-        </header>
-        {children}
-      </SidebarInset>
-    </SidebarProvider>
-  )
-}
diff --git a/apps/v4/app/(internal)/sink/page.tsx b/apps/v4/app/(internal)/sink/page.tsx
deleted file mode 100644
index 0e20da93b1..0000000000
--- a/apps/v4/app/(internal)/sink/page.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { type Metadata } from "next"
-
-import { componentRegistry } from "@/app/(internal)/sink/component-registry"
-import { ComponentWrapper } from "@/app/(internal)/sink/components/component-wrapper"
-
-export const dynamic = "force-static"
-export const revalidate = false
-
-export const metadata: Metadata = {
-  title: "Kitchen Sink",
-  description: "A page with all components for testing purposes.",
-}
-
-export default function SinkPage() {
-  return (
-    <div className="@container grid flex-1 gap-4 p-4">
-      {Object.entries(componentRegistry)
-        .filter(([, component]) => {
-          return component.type === "registry:ui"
-        })
-        .map(([key, component]) => {
-          const Component = component.component
-          return (
-            <ComponentWrapper
-              key={key}
-              name={key}
-              className={component.className || ""}
-            >
-              <Component />
-            </ComponentWrapper>
-          )
-        })}
-    </div>
-  )
-}
diff --git a/apps/v4/components/lo-fi/accordion.tsx b/apps/v4/components/lo-fi/accordion.tsx
deleted file mode 100644
index cb3c16b374..0000000000
--- a/apps/v4/components/lo-fi/accordion.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
-
-import { Atom } from "@/components/lo-fi/atom"
-
-export function AccordionLoFi() {
-  return (
-    <div className="flex flex-col">
-      <div className="flex flex-col gap-1 border-b py-2">
-        <div className="flex items-center justify-between">
-          <Atom shade="300" className="h-2 w-1/3" />
-          <ChevronDownIcon className="size-3" />
-        </div>
-      </div>
-      <div className="flex flex-col gap-1 border-b py-2">
-        <div className="flex items-center justify-between">
-          <Atom shade="300" className="h-2 w-1/2" />
-          <ChevronUpIcon className="size-3" />
-        </div>
-        <div className="flex flex-col gap-1.5">
-          <Atom shade="200" className="h-2 w-2/3" />
-          <Atom shade="200" className="h-2 w-1/3" />
-        </div>
-      </div>
-      <div className="flex flex-col gap-1 py-2">
-        <div className="flex items-center justify-between">
-          <Atom shade="300" className="h-2 w-2/3" />
-          <ChevronDownIcon className="size-3" />
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/v4/components/lo-fi/alert.tsx b/apps/v4/components/lo-fi/alert.tsx
deleted file mode 100644
index 13e44a4916..0000000000
--- a/apps/v4/components/lo-fi/alert.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { CircleAlertIcon } from "lucide-react"
-
-import { Atom } from "@/components/lo-fi/atom"
-
-export function AlertLoFi() {
-  return (
-    <Atom
-      shade="100"
-      className="rounder-lg flex items-start justify-between gap-2 border p-2"
-    >
-      <CircleAlertIcon className="size-3" />
-      <div className="flex flex-1 flex-col gap-1">
-        <Atom shade="300" className="h-2 w-2/3" />
-        <Atom shade="200" className="h-2 w-full" />
-      </div>
-    </Atom>
-  )
-}
diff --git a/apps/v4/components/lo-fi/atom.tsx b/apps/v4/components/lo-fi/atom.tsx
deleted file mode 100644
index 8952be0980..0000000000
--- a/apps/v4/components/lo-fi/atom.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const atomVariants = cva(
-  "inline-flex rounded-lg border-neutral-300 dark:border-neutral-600",
-  {
-    variants: {
-      shade: {
-        "50": "bg-neutral-50 dark:bg-neutral-900",
-        "100": "bg-neutral-100 dark:bg-neutral-800",
-        "200": "bg-neutral-200 dark:bg-neutral-700",
-        "300": "bg-neutral-300 dark:bg-neutral-600",
-        "400": "bg-neutral-400 dark:bg-neutral-500",
-        "500": "bg-neutral-500 dark:bg-neutral-400",
-        "600": "bg-neutral-600 dark:bg-neutral-300",
-        "700": "bg-neutral-700 dark:bg-neutral-200",
-        "800": "bg-neutral-800 dark:bg-neutral-100",
-        "900": "bg-neutral-900 dark:bg-neutral-50",
-      },
-    },
-    defaultVariants: {
-      shade: "50",
-    },
-  }
-)
-
-function Atom({
-  className,
-  shade,
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof atomVariants>) {
-  return (
-    <div
-      data-slot="button"
-      className={cn(atomVariants({ shade, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Atom }
diff --git a/apps/v4/components/lo-fi/component.tsx b/apps/v4/components/lo-fi/component.tsx
deleted file mode 100644
index 45244d3698..0000000000
--- a/apps/v4/components/lo-fi/component.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import Link from "next/link"
-
-import { Atom } from "@/components/lo-fi/atom"
-
-function Component({ href, ...props }: React.ComponentProps<typeof Link>) {
-  return <Link href={href} className="group flex flex-col gap-2" {...props} />
-}
-
-function ComponentContent({ ...props }: React.ComponentProps<typeof Atom>) {
-  return (
-    <Atom
-      shade="50"
-      className="flex aspect-video items-center justify-center rounded-lg bg-muted/30 p-4 ring ring-muted *:w-full *:max-w-[70%]"
-      {...props}
-    />
-  )
-}
-
-function ComponentName({ ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      className="text-center font-medium text-foreground underline-offset-2 group-hover:underline"
-      {...props}
-    />
-  )
-}
-
-export { Component, ComponentContent, ComponentName }
diff --git a/apps/v4/components/lo-fi/index.tsx b/apps/v4/components/lo-fi/index.tsx
deleted file mode 100644
index 69429ef834..0000000000
--- a/apps/v4/components/lo-fi/index.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { AccordionLoFi } from "@/components/lo-fi/accordion"
-import { AlertLoFi } from "@/components/lo-fi/alert"
-import {
-  Component,
-  ComponentContent,
-  ComponentName,
-} from "@/components/lo-fi/component"
-
-export function LoFi() {
-  return (
-    <div className="mx-auto grid max-w-[350px] gap-6 sm:max-w-none sm:grid-cols-2">
-      <Component href="/docs/components/accordion">
-        <ComponentContent>
-          <AccordionLoFi />
-        </ComponentContent>
-        <ComponentName>Accordion</ComponentName>
-      </Component>
-      <Component href="/docs/components/alert">
-        <ComponentContent>
-          <AlertLoFi />
-        </ComponentContent>
-        <ComponentName>Alert</ComponentName>
-      </Component>
-    </div>
-  )
-}
diff --git a/apps/v4/lib/explore.ts b/apps/v4/lib/explore.ts
deleted file mode 100644
index 0768962363..0000000000
--- a/apps/v4/lib/explore.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export const EXPLORE_PRESETS: string[] = [
-  "auFzoPZ",
-  "a1zDJJ",
-  "a1DN5Lx2",
-  "abZIu0W",
-  "a2r6bw",
-  "a2He4G",
-  "a1DOCw6i",
-  "a1D5CKfo",
-  "abYAmrx",
-]
diff --git a/apps/v4/next.config.mjs b/apps/v4/next.config.mjs
index a4f51b7605..a8349ba53b 100644
--- a/apps/v4/next.config.mjs
+++ b/apps/v4/next.config.mjs
@@ -127,6 +127,11 @@ const nextConfig = {
         destination: "/docs/cli",
         permanent: true,
       },
+      {
+        source: "/themes",
+        destination: "/create",
+        permanent: true,
+      },
     ]
   },
   rewrites() {
diff --git a/apps/v4/public/r/styles/default/registry.json b/apps/v4/public/r/styles/default/registry.json
index 0ae97702c3..49fe140c7d 100644
--- a/apps/v4/public/r/styles/default/registry.json
+++ b/apps/v4/public/r/styles/default/registry.json
@@ -4153,390 +4153,6 @@
         }
       }
     },
-    {
-      "name": "sink",
-      "type": "registry:internal",
-      "registryDependencies": [
-        "accordion",
-        "alert",
-        "alert-dialog",
-        "aspect-ratio",
-        "avatar",
-        "badge",
-        "breadcrumb",
-        "button",
-        "calendar",
-        "card",
-        "carousel",
-        "chart",
-        "checkbox",
-        "collapsible",
-        "command",
-        "context-menu",
-        "dialog",
-        "drawer",
-        "dropdown-menu",
-        "hover-card",
-        "input",
-        "input-otp",
-        "label",
-        "menubar",
-        "navigation-menu",
-        "pagination",
-        "popover",
-        "progress",
-        "radio-group",
-        "resizable",
-        "scroll-area",
-        "select",
-        "separator",
-        "sheet",
-        "sidebar",
-        "skeleton",
-        "slider",
-        "sonner",
-        "switch",
-        "table",
-        "tabs",
-        "textarea",
-        "toast",
-        "toggle",
-        "toggle-group",
-        "tooltip"
-      ],
-      "files": [
-        {
-          "path": "registry/default/internal/sink/page.tsx",
-          "type": "registry:page",
-          "target": "app/sink/page.tsx"
-        },
-        {
-          "path": "registry/default/internal/sink/components/app-sidebar.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/component-wrapper.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/nav-main.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/nav-projects.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/nav-user.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/team-switcher.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/accordion-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/alert-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/alert-dialog-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/aspect-ratio-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/avatar-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/badge-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/breadcrumb-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/button-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/calendar-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/card-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/carousel-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/checkbox-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/collapsible-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/combobox-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/command-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/context-menu-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/date-picker-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/dialog-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/drawer-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/dropdown-menu-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/hover-card-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/input-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/input-otp-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/label-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/menubar-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/navigation-menu-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/pagination-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/popover-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/progress-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/radio-group-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/resizable-handle.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/scroll-area-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/select-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/separator-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/sheet-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/skeleton-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/slider-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/sonner-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/switch-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/table-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/tabs-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/textarea-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/toast-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/toggle-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/toggle-group-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/tooltip-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/badge-destructive.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/badge-outline.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/badge-secondary.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/button-destructive.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/button-ghost.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/button-link.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/button-loading.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/button-outline.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/button-secondary.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/button-with-icon.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/toggle-disabled.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/toggle-outline.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/default/internal/sink/components/toggle-with-text.tsx",
-          "type": "registry:component",
-          "target": ""
-        }
-      ]
-    },
     {
       "name": "sidebar-demo",
       "type": "registry:internal",
@@ -7035,4 +6651,4 @@
       ]
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/apps/v4/public/r/styles/default/sink.json b/apps/v4/public/r/styles/default/sink.json
deleted file mode 100644
index b99700b7fa..0000000000
--- a/apps/v4/public/r/styles/default/sink.json
+++ /dev/null
@@ -1,452 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "sink",
-  "type": "registry:internal",
-  "author": "shadcn (https://ui.shadcn.com)",
-  "registryDependencies": [
-    "accordion",
-    "alert",
-    "alert-dialog",
-    "aspect-ratio",
-    "avatar",
-    "badge",
-    "breadcrumb",
-    "button",
-    "calendar",
-    "card",
-    "carousel",
-    "chart",
-    "checkbox",
-    "collapsible",
-    "command",
-    "context-menu",
-    "dialog",
-    "drawer",
-    "dropdown-menu",
-    "hover-card",
-    "input",
-    "input-otp",
-    "label",
-    "menubar",
-    "navigation-menu",
-    "pagination",
-    "popover",
-    "progress",
-    "radio-group",
-    "resizable",
-    "scroll-area",
-    "select",
-    "separator",
-    "sheet",
-    "sidebar",
-    "skeleton",
-    "slider",
-    "sonner",
-    "switch",
-    "table",
-    "tabs",
-    "textarea",
-    "toast",
-    "toggle",
-    "toggle-group",
-    "tooltip"
-  ],
-  "files": [
-    {
-      "path": "internal/sink/page.tsx",
-      "content": "import { AccordionDemo } from \"@/registry/default/internal/sink/components/accordion-demo\"\nimport { AlertDemo } from \"@/registry/default/internal/sink/components/alert-demo\"\nimport { AlertDialogDemo } from \"@/registry/default/internal/sink/components/alert-dialog-demo\"\nimport { AppSidebar } from \"@/registry/default/internal/sink/components/app-sidebar\"\nimport { AspectRatioDemo } from \"@/registry/default/internal/sink/components/aspect-ratio-demo\"\nimport { AvatarDemo } from \"@/registry/default/internal/sink/components/avatar-demo\"\nimport { BadgeDemo } from \"@/registry/default/internal/sink/components/badge-demo\"\nimport { BadgeDestructive } from \"@/registry/default/internal/sink/components/badge-destructive\"\nimport { BadgeOutline } from \"@/registry/default/internal/sink/components/badge-outline\"\nimport { BadgeSecondary } from \"@/registry/default/internal/sink/components/badge-secondary\"\nimport { BreadcrumbDemo } from \"@/registry/default/internal/sink/components/breadcrumb-demo\"\nimport { ButtonDemo } from \"@/registry/default/internal/sink/components/button-demo\"\nimport { ButtonDestructive } from \"@/registry/default/internal/sink/components/button-destructive\"\nimport { ButtonGhost } from \"@/registry/default/internal/sink/components/button-ghost\"\nimport { ButtonLink } from \"@/registry/default/internal/sink/components/button-link\"\nimport { ButtonLoading } from \"@/registry/default/internal/sink/components/button-loading\"\nimport { ButtonOutline } from \"@/registry/default/internal/sink/components/button-outline\"\nimport { ButtonSecondary } from \"@/registry/default/internal/sink/components/button-secondary\"\nimport { ButtonWithIcon } from \"@/registry/default/internal/sink/components/button-with-icon\"\nimport { CalendarDemo } from \"@/registry/default/internal/sink/components/calendar-demo\"\nimport { CardDemo } from \"@/registry/default/internal/sink/components/card-demo\"\nimport { CarouselDemo } from \"@/registry/default/internal/sink/components/carousel-demo\"\nimport { CheckboxDemo } from \"@/registry/default/internal/sink/components/checkbox-demo\"\nimport { CollapsibleDemo } from \"@/registry/default/internal/sink/components/collapsible-demo\"\nimport { ComboboxDemo } from \"@/registry/default/internal/sink/components/combobox-demo\"\nimport { CommandDemo } from \"@/registry/default/internal/sink/components/command-demo\"\nimport { ComponentWrapper } from \"@/registry/default/internal/sink/components/component-wrapper\"\nimport { ContextMenuDemo } from \"@/registry/default/internal/sink/components/context-menu-demo\"\nimport { DatePickerDemo } from \"@/registry/default/internal/sink/components/date-picker-demo\"\nimport { DialogDemo } from \"@/registry/default/internal/sink/components/dialog-demo\"\nimport { DrawerDemo } from \"@/registry/default/internal/sink/components/drawer-demo\"\nimport { DropdownMenuDemo } from \"@/registry/default/internal/sink/components/dropdown-menu-demo\"\nimport { HoverCardDemo } from \"@/registry/default/internal/sink/components/hover-card-demo\"\nimport { InputDemo } from \"@/registry/default/internal/sink/components/input-demo\"\nimport { InputOTPDemo } from \"@/registry/default/internal/sink/components/input-otp-demo\"\nimport { LabelDemo } from \"@/registry/default/internal/sink/components/label-demo\"\nimport { MenubarDemo } from \"@/registry/default/internal/sink/components/menubar-demo\"\nimport { NavigationMenuDemo } from \"@/registry/default/internal/sink/components/navigation-menu-demo\"\nimport { PaginationDemo } from \"@/registry/default/internal/sink/components/pagination-demo\"\nimport { PopoverDemo } from \"@/registry/default/internal/sink/components/popover-demo\"\nimport { ProgressDemo } from \"@/registry/default/internal/sink/components/progress-demo\"\nimport { RadioGroupDemo } from \"@/registry/default/internal/sink/components/radio-group-demo\"\nimport { ResizableHandleDemo } from \"@/registry/default/internal/sink/components/resizable-handle\"\nimport { ScrollAreaDemo } from \"@/registry/default/internal/sink/components/scroll-area-demo\"\nimport { SelectDemo } from \"@/registry/default/internal/sink/components/select-demo\"\nimport { SeparatorDemo } from \"@/registry/default/internal/sink/components/separator-demo\"\nimport { SheetDemo } from \"@/registry/default/internal/sink/components/sheet-demo\"\nimport { SkeletonDemo } from \"@/registry/default/internal/sink/components/skeleton-demo\"\nimport { SliderDemo } from \"@/registry/default/internal/sink/components/slider-demo\"\nimport { SonnerDemo } from \"@/registry/default/internal/sink/components/sonner-demo\"\nimport { SwitchDemo } from \"@/registry/default/internal/sink/components/switch-demo\"\nimport { TableDemo } from \"@/registry/default/internal/sink/components/table-demo\"\nimport { TabsDemo } from \"@/registry/default/internal/sink/components/tabs-demo\"\nimport { TextareaDemo } from \"@/registry/default/internal/sink/components/textarea-demo\"\nimport { ToastDemo } from \"@/registry/default/internal/sink/components/toast-demo\"\nimport { ToggleDemo } from \"@/registry/default/internal/sink/components/toggle-demo\"\nimport { ToggleDisabled } from \"@/registry/default/internal/sink/components/toggle-disabled\"\nimport { ToggleGroupDemo } from \"@/registry/default/internal/sink/components/toggle-group-demo\"\nimport { ToggleOutline } from \"@/registry/default/internal/sink/components/toggle-outline\"\nimport { ToggleWithText } from \"@/registry/default/internal/sink/components/toggle-with-text\"\nimport { TooltipDemo } from \"@/registry/default/internal/sink/components/tooltip-demo\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function SinkPage() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3\">\n            <ComponentWrapper name=\"Accordion\">\n              <AccordionDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Alert\">\n              <AlertDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"AlertDialog\">\n              <AlertDialogDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"AspectRatio\">\n              <AspectRatioDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Avatar\">\n              <AvatarDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Badge\">\n              <BadgeDemo />\n              <BadgeDestructive />\n              <BadgeOutline />\n              <BadgeSecondary />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Breadcrumb\">\n              <BreadcrumbDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Button\">\n              <div className=\"flex items-center gap-2\">\n                <ButtonDemo />\n                <ButtonDestructive />\n                <ButtonGhost />\n                <ButtonLink />\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <ButtonLoading />\n                <ButtonOutline />\n                <ButtonSecondary />\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <ButtonWithIcon />\n              </div>\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Calendar\">\n              <CalendarDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Card\">\n              <CardDemo className=\"w-full\" />\n            </ComponentWrapper>\n            <ComponentWrapper\n              name=\"Carousel\"\n              className=\"[&_.max-w-xs]:max-w-[70%]\"\n            >\n              <CarouselDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Checkbox\">\n              <CheckboxDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Collapsible\">\n              <CollapsibleDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Combobox\">\n              <ComboboxDemo />\n            </ComponentWrapper>\n            <ComponentWrapper\n              name=\"Command\"\n              className=\"[&_[cmdk-root]]:md:min-w-max\"\n            >\n              <CommandDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"ContextMenu\">\n              <ContextMenuDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"DatePicker\">\n              <DatePickerDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Dialog\">\n              <DialogDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Drawer\">\n              <DrawerDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"DropdownMenu\">\n              <DropdownMenuDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"HoverCard\">\n              <HoverCardDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Input\">\n              <InputDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"InputOTP\">\n              <InputOTPDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Label\">\n              <LabelDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Menubar\">\n              <MenubarDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"NavigationMenu\" className=\"col-span-2\">\n              <NavigationMenuDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Pagination\">\n              <PaginationDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Popover\">\n              <PopoverDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Progress\">\n              <ProgressDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"RadioGroup\">\n              <RadioGroupDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Resizable\" className=\"col-span-2\">\n              <ResizableHandleDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"ScrollArea\">\n              <ScrollAreaDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Select\">\n              <SelectDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Separator\">\n              <SeparatorDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Sheet\">\n              <SheetDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Skeleton\">\n              <SkeletonDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Slider\">\n              <SliderDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Sonner\">\n              <SonnerDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Switch\">\n              <SwitchDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Table\" className=\"col-span-2\">\n              <TableDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Tabs\">\n              <TabsDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Textarea\">\n              <TextareaDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Toast\">\n              <ToastDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Toggle\">\n              <div className=\"flex items-center gap-2\">\n                <ToggleDemo />\n                <ToggleDisabled />\n                <ToggleOutline />\n                <ToggleWithText />\n              </div>\n            </ComponentWrapper>\n            <ComponentWrapper name=\"ToggleGroup\">\n              <ToggleGroupDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Tooltip\">\n              <TooltipDemo />\n            </ComponentWrapper>\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/sink/page.tsx"
-    },
-    {
-      "path": "internal/sink/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  AudioWaveform,\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  GalleryVerticalEnd,\n  Map,\n  PieChart,\n  Settings2,\n  SquareTerminal,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/default/blocks/sidebar-07/components/nav-main\"\nimport { NavProjects } from \"@/registry/default/blocks/sidebar-07/components/nav-projects\"\nimport { NavUser } from \"@/registry/default/blocks/sidebar-07/components/nav-user\"\nimport { TeamSwitcher } from \"@/registry/default/blocks/sidebar-07/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: GalleryVerticalEnd,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar collapsible=\"icon\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/component-wrapper.tsx",
-      "content": "import { cn } from \"@/registry/default/lib/utils\"\n\nexport function ComponentWrapper({\n  className,\n  name,\n  children,\n  ...props\n}: React.ComponentPropsWithoutRef<\"div\"> & { name: string }) {\n  return (\n    <div\n      className={cn(\"flex w-full flex-col rounded-lg border\", className)}\n      {...props}\n    >\n      <div className=\"border-b px-4 py-3\">\n        <div className=\"text-sm font-medium\">{name}</div>\n      </div>\n      <div className=\"flex flex-1 flex-col items-center justify-center gap-2 p-4 [&>div]:max-w-full\">\n        {children}\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/nav-main.tsx",
-      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible\n            key={item.title}\n            asChild\n            defaultOpen={item.isActive}\n            className=\"group/collapsible\"\n          >\n            <SidebarMenuItem>\n              <CollapsibleTrigger asChild>\n                <SidebarMenuButton tooltip={item.title}>\n                  {item.icon && <item.icon />}\n                  <span>{item.title}</span>\n                  <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                </SidebarMenuButton>\n              </CollapsibleTrigger>\n              <CollapsibleContent>\n                <SidebarMenuSub>\n                  {item.items?.map((subItem) => (\n                    <SidebarMenuSubItem key={subItem.title}>\n                      <SidebarMenuSubButton asChild>\n                        <a href={subItem.url}>\n                          <span>{subItem.title}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  ))}\n                </SidebarMenuSub>\n              </CollapsibleContent>\n            </SidebarMenuItem>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/nav-projects.tsx",
-      "content": "\"use client\"\n\nimport {\n  Folder,\n  Forward,\n  MoreHorizontal,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavProjects({\n  projects,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-48 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <Folder className=\"text-muted-foreground\" />\n                  <span>View Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <Forward className=\"text-muted-foreground\" />\n                  <span>Share Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete Project</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontal className=\"text-sidebar-foreground/70\" />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/nav-user.tsx",
-      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown, Plus } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <activeTeam.logo className=\"size-4\" />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">\n                  {activeTeam.name}\n                </span>\n                <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/accordion-demo.tsx",
-      "content": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/default/ui/accordion\"\n\nexport function AccordionDemo() {\n  return (\n    <Accordion type=\"single\" collapsible className=\"w-full\">\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>Is it accessible?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It adheres to the WAI-ARIA design pattern.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\">\n        <AccordionTrigger>Is it styled?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It comes with default styles that matches the other\n          components&apos; aesthetic.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\">\n        <AccordionTrigger>Is it animated?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It's animated by default, but you can disable it if you prefer.\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/alert-demo.tsx",
-      "content": "import { Terminal } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/default/ui/alert\"\n\nexport function AlertDemo() {\n  return (\n    <Alert>\n      <Terminal className=\"h-4 w-4\" />\n      <AlertTitle>Heads up!</AlertTitle>\n      <AlertDescription>\n        You can add components to your app using the cli.\n      </AlertDescription>\n    </Alert>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/alert-dialog-demo.tsx",
-      "content": "import {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/default/ui/alert-dialog\"\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport function AlertDialogDemo() {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"outline\">Show Dialog</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent>\n        <AlertDialogHeader>\n          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n          <AlertDialogDescription>\n            This action cannot be undone. This will permanently delete your\n            account and remove your data from our servers.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\n          <AlertDialogAction>Continue</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/aspect-ratio-demo.tsx",
-      "content": "import Image from \"next/image\"\n\nimport { AspectRatio } from \"@/registry/default/ui/aspect-ratio\"\n\nexport function AspectRatioDemo() {\n  return (\n    <AspectRatio ratio={16 / 9} className=\"bg-muted\">\n      <Image\n        src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n        alt=\"Photo by Drew Beamer\"\n        fill\n        className=\"h-full w-full rounded-md object-cover\"\n      />\n    </AspectRatio>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/avatar-demo.tsx",
-      "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\n\nexport function AvatarDemo() {\n  return (\n    <Avatar>\n      <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n      <AvatarFallback>CN</AvatarFallback>\n    </Avatar>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/badge-demo.tsx",
-      "content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport function BadgeDemo() {\n  return <Badge>Badge</Badge>\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/breadcrumb-demo.tsx",
-      "content": "import {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\nexport function BreadcrumbDemo() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <DropdownMenu>\n            <DropdownMenuTrigger className=\"flex items-center gap-1\">\n              <BreadcrumbEllipsis className=\"h-4 w-4\" />\n              <span className=\"sr-only\">Toggle menu</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem>Documentation</DropdownMenuItem>\n              <DropdownMenuItem>Themes</DropdownMenuItem>\n              <DropdownMenuItem>GitHub</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/docs/components\">Components</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/button-demo.tsx",
-      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport function ButtonDemo() {\n  return <Button>Button</Button>\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/calendar-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport function CalendarDemo() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date())\n\n  return (\n    <Calendar\n      mode=\"single\"\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-md border shadow\"\n    />\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/card-demo.tsx",
-      "content": "import { BellRing, Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { Switch } from \"@/registry/default/ui/switch\"\n\nconst notifications = [\n  {\n    title: \"Your call has been confirmed.\",\n    description: \"1 hour ago\",\n  },\n  {\n    title: \"You have a new message!\",\n    description: \"1 hour ago\",\n  },\n  {\n    title: \"Your subscription is expiring soon!\",\n    description: \"2 hours ago\",\n  },\n]\n\ntype CardProps = React.ComponentProps<typeof Card>\n\nexport function CardDemo({ className, ...props }: CardProps) {\n  return (\n    <Card className={cn(\"w-[380px]\", className)} {...props}>\n      <CardHeader>\n        <CardTitle>Notifications</CardTitle>\n        <CardDescription>You have 3 unread messages.</CardDescription>\n      </CardHeader>\n      <CardContent className=\"grid gap-4\">\n        <div className=\" flex items-center space-x-4 rounded-md border p-4\">\n          <BellRing />\n          <div className=\"flex-1 space-y-1\">\n            <p className=\"text-sm font-medium leading-none\">\n              Push Notifications\n            </p>\n            <p className=\"text-sm text-muted-foreground\">\n              Send notifications to device.\n            </p>\n          </div>\n          <Switch />\n        </div>\n        <div>\n          {notifications.map((notification, index) => (\n            <div\n              key={index}\n              className=\"mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0\"\n            >\n              <span className=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n              <div className=\"space-y-1\">\n                <p className=\"text-sm font-medium leading-none\">\n                  {notification.title}\n                </p>\n                <p className=\"text-sm text-muted-foreground\">\n                  {notification.description}\n                </p>\n              </div>\n            </div>\n          ))}\n        </div>\n      </CardContent>\n      <CardFooter>\n        <Button className=\"w-full\">\n          <Check /> Mark all as read\n        </Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/carousel-demo.tsx",
-      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/default/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/default/ui/carousel\"\n\nexport function CarouselDemo() {\n  return (\n    <Carousel className=\"w-full max-w-xs\">\n      <CarouselContent>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index}>\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/checkbox-demo.tsx",
-      "content": "\"use client\"\n\nimport { Checkbox } from \"@/registry/default/ui/checkbox\"\n\nexport function CheckboxDemo() {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Checkbox id=\"terms\" />\n      <label\n        htmlFor=\"terms\"\n        className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n      >\n        Accept terms and conditions\n      </label>\n    </div>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/collapsible-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\n\nexport function CollapsibleDemo() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Collapsible\n      open={isOpen}\n      onOpenChange={setIsOpen}\n      className=\"w-[350px] space-y-2\"\n    >\n      <div className=\"flex items-center justify-between space-x-4 px-4\">\n        <h4 className=\"text-sm font-semibold\">\n          @peduarte starred 3 repositories\n        </h4>\n        <CollapsibleTrigger asChild>\n          <Button variant=\"ghost\" size=\"sm\">\n            <ChevronsUpDown className=\"h-4 w-4\" />\n            <span className=\"sr-only\">Toggle</span>\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n        @radix-ui/primitives\n      </div>\n      <CollapsibleContent className=\"space-y-2\">\n        <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n          @radix-ui/colors\n        </div>\n        <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n          @stitches/react\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/combobox-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/default/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nconst frameworks = [\n  {\n    value: \"next.js\",\n    label: \"Next.js\",\n  },\n  {\n    value: \"sveltekit\",\n    label: \"SvelteKit\",\n  },\n  {\n    value: \"nuxt.js\",\n    label: \"Nuxt.js\",\n  },\n  {\n    value: \"remix\",\n    label: \"Remix\",\n  },\n  {\n    value: \"astro\",\n    label: \"Astro\",\n  },\n]\n\nexport function ComboboxDemo() {\n  const [open, setOpen] = React.useState(false)\n  const [value, setValue] = React.useState(\"\")\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          role=\"combobox\"\n          aria-expanded={open}\n          className=\"w-[200px] justify-between\"\n        >\n          {value\n            ? frameworks.find((framework) => framework.value === value)?.label\n            : \"Select framework...\"}\n          <ChevronsUpDown className=\"opacity-50\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-[200px] p-0\">\n        <Command>\n          <CommandInput placeholder=\"Search framework...\" className=\"h-9\" />\n          <CommandList>\n            <CommandEmpty>No framework found.</CommandEmpty>\n            <CommandGroup>\n              {frameworks.map((framework) => (\n                <CommandItem\n                  key={framework.value}\n                  value={framework.value}\n                  onSelect={(currentValue) => {\n                    setValue(currentValue === value ? \"\" : currentValue)\n                    setOpen(false)\n                  }}\n                >\n                  {framework.label}\n                  <Check\n                    className={cn(\n                      \"ml-auto\",\n                      value === framework.value ? \"opacity-100\" : \"opacity-0\"\n                    )}\n                  />\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/command-demo.tsx",
-      "content": "import {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from \"lucide-react\"\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/default/ui/command\"\n\nexport function CommandDemo() {\n  return (\n    <Command className=\"rounded-lg border shadow-md md:min-w-[450px]\">\n      <CommandInput placeholder=\"Type a command or search...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup heading=\"Suggestions\">\n          <CommandItem>\n            <Calendar />\n            <span>Calendar</span>\n          </CommandItem>\n          <CommandItem>\n            <Smile />\n            <span>Search Emoji</span>\n          </CommandItem>\n          <CommandItem disabled>\n            <Calculator />\n            <span>Calculator</span>\n          </CommandItem>\n        </CommandGroup>\n        <CommandSeparator />\n        <CommandGroup heading=\"Settings\">\n          <CommandItem>\n            <User />\n            <span>Profile</span>\n            <CommandShortcut>⌘P</CommandShortcut>\n          </CommandItem>\n          <CommandItem>\n            <CreditCard />\n            <span>Billing</span>\n            <CommandShortcut>⌘B</CommandShortcut>\n          </CommandItem>\n          <CommandItem>\n            <Settings />\n            <span>Settings</span>\n            <CommandShortcut>⌘S</CommandShortcut>\n          </CommandItem>\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/context-menu-demo.tsx",
-      "content": "import {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/default/ui/context-menu\"\n\nexport function ContextMenuDemo() {\n  return (\n    <ContextMenu>\n      <ContextMenuTrigger className=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n        Right click here\n      </ContextMenuTrigger>\n      <ContextMenuContent className=\"w-64\">\n        <ContextMenuItem inset>\n          Back\n          <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem inset disabled>\n          Forward\n          <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem inset>\n          Reload\n          <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuSub>\n          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>\n          <ContextMenuSubContent className=\"w-48\">\n            <ContextMenuItem>\n              Save Page As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n            <ContextMenuItem>Name Window...</ContextMenuItem>\n            <ContextMenuSeparator />\n            <ContextMenuItem>Developer Tools</ContextMenuItem>\n          </ContextMenuSubContent>\n        </ContextMenuSub>\n        <ContextMenuSeparator />\n        <ContextMenuCheckboxItem checked>\n          Show Bookmarks Bar\n          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n        </ContextMenuCheckboxItem>\n        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n        <ContextMenuSeparator />\n        <ContextMenuRadioGroup value=\"pedro\">\n          <ContextMenuLabel inset>People</ContextMenuLabel>\n          <ContextMenuSeparator />\n          <ContextMenuRadioItem value=\"pedro\">\n            Pedro Duarte\n          </ContextMenuRadioItem>\n          <ContextMenuRadioItem value=\"colm\">Colm Tuite</ContextMenuRadioItem>\n        </ContextMenuRadioGroup>\n      </ContextMenuContent>\n    </ContextMenu>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/date-picker-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport function DatePickerDemo() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          variant={\"outline\"}\n          className={cn(\n            \"w-[240px] justify-start text-left font-normal\",\n            !date && \"text-muted-foreground\"\n          )}\n        >\n          <CalendarIcon />\n          {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          initialFocus\n        />\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/dialog-demo.tsx",
-      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport function DialogDemo() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Edit Profile</Button>\n      </DialogTrigger>\n      <DialogContent className=\"sm:max-w-[425px]\">\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>\n            Make changes to your profile here. Click save when you're done.\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"grid gap-4 py-4\">\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"name\" className=\"text-right\">\n              Name\n            </Label>\n            <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n          </div>\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"username\" className=\"text-right\">\n              Username\n            </Label>\n            <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n          </div>\n        </div>\n        <DialogFooter>\n          <Button type=\"submit\">Save changes</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/drawer-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\"\n\nconst data = [\n  {\n    goal: 400,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 239,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 349,\n  },\n]\n\nexport function DrawerDemo() {\n  const [goal, setGoal] = React.useState(350)\n\n  function onClick(adjustment: number) {\n    setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n  }\n\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Open Drawer</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mx-auto w-full max-w-sm\">\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"p-4 pb-0\">\n            <div className=\"flex items-center justify-center space-x-2\">\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(-10)}\n                disabled={goal <= 200}\n              >\n                <Minus />\n                <span className=\"sr-only\">Decrease</span>\n              </Button>\n              <div className=\"flex-1 text-center\">\n                <div className=\"text-7xl font-bold tracking-tighter\">\n                  {goal}\n                </div>\n                <div className=\"text-[0.70rem] uppercase text-muted-foreground\">\n                  Calories/day\n                </div>\n              </div>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(10)}\n                disabled={goal >= 400}\n              >\n                <Plus />\n                <span className=\"sr-only\">Increase</span>\n              </Button>\n            </div>\n            <div className=\"mt-3 h-[120px]\">\n              <ResponsiveContainer width=\"100%\" height=\"100%\">\n                <BarChart data={data}>\n                  <Bar\n                    dataKey=\"goal\"\n                    style={\n                      {\n                        fill: \"hsl(var(--foreground))\",\n                        opacity: 0.9,\n                      } as React.CSSProperties\n                    }\n                  />\n                </BarChart>\n              </ResponsiveContainer>\n            </div>\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </div>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/dropdown-menu-demo.tsx",
-      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\nexport function DropdownMenuDemo() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-56\">\n        <DropdownMenuLabel>My Account</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            Profile\n            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Billing\n            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Settings\n            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Keyboard shortcuts\n            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>Team</DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem>Email</DropdownMenuItem>\n                <DropdownMenuItem>Message</DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>More...</DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n          <DropdownMenuItem>\n            New Team\n            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>GitHub</DropdownMenuItem>\n        <DropdownMenuItem>Support</DropdownMenuItem>\n        <DropdownMenuItem disabled>API</DropdownMenuItem>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          Log out\n          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/hover-card-demo.tsx",
-      "content": "import { CalendarIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/default/ui/hover-card\"\n\nexport function HoverCardDemo() {\n  return (\n    <HoverCard>\n      <HoverCardTrigger asChild>\n        <Button variant=\"link\">@nextjs</Button>\n      </HoverCardTrigger>\n      <HoverCardContent className=\"w-80\">\n        <div className=\"flex justify-between space-x-4\">\n          <Avatar>\n            <AvatarImage src=\"https://github.com/vercel.png\" />\n            <AvatarFallback>VC</AvatarFallback>\n          </Avatar>\n          <div className=\"space-y-1\">\n            <h4 className=\"text-sm font-semibold\">@nextjs</h4>\n            <p className=\"text-sm\">\n              The React Framework – created and maintained by @vercel.\n            </p>\n            <div className=\"flex items-center pt-2\">\n              <CalendarIcon className=\"mr-2 h-4 w-4 opacity-70\" />{\" \"}\n              <span className=\"text-xs text-muted-foreground\">\n                Joined December 2021\n              </span>\n            </div>\n          </div>\n        </div>\n      </HoverCardContent>\n    </HoverCard>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/input-demo.tsx",
-      "content": "import { Input } from \"@/registry/default/ui/input\"\n\nexport function InputDemo() {\n  return <Input type=\"email\" placeholder=\"Email\" />\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/input-otp-demo.tsx",
-      "content": "import {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/default/ui/input-otp\"\n\nexport function InputOTPDemo() {\n  return (\n    <InputOTP maxLength={6}>\n      <InputOTPGroup>\n        <InputOTPSlot index={0} />\n        <InputOTPSlot index={1} />\n        <InputOTPSlot index={2} />\n      </InputOTPGroup>\n      <InputOTPSeparator />\n      <InputOTPGroup>\n        <InputOTPSlot index={3} />\n        <InputOTPSlot index={4} />\n        <InputOTPSlot index={5} />\n      </InputOTPGroup>\n    </InputOTP>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/label-demo.tsx",
-      "content": "import { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport function LabelDemo() {\n  return (\n    <div>\n      <div className=\"flex items-center space-x-2\">\n        <Checkbox id=\"terms\" />\n        <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/menubar-demo.tsx",
-      "content": "import {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/default/ui/menubar\"\n\nexport function MenubarDemo() {\n  return (\n    <Menubar>\n      <MenubarMenu>\n        <MenubarTrigger>File</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>\n            New Window <MenubarShortcut>⌘N</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled>New Incognito Window</MenubarItem>\n          <MenubarSeparator />\n          <MenubarSub>\n            <MenubarSubTrigger>Share</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Email link</MenubarItem>\n              <MenubarItem>Messages</MenubarItem>\n              <MenubarItem>Notes</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n          <MenubarSeparator />\n          <MenubarItem>\n            Print... <MenubarShortcut>⌘P</MenubarShortcut>\n          </MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>Edit</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>\n            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarSeparator />\n          <MenubarSub>\n            <MenubarSubTrigger>Find</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Search the web</MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem>Find...</MenubarItem>\n              <MenubarItem>Find Next</MenubarItem>\n              <MenubarItem>Find Previous</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n          <MenubarSeparator />\n          <MenubarItem>Cut</MenubarItem>\n          <MenubarItem>Copy</MenubarItem>\n          <MenubarItem>Paste</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>View</MenubarTrigger>\n        <MenubarContent>\n          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n          <MenubarCheckboxItem checked>\n            Always Show Full URLs\n          </MenubarCheckboxItem>\n          <MenubarSeparator />\n          <MenubarItem inset>\n            Reload <MenubarShortcut>⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled inset>\n            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Toggle Fullscreen</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Hide Sidebar</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>Profiles</MenubarTrigger>\n        <MenubarContent>\n          <MenubarRadioGroup value=\"benoit\">\n            <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n            <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n            <MenubarRadioItem value=\"Luis\">Luis</MenubarRadioItem>\n          </MenubarRadioGroup>\n          <MenubarSeparator />\n          <MenubarItem inset>Edit...</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Add Profile...</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n    </Menubar>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/navigation-menu-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/default/ui/navigation-menu\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport function NavigationMenuDemo() {\n  return (\n    <NavigationMenu>\n      <NavigationMenuList>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n              <li className=\"row-span-3\">\n                <NavigationMenuLink asChild>\n                  <a\n                    className=\"flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md\"\n                    href=\"/\"\n                  >\n                    <div className=\"mb-2 mt-4 text-lg font-medium\">\n                      shadcn/ui\n                    </div>\n                    <p className=\"text-sm leading-tight text-muted-foreground\">\n                      Beautifully designed components built with Radix UI and\n                      Tailwind CSS.\n                    </p>\n                  </a>\n                </NavigationMenuLink>\n              </li>\n              <ListItem href=\"/docs\" title=\"Introduction\">\n                Re-usable components built using Radix UI and Tailwind CSS.\n              </ListItem>\n              <ListItem href=\"/docs/installation\" title=\"Installation\">\n                How to install dependencies and structure your app.\n              </ListItem>\n              <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                Styles for headings, paragraphs, lists...etc\n              </ListItem>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n              {components.map((component) => (\n                <ListItem\n                  key={component.title}\n                  title={component.title}\n                  href={component.href}\n                >\n                  {component.description}\n                </ListItem>\n              ))}\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <Link href=\"/docs\" legacyBehavior passHref>\n            <NavigationMenuLink className={navigationMenuTriggerStyle()}>\n              Documentation\n            </NavigationMenuLink>\n          </Link>\n        </NavigationMenuItem>\n      </NavigationMenuList>\n    </NavigationMenu>\n  )\n}\n\nconst ListItem = React.forwardRef<\n  React.ElementRef<\"a\">,\n  React.ComponentPropsWithoutRef<\"a\">\n>(({ className, title, children, ...props }, ref) => {\n  return (\n    <li>\n      <NavigationMenuLink asChild>\n        <a\n          ref={ref}\n          className={cn(\n            \"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\",\n            className\n          )}\n          {...props}\n        >\n          <div className=\"text-sm font-medium leading-none\">{title}</div>\n          <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n            {children}\n          </p>\n        </a>\n      </NavigationMenuLink>\n    </li>\n  )\n})\nListItem.displayName = \"ListItem\"\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/pagination-demo.tsx",
-      "content": "import {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/default/ui/pagination\"\n\nexport function PaginationDemo() {\n  return (\n    <Pagination>\n      <PaginationContent>\n        <PaginationItem>\n          <PaginationPrevious href=\"#\" />\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\">1</PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\" isActive>\n            2\n          </PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\">3</PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationEllipsis />\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationNext href=\"#\" />\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/popover-demo.tsx",
-      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport function PopoverDemo() {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button variant=\"outline\">Open popover</Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-80\">\n        <div className=\"grid gap-4\">\n          <div className=\"space-y-2\">\n            <h4 className=\"font-medium leading-none\">Dimensions</h4>\n            <p className=\"text-sm text-muted-foreground\">\n              Set the dimensions for the layer.\n            </p>\n          </div>\n          <div className=\"grid gap-2\">\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"width\">Width</Label>\n              <Input\n                id=\"width\"\n                defaultValue=\"100%\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxWidth\">Max. width</Label>\n              <Input\n                id=\"maxWidth\"\n                defaultValue=\"300px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"height\">Height</Label>\n              <Input\n                id=\"height\"\n                defaultValue=\"25px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxHeight\">Max. height</Label>\n              <Input\n                id=\"maxHeight\"\n                defaultValue=\"none\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n          </div>\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/progress-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Progress } from \"@/registry/default/ui/progress\"\n\nexport function ProgressDemo() {\n  const [progress, setProgress] = React.useState(13)\n\n  React.useEffect(() => {\n    const timer = setTimeout(() => setProgress(66), 500)\n    return () => clearTimeout(timer)\n  }, [])\n\n  return <Progress value={progress} className=\"w-[60%]\" />\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/radio-group-demo.tsx",
-      "content": "import { Label } from \"@/registry/default/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\"\n\nexport function RadioGroupDemo() {\n  return (\n    <RadioGroup defaultValue=\"comfortable\">\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"default\" id=\"r1\" />\n        <Label htmlFor=\"r1\">Default</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n        <Label htmlFor=\"r2\">Comfortable</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"compact\" id=\"r3\" />\n        <Label htmlFor=\"r3\">Compact</Label>\n      </div>\n    </RadioGroup>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/resizable-handle.tsx",
-      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/default/ui/resizable\"\n\nexport function ResizableHandleDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"horizontal\"\n      className=\"min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={25}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Sidebar</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel defaultSize={75}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Content</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/scroll-area-demo.tsx",
-      "content": "import * as React from \"react\"\n\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\"\nimport { Separator } from \"@/registry/default/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nexport function ScrollAreaDemo() {\n  return (\n    <ScrollArea className=\"h-72 w-48 rounded-md border\">\n      <div className=\"p-4\">\n        <h4 className=\"mb-4 text-sm font-medium leading-none\">Tags</h4>\n        {tags.map((tag) => (\n          <React.Fragment key={tag}>\n            <div className=\"text-sm\">{tag}</div>\n            <Separator className=\"my-2\" />\n          </React.Fragment>\n        ))}\n      </div>\n    </ScrollArea>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/select-demo.tsx",
-      "content": "import * as React from \"react\"\n\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nexport function SelectDemo() {\n  return (\n    <Select>\n      <SelectTrigger className=\"w-[180px]\">\n        <SelectValue placeholder=\"Select a fruit\" />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectGroup>\n          <SelectLabel>Fruits</SelectLabel>\n          <SelectItem value=\"apple\">Apple</SelectItem>\n          <SelectItem value=\"banana\">Banana</SelectItem>\n          <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          <SelectItem value=\"grapes\">Grapes</SelectItem>\n          <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n        </SelectGroup>\n      </SelectContent>\n    </Select>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/separator-demo.tsx",
-      "content": "import { Separator } from \"@/registry/default/ui/separator\"\n\nexport function SeparatorDemo() {\n  return (\n    <div>\n      <div className=\"space-y-1\">\n        <h4 className=\"text-sm font-medium leading-none\">Radix Primitives</h4>\n        <p className=\"text-sm text-muted-foreground\">\n          An open-source UI component library.\n        </p>\n      </div>\n      <Separator className=\"my-4\" />\n      <div className=\"flex h-5 items-center space-x-4 text-sm\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/sheet-demo.tsx",
-      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/default/ui/sheet\"\n\nexport function SheetDemo() {\n  return (\n    <Sheet>\n      <SheetTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </SheetTrigger>\n      <SheetContent>\n        <SheetHeader>\n          <SheetTitle>Edit profile</SheetTitle>\n          <SheetDescription>\n            Make changes to your profile here. Click save when you're done.\n          </SheetDescription>\n        </SheetHeader>\n        <div className=\"grid gap-4 py-4\">\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"name\" className=\"text-right\">\n              Name\n            </Label>\n            <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n          </div>\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"username\" className=\"text-right\">\n              Username\n            </Label>\n            <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n          </div>\n        </div>\n        <SheetFooter>\n          <SheetClose asChild>\n            <Button type=\"submit\">Save changes</Button>\n          </SheetClose>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/skeleton-demo.tsx",
-      "content": "import { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nexport function SkeletonDemo() {\n  return (\n    <div className=\"flex items-center space-x-4\">\n      <Skeleton className=\"h-12 w-12 rounded-full\" />\n      <div className=\"space-y-2\">\n        <Skeleton className=\"h-4 w-[250px]\" />\n        <Skeleton className=\"h-4 w-[200px]\" />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/slider-demo.tsx",
-      "content": "import { cn } from \"@/lib/utils\"\nimport { Slider } from \"@/registry/default/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport function SliderDemo({ className, ...props }: SliderProps) {\n  return (\n    <Slider\n      defaultValue={[50]}\n      max={100}\n      step={1}\n      className={cn(\"w-[60%]\", className)}\n      {...props}\n    />\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/sonner-demo.tsx",
-      "content": "\"use client\"\n\nimport { toast } from \"sonner\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport function SonnerDemo() {\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() =>\n        toast(\"Event has been created\", {\n          description: \"Sunday, December 03, 2023 at 9:00 AM\",\n          action: {\n            label: \"Undo\",\n            onClick: () => console.log(\"Undo\"),\n          },\n        })\n      }\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/switch-demo.tsx",
-      "content": "import { Label } from \"@/registry/default/ui/label\"\nimport { Switch } from \"@/registry/default/ui/switch\"\n\nexport function SwitchDemo() {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Switch id=\"airplane-mode\" />\n      <Label htmlFor=\"airplane-mode\">Airplane Mode</Label>\n    </div>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/table-demo.tsx",
-      "content": "import {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport function TableDemo() {\n  return (\n    <Table>\n      <TableCaption>A list of your recent invoices.</TableCaption>\n      <TableHeader>\n        <TableRow>\n          <TableHead className=\"w-[100px]\">Invoice</TableHead>\n          <TableHead>Status</TableHead>\n          <TableHead>Method</TableHead>\n          <TableHead className=\"text-right\">Amount</TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        {invoices.map((invoice) => (\n          <TableRow key={invoice.invoice}>\n            <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n            <TableCell>{invoice.paymentStatus}</TableCell>\n            <TableCell>{invoice.paymentMethod}</TableCell>\n            <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n      <TableFooter>\n        <TableRow>\n          <TableCell colSpan={3}>Total</TableCell>\n          <TableCell className=\"text-right\">$2,500.00</TableCell>\n        </TableRow>\n      </TableFooter>\n    </Table>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/tabs-demo.tsx",
-      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\"\n\nexport function TabsDemo() {\n  return (\n    <Tabs defaultValue=\"account\" className=\"w-[400px]\">\n      <TabsList className=\"grid w-full grid-cols-2\">\n        <TabsTrigger value=\"account\">Account</TabsTrigger>\n        <TabsTrigger value=\"password\">Password</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"account\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Account</CardTitle>\n            <CardDescription>\n              Make changes to your account here. Click save when you're done.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"space-y-2\">\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"name\">Name</Label>\n              <Input id=\"name\" defaultValue=\"Pedro Duarte\" />\n            </div>\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"username\">Username</Label>\n              <Input id=\"username\" defaultValue=\"@peduarte\" />\n            </div>\n          </CardContent>\n          <CardFooter>\n            <Button>Save changes</Button>\n          </CardFooter>\n        </Card>\n      </TabsContent>\n      <TabsContent value=\"password\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Password</CardTitle>\n            <CardDescription>\n              Change your password here. After saving, you'll be logged out.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"space-y-2\">\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"current\">Current password</Label>\n              <Input id=\"current\" type=\"password\" />\n            </div>\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"new\">New password</Label>\n              <Input id=\"new\" type=\"password\" />\n            </div>\n          </CardContent>\n          <CardFooter>\n            <Button>Save password</Button>\n          </CardFooter>\n        </Card>\n      </TabsContent>\n    </Tabs>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/textarea-demo.tsx",
-      "content": "import { Textarea } from \"@/registry/default/ui/textarea\"\n\nexport function TextareaDemo() {\n  return <Textarea placeholder=\"Type your message here.\" />\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/toast-demo.tsx",
-      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { ToastAction } from \"@/registry/default/ui/toast\"\n\nexport function ToastDemo() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          title: \"Scheduled: Catch up \",\n          description: \"Friday, February 10, 2023 at 5:57 PM\",\n          action: (\n            <ToastAction altText=\"Goto schedule to undo\">Undo</ToastAction>\n          ),\n        })\n      }}\n    >\n      Add to calendar\n    </Button>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/toggle-demo.tsx",
-      "content": "import { Bold } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/default/ui/toggle\"\n\nexport function ToggleDemo() {\n  return (\n    <Toggle aria-label=\"Toggle italic\">\n      <Bold className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/toggle-group-demo.tsx",
-      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/default/ui/toggle-group\"\n\nexport function ToggleGroupDemo() {\n  return (\n    <ToggleGroup type=\"multiple\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/tooltip-demo.tsx",
-      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\"\n\nexport function TooltipDemo() {\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\">Hover</Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/badge-destructive.tsx",
-      "content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport function BadgeDestructive() {\n  return <Badge variant=\"destructive\">Destructive</Badge>\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/badge-outline.tsx",
-      "content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport function BadgeOutline() {\n  return <Badge variant=\"outline\">Outline</Badge>\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/badge-secondary.tsx",
-      "content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport function BadgeSecondary() {\n  return <Badge variant=\"secondary\">Secondary</Badge>\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/button-destructive.tsx",
-      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport function ButtonDestructive() {\n  return <Button variant=\"destructive\">Destructive</Button>\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/button-ghost.tsx",
-      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport function ButtonGhost() {\n  return <Button variant=\"ghost\">Ghost</Button>\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/button-link.tsx",
-      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport function ButtonLink() {\n  return <Button variant=\"link\">Link</Button>\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/button-loading.tsx",
-      "content": "import { Loader2 } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport function ButtonLoading() {\n  return (\n    <Button disabled>\n      <Loader2 className=\"animate-spin\" />\n      Please wait\n    </Button>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/button-outline.tsx",
-      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport function ButtonOutline() {\n  return <Button variant=\"outline\">Outline</Button>\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/button-secondary.tsx",
-      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport function ButtonSecondary() {\n  return <Button variant=\"secondary\">Secondary</Button>\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/button-with-icon.tsx",
-      "content": "import { MailOpen } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport function ButtonWithIcon() {\n  return (\n    <Button>\n      <MailOpen /> Login with Email\n    </Button>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/toggle-disabled.tsx",
-      "content": "import { Underline } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/default/ui/toggle\"\n\nexport function ToggleDisabled() {\n  return (\n    <Toggle aria-label=\"Toggle italic\" disabled>\n      <Underline className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/toggle-outline.tsx",
-      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/default/ui/toggle\"\n\nexport function ToggleOutline() {\n  return (\n    <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n      <Italic />\n    </Toggle>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/toggle-with-text.tsx",
-      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/default/ui/toggle\"\n\nexport function ToggleWithText() {\n  return (\n    <Toggle aria-label=\"Toggle italic\">\n      <Italic />\n      Italic\n    </Toggle>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york/registry.json b/apps/v4/public/r/styles/new-york/registry.json
index 561bec85d8..fee87c19bb 100644
--- a/apps/v4/public/r/styles/new-york/registry.json
+++ b/apps/v4/public/r/styles/new-york/registry.json
@@ -4153,390 +4153,6 @@
         }
       }
     },
-    {
-      "name": "sink",
-      "type": "registry:internal",
-      "registryDependencies": [
-        "accordion",
-        "alert",
-        "alert-dialog",
-        "aspect-ratio",
-        "avatar",
-        "badge",
-        "breadcrumb",
-        "button",
-        "calendar",
-        "card",
-        "carousel",
-        "chart",
-        "checkbox",
-        "collapsible",
-        "command",
-        "context-menu",
-        "dialog",
-        "drawer",
-        "dropdown-menu",
-        "hover-card",
-        "input",
-        "input-otp",
-        "label",
-        "menubar",
-        "navigation-menu",
-        "pagination",
-        "popover",
-        "progress",
-        "radio-group",
-        "resizable",
-        "scroll-area",
-        "select",
-        "separator",
-        "sheet",
-        "sidebar",
-        "skeleton",
-        "slider",
-        "sonner",
-        "switch",
-        "table",
-        "tabs",
-        "textarea",
-        "toast",
-        "toggle",
-        "toggle-group",
-        "tooltip"
-      ],
-      "files": [
-        {
-          "path": "registry/new-york/internal/sink/page.tsx",
-          "type": "registry:page",
-          "target": "app/sink/page.tsx"
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/app-sidebar.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/component-wrapper.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/nav-main.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/nav-projects.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/nav-user.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/team-switcher.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/accordion-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/alert-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/alert-dialog-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/aspect-ratio-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/avatar-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/badge-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/breadcrumb-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/button-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/calendar-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/card-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/carousel-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/checkbox-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/collapsible-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/combobox-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/command-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/context-menu-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/date-picker-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/dialog-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/drawer-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/dropdown-menu-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/hover-card-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/input-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/input-otp-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/label-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/menubar-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/navigation-menu-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/pagination-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/popover-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/progress-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/radio-group-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/resizable-handle.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/scroll-area-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/select-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/separator-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/sheet-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/skeleton-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/slider-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/sonner-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/switch-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/table-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/tabs-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/textarea-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/toast-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/toggle-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/toggle-group-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/tooltip-demo.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/badge-destructive.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/badge-outline.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/badge-secondary.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/button-destructive.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/button-ghost.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/button-link.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/button-loading.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/button-outline.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/button-secondary.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/button-with-icon.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/toggle-disabled.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/toggle-outline.tsx",
-          "type": "registry:component",
-          "target": ""
-        },
-        {
-          "path": "registry/new-york/internal/sink/components/toggle-with-text.tsx",
-          "type": "registry:component",
-          "target": ""
-        }
-      ]
-    },
     {
       "name": "sidebar-demo",
       "type": "registry:internal",
@@ -7035,4 +6651,4 @@
       ]
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/apps/v4/public/r/styles/new-york/sink.json b/apps/v4/public/r/styles/new-york/sink.json
deleted file mode 100644
index dd7bdb1263..0000000000
--- a/apps/v4/public/r/styles/new-york/sink.json
+++ /dev/null
@@ -1,452 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "sink",
-  "type": "registry:internal",
-  "author": "shadcn (https://ui.shadcn.com)",
-  "registryDependencies": [
-    "accordion",
-    "alert",
-    "alert-dialog",
-    "aspect-ratio",
-    "avatar",
-    "badge",
-    "breadcrumb",
-    "button",
-    "calendar",
-    "card",
-    "carousel",
-    "chart",
-    "checkbox",
-    "collapsible",
-    "command",
-    "context-menu",
-    "dialog",
-    "drawer",
-    "dropdown-menu",
-    "hover-card",
-    "input",
-    "input-otp",
-    "label",
-    "menubar",
-    "navigation-menu",
-    "pagination",
-    "popover",
-    "progress",
-    "radio-group",
-    "resizable",
-    "scroll-area",
-    "select",
-    "separator",
-    "sheet",
-    "sidebar",
-    "skeleton",
-    "slider",
-    "sonner",
-    "switch",
-    "table",
-    "tabs",
-    "textarea",
-    "toast",
-    "toggle",
-    "toggle-group",
-    "tooltip"
-  ],
-  "files": [
-    {
-      "path": "internal/sink/page.tsx",
-      "content": "import { AccordionDemo } from \"@/registry/new-york/internal/sink/components/accordion-demo\"\nimport { AlertDemo } from \"@/registry/new-york/internal/sink/components/alert-demo\"\nimport { AlertDialogDemo } from \"@/registry/new-york/internal/sink/components/alert-dialog-demo\"\nimport { AppSidebar } from \"@/registry/new-york/internal/sink/components/app-sidebar\"\nimport { AspectRatioDemo } from \"@/registry/new-york/internal/sink/components/aspect-ratio-demo\"\nimport { AvatarDemo } from \"@/registry/new-york/internal/sink/components/avatar-demo\"\nimport { BadgeDemo } from \"@/registry/new-york/internal/sink/components/badge-demo\"\nimport { BadgeDestructive } from \"@/registry/new-york/internal/sink/components/badge-destructive\"\nimport { BadgeOutline } from \"@/registry/new-york/internal/sink/components/badge-outline\"\nimport { BadgeSecondary } from \"@/registry/new-york/internal/sink/components/badge-secondary\"\nimport { BreadcrumbDemo } from \"@/registry/new-york/internal/sink/components/breadcrumb-demo\"\nimport { ButtonDemo } from \"@/registry/new-york/internal/sink/components/button-demo\"\nimport { ButtonDestructive } from \"@/registry/new-york/internal/sink/components/button-destructive\"\nimport { ButtonGhost } from \"@/registry/new-york/internal/sink/components/button-ghost\"\nimport { ButtonLink } from \"@/registry/new-york/internal/sink/components/button-link\"\nimport { ButtonLoading } from \"@/registry/new-york/internal/sink/components/button-loading\"\nimport { ButtonOutline } from \"@/registry/new-york/internal/sink/components/button-outline\"\nimport { ButtonSecondary } from \"@/registry/new-york/internal/sink/components/button-secondary\"\nimport { ButtonWithIcon } from \"@/registry/new-york/internal/sink/components/button-with-icon\"\nimport { CalendarDemo } from \"@/registry/new-york/internal/sink/components/calendar-demo\"\nimport { CardDemo } from \"@/registry/new-york/internal/sink/components/card-demo\"\nimport { CarouselDemo } from \"@/registry/new-york/internal/sink/components/carousel-demo\"\nimport { CheckboxDemo } from \"@/registry/new-york/internal/sink/components/checkbox-demo\"\nimport { CollapsibleDemo } from \"@/registry/new-york/internal/sink/components/collapsible-demo\"\nimport { ComboboxDemo } from \"@/registry/new-york/internal/sink/components/combobox-demo\"\nimport { CommandDemo } from \"@/registry/new-york/internal/sink/components/command-demo\"\nimport { ComponentWrapper } from \"@/registry/new-york/internal/sink/components/component-wrapper\"\nimport { ContextMenuDemo } from \"@/registry/new-york/internal/sink/components/context-menu-demo\"\nimport { DatePickerDemo } from \"@/registry/new-york/internal/sink/components/date-picker-demo\"\nimport { DialogDemo } from \"@/registry/new-york/internal/sink/components/dialog-demo\"\nimport { DrawerDemo } from \"@/registry/new-york/internal/sink/components/drawer-demo\"\nimport { DropdownMenuDemo } from \"@/registry/new-york/internal/sink/components/dropdown-menu-demo\"\nimport { HoverCardDemo } from \"@/registry/new-york/internal/sink/components/hover-card-demo\"\nimport { InputDemo } from \"@/registry/new-york/internal/sink/components/input-demo\"\nimport { InputOTPDemo } from \"@/registry/new-york/internal/sink/components/input-otp-demo\"\nimport { LabelDemo } from \"@/registry/new-york/internal/sink/components/label-demo\"\nimport { MenubarDemo } from \"@/registry/new-york/internal/sink/components/menubar-demo\"\nimport { NavigationMenuDemo } from \"@/registry/new-york/internal/sink/components/navigation-menu-demo\"\nimport { PaginationDemo } from \"@/registry/new-york/internal/sink/components/pagination-demo\"\nimport { PopoverDemo } from \"@/registry/new-york/internal/sink/components/popover-demo\"\nimport { ProgressDemo } from \"@/registry/new-york/internal/sink/components/progress-demo\"\nimport { RadioGroupDemo } from \"@/registry/new-york/internal/sink/components/radio-group-demo\"\nimport { ResizableHandleDemo } from \"@/registry/new-york/internal/sink/components/resizable-handle\"\nimport { ScrollAreaDemo } from \"@/registry/new-york/internal/sink/components/scroll-area-demo\"\nimport { SelectDemo } from \"@/registry/new-york/internal/sink/components/select-demo\"\nimport { SeparatorDemo } from \"@/registry/new-york/internal/sink/components/separator-demo\"\nimport { SheetDemo } from \"@/registry/new-york/internal/sink/components/sheet-demo\"\nimport { SkeletonDemo } from \"@/registry/new-york/internal/sink/components/skeleton-demo\"\nimport { SliderDemo } from \"@/registry/new-york/internal/sink/components/slider-demo\"\nimport { SonnerDemo } from \"@/registry/new-york/internal/sink/components/sonner-demo\"\nimport { SwitchDemo } from \"@/registry/new-york/internal/sink/components/switch-demo\"\nimport { TableDemo } from \"@/registry/new-york/internal/sink/components/table-demo\"\nimport { TabsDemo } from \"@/registry/new-york/internal/sink/components/tabs-demo\"\nimport { TextareaDemo } from \"@/registry/new-york/internal/sink/components/textarea-demo\"\nimport { ToastDemo } from \"@/registry/new-york/internal/sink/components/toast-demo\"\nimport { ToggleDemo } from \"@/registry/new-york/internal/sink/components/toggle-demo\"\nimport { ToggleDisabled } from \"@/registry/new-york/internal/sink/components/toggle-disabled\"\nimport { ToggleGroupDemo } from \"@/registry/new-york/internal/sink/components/toggle-group-demo\"\nimport { ToggleOutline } from \"@/registry/new-york/internal/sink/components/toggle-outline\"\nimport { ToggleWithText } from \"@/registry/new-york/internal/sink/components/toggle-with-text\"\nimport { TooltipDemo } from \"@/registry/new-york/internal/sink/components/tooltip-demo\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport default function SinkPage() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Building Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3\">\n            <ComponentWrapper name=\"Accordion\">\n              <AccordionDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Alert\">\n              <AlertDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"AlertDialog\">\n              <AlertDialogDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"AspectRatio\">\n              <AspectRatioDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Avatar\">\n              <AvatarDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Badge\">\n              <BadgeDemo />\n              <BadgeDestructive />\n              <BadgeOutline />\n              <BadgeSecondary />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Breadcrumb\">\n              <BreadcrumbDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Button\">\n              <div className=\"flex items-center gap-2\">\n                <ButtonDemo />\n                <ButtonDestructive />\n                <ButtonGhost />\n                <ButtonLink />\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <ButtonLoading />\n                <ButtonOutline />\n                <ButtonSecondary />\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <ButtonWithIcon />\n              </div>\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Calendar\">\n              <CalendarDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Card\">\n              <CardDemo className=\"w-full\" />\n            </ComponentWrapper>\n            <ComponentWrapper\n              name=\"Carousel\"\n              className=\"[&_.max-w-xs]:max-w-[70%]\"\n            >\n              <CarouselDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Checkbox\">\n              <CheckboxDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Collapsible\">\n              <CollapsibleDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Combobox\">\n              <ComboboxDemo />\n            </ComponentWrapper>\n            <ComponentWrapper\n              name=\"Command\"\n              className=\"[&_[cmdk-root]]:md:min-w-max\"\n            >\n              <CommandDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"ContextMenu\">\n              <ContextMenuDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"DatePicker\">\n              <DatePickerDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Dialog\">\n              <DialogDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Drawer\">\n              <DrawerDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"DropdownMenu\">\n              <DropdownMenuDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"HoverCard\">\n              <HoverCardDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Input\">\n              <InputDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"InputOTP\">\n              <InputOTPDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Label\">\n              <LabelDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Menubar\">\n              <MenubarDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"NavigationMenu\" className=\"col-span-2\">\n              <NavigationMenuDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Pagination\">\n              <PaginationDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Popover\">\n              <PopoverDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Progress\">\n              <ProgressDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"RadioGroup\">\n              <RadioGroupDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Resizable\" className=\"col-span-2\">\n              <ResizableHandleDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"ScrollArea\">\n              <ScrollAreaDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Select\">\n              <SelectDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Separator\">\n              <SeparatorDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Sheet\">\n              <SheetDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Skeleton\">\n              <SkeletonDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Slider\">\n              <SliderDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Sonner\">\n              <SonnerDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Switch\">\n              <SwitchDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Table\" className=\"col-span-2\">\n              <TableDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Tabs\">\n              <TabsDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Textarea\">\n              <TextareaDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Toast\">\n              <ToastDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Toggle\">\n              <div className=\"flex items-center gap-2\">\n                <ToggleDemo />\n                <ToggleDisabled />\n                <ToggleOutline />\n                <ToggleWithText />\n              </div>\n            </ComponentWrapper>\n            <ComponentWrapper name=\"ToggleGroup\">\n              <ToggleGroupDemo />\n            </ComponentWrapper>\n            <ComponentWrapper name=\"Tooltip\">\n              <TooltipDemo />\n            </ComponentWrapper>\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/sink/page.tsx"
-    },
-    {
-      "path": "internal/sink/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  AudioWaveform,\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  GalleryVerticalEnd,\n  Map,\n  PieChart,\n  Settings2,\n  SquareTerminal,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/new-york/blocks/sidebar-07/components/nav-main\"\nimport { NavProjects } from \"@/registry/new-york/blocks/sidebar-07/components/nav-projects\"\nimport { NavUser } from \"@/registry/new-york/blocks/sidebar-07/components/nav-user\"\nimport { TeamSwitcher } from \"@/registry/new-york/blocks/sidebar-07/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: GalleryVerticalEnd,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar collapsible=\"icon\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/component-wrapper.tsx",
-      "content": "import { cn } from \"@/registry/new-york/lib/utils\"\n\nexport function ComponentWrapper({\n  className,\n  name,\n  children,\n  ...props\n}: React.ComponentPropsWithoutRef<\"div\"> & { name: string }) {\n  return (\n    <div\n      className={cn(\"flex w-full flex-col rounded-lg border\", className)}\n      {...props}\n    >\n      <div className=\"border-b px-4 py-3\">\n        <div className=\"text-sm font-medium\">{name}</div>\n      </div>\n      <div className=\"flex flex-1 flex-col items-center justify-center gap-2 p-4 [&>div]:max-w-full\">\n        {children}\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/nav-main.tsx",
-      "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible\n            key={item.title}\n            asChild\n            defaultOpen={item.isActive}\n            className=\"group/collapsible\"\n          >\n            <SidebarMenuItem>\n              <CollapsibleTrigger asChild>\n                <SidebarMenuButton tooltip={item.title}>\n                  {item.icon && <item.icon />}\n                  <span>{item.title}</span>\n                  <ChevronRight className=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                </SidebarMenuButton>\n              </CollapsibleTrigger>\n              <CollapsibleContent>\n                <SidebarMenuSub>\n                  {item.items?.map((subItem) => (\n                    <SidebarMenuSubItem key={subItem.title}>\n                      <SidebarMenuSubButton asChild>\n                        <a href={subItem.url}>\n                          <span>{subItem.title}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  ))}\n                </SidebarMenuSub>\n              </CollapsibleContent>\n            </SidebarMenuItem>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/nav-projects.tsx",
-      "content": "\"use client\"\n\nimport {\n  Folder,\n  Forward,\n  MoreHorizontal,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavProjects({\n  projects,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-48 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <Folder className=\"text-muted-foreground\" />\n                  <span>View Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <Forward className=\"text-muted-foreground\" />\n                  <span>Share Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete Project</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontal className=\"text-sidebar-foreground/70\" />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/nav-user.tsx",
-      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown, Plus } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/ui/sidebar\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <activeTeam.logo className=\"size-4\" />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">\n                  {activeTeam.name}\n                </span>\n                <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-sm border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/accordion-demo.tsx",
-      "content": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/new-york/ui/accordion\"\n\nexport function AccordionDemo() {\n  return (\n    <Accordion type=\"single\" collapsible className=\"w-full\">\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>Is it accessible?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It adheres to the WAI-ARIA design pattern.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\">\n        <AccordionTrigger>Is it styled?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It comes with default styles that matches the other\n          components&apos; aesthetic.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\">\n        <AccordionTrigger>Is it animated?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It's animated by default, but you can disable it if you prefer.\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/alert-demo.tsx",
-      "content": "import { Terminal } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/new-york/ui/alert\"\n\nexport function AlertDemo() {\n  return (\n    <Alert>\n      <Terminal className=\"h-4 w-4\" />\n      <AlertTitle>Heads up!</AlertTitle>\n      <AlertDescription>\n        You can add components to your app using the cli.\n      </AlertDescription>\n    </Alert>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/alert-dialog-demo.tsx",
-      "content": "import {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/new-york/ui/alert-dialog\"\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport function AlertDialogDemo() {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"outline\">Show Dialog</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent>\n        <AlertDialogHeader>\n          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n          <AlertDialogDescription>\n            This action cannot be undone. This will permanently delete your\n            account and remove your data from our servers.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\n          <AlertDialogAction>Continue</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/aspect-ratio-demo.tsx",
-      "content": "import Image from \"next/image\"\n\nimport { AspectRatio } from \"@/registry/new-york/ui/aspect-ratio\"\n\nexport function AspectRatioDemo() {\n  return (\n    <AspectRatio ratio={16 / 9} className=\"bg-muted\">\n      <Image\n        src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n        alt=\"Photo by Drew Beamer\"\n        fill\n        className=\"h-full w-full rounded-md object-cover\"\n      />\n    </AspectRatio>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/avatar-demo.tsx",
-      "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\n\nexport function AvatarDemo() {\n  return (\n    <Avatar>\n      <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n      <AvatarFallback>CN</AvatarFallback>\n    </Avatar>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/badge-demo.tsx",
-      "content": "import { Badge } from \"@/registry/new-york/ui/badge\"\n\nexport function BadgeDemo() {\n  return <Badge>Badge</Badge>\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/breadcrumb-demo.tsx",
-      "content": "import {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\n\nexport function BreadcrumbDemo() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <DropdownMenu>\n            <DropdownMenuTrigger className=\"flex items-center gap-1\">\n              <BreadcrumbEllipsis className=\"h-4 w-4\" />\n              <span className=\"sr-only\">Toggle menu</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem>Documentation</DropdownMenuItem>\n              <DropdownMenuItem>Themes</DropdownMenuItem>\n              <DropdownMenuItem>GitHub</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/docs/components\">Components</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/button-demo.tsx",
-      "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport function ButtonDemo() {\n  return <Button>Button</Button>\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/calendar-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\n\nexport function CalendarDemo() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date())\n\n  return (\n    <Calendar\n      mode=\"single\"\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-md border shadow\"\n    />\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/card-demo.tsx",
-      "content": "import { BellRing, Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport { Switch } from \"@/registry/new-york/ui/switch\"\n\nconst notifications = [\n  {\n    title: \"Your call has been confirmed.\",\n    description: \"1 hour ago\",\n  },\n  {\n    title: \"You have a new message!\",\n    description: \"1 hour ago\",\n  },\n  {\n    title: \"Your subscription is expiring soon!\",\n    description: \"2 hours ago\",\n  },\n]\n\ntype CardProps = React.ComponentProps<typeof Card>\n\nexport function CardDemo({ className, ...props }: CardProps) {\n  return (\n    <Card className={cn(\"w-[380px]\", className)} {...props}>\n      <CardHeader>\n        <CardTitle>Notifications</CardTitle>\n        <CardDescription>You have 3 unread messages.</CardDescription>\n      </CardHeader>\n      <CardContent className=\"grid gap-4\">\n        <div className=\" flex items-center space-x-4 rounded-md border p-4\">\n          <BellRing />\n          <div className=\"flex-1 space-y-1\">\n            <p className=\"text-sm font-medium leading-none\">\n              Push Notifications\n            </p>\n            <p className=\"text-sm text-muted-foreground\">\n              Send notifications to device.\n            </p>\n          </div>\n          <Switch />\n        </div>\n        <div>\n          {notifications.map((notification, index) => (\n            <div\n              key={index}\n              className=\"mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0\"\n            >\n              <span className=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n              <div className=\"space-y-1\">\n                <p className=\"text-sm font-medium leading-none\">\n                  {notification.title}\n                </p>\n                <p className=\"text-sm text-muted-foreground\">\n                  {notification.description}\n                </p>\n              </div>\n            </div>\n          ))}\n        </div>\n      </CardContent>\n      <CardFooter>\n        <Button className=\"w-full\">\n          <Check /> Mark all as read\n        </Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/carousel-demo.tsx",
-      "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/new-york/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/new-york/ui/carousel\"\n\nexport function CarouselDemo() {\n  return (\n    <Carousel className=\"w-full max-w-xs\">\n      <CarouselContent>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index}>\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/checkbox-demo.tsx",
-      "content": "\"use client\"\n\nimport { Checkbox } from \"@/registry/new-york/ui/checkbox\"\n\nexport function CheckboxDemo() {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Checkbox id=\"terms\" />\n      <label\n        htmlFor=\"terms\"\n        className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n      >\n        Accept terms and conditions\n      </label>\n    </div>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/collapsible-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\n\nexport function CollapsibleDemo() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Collapsible\n      open={isOpen}\n      onOpenChange={setIsOpen}\n      className=\"w-[350px] space-y-2\"\n    >\n      <div className=\"flex items-center justify-between space-x-4 px-4\">\n        <h4 className=\"text-sm font-semibold\">\n          @peduarte starred 3 repositories\n        </h4>\n        <CollapsibleTrigger asChild>\n          <Button variant=\"ghost\" size=\"sm\">\n            <ChevronsUpDown className=\"h-4 w-4\" />\n            <span className=\"sr-only\">Toggle</span>\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n        @radix-ui/primitives\n      </div>\n      <CollapsibleContent className=\"space-y-2\">\n        <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n          @radix-ui/colors\n        </div>\n        <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n          @stitches/react\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/combobox-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nconst frameworks = [\n  {\n    value: \"next.js\",\n    label: \"Next.js\",\n  },\n  {\n    value: \"sveltekit\",\n    label: \"SvelteKit\",\n  },\n  {\n    value: \"nuxt.js\",\n    label: \"Nuxt.js\",\n  },\n  {\n    value: \"remix\",\n    label: \"Remix\",\n  },\n  {\n    value: \"astro\",\n    label: \"Astro\",\n  },\n]\n\nexport function ComboboxDemo() {\n  const [open, setOpen] = React.useState(false)\n  const [value, setValue] = React.useState(\"\")\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          role=\"combobox\"\n          aria-expanded={open}\n          className=\"w-[200px] justify-between\"\n        >\n          {value\n            ? frameworks.find((framework) => framework.value === value)?.label\n            : \"Select framework...\"}\n          <ChevronsUpDown className=\"opacity-50\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-[200px] p-0\">\n        <Command>\n          <CommandInput placeholder=\"Search framework...\" className=\"h-9\" />\n          <CommandList>\n            <CommandEmpty>No framework found.</CommandEmpty>\n            <CommandGroup>\n              {frameworks.map((framework) => (\n                <CommandItem\n                  key={framework.value}\n                  value={framework.value}\n                  onSelect={(currentValue) => {\n                    setValue(currentValue === value ? \"\" : currentValue)\n                    setOpen(false)\n                  }}\n                >\n                  {framework.label}\n                  <Check\n                    className={cn(\n                      \"ml-auto\",\n                      value === framework.value ? \"opacity-100\" : \"opacity-0\"\n                    )}\n                  />\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/command-demo.tsx",
-      "content": "import {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from \"lucide-react\"\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/new-york/ui/command\"\n\nexport function CommandDemo() {\n  return (\n    <Command className=\"rounded-lg border shadow-md md:min-w-[450px]\">\n      <CommandInput placeholder=\"Type a command or search...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup heading=\"Suggestions\">\n          <CommandItem>\n            <Calendar />\n            <span>Calendar</span>\n          </CommandItem>\n          <CommandItem>\n            <Smile />\n            <span>Search Emoji</span>\n          </CommandItem>\n          <CommandItem disabled>\n            <Calculator />\n            <span>Calculator</span>\n          </CommandItem>\n        </CommandGroup>\n        <CommandSeparator />\n        <CommandGroup heading=\"Settings\">\n          <CommandItem>\n            <User />\n            <span>Profile</span>\n            <CommandShortcut>⌘P</CommandShortcut>\n          </CommandItem>\n          <CommandItem>\n            <CreditCard />\n            <span>Billing</span>\n            <CommandShortcut>⌘B</CommandShortcut>\n          </CommandItem>\n          <CommandItem>\n            <Settings />\n            <span>Settings</span>\n            <CommandShortcut>⌘S</CommandShortcut>\n          </CommandItem>\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/context-menu-demo.tsx",
-      "content": "import {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/new-york/ui/context-menu\"\n\nexport function ContextMenuDemo() {\n  return (\n    <ContextMenu>\n      <ContextMenuTrigger className=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n        Right click here\n      </ContextMenuTrigger>\n      <ContextMenuContent className=\"w-64\">\n        <ContextMenuItem inset>\n          Back\n          <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem inset disabled>\n          Forward\n          <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem inset>\n          Reload\n          <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuSub>\n          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>\n          <ContextMenuSubContent className=\"w-48\">\n            <ContextMenuItem>\n              Save Page As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n            <ContextMenuItem>Name Window...</ContextMenuItem>\n            <ContextMenuSeparator />\n            <ContextMenuItem>Developer Tools</ContextMenuItem>\n          </ContextMenuSubContent>\n        </ContextMenuSub>\n        <ContextMenuSeparator />\n        <ContextMenuCheckboxItem checked>\n          Show Bookmarks Bar\n          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n        </ContextMenuCheckboxItem>\n        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n        <ContextMenuSeparator />\n        <ContextMenuRadioGroup value=\"pedro\">\n          <ContextMenuLabel inset>People</ContextMenuLabel>\n          <ContextMenuSeparator />\n          <ContextMenuRadioItem value=\"pedro\">\n            Pedro Duarte\n          </ContextMenuRadioItem>\n          <ContextMenuRadioItem value=\"colm\">Colm Tuite</ContextMenuRadioItem>\n        </ContextMenuRadioGroup>\n      </ContextMenuContent>\n    </ContextMenu>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/date-picker-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport function DatePickerDemo() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          variant={\"outline\"}\n          className={cn(\n            \"w-[240px] justify-start text-left font-normal\",\n            !date && \"text-muted-foreground\"\n          )}\n        >\n          <CalendarIcon />\n          {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          initialFocus\n        />\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/dialog-demo.tsx",
-      "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/new-york/ui/dialog\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport function DialogDemo() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Edit Profile</Button>\n      </DialogTrigger>\n      <DialogContent className=\"sm:max-w-[425px]\">\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>\n            Make changes to your profile here. Click save when you're done.\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"grid gap-4 py-4\">\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"name\" className=\"text-right\">\n              Name\n            </Label>\n            <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n          </div>\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"username\" className=\"text-right\">\n              Username\n            </Label>\n            <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n          </div>\n        </div>\n        <DialogFooter>\n          <Button type=\"submit\">Save changes</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/drawer-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york/ui/drawer\"\n\nconst data = [\n  {\n    goal: 400,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 239,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 349,\n  },\n]\n\nexport function DrawerDemo() {\n  const [goal, setGoal] = React.useState(350)\n\n  function onClick(adjustment: number) {\n    setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n  }\n\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Open Drawer</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mx-auto w-full max-w-sm\">\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"p-4 pb-0\">\n            <div className=\"flex items-center justify-center space-x-2\">\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(-10)}\n                disabled={goal <= 200}\n              >\n                <Minus />\n                <span className=\"sr-only\">Decrease</span>\n              </Button>\n              <div className=\"flex-1 text-center\">\n                <div className=\"text-7xl font-bold tracking-tighter\">\n                  {goal}\n                </div>\n                <div className=\"text-[0.70rem] uppercase text-muted-foreground\">\n                  Calories/day\n                </div>\n              </div>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(10)}\n                disabled={goal >= 400}\n              >\n                <Plus />\n                <span className=\"sr-only\">Increase</span>\n              </Button>\n            </div>\n            <div className=\"mt-3 h-[120px]\">\n              <ResponsiveContainer width=\"100%\" height=\"100%\">\n                <BarChart data={data}>\n                  <Bar\n                    dataKey=\"goal\"\n                    style={\n                      {\n                        fill: \"hsl(var(--foreground))\",\n                        opacity: 0.9,\n                      } as React.CSSProperties\n                    }\n                  />\n                </BarChart>\n              </ResponsiveContainer>\n            </div>\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </div>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/dropdown-menu-demo.tsx",
-      "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\n\nexport function DropdownMenuDemo() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-56\">\n        <DropdownMenuLabel>My Account</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            Profile\n            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Billing\n            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Settings\n            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Keyboard shortcuts\n            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>Team</DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem>Email</DropdownMenuItem>\n                <DropdownMenuItem>Message</DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>More...</DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n          <DropdownMenuItem>\n            New Team\n            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>GitHub</DropdownMenuItem>\n        <DropdownMenuItem>Support</DropdownMenuItem>\n        <DropdownMenuItem disabled>API</DropdownMenuItem>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          Log out\n          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/hover-card-demo.tsx",
-      "content": "import { CalendarIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/new-york/ui/hover-card\"\n\nexport function HoverCardDemo() {\n  return (\n    <HoverCard>\n      <HoverCardTrigger asChild>\n        <Button variant=\"link\">@nextjs</Button>\n      </HoverCardTrigger>\n      <HoverCardContent className=\"w-80\">\n        <div className=\"flex justify-between space-x-4\">\n          <Avatar>\n            <AvatarImage src=\"https://github.com/vercel.png\" />\n            <AvatarFallback>VC</AvatarFallback>\n          </Avatar>\n          <div className=\"space-y-1\">\n            <h4 className=\"text-sm font-semibold\">@nextjs</h4>\n            <p className=\"text-sm\">\n              The React Framework – created and maintained by @vercel.\n            </p>\n            <div className=\"flex items-center pt-2\">\n              <CalendarIcon className=\"mr-2 h-4 w-4 opacity-70\" />{\" \"}\n              <span className=\"text-xs text-muted-foreground\">\n                Joined December 2021\n              </span>\n            </div>\n          </div>\n        </div>\n      </HoverCardContent>\n    </HoverCard>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/input-demo.tsx",
-      "content": "import { Input } from \"@/registry/new-york/ui/input\"\n\nexport function InputDemo() {\n  return <Input type=\"email\" placeholder=\"Email\" />\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/input-otp-demo.tsx",
-      "content": "import {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/new-york/ui/input-otp\"\n\nexport function InputOTPDemo() {\n  return (\n    <InputOTP maxLength={6}>\n      <InputOTPGroup>\n        <InputOTPSlot index={0} />\n        <InputOTPSlot index={1} />\n        <InputOTPSlot index={2} />\n      </InputOTPGroup>\n      <InputOTPSeparator />\n      <InputOTPGroup>\n        <InputOTPSlot index={3} />\n        <InputOTPSlot index={4} />\n        <InputOTPSlot index={5} />\n      </InputOTPGroup>\n    </InputOTP>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/label-demo.tsx",
-      "content": "import { Checkbox } from \"@/registry/new-york/ui/checkbox\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport function LabelDemo() {\n  return (\n    <div>\n      <div className=\"flex items-center space-x-2\">\n        <Checkbox id=\"terms\" />\n        <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/menubar-demo.tsx",
-      "content": "import {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/new-york/ui/menubar\"\n\nexport function MenubarDemo() {\n  return (\n    <Menubar>\n      <MenubarMenu>\n        <MenubarTrigger>File</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>\n            New Window <MenubarShortcut>⌘N</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled>New Incognito Window</MenubarItem>\n          <MenubarSeparator />\n          <MenubarSub>\n            <MenubarSubTrigger>Share</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Email link</MenubarItem>\n              <MenubarItem>Messages</MenubarItem>\n              <MenubarItem>Notes</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n          <MenubarSeparator />\n          <MenubarItem>\n            Print... <MenubarShortcut>⌘P</MenubarShortcut>\n          </MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>Edit</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>\n            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarSeparator />\n          <MenubarSub>\n            <MenubarSubTrigger>Find</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Search the web</MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem>Find...</MenubarItem>\n              <MenubarItem>Find Next</MenubarItem>\n              <MenubarItem>Find Previous</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n          <MenubarSeparator />\n          <MenubarItem>Cut</MenubarItem>\n          <MenubarItem>Copy</MenubarItem>\n          <MenubarItem>Paste</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>View</MenubarTrigger>\n        <MenubarContent>\n          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n          <MenubarCheckboxItem checked>\n            Always Show Full URLs\n          </MenubarCheckboxItem>\n          <MenubarSeparator />\n          <MenubarItem inset>\n            Reload <MenubarShortcut>⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled inset>\n            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Toggle Fullscreen</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Hide Sidebar</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>Profiles</MenubarTrigger>\n        <MenubarContent>\n          <MenubarRadioGroup value=\"benoit\">\n            <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n            <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n            <MenubarRadioItem value=\"Luis\">Luis</MenubarRadioItem>\n          </MenubarRadioGroup>\n          <MenubarSeparator />\n          <MenubarItem inset>Edit...</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Add Profile...</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n    </Menubar>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/navigation-menu-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/new-york/ui/navigation-menu\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport function NavigationMenuDemo() {\n  return (\n    <NavigationMenu>\n      <NavigationMenuList>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n              <li className=\"row-span-3\">\n                <NavigationMenuLink asChild>\n                  <a\n                    className=\"flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md\"\n                    href=\"/\"\n                  >\n                    <div className=\"mb-2 mt-4 text-lg font-medium\">\n                      shadcn/ui\n                    </div>\n                    <p className=\"text-sm leading-tight text-muted-foreground\">\n                      Beautifully designed components built with Radix UI and\n                      Tailwind CSS.\n                    </p>\n                  </a>\n                </NavigationMenuLink>\n              </li>\n              <ListItem href=\"/docs\" title=\"Introduction\">\n                Re-usable components built using Radix UI and Tailwind CSS.\n              </ListItem>\n              <ListItem href=\"/docs/installation\" title=\"Installation\">\n                How to install dependencies and structure your app.\n              </ListItem>\n              <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                Styles for headings, paragraphs, lists...etc\n              </ListItem>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n              {components.map((component) => (\n                <ListItem\n                  key={component.title}\n                  title={component.title}\n                  href={component.href}\n                >\n                  {component.description}\n                </ListItem>\n              ))}\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <Link href=\"/docs\" legacyBehavior passHref>\n            <NavigationMenuLink className={navigationMenuTriggerStyle()}>\n              Documentation\n            </NavigationMenuLink>\n          </Link>\n        </NavigationMenuItem>\n      </NavigationMenuList>\n    </NavigationMenu>\n  )\n}\n\nconst ListItem = React.forwardRef<\n  React.ElementRef<\"a\">,\n  React.ComponentPropsWithoutRef<\"a\">\n>(({ className, title, children, ...props }, ref) => {\n  return (\n    <li>\n      <NavigationMenuLink asChild>\n        <a\n          ref={ref}\n          className={cn(\n            \"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\",\n            className\n          )}\n          {...props}\n        >\n          <div className=\"text-sm font-medium leading-none\">{title}</div>\n          <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n            {children}\n          </p>\n        </a>\n      </NavigationMenuLink>\n    </li>\n  )\n})\nListItem.displayName = \"ListItem\"\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/pagination-demo.tsx",
-      "content": "import {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/new-york/ui/pagination\"\n\nexport function PaginationDemo() {\n  return (\n    <Pagination>\n      <PaginationContent>\n        <PaginationItem>\n          <PaginationPrevious href=\"#\" />\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\">1</PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\" isActive>\n            2\n          </PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\">3</PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationEllipsis />\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationNext href=\"#\" />\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/popover-demo.tsx",
-      "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport function PopoverDemo() {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button variant=\"outline\">Open popover</Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-80\">\n        <div className=\"grid gap-4\">\n          <div className=\"space-y-2\">\n            <h4 className=\"font-medium leading-none\">Dimensions</h4>\n            <p className=\"text-sm text-muted-foreground\">\n              Set the dimensions for the layer.\n            </p>\n          </div>\n          <div className=\"grid gap-2\">\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"width\">Width</Label>\n              <Input\n                id=\"width\"\n                defaultValue=\"100%\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxWidth\">Max. width</Label>\n              <Input\n                id=\"maxWidth\"\n                defaultValue=\"300px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"height\">Height</Label>\n              <Input\n                id=\"height\"\n                defaultValue=\"25px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxHeight\">Max. height</Label>\n              <Input\n                id=\"maxHeight\"\n                defaultValue=\"none\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n          </div>\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/progress-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Progress } from \"@/registry/new-york/ui/progress\"\n\nexport function ProgressDemo() {\n  const [progress, setProgress] = React.useState(13)\n\n  React.useEffect(() => {\n    const timer = setTimeout(() => setProgress(66), 500)\n    return () => clearTimeout(timer)\n  }, [])\n\n  return <Progress value={progress} className=\"w-[60%]\" />\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/radio-group-demo.tsx",
-      "content": "import { Label } from \"@/registry/new-york/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/new-york/ui/radio-group\"\n\nexport function RadioGroupDemo() {\n  return (\n    <RadioGroup defaultValue=\"comfortable\">\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"default\" id=\"r1\" />\n        <Label htmlFor=\"r1\">Default</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n        <Label htmlFor=\"r2\">Comfortable</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"compact\" id=\"r3\" />\n        <Label htmlFor=\"r3\">Compact</Label>\n      </div>\n    </RadioGroup>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/resizable-handle.tsx",
-      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/new-york/ui/resizable\"\n\nexport function ResizableHandleDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"horizontal\"\n      className=\"min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={25}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Sidebar</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel defaultSize={75}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Content</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/scroll-area-demo.tsx",
-      "content": "import * as React from \"react\"\n\nimport { ScrollArea } from \"@/registry/new-york/ui/scroll-area\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nexport function ScrollAreaDemo() {\n  return (\n    <ScrollArea className=\"h-72 w-48 rounded-md border\">\n      <div className=\"p-4\">\n        <h4 className=\"mb-4 text-sm font-medium leading-none\">Tags</h4>\n        {tags.map((tag) => (\n          <React.Fragment key={tag}>\n            <div className=\"text-sm\">{tag}</div>\n            <Separator className=\"my-2\" />\n          </React.Fragment>\n        ))}\n      </div>\n    </ScrollArea>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/select-demo.tsx",
-      "content": "import * as React from \"react\"\n\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\n\nexport function SelectDemo() {\n  return (\n    <Select>\n      <SelectTrigger className=\"w-[180px]\">\n        <SelectValue placeholder=\"Select a fruit\" />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectGroup>\n          <SelectLabel>Fruits</SelectLabel>\n          <SelectItem value=\"apple\">Apple</SelectItem>\n          <SelectItem value=\"banana\">Banana</SelectItem>\n          <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          <SelectItem value=\"grapes\">Grapes</SelectItem>\n          <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n        </SelectGroup>\n      </SelectContent>\n    </Select>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/separator-demo.tsx",
-      "content": "import { Separator } from \"@/registry/new-york/ui/separator\"\n\nexport function SeparatorDemo() {\n  return (\n    <div>\n      <div className=\"space-y-1\">\n        <h4 className=\"text-sm font-medium leading-none\">Radix Primitives</h4>\n        <p className=\"text-sm text-muted-foreground\">\n          An open-source UI component library.\n        </p>\n      </div>\n      <Separator className=\"my-4\" />\n      <div className=\"flex h-5 items-center space-x-4 text-sm\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/sheet-demo.tsx",
-      "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/new-york/ui/sheet\"\n\nexport function SheetDemo() {\n  return (\n    <Sheet>\n      <SheetTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </SheetTrigger>\n      <SheetContent>\n        <SheetHeader>\n          <SheetTitle>Edit profile</SheetTitle>\n          <SheetDescription>\n            Make changes to your profile here. Click save when you're done.\n          </SheetDescription>\n        </SheetHeader>\n        <div className=\"grid gap-4 py-4\">\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"name\" className=\"text-right\">\n              Name\n            </Label>\n            <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n          </div>\n          <div className=\"grid grid-cols-4 items-center gap-4\">\n            <Label htmlFor=\"username\" className=\"text-right\">\n              Username\n            </Label>\n            <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n          </div>\n        </div>\n        <SheetFooter>\n          <SheetClose asChild>\n            <Button type=\"submit\">Save changes</Button>\n          </SheetClose>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/skeleton-demo.tsx",
-      "content": "import { Skeleton } from \"@/registry/new-york/ui/skeleton\"\n\nexport function SkeletonDemo() {\n  return (\n    <div className=\"flex items-center space-x-4\">\n      <Skeleton className=\"h-12 w-12 rounded-full\" />\n      <div className=\"space-y-2\">\n        <Skeleton className=\"h-4 w-[250px]\" />\n        <Skeleton className=\"h-4 w-[200px]\" />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/slider-demo.tsx",
-      "content": "import { cn } from \"@/lib/utils\"\nimport { Slider } from \"@/registry/new-york/ui/slider\"\n\ntype SliderProps = React.ComponentProps<typeof Slider>\n\nexport function SliderDemo({ className, ...props }: SliderProps) {\n  return (\n    <Slider\n      defaultValue={[50]}\n      max={100}\n      step={1}\n      className={cn(\"w-[60%]\", className)}\n      {...props}\n    />\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/sonner-demo.tsx",
-      "content": "\"use client\"\n\nimport { toast } from \"sonner\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport function SonnerDemo() {\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() =>\n        toast(\"Event has been created\", {\n          description: \"Sunday, December 03, 2023 at 9:00 AM\",\n          action: {\n            label: \"Undo\",\n            onClick: () => console.log(\"Undo\"),\n          },\n        })\n      }\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/switch-demo.tsx",
-      "content": "import { Label } from \"@/registry/new-york/ui/label\"\nimport { Switch } from \"@/registry/new-york/ui/switch\"\n\nexport function SwitchDemo() {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Switch id=\"airplane-mode\" />\n      <Label htmlFor=\"airplane-mode\">Airplane Mode</Label>\n    </div>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/table-demo.tsx",
-      "content": "import {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york/ui/table\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport function TableDemo() {\n  return (\n    <Table>\n      <TableCaption>A list of your recent invoices.</TableCaption>\n      <TableHeader>\n        <TableRow>\n          <TableHead className=\"w-[100px]\">Invoice</TableHead>\n          <TableHead>Status</TableHead>\n          <TableHead>Method</TableHead>\n          <TableHead className=\"text-right\">Amount</TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        {invoices.map((invoice) => (\n          <TableRow key={invoice.invoice}>\n            <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n            <TableCell>{invoice.paymentStatus}</TableCell>\n            <TableCell>{invoice.paymentMethod}</TableCell>\n            <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n      <TableFooter>\n        <TableRow>\n          <TableCell colSpan={3}>Total</TableCell>\n          <TableCell className=\"text-right\">$2,500.00</TableCell>\n        </TableRow>\n      </TableFooter>\n    </Table>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/tabs-demo.tsx",
-      "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/new-york/ui/tabs\"\n\nexport function TabsDemo() {\n  return (\n    <Tabs defaultValue=\"account\" className=\"w-[400px]\">\n      <TabsList className=\"grid w-full grid-cols-2\">\n        <TabsTrigger value=\"account\">Account</TabsTrigger>\n        <TabsTrigger value=\"password\">Password</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"account\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Account</CardTitle>\n            <CardDescription>\n              Make changes to your account here. Click save when you're done.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"space-y-2\">\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"name\">Name</Label>\n              <Input id=\"name\" defaultValue=\"Pedro Duarte\" />\n            </div>\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"username\">Username</Label>\n              <Input id=\"username\" defaultValue=\"@peduarte\" />\n            </div>\n          </CardContent>\n          <CardFooter>\n            <Button>Save changes</Button>\n          </CardFooter>\n        </Card>\n      </TabsContent>\n      <TabsContent value=\"password\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Password</CardTitle>\n            <CardDescription>\n              Change your password here. After saving, you'll be logged out.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"space-y-2\">\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"current\">Current password</Label>\n              <Input id=\"current\" type=\"password\" />\n            </div>\n            <div className=\"space-y-1\">\n              <Label htmlFor=\"new\">New password</Label>\n              <Input id=\"new\" type=\"password\" />\n            </div>\n          </CardContent>\n          <CardFooter>\n            <Button>Save password</Button>\n          </CardFooter>\n        </Card>\n      </TabsContent>\n    </Tabs>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/textarea-demo.tsx",
-      "content": "import { Textarea } from \"@/registry/new-york/ui/textarea\"\n\nexport function TextareaDemo() {\n  return <Textarea placeholder=\"Type your message here.\" />\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/toast-demo.tsx",
-      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { ToastAction } from \"@/registry/new-york/ui/toast\"\n\nexport function ToastDemo() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          title: \"Scheduled: Catch up \",\n          description: \"Friday, February 10, 2023 at 5:57 PM\",\n          action: (\n            <ToastAction altText=\"Goto schedule to undo\">Undo</ToastAction>\n          ),\n        })\n      }}\n    >\n      Add to calendar\n    </Button>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/toggle-demo.tsx",
-      "content": "import { Bold } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport function ToggleDemo() {\n  return (\n    <Toggle aria-label=\"Toggle italic\">\n      <Bold className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/toggle-group-demo.tsx",
-      "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york/ui/toggle-group\"\n\nexport function ToggleGroupDemo() {\n  return (\n    <ToggleGroup type=\"multiple\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/tooltip-demo.tsx",
-      "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/new-york/ui/tooltip\"\n\nexport function TooltipDemo() {\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\">Hover</Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/badge-destructive.tsx",
-      "content": "import { Badge } from \"@/registry/new-york/ui/badge\"\n\nexport function BadgeDestructive() {\n  return <Badge variant=\"destructive\">Destructive</Badge>\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/badge-outline.tsx",
-      "content": "import { Badge } from \"@/registry/new-york/ui/badge\"\n\nexport function BadgeOutline() {\n  return <Badge variant=\"outline\">Outline</Badge>\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/badge-secondary.tsx",
-      "content": "import { Badge } from \"@/registry/new-york/ui/badge\"\n\nexport function BadgeSecondary() {\n  return <Badge variant=\"secondary\">Secondary</Badge>\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/button-destructive.tsx",
-      "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport function ButtonDestructive() {\n  return <Button variant=\"destructive\">Destructive</Button>\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/button-ghost.tsx",
-      "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport function ButtonGhost() {\n  return <Button variant=\"ghost\">Ghost</Button>\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/button-link.tsx",
-      "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport function ButtonLink() {\n  return <Button variant=\"link\">Link</Button>\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/button-loading.tsx",
-      "content": "import { Loader2 } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport function ButtonLoading() {\n  return (\n    <Button disabled>\n      <Loader2 className=\"animate-spin\" />\n      Please wait\n    </Button>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/button-outline.tsx",
-      "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport function ButtonOutline() {\n  return <Button variant=\"outline\">Outline</Button>\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/button-secondary.tsx",
-      "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport function ButtonSecondary() {\n  return <Button variant=\"secondary\">Secondary</Button>\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/button-with-icon.tsx",
-      "content": "import { MailOpen } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport function ButtonWithIcon() {\n  return (\n    <Button>\n      <MailOpen /> Login with Email\n    </Button>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/toggle-disabled.tsx",
-      "content": "import { Underline } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport function ToggleDisabled() {\n  return (\n    <Toggle aria-label=\"Toggle italic\" disabled>\n      <Underline className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/toggle-outline.tsx",
-      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport function ToggleOutline() {\n  return (\n    <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n      <Italic />\n    </Toggle>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    },
-    {
-      "path": "internal/sink/components/toggle-with-text.tsx",
-      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport function ToggleWithText() {\n  return (\n    <Toggle aria-label=\"Toggle italic\">\n      <Italic />\n      Italic\n    </Toggle>\n  )\n}\n",
-      "type": "registry:component",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/v4/registry/bases/base/internal/_registry.ts b/apps/v4/registry/bases/base/internal/_registry.ts
index 2ef30f93ad..d3a989b4ca 100644
--- a/apps/v4/registry/bases/base/internal/_registry.ts
+++ b/apps/v4/registry/bases/base/internal/_registry.ts
@@ -1,70 +1,3 @@
 import { type Registry } from "shadcn/schema"
 
-export const internal: Registry["items"] = [
-  {
-    name: "sink",
-    type: "registry:internal",
-    files: [
-      {
-        path: "internal/sink.tsx",
-        type: "registry:page",
-        target: "app/sink/page.tsx",
-      },
-    ],
-    registryDependencies: [
-      "accordion-example",
-      "alert-dialog-example",
-      "alert-example",
-      "aspect-ratio-example",
-      "avatar-example",
-      "badge-example",
-      "breadcrumb-example",
-      "button-example",
-      "button-group-example",
-      "calendar-example",
-      "card-example",
-      "carousel-example",
-      "chart-example",
-      "checkbox-example",
-      "collapsible-example",
-      "combobox-example",
-      "command-example",
-      "context-menu-example",
-      "dialog-example",
-      "drawer-example",
-      "dropdown-menu-example",
-      "empty-example",
-      "field-example",
-      "hover-card-example",
-      "input-example",
-      "input-group-example",
-      "input-otp-example",
-      "item-example",
-      "kbd-example",
-      "label-example",
-      "menubar-example",
-      "native-select-example",
-      "navigation-menu-example",
-      "pagination-example",
-      "popover-example",
-      "progress-example",
-      "radio-group-example",
-      "resizable-example",
-      "scroll-area-example",
-      "select-example",
-      "separator-example",
-      "sheet-example",
-      "skeleton-example",
-      "slider-example",
-      "sonner-example",
-      "spinner-example",
-      "switch-example",
-      "table-example",
-      "tabs-example",
-      "textarea-example",
-      "toggle-example",
-      "toggle-group-example",
-      "tooltip-example",
-    ],
-  },
-]
+export const internal: Registry["items"] = []
diff --git a/apps/v4/registry/bases/radix/internal/_registry.ts b/apps/v4/registry/bases/radix/internal/_registry.ts
index 2ef30f93ad..d3a989b4ca 100644
--- a/apps/v4/registry/bases/radix/internal/_registry.ts
+++ b/apps/v4/registry/bases/radix/internal/_registry.ts
@@ -1,70 +1,3 @@
 import { type Registry } from "shadcn/schema"
 
-export const internal: Registry["items"] = [
-  {
-    name: "sink",
-    type: "registry:internal",
-    files: [
-      {
-        path: "internal/sink.tsx",
-        type: "registry:page",
-        target: "app/sink/page.tsx",
-      },
-    ],
-    registryDependencies: [
-      "accordion-example",
-      "alert-dialog-example",
-      "alert-example",
-      "aspect-ratio-example",
-      "avatar-example",
-      "badge-example",
-      "breadcrumb-example",
-      "button-example",
-      "button-group-example",
-      "calendar-example",
-      "card-example",
-      "carousel-example",
-      "chart-example",
-      "checkbox-example",
-      "collapsible-example",
-      "combobox-example",
-      "command-example",
-      "context-menu-example",
-      "dialog-example",
-      "drawer-example",
-      "dropdown-menu-example",
-      "empty-example",
-      "field-example",
-      "hover-card-example",
-      "input-example",
-      "input-group-example",
-      "input-otp-example",
-      "item-example",
-      "kbd-example",
-      "label-example",
-      "menubar-example",
-      "native-select-example",
-      "navigation-menu-example",
-      "pagination-example",
-      "popover-example",
-      "progress-example",
-      "radio-group-example",
-      "resizable-example",
-      "scroll-area-example",
-      "select-example",
-      "separator-example",
-      "sheet-example",
-      "skeleton-example",
-      "slider-example",
-      "sonner-example",
-      "spinner-example",
-      "switch-example",
-      "table-example",
-      "tabs-example",
-      "textarea-example",
-      "toggle-example",
-      "toggle-group-example",
-      "tooltip-example",
-    ],
-  },
-]
+export const internal: Registry["items"] = []