diff --git a/apps/v4/app/(app)/create/components/open-preset.tsx b/apps/v4/app/(app)/create/components/open-preset.tsx
index 11767a516d5..e6c53c1244a 100644
--- a/apps/v4/app/(app)/create/components/open-preset.tsx
+++ b/apps/v4/app/(app)/create/components/open-preset.tsx
@@ -111,11 +111,12 @@ export function OpenPreset({
   if (isMobile) {
     return (
       <Drawer open={open} onOpenChange={handleOpenChange}>
-        <DrawerTrigger asChild>
-          <Button variant="outline" className={triggerClassName}>
-            {label}
-          </Button>
+        <DrawerTrigger
+          render={<Button variant="outline" className={triggerClassName} />}
+        >
+          {label}
         </DrawerTrigger>
+
         <DrawerContent className="dark rounded-t-2xl!">
           <DrawerHeader>
             <DrawerTitle className="text-xl">{PRESET_TITLE}</DrawerTitle>
@@ -127,10 +128,12 @@ export function OpenPreset({
               <Button type="submit" className="h-10" disabled={!nextPreset}>
                 Open
               </Button>
-              <DrawerClose asChild>
-                <Button variant="outline" type="button" className="h-10">
-                  Cancel
-                </Button>
+              <DrawerClose
+                render={
+                  <Button variant="outline" type="button" className="h-10" />
+                }
+              >
+                Cancel
               </DrawerClose>
             </DrawerFooter>
           </form>
diff --git a/apps/v4/components/directory-add-button.tsx b/apps/v4/components/directory-add-button.tsx
index e3497bf9ecb..95bc50daeec 100644
--- a/apps/v4/components/directory-add-button.tsx
+++ b/apps/v4/components/directory-add-button.tsx
@@ -185,9 +185,7 @@ export function DirectoryAddProvider({
             </DrawerHeader>
             <div className="px-4">{Content}</div>
             <DrawerFooter>
-              <DrawerClose asChild>
-                <Button size="sm">Done</Button>
-              </DrawerClose>
+              <DrawerClose render={<Button size="sm" />}>Done</DrawerClose>
             </DrawerFooter>
           </DrawerContent>
         </Drawer>
diff --git a/apps/v4/content/docs/components/base/drawer.mdx b/apps/v4/content/docs/components/base/drawer.mdx
index 0b46bcbb000..44709ad909a 100644
--- a/apps/v4/content/docs/components/base/drawer.mdx
+++ b/apps/v4/content/docs/components/base/drawer.mdx
@@ -4,15 +4,12 @@ description: A drawer component for React.
 base: base
 component: true
 links:
-  doc: https://vaul.emilkowal.ski/getting-started
+  doc: https://base-ui.com/react/components/drawer
+  api: https://base-ui.com/react/components/drawer#api-reference
 ---
 
 <ComponentPreview styleName="base-nova" name="drawer-demo" />
 
-## About
-
-Drawer is built on top of [Vaul](https://github.com/emilkowalski/vaul) by [emilkowalski](https://twitter.com/emilkowalski).
-
 ## Installation
 
 <CodeTabs>
@@ -36,7 +33,7 @@ npx shadcn@latest add drawer
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install vaul
+npm install @base-ui/react
 ```
 
 <Step>Copy and paste the following code into your project.</Step>
@@ -112,7 +109,7 @@ Keep actions visible while the content scrolls.
 
 ### Sides
 
-Use the `direction` prop to set the side of the drawer. Available options are `top`, `right`, `bottom`, and `left`.
+Use the `swipeDirection` prop to set the side of the drawer. Available options are `up`, `right`, `down`, and `left`.
 
 <ComponentPreview styleName="base-nova" name="drawer-sides" />
 
@@ -130,4 +127,4 @@ To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl)
 
 ## API Reference
 
-See the [Vaul documentation](https://vaul.emilkowal.ski/getting-started) for the full API reference.
+See the [Base UI documentation](https://base-ui.com/react/components/drawer) for the full API reference.
diff --git a/apps/v4/examples/base/drawer-demo.tsx b/apps/v4/examples/base/drawer-demo.tsx
index ab8c129adc4..b1a3fdf4dd4 100644
--- a/apps/v4/examples/base/drawer-demo.tsx
+++ b/apps/v4/examples/base/drawer-demo.tsx
@@ -67,8 +67,8 @@ export function DrawerDemo() {
 
   return (
     <Drawer>
-      <DrawerTrigger asChild>
-        <Button variant="outline">Open Drawer</Button>
+      <DrawerTrigger render={<Button variant="outline" />}>
+        Open Drawer
       </DrawerTrigger>
       <DrawerContent>
         <div className="mx-auto w-full max-w-sm">
@@ -124,8 +124,8 @@ export function DrawerDemo() {
           </div>
           <DrawerFooter>
             <Button>Submit</Button>
-            <DrawerClose asChild>
-              <Button variant="outline">Cancel</Button>
+            <DrawerClose render={<Button variant="outline" />}>
+              Cancel
             </DrawerClose>
           </DrawerFooter>
         </div>
diff --git a/apps/v4/examples/base/drawer-dialog.tsx b/apps/v4/examples/base/drawer-dialog.tsx
index 9512ddd647b..522b58ad765 100644
--- a/apps/v4/examples/base/drawer-dialog.tsx
+++ b/apps/v4/examples/base/drawer-dialog.tsx
@@ -52,8 +52,8 @@ export function DrawerDialogDemo() {
 
   return (
     <Drawer open={open} onOpenChange={setOpen}>
-      <DrawerTrigger asChild>
-        <Button variant="outline">Edit Profile</Button>
+      <DrawerTrigger render={<Button variant="outline" />}>
+        Edit Profile
       </DrawerTrigger>
       <DrawerContent>
         <DrawerHeader className="text-left">
@@ -64,8 +64,8 @@ export function DrawerDialogDemo() {
         </DrawerHeader>
         <ProfileForm className="px-4" />
         <DrawerFooter className="pt-2">
-          <DrawerClose asChild>
-            <Button variant="outline">Cancel</Button>
+          <DrawerClose render={<Button variant="outline" />}>
+            Cancel
           </DrawerClose>
         </DrawerFooter>
       </DrawerContent>
diff --git a/apps/v4/examples/base/drawer-rtl.tsx b/apps/v4/examples/base/drawer-rtl.tsx
index 23a3a3cc379..eb766a37f79 100644
--- a/apps/v4/examples/base/drawer-rtl.tsx
+++ b/apps/v4/examples/base/drawer-rtl.tsx
@@ -117,8 +117,8 @@ export function DrawerRtl() {
 
   return (
     <Drawer>
-      <DrawerTrigger asChild>
-        <Button variant="outline">{t.trigger}</Button>
+      <DrawerTrigger render={<Button variant="outline" />}>
+        {t.trigger}
       </DrawerTrigger>
       <DrawerContent dir={dir} data-lang={dir === "rtl" ? language : undefined}>
         <div className="mx-auto w-full max-w-sm">
@@ -182,8 +182,8 @@ export function DrawerRtl() {
           </div>
           <DrawerFooter>
             <Button>{t.submit}</Button>
-            <DrawerClose asChild>
-              <Button variant="outline">{t.cancel}</Button>
+            <DrawerClose render={<Button variant="outline" />}>
+              {t.cancel}
             </DrawerClose>
           </DrawerFooter>
         </div>
diff --git a/apps/v4/examples/base/drawer-scrollable-content.tsx b/apps/v4/examples/base/drawer-scrollable-content.tsx
index e005c83ac1f..f7c52910a25 100644
--- a/apps/v4/examples/base/drawer-scrollable-content.tsx
+++ b/apps/v4/examples/base/drawer-scrollable-content.tsx
@@ -12,9 +12,9 @@ import {
 
 export function DrawerScrollableContent() {
   return (
-    <Drawer direction="right">
-      <DrawerTrigger asChild>
-        <Button variant="outline">Scrollable Content</Button>
+    <Drawer swipeDirection="right">
+      <DrawerTrigger render={<Button variant="outline" />}>
+        Scrollable Content
       </DrawerTrigger>
       <DrawerContent>
         <DrawerHeader>
@@ -36,8 +36,8 @@ export function DrawerScrollableContent() {
         </div>
         <DrawerFooter>
           <Button>Submit</Button>
-          <DrawerClose asChild>
-            <Button variant="outline">Cancel</Button>
+          <DrawerClose render={<Button variant="outline" />}>
+            Cancel
           </DrawerClose>
         </DrawerFooter>
       </DrawerContent>
diff --git a/apps/v4/examples/base/drawer-sides.tsx b/apps/v4/examples/base/drawer-sides.tsx
index 6b26bd27f90..3366414c665 100644
--- a/apps/v4/examples/base/drawer-sides.tsx
+++ b/apps/v4/examples/base/drawer-sides.tsx
@@ -10,7 +10,7 @@ import {
   DrawerTrigger,
 } from "@/styles/base-nova/ui/drawer"
 
-const DRAWER_SIDES = ["top", "right", "bottom", "left"] as const
+const DRAWER_SIDES = ["up", "right", "down", "left"] as const
 
 export function DrawerWithSides() {
   return (
@@ -18,16 +18,16 @@ export function DrawerWithSides() {
       {DRAWER_SIDES.map((side) => (
         <Drawer
           key={side}
-          direction={
-            side === "bottom" ? undefined : (side as "top" | "right" | "left")
+          swipeDirection={
+            side === "down" ? undefined : (side as "up" | "right" | "left")
           }
         >
-          <DrawerTrigger asChild>
-            <Button variant="outline" className="capitalize">
-              {side}
-            </Button>
+          <DrawerTrigger
+            render={<Button variant="outline" className="capitalize" />}
+          >
+            {side}
           </DrawerTrigger>
-          <DrawerContent className="data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]">
+          <DrawerContent className="data-[swipe-direction=down]:max-h-[50vh] data-[swipe-direction=up]:max-h-[50vh]">
             <DrawerHeader>
               <DrawerTitle>Move Goal</DrawerTitle>
               <DrawerDescription>
@@ -50,8 +50,8 @@ export function DrawerWithSides() {
             </div>
             <DrawerFooter>
               <Button>Submit</Button>
-              <DrawerClose asChild>
-                <Button variant="outline">Cancel</Button>
+              <DrawerClose render={<Button variant="outline" />}>
+                Cancel
               </DrawerClose>
             </DrawerFooter>
           </DrawerContent>
diff --git a/apps/v4/public/r/index.json b/apps/v4/public/r/index.json
index 7d3fc8e7c08..4c2a82f7088 100644
--- a/apps/v4/public/r/index.json
+++ b/apps/v4/public/r/index.json
@@ -494,7 +494,7 @@
         "base": {
           "docs": "https://ui.shadcn.com/docs/components/base/drawer",
           "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
-          "api": "https://vaul.emilkowal.ski/getting-started"
+          "api": "https://base-ui.com/react/components/drawer.md"
         }
       }
     }
diff --git a/apps/v4/public/r/styles/base-luma/dashboard-01.json b/apps/v4/public/r/styles/base-luma/dashboard-01.json
index 210b6a6fec0..25e5bda52cd 100644
--- a/apps/v4/public/r/styles/base-luma/dashboard-01.json
+++ b/apps/v4/public/r/styles/base-luma/dashboard-01.json
@@ -57,7 +57,7 @@
     },
     {
       "path": "registry/base-luma/blocks/dashboard-01/components/data-table.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/base-luma/hooks/use-mobile\"\nimport { Badge } from \"@/registry/base-luma/ui/badge\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-luma/ui/chart\"\nimport { Checkbox } from \"@/registry/base-luma/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-luma/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-luma/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-luma/ui/input\"\nimport { Label } from \"@/registry/base-luma/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-luma/ui/select\"\nimport { Separator } from \"@/registry/base-luma/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/base-luma/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-luma/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"size-7 text-muted-foreground hover:bg-transparent\"\n    >\n      <IconPlaceholder\n        lucide=\"GripVerticalIcon\"\n        tabler=\"IconGripVertical\"\n        hugeicons=\"DragDropVerticalIcon\"\n        phosphor=\"DotsSixVerticalIcon\"\n        remixicon=\"RiDraggable\"\n        className=\"size-3 text-muted-foreground\"\n      />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={table.getIsAllPageRowsSelected()}\n          indeterminate={\n            table.getIsSomePageRowsSelected() &&\n            !table.getIsAllPageRowsSelected()\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n        {row.original.status === \"Done\" ? (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheckFilled\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleFill\"\n            className=\"fill-green-500 dark:fill-green-400\"\n          />\n        ) : (\n          <IconPlaceholder\n            lucide=\"LoaderIcon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoader4Line\"\n          />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          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\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          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\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select\n            items={[\n              { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n              { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n            ]}\n          >\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectGroup>\n                <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                <SelectItem value=\"Jamik Tashpulatov\">\n                  Jamik Tashpulatov\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              className=\"flex size-8 text-muted-foreground data-open:bg-muted\"\n              size=\"icon\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"EllipsisVerticalIcon\"\n            tabler=\"IconDotsVertical\"\n            hugeicons=\"MoreVerticalCircle01Icon\"\n            phosphor=\"DotsThreeVerticalIcon\"\n            remixicon=\"RiMore2Line\"\n          />\n          <span className=\"sr-only\">Open menu</span>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select\n          defaultValue=\"outline\"\n          items={[\n            { label: \"Outline\", value: \"outline\" },\n            { label: \"Past Performance\", value: \"past-performance\" },\n            { label: \"Key Personnel\", value: \"key-personnel\" },\n            { label: \"Focus Documents\", value: \"focus-documents\" },\n          ]}\n        >\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"outline\">Outline</SelectItem>\n              <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n              <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n              <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <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\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"sm\" />}\n            >\n              <IconPlaceholder\n                lucide=\"Columns3Icon\"\n                tabler=\"IconLayoutColumns\"\n                hugeicons=\"LeftToRightListBulletIcon\"\n                phosphor=\"ColumnsIcon\"\n                remixicon=\"RiLayoutColumnLine\"\n                data-icon=\"inline-start\"\n              />\n              Columns\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"sticky top-0 z-10 bg-muted\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"hidden flex-1 text-sm text-muted-foreground lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n                items={[10, 20, 30, 40, 50].map((pageSize) => ({\n                  label: `${pageSize}`,\n                  value: `${pageSize}`,\n                }))}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  <SelectGroup>\n                    {[10, 20, 30, 40, 50].map((pageSize) => (\n                      <SelectItem key={pageSize} value={`${pageSize}`}>\n                        {pageSize}\n                      </SelectItem>\n                    ))}\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsLeftIcon\"\n                  tabler=\"IconChevronsLeft\"\n                  hugeicons=\"ArrowLeftDoubleIcon\"\n                  phosphor=\"CaretDoubleLeftIcon\"\n                  remixicon=\"RiSkipLeftLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronLeftIcon\"\n                  tabler=\"IconChevronLeft\"\n                  hugeicons=\"ArrowLeft01Icon\"\n                  phosphor=\"CaretLeftIcon\"\n                  remixicon=\"RiArrowLeftSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsRightIcon\"\n                  tabler=\"IconChevronsRight\"\n                  hugeicons=\"ArrowRightDoubleIcon\"\n                  phosphor=\"CaretDoubleRightIcon\"\n                  remixicon=\"RiSkipRightLine\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\nconst chartData = [\n  {\n    month: \"January\",\n    desktop: 186,\n    mobile: 80,\n  },\n  {\n    month: \"February\",\n    desktop: 305,\n    mobile: 200,\n  },\n  {\n    month: \"March\",\n    desktop: 237,\n    mobile: 120,\n  },\n  {\n    month: \"April\",\n    desktop: 73,\n    mobile: 190,\n  },\n  {\n    month: \"May\",\n    desktop: 209,\n    mobile: 130,\n  },\n  {\n    month: \"June\",\n    desktop: 214,\n    mobile: 140,\n  },\n]\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n  return (\n    <Drawer direction={isMobile ? \"bottom\" : \"right\"}>\n      <DrawerTrigger asChild>\n        <Button variant=\"link\" className=\"w-fit px-0 text-left text-foreground\">\n          {item.header}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconPlaceholder\n                    lucide=\"TrendingUpIcon\"\n                    tabler=\"IconTrendingUp\"\n                    hugeicons=\"ChartUpIcon\"\n                    phosphor=\"TrendUpIcon\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select\n                  defaultValue={item.type}\n                  items={[\n                    { label: \"Table of Contents\", value: \"Table of Contents\" },\n                    { label: \"Executive Summary\", value: \"Executive Summary\" },\n                    {\n                      label: \"Technical Approach\",\n                      value: \"Technical Approach\",\n                    },\n                    { label: \"Design\", value: \"Design\" },\n                    { label: \"Capabilities\", value: \"Capabilities\" },\n                    { label: \"Focus Documents\", value: \"Focus Documents\" },\n                    { label: \"Narrative\", value: \"Narrative\" },\n                    { label: \"Cover Page\", value: \"Cover Page\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Table of Contents\">\n                        Table of Contents\n                      </SelectItem>\n                      <SelectItem value=\"Executive Summary\">\n                        Executive Summary\n                      </SelectItem>\n                      <SelectItem value=\"Technical Approach\">\n                        Technical Approach\n                      </SelectItem>\n                      <SelectItem value=\"Design\">Design</SelectItem>\n                      <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                      <SelectItem value=\"Focus Documents\">\n                        Focus Documents\n                      </SelectItem>\n                      <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                      <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select\n                  defaultValue={item.status}\n                  items={[\n                    { label: \"Done\", value: \"Done\" },\n                    { label: \"In Progress\", value: \"In Progress\" },\n                    { label: \"Not Started\", value: \"Not Started\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Done\">Done</SelectItem>\n                      <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                      <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select\n                defaultValue={item.reviewer}\n                items={[\n                  { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n                  { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n                  { label: \"Emily Whalen\", value: \"Emily Whalen\" },\n                ]}\n              >\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                    <SelectItem value=\"Jamik Tashpulatov\">\n                      Jamik Tashpulatov\n                    </SelectItem>\n                    <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose asChild>\n            <Button variant=\"outline\" />\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/base-luma/hooks/use-mobile\"\nimport { Badge } from \"@/registry/base-luma/ui/badge\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-luma/ui/chart\"\nimport { Checkbox } from \"@/registry/base-luma/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-luma/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-luma/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-luma/ui/input\"\nimport { Label } from \"@/registry/base-luma/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-luma/ui/select\"\nimport { Separator } from \"@/registry/base-luma/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/base-luma/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-luma/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"size-7 text-muted-foreground hover:bg-transparent\"\n    >\n      <IconPlaceholder\n        lucide=\"GripVerticalIcon\"\n        tabler=\"IconGripVertical\"\n        hugeicons=\"DragDropVerticalIcon\"\n        phosphor=\"DotsSixVerticalIcon\"\n        remixicon=\"RiDraggable\"\n        className=\"size-3 text-muted-foreground\"\n      />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={table.getIsAllPageRowsSelected()}\n          indeterminate={\n            table.getIsSomePageRowsSelected() &&\n            !table.getIsAllPageRowsSelected()\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n        {row.original.status === \"Done\" ? (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheckFilled\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleFill\"\n            className=\"fill-green-500 dark:fill-green-400\"\n          />\n        ) : (\n          <IconPlaceholder\n            lucide=\"LoaderIcon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoader4Line\"\n          />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          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\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          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\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select\n            items={[\n              { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n              { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n            ]}\n          >\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectGroup>\n                <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                <SelectItem value=\"Jamik Tashpulatov\">\n                  Jamik Tashpulatov\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              className=\"flex size-8 text-muted-foreground data-open:bg-muted\"\n              size=\"icon\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"EllipsisVerticalIcon\"\n            tabler=\"IconDotsVertical\"\n            hugeicons=\"MoreVerticalCircle01Icon\"\n            phosphor=\"DotsThreeVerticalIcon\"\n            remixicon=\"RiMore2Line\"\n          />\n          <span className=\"sr-only\">Open menu</span>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select\n          defaultValue=\"outline\"\n          items={[\n            { label: \"Outline\", value: \"outline\" },\n            { label: \"Past Performance\", value: \"past-performance\" },\n            { label: \"Key Personnel\", value: \"key-personnel\" },\n            { label: \"Focus Documents\", value: \"focus-documents\" },\n          ]}\n        >\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"outline\">Outline</SelectItem>\n              <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n              <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n              <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <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\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"sm\" />}\n            >\n              <IconPlaceholder\n                lucide=\"Columns3Icon\"\n                tabler=\"IconLayoutColumns\"\n                hugeicons=\"LeftToRightListBulletIcon\"\n                phosphor=\"ColumnsIcon\"\n                remixicon=\"RiLayoutColumnLine\"\n                data-icon=\"inline-start\"\n              />\n              Columns\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"sticky top-0 z-10 bg-muted\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"hidden flex-1 text-sm text-muted-foreground lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n                items={[10, 20, 30, 40, 50].map((pageSize) => ({\n                  label: `${pageSize}`,\n                  value: `${pageSize}`,\n                }))}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  <SelectGroup>\n                    {[10, 20, 30, 40, 50].map((pageSize) => (\n                      <SelectItem key={pageSize} value={`${pageSize}`}>\n                        {pageSize}\n                      </SelectItem>\n                    ))}\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsLeftIcon\"\n                  tabler=\"IconChevronsLeft\"\n                  hugeicons=\"ArrowLeftDoubleIcon\"\n                  phosphor=\"CaretDoubleLeftIcon\"\n                  remixicon=\"RiSkipLeftLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronLeftIcon\"\n                  tabler=\"IconChevronLeft\"\n                  hugeicons=\"ArrowLeft01Icon\"\n                  phosphor=\"CaretLeftIcon\"\n                  remixicon=\"RiArrowLeftSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsRightIcon\"\n                  tabler=\"IconChevronsRight\"\n                  hugeicons=\"ArrowRightDoubleIcon\"\n                  phosphor=\"CaretDoubleRightIcon\"\n                  remixicon=\"RiSkipRightLine\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\nconst chartData = [\n  {\n    month: \"January\",\n    desktop: 186,\n    mobile: 80,\n  },\n  {\n    month: \"February\",\n    desktop: 305,\n    mobile: 200,\n  },\n  {\n    month: \"March\",\n    desktop: 237,\n    mobile: 120,\n  },\n  {\n    month: \"April\",\n    desktop: 73,\n    mobile: 190,\n  },\n  {\n    month: \"May\",\n    desktop: 209,\n    mobile: 130,\n  },\n  {\n    month: \"June\",\n    desktop: 214,\n    mobile: 140,\n  },\n]\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n  return (\n    <Drawer swipeDirection={isMobile ? \"down\" : \"right\"}>\n      <DrawerTrigger\n        render={\n          <Button\n            variant=\"link\"\n            className=\"w-fit px-0 text-left text-foreground\"\n          />\n        }\n      >\n        {item.header}\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconPlaceholder\n                    lucide=\"TrendingUpIcon\"\n                    tabler=\"IconTrendingUp\"\n                    hugeicons=\"ChartUpIcon\"\n                    phosphor=\"TrendUpIcon\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select\n                  defaultValue={item.type}\n                  items={[\n                    { label: \"Table of Contents\", value: \"Table of Contents\" },\n                    { label: \"Executive Summary\", value: \"Executive Summary\" },\n                    {\n                      label: \"Technical Approach\",\n                      value: \"Technical Approach\",\n                    },\n                    { label: \"Design\", value: \"Design\" },\n                    { label: \"Capabilities\", value: \"Capabilities\" },\n                    { label: \"Focus Documents\", value: \"Focus Documents\" },\n                    { label: \"Narrative\", value: \"Narrative\" },\n                    { label: \"Cover Page\", value: \"Cover Page\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Table of Contents\">\n                        Table of Contents\n                      </SelectItem>\n                      <SelectItem value=\"Executive Summary\">\n                        Executive Summary\n                      </SelectItem>\n                      <SelectItem value=\"Technical Approach\">\n                        Technical Approach\n                      </SelectItem>\n                      <SelectItem value=\"Design\">Design</SelectItem>\n                      <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                      <SelectItem value=\"Focus Documents\">\n                        Focus Documents\n                      </SelectItem>\n                      <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                      <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select\n                  defaultValue={item.status}\n                  items={[\n                    { label: \"Done\", value: \"Done\" },\n                    { label: \"In Progress\", value: \"In Progress\" },\n                    { label: \"Not Started\", value: \"Not Started\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Done\">Done</SelectItem>\n                      <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                      <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select\n                defaultValue={item.reviewer}\n                items={[\n                  { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n                  { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n                  { label: \"Emily Whalen\", value: \"Emily Whalen\" },\n                ]}\n              >\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                    <SelectItem value=\"Jamik Tashpulatov\">\n                      Jamik Tashpulatov\n                    </SelectItem>\n                    <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose render={<Button variant=\"outline\" />}>Done</DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/base-luma/drawer-example.json b/apps/v4/public/r/styles/base-luma/drawer-example.json
index 3902cd4efb4..79c6d5752ce 100644
--- a/apps/v4/public/r/styles/base-luma/drawer-example.json
+++ b/apps/v4/public/r/styles/base-luma/drawer-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-luma/examples/drawer-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-luma/components/example\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-luma/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-luma/components/example\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-luma/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"up\", \"right\", \"down\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            swipeDirection={\n              side === \"down\" ? undefined : (side as \"up\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger\n              render={<Button variant=\"outline\" className=\"capitalize\" />}\n            >\n              {side}\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[swipe-direction=down]:max-h-[50vh] data-[swipe-direction=up]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose render={<Button variant=\"outline\" />}>\n                  Cancel\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer swipeDirection=\"right\">\n        <DrawerTrigger render={<Button variant=\"outline\" />}>\n          Scrollable Content\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-luma/drawer.json b/apps/v4/public/r/styles/base-luma/drawer.json
index 7d645b84180..07e531f295c 100644
--- a/apps/v4/public/r/styles/base-luma/drawer.json
+++ b/apps/v4/public/r/styles/base-luma/drawer.json
@@ -2,12 +2,12 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "drawer",
   "dependencies": [
-    "vaul"
+    "@base-ui/react"
   ],
   "files": [
     {
       "path": "registry/base-luma/ui/drawer.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/base-luma/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/30 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content fixed z-50 flex h-auto flex-col bg-transparent p-4 text-sm before:absolute before:inset-2 before:-z-10 before:rounded-4xl before:border before:border-border before:bg-popover before:shadow-xl data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\n        \"cn-font-heading text-base font-medium text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\"\n\nimport { cn } from \"@/registry/base-luma/lib/utils\"\n\nfunction Drawer({ ...props }: DrawerPrimitive.Root.Props) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: DrawerPrimitive.Backdrop.Props) {\n  return (\n    <DrawerPrimitive.Backdrop\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/30 opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: DrawerPrimitive.Popup.Props) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Viewport\n        data-slot=\"drawer-viewport\"\n        className=\"pointer-events-none fixed inset-0 z-50\"\n      >\n        <DrawerPrimitive.Popup\n          data-slot=\"drawer-content\"\n          className={cn(\n            \"group/drawer-content pointer-events-auto fixed z-50 flex h-auto transform-(--drawer-transform) flex-col overflow-hidden bg-transparent p-4 text-sm transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--drawer-bleed-x:3rem] [--drawer-bleed-y:3rem] before:absolute before:inset-2 before:-z-10 before:rounded-4xl before:border before:border-border before:bg-popover before:shadow-xl data-ending-style:transform-(--drawer-closed-transform) data-starting-style:transform-(--drawer-closed-transform) data-swiping:duration-0 data-swiping:select-none data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:-mb-(--drawer-bleed-y) data-[swipe-direction=down]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=down]:pb-(--drawer-bleed-y) data-[swipe-direction=down]:[--drawer-closed-transform:translate3d(0,100%,0)] data-[swipe-direction=down]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:-ml-(--drawer-bleed-x) data-[swipe-direction=left]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=left]:pl-(--drawer-bleed-x) data-[swipe-direction=left]:[--drawer-closed-transform:translate3d(-100%,0,0)] data-[swipe-direction=left]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:-mr-(--drawer-bleed-x) data-[swipe-direction=right]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=right]:pr-(--drawer-bleed-x) data-[swipe-direction=right]:[--drawer-closed-transform:translate3d(100%,0,0)] data-[swipe-direction=right]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:-mt-(--drawer-bleed-y) data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=up]:pt-(--drawer-bleed-y) data-[swipe-direction=up]:[--drawer-closed-transform:translate3d(0,-100%,0)] data-[swipe-direction=up]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:sm:w-[calc(24rem+var(--drawer-bleed-x))] data-[swipe-direction=right]:sm:w-[calc(24rem+var(--drawer-bleed-x))]\",\n            className\n          )}\n          {...props}\n        >\n          <div className=\"mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full bg-muted group-data-[swipe-direction=down]/drawer-content:block\" />\n          <DrawerPrimitive.Content className=\"flex min-h-0 flex-1 flex-col\">\n            {children}\n          </DrawerPrimitive.Content>\n        </DrawerPrimitive.Popup>\n      </DrawerPrimitive.Viewport>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[swipe-direction=down]/drawer-content:text-center group-data-[swipe-direction=up]/drawer-content:text-center md:gap-1.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\n        \"cn-font-heading text-base font-medium text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: DrawerPrimitive.Description.Props) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
@@ -15,7 +15,7 @@
     "links": {
       "docs": "https://ui.shadcn.com/docs/components/base/drawer",
       "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
-      "api": "https://vaul.emilkowal.ski/getting-started"
+      "api": "https://base-ui.com/react/components/drawer.md"
     }
   },
   "type": "registry:ui"
diff --git a/apps/v4/public/r/styles/base-luma/registry.json b/apps/v4/public/r/styles/base-luma/registry.json
index 713f2127730..f1f0a112bea 100644
--- a/apps/v4/public/r/styles/base-luma/registry.json
+++ b/apps/v4/public/r/styles/base-luma/registry.json
@@ -382,7 +382,7 @@
     },
     {
       "name": "drawer",
-      "dependencies": ["vaul"],
+      "dependencies": ["@base-ui/react"],
       "files": [
         {
           "path": "registry/base-luma/ui/drawer.tsx",
@@ -393,7 +393,7 @@
         "links": {
           "docs": "https://ui.shadcn.com/docs/components/base/drawer",
           "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
-          "api": "https://vaul.emilkowal.ski/getting-started"
+          "api": "https://base-ui.com/react/components/drawer.md"
         }
       },
       "type": "registry:ui"
diff --git a/apps/v4/public/r/styles/base-lyra/dashboard-01.json b/apps/v4/public/r/styles/base-lyra/dashboard-01.json
index 48732352890..39288c52fa9 100644
--- a/apps/v4/public/r/styles/base-lyra/dashboard-01.json
+++ b/apps/v4/public/r/styles/base-lyra/dashboard-01.json
@@ -57,7 +57,7 @@
     },
     {
       "path": "registry/base-lyra/blocks/dashboard-01/components/data-table.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/base-lyra/hooks/use-mobile\"\nimport { Badge } from \"@/registry/base-lyra/ui/badge\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-lyra/ui/chart\"\nimport { Checkbox } from \"@/registry/base-lyra/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-lyra/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-lyra/ui/select\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/base-lyra/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-lyra/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"size-7 text-muted-foreground hover:bg-transparent\"\n    >\n      <IconPlaceholder\n        lucide=\"GripVerticalIcon\"\n        tabler=\"IconGripVertical\"\n        hugeicons=\"DragDropVerticalIcon\"\n        phosphor=\"DotsSixVerticalIcon\"\n        remixicon=\"RiDraggable\"\n        className=\"size-3 text-muted-foreground\"\n      />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={table.getIsAllPageRowsSelected()}\n          indeterminate={\n            table.getIsSomePageRowsSelected() &&\n            !table.getIsAllPageRowsSelected()\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n        {row.original.status === \"Done\" ? (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheckFilled\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleFill\"\n            className=\"fill-green-500 dark:fill-green-400\"\n          />\n        ) : (\n          <IconPlaceholder\n            lucide=\"LoaderIcon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoader4Line\"\n          />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          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\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          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\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select\n            items={[\n              { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n              { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n            ]}\n          >\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectGroup>\n                <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                <SelectItem value=\"Jamik Tashpulatov\">\n                  Jamik Tashpulatov\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              className=\"flex size-8 text-muted-foreground data-open:bg-muted\"\n              size=\"icon\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"EllipsisVerticalIcon\"\n            tabler=\"IconDotsVertical\"\n            hugeicons=\"MoreVerticalCircle01Icon\"\n            phosphor=\"DotsThreeVerticalIcon\"\n            remixicon=\"RiMore2Line\"\n          />\n          <span className=\"sr-only\">Open menu</span>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select\n          defaultValue=\"outline\"\n          items={[\n            { label: \"Outline\", value: \"outline\" },\n            { label: \"Past Performance\", value: \"past-performance\" },\n            { label: \"Key Personnel\", value: \"key-personnel\" },\n            { label: \"Focus Documents\", value: \"focus-documents\" },\n          ]}\n        >\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"outline\">Outline</SelectItem>\n              <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n              <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n              <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <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\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"sm\" />}\n            >\n              <IconPlaceholder\n                lucide=\"Columns3Icon\"\n                tabler=\"IconLayoutColumns\"\n                hugeicons=\"LeftToRightListBulletIcon\"\n                phosphor=\"ColumnsIcon\"\n                remixicon=\"RiLayoutColumnLine\"\n                data-icon=\"inline-start\"\n              />\n              Columns\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"sticky top-0 z-10 bg-muted\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"hidden flex-1 text-sm text-muted-foreground lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n                items={[10, 20, 30, 40, 50].map((pageSize) => ({\n                  label: `${pageSize}`,\n                  value: `${pageSize}`,\n                }))}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  <SelectGroup>\n                    {[10, 20, 30, 40, 50].map((pageSize) => (\n                      <SelectItem key={pageSize} value={`${pageSize}`}>\n                        {pageSize}\n                      </SelectItem>\n                    ))}\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsLeftIcon\"\n                  tabler=\"IconChevronsLeft\"\n                  hugeicons=\"ArrowLeftDoubleIcon\"\n                  phosphor=\"CaretDoubleLeftIcon\"\n                  remixicon=\"RiSkipLeftLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronLeftIcon\"\n                  tabler=\"IconChevronLeft\"\n                  hugeicons=\"ArrowLeft01Icon\"\n                  phosphor=\"CaretLeftIcon\"\n                  remixicon=\"RiArrowLeftSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsRightIcon\"\n                  tabler=\"IconChevronsRight\"\n                  hugeicons=\"ArrowRightDoubleIcon\"\n                  phosphor=\"CaretDoubleRightIcon\"\n                  remixicon=\"RiSkipRightLine\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\nconst chartData = [\n  {\n    month: \"January\",\n    desktop: 186,\n    mobile: 80,\n  },\n  {\n    month: \"February\",\n    desktop: 305,\n    mobile: 200,\n  },\n  {\n    month: \"March\",\n    desktop: 237,\n    mobile: 120,\n  },\n  {\n    month: \"April\",\n    desktop: 73,\n    mobile: 190,\n  },\n  {\n    month: \"May\",\n    desktop: 209,\n    mobile: 130,\n  },\n  {\n    month: \"June\",\n    desktop: 214,\n    mobile: 140,\n  },\n]\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n  return (\n    <Drawer direction={isMobile ? \"bottom\" : \"right\"}>\n      <DrawerTrigger asChild>\n        <Button variant=\"link\" className=\"w-fit px-0 text-left text-foreground\">\n          {item.header}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconPlaceholder\n                    lucide=\"TrendingUpIcon\"\n                    tabler=\"IconTrendingUp\"\n                    hugeicons=\"ChartUpIcon\"\n                    phosphor=\"TrendUpIcon\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select\n                  defaultValue={item.type}\n                  items={[\n                    { label: \"Table of Contents\", value: \"Table of Contents\" },\n                    { label: \"Executive Summary\", value: \"Executive Summary\" },\n                    {\n                      label: \"Technical Approach\",\n                      value: \"Technical Approach\",\n                    },\n                    { label: \"Design\", value: \"Design\" },\n                    { label: \"Capabilities\", value: \"Capabilities\" },\n                    { label: \"Focus Documents\", value: \"Focus Documents\" },\n                    { label: \"Narrative\", value: \"Narrative\" },\n                    { label: \"Cover Page\", value: \"Cover Page\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Table of Contents\">\n                        Table of Contents\n                      </SelectItem>\n                      <SelectItem value=\"Executive Summary\">\n                        Executive Summary\n                      </SelectItem>\n                      <SelectItem value=\"Technical Approach\">\n                        Technical Approach\n                      </SelectItem>\n                      <SelectItem value=\"Design\">Design</SelectItem>\n                      <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                      <SelectItem value=\"Focus Documents\">\n                        Focus Documents\n                      </SelectItem>\n                      <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                      <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select\n                  defaultValue={item.status}\n                  items={[\n                    { label: \"Done\", value: \"Done\" },\n                    { label: \"In Progress\", value: \"In Progress\" },\n                    { label: \"Not Started\", value: \"Not Started\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Done\">Done</SelectItem>\n                      <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                      <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select\n                defaultValue={item.reviewer}\n                items={[\n                  { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n                  { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n                  { label: \"Emily Whalen\", value: \"Emily Whalen\" },\n                ]}\n              >\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                    <SelectItem value=\"Jamik Tashpulatov\">\n                      Jamik Tashpulatov\n                    </SelectItem>\n                    <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose asChild>\n            <Button variant=\"outline\" />\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/base-lyra/hooks/use-mobile\"\nimport { Badge } from \"@/registry/base-lyra/ui/badge\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-lyra/ui/chart\"\nimport { Checkbox } from \"@/registry/base-lyra/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-lyra/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-lyra/ui/select\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/base-lyra/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-lyra/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"size-7 text-muted-foreground hover:bg-transparent\"\n    >\n      <IconPlaceholder\n        lucide=\"GripVerticalIcon\"\n        tabler=\"IconGripVertical\"\n        hugeicons=\"DragDropVerticalIcon\"\n        phosphor=\"DotsSixVerticalIcon\"\n        remixicon=\"RiDraggable\"\n        className=\"size-3 text-muted-foreground\"\n      />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={table.getIsAllPageRowsSelected()}\n          indeterminate={\n            table.getIsSomePageRowsSelected() &&\n            !table.getIsAllPageRowsSelected()\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n        {row.original.status === \"Done\" ? (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheckFilled\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleFill\"\n            className=\"fill-green-500 dark:fill-green-400\"\n          />\n        ) : (\n          <IconPlaceholder\n            lucide=\"LoaderIcon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoader4Line\"\n          />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          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\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          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\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select\n            items={[\n              { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n              { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n            ]}\n          >\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectGroup>\n                <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                <SelectItem value=\"Jamik Tashpulatov\">\n                  Jamik Tashpulatov\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              className=\"flex size-8 text-muted-foreground data-open:bg-muted\"\n              size=\"icon\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"EllipsisVerticalIcon\"\n            tabler=\"IconDotsVertical\"\n            hugeicons=\"MoreVerticalCircle01Icon\"\n            phosphor=\"DotsThreeVerticalIcon\"\n            remixicon=\"RiMore2Line\"\n          />\n          <span className=\"sr-only\">Open menu</span>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select\n          defaultValue=\"outline\"\n          items={[\n            { label: \"Outline\", value: \"outline\" },\n            { label: \"Past Performance\", value: \"past-performance\" },\n            { label: \"Key Personnel\", value: \"key-personnel\" },\n            { label: \"Focus Documents\", value: \"focus-documents\" },\n          ]}\n        >\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"outline\">Outline</SelectItem>\n              <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n              <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n              <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <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\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"sm\" />}\n            >\n              <IconPlaceholder\n                lucide=\"Columns3Icon\"\n                tabler=\"IconLayoutColumns\"\n                hugeicons=\"LeftToRightListBulletIcon\"\n                phosphor=\"ColumnsIcon\"\n                remixicon=\"RiLayoutColumnLine\"\n                data-icon=\"inline-start\"\n              />\n              Columns\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"sticky top-0 z-10 bg-muted\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"hidden flex-1 text-sm text-muted-foreground lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n                items={[10, 20, 30, 40, 50].map((pageSize) => ({\n                  label: `${pageSize}`,\n                  value: `${pageSize}`,\n                }))}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  <SelectGroup>\n                    {[10, 20, 30, 40, 50].map((pageSize) => (\n                      <SelectItem key={pageSize} value={`${pageSize}`}>\n                        {pageSize}\n                      </SelectItem>\n                    ))}\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsLeftIcon\"\n                  tabler=\"IconChevronsLeft\"\n                  hugeicons=\"ArrowLeftDoubleIcon\"\n                  phosphor=\"CaretDoubleLeftIcon\"\n                  remixicon=\"RiSkipLeftLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronLeftIcon\"\n                  tabler=\"IconChevronLeft\"\n                  hugeicons=\"ArrowLeft01Icon\"\n                  phosphor=\"CaretLeftIcon\"\n                  remixicon=\"RiArrowLeftSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsRightIcon\"\n                  tabler=\"IconChevronsRight\"\n                  hugeicons=\"ArrowRightDoubleIcon\"\n                  phosphor=\"CaretDoubleRightIcon\"\n                  remixicon=\"RiSkipRightLine\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\nconst chartData = [\n  {\n    month: \"January\",\n    desktop: 186,\n    mobile: 80,\n  },\n  {\n    month: \"February\",\n    desktop: 305,\n    mobile: 200,\n  },\n  {\n    month: \"March\",\n    desktop: 237,\n    mobile: 120,\n  },\n  {\n    month: \"April\",\n    desktop: 73,\n    mobile: 190,\n  },\n  {\n    month: \"May\",\n    desktop: 209,\n    mobile: 130,\n  },\n  {\n    month: \"June\",\n    desktop: 214,\n    mobile: 140,\n  },\n]\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n  return (\n    <Drawer swipeDirection={isMobile ? \"down\" : \"right\"}>\n      <DrawerTrigger\n        render={\n          <Button\n            variant=\"link\"\n            className=\"w-fit px-0 text-left text-foreground\"\n          />\n        }\n      >\n        {item.header}\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconPlaceholder\n                    lucide=\"TrendingUpIcon\"\n                    tabler=\"IconTrendingUp\"\n                    hugeicons=\"ChartUpIcon\"\n                    phosphor=\"TrendUpIcon\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select\n                  defaultValue={item.type}\n                  items={[\n                    { label: \"Table of Contents\", value: \"Table of Contents\" },\n                    { label: \"Executive Summary\", value: \"Executive Summary\" },\n                    {\n                      label: \"Technical Approach\",\n                      value: \"Technical Approach\",\n                    },\n                    { label: \"Design\", value: \"Design\" },\n                    { label: \"Capabilities\", value: \"Capabilities\" },\n                    { label: \"Focus Documents\", value: \"Focus Documents\" },\n                    { label: \"Narrative\", value: \"Narrative\" },\n                    { label: \"Cover Page\", value: \"Cover Page\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Table of Contents\">\n                        Table of Contents\n                      </SelectItem>\n                      <SelectItem value=\"Executive Summary\">\n                        Executive Summary\n                      </SelectItem>\n                      <SelectItem value=\"Technical Approach\">\n                        Technical Approach\n                      </SelectItem>\n                      <SelectItem value=\"Design\">Design</SelectItem>\n                      <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                      <SelectItem value=\"Focus Documents\">\n                        Focus Documents\n                      </SelectItem>\n                      <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                      <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select\n                  defaultValue={item.status}\n                  items={[\n                    { label: \"Done\", value: \"Done\" },\n                    { label: \"In Progress\", value: \"In Progress\" },\n                    { label: \"Not Started\", value: \"Not Started\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Done\">Done</SelectItem>\n                      <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                      <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select\n                defaultValue={item.reviewer}\n                items={[\n                  { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n                  { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n                  { label: \"Emily Whalen\", value: \"Emily Whalen\" },\n                ]}\n              >\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                    <SelectItem value=\"Jamik Tashpulatov\">\n                      Jamik Tashpulatov\n                    </SelectItem>\n                    <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose render={<Button variant=\"outline\" />}>Done</DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/base-lyra/drawer-example.json b/apps/v4/public/r/styles/base-lyra/drawer-example.json
index 0045f90e438..d7eb13f7c61 100644
--- a/apps/v4/public/r/styles/base-lyra/drawer-example.json
+++ b/apps/v4/public/r/styles/base-lyra/drawer-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/drawer-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-lyra/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-lyra/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"up\", \"right\", \"down\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            swipeDirection={\n              side === \"down\" ? undefined : (side as \"up\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger\n              render={<Button variant=\"outline\" className=\"capitalize\" />}\n            >\n              {side}\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[swipe-direction=down]:max-h-[50vh] data-[swipe-direction=up]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose render={<Button variant=\"outline\" />}>\n                  Cancel\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer swipeDirection=\"right\">\n        <DrawerTrigger render={<Button variant=\"outline\" />}>\n          Scrollable Content\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/drawer.json b/apps/v4/public/r/styles/base-lyra/drawer.json
index a763c431dd8..d6bc15d1fa8 100644
--- a/apps/v4/public/r/styles/base-lyra/drawer.json
+++ b/apps/v4/public/r/styles/base-lyra/drawer.json
@@ -2,12 +2,12 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "drawer",
   "dependencies": [
-    "vaul"
+    "@base-ui/react"
   ],
   "files": [
     {
       "path": "registry/base-lyra/ui/drawer.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-xs/relaxed text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-none data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-none data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-none data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-none data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-none bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\n        \"cn-font-heading text-sm font-medium text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-xs/relaxed text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Drawer({ ...props }: DrawerPrimitive.Root.Props) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: DrawerPrimitive.Backdrop.Props) {\n  return (\n    <DrawerPrimitive.Backdrop\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/10 opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: DrawerPrimitive.Popup.Props) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Viewport\n        data-slot=\"drawer-viewport\"\n        className=\"pointer-events-none fixed inset-0 z-50\"\n      >\n        <DrawerPrimitive.Popup\n          data-slot=\"drawer-content\"\n          className={cn(\n            \"group/drawer-content pointer-events-auto fixed z-50 flex h-auto transform-(--drawer-transform) flex-col overflow-hidden bg-popover text-xs/relaxed text-popover-foreground transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--drawer-bleed-x:3rem] [--drawer-bleed-y:3rem] data-ending-style:transform-(--drawer-closed-transform) data-starting-style:transform-(--drawer-closed-transform) data-swiping:duration-0 data-swiping:select-none data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:-mb-(--drawer-bleed-y) data-[swipe-direction=down]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=down]:rounded-none data-[swipe-direction=down]:border-t data-[swipe-direction=down]:pb-(--drawer-bleed-y) data-[swipe-direction=down]:[--drawer-closed-transform:translate3d(0,100%,0)] data-[swipe-direction=down]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:-ml-(--drawer-bleed-x) data-[swipe-direction=left]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=left]:rounded-none data-[swipe-direction=left]:border-r data-[swipe-direction=left]:pl-(--drawer-bleed-x) data-[swipe-direction=left]:[--drawer-closed-transform:translate3d(-100%,0,0)] data-[swipe-direction=left]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:-mr-(--drawer-bleed-x) data-[swipe-direction=right]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=right]:rounded-none data-[swipe-direction=right]:border-l data-[swipe-direction=right]:pr-(--drawer-bleed-x) data-[swipe-direction=right]:[--drawer-closed-transform:translate3d(100%,0,0)] data-[swipe-direction=right]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:-mt-(--drawer-bleed-y) data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=up]:rounded-none data-[swipe-direction=up]:border-b data-[swipe-direction=up]:pt-(--drawer-bleed-y) data-[swipe-direction=up]:[--drawer-closed-transform:translate3d(0,-100%,0)] data-[swipe-direction=up]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[vaul-drawer-direction=bottom]:rounded-none data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:rounded-none data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:rounded-none data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:rounded-none data-[vaul-drawer-direction=top]:border-b data-[swipe-direction=left]:sm:w-[calc(24rem+var(--drawer-bleed-x))] data-[swipe-direction=right]:sm:w-[calc(24rem+var(--drawer-bleed-x))]\",\n            className\n          )}\n          {...props}\n        >\n          <div className=\"mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-none bg-muted group-data-[swipe-direction=down]/drawer-content:block\" />\n          <DrawerPrimitive.Content className=\"flex min-h-0 flex-1 flex-col\">\n            {children}\n          </DrawerPrimitive.Content>\n        </DrawerPrimitive.Popup>\n      </DrawerPrimitive.Viewport>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[swipe-direction=down]/drawer-content:text-center group-data-[swipe-direction=up]/drawer-content:text-center md:gap-0.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\n        \"cn-font-heading text-sm font-medium text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: DrawerPrimitive.Description.Props) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-xs/relaxed text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
@@ -15,7 +15,7 @@
     "links": {
       "docs": "https://ui.shadcn.com/docs/components/base/drawer",
       "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
-      "api": "https://vaul.emilkowal.ski/getting-started"
+      "api": "https://base-ui.com/react/components/drawer.md"
     }
   },
   "type": "registry:ui"
diff --git a/apps/v4/public/r/styles/base-lyra/registry.json b/apps/v4/public/r/styles/base-lyra/registry.json
index c6357e3827f..edfd3b139af 100644
--- a/apps/v4/public/r/styles/base-lyra/registry.json
+++ b/apps/v4/public/r/styles/base-lyra/registry.json
@@ -382,7 +382,7 @@
     },
     {
       "name": "drawer",
-      "dependencies": ["vaul"],
+      "dependencies": ["@base-ui/react"],
       "files": [
         {
           "path": "registry/base-lyra/ui/drawer.tsx",
@@ -393,7 +393,7 @@
         "links": {
           "docs": "https://ui.shadcn.com/docs/components/base/drawer",
           "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
-          "api": "https://vaul.emilkowal.ski/getting-started"
+          "api": "https://base-ui.com/react/components/drawer.md"
         }
       },
       "type": "registry:ui"
diff --git a/apps/v4/public/r/styles/base-maia/dashboard-01.json b/apps/v4/public/r/styles/base-maia/dashboard-01.json
index 28ddea88f36..62cb3b24083 100644
--- a/apps/v4/public/r/styles/base-maia/dashboard-01.json
+++ b/apps/v4/public/r/styles/base-maia/dashboard-01.json
@@ -57,7 +57,7 @@
     },
     {
       "path": "registry/base-maia/blocks/dashboard-01/components/data-table.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/base-maia/hooks/use-mobile\"\nimport { Badge } from \"@/registry/base-maia/ui/badge\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-maia/ui/chart\"\nimport { Checkbox } from \"@/registry/base-maia/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-maia/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport { Label } from \"@/registry/base-maia/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-maia/ui/select\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/base-maia/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-maia/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"size-7 text-muted-foreground hover:bg-transparent\"\n    >\n      <IconPlaceholder\n        lucide=\"GripVerticalIcon\"\n        tabler=\"IconGripVertical\"\n        hugeicons=\"DragDropVerticalIcon\"\n        phosphor=\"DotsSixVerticalIcon\"\n        remixicon=\"RiDraggable\"\n        className=\"size-3 text-muted-foreground\"\n      />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={table.getIsAllPageRowsSelected()}\n          indeterminate={\n            table.getIsSomePageRowsSelected() &&\n            !table.getIsAllPageRowsSelected()\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n        {row.original.status === \"Done\" ? (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheckFilled\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleFill\"\n            className=\"fill-green-500 dark:fill-green-400\"\n          />\n        ) : (\n          <IconPlaceholder\n            lucide=\"LoaderIcon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoader4Line\"\n          />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          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\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          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\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select\n            items={[\n              { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n              { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n            ]}\n          >\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectGroup>\n                <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                <SelectItem value=\"Jamik Tashpulatov\">\n                  Jamik Tashpulatov\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              className=\"flex size-8 text-muted-foreground data-open:bg-muted\"\n              size=\"icon\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"EllipsisVerticalIcon\"\n            tabler=\"IconDotsVertical\"\n            hugeicons=\"MoreVerticalCircle01Icon\"\n            phosphor=\"DotsThreeVerticalIcon\"\n            remixicon=\"RiMore2Line\"\n          />\n          <span className=\"sr-only\">Open menu</span>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select\n          defaultValue=\"outline\"\n          items={[\n            { label: \"Outline\", value: \"outline\" },\n            { label: \"Past Performance\", value: \"past-performance\" },\n            { label: \"Key Personnel\", value: \"key-personnel\" },\n            { label: \"Focus Documents\", value: \"focus-documents\" },\n          ]}\n        >\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"outline\">Outline</SelectItem>\n              <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n              <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n              <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <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\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"sm\" />}\n            >\n              <IconPlaceholder\n                lucide=\"Columns3Icon\"\n                tabler=\"IconLayoutColumns\"\n                hugeicons=\"LeftToRightListBulletIcon\"\n                phosphor=\"ColumnsIcon\"\n                remixicon=\"RiLayoutColumnLine\"\n                data-icon=\"inline-start\"\n              />\n              Columns\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"sticky top-0 z-10 bg-muted\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"hidden flex-1 text-sm text-muted-foreground lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n                items={[10, 20, 30, 40, 50].map((pageSize) => ({\n                  label: `${pageSize}`,\n                  value: `${pageSize}`,\n                }))}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  <SelectGroup>\n                    {[10, 20, 30, 40, 50].map((pageSize) => (\n                      <SelectItem key={pageSize} value={`${pageSize}`}>\n                        {pageSize}\n                      </SelectItem>\n                    ))}\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsLeftIcon\"\n                  tabler=\"IconChevronsLeft\"\n                  hugeicons=\"ArrowLeftDoubleIcon\"\n                  phosphor=\"CaretDoubleLeftIcon\"\n                  remixicon=\"RiSkipLeftLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronLeftIcon\"\n                  tabler=\"IconChevronLeft\"\n                  hugeicons=\"ArrowLeft01Icon\"\n                  phosphor=\"CaretLeftIcon\"\n                  remixicon=\"RiArrowLeftSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsRightIcon\"\n                  tabler=\"IconChevronsRight\"\n                  hugeicons=\"ArrowRightDoubleIcon\"\n                  phosphor=\"CaretDoubleRightIcon\"\n                  remixicon=\"RiSkipRightLine\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\nconst chartData = [\n  {\n    month: \"January\",\n    desktop: 186,\n    mobile: 80,\n  },\n  {\n    month: \"February\",\n    desktop: 305,\n    mobile: 200,\n  },\n  {\n    month: \"March\",\n    desktop: 237,\n    mobile: 120,\n  },\n  {\n    month: \"April\",\n    desktop: 73,\n    mobile: 190,\n  },\n  {\n    month: \"May\",\n    desktop: 209,\n    mobile: 130,\n  },\n  {\n    month: \"June\",\n    desktop: 214,\n    mobile: 140,\n  },\n]\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n  return (\n    <Drawer direction={isMobile ? \"bottom\" : \"right\"}>\n      <DrawerTrigger asChild>\n        <Button variant=\"link\" className=\"w-fit px-0 text-left text-foreground\">\n          {item.header}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconPlaceholder\n                    lucide=\"TrendingUpIcon\"\n                    tabler=\"IconTrendingUp\"\n                    hugeicons=\"ChartUpIcon\"\n                    phosphor=\"TrendUpIcon\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select\n                  defaultValue={item.type}\n                  items={[\n                    { label: \"Table of Contents\", value: \"Table of Contents\" },\n                    { label: \"Executive Summary\", value: \"Executive Summary\" },\n                    {\n                      label: \"Technical Approach\",\n                      value: \"Technical Approach\",\n                    },\n                    { label: \"Design\", value: \"Design\" },\n                    { label: \"Capabilities\", value: \"Capabilities\" },\n                    { label: \"Focus Documents\", value: \"Focus Documents\" },\n                    { label: \"Narrative\", value: \"Narrative\" },\n                    { label: \"Cover Page\", value: \"Cover Page\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Table of Contents\">\n                        Table of Contents\n                      </SelectItem>\n                      <SelectItem value=\"Executive Summary\">\n                        Executive Summary\n                      </SelectItem>\n                      <SelectItem value=\"Technical Approach\">\n                        Technical Approach\n                      </SelectItem>\n                      <SelectItem value=\"Design\">Design</SelectItem>\n                      <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                      <SelectItem value=\"Focus Documents\">\n                        Focus Documents\n                      </SelectItem>\n                      <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                      <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select\n                  defaultValue={item.status}\n                  items={[\n                    { label: \"Done\", value: \"Done\" },\n                    { label: \"In Progress\", value: \"In Progress\" },\n                    { label: \"Not Started\", value: \"Not Started\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Done\">Done</SelectItem>\n                      <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                      <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select\n                defaultValue={item.reviewer}\n                items={[\n                  { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n                  { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n                  { label: \"Emily Whalen\", value: \"Emily Whalen\" },\n                ]}\n              >\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                    <SelectItem value=\"Jamik Tashpulatov\">\n                      Jamik Tashpulatov\n                    </SelectItem>\n                    <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose asChild>\n            <Button variant=\"outline\" />\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/base-maia/hooks/use-mobile\"\nimport { Badge } from \"@/registry/base-maia/ui/badge\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-maia/ui/chart\"\nimport { Checkbox } from \"@/registry/base-maia/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-maia/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport { Label } from \"@/registry/base-maia/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-maia/ui/select\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/base-maia/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-maia/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"size-7 text-muted-foreground hover:bg-transparent\"\n    >\n      <IconPlaceholder\n        lucide=\"GripVerticalIcon\"\n        tabler=\"IconGripVertical\"\n        hugeicons=\"DragDropVerticalIcon\"\n        phosphor=\"DotsSixVerticalIcon\"\n        remixicon=\"RiDraggable\"\n        className=\"size-3 text-muted-foreground\"\n      />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={table.getIsAllPageRowsSelected()}\n          indeterminate={\n            table.getIsSomePageRowsSelected() &&\n            !table.getIsAllPageRowsSelected()\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n        {row.original.status === \"Done\" ? (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheckFilled\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleFill\"\n            className=\"fill-green-500 dark:fill-green-400\"\n          />\n        ) : (\n          <IconPlaceholder\n            lucide=\"LoaderIcon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoader4Line\"\n          />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          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\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          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\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select\n            items={[\n              { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n              { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n            ]}\n          >\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectGroup>\n                <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                <SelectItem value=\"Jamik Tashpulatov\">\n                  Jamik Tashpulatov\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              className=\"flex size-8 text-muted-foreground data-open:bg-muted\"\n              size=\"icon\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"EllipsisVerticalIcon\"\n            tabler=\"IconDotsVertical\"\n            hugeicons=\"MoreVerticalCircle01Icon\"\n            phosphor=\"DotsThreeVerticalIcon\"\n            remixicon=\"RiMore2Line\"\n          />\n          <span className=\"sr-only\">Open menu</span>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select\n          defaultValue=\"outline\"\n          items={[\n            { label: \"Outline\", value: \"outline\" },\n            { label: \"Past Performance\", value: \"past-performance\" },\n            { label: \"Key Personnel\", value: \"key-personnel\" },\n            { label: \"Focus Documents\", value: \"focus-documents\" },\n          ]}\n        >\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"outline\">Outline</SelectItem>\n              <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n              <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n              <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <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\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"sm\" />}\n            >\n              <IconPlaceholder\n                lucide=\"Columns3Icon\"\n                tabler=\"IconLayoutColumns\"\n                hugeicons=\"LeftToRightListBulletIcon\"\n                phosphor=\"ColumnsIcon\"\n                remixicon=\"RiLayoutColumnLine\"\n                data-icon=\"inline-start\"\n              />\n              Columns\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"sticky top-0 z-10 bg-muted\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"hidden flex-1 text-sm text-muted-foreground lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n                items={[10, 20, 30, 40, 50].map((pageSize) => ({\n                  label: `${pageSize}`,\n                  value: `${pageSize}`,\n                }))}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  <SelectGroup>\n                    {[10, 20, 30, 40, 50].map((pageSize) => (\n                      <SelectItem key={pageSize} value={`${pageSize}`}>\n                        {pageSize}\n                      </SelectItem>\n                    ))}\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsLeftIcon\"\n                  tabler=\"IconChevronsLeft\"\n                  hugeicons=\"ArrowLeftDoubleIcon\"\n                  phosphor=\"CaretDoubleLeftIcon\"\n                  remixicon=\"RiSkipLeftLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronLeftIcon\"\n                  tabler=\"IconChevronLeft\"\n                  hugeicons=\"ArrowLeft01Icon\"\n                  phosphor=\"CaretLeftIcon\"\n                  remixicon=\"RiArrowLeftSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsRightIcon\"\n                  tabler=\"IconChevronsRight\"\n                  hugeicons=\"ArrowRightDoubleIcon\"\n                  phosphor=\"CaretDoubleRightIcon\"\n                  remixicon=\"RiSkipRightLine\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\nconst chartData = [\n  {\n    month: \"January\",\n    desktop: 186,\n    mobile: 80,\n  },\n  {\n    month: \"February\",\n    desktop: 305,\n    mobile: 200,\n  },\n  {\n    month: \"March\",\n    desktop: 237,\n    mobile: 120,\n  },\n  {\n    month: \"April\",\n    desktop: 73,\n    mobile: 190,\n  },\n  {\n    month: \"May\",\n    desktop: 209,\n    mobile: 130,\n  },\n  {\n    month: \"June\",\n    desktop: 214,\n    mobile: 140,\n  },\n]\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n  return (\n    <Drawer swipeDirection={isMobile ? \"down\" : \"right\"}>\n      <DrawerTrigger\n        render={\n          <Button\n            variant=\"link\"\n            className=\"w-fit px-0 text-left text-foreground\"\n          />\n        }\n      >\n        {item.header}\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconPlaceholder\n                    lucide=\"TrendingUpIcon\"\n                    tabler=\"IconTrendingUp\"\n                    hugeicons=\"ChartUpIcon\"\n                    phosphor=\"TrendUpIcon\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select\n                  defaultValue={item.type}\n                  items={[\n                    { label: \"Table of Contents\", value: \"Table of Contents\" },\n                    { label: \"Executive Summary\", value: \"Executive Summary\" },\n                    {\n                      label: \"Technical Approach\",\n                      value: \"Technical Approach\",\n                    },\n                    { label: \"Design\", value: \"Design\" },\n                    { label: \"Capabilities\", value: \"Capabilities\" },\n                    { label: \"Focus Documents\", value: \"Focus Documents\" },\n                    { label: \"Narrative\", value: \"Narrative\" },\n                    { label: \"Cover Page\", value: \"Cover Page\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Table of Contents\">\n                        Table of Contents\n                      </SelectItem>\n                      <SelectItem value=\"Executive Summary\">\n                        Executive Summary\n                      </SelectItem>\n                      <SelectItem value=\"Technical Approach\">\n                        Technical Approach\n                      </SelectItem>\n                      <SelectItem value=\"Design\">Design</SelectItem>\n                      <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                      <SelectItem value=\"Focus Documents\">\n                        Focus Documents\n                      </SelectItem>\n                      <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                      <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select\n                  defaultValue={item.status}\n                  items={[\n                    { label: \"Done\", value: \"Done\" },\n                    { label: \"In Progress\", value: \"In Progress\" },\n                    { label: \"Not Started\", value: \"Not Started\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Done\">Done</SelectItem>\n                      <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                      <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select\n                defaultValue={item.reviewer}\n                items={[\n                  { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n                  { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n                  { label: \"Emily Whalen\", value: \"Emily Whalen\" },\n                ]}\n              >\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                    <SelectItem value=\"Jamik Tashpulatov\">\n                      Jamik Tashpulatov\n                    </SelectItem>\n                    <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose render={<Button variant=\"outline\" />}>Done</DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/base-maia/drawer-example.json b/apps/v4/public/r/styles/base-maia/drawer-example.json
index b2e3ae9f663..63fb4934b54 100644
--- a/apps/v4/public/r/styles/base-maia/drawer-example.json
+++ b/apps/v4/public/r/styles/base-maia/drawer-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/drawer-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-maia/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-maia/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"up\", \"right\", \"down\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            swipeDirection={\n              side === \"down\" ? undefined : (side as \"up\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger\n              render={<Button variant=\"outline\" className=\"capitalize\" />}\n            >\n              {side}\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[swipe-direction=down]:max-h-[50vh] data-[swipe-direction=up]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose render={<Button variant=\"outline\" />}>\n                  Cancel\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer swipeDirection=\"right\">\n        <DrawerTrigger render={<Button variant=\"outline\" />}>\n          Scrollable Content\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/drawer.json b/apps/v4/public/r/styles/base-maia/drawer.json
index 104a4ab1e13..e424e4d7215 100644
--- a/apps/v4/public/r/styles/base-maia/drawer.json
+++ b/apps/v4/public/r/styles/base-maia/drawer.json
@@ -2,12 +2,12 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "drawer",
   "dependencies": [
-    "vaul"
+    "@base-ui/react"
   ],
   "files": [
     {
       "path": "registry/base-maia/ui/drawer.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/80 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content fixed z-50 flex h-auto flex-col bg-transparent p-4 text-sm text-popover-foreground before:absolute before:inset-2 before:-z-10 before:rounded-4xl before:border before:border-border before:bg-popover data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\n        \"cn-font-heading text-base font-medium text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Drawer({ ...props }: DrawerPrimitive.Root.Props) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: DrawerPrimitive.Backdrop.Props) {\n  return (\n    <DrawerPrimitive.Backdrop\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/80 opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: DrawerPrimitive.Popup.Props) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Viewport\n        data-slot=\"drawer-viewport\"\n        className=\"pointer-events-none fixed inset-0 z-50\"\n      >\n        <DrawerPrimitive.Popup\n          data-slot=\"drawer-content\"\n          className={cn(\n            \"group/drawer-content pointer-events-auto fixed z-50 flex h-auto transform-(--drawer-transform) flex-col overflow-hidden bg-transparent p-4 text-sm text-popover-foreground transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--drawer-bleed-x:3rem] [--drawer-bleed-y:3rem] before:absolute before:inset-2 before:-z-10 before:rounded-4xl before:border before:border-border before:bg-popover data-ending-style:transform-(--drawer-closed-transform) data-starting-style:transform-(--drawer-closed-transform) data-swiping:duration-0 data-swiping:select-none data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:-mb-(--drawer-bleed-y) data-[swipe-direction=down]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=down]:pb-(--drawer-bleed-y) data-[swipe-direction=down]:[--drawer-closed-transform:translate3d(0,100%,0)] data-[swipe-direction=down]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:-ml-(--drawer-bleed-x) data-[swipe-direction=left]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=left]:pl-(--drawer-bleed-x) data-[swipe-direction=left]:[--drawer-closed-transform:translate3d(-100%,0,0)] data-[swipe-direction=left]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:-mr-(--drawer-bleed-x) data-[swipe-direction=right]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=right]:pr-(--drawer-bleed-x) data-[swipe-direction=right]:[--drawer-closed-transform:translate3d(100%,0,0)] data-[swipe-direction=right]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:-mt-(--drawer-bleed-y) data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=up]:pt-(--drawer-bleed-y) data-[swipe-direction=up]:[--drawer-closed-transform:translate3d(0,-100%,0)] data-[swipe-direction=up]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:sm:w-[calc(24rem+var(--drawer-bleed-x))] data-[swipe-direction=right]:sm:w-[calc(24rem+var(--drawer-bleed-x))]\",\n            className\n          )}\n          {...props}\n        >\n          <div className=\"mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full bg-muted group-data-[swipe-direction=down]/drawer-content:block\" />\n          <DrawerPrimitive.Content className=\"flex min-h-0 flex-1 flex-col\">\n            {children}\n          </DrawerPrimitive.Content>\n        </DrawerPrimitive.Popup>\n      </DrawerPrimitive.Viewport>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[swipe-direction=down]/drawer-content:text-center group-data-[swipe-direction=up]/drawer-content:text-center md:gap-1.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\n        \"cn-font-heading text-base font-medium text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: DrawerPrimitive.Description.Props) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
@@ -15,7 +15,7 @@
     "links": {
       "docs": "https://ui.shadcn.com/docs/components/base/drawer",
       "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
-      "api": "https://vaul.emilkowal.ski/getting-started"
+      "api": "https://base-ui.com/react/components/drawer.md"
     }
   },
   "type": "registry:ui"
diff --git a/apps/v4/public/r/styles/base-maia/registry.json b/apps/v4/public/r/styles/base-maia/registry.json
index 99c6bd77120..722641e9dd3 100644
--- a/apps/v4/public/r/styles/base-maia/registry.json
+++ b/apps/v4/public/r/styles/base-maia/registry.json
@@ -382,7 +382,7 @@
     },
     {
       "name": "drawer",
-      "dependencies": ["vaul"],
+      "dependencies": ["@base-ui/react"],
       "files": [
         {
           "path": "registry/base-maia/ui/drawer.tsx",
@@ -393,7 +393,7 @@
         "links": {
           "docs": "https://ui.shadcn.com/docs/components/base/drawer",
           "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
-          "api": "https://vaul.emilkowal.ski/getting-started"
+          "api": "https://base-ui.com/react/components/drawer.md"
         }
       },
       "type": "registry:ui"
diff --git a/apps/v4/public/r/styles/base-mira/dashboard-01.json b/apps/v4/public/r/styles/base-mira/dashboard-01.json
index e29e1bf47ab..16b0cf9de80 100644
--- a/apps/v4/public/r/styles/base-mira/dashboard-01.json
+++ b/apps/v4/public/r/styles/base-mira/dashboard-01.json
@@ -57,7 +57,7 @@
     },
     {
       "path": "registry/base-mira/blocks/dashboard-01/components/data-table.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/base-mira/hooks/use-mobile\"\nimport { Badge } from \"@/registry/base-mira/ui/badge\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-mira/ui/chart\"\nimport { Checkbox } from \"@/registry/base-mira/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-mira/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-mira/ui/select\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/base-mira/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-mira/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"size-7 text-muted-foreground hover:bg-transparent\"\n    >\n      <IconPlaceholder\n        lucide=\"GripVerticalIcon\"\n        tabler=\"IconGripVertical\"\n        hugeicons=\"DragDropVerticalIcon\"\n        phosphor=\"DotsSixVerticalIcon\"\n        remixicon=\"RiDraggable\"\n        className=\"size-3 text-muted-foreground\"\n      />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={table.getIsAllPageRowsSelected()}\n          indeterminate={\n            table.getIsSomePageRowsSelected() &&\n            !table.getIsAllPageRowsSelected()\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n        {row.original.status === \"Done\" ? (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheckFilled\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleFill\"\n            className=\"fill-green-500 dark:fill-green-400\"\n          />\n        ) : (\n          <IconPlaceholder\n            lucide=\"LoaderIcon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoader4Line\"\n          />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          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\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          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\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select\n            items={[\n              { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n              { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n            ]}\n          >\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectGroup>\n                <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                <SelectItem value=\"Jamik Tashpulatov\">\n                  Jamik Tashpulatov\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              className=\"flex size-8 text-muted-foreground data-open:bg-muted\"\n              size=\"icon\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"EllipsisVerticalIcon\"\n            tabler=\"IconDotsVertical\"\n            hugeicons=\"MoreVerticalCircle01Icon\"\n            phosphor=\"DotsThreeVerticalIcon\"\n            remixicon=\"RiMore2Line\"\n          />\n          <span className=\"sr-only\">Open menu</span>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select\n          defaultValue=\"outline\"\n          items={[\n            { label: \"Outline\", value: \"outline\" },\n            { label: \"Past Performance\", value: \"past-performance\" },\n            { label: \"Key Personnel\", value: \"key-personnel\" },\n            { label: \"Focus Documents\", value: \"focus-documents\" },\n          ]}\n        >\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"outline\">Outline</SelectItem>\n              <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n              <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n              <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <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\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"sm\" />}\n            >\n              <IconPlaceholder\n                lucide=\"Columns3Icon\"\n                tabler=\"IconLayoutColumns\"\n                hugeicons=\"LeftToRightListBulletIcon\"\n                phosphor=\"ColumnsIcon\"\n                remixicon=\"RiLayoutColumnLine\"\n                data-icon=\"inline-start\"\n              />\n              Columns\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"sticky top-0 z-10 bg-muted\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"hidden flex-1 text-sm text-muted-foreground lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n                items={[10, 20, 30, 40, 50].map((pageSize) => ({\n                  label: `${pageSize}`,\n                  value: `${pageSize}`,\n                }))}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  <SelectGroup>\n                    {[10, 20, 30, 40, 50].map((pageSize) => (\n                      <SelectItem key={pageSize} value={`${pageSize}`}>\n                        {pageSize}\n                      </SelectItem>\n                    ))}\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsLeftIcon\"\n                  tabler=\"IconChevronsLeft\"\n                  hugeicons=\"ArrowLeftDoubleIcon\"\n                  phosphor=\"CaretDoubleLeftIcon\"\n                  remixicon=\"RiSkipLeftLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronLeftIcon\"\n                  tabler=\"IconChevronLeft\"\n                  hugeicons=\"ArrowLeft01Icon\"\n                  phosphor=\"CaretLeftIcon\"\n                  remixicon=\"RiArrowLeftSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsRightIcon\"\n                  tabler=\"IconChevronsRight\"\n                  hugeicons=\"ArrowRightDoubleIcon\"\n                  phosphor=\"CaretDoubleRightIcon\"\n                  remixicon=\"RiSkipRightLine\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\nconst chartData = [\n  {\n    month: \"January\",\n    desktop: 186,\n    mobile: 80,\n  },\n  {\n    month: \"February\",\n    desktop: 305,\n    mobile: 200,\n  },\n  {\n    month: \"March\",\n    desktop: 237,\n    mobile: 120,\n  },\n  {\n    month: \"April\",\n    desktop: 73,\n    mobile: 190,\n  },\n  {\n    month: \"May\",\n    desktop: 209,\n    mobile: 130,\n  },\n  {\n    month: \"June\",\n    desktop: 214,\n    mobile: 140,\n  },\n]\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n  return (\n    <Drawer direction={isMobile ? \"bottom\" : \"right\"}>\n      <DrawerTrigger asChild>\n        <Button variant=\"link\" className=\"w-fit px-0 text-left text-foreground\">\n          {item.header}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconPlaceholder\n                    lucide=\"TrendingUpIcon\"\n                    tabler=\"IconTrendingUp\"\n                    hugeicons=\"ChartUpIcon\"\n                    phosphor=\"TrendUpIcon\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select\n                  defaultValue={item.type}\n                  items={[\n                    { label: \"Table of Contents\", value: \"Table of Contents\" },\n                    { label: \"Executive Summary\", value: \"Executive Summary\" },\n                    {\n                      label: \"Technical Approach\",\n                      value: \"Technical Approach\",\n                    },\n                    { label: \"Design\", value: \"Design\" },\n                    { label: \"Capabilities\", value: \"Capabilities\" },\n                    { label: \"Focus Documents\", value: \"Focus Documents\" },\n                    { label: \"Narrative\", value: \"Narrative\" },\n                    { label: \"Cover Page\", value: \"Cover Page\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Table of Contents\">\n                        Table of Contents\n                      </SelectItem>\n                      <SelectItem value=\"Executive Summary\">\n                        Executive Summary\n                      </SelectItem>\n                      <SelectItem value=\"Technical Approach\">\n                        Technical Approach\n                      </SelectItem>\n                      <SelectItem value=\"Design\">Design</SelectItem>\n                      <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                      <SelectItem value=\"Focus Documents\">\n                        Focus Documents\n                      </SelectItem>\n                      <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                      <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select\n                  defaultValue={item.status}\n                  items={[\n                    { label: \"Done\", value: \"Done\" },\n                    { label: \"In Progress\", value: \"In Progress\" },\n                    { label: \"Not Started\", value: \"Not Started\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Done\">Done</SelectItem>\n                      <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                      <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select\n                defaultValue={item.reviewer}\n                items={[\n                  { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n                  { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n                  { label: \"Emily Whalen\", value: \"Emily Whalen\" },\n                ]}\n              >\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                    <SelectItem value=\"Jamik Tashpulatov\">\n                      Jamik Tashpulatov\n                    </SelectItem>\n                    <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose asChild>\n            <Button variant=\"outline\" />\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/base-mira/hooks/use-mobile\"\nimport { Badge } from \"@/registry/base-mira/ui/badge\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-mira/ui/chart\"\nimport { Checkbox } from \"@/registry/base-mira/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-mira/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-mira/ui/select\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/base-mira/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-mira/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"size-7 text-muted-foreground hover:bg-transparent\"\n    >\n      <IconPlaceholder\n        lucide=\"GripVerticalIcon\"\n        tabler=\"IconGripVertical\"\n        hugeicons=\"DragDropVerticalIcon\"\n        phosphor=\"DotsSixVerticalIcon\"\n        remixicon=\"RiDraggable\"\n        className=\"size-3 text-muted-foreground\"\n      />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={table.getIsAllPageRowsSelected()}\n          indeterminate={\n            table.getIsSomePageRowsSelected() &&\n            !table.getIsAllPageRowsSelected()\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n        {row.original.status === \"Done\" ? (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheckFilled\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleFill\"\n            className=\"fill-green-500 dark:fill-green-400\"\n          />\n        ) : (\n          <IconPlaceholder\n            lucide=\"LoaderIcon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoader4Line\"\n          />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          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\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          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\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select\n            items={[\n              { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n              { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n            ]}\n          >\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectGroup>\n                <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                <SelectItem value=\"Jamik Tashpulatov\">\n                  Jamik Tashpulatov\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              className=\"flex size-8 text-muted-foreground data-open:bg-muted\"\n              size=\"icon\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"EllipsisVerticalIcon\"\n            tabler=\"IconDotsVertical\"\n            hugeicons=\"MoreVerticalCircle01Icon\"\n            phosphor=\"DotsThreeVerticalIcon\"\n            remixicon=\"RiMore2Line\"\n          />\n          <span className=\"sr-only\">Open menu</span>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select\n          defaultValue=\"outline\"\n          items={[\n            { label: \"Outline\", value: \"outline\" },\n            { label: \"Past Performance\", value: \"past-performance\" },\n            { label: \"Key Personnel\", value: \"key-personnel\" },\n            { label: \"Focus Documents\", value: \"focus-documents\" },\n          ]}\n        >\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"outline\">Outline</SelectItem>\n              <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n              <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n              <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <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\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"sm\" />}\n            >\n              <IconPlaceholder\n                lucide=\"Columns3Icon\"\n                tabler=\"IconLayoutColumns\"\n                hugeicons=\"LeftToRightListBulletIcon\"\n                phosphor=\"ColumnsIcon\"\n                remixicon=\"RiLayoutColumnLine\"\n                data-icon=\"inline-start\"\n              />\n              Columns\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"sticky top-0 z-10 bg-muted\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"hidden flex-1 text-sm text-muted-foreground lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n                items={[10, 20, 30, 40, 50].map((pageSize) => ({\n                  label: `${pageSize}`,\n                  value: `${pageSize}`,\n                }))}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  <SelectGroup>\n                    {[10, 20, 30, 40, 50].map((pageSize) => (\n                      <SelectItem key={pageSize} value={`${pageSize}`}>\n                        {pageSize}\n                      </SelectItem>\n                    ))}\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsLeftIcon\"\n                  tabler=\"IconChevronsLeft\"\n                  hugeicons=\"ArrowLeftDoubleIcon\"\n                  phosphor=\"CaretDoubleLeftIcon\"\n                  remixicon=\"RiSkipLeftLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronLeftIcon\"\n                  tabler=\"IconChevronLeft\"\n                  hugeicons=\"ArrowLeft01Icon\"\n                  phosphor=\"CaretLeftIcon\"\n                  remixicon=\"RiArrowLeftSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsRightIcon\"\n                  tabler=\"IconChevronsRight\"\n                  hugeicons=\"ArrowRightDoubleIcon\"\n                  phosphor=\"CaretDoubleRightIcon\"\n                  remixicon=\"RiSkipRightLine\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\nconst chartData = [\n  {\n    month: \"January\",\n    desktop: 186,\n    mobile: 80,\n  },\n  {\n    month: \"February\",\n    desktop: 305,\n    mobile: 200,\n  },\n  {\n    month: \"March\",\n    desktop: 237,\n    mobile: 120,\n  },\n  {\n    month: \"April\",\n    desktop: 73,\n    mobile: 190,\n  },\n  {\n    month: \"May\",\n    desktop: 209,\n    mobile: 130,\n  },\n  {\n    month: \"June\",\n    desktop: 214,\n    mobile: 140,\n  },\n]\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n  return (\n    <Drawer swipeDirection={isMobile ? \"down\" : \"right\"}>\n      <DrawerTrigger\n        render={\n          <Button\n            variant=\"link\"\n            className=\"w-fit px-0 text-left text-foreground\"\n          />\n        }\n      >\n        {item.header}\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconPlaceholder\n                    lucide=\"TrendingUpIcon\"\n                    tabler=\"IconTrendingUp\"\n                    hugeicons=\"ChartUpIcon\"\n                    phosphor=\"TrendUpIcon\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select\n                  defaultValue={item.type}\n                  items={[\n                    { label: \"Table of Contents\", value: \"Table of Contents\" },\n                    { label: \"Executive Summary\", value: \"Executive Summary\" },\n                    {\n                      label: \"Technical Approach\",\n                      value: \"Technical Approach\",\n                    },\n                    { label: \"Design\", value: \"Design\" },\n                    { label: \"Capabilities\", value: \"Capabilities\" },\n                    { label: \"Focus Documents\", value: \"Focus Documents\" },\n                    { label: \"Narrative\", value: \"Narrative\" },\n                    { label: \"Cover Page\", value: \"Cover Page\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Table of Contents\">\n                        Table of Contents\n                      </SelectItem>\n                      <SelectItem value=\"Executive Summary\">\n                        Executive Summary\n                      </SelectItem>\n                      <SelectItem value=\"Technical Approach\">\n                        Technical Approach\n                      </SelectItem>\n                      <SelectItem value=\"Design\">Design</SelectItem>\n                      <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                      <SelectItem value=\"Focus Documents\">\n                        Focus Documents\n                      </SelectItem>\n                      <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                      <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select\n                  defaultValue={item.status}\n                  items={[\n                    { label: \"Done\", value: \"Done\" },\n                    { label: \"In Progress\", value: \"In Progress\" },\n                    { label: \"Not Started\", value: \"Not Started\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Done\">Done</SelectItem>\n                      <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                      <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select\n                defaultValue={item.reviewer}\n                items={[\n                  { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n                  { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n                  { label: \"Emily Whalen\", value: \"Emily Whalen\" },\n                ]}\n              >\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                    <SelectItem value=\"Jamik Tashpulatov\">\n                      Jamik Tashpulatov\n                    </SelectItem>\n                    <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose render={<Button variant=\"outline\" />}>Done</DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/base-mira/drawer-example.json b/apps/v4/public/r/styles/base-mira/drawer-example.json
index 7f3737ae9ef..5dbc2ead38b 100644
--- a/apps/v4/public/r/styles/base-mira/drawer-example.json
+++ b/apps/v4/public/r/styles/base-mira/drawer-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/drawer-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-mira/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-mira/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"up\", \"right\", \"down\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            swipeDirection={\n              side === \"down\" ? undefined : (side as \"up\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger\n              render={<Button variant=\"outline\" className=\"capitalize\" />}\n            >\n              {side}\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[swipe-direction=down]:max-h-[50vh] data-[swipe-direction=up]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose render={<Button variant=\"outline\" />}>\n                  Cancel\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer swipeDirection=\"right\">\n        <DrawerTrigger render={<Button variant=\"outline\" />}>\n          Scrollable Content\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/drawer.json b/apps/v4/public/r/styles/base-mira/drawer.json
index 30574dd89ed..11227f0a4f3 100644
--- a/apps/v4/public/r/styles/base-mira/drawer.json
+++ b/apps/v4/public/r/styles/base-mira/drawer.json
@@ -2,12 +2,12 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "drawer",
   "dependencies": [
-    "vaul"
+    "@base-ui/react"
   ],
   "files": [
     {
       "path": "registry/base-mira/ui/drawer.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/80 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content fixed z-50 flex h-auto flex-col bg-transparent p-2 text-xs/relaxed text-popover-foreground before:absolute before:inset-2 before:-z-10 before:rounded-xl before:border before:border-border before:bg-popover data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-1 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\n        \"cn-font-heading text-sm font-medium text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-xs/relaxed text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Drawer({ ...props }: DrawerPrimitive.Root.Props) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: DrawerPrimitive.Backdrop.Props) {\n  return (\n    <DrawerPrimitive.Backdrop\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/80 opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: DrawerPrimitive.Popup.Props) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Viewport\n        data-slot=\"drawer-viewport\"\n        className=\"pointer-events-none fixed inset-0 z-50\"\n      >\n        <DrawerPrimitive.Popup\n          data-slot=\"drawer-content\"\n          className={cn(\n            \"group/drawer-content pointer-events-auto fixed z-50 flex h-auto transform-(--drawer-transform) flex-col overflow-hidden bg-transparent p-2 text-xs/relaxed text-popover-foreground transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--drawer-bleed-x:3rem] [--drawer-bleed-y:3rem] before:absolute before:inset-2 before:-z-10 before:rounded-xl before:border before:border-border before:bg-popover data-ending-style:transform-(--drawer-closed-transform) data-starting-style:transform-(--drawer-closed-transform) data-swiping:duration-0 data-swiping:select-none data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:-mb-(--drawer-bleed-y) data-[swipe-direction=down]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=down]:pb-(--drawer-bleed-y) data-[swipe-direction=down]:[--drawer-closed-transform:translate3d(0,100%,0)] data-[swipe-direction=down]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:-ml-(--drawer-bleed-x) data-[swipe-direction=left]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=left]:pl-(--drawer-bleed-x) data-[swipe-direction=left]:[--drawer-closed-transform:translate3d(-100%,0,0)] data-[swipe-direction=left]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:-mr-(--drawer-bleed-x) data-[swipe-direction=right]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=right]:pr-(--drawer-bleed-x) data-[swipe-direction=right]:[--drawer-closed-transform:translate3d(100%,0,0)] data-[swipe-direction=right]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:-mt-(--drawer-bleed-y) data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=up]:pt-(--drawer-bleed-y) data-[swipe-direction=up]:[--drawer-closed-transform:translate3d(0,-100%,0)] data-[swipe-direction=up]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:sm:w-[calc(24rem+var(--drawer-bleed-x))] data-[swipe-direction=right]:sm:w-[calc(24rem+var(--drawer-bleed-x))]\",\n            className\n          )}\n          {...props}\n        >\n          <div className=\"mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full bg-muted group-data-[swipe-direction=down]/drawer-content:block\" />\n          <DrawerPrimitive.Content className=\"flex min-h-0 flex-1 flex-col\">\n            {children}\n          </DrawerPrimitive.Content>\n        </DrawerPrimitive.Popup>\n      </DrawerPrimitive.Viewport>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-1 p-4 group-data-[swipe-direction=down]/drawer-content:text-center group-data-[swipe-direction=up]/drawer-content:text-center md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\n        \"cn-font-heading text-sm font-medium text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: DrawerPrimitive.Description.Props) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-xs/relaxed text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
@@ -15,7 +15,7 @@
     "links": {
       "docs": "https://ui.shadcn.com/docs/components/base/drawer",
       "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
-      "api": "https://vaul.emilkowal.ski/getting-started"
+      "api": "https://base-ui.com/react/components/drawer.md"
     }
   },
   "type": "registry:ui"
diff --git a/apps/v4/public/r/styles/base-mira/registry.json b/apps/v4/public/r/styles/base-mira/registry.json
index 6766cd7b5e9..8935f636f0b 100644
--- a/apps/v4/public/r/styles/base-mira/registry.json
+++ b/apps/v4/public/r/styles/base-mira/registry.json
@@ -382,7 +382,7 @@
     },
     {
       "name": "drawer",
-      "dependencies": ["vaul"],
+      "dependencies": ["@base-ui/react"],
       "files": [
         {
           "path": "registry/base-mira/ui/drawer.tsx",
@@ -393,7 +393,7 @@
         "links": {
           "docs": "https://ui.shadcn.com/docs/components/base/drawer",
           "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
-          "api": "https://vaul.emilkowal.ski/getting-started"
+          "api": "https://base-ui.com/react/components/drawer.md"
         }
       },
       "type": "registry:ui"
diff --git a/apps/v4/public/r/styles/base-nova/dashboard-01.json b/apps/v4/public/r/styles/base-nova/dashboard-01.json
index 670b281b742..f8db419ec21 100644
--- a/apps/v4/public/r/styles/base-nova/dashboard-01.json
+++ b/apps/v4/public/r/styles/base-nova/dashboard-01.json
@@ -57,7 +57,7 @@
     },
     {
       "path": "registry/base-nova/blocks/dashboard-01/components/data-table.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/base-nova/hooks/use-mobile\"\nimport { Badge } from \"@/registry/base-nova/ui/badge\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-nova/ui/chart\"\nimport { Checkbox } from \"@/registry/base-nova/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-nova/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport { Label } from \"@/registry/base-nova/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-nova/ui/select\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/base-nova/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-nova/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"size-7 text-muted-foreground hover:bg-transparent\"\n    >\n      <IconPlaceholder\n        lucide=\"GripVerticalIcon\"\n        tabler=\"IconGripVertical\"\n        hugeicons=\"DragDropVerticalIcon\"\n        phosphor=\"DotsSixVerticalIcon\"\n        remixicon=\"RiDraggable\"\n        className=\"size-3 text-muted-foreground\"\n      />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={table.getIsAllPageRowsSelected()}\n          indeterminate={\n            table.getIsSomePageRowsSelected() &&\n            !table.getIsAllPageRowsSelected()\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n        {row.original.status === \"Done\" ? (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheckFilled\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleFill\"\n            className=\"fill-green-500 dark:fill-green-400\"\n          />\n        ) : (\n          <IconPlaceholder\n            lucide=\"LoaderIcon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoader4Line\"\n          />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          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\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          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\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select\n            items={[\n              { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n              { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n            ]}\n          >\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectGroup>\n                <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                <SelectItem value=\"Jamik Tashpulatov\">\n                  Jamik Tashpulatov\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              className=\"flex size-8 text-muted-foreground data-open:bg-muted\"\n              size=\"icon\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"EllipsisVerticalIcon\"\n            tabler=\"IconDotsVertical\"\n            hugeicons=\"MoreVerticalCircle01Icon\"\n            phosphor=\"DotsThreeVerticalIcon\"\n            remixicon=\"RiMore2Line\"\n          />\n          <span className=\"sr-only\">Open menu</span>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select\n          defaultValue=\"outline\"\n          items={[\n            { label: \"Outline\", value: \"outline\" },\n            { label: \"Past Performance\", value: \"past-performance\" },\n            { label: \"Key Personnel\", value: \"key-personnel\" },\n            { label: \"Focus Documents\", value: \"focus-documents\" },\n          ]}\n        >\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"outline\">Outline</SelectItem>\n              <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n              <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n              <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <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\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"sm\" />}\n            >\n              <IconPlaceholder\n                lucide=\"Columns3Icon\"\n                tabler=\"IconLayoutColumns\"\n                hugeicons=\"LeftToRightListBulletIcon\"\n                phosphor=\"ColumnsIcon\"\n                remixicon=\"RiLayoutColumnLine\"\n                data-icon=\"inline-start\"\n              />\n              Columns\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"sticky top-0 z-10 bg-muted\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"hidden flex-1 text-sm text-muted-foreground lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n                items={[10, 20, 30, 40, 50].map((pageSize) => ({\n                  label: `${pageSize}`,\n                  value: `${pageSize}`,\n                }))}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  <SelectGroup>\n                    {[10, 20, 30, 40, 50].map((pageSize) => (\n                      <SelectItem key={pageSize} value={`${pageSize}`}>\n                        {pageSize}\n                      </SelectItem>\n                    ))}\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsLeftIcon\"\n                  tabler=\"IconChevronsLeft\"\n                  hugeicons=\"ArrowLeftDoubleIcon\"\n                  phosphor=\"CaretDoubleLeftIcon\"\n                  remixicon=\"RiSkipLeftLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronLeftIcon\"\n                  tabler=\"IconChevronLeft\"\n                  hugeicons=\"ArrowLeft01Icon\"\n                  phosphor=\"CaretLeftIcon\"\n                  remixicon=\"RiArrowLeftSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsRightIcon\"\n                  tabler=\"IconChevronsRight\"\n                  hugeicons=\"ArrowRightDoubleIcon\"\n                  phosphor=\"CaretDoubleRightIcon\"\n                  remixicon=\"RiSkipRightLine\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\nconst chartData = [\n  {\n    month: \"January\",\n    desktop: 186,\n    mobile: 80,\n  },\n  {\n    month: \"February\",\n    desktop: 305,\n    mobile: 200,\n  },\n  {\n    month: \"March\",\n    desktop: 237,\n    mobile: 120,\n  },\n  {\n    month: \"April\",\n    desktop: 73,\n    mobile: 190,\n  },\n  {\n    month: \"May\",\n    desktop: 209,\n    mobile: 130,\n  },\n  {\n    month: \"June\",\n    desktop: 214,\n    mobile: 140,\n  },\n]\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n  return (\n    <Drawer direction={isMobile ? \"bottom\" : \"right\"}>\n      <DrawerTrigger asChild>\n        <Button variant=\"link\" className=\"w-fit px-0 text-left text-foreground\">\n          {item.header}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconPlaceholder\n                    lucide=\"TrendingUpIcon\"\n                    tabler=\"IconTrendingUp\"\n                    hugeicons=\"ChartUpIcon\"\n                    phosphor=\"TrendUpIcon\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select\n                  defaultValue={item.type}\n                  items={[\n                    { label: \"Table of Contents\", value: \"Table of Contents\" },\n                    { label: \"Executive Summary\", value: \"Executive Summary\" },\n                    {\n                      label: \"Technical Approach\",\n                      value: \"Technical Approach\",\n                    },\n                    { label: \"Design\", value: \"Design\" },\n                    { label: \"Capabilities\", value: \"Capabilities\" },\n                    { label: \"Focus Documents\", value: \"Focus Documents\" },\n                    { label: \"Narrative\", value: \"Narrative\" },\n                    { label: \"Cover Page\", value: \"Cover Page\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Table of Contents\">\n                        Table of Contents\n                      </SelectItem>\n                      <SelectItem value=\"Executive Summary\">\n                        Executive Summary\n                      </SelectItem>\n                      <SelectItem value=\"Technical Approach\">\n                        Technical Approach\n                      </SelectItem>\n                      <SelectItem value=\"Design\">Design</SelectItem>\n                      <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                      <SelectItem value=\"Focus Documents\">\n                        Focus Documents\n                      </SelectItem>\n                      <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                      <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select\n                  defaultValue={item.status}\n                  items={[\n                    { label: \"Done\", value: \"Done\" },\n                    { label: \"In Progress\", value: \"In Progress\" },\n                    { label: \"Not Started\", value: \"Not Started\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Done\">Done</SelectItem>\n                      <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                      <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select\n                defaultValue={item.reviewer}\n                items={[\n                  { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n                  { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n                  { label: \"Emily Whalen\", value: \"Emily Whalen\" },\n                ]}\n              >\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                    <SelectItem value=\"Jamik Tashpulatov\">\n                      Jamik Tashpulatov\n                    </SelectItem>\n                    <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose asChild>\n            <Button variant=\"outline\" />\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/base-nova/hooks/use-mobile\"\nimport { Badge } from \"@/registry/base-nova/ui/badge\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-nova/ui/chart\"\nimport { Checkbox } from \"@/registry/base-nova/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-nova/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport { Label } from \"@/registry/base-nova/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-nova/ui/select\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/base-nova/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-nova/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"size-7 text-muted-foreground hover:bg-transparent\"\n    >\n      <IconPlaceholder\n        lucide=\"GripVerticalIcon\"\n        tabler=\"IconGripVertical\"\n        hugeicons=\"DragDropVerticalIcon\"\n        phosphor=\"DotsSixVerticalIcon\"\n        remixicon=\"RiDraggable\"\n        className=\"size-3 text-muted-foreground\"\n      />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={table.getIsAllPageRowsSelected()}\n          indeterminate={\n            table.getIsSomePageRowsSelected() &&\n            !table.getIsAllPageRowsSelected()\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n        {row.original.status === \"Done\" ? (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheckFilled\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleFill\"\n            className=\"fill-green-500 dark:fill-green-400\"\n          />\n        ) : (\n          <IconPlaceholder\n            lucide=\"LoaderIcon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoader4Line\"\n          />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          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\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          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\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select\n            items={[\n              { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n              { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n            ]}\n          >\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectGroup>\n                <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                <SelectItem value=\"Jamik Tashpulatov\">\n                  Jamik Tashpulatov\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              className=\"flex size-8 text-muted-foreground data-open:bg-muted\"\n              size=\"icon\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"EllipsisVerticalIcon\"\n            tabler=\"IconDotsVertical\"\n            hugeicons=\"MoreVerticalCircle01Icon\"\n            phosphor=\"DotsThreeVerticalIcon\"\n            remixicon=\"RiMore2Line\"\n          />\n          <span className=\"sr-only\">Open menu</span>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select\n          defaultValue=\"outline\"\n          items={[\n            { label: \"Outline\", value: \"outline\" },\n            { label: \"Past Performance\", value: \"past-performance\" },\n            { label: \"Key Personnel\", value: \"key-personnel\" },\n            { label: \"Focus Documents\", value: \"focus-documents\" },\n          ]}\n        >\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"outline\">Outline</SelectItem>\n              <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n              <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n              <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <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\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"sm\" />}\n            >\n              <IconPlaceholder\n                lucide=\"Columns3Icon\"\n                tabler=\"IconLayoutColumns\"\n                hugeicons=\"LeftToRightListBulletIcon\"\n                phosphor=\"ColumnsIcon\"\n                remixicon=\"RiLayoutColumnLine\"\n                data-icon=\"inline-start\"\n              />\n              Columns\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"sticky top-0 z-10 bg-muted\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"hidden flex-1 text-sm text-muted-foreground lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n                items={[10, 20, 30, 40, 50].map((pageSize) => ({\n                  label: `${pageSize}`,\n                  value: `${pageSize}`,\n                }))}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  <SelectGroup>\n                    {[10, 20, 30, 40, 50].map((pageSize) => (\n                      <SelectItem key={pageSize} value={`${pageSize}`}>\n                        {pageSize}\n                      </SelectItem>\n                    ))}\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsLeftIcon\"\n                  tabler=\"IconChevronsLeft\"\n                  hugeicons=\"ArrowLeftDoubleIcon\"\n                  phosphor=\"CaretDoubleLeftIcon\"\n                  remixicon=\"RiSkipLeftLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronLeftIcon\"\n                  tabler=\"IconChevronLeft\"\n                  hugeicons=\"ArrowLeft01Icon\"\n                  phosphor=\"CaretLeftIcon\"\n                  remixicon=\"RiArrowLeftSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsRightIcon\"\n                  tabler=\"IconChevronsRight\"\n                  hugeicons=\"ArrowRightDoubleIcon\"\n                  phosphor=\"CaretDoubleRightIcon\"\n                  remixicon=\"RiSkipRightLine\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\nconst chartData = [\n  {\n    month: \"January\",\n    desktop: 186,\n    mobile: 80,\n  },\n  {\n    month: \"February\",\n    desktop: 305,\n    mobile: 200,\n  },\n  {\n    month: \"March\",\n    desktop: 237,\n    mobile: 120,\n  },\n  {\n    month: \"April\",\n    desktop: 73,\n    mobile: 190,\n  },\n  {\n    month: \"May\",\n    desktop: 209,\n    mobile: 130,\n  },\n  {\n    month: \"June\",\n    desktop: 214,\n    mobile: 140,\n  },\n]\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n  return (\n    <Drawer swipeDirection={isMobile ? \"down\" : \"right\"}>\n      <DrawerTrigger\n        render={\n          <Button\n            variant=\"link\"\n            className=\"w-fit px-0 text-left text-foreground\"\n          />\n        }\n      >\n        {item.header}\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconPlaceholder\n                    lucide=\"TrendingUpIcon\"\n                    tabler=\"IconTrendingUp\"\n                    hugeicons=\"ChartUpIcon\"\n                    phosphor=\"TrendUpIcon\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select\n                  defaultValue={item.type}\n                  items={[\n                    { label: \"Table of Contents\", value: \"Table of Contents\" },\n                    { label: \"Executive Summary\", value: \"Executive Summary\" },\n                    {\n                      label: \"Technical Approach\",\n                      value: \"Technical Approach\",\n                    },\n                    { label: \"Design\", value: \"Design\" },\n                    { label: \"Capabilities\", value: \"Capabilities\" },\n                    { label: \"Focus Documents\", value: \"Focus Documents\" },\n                    { label: \"Narrative\", value: \"Narrative\" },\n                    { label: \"Cover Page\", value: \"Cover Page\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Table of Contents\">\n                        Table of Contents\n                      </SelectItem>\n                      <SelectItem value=\"Executive Summary\">\n                        Executive Summary\n                      </SelectItem>\n                      <SelectItem value=\"Technical Approach\">\n                        Technical Approach\n                      </SelectItem>\n                      <SelectItem value=\"Design\">Design</SelectItem>\n                      <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                      <SelectItem value=\"Focus Documents\">\n                        Focus Documents\n                      </SelectItem>\n                      <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                      <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select\n                  defaultValue={item.status}\n                  items={[\n                    { label: \"Done\", value: \"Done\" },\n                    { label: \"In Progress\", value: \"In Progress\" },\n                    { label: \"Not Started\", value: \"Not Started\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Done\">Done</SelectItem>\n                      <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                      <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select\n                defaultValue={item.reviewer}\n                items={[\n                  { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n                  { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n                  { label: \"Emily Whalen\", value: \"Emily Whalen\" },\n                ]}\n              >\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                    <SelectItem value=\"Jamik Tashpulatov\">\n                      Jamik Tashpulatov\n                    </SelectItem>\n                    <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose render={<Button variant=\"outline\" />}>Done</DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/base-nova/drawer-example.json b/apps/v4/public/r/styles/base-nova/drawer-example.json
index 5909204ef33..ebb5ddae5b7 100644
--- a/apps/v4/public/r/styles/base-nova/drawer-example.json
+++ b/apps/v4/public/r/styles/base-nova/drawer-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/drawer-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-nova/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-nova/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"up\", \"right\", \"down\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            swipeDirection={\n              side === \"down\" ? undefined : (side as \"up\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger\n              render={<Button variant=\"outline\" className=\"capitalize\" />}\n            >\n              {side}\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[swipe-direction=down]:max-h-[50vh] data-[swipe-direction=up]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose render={<Button variant=\"outline\" />}>\n                  Cancel\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer swipeDirection=\"right\">\n        <DrawerTrigger render={<Button variant=\"outline\" />}>\n          Scrollable Content\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/drawer.json b/apps/v4/public/r/styles/base-nova/drawer.json
index 8f49c1c6051..6e4d89ba2dc 100644
--- a/apps/v4/public/r/styles/base-nova/drawer.json
+++ b/apps/v4/public/r/styles/base-nova/drawer.json
@@ -2,12 +2,12 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "drawer",
   "dependencies": [
-    "vaul"
+    "@base-ui/react"
   ],
   "files": [
     {
       "path": "registry/base-nova/ui/drawer.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\n        \"cn-font-heading text-base font-medium text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Drawer({ ...props }: DrawerPrimitive.Root.Props) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: DrawerPrimitive.Backdrop.Props) {\n  return (\n    <DrawerPrimitive.Backdrop\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/10 opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: DrawerPrimitive.Popup.Props) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Viewport\n        data-slot=\"drawer-viewport\"\n        className=\"pointer-events-none fixed inset-0 z-50\"\n      >\n        <DrawerPrimitive.Popup\n          data-slot=\"drawer-content\"\n          className={cn(\n            \"group/drawer-content pointer-events-auto fixed z-50 flex h-auto transform-(--drawer-transform) flex-col overflow-hidden bg-popover text-sm text-popover-foreground transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--drawer-bleed-x:3rem] [--drawer-bleed-y:3rem] data-ending-style:transform-(--drawer-closed-transform) data-starting-style:transform-(--drawer-closed-transform) data-swiping:duration-0 data-swiping:select-none data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:-mb-(--drawer-bleed-y) data-[swipe-direction=down]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=down]:pb-(--drawer-bleed-y) data-[swipe-direction=down]:[--drawer-closed-transform:translate3d(0,100%,0)] data-[swipe-direction=down]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:-ml-(--drawer-bleed-x) data-[swipe-direction=left]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=left]:pl-(--drawer-bleed-x) data-[swipe-direction=left]:[--drawer-closed-transform:translate3d(-100%,0,0)] data-[swipe-direction=left]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:-mr-(--drawer-bleed-x) data-[swipe-direction=right]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=right]:pr-(--drawer-bleed-x) data-[swipe-direction=right]:[--drawer-closed-transform:translate3d(100%,0,0)] data-[swipe-direction=right]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:-mt-(--drawer-bleed-y) data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b data-[swipe-direction=up]:pt-(--drawer-bleed-y) data-[swipe-direction=up]:[--drawer-closed-transform:translate3d(0,-100%,0)] data-[swipe-direction=up]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[swipe-direction=left]:sm:w-[calc(24rem+var(--drawer-bleed-x))] data-[swipe-direction=right]:sm:w-[calc(24rem+var(--drawer-bleed-x))]\",\n            className\n          )}\n          {...props}\n        >\n          <div className=\"mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[swipe-direction=down]/drawer-content:block\" />\n          <DrawerPrimitive.Content className=\"flex min-h-0 flex-1 flex-col\">\n            {children}\n          </DrawerPrimitive.Content>\n        </DrawerPrimitive.Popup>\n      </DrawerPrimitive.Viewport>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[swipe-direction=down]/drawer-content:text-center group-data-[swipe-direction=up]/drawer-content:text-center md:gap-0.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\n        \"cn-font-heading text-base font-medium text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: DrawerPrimitive.Description.Props) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
@@ -15,7 +15,7 @@
     "links": {
       "docs": "https://ui.shadcn.com/docs/components/base/drawer",
       "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
-      "api": "https://vaul.emilkowal.ski/getting-started"
+      "api": "https://base-ui.com/react/components/drawer.md"
     }
   },
   "type": "registry:ui"
diff --git a/apps/v4/public/r/styles/base-nova/registry.json b/apps/v4/public/r/styles/base-nova/registry.json
index 983c0b99dfa..9aec44055c1 100644
--- a/apps/v4/public/r/styles/base-nova/registry.json
+++ b/apps/v4/public/r/styles/base-nova/registry.json
@@ -382,7 +382,7 @@
     },
     {
       "name": "drawer",
-      "dependencies": ["vaul"],
+      "dependencies": ["@base-ui/react"],
       "files": [
         {
           "path": "registry/base-nova/ui/drawer.tsx",
@@ -393,7 +393,7 @@
         "links": {
           "docs": "https://ui.shadcn.com/docs/components/base/drawer",
           "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
-          "api": "https://vaul.emilkowal.ski/getting-started"
+          "api": "https://base-ui.com/react/components/drawer.md"
         }
       },
       "type": "registry:ui"
diff --git a/apps/v4/public/r/styles/base-vega/dashboard-01.json b/apps/v4/public/r/styles/base-vega/dashboard-01.json
index a353d12eb5f..5227885048e 100644
--- a/apps/v4/public/r/styles/base-vega/dashboard-01.json
+++ b/apps/v4/public/r/styles/base-vega/dashboard-01.json
@@ -57,7 +57,7 @@
     },
     {
       "path": "registry/base-vega/blocks/dashboard-01/components/data-table.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/base-vega/hooks/use-mobile\"\nimport { Badge } from \"@/registry/base-vega/ui/badge\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-vega/ui/chart\"\nimport { Checkbox } from \"@/registry/base-vega/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-vega/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport { Label } from \"@/registry/base-vega/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-vega/ui/select\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/base-vega/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-vega/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"size-7 text-muted-foreground hover:bg-transparent\"\n    >\n      <IconPlaceholder\n        lucide=\"GripVerticalIcon\"\n        tabler=\"IconGripVertical\"\n        hugeicons=\"DragDropVerticalIcon\"\n        phosphor=\"DotsSixVerticalIcon\"\n        remixicon=\"RiDraggable\"\n        className=\"size-3 text-muted-foreground\"\n      />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={table.getIsAllPageRowsSelected()}\n          indeterminate={\n            table.getIsSomePageRowsSelected() &&\n            !table.getIsAllPageRowsSelected()\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n        {row.original.status === \"Done\" ? (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheckFilled\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleFill\"\n            className=\"fill-green-500 dark:fill-green-400\"\n          />\n        ) : (\n          <IconPlaceholder\n            lucide=\"LoaderIcon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoader4Line\"\n          />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          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\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          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\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select\n            items={[\n              { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n              { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n            ]}\n          >\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectGroup>\n                <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                <SelectItem value=\"Jamik Tashpulatov\">\n                  Jamik Tashpulatov\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              className=\"flex size-8 text-muted-foreground data-open:bg-muted\"\n              size=\"icon\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"EllipsisVerticalIcon\"\n            tabler=\"IconDotsVertical\"\n            hugeicons=\"MoreVerticalCircle01Icon\"\n            phosphor=\"DotsThreeVerticalIcon\"\n            remixicon=\"RiMore2Line\"\n          />\n          <span className=\"sr-only\">Open menu</span>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select\n          defaultValue=\"outline\"\n          items={[\n            { label: \"Outline\", value: \"outline\" },\n            { label: \"Past Performance\", value: \"past-performance\" },\n            { label: \"Key Personnel\", value: \"key-personnel\" },\n            { label: \"Focus Documents\", value: \"focus-documents\" },\n          ]}\n        >\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"outline\">Outline</SelectItem>\n              <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n              <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n              <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <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\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"sm\" />}\n            >\n              <IconPlaceholder\n                lucide=\"Columns3Icon\"\n                tabler=\"IconLayoutColumns\"\n                hugeicons=\"LeftToRightListBulletIcon\"\n                phosphor=\"ColumnsIcon\"\n                remixicon=\"RiLayoutColumnLine\"\n                data-icon=\"inline-start\"\n              />\n              Columns\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"sticky top-0 z-10 bg-muted\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"hidden flex-1 text-sm text-muted-foreground lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n                items={[10, 20, 30, 40, 50].map((pageSize) => ({\n                  label: `${pageSize}`,\n                  value: `${pageSize}`,\n                }))}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  <SelectGroup>\n                    {[10, 20, 30, 40, 50].map((pageSize) => (\n                      <SelectItem key={pageSize} value={`${pageSize}`}>\n                        {pageSize}\n                      </SelectItem>\n                    ))}\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsLeftIcon\"\n                  tabler=\"IconChevronsLeft\"\n                  hugeicons=\"ArrowLeftDoubleIcon\"\n                  phosphor=\"CaretDoubleLeftIcon\"\n                  remixicon=\"RiSkipLeftLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronLeftIcon\"\n                  tabler=\"IconChevronLeft\"\n                  hugeicons=\"ArrowLeft01Icon\"\n                  phosphor=\"CaretLeftIcon\"\n                  remixicon=\"RiArrowLeftSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsRightIcon\"\n                  tabler=\"IconChevronsRight\"\n                  hugeicons=\"ArrowRightDoubleIcon\"\n                  phosphor=\"CaretDoubleRightIcon\"\n                  remixicon=\"RiSkipRightLine\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\nconst chartData = [\n  {\n    month: \"January\",\n    desktop: 186,\n    mobile: 80,\n  },\n  {\n    month: \"February\",\n    desktop: 305,\n    mobile: 200,\n  },\n  {\n    month: \"March\",\n    desktop: 237,\n    mobile: 120,\n  },\n  {\n    month: \"April\",\n    desktop: 73,\n    mobile: 190,\n  },\n  {\n    month: \"May\",\n    desktop: 209,\n    mobile: 130,\n  },\n  {\n    month: \"June\",\n    desktop: 214,\n    mobile: 140,\n  },\n]\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n  return (\n    <Drawer direction={isMobile ? \"bottom\" : \"right\"}>\n      <DrawerTrigger asChild>\n        <Button variant=\"link\" className=\"w-fit px-0 text-left text-foreground\">\n          {item.header}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconPlaceholder\n                    lucide=\"TrendingUpIcon\"\n                    tabler=\"IconTrendingUp\"\n                    hugeicons=\"ChartUpIcon\"\n                    phosphor=\"TrendUpIcon\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select\n                  defaultValue={item.type}\n                  items={[\n                    { label: \"Table of Contents\", value: \"Table of Contents\" },\n                    { label: \"Executive Summary\", value: \"Executive Summary\" },\n                    {\n                      label: \"Technical Approach\",\n                      value: \"Technical Approach\",\n                    },\n                    { label: \"Design\", value: \"Design\" },\n                    { label: \"Capabilities\", value: \"Capabilities\" },\n                    { label: \"Focus Documents\", value: \"Focus Documents\" },\n                    { label: \"Narrative\", value: \"Narrative\" },\n                    { label: \"Cover Page\", value: \"Cover Page\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Table of Contents\">\n                        Table of Contents\n                      </SelectItem>\n                      <SelectItem value=\"Executive Summary\">\n                        Executive Summary\n                      </SelectItem>\n                      <SelectItem value=\"Technical Approach\">\n                        Technical Approach\n                      </SelectItem>\n                      <SelectItem value=\"Design\">Design</SelectItem>\n                      <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                      <SelectItem value=\"Focus Documents\">\n                        Focus Documents\n                      </SelectItem>\n                      <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                      <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select\n                  defaultValue={item.status}\n                  items={[\n                    { label: \"Done\", value: \"Done\" },\n                    { label: \"In Progress\", value: \"In Progress\" },\n                    { label: \"Not Started\", value: \"Not Started\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Done\">Done</SelectItem>\n                      <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                      <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select\n                defaultValue={item.reviewer}\n                items={[\n                  { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n                  { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n                  { label: \"Emily Whalen\", value: \"Emily Whalen\" },\n                ]}\n              >\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                    <SelectItem value=\"Jamik Tashpulatov\">\n                      Jamik Tashpulatov\n                    </SelectItem>\n                    <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose asChild>\n            <Button variant=\"outline\" />\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/base-vega/hooks/use-mobile\"\nimport { Badge } from \"@/registry/base-vega/ui/badge\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-vega/ui/chart\"\nimport { Checkbox } from \"@/registry/base-vega/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-vega/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport { Label } from \"@/registry/base-vega/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-vega/ui/select\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/base-vega/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-vega/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"size-7 text-muted-foreground hover:bg-transparent\"\n    >\n      <IconPlaceholder\n        lucide=\"GripVerticalIcon\"\n        tabler=\"IconGripVertical\"\n        hugeicons=\"DragDropVerticalIcon\"\n        phosphor=\"DotsSixVerticalIcon\"\n        remixicon=\"RiDraggable\"\n        className=\"size-3 text-muted-foreground\"\n      />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={table.getIsAllPageRowsSelected()}\n          indeterminate={\n            table.getIsSomePageRowsSelected() &&\n            !table.getIsAllPageRowsSelected()\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n        {row.original.status === \"Done\" ? (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheckFilled\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleFill\"\n            className=\"fill-green-500 dark:fill-green-400\"\n          />\n        ) : (\n          <IconPlaceholder\n            lucide=\"LoaderIcon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoader4Line\"\n          />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          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\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          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\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select\n            items={[\n              { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n              { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n            ]}\n          >\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectGroup>\n                <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                <SelectItem value=\"Jamik Tashpulatov\">\n                  Jamik Tashpulatov\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              className=\"flex size-8 text-muted-foreground data-open:bg-muted\"\n              size=\"icon\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"EllipsisVerticalIcon\"\n            tabler=\"IconDotsVertical\"\n            hugeicons=\"MoreVerticalCircle01Icon\"\n            phosphor=\"DotsThreeVerticalIcon\"\n            remixicon=\"RiMore2Line\"\n          />\n          <span className=\"sr-only\">Open menu</span>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select\n          defaultValue=\"outline\"\n          items={[\n            { label: \"Outline\", value: \"outline\" },\n            { label: \"Past Performance\", value: \"past-performance\" },\n            { label: \"Key Personnel\", value: \"key-personnel\" },\n            { label: \"Focus Documents\", value: \"focus-documents\" },\n          ]}\n        >\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"outline\">Outline</SelectItem>\n              <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n              <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n              <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <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\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"sm\" />}\n            >\n              <IconPlaceholder\n                lucide=\"Columns3Icon\"\n                tabler=\"IconLayoutColumns\"\n                hugeicons=\"LeftToRightListBulletIcon\"\n                phosphor=\"ColumnsIcon\"\n                remixicon=\"RiLayoutColumnLine\"\n                data-icon=\"inline-start\"\n              />\n              Columns\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"sticky top-0 z-10 bg-muted\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"hidden flex-1 text-sm text-muted-foreground lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n                items={[10, 20, 30, 40, 50].map((pageSize) => ({\n                  label: `${pageSize}`,\n                  value: `${pageSize}`,\n                }))}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  <SelectGroup>\n                    {[10, 20, 30, 40, 50].map((pageSize) => (\n                      <SelectItem key={pageSize} value={`${pageSize}`}>\n                        {pageSize}\n                      </SelectItem>\n                    ))}\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsLeftIcon\"\n                  tabler=\"IconChevronsLeft\"\n                  hugeicons=\"ArrowLeftDoubleIcon\"\n                  phosphor=\"CaretDoubleLeftIcon\"\n                  remixicon=\"RiSkipLeftLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronLeftIcon\"\n                  tabler=\"IconChevronLeft\"\n                  hugeicons=\"ArrowLeft01Icon\"\n                  phosphor=\"CaretLeftIcon\"\n                  remixicon=\"RiArrowLeftSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsRightIcon\"\n                  tabler=\"IconChevronsRight\"\n                  hugeicons=\"ArrowRightDoubleIcon\"\n                  phosphor=\"CaretDoubleRightIcon\"\n                  remixicon=\"RiSkipRightLine\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\nconst chartData = [\n  {\n    month: \"January\",\n    desktop: 186,\n    mobile: 80,\n  },\n  {\n    month: \"February\",\n    desktop: 305,\n    mobile: 200,\n  },\n  {\n    month: \"March\",\n    desktop: 237,\n    mobile: 120,\n  },\n  {\n    month: \"April\",\n    desktop: 73,\n    mobile: 190,\n  },\n  {\n    month: \"May\",\n    desktop: 209,\n    mobile: 130,\n  },\n  {\n    month: \"June\",\n    desktop: 214,\n    mobile: 140,\n  },\n]\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n  return (\n    <Drawer swipeDirection={isMobile ? \"down\" : \"right\"}>\n      <DrawerTrigger\n        render={\n          <Button\n            variant=\"link\"\n            className=\"w-fit px-0 text-left text-foreground\"\n          />\n        }\n      >\n        {item.header}\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconPlaceholder\n                    lucide=\"TrendingUpIcon\"\n                    tabler=\"IconTrendingUp\"\n                    hugeicons=\"ChartUpIcon\"\n                    phosphor=\"TrendUpIcon\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select\n                  defaultValue={item.type}\n                  items={[\n                    { label: \"Table of Contents\", value: \"Table of Contents\" },\n                    { label: \"Executive Summary\", value: \"Executive Summary\" },\n                    {\n                      label: \"Technical Approach\",\n                      value: \"Technical Approach\",\n                    },\n                    { label: \"Design\", value: \"Design\" },\n                    { label: \"Capabilities\", value: \"Capabilities\" },\n                    { label: \"Focus Documents\", value: \"Focus Documents\" },\n                    { label: \"Narrative\", value: \"Narrative\" },\n                    { label: \"Cover Page\", value: \"Cover Page\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Table of Contents\">\n                        Table of Contents\n                      </SelectItem>\n                      <SelectItem value=\"Executive Summary\">\n                        Executive Summary\n                      </SelectItem>\n                      <SelectItem value=\"Technical Approach\">\n                        Technical Approach\n                      </SelectItem>\n                      <SelectItem value=\"Design\">Design</SelectItem>\n                      <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                      <SelectItem value=\"Focus Documents\">\n                        Focus Documents\n                      </SelectItem>\n                      <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                      <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select\n                  defaultValue={item.status}\n                  items={[\n                    { label: \"Done\", value: \"Done\" },\n                    { label: \"In Progress\", value: \"In Progress\" },\n                    { label: \"Not Started\", value: \"Not Started\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Done\">Done</SelectItem>\n                      <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                      <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select\n                defaultValue={item.reviewer}\n                items={[\n                  { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n                  { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n                  { label: \"Emily Whalen\", value: \"Emily Whalen\" },\n                ]}\n              >\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                    <SelectItem value=\"Jamik Tashpulatov\">\n                      Jamik Tashpulatov\n                    </SelectItem>\n                    <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose render={<Button variant=\"outline\" />}>Done</DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/base-vega/drawer-example.json b/apps/v4/public/r/styles/base-vega/drawer-example.json
index b2d807eaec5..bec466ec6f2 100644
--- a/apps/v4/public/r/styles/base-vega/drawer-example.json
+++ b/apps/v4/public/r/styles/base-vega/drawer-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/drawer-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-vega/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-vega/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"up\", \"right\", \"down\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            swipeDirection={\n              side === \"down\" ? undefined : (side as \"up\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger\n              render={<Button variant=\"outline\" className=\"capitalize\" />}\n            >\n              {side}\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[swipe-direction=down]:max-h-[50vh] data-[swipe-direction=up]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose render={<Button variant=\"outline\" />}>\n                  Cancel\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer swipeDirection=\"right\">\n        <DrawerTrigger render={<Button variant=\"outline\" />}>\n          Scrollable Content\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/drawer.json b/apps/v4/public/r/styles/base-vega/drawer.json
index 992b1f39a58..b51e4181f3b 100644
--- a/apps/v4/public/r/styles/base-vega/drawer.json
+++ b/apps/v4/public/r/styles/base-vega/drawer.json
@@ -2,12 +2,12 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "drawer",
   "dependencies": [
-    "vaul"
+    "@base-ui/react"
   ],
   "files": [
     {
       "path": "registry/base-vega/ui/drawer.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"cn-font-heading font-medium text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Drawer({ ...props }: DrawerPrimitive.Root.Props) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: DrawerPrimitive.Backdrop.Props) {\n  return (\n    <DrawerPrimitive.Backdrop\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/10 opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: DrawerPrimitive.Popup.Props) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Viewport\n        data-slot=\"drawer-viewport\"\n        className=\"pointer-events-none fixed inset-0 z-50\"\n      >\n        <DrawerPrimitive.Popup\n          data-slot=\"drawer-content\"\n          className={cn(\n            \"group/drawer-content pointer-events-auto fixed z-50 flex h-auto transform-(--drawer-transform) flex-col overflow-hidden bg-popover text-sm text-popover-foreground transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--drawer-bleed-x:3rem] [--drawer-bleed-y:3rem] data-ending-style:transform-(--drawer-closed-transform) data-starting-style:transform-(--drawer-closed-transform) data-swiping:duration-0 data-swiping:select-none data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:-mb-(--drawer-bleed-y) data-[swipe-direction=down]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=down]:pb-(--drawer-bleed-y) data-[swipe-direction=down]:[--drawer-closed-transform:translate3d(0,100%,0)] data-[swipe-direction=down]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:-ml-(--drawer-bleed-x) data-[swipe-direction=left]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=left]:pl-(--drawer-bleed-x) data-[swipe-direction=left]:[--drawer-closed-transform:translate3d(-100%,0,0)] data-[swipe-direction=left]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:-mr-(--drawer-bleed-x) data-[swipe-direction=right]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=right]:pr-(--drawer-bleed-x) data-[swipe-direction=right]:[--drawer-closed-transform:translate3d(100%,0,0)] data-[swipe-direction=right]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:-mt-(--drawer-bleed-y) data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b data-[swipe-direction=up]:pt-(--drawer-bleed-y) data-[swipe-direction=up]:[--drawer-closed-transform:translate3d(0,-100%,0)] data-[swipe-direction=up]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[swipe-direction=left]:sm:w-[calc(24rem+var(--drawer-bleed-x))] data-[swipe-direction=right]:sm:w-[calc(24rem+var(--drawer-bleed-x))]\",\n            className\n          )}\n          {...props}\n        >\n          <div className=\"mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full bg-muted group-data-[swipe-direction=down]/drawer-content:block\" />\n          <DrawerPrimitive.Content className=\"flex min-h-0 flex-1 flex-col\">\n            {children}\n          </DrawerPrimitive.Content>\n        </DrawerPrimitive.Popup>\n      </DrawerPrimitive.Viewport>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[swipe-direction=down]/drawer-content:text-center group-data-[swipe-direction=up]/drawer-content:text-center md:gap-1.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"cn-font-heading font-medium text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: DrawerPrimitive.Description.Props) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
@@ -15,7 +15,7 @@
     "links": {
       "docs": "https://ui.shadcn.com/docs/components/base/drawer",
       "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
-      "api": "https://vaul.emilkowal.ski/getting-started"
+      "api": "https://base-ui.com/react/components/drawer.md"
     }
   },
   "type": "registry:ui"
diff --git a/apps/v4/public/r/styles/base-vega/registry.json b/apps/v4/public/r/styles/base-vega/registry.json
index cf9dcfd0865..ee4cf87c9bc 100644
--- a/apps/v4/public/r/styles/base-vega/registry.json
+++ b/apps/v4/public/r/styles/base-vega/registry.json
@@ -382,7 +382,7 @@
     },
     {
       "name": "drawer",
-      "dependencies": ["vaul"],
+      "dependencies": ["@base-ui/react"],
       "files": [
         {
           "path": "registry/base-vega/ui/drawer.tsx",
@@ -393,7 +393,7 @@
         "links": {
           "docs": "https://ui.shadcn.com/docs/components/base/drawer",
           "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
-          "api": "https://vaul.emilkowal.ski/getting-started"
+          "api": "https://base-ui.com/react/components/drawer.md"
         }
       },
       "type": "registry:ui"
diff --git a/apps/v4/public/r/styles/radix-lyra/drawer.json b/apps/v4/public/r/styles/radix-lyra/drawer.json
index ea01dbc85f9..9ea5f0558ea 100644
--- a/apps/v4/public/r/styles/radix-lyra/drawer.json
+++ b/apps/v4/public/r/styles/radix-lyra/drawer.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/drawer.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-xs/relaxed text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-none data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-none data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-none data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-none data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-none bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\n        \"cn-font-heading text-sm font-medium text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-xs/relaxed text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-xs/relaxed text-popover-foreground data-[swipe-direction=down]:rounded-none data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-none data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-none data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-none data-[swipe-direction=up]:border-b data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-none data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-none data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-none data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-none data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-none bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\n        \"cn-font-heading text-sm font-medium text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-xs/relaxed text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/drawer.json b/apps/v4/public/r/styles/radix-nova/drawer.json
index ce479167a11..7b46a2b5dd1 100644
--- a/apps/v4/public/r/styles/radix-nova/drawer.json
+++ b/apps/v4/public/r/styles/radix-nova/drawer.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/drawer.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\n        \"cn-font-heading text-base font-medium text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\n        \"cn-font-heading text-base font-medium text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/drawer.json b/apps/v4/public/r/styles/radix-vega/drawer.json
index 564a4222251..2ff1387268b 100644
--- a/apps/v4/public/r/styles/radix-vega/drawer.json
+++ b/apps/v4/public/r/styles/radix-vega/drawer.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/drawer.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"cn-font-heading font-medium text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"cn-font-heading font-medium text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/registry/__index__.tsx b/apps/v4/registry/__index__.tsx
index 35e7b3e9c28..700916cb0ab 100644
--- a/apps/v4/registry/__index__.tsx
+++ b/apps/v4/registry/__index__.tsx
@@ -11327,7 +11327,7 @@ export const Index: Record<string, Record<string, any>> = {
           docs: "https://ui.shadcn.com/docs/components/base/drawer",
           examples:
             "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
-          api: "https://vaul.emilkowal.ski/getting-started",
+          api: "https://base-ui.com/react/components/drawer.md",
         },
       },
     },
@@ -23562,7 +23562,7 @@ export const Index: Record<string, Record<string, any>> = {
           docs: "https://ui.shadcn.com/docs/components/base/drawer",
           examples:
             "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
-          api: "https://vaul.emilkowal.ski/getting-started",
+          api: "https://base-ui.com/react/components/drawer.md",
         },
       },
     },
@@ -25309,7 +25309,7 @@ export const Index: Record<string, Record<string, any>> = {
           docs: "https://ui.shadcn.com/docs/components/base/drawer",
           examples:
             "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
-          api: "https://vaul.emilkowal.ski/getting-started",
+          api: "https://base-ui.com/react/components/drawer.md",
         },
       },
     },
@@ -27056,7 +27056,7 @@ export const Index: Record<string, Record<string, any>> = {
           docs: "https://ui.shadcn.com/docs/components/base/drawer",
           examples:
             "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
-          api: "https://vaul.emilkowal.ski/getting-started",
+          api: "https://base-ui.com/react/components/drawer.md",
         },
       },
     },
@@ -28803,7 +28803,7 @@ export const Index: Record<string, Record<string, any>> = {
           docs: "https://ui.shadcn.com/docs/components/base/drawer",
           examples:
             "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
-          api: "https://vaul.emilkowal.ski/getting-started",
+          api: "https://base-ui.com/react/components/drawer.md",
         },
       },
     },
@@ -30550,7 +30550,7 @@ export const Index: Record<string, Record<string, any>> = {
           docs: "https://ui.shadcn.com/docs/components/base/drawer",
           examples:
             "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
-          api: "https://vaul.emilkowal.ski/getting-started",
+          api: "https://base-ui.com/react/components/drawer.md",
         },
       },
     },
diff --git a/apps/v4/registry/bases/__index__.tsx b/apps/v4/registry/bases/__index__.tsx
index 238a72187b4..470cb4dcff8 100644
--- a/apps/v4/registry/bases/__index__.tsx
+++ b/apps/v4/registry/bases/__index__.tsx
@@ -5547,7 +5547,7 @@ export const Index: Record<string, Record<string, any>> = {
           docs: "https://ui.shadcn.com/docs/components/base/drawer",
           examples:
             "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
-          api: "https://vaul.emilkowal.ski/getting-started",
+          api: "https://base-ui.com/react/components/drawer.md",
         },
       },
     },
diff --git a/apps/v4/registry/bases/base/blocks/dashboard-01/components/data-table.tsx b/apps/v4/registry/bases/base/blocks/dashboard-01/components/data-table.tsx
index c49d0bd224e..ec1c43774f9 100644
--- a/apps/v4/registry/bases/base/blocks/dashboard-01/components/data-table.tsx
+++ b/apps/v4/registry/bases/base/blocks/dashboard-01/components/data-table.tsx
@@ -743,11 +743,16 @@ const 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>
+    <Drawer swipeDirection={isMobile ? "down" : "right"}>
+      <DrawerTrigger
+        render={
+          <Button
+            variant="link"
+            className="w-fit px-0 text-left text-foreground"
+          />
+        }
+      >
+        {item.header}
       </DrawerTrigger>
       <DrawerContent>
         <DrawerHeader className="gap-1">
@@ -931,9 +936,7 @@ function TableCellViewer({ item }: { item: z.infer<typeof schema> }) {
         </div>
         <DrawerFooter>
           <Button>Submit</Button>
-          <DrawerClose asChild>
-            <Button variant="outline" />
-          </DrawerClose>
+          <DrawerClose render={<Button variant="outline" />}>Done</DrawerClose>
         </DrawerFooter>
       </DrawerContent>
     </Drawer>
diff --git a/apps/v4/registry/bases/base/examples/drawer-example.tsx b/apps/v4/registry/bases/base/examples/drawer-example.tsx
index f6bd63ee7c2..64c4f42a20d 100644
--- a/apps/v4/registry/bases/base/examples/drawer-example.tsx
+++ b/apps/v4/registry/bases/base/examples/drawer-example.tsx
@@ -25,7 +25,7 @@ export default function DrawerExample() {
   )
 }
 
-const DRAWER_SIDES = ["top", "right", "bottom", "left"] as const
+const DRAWER_SIDES = ["up", "right", "down", "left"] as const
 
 function DrawerWithSides() {
   return (
@@ -34,16 +34,16 @@ function DrawerWithSides() {
         {DRAWER_SIDES.map((side) => (
           <Drawer
             key={side}
-            direction={
-              side === "bottom" ? undefined : (side as "top" | "right" | "left")
+            swipeDirection={
+              side === "down" ? undefined : (side as "up" | "right" | "left")
             }
           >
-            <DrawerTrigger asChild>
-              <Button variant="outline" className="capitalize">
-                {side}
-              </Button>
+            <DrawerTrigger
+              render={<Button variant="outline" className="capitalize" />}
+            >
+              {side}
             </DrawerTrigger>
-            <DrawerContent className="data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]">
+            <DrawerContent className="data-[swipe-direction=down]:max-h-[50vh] data-[swipe-direction=up]:max-h-[50vh]">
               <DrawerHeader>
                 <DrawerTitle>Move Goal</DrawerTitle>
                 <DrawerDescription>
@@ -69,8 +69,8 @@ function DrawerWithSides() {
               </div>
               <DrawerFooter>
                 <Button>Submit</Button>
-                <DrawerClose asChild>
-                  <Button variant="outline">Cancel</Button>
+                <DrawerClose render={<Button variant="outline" />}>
+                  Cancel
                 </DrawerClose>
               </DrawerFooter>
             </DrawerContent>
@@ -84,9 +84,9 @@ function DrawerWithSides() {
 function DrawerScrollableContent() {
   return (
     <Example title="Scrollable Content">
-      <Drawer direction="right">
-        <DrawerTrigger asChild>
-          <Button variant="outline">Scrollable Content</Button>
+      <Drawer swipeDirection="right">
+        <DrawerTrigger render={<Button variant="outline" />}>
+          Scrollable Content
         </DrawerTrigger>
         <DrawerContent>
           <DrawerHeader>
@@ -111,8 +111,8 @@ function DrawerScrollableContent() {
           </div>
           <DrawerFooter>
             <Button>Submit</Button>
-            <DrawerClose asChild>
-              <Button variant="outline">Cancel</Button>
+            <DrawerClose render={<Button variant="outline" />}>
+              Cancel
             </DrawerClose>
           </DrawerFooter>
         </DrawerContent>
diff --git a/apps/v4/registry/bases/base/ui/_registry.ts b/apps/v4/registry/bases/base/ui/_registry.ts
index 185cfdd042a..6befff838c0 100644
--- a/apps/v4/registry/bases/base/ui/_registry.ts
+++ b/apps/v4/registry/bases/base/ui/_registry.ts
@@ -351,7 +351,7 @@ export const ui: Registry["items"] = [
   {
     name: "drawer",
     type: "registry:ui",
-    dependencies: ["vaul"],
+    dependencies: ["@base-ui/react"],
     files: [
       {
         path: "ui/drawer.tsx",
@@ -363,7 +363,7 @@ export const ui: Registry["items"] = [
         docs: "https://ui.shadcn.com/docs/components/base/drawer",
         examples:
           "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
-        api: "https://vaul.emilkowal.ski/getting-started",
+        api: "https://base-ui.com/react/components/drawer.md",
       },
     },
   },
diff --git a/apps/v4/registry/bases/base/ui/drawer.tsx b/apps/v4/registry/bases/base/ui/drawer.tsx
index 8efcca212b5..a7b615c8013 100644
--- a/apps/v4/registry/bases/base/ui/drawer.tsx
+++ b/apps/v4/registry/bases/base/ui/drawer.tsx
@@ -1,42 +1,37 @@
 "use client"
 
 import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer"
 
 import { cn } from "@/registry/bases/base/lib/utils"
 
-function Drawer({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+function Drawer({ ...props }: DrawerPrimitive.Root.Props) {
   return <DrawerPrimitive.Root data-slot="drawer" {...props} />
 }
 
-function DrawerTrigger({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
   return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
 }
 
-function DrawerPortal({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
   return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
 }
 
-function DrawerClose({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+function DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {
   return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
 }
 
 function DrawerOverlay({
   className,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+}: DrawerPrimitive.Backdrop.Props) {
   return (
-    <DrawerPrimitive.Overlay
+    <DrawerPrimitive.Backdrop
       data-slot="drawer-overlay"
-      className={cn("cn-drawer-overlay fixed inset-0 z-50", className)}
+      className={cn(
+        "cn-drawer-overlay fixed inset-0 z-50 opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0",
+        className
+      )}
       {...props}
     />
   )
@@ -46,21 +41,28 @@ function DrawerContent({
   className,
   children,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+}: DrawerPrimitive.Popup.Props) {
   return (
     <DrawerPortal data-slot="drawer-portal">
       <DrawerOverlay />
-      <DrawerPrimitive.Content
-        data-slot="drawer-content"
-        className={cn(
-          "cn-drawer-content group/drawer-content fixed z-50",
-          className
-        )}
-        {...props}
+      <DrawerPrimitive.Viewport
+        data-slot="drawer-viewport"
+        className="pointer-events-none fixed inset-0 z-50"
       >
-        <div className="cn-drawer-handle mx-auto hidden shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
-        {children}
-      </DrawerPrimitive.Content>
+        <DrawerPrimitive.Popup
+          data-slot="drawer-content"
+          className={cn(
+            "cn-drawer-content group/drawer-content pointer-events-auto fixed z-50 transform-(--drawer-transform) overflow-hidden transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--drawer-bleed-x:3rem] [--drawer-bleed-y:3rem] data-ending-style:transform-(--drawer-closed-transform) data-starting-style:transform-(--drawer-closed-transform) data-swiping:duration-0 data-swiping:select-none data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:-mb-(--drawer-bleed-y) data-[swipe-direction=down]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=down]:pb-(--drawer-bleed-y) data-[swipe-direction=down]:[--drawer-closed-transform:translate3d(0,100%,0)] data-[swipe-direction=down]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:-ml-(--drawer-bleed-x) data-[swipe-direction=left]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=left]:pl-(--drawer-bleed-x) data-[swipe-direction=left]:[--drawer-closed-transform:translate3d(-100%,0,0)] data-[swipe-direction=left]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:-mr-(--drawer-bleed-x) data-[swipe-direction=right]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=right]:pr-(--drawer-bleed-x) data-[swipe-direction=right]:[--drawer-closed-transform:translate3d(100%,0,0)] data-[swipe-direction=right]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:-mt-(--drawer-bleed-y) data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=up]:pt-(--drawer-bleed-y) data-[swipe-direction=up]:[--drawer-closed-transform:translate3d(0,-100%,0)] data-[swipe-direction=up]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:sm:w-[calc(24rem+var(--drawer-bleed-x))] data-[swipe-direction=right]:sm:w-[calc(24rem+var(--drawer-bleed-x))]",
+            className
+          )}
+          {...props}
+        >
+          <div className="cn-drawer-handle mx-auto hidden shrink-0 group-data-[swipe-direction=down]/drawer-content:block" />
+          <DrawerPrimitive.Content className="flex min-h-0 flex-1 flex-col">
+            {children}
+          </DrawerPrimitive.Content>
+        </DrawerPrimitive.Popup>
+      </DrawerPrimitive.Viewport>
     </DrawerPortal>
   )
 }
@@ -69,7 +71,10 @@ function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="drawer-header"
-      className={cn("cn-drawer-header flex flex-col", className)}
+      className={cn(
+        "cn-drawer-header flex flex-col group-data-[swipe-direction=down]/drawer-content:text-center group-data-[swipe-direction=up]/drawer-content:text-center",
+        className
+      )}
       {...props}
     />
   )
@@ -85,10 +90,7 @@ function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
   )
 }
 
-function DrawerTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {
   return (
     <DrawerPrimitive.Title
       data-slot="drawer-title"
@@ -101,7 +103,7 @@ function DrawerTitle({
 function DrawerDescription({
   className,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+}: DrawerPrimitive.Description.Props) {
   return (
     <DrawerPrimitive.Description
       data-slot="drawer-description"
diff --git a/apps/v4/registry/bases/radix/ui/drawer.tsx b/apps/v4/registry/bases/radix/ui/drawer.tsx
index bb83fe5a1d1..84ec779defb 100644
--- a/apps/v4/registry/bases/radix/ui/drawer.tsx
+++ b/apps/v4/registry/bases/radix/ui/drawer.tsx
@@ -36,7 +36,10 @@ function DrawerOverlay({
   return (
     <DrawerPrimitive.Overlay
       data-slot="drawer-overlay"
-      className={cn("cn-drawer-overlay fixed inset-0 z-50", className)}
+      className={cn(
+        "cn-drawer-overlay fixed inset-0 z-50 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
       {...props}
     />
   )
@@ -53,7 +56,7 @@ function DrawerContent({
       <DrawerPrimitive.Content
         data-slot="drawer-content"
         className={cn(
-          "cn-drawer-content group/drawer-content fixed z-50",
+          "cn-drawer-content group/drawer-content fixed z-50 data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
           className
         )}
         {...props}
@@ -69,7 +72,10 @@ function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="drawer-header"
-      className={cn("cn-drawer-header flex flex-col", className)}
+      className={cn(
+        "cn-drawer-header flex flex-col group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center",
+        className
+      )}
       {...props}
     />
   )
diff --git a/apps/v4/registry/styles/style-luma.css b/apps/v4/registry/styles/style-luma.css
index d0f9a96916c..28f7a6912c0 100644
--- a/apps/v4/registry/styles/style-luma.css
+++ b/apps/v4/registry/styles/style-luma.css
@@ -698,19 +698,19 @@
 
   /* MARK: Drawer */
   .cn-drawer-overlay {
-    @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/30 supports-backdrop-filter:backdrop-blur-sm;
+    @apply bg-black/30 supports-backdrop-filter:backdrop-blur-sm;
   }
 
   .cn-drawer-content {
-    @apply before:bg-popover before:border-border relative flex h-auto flex-col bg-transparent p-4 text-sm before:absolute before:inset-2 before:-z-10 before:rounded-4xl before:border before:shadow-xl data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm;
+    @apply before:bg-popover before:border-border relative flex h-auto flex-col bg-transparent p-4 text-sm before:absolute before:inset-2 before:-z-10 before:rounded-4xl before:border before:shadow-xl;
   }
 
   .cn-drawer-handle {
-    @apply bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block;
+    @apply bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full;
   }
 
   .cn-drawer-header {
-    @apply gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left;
+    @apply gap-0.5 p-4 md:gap-1.5 md:text-left;
   }
 
   .cn-drawer-title {
diff --git a/apps/v4/registry/styles/style-lyra.css b/apps/v4/registry/styles/style-lyra.css
index 56145a5723c..c9d07eec7b6 100644
--- a/apps/v4/registry/styles/style-lyra.css
+++ b/apps/v4/registry/styles/style-lyra.css
@@ -449,19 +449,19 @@
 
   /* MARK: Drawer */
   .cn-drawer-overlay {
-    @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 supports-backdrop-filter:backdrop-blur-xs;
+    @apply bg-black/10 supports-backdrop-filter:backdrop-blur-xs;
   }
 
   .cn-drawer-content {
-    @apply bg-popover text-popover-foreground flex h-auto flex-col text-xs/relaxed data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-none data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-none data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-none data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-none data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm;
+    @apply bg-popover text-popover-foreground flex h-auto flex-col text-xs/relaxed data-[vaul-drawer-direction=bottom]:rounded-none data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:rounded-none data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:rounded-none data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:rounded-none data-[vaul-drawer-direction=top]:border-b data-[swipe-direction=down]:rounded-none data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-none data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-none data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-none data-[swipe-direction=up]:border-b;
   }
 
   .cn-drawer-handle {
-    @apply bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-none group-data-[vaul-drawer-direction=bottom]/drawer-content:block;
+    @apply bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-none;
   }
 
   .cn-drawer-header {
-    @apply gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left;
+    @apply gap-0.5 p-4 md:gap-0.5 md:text-left;
   }
 
   .cn-drawer-title {
diff --git a/apps/v4/registry/styles/style-maia.css b/apps/v4/registry/styles/style-maia.css
index 20c3fd7c43d..2dc2635ac8d 100644
--- a/apps/v4/registry/styles/style-maia.css
+++ b/apps/v4/registry/styles/style-maia.css
@@ -474,19 +474,20 @@
 
   /* MARK: Drawer */
   .cn-drawer-overlay {
-    @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 supports-backdrop-filter:backdrop-blur-xs;
+    @apply bg-black/80 supports-backdrop-filter:backdrop-blur-xs;
   }
 
   .cn-drawer-content {
-    @apply before:bg-popover text-popover-foreground before:border-border relative flex h-auto flex-col bg-transparent p-4 text-sm before:absolute before:inset-2 before:-z-10 before:rounded-4xl before:border data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm;
+    /* Shared surface only. Direction layout is owned by each primitive TSX. */
+    @apply before:bg-popover text-popover-foreground before:border-border relative flex h-auto flex-col bg-transparent p-4 text-sm before:absolute before:inset-2 before:-z-10 before:rounded-4xl before:border;
   }
 
   .cn-drawer-handle {
-    @apply bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block;
+    @apply bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full;
   }
 
   .cn-drawer-header {
-    @apply gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left;
+    @apply gap-0.5 p-4 md:gap-1.5 md:text-left;
   }
 
   .cn-drawer-title {
diff --git a/apps/v4/registry/styles/style-mira.css b/apps/v4/registry/styles/style-mira.css
index 43853972e43..acfad710401 100644
--- a/apps/v4/registry/styles/style-mira.css
+++ b/apps/v4/registry/styles/style-mira.css
@@ -474,19 +474,19 @@
 
   /* MARK: Drawer */
   .cn-drawer-overlay {
-    @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 supports-backdrop-filter:backdrop-blur-xs;
+    @apply bg-black/80 supports-backdrop-filter:backdrop-blur-xs;
   }
 
   .cn-drawer-content {
-    @apply before:bg-popover text-popover-foreground before:border-border relative flex h-auto flex-col bg-transparent p-2 text-xs/relaxed before:absolute before:inset-2 before:-z-10 before:rounded-xl before:border data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm;
+    @apply before:bg-popover text-popover-foreground before:border-border relative flex h-auto flex-col bg-transparent p-2 text-xs/relaxed before:absolute before:inset-2 before:-z-10 before:rounded-xl before:border;
   }
 
   .cn-drawer-handle {
-    @apply bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block;
+    @apply bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full;
   }
 
   .cn-drawer-header {
-    @apply gap-1 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:text-left;
+    @apply gap-1 p-4 md:text-left;
   }
 
   .cn-drawer-title {
diff --git a/apps/v4/registry/styles/style-nova.css b/apps/v4/registry/styles/style-nova.css
index 7ead341f3cd..b369abbf2f1 100644
--- a/apps/v4/registry/styles/style-nova.css
+++ b/apps/v4/registry/styles/style-nova.css
@@ -474,19 +474,19 @@
 
   /* MARK: Drawer */
   .cn-drawer-overlay {
-    @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 supports-backdrop-filter:backdrop-blur-xs;
+    @apply bg-black/10 supports-backdrop-filter:backdrop-blur-xs;
   }
 
   .cn-drawer-content {
-    @apply bg-popover text-popover-foreground flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm;
+    @apply bg-popover text-popover-foreground flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b;
   }
 
   .cn-drawer-handle {
-    @apply bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block;
+    @apply bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full;
   }
 
   .cn-drawer-header {
-    @apply gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left;
+    @apply gap-0.5 p-4 md:gap-0.5 md:text-left;
   }
 
   .cn-drawer-title {
diff --git a/apps/v4/registry/styles/style-vega.css b/apps/v4/registry/styles/style-vega.css
index 01a3b048426..c15850f509b 100644
--- a/apps/v4/registry/styles/style-vega.css
+++ b/apps/v4/registry/styles/style-vega.css
@@ -470,19 +470,19 @@
 
   /* MARK: Drawer */
   .cn-drawer-overlay {
-    @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 supports-backdrop-filter:backdrop-blur-xs;
+    @apply bg-black/10 supports-backdrop-filter:backdrop-blur-xs;
   }
 
   .cn-drawer-content {
-    @apply bg-popover text-popover-foreground flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm;
+    @apply bg-popover text-popover-foreground flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b;
   }
 
   .cn-drawer-handle {
-    @apply bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block;
+    @apply bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full;
   }
 
   .cn-drawer-header {
-    @apply gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left;
+    @apply gap-0.5 p-4 md:gap-1.5 md:text-left;
   }
 
   .cn-drawer-title {
diff --git a/apps/v4/styles/base-luma/ui/drawer.tsx b/apps/v4/styles/base-luma/ui/drawer.tsx
index 368e71321e8..ad566365ebb 100644
--- a/apps/v4/styles/base-luma/ui/drawer.tsx
+++ b/apps/v4/styles/base-luma/ui/drawer.tsx
@@ -1,43 +1,35 @@
 "use client"
 
 import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer"
 
 import { cn } from "@/lib/utils"
 
-function Drawer({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+function Drawer({ ...props }: DrawerPrimitive.Root.Props) {
   return <DrawerPrimitive.Root data-slot="drawer" {...props} />
 }
 
-function DrawerTrigger({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
   return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
 }
 
-function DrawerPortal({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
   return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
 }
 
-function DrawerClose({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+function DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {
   return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
 }
 
 function DrawerOverlay({
   className,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+}: DrawerPrimitive.Backdrop.Props) {
   return (
-    <DrawerPrimitive.Overlay
+    <DrawerPrimitive.Backdrop
       data-slot="drawer-overlay"
       className={cn(
-        "fixed inset-0 z-50 bg-black/30 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 z-50 bg-black/30 opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-sm",
         className
       )}
       {...props}
@@ -49,21 +41,28 @@ function DrawerContent({
   className,
   children,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+}: DrawerPrimitive.Popup.Props) {
   return (
     <DrawerPortal data-slot="drawer-portal">
       <DrawerOverlay />
-      <DrawerPrimitive.Content
-        data-slot="drawer-content"
-        className={cn(
-          "group/drawer-content fixed z-50 flex h-auto flex-col bg-transparent p-4 text-sm before:absolute before:inset-2 before:-z-10 before:rounded-4xl before:border before:border-border before:bg-popover before:shadow-xl data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
-          className
-        )}
-        {...props}
+      <DrawerPrimitive.Viewport
+        data-slot="drawer-viewport"
+        className="pointer-events-none fixed inset-0 z-50"
       >
-        <div className="mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
-        {children}
-      </DrawerPrimitive.Content>
+        <DrawerPrimitive.Popup
+          data-slot="drawer-content"
+          className={cn(
+            "group/drawer-content pointer-events-auto fixed z-50 flex h-auto transform-(--drawer-transform) flex-col overflow-hidden bg-transparent p-4 text-sm transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--drawer-bleed-x:3rem] [--drawer-bleed-y:3rem] before:absolute before:inset-2 before:-z-10 before:rounded-4xl before:border before:border-border before:bg-popover before:shadow-xl data-ending-style:transform-(--drawer-closed-transform) data-starting-style:transform-(--drawer-closed-transform) data-swiping:duration-0 data-swiping:select-none data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:-mb-(--drawer-bleed-y) data-[swipe-direction=down]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=down]:pb-(--drawer-bleed-y) data-[swipe-direction=down]:[--drawer-closed-transform:translate3d(0,100%,0)] data-[swipe-direction=down]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:-ml-(--drawer-bleed-x) data-[swipe-direction=left]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=left]:pl-(--drawer-bleed-x) data-[swipe-direction=left]:[--drawer-closed-transform:translate3d(-100%,0,0)] data-[swipe-direction=left]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:-mr-(--drawer-bleed-x) data-[swipe-direction=right]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=right]:pr-(--drawer-bleed-x) data-[swipe-direction=right]:[--drawer-closed-transform:translate3d(100%,0,0)] data-[swipe-direction=right]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:-mt-(--drawer-bleed-y) data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=up]:pt-(--drawer-bleed-y) data-[swipe-direction=up]:[--drawer-closed-transform:translate3d(0,-100%,0)] data-[swipe-direction=up]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:sm:w-[calc(24rem+var(--drawer-bleed-x))] data-[swipe-direction=right]:sm:w-[calc(24rem+var(--drawer-bleed-x))]",
+            className
+          )}
+          {...props}
+        >
+          <div className="mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full bg-muted group-data-[swipe-direction=down]/drawer-content:block" />
+          <DrawerPrimitive.Content className="flex min-h-0 flex-1 flex-col">
+            {children}
+          </DrawerPrimitive.Content>
+        </DrawerPrimitive.Popup>
+      </DrawerPrimitive.Viewport>
     </DrawerPortal>
   )
 }
@@ -73,7 +72,7 @@ function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="drawer-header"
       className={cn(
-        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
+        "flex flex-col gap-0.5 p-4 group-data-[swipe-direction=down]/drawer-content:text-center group-data-[swipe-direction=up]/drawer-content:text-center md:gap-1.5 md:text-left",
         className
       )}
       {...props}
@@ -91,10 +90,7 @@ function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
   )
 }
 
-function DrawerTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {
   return (
     <DrawerPrimitive.Title
       data-slot="drawer-title"
@@ -110,7 +106,7 @@ function DrawerTitle({
 function DrawerDescription({
   className,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+}: DrawerPrimitive.Description.Props) {
   return (
     <DrawerPrimitive.Description
       data-slot="drawer-description"
diff --git a/apps/v4/styles/base-lyra/ui/drawer.tsx b/apps/v4/styles/base-lyra/ui/drawer.tsx
index b57096f9fa0..89b0a8944fb 100644
--- a/apps/v4/styles/base-lyra/ui/drawer.tsx
+++ b/apps/v4/styles/base-lyra/ui/drawer.tsx
@@ -1,43 +1,35 @@
 "use client"
 
 import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer"
 
 import { cn } from "@/lib/utils"
 
-function Drawer({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+function Drawer({ ...props }: DrawerPrimitive.Root.Props) {
   return <DrawerPrimitive.Root data-slot="drawer" {...props} />
 }
 
-function DrawerTrigger({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
   return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
 }
 
-function DrawerPortal({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
   return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
 }
 
-function DrawerClose({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+function DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {
   return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
 }
 
 function DrawerOverlay({
   className,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+}: DrawerPrimitive.Backdrop.Props) {
   return (
-    <DrawerPrimitive.Overlay
+    <DrawerPrimitive.Backdrop
       data-slot="drawer-overlay"
       className={cn(
-        "fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 z-50 bg-black/10 opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs",
         className
       )}
       {...props}
@@ -49,21 +41,28 @@ function DrawerContent({
   className,
   children,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+}: DrawerPrimitive.Popup.Props) {
   return (
     <DrawerPortal data-slot="drawer-portal">
       <DrawerOverlay />
-      <DrawerPrimitive.Content
-        data-slot="drawer-content"
-        className={cn(
-          "group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-xs/relaxed text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-none data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-none data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-none data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-none data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
-          className
-        )}
-        {...props}
+      <DrawerPrimitive.Viewport
+        data-slot="drawer-viewport"
+        className="pointer-events-none fixed inset-0 z-50"
       >
-        <div className="mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-none bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
-        {children}
-      </DrawerPrimitive.Content>
+        <DrawerPrimitive.Popup
+          data-slot="drawer-content"
+          className={cn(
+            "group/drawer-content pointer-events-auto fixed z-50 flex h-auto transform-(--drawer-transform) flex-col overflow-hidden bg-popover text-xs/relaxed text-popover-foreground transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--drawer-bleed-x:3rem] [--drawer-bleed-y:3rem] data-ending-style:transform-(--drawer-closed-transform) data-starting-style:transform-(--drawer-closed-transform) data-swiping:duration-0 data-swiping:select-none data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:-mb-(--drawer-bleed-y) data-[swipe-direction=down]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=down]:rounded-none data-[swipe-direction=down]:border-t data-[swipe-direction=down]:pb-(--drawer-bleed-y) data-[swipe-direction=down]:[--drawer-closed-transform:translate3d(0,100%,0)] data-[swipe-direction=down]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:-ml-(--drawer-bleed-x) data-[swipe-direction=left]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=left]:rounded-none data-[swipe-direction=left]:border-r data-[swipe-direction=left]:pl-(--drawer-bleed-x) data-[swipe-direction=left]:[--drawer-closed-transform:translate3d(-100%,0,0)] data-[swipe-direction=left]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:-mr-(--drawer-bleed-x) data-[swipe-direction=right]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=right]:rounded-none data-[swipe-direction=right]:border-l data-[swipe-direction=right]:pr-(--drawer-bleed-x) data-[swipe-direction=right]:[--drawer-closed-transform:translate3d(100%,0,0)] data-[swipe-direction=right]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:-mt-(--drawer-bleed-y) data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=up]:rounded-none data-[swipe-direction=up]:border-b data-[swipe-direction=up]:pt-(--drawer-bleed-y) data-[swipe-direction=up]:[--drawer-closed-transform:translate3d(0,-100%,0)] data-[swipe-direction=up]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[vaul-drawer-direction=bottom]:rounded-none data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:rounded-none data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:rounded-none data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:rounded-none data-[vaul-drawer-direction=top]:border-b data-[swipe-direction=left]:sm:w-[calc(24rem+var(--drawer-bleed-x))] data-[swipe-direction=right]:sm:w-[calc(24rem+var(--drawer-bleed-x))]",
+            className
+          )}
+          {...props}
+        >
+          <div className="mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-none bg-muted group-data-[swipe-direction=down]/drawer-content:block" />
+          <DrawerPrimitive.Content className="flex min-h-0 flex-1 flex-col">
+            {children}
+          </DrawerPrimitive.Content>
+        </DrawerPrimitive.Popup>
+      </DrawerPrimitive.Viewport>
     </DrawerPortal>
   )
 }
@@ -73,7 +72,7 @@ function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="drawer-header"
       className={cn(
-        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left",
+        "flex flex-col gap-0.5 p-4 group-data-[swipe-direction=down]/drawer-content:text-center group-data-[swipe-direction=up]/drawer-content:text-center md:gap-0.5 md:text-left",
         className
       )}
       {...props}
@@ -91,10 +90,7 @@ function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
   )
 }
 
-function DrawerTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {
   return (
     <DrawerPrimitive.Title
       data-slot="drawer-title"
@@ -110,7 +106,7 @@ function DrawerTitle({
 function DrawerDescription({
   className,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+}: DrawerPrimitive.Description.Props) {
   return (
     <DrawerPrimitive.Description
       data-slot="drawer-description"
diff --git a/apps/v4/styles/base-maia/ui/drawer.tsx b/apps/v4/styles/base-maia/ui/drawer.tsx
index e91a439d860..00bba0d2619 100644
--- a/apps/v4/styles/base-maia/ui/drawer.tsx
+++ b/apps/v4/styles/base-maia/ui/drawer.tsx
@@ -1,43 +1,35 @@
 "use client"
 
 import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer"
 
 import { cn } from "@/lib/utils"
 
-function Drawer({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+function Drawer({ ...props }: DrawerPrimitive.Root.Props) {
   return <DrawerPrimitive.Root data-slot="drawer" {...props} />
 }
 
-function DrawerTrigger({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
   return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
 }
 
-function DrawerPortal({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
   return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
 }
 
-function DrawerClose({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+function DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {
   return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
 }
 
 function DrawerOverlay({
   className,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+}: DrawerPrimitive.Backdrop.Props) {
   return (
-    <DrawerPrimitive.Overlay
+    <DrawerPrimitive.Backdrop
       data-slot="drawer-overlay"
       className={cn(
-        "fixed inset-0 z-50 bg-black/80 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 z-50 bg-black/80 opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs",
         className
       )}
       {...props}
@@ -49,21 +41,28 @@ function DrawerContent({
   className,
   children,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+}: DrawerPrimitive.Popup.Props) {
   return (
     <DrawerPortal data-slot="drawer-portal">
       <DrawerOverlay />
-      <DrawerPrimitive.Content
-        data-slot="drawer-content"
-        className={cn(
-          "group/drawer-content fixed z-50 flex h-auto flex-col bg-transparent p-4 text-sm text-popover-foreground before:absolute before:inset-2 before:-z-10 before:rounded-4xl before:border before:border-border before:bg-popover data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
-          className
-        )}
-        {...props}
+      <DrawerPrimitive.Viewport
+        data-slot="drawer-viewport"
+        className="pointer-events-none fixed inset-0 z-50"
       >
-        <div className="mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
-        {children}
-      </DrawerPrimitive.Content>
+        <DrawerPrimitive.Popup
+          data-slot="drawer-content"
+          className={cn(
+            "group/drawer-content pointer-events-auto fixed z-50 flex h-auto transform-(--drawer-transform) flex-col overflow-hidden bg-transparent p-4 text-sm text-popover-foreground transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--drawer-bleed-x:3rem] [--drawer-bleed-y:3rem] before:absolute before:inset-2 before:-z-10 before:rounded-4xl before:border before:border-border before:bg-popover data-ending-style:transform-(--drawer-closed-transform) data-starting-style:transform-(--drawer-closed-transform) data-swiping:duration-0 data-swiping:select-none data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:-mb-(--drawer-bleed-y) data-[swipe-direction=down]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=down]:pb-(--drawer-bleed-y) data-[swipe-direction=down]:[--drawer-closed-transform:translate3d(0,100%,0)] data-[swipe-direction=down]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:-ml-(--drawer-bleed-x) data-[swipe-direction=left]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=left]:pl-(--drawer-bleed-x) data-[swipe-direction=left]:[--drawer-closed-transform:translate3d(-100%,0,0)] data-[swipe-direction=left]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:-mr-(--drawer-bleed-x) data-[swipe-direction=right]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=right]:pr-(--drawer-bleed-x) data-[swipe-direction=right]:[--drawer-closed-transform:translate3d(100%,0,0)] data-[swipe-direction=right]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:-mt-(--drawer-bleed-y) data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=up]:pt-(--drawer-bleed-y) data-[swipe-direction=up]:[--drawer-closed-transform:translate3d(0,-100%,0)] data-[swipe-direction=up]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:sm:w-[calc(24rem+var(--drawer-bleed-x))] data-[swipe-direction=right]:sm:w-[calc(24rem+var(--drawer-bleed-x))]",
+            className
+          )}
+          {...props}
+        >
+          <div className="mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full bg-muted group-data-[swipe-direction=down]/drawer-content:block" />
+          <DrawerPrimitive.Content className="flex min-h-0 flex-1 flex-col">
+            {children}
+          </DrawerPrimitive.Content>
+        </DrawerPrimitive.Popup>
+      </DrawerPrimitive.Viewport>
     </DrawerPortal>
   )
 }
@@ -73,7 +72,7 @@ function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="drawer-header"
       className={cn(
-        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
+        "flex flex-col gap-0.5 p-4 group-data-[swipe-direction=down]/drawer-content:text-center group-data-[swipe-direction=up]/drawer-content:text-center md:gap-1.5 md:text-left",
         className
       )}
       {...props}
@@ -91,10 +90,7 @@ function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
   )
 }
 
-function DrawerTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {
   return (
     <DrawerPrimitive.Title
       data-slot="drawer-title"
@@ -110,7 +106,7 @@ function DrawerTitle({
 function DrawerDescription({
   className,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+}: DrawerPrimitive.Description.Props) {
   return (
     <DrawerPrimitive.Description
       data-slot="drawer-description"
diff --git a/apps/v4/styles/base-mira/ui/drawer.tsx b/apps/v4/styles/base-mira/ui/drawer.tsx
index 416bf6c9207..8f5ce3a9896 100644
--- a/apps/v4/styles/base-mira/ui/drawer.tsx
+++ b/apps/v4/styles/base-mira/ui/drawer.tsx
@@ -1,43 +1,35 @@
 "use client"
 
 import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer"
 
 import { cn } from "@/lib/utils"
 
-function Drawer({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+function Drawer({ ...props }: DrawerPrimitive.Root.Props) {
   return <DrawerPrimitive.Root data-slot="drawer" {...props} />
 }
 
-function DrawerTrigger({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
   return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
 }
 
-function DrawerPortal({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
   return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
 }
 
-function DrawerClose({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+function DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {
   return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
 }
 
 function DrawerOverlay({
   className,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+}: DrawerPrimitive.Backdrop.Props) {
   return (
-    <DrawerPrimitive.Overlay
+    <DrawerPrimitive.Backdrop
       data-slot="drawer-overlay"
       className={cn(
-        "fixed inset-0 z-50 bg-black/80 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 z-50 bg-black/80 opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs",
         className
       )}
       {...props}
@@ -49,21 +41,28 @@ function DrawerContent({
   className,
   children,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+}: DrawerPrimitive.Popup.Props) {
   return (
     <DrawerPortal data-slot="drawer-portal">
       <DrawerOverlay />
-      <DrawerPrimitive.Content
-        data-slot="drawer-content"
-        className={cn(
-          "group/drawer-content fixed z-50 flex h-auto flex-col bg-transparent p-2 text-xs/relaxed text-popover-foreground before:absolute before:inset-2 before:-z-10 before:rounded-xl before:border before:border-border before:bg-popover data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
-          className
-        )}
-        {...props}
+      <DrawerPrimitive.Viewport
+        data-slot="drawer-viewport"
+        className="pointer-events-none fixed inset-0 z-50"
       >
-        <div className="mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
-        {children}
-      </DrawerPrimitive.Content>
+        <DrawerPrimitive.Popup
+          data-slot="drawer-content"
+          className={cn(
+            "group/drawer-content pointer-events-auto fixed z-50 flex h-auto transform-(--drawer-transform) flex-col overflow-hidden bg-transparent p-2 text-xs/relaxed text-popover-foreground transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--drawer-bleed-x:3rem] [--drawer-bleed-y:3rem] before:absolute before:inset-2 before:-z-10 before:rounded-xl before:border before:border-border before:bg-popover data-ending-style:transform-(--drawer-closed-transform) data-starting-style:transform-(--drawer-closed-transform) data-swiping:duration-0 data-swiping:select-none data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:-mb-(--drawer-bleed-y) data-[swipe-direction=down]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=down]:pb-(--drawer-bleed-y) data-[swipe-direction=down]:[--drawer-closed-transform:translate3d(0,100%,0)] data-[swipe-direction=down]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:-ml-(--drawer-bleed-x) data-[swipe-direction=left]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=left]:pl-(--drawer-bleed-x) data-[swipe-direction=left]:[--drawer-closed-transform:translate3d(-100%,0,0)] data-[swipe-direction=left]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:-mr-(--drawer-bleed-x) data-[swipe-direction=right]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=right]:pr-(--drawer-bleed-x) data-[swipe-direction=right]:[--drawer-closed-transform:translate3d(100%,0,0)] data-[swipe-direction=right]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:-mt-(--drawer-bleed-y) data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=up]:pt-(--drawer-bleed-y) data-[swipe-direction=up]:[--drawer-closed-transform:translate3d(0,-100%,0)] data-[swipe-direction=up]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:sm:w-[calc(24rem+var(--drawer-bleed-x))] data-[swipe-direction=right]:sm:w-[calc(24rem+var(--drawer-bleed-x))]",
+            className
+          )}
+          {...props}
+        >
+          <div className="mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full bg-muted group-data-[swipe-direction=down]/drawer-content:block" />
+          <DrawerPrimitive.Content className="flex min-h-0 flex-1 flex-col">
+            {children}
+          </DrawerPrimitive.Content>
+        </DrawerPrimitive.Popup>
+      </DrawerPrimitive.Viewport>
     </DrawerPortal>
   )
 }
@@ -73,7 +72,7 @@ function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="drawer-header"
       className={cn(
-        "flex flex-col gap-1 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:text-left",
+        "flex flex-col gap-1 p-4 group-data-[swipe-direction=down]/drawer-content:text-center group-data-[swipe-direction=up]/drawer-content:text-center md:text-left",
         className
       )}
       {...props}
@@ -91,10 +90,7 @@ function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
   )
 }
 
-function DrawerTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {
   return (
     <DrawerPrimitive.Title
       data-slot="drawer-title"
@@ -110,7 +106,7 @@ function DrawerTitle({
 function DrawerDescription({
   className,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+}: DrawerPrimitive.Description.Props) {
   return (
     <DrawerPrimitive.Description
       data-slot="drawer-description"
diff --git a/apps/v4/styles/base-nova/ui-rtl/drawer.tsx b/apps/v4/styles/base-nova/ui-rtl/drawer.tsx
index 7a94067868b..cabdffcdb9f 100644
--- a/apps/v4/styles/base-nova/ui-rtl/drawer.tsx
+++ b/apps/v4/styles/base-nova/ui-rtl/drawer.tsx
@@ -1,43 +1,35 @@
 "use client"
 
 import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer"
 
 import { cn } from "@/lib/utils"
 
-function Drawer({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+function Drawer({ ...props }: DrawerPrimitive.Root.Props) {
   return <DrawerPrimitive.Root data-slot="drawer" {...props} />
 }
 
-function DrawerTrigger({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
   return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
 }
 
-function DrawerPortal({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
   return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
 }
 
-function DrawerClose({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+function DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {
   return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
 }
 
 function DrawerOverlay({
   className,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+}: DrawerPrimitive.Backdrop.Props) {
   return (
-    <DrawerPrimitive.Overlay
+    <DrawerPrimitive.Backdrop
       data-slot="drawer-overlay"
       className={cn(
-        "fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 z-50 bg-black/10 opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs",
         className
       )}
       {...props}
@@ -49,21 +41,28 @@ function DrawerContent({
   className,
   children,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+}: DrawerPrimitive.Popup.Props) {
   return (
     <DrawerPortal data-slot="drawer-portal">
       <DrawerOverlay />
-      <DrawerPrimitive.Content
-        data-slot="drawer-content"
-        className={cn(
-          "group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:start-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-e-xl data-[vaul-drawer-direction=left]:border-e data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:end-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-s-xl data-[vaul-drawer-direction=right]:border-s data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
-          className
-        )}
-        {...props}
+      <DrawerPrimitive.Viewport
+        data-slot="drawer-viewport"
+        className="pointer-events-none fixed inset-0 z-50"
       >
-        <div className="mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
-        {children}
-      </DrawerPrimitive.Content>
+        <DrawerPrimitive.Popup
+          data-slot="drawer-content"
+          className={cn(
+            "group/drawer-content pointer-events-auto fixed z-50 flex h-auto transform-(--drawer-transform) flex-col overflow-hidden bg-popover text-sm text-popover-foreground transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--drawer-bleed-x:3rem] [--drawer-bleed-y:3rem] data-ending-style:transform-(--drawer-closed-transform) data-starting-style:transform-(--drawer-closed-transform) data-swiping:duration-0 data-swiping:select-none data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:-mb-(--drawer-bleed-y) data-[swipe-direction=down]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=down]:pb-(--drawer-bleed-y) data-[swipe-direction=down]:[--drawer-closed-transform:translate3d(0,100%,0)] data-[swipe-direction=down]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:start-0 data-[swipe-direction=left]:-ms-(--drawer-bleed-x) data-[swipe-direction=left]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=left]:rounded-e-xl data-[swipe-direction=left]:border-e data-[swipe-direction=left]:ps-(--drawer-bleed-x) data-[swipe-direction=left]:[--drawer-closed-transform:translate3d(-100%,0,0)] data-[swipe-direction=left]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:end-0 data-[swipe-direction=right]:-me-(--drawer-bleed-x) data-[swipe-direction=right]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=right]:rounded-s-xl data-[swipe-direction=right]:border-s data-[swipe-direction=right]:pe-(--drawer-bleed-x) data-[swipe-direction=right]:[--drawer-closed-transform:translate3d(100%,0,0)] data-[swipe-direction=right]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:-mt-(--drawer-bleed-y) data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b data-[swipe-direction=up]:pt-(--drawer-bleed-y) data-[swipe-direction=up]:[--drawer-closed-transform:translate3d(0,-100%,0)] data-[swipe-direction=up]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:rounded-e-xl data-[vaul-drawer-direction=left]:border-e data-[vaul-drawer-direction=right]:rounded-s-xl data-[vaul-drawer-direction=right]:border-s data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[swipe-direction=left]:sm:w-[calc(24rem+var(--drawer-bleed-x))] data-[swipe-direction=right]:sm:w-[calc(24rem+var(--drawer-bleed-x))]",
+            className
+          )}
+          {...props}
+        >
+          <div className="mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[swipe-direction=down]/drawer-content:block" />
+          <DrawerPrimitive.Content className="flex min-h-0 flex-1 flex-col">
+            {children}
+          </DrawerPrimitive.Content>
+        </DrawerPrimitive.Popup>
+      </DrawerPrimitive.Viewport>
     </DrawerPortal>
   )
 }
@@ -73,7 +72,7 @@ function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="drawer-header"
       className={cn(
-        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-start",
+        "flex flex-col gap-0.5 p-4 group-data-[swipe-direction=down]/drawer-content:text-center group-data-[swipe-direction=up]/drawer-content:text-center md:gap-0.5 md:text-start",
         className
       )}
       {...props}
@@ -91,10 +90,7 @@ function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
   )
 }
 
-function DrawerTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {
   return (
     <DrawerPrimitive.Title
       data-slot="drawer-title"
@@ -110,7 +106,7 @@ function DrawerTitle({
 function DrawerDescription({
   className,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+}: DrawerPrimitive.Description.Props) {
   return (
     <DrawerPrimitive.Description
       data-slot="drawer-description"
diff --git a/apps/v4/styles/base-nova/ui/drawer.tsx b/apps/v4/styles/base-nova/ui/drawer.tsx
index ee11ffcbe71..f26469cf4a3 100644
--- a/apps/v4/styles/base-nova/ui/drawer.tsx
+++ b/apps/v4/styles/base-nova/ui/drawer.tsx
@@ -1,43 +1,35 @@
 "use client"
 
 import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer"
 
 import { cn } from "@/lib/utils"
 
-function Drawer({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+function Drawer({ ...props }: DrawerPrimitive.Root.Props) {
   return <DrawerPrimitive.Root data-slot="drawer" {...props} />
 }
 
-function DrawerTrigger({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
   return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
 }
 
-function DrawerPortal({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
   return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
 }
 
-function DrawerClose({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+function DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {
   return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
 }
 
 function DrawerOverlay({
   className,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+}: DrawerPrimitive.Backdrop.Props) {
   return (
-    <DrawerPrimitive.Overlay
+    <DrawerPrimitive.Backdrop
       data-slot="drawer-overlay"
       className={cn(
-        "fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 z-50 bg-black/10 opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs",
         className
       )}
       {...props}
@@ -49,21 +41,28 @@ function DrawerContent({
   className,
   children,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+}: DrawerPrimitive.Popup.Props) {
   return (
     <DrawerPortal data-slot="drawer-portal">
       <DrawerOverlay />
-      <DrawerPrimitive.Content
-        data-slot="drawer-content"
-        className={cn(
-          "group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
-          className
-        )}
-        {...props}
+      <DrawerPrimitive.Viewport
+        data-slot="drawer-viewport"
+        className="pointer-events-none fixed inset-0 z-50"
       >
-        <div className="mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
-        {children}
-      </DrawerPrimitive.Content>
+        <DrawerPrimitive.Popup
+          data-slot="drawer-content"
+          className={cn(
+            "group/drawer-content pointer-events-auto fixed z-50 flex h-auto transform-(--drawer-transform) flex-col overflow-hidden bg-popover text-sm text-popover-foreground transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--drawer-bleed-x:3rem] [--drawer-bleed-y:3rem] data-ending-style:transform-(--drawer-closed-transform) data-starting-style:transform-(--drawer-closed-transform) data-swiping:duration-0 data-swiping:select-none data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:-mb-(--drawer-bleed-y) data-[swipe-direction=down]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=down]:pb-(--drawer-bleed-y) data-[swipe-direction=down]:[--drawer-closed-transform:translate3d(0,100%,0)] data-[swipe-direction=down]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:-ml-(--drawer-bleed-x) data-[swipe-direction=left]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=left]:pl-(--drawer-bleed-x) data-[swipe-direction=left]:[--drawer-closed-transform:translate3d(-100%,0,0)] data-[swipe-direction=left]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:-mr-(--drawer-bleed-x) data-[swipe-direction=right]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=right]:pr-(--drawer-bleed-x) data-[swipe-direction=right]:[--drawer-closed-transform:translate3d(100%,0,0)] data-[swipe-direction=right]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:-mt-(--drawer-bleed-y) data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b data-[swipe-direction=up]:pt-(--drawer-bleed-y) data-[swipe-direction=up]:[--drawer-closed-transform:translate3d(0,-100%,0)] data-[swipe-direction=up]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[swipe-direction=left]:sm:w-[calc(24rem+var(--drawer-bleed-x))] data-[swipe-direction=right]:sm:w-[calc(24rem+var(--drawer-bleed-x))]",
+            className
+          )}
+          {...props}
+        >
+          <div className="mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[swipe-direction=down]/drawer-content:block" />
+          <DrawerPrimitive.Content className="flex min-h-0 flex-1 flex-col">
+            {children}
+          </DrawerPrimitive.Content>
+        </DrawerPrimitive.Popup>
+      </DrawerPrimitive.Viewport>
     </DrawerPortal>
   )
 }
@@ -73,7 +72,7 @@ function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="drawer-header"
       className={cn(
-        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left",
+        "flex flex-col gap-0.5 p-4 group-data-[swipe-direction=down]/drawer-content:text-center group-data-[swipe-direction=up]/drawer-content:text-center md:gap-0.5 md:text-left",
         className
       )}
       {...props}
@@ -91,10 +90,7 @@ function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
   )
 }
 
-function DrawerTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {
   return (
     <DrawerPrimitive.Title
       data-slot="drawer-title"
@@ -110,7 +106,7 @@ function DrawerTitle({
 function DrawerDescription({
   className,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+}: DrawerPrimitive.Description.Props) {
   return (
     <DrawerPrimitive.Description
       data-slot="drawer-description"
diff --git a/apps/v4/styles/base-vega/ui/drawer.tsx b/apps/v4/styles/base-vega/ui/drawer.tsx
index 316326dd79b..496cf0c8193 100644
--- a/apps/v4/styles/base-vega/ui/drawer.tsx
+++ b/apps/v4/styles/base-vega/ui/drawer.tsx
@@ -1,43 +1,35 @@
 "use client"
 
 import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer"
 
 import { cn } from "@/lib/utils"
 
-function Drawer({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+function Drawer({ ...props }: DrawerPrimitive.Root.Props) {
   return <DrawerPrimitive.Root data-slot="drawer" {...props} />
 }
 
-function DrawerTrigger({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
   return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
 }
 
-function DrawerPortal({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
   return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
 }
 
-function DrawerClose({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+function DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {
   return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
 }
 
 function DrawerOverlay({
   className,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+}: DrawerPrimitive.Backdrop.Props) {
   return (
-    <DrawerPrimitive.Overlay
+    <DrawerPrimitive.Backdrop
       data-slot="drawer-overlay"
       className={cn(
-        "fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 z-50 bg-black/10 opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs",
         className
       )}
       {...props}
@@ -49,21 +41,28 @@ function DrawerContent({
   className,
   children,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+}: DrawerPrimitive.Popup.Props) {
   return (
     <DrawerPortal data-slot="drawer-portal">
       <DrawerOverlay />
-      <DrawerPrimitive.Content
-        data-slot="drawer-content"
-        className={cn(
-          "group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
-          className
-        )}
-        {...props}
+      <DrawerPrimitive.Viewport
+        data-slot="drawer-viewport"
+        className="pointer-events-none fixed inset-0 z-50"
       >
-        <div className="mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
-        {children}
-      </DrawerPrimitive.Content>
+        <DrawerPrimitive.Popup
+          data-slot="drawer-content"
+          className={cn(
+            "group/drawer-content pointer-events-auto fixed z-50 flex h-auto transform-(--drawer-transform) flex-col overflow-hidden bg-popover text-sm text-popover-foreground transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--drawer-bleed-x:3rem] [--drawer-bleed-y:3rem] data-ending-style:transform-(--drawer-closed-transform) data-starting-style:transform-(--drawer-closed-transform) data-swiping:duration-0 data-swiping:select-none data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:-mb-(--drawer-bleed-y) data-[swipe-direction=down]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=down]:pb-(--drawer-bleed-y) data-[swipe-direction=down]:[--drawer-closed-transform:translate3d(0,100%,0)] data-[swipe-direction=down]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:-ml-(--drawer-bleed-x) data-[swipe-direction=left]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=left]:pl-(--drawer-bleed-x) data-[swipe-direction=left]:[--drawer-closed-transform:translate3d(-100%,0,0)] data-[swipe-direction=left]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:-mr-(--drawer-bleed-x) data-[swipe-direction=right]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=right]:pr-(--drawer-bleed-x) data-[swipe-direction=right]:[--drawer-closed-transform:translate3d(100%,0,0)] data-[swipe-direction=right]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:-mt-(--drawer-bleed-y) data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b data-[swipe-direction=up]:pt-(--drawer-bleed-y) data-[swipe-direction=up]:[--drawer-closed-transform:translate3d(0,-100%,0)] data-[swipe-direction=up]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[swipe-direction=left]:sm:w-[calc(24rem+var(--drawer-bleed-x))] data-[swipe-direction=right]:sm:w-[calc(24rem+var(--drawer-bleed-x))]",
+            className
+          )}
+          {...props}
+        >
+          <div className="mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full bg-muted group-data-[swipe-direction=down]/drawer-content:block" />
+          <DrawerPrimitive.Content className="flex min-h-0 flex-1 flex-col">
+            {children}
+          </DrawerPrimitive.Content>
+        </DrawerPrimitive.Popup>
+      </DrawerPrimitive.Viewport>
     </DrawerPortal>
   )
 }
@@ -73,7 +72,7 @@ function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="drawer-header"
       className={cn(
-        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
+        "flex flex-col gap-0.5 p-4 group-data-[swipe-direction=down]/drawer-content:text-center group-data-[swipe-direction=up]/drawer-content:text-center md:gap-1.5 md:text-left",
         className
       )}
       {...props}
@@ -91,10 +90,7 @@ function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
   )
 }
 
-function DrawerTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {
   return (
     <DrawerPrimitive.Title
       data-slot="drawer-title"
@@ -107,7 +103,7 @@ function DrawerTitle({
 function DrawerDescription({
   className,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+}: DrawerPrimitive.Description.Props) {
   return (
     <DrawerPrimitive.Description
       data-slot="drawer-description"
diff --git a/apps/v4/styles/radix-lyra/ui/drawer.tsx b/apps/v4/styles/radix-lyra/ui/drawer.tsx
index b57096f9fa0..5726ae3d2d7 100644
--- a/apps/v4/styles/radix-lyra/ui/drawer.tsx
+++ b/apps/v4/styles/radix-lyra/ui/drawer.tsx
@@ -56,7 +56,7 @@ function DrawerContent({
       <DrawerPrimitive.Content
         data-slot="drawer-content"
         className={cn(
-          "group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-xs/relaxed text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-none data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-none data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-none data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-none data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-xs/relaxed text-popover-foreground data-[swipe-direction=down]:rounded-none data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-none data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-none data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-none data-[swipe-direction=up]:border-b data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-none data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-none data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-none data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-none data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
           className
         )}
         {...props}
diff --git a/apps/v4/styles/radix-nova/ui-rtl/drawer.tsx b/apps/v4/styles/radix-nova/ui-rtl/drawer.tsx
index 7a94067868b..0f12f280d19 100644
--- a/apps/v4/styles/radix-nova/ui-rtl/drawer.tsx
+++ b/apps/v4/styles/radix-nova/ui-rtl/drawer.tsx
@@ -56,7 +56,7 @@ function DrawerContent({
       <DrawerPrimitive.Content
         data-slot="drawer-content"
         className={cn(
-          "group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:start-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-e-xl data-[vaul-drawer-direction=left]:border-e data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:end-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-s-xl data-[vaul-drawer-direction=right]:border-s data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-e-xl data-[swipe-direction=left]:border-e data-[swipe-direction=right]:rounded-s-xl data-[swipe-direction=right]:border-s data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:start-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-e-xl data-[vaul-drawer-direction=left]:border-e data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:end-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-s-xl data-[vaul-drawer-direction=right]:border-s data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
           className
         )}
         {...props}
diff --git a/apps/v4/styles/radix-nova/ui/drawer.tsx b/apps/v4/styles/radix-nova/ui/drawer.tsx
index ee11ffcbe71..da6fbcc1082 100644
--- a/apps/v4/styles/radix-nova/ui/drawer.tsx
+++ b/apps/v4/styles/radix-nova/ui/drawer.tsx
@@ -56,7 +56,7 @@ function DrawerContent({
       <DrawerPrimitive.Content
         data-slot="drawer-content"
         className={cn(
-          "group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
           className
         )}
         {...props}
diff --git a/apps/v4/styles/radix-vega/ui/drawer.tsx b/apps/v4/styles/radix-vega/ui/drawer.tsx
index 316326dd79b..39d519b31a3 100644
--- a/apps/v4/styles/radix-vega/ui/drawer.tsx
+++ b/apps/v4/styles/radix-vega/ui/drawer.tsx
@@ -56,7 +56,7 @@ function DrawerContent({
       <DrawerPrimitive.Content
         data-slot="drawer-content"
         className={cn(
-          "group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
           className
         )}
         {...props}