diff --git a/apps/v4/public/r/styles/base-lyra/button-group-demo.json b/apps/v4/public/r/styles/base-lyra/button-group-demo.json
index 1fa5781f7..f076632da 100644
--- a/apps/v4/public/r/styles/base-lyra/button-group-demo.json
+++ b/apps/v4/public/r/styles/base-lyra/button-group-demo.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-lyra/demo/button-group-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArchiveIcon,\n  ArrowLeftIcon,\n  CalendarPlusIcon,\n  ClockIcon,\n  ListFilterIcon,\n  MailCheckIcon,\n  MoreHorizontalIcon,\n  TagIcon,\n  Trash2Icon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\n\nexport default function ButtonGroupDemo() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <ButtonGroup>\n      <ButtonGroup className=\"hidden sm:flex\">\n        <Button variant=\"outline\" size=\"icon\" aria-label=\"Go Back\">\n          <ArrowLeftIcon />\n        </Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\">Archive</Button>\n        <Button variant=\"outline\">Report</Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\">Snooze</Button>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" size=\"icon\" aria-label=\"More Options\" />}\n          >\n            <MoreHorizontalIcon />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" className=\"w-52\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <MailCheckIcon />\n                Mark as Read\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <ArchiveIcon />\n                Archive\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <ClockIcon />\n                Snooze\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CalendarPlusIcon />\n                Add to Calendar\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <ListFilterIcon />\n                Add to List\n              </DropdownMenuItem>\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>\n                  <TagIcon />\n                  Label As...\n                </DropdownMenuSubTrigger>\n                <DropdownMenuSubContent>\n                  <DropdownMenuRadioGroup\n                    value={label}\n                    onValueChange={setLabel}\n                  >\n                    <DropdownMenuRadioItem value=\"personal\">\n                      Personal\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"work\">\n                      Work\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"other\">\n                      Other\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuSub>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem variant=\"destructive\">\n                <Trash2Icon />\n                Trash\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </ButtonGroup>\n    </ButtonGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArchiveIcon,\n  ArrowLeftIcon,\n  CalendarPlusIcon,\n  ClockIcon,\n  ListFilterIcon,\n  MailCheckIcon,\n  MoreHorizontalIcon,\n  TagIcon,\n  Trash2Icon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\n\nexport default function ButtonGroupDemo() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <ButtonGroup>\n      <ButtonGroup className=\"hidden sm:flex\">\n        <Button variant=\"outline\" size=\"icon\" aria-label=\"Go Back\">\n          <ArrowLeftIcon />\n        </Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\">Archive</Button>\n        <Button variant=\"outline\">Report</Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\">Snooze</Button>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"outline\" size=\"icon\" aria-label=\"More Options\" />\n            }\n          >\n            <MoreHorizontalIcon />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" className=\"w-52\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <MailCheckIcon />\n                Mark as Read\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <ArchiveIcon />\n                Archive\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <ClockIcon />\n                Snooze\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CalendarPlusIcon />\n                Add to Calendar\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <ListFilterIcon />\n                Add to List\n              </DropdownMenuItem>\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>\n                  <TagIcon />\n                  Label As...\n                </DropdownMenuSubTrigger>\n                <DropdownMenuSubContent>\n                  <DropdownMenuRadioGroup\n                    value={label}\n                    onValueChange={setLabel}\n                  >\n                    <DropdownMenuRadioItem value=\"personal\">\n                      Personal\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"work\">\n                      Work\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"other\">\n                      Other\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuSub>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem variant=\"destructive\">\n                <Trash2Icon />\n                Trash\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </ButtonGroup>\n    </ButtonGroup>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/button-group-dropdown.json b/apps/v4/public/r/styles/base-lyra/button-group-dropdown.json
index 594b384b5..cc5d6c3c1 100644
--- a/apps/v4/public/r/styles/base-lyra/button-group-dropdown.json
+++ b/apps/v4/public/r/styles/base-lyra/button-group-dropdown.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-lyra/demo/button-group-dropdown.tsx",
-      "content": "\"use client\"\n\nimport {\n  AlertTriangleIcon,\n  CheckIcon,\n  ChevronDownIcon,\n  CopyIcon,\n  ShareIcon,\n  TrashIcon,\n  UserRoundXIcon,\n  VolumeOffIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\n\nexport default function ButtonGroupDropdown() {\n  return (\n    <ButtonGroup>\n      <Button variant=\"outline\">Follow</Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger render={<Button variant=\"outline\" className=\"!pl-2\" />}>\n          <ChevronDownIcon />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"[--radius:1rem]\">\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <VolumeOffIcon />\n              Mute Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CheckIcon />\n              Mark as Read\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <AlertTriangleIcon />\n              Report Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <UserRoundXIcon />\n              Block User\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <ShareIcon />\n              Share Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CopyIcon />\n              Copy Conversation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <TrashIcon />\n              Delete Conversation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </ButtonGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  AlertTriangleIcon,\n  CheckIcon,\n  ChevronDownIcon,\n  CopyIcon,\n  ShareIcon,\n  TrashIcon,\n  UserRoundXIcon,\n  VolumeOffIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\n\nexport default function ButtonGroupDropdown() {\n  return (\n    <ButtonGroup>\n      <Button variant=\"outline\">Follow</Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"!pl-2\" />}\n        >\n          <ChevronDownIcon />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"[--radius:1rem]\">\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <VolumeOffIcon />\n              Mute Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CheckIcon />\n              Mark as Read\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <AlertTriangleIcon />\n              Report Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <UserRoundXIcon />\n              Block User\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <ShareIcon />\n              Share Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CopyIcon />\n              Copy Conversation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <TrashIcon />\n              Delete Conversation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </ButtonGroup>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/button-group-popover.json b/apps/v4/public/r/styles/base-lyra/button-group-popover.json
index 7bd8023fa..8713f04d7 100644
--- a/apps/v4/public/r/styles/base-lyra/button-group-popover.json
+++ b/apps/v4/public/r/styles/base-lyra/button-group-popover.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-lyra/demo/button-group-popover.tsx",
-      "content": "import { BotIcon, ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-lyra/ui/popover\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\n\nexport default function ButtonGroupPopover() {\n  return (\n    <ButtonGroup>\n      <Button variant=\"outline\">\n        <BotIcon /> Copilot\n      </Button>\n      <Popover>\n        <PopoverTrigger\n          render={<Button variant=\"outline\" size=\"icon\" aria-label=\"Open Popover\" />}\n        >\n          <ChevronDownIcon />\n        </PopoverTrigger>\n        <PopoverContent align=\"end\" className=\"rounded-xl p-0 text-sm\">\n          <div className=\"px-4 py-3\">\n            <div className=\"text-sm font-medium\">Agent Tasks</div>\n          </div>\n          <Separator />\n          <div className=\"p-4 text-sm *:[p:not(:last-child)]:mb-2\">\n            <Textarea\n              placeholder=\"Describe your task in natural language.\"\n              className=\"mb-4 resize-none\"\n            />\n            <p className=\"font-medium\">Start a new task with Copilot</p>\n            <p className=\"text-muted-foreground\">\n              Describe your task in natural language. Copilot will work in the\n              background and open a pull request for your review.\n            </p>\n          </div>\n        </PopoverContent>\n      </Popover>\n    </ButtonGroup>\n  )\n}\n",
+      "content": "import { BotIcon, ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-lyra/ui/popover\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\n\nexport default function ButtonGroupPopover() {\n  return (\n    <ButtonGroup>\n      <Button variant=\"outline\">\n        <BotIcon /> Copilot\n      </Button>\n      <Popover>\n        <PopoverTrigger\n          render={\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Open Popover\" />\n          }\n        >\n          <ChevronDownIcon />\n        </PopoverTrigger>\n        <PopoverContent align=\"end\" className=\"rounded-xl p-0 text-sm\">\n          <div className=\"px-4 py-3\">\n            <div className=\"text-sm font-medium\">Agent Tasks</div>\n          </div>\n          <Separator />\n          <div className=\"p-4 text-sm *:[p:not(:last-child)]:mb-2\">\n            <Textarea\n              placeholder=\"Describe your task in natural language.\"\n              className=\"mb-4 resize-none\"\n            />\n            <p className=\"font-medium\">Start a new task with Copilot</p>\n            <p className=\"text-muted-foreground\">\n              Describe your task in natural language. Copilot will work in the\n              background and open a pull request for your review.\n            </p>\n          </div>\n        </PopoverContent>\n      </Popover>\n    </ButtonGroup>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/combobox-popover.json b/apps/v4/public/r/styles/base-lyra/combobox-popover.json
index afdfa04aa..1a78a7d79 100644
--- a/apps/v4/public/r/styles/base-lyra/combobox-popover.json
+++ b/apps/v4/public/r/styles/base-lyra/combobox-popover.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-lyra/demo/combobox-popover.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/base-lyra/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-lyra/ui/popover\"\n\ntype Status = {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: \"backlog\",\n    label: \"Backlog\",\n  },\n  {\n    value: \"todo\",\n    label: \"Todo\",\n  },\n  {\n    value: \"in progress\",\n    label: \"In Progress\",\n  },\n  {\n    value: \"done\",\n    label: \"Done\",\n  },\n  {\n    value: \"canceled\",\n    label: \"Canceled\",\n  },\n]\n\nexport default function ComboboxPopover() {\n  const [open, setOpen] = React.useState(false)\n  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n    null\n  )\n\n  return (\n    <div className=\"flex items-center space-x-4\">\n      <p className=\"text-muted-foreground text-sm\">Status</p>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger\n          render={<Button variant=\"outline\" className=\"w-[150px] justify-start\" />}\n        >\n          {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n        </PopoverTrigger>\n        <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n          <Command>\n            <CommandInput placeholder=\"Change status...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup>\n                {statuses.map((status) => (\n                  <CommandItem\n                    key={status.value}\n                    value={status.value}\n                    onSelect={(value) => {\n                      setSelectedStatus(\n                        statuses.find((priority) => priority.value === value) ||\n                          null\n                      )\n                      setOpen(false)\n                    }}\n                  >\n                    {status.label}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/base-lyra/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-lyra/ui/popover\"\n\ntype Status = {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: \"backlog\",\n    label: \"Backlog\",\n  },\n  {\n    value: \"todo\",\n    label: \"Todo\",\n  },\n  {\n    value: \"in progress\",\n    label: \"In Progress\",\n  },\n  {\n    value: \"done\",\n    label: \"Done\",\n  },\n  {\n    value: \"canceled\",\n    label: \"Canceled\",\n  },\n]\n\nexport default function ComboboxPopover() {\n  const [open, setOpen] = React.useState(false)\n  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n    null\n  )\n\n  return (\n    <div className=\"flex items-center space-x-4\">\n      <p className=\"text-muted-foreground text-sm\">Status</p>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger\n          render={\n            <Button variant=\"outline\" className=\"w-[150px] justify-start\" />\n          }\n        >\n          {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n        </PopoverTrigger>\n        <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n          <Command>\n            <CommandInput placeholder=\"Change status...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup>\n                {statuses.map((status) => (\n                  <CommandItem\n                    key={status.value}\n                    value={status.value}\n                    onSelect={(value) => {\n                      setSelectedStatus(\n                        statuses.find((priority) => priority.value === value) ||\n                          null\n                      )\n                      setOpen(false)\n                    }}\n                  >\n                    {status.label}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/dialog-demo.json b/apps/v4/public/r/styles/base-lyra/dialog-demo.json
index b08f91a93..5a1a56265 100644
--- a/apps/v4/public/r/styles/base-lyra/dialog-demo.json
+++ b/apps/v4/public/r/styles/base-lyra/dialog-demo.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-lyra/demo/dialog-demo.tsx",
-      "content": "import { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-lyra/ui/dialog\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\n\nexport function DialogDemo() {\n  return (\n    <Dialog>\n      <form>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"grid gap-4\">\n            <div className=\"grid gap-3\">\n              <Label htmlFor=\"name-1\">Name</Label>\n              <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n            </div>\n            <div className=\"grid gap-3\">\n              <Label htmlFor=\"username-1\">Username</Label>\n              <Input id=\"username-1\" name=\"username\" defaultValue=\"@peduarte\" />\n            </div>\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>Cancel</DialogClose>\n            <Button type=\"submit\">Save changes</Button>\n          </DialogFooter>\n        </DialogContent>\n      </form>\n    </Dialog>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-lyra/ui/dialog\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\n\nexport function DialogDemo() {\n  return (\n    <Dialog>\n      <form>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"grid gap-4\">\n            <div className=\"grid gap-3\">\n              <Label htmlFor=\"name-1\">Name</Label>\n              <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n            </div>\n            <div className=\"grid gap-3\">\n              <Label htmlFor=\"username-1\">Username</Label>\n              <Input id=\"username-1\" name=\"username\" defaultValue=\"@peduarte\" />\n            </div>\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button type=\"submit\">Save changes</Button>\n          </DialogFooter>\n        </DialogContent>\n      </form>\n    </Dialog>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/drawer-demo.json b/apps/v4/public/r/styles/base-lyra/drawer-demo.json
index 6f0924a65..f4965b51c 100644
--- a/apps/v4/public/r/styles/base-lyra/drawer-demo.json
+++ b/apps/v4/public/r/styles/base-lyra/drawer-demo.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-lyra/demo/drawer-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/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\nconst data = [\n  {\n    goal: 400,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 239,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 349,\n  },\n]\n\nexport function DrawerDemo() {\n  const [goal, setGoal] = React.useState(350)\n\n  function onClick(adjustment: number) {\n    setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n  }\n\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Open Drawer</Button>\n        Open Drawer\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mx-auto w-full max-w-sm\">\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"p-4 pb-0\">\n            <div className=\"flex items-center justify-center space-x-2\">\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(-10)}\n                disabled={goal <= 200}\n              >\n                <Minus />\n                <span className=\"sr-only\">Decrease</span>\n              </Button>\n              <div className=\"flex-1 text-center\">\n                <div className=\"text-7xl font-bold tracking-tighter\">\n                  {goal}\n                </div>\n                <div className=\"text-muted-foreground text-[0.70rem] uppercase\">\n                  Calories/day\n                </div>\n              </div>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(10)}\n                disabled={goal >= 400}\n              >\n                <Plus />\n                <span className=\"sr-only\">Increase</span>\n              </Button>\n            </div>\n            <div className=\"mt-3 h-[120px]\">\n              <ResponsiveContainer width=\"100%\" height=\"100%\">\n                <BarChart data={data}>\n                  <Bar\n                    dataKey=\"goal\"\n                    style={\n                      {\n                        fill: \"hsl(var(--foreground))\",\n                        opacity: 0.9,\n                      } as React.CSSProperties\n                    }\n                  />\n                </BarChart>\n              </ResponsiveContainer>\n            </div>\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n              Cancel\n            </DrawerClose>\n          </DrawerFooter>\n        </div>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/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\nconst data = [\n  {\n    goal: 400,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 239,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 349,\n  },\n]\n\nexport function DrawerDemo() {\n  const [goal, setGoal] = React.useState(350)\n\n  function onClick(adjustment: number) {\n    setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n  }\n\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Open Drawer</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mx-auto w-full max-w-sm\">\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"p-4 pb-0\">\n            <div className=\"flex items-center justify-center space-x-2\">\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(-10)}\n                disabled={goal <= 200}\n              >\n                <Minus />\n                <span className=\"sr-only\">Decrease</span>\n              </Button>\n              <div className=\"flex-1 text-center\">\n                <div className=\"text-7xl font-bold tracking-tighter\">\n                  {goal}\n                </div>\n                <div className=\"text-muted-foreground text-[0.70rem] uppercase\">\n                  Calories/day\n                </div>\n              </div>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(10)}\n                disabled={goal >= 400}\n              >\n                <Plus />\n                <span className=\"sr-only\">Increase</span>\n              </Button>\n            </div>\n            <div className=\"mt-3 h-[120px]\">\n              <ResponsiveContainer width=\"100%\" height=\"100%\">\n                <BarChart data={data}>\n                  <Bar\n                    dataKey=\"goal\"\n                    style={\n                      {\n                        fill: \"hsl(var(--foreground))\",\n                        opacity: 0.9,\n                      } as React.CSSProperties\n                    }\n                  />\n                </BarChart>\n              </ResponsiveContainer>\n            </div>\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </div>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/drawer-dialog.json b/apps/v4/public/r/styles/base-lyra/drawer-dialog.json
index d9d1d2c77..5b5827e45 100644
--- a/apps/v4/public/r/styles/base-lyra/drawer-dialog.json
+++ b/apps/v4/public/r/styles/base-lyra/drawer-dialog.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-lyra/demo/drawer-dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-lyra/ui/dialog\"\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 { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\n\nexport function DrawerDialogDemo() {\n  const [open, setOpen] = React.useState(false)\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n  if (isDesktop) {\n    return (\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Edit Profile\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <ProfileForm />\n        </DialogContent>\n      </Dialog>\n    )\n  }\n\n  return (\n    <Drawer open={open} onOpenChange={setOpen}>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Edit Profile</Button>\n        Edit Profile\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"text-left\">\n          <DrawerTitle>Edit profile</DrawerTitle>\n          <DrawerDescription>\n            Make changes to your profile here. Click save when you&apos;re done.\n          </DrawerDescription>\n        </DrawerHeader>\n        <ProfileForm className=\"px-4\" />\n        <DrawerFooter className=\"pt-2\">\n          <DrawerClose asChild>\n            <Button variant=\"outline\">Cancel</Button>\n            Cancel\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n\nfunction ProfileForm({ className }: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"grid items-start gap-6\", className)}>\n      <div className=\"grid gap-3\">\n        <Label htmlFor=\"email\">Email</Label>\n        <Input type=\"email\" id=\"email\" defaultValue=\"shadcn@example.com\" />\n      </div>\n      <div className=\"grid gap-3\">\n        <Label htmlFor=\"username\">Username</Label>\n        <Input id=\"username\" defaultValue=\"@shadcn\" />\n      </div>\n      <Button type=\"submit\">Save changes</Button>\n    </form>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-lyra/ui/dialog\"\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 { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\n\nexport function DrawerDialogDemo() {\n  const [open, setOpen] = React.useState(false)\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n  if (isDesktop) {\n    return (\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Edit Profile\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <ProfileForm />\n        </DialogContent>\n      </Dialog>\n    )\n  }\n\n  return (\n    <Drawer open={open} onOpenChange={setOpen}>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Edit Profile</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"text-left\">\n          <DrawerTitle>Edit profile</DrawerTitle>\n          <DrawerDescription>\n            Make changes to your profile here. Click save when you&apos;re done.\n          </DrawerDescription>\n        </DrawerHeader>\n        <ProfileForm className=\"px-4\" />\n        <DrawerFooter className=\"pt-2\">\n          <DrawerClose asChild>\n            <Button variant=\"outline\">Cancel</Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n\nfunction ProfileForm({ className }: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"grid items-start gap-6\", className)}>\n      <div className=\"grid gap-3\">\n        <Label htmlFor=\"email\">Email</Label>\n        <Input type=\"email\" id=\"email\" defaultValue=\"shadcn@example.com\" />\n      </div>\n      <div className=\"grid gap-3\">\n        <Label htmlFor=\"username\">Username</Label>\n        <Input id=\"username\" defaultValue=\"@shadcn\" />\n      </div>\n      <Button type=\"submit\">Save changes</Button>\n    </form>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/dropdown-menu-dialog.json b/apps/v4/public/r/styles/base-lyra/dropdown-menu-dialog.json
index 27e5a76c1..4537591bd 100644
--- a/apps/v4/public/r/styles/base-lyra/dropdown-menu-dialog.json
+++ b/apps/v4/public/r/styles/base-lyra/dropdown-menu-dialog.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-lyra/demo/dropdown-menu-dialog.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { MoreHorizontalIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/base-lyra/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\n\nexport function DropdownMenuDialog() {\n  const [showNewDialog, setShowNewDialog] = useState(false)\n  const [showShareDialog, setShowShareDialog] = useState(false)\n\n  return (\n    <>\n      <DropdownMenu modal={false}>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" aria-label=\"Open menu\" size=\"icon-sm\" />}\n        >\n          <MoreHorizontalIcon />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-40\" align=\"end\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File Actions</DropdownMenuLabel>\n            <DropdownMenuItem onSelect={() => setShowNewDialog(true)}>\n              New File...\n            </DropdownMenuItem>\n            <DropdownMenuItem onSelect={() => setShowShareDialog(true)}>\n              Share...\n            </DropdownMenuItem>\n            <DropdownMenuItem disabled>Download</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n      <Dialog open={showNewDialog} onOpenChange={setShowNewDialog}>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Create New File</DialogTitle>\n            <DialogDescription>\n              Provide a name for your new file. Click create when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <FieldGroup className=\"pb-3\">\n            <Field>\n              <FieldLabel htmlFor=\"filename\">File Name</FieldLabel>\n              <Input id=\"filename\" name=\"filename\" placeholder=\"document.txt\" />\n            </Field>\n          </FieldGroup>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button type=\"submit\">Create</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n      <Dialog open={showShareDialog} onOpenChange={setShowShareDialog}>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Share File</DialogTitle>\n            <DialogDescription>\n              Anyone with the link will be able to view this file.\n            </DialogDescription>\n          </DialogHeader>\n          <FieldGroup className=\"py-3\">\n            <Field>\n              <Label htmlFor=\"email\">Email Address</Label>\n              <Input\n                id=\"email\"\n                name=\"email\"\n                type=\"email\"\n                placeholder=\"shadcn@vercel.com\"\n                autoComplete=\"off\"\n              />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"message\">Message (Optional)</FieldLabel>\n              <Textarea\n                id=\"message\"\n                name=\"message\"\n                placeholder=\"Check out this file\"\n              />\n            </Field>\n          </FieldGroup>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button type=\"submit\">Send Invite</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { MoreHorizontalIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/base-lyra/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\n\nexport function DropdownMenuDialog() {\n  const [showNewDialog, setShowNewDialog] = useState(false)\n  const [showShareDialog, setShowShareDialog] = useState(false)\n\n  return (\n    <>\n      <DropdownMenu modal={false}>\n        <DropdownMenuTrigger\n          render={\n            <Button variant=\"outline\" aria-label=\"Open menu\" size=\"icon-sm\" />\n          }\n        >\n          <MoreHorizontalIcon />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-40\" align=\"end\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File Actions</DropdownMenuLabel>\n            <DropdownMenuItem onSelect={() => setShowNewDialog(true)}>\n              New File...\n            </DropdownMenuItem>\n            <DropdownMenuItem onSelect={() => setShowShareDialog(true)}>\n              Share...\n            </DropdownMenuItem>\n            <DropdownMenuItem disabled>Download</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n      <Dialog open={showNewDialog} onOpenChange={setShowNewDialog}>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Create New File</DialogTitle>\n            <DialogDescription>\n              Provide a name for your new file. Click create when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <FieldGroup className=\"pb-3\">\n            <Field>\n              <FieldLabel htmlFor=\"filename\">File Name</FieldLabel>\n              <Input id=\"filename\" name=\"filename\" placeholder=\"document.txt\" />\n            </Field>\n          </FieldGroup>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button type=\"submit\">Create</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n      <Dialog open={showShareDialog} onOpenChange={setShowShareDialog}>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Share File</DialogTitle>\n            <DialogDescription>\n              Anyone with the link will be able to view this file.\n            </DialogDescription>\n          </DialogHeader>\n          <FieldGroup className=\"py-3\">\n            <Field>\n              <Label htmlFor=\"email\">Email Address</Label>\n              <Input\n                id=\"email\"\n                name=\"email\"\n                type=\"email\"\n                placeholder=\"shadcn@vercel.com\"\n                autoComplete=\"off\"\n              />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"message\">Message (Optional)</FieldLabel>\n              <Textarea\n                id=\"message\"\n                name=\"message\"\n                placeholder=\"Check out this file\"\n              />\n            </Field>\n          </FieldGroup>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button type=\"submit\">Send Invite</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/input-group-demo.json b/apps/v4/public/r/styles/base-lyra/input-group-demo.json
index b1a214530..56f4edbdb 100644
--- a/apps/v4/public/r/styles/base-lyra/input-group-demo.json
+++ b/apps/v4/public/r/styles/base-lyra/input-group-demo.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-lyra/demo/input-group-demo.tsx",
-      "content": "import { IconCheck, IconInfoCircle, IconPlus } from \"@tabler/icons-react\"\nimport { ArrowUpIcon, Search } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-lyra/ui/tooltip\"\n\nexport default function InputGroupDemo() {\n  return (\n    <div className=\"grid w-full max-w-sm gap-6\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Search...\" />\n        <InputGroupAddon>\n          <Search />\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n        <InputGroupAddon>\n          <InputGroupText>https://</InputGroupText>\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger\n              render={<InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />}\n            >\n              <IconInfoCircle />\n            </TooltipTrigger>\n            <TooltipContent>This is content in a tooltip.</TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n        <InputGroupAddon align=\"block-end\">\n          <InputGroupButton\n            variant=\"outline\"\n            className=\"rounded-full\"\n            size=\"icon-xs\"\n          >\n            <IconPlus />\n          </InputGroupButton>\n          <DropdownMenu>\n            <DropdownMenuTrigger render={<InputGroupButton variant=\"ghost\" />}>\n              Auto\n            </DropdownMenuTrigger>\n            <DropdownMenuContent\n              side=\"top\"\n              align=\"start\"\n              className=\"[--radius:0.95rem]\"\n            >\n              <DropdownMenuGroup>\n                <DropdownMenuItem>Auto</DropdownMenuItem>\n                <DropdownMenuItem>Agent</DropdownMenuItem>\n                <DropdownMenuItem>Manual</DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n          <Separator orientation=\"vertical\" className=\"!h-4\" />\n          <InputGroupButton\n            variant=\"default\"\n            className=\"rounded-full\"\n            size=\"icon-xs\"\n            disabled\n          >\n            <ArrowUpIcon />\n            <span className=\"sr-only\">Send</span>\n          </InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"@shadcn\" />\n        <InputGroupAddon align=\"inline-end\">\n          <div className=\"bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full\">\n            <IconCheck className=\"size-3\" />\n          </div>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n",
+      "content": "import { IconCheck, IconInfoCircle, IconPlus } from \"@tabler/icons-react\"\nimport { ArrowUpIcon, Search } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-lyra/ui/tooltip\"\n\nexport default function InputGroupDemo() {\n  return (\n    <div className=\"grid w-full max-w-sm gap-6\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Search...\" />\n        <InputGroupAddon>\n          <Search />\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n        <InputGroupAddon>\n          <InputGroupText>https://</InputGroupText>\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n              }\n            >\n              <IconInfoCircle />\n            </TooltipTrigger>\n            <TooltipContent>This is content in a tooltip.</TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n        <InputGroupAddon align=\"block-end\">\n          <InputGroupButton\n            variant=\"outline\"\n            className=\"rounded-full\"\n            size=\"icon-xs\"\n          >\n            <IconPlus />\n          </InputGroupButton>\n          <DropdownMenu>\n            <DropdownMenuTrigger render={<InputGroupButton variant=\"ghost\" />}>\n              Auto\n            </DropdownMenuTrigger>\n            <DropdownMenuContent\n              side=\"top\"\n              align=\"start\"\n              className=\"[--radius:0.95rem]\"\n            >\n              <DropdownMenuGroup>\n                <DropdownMenuItem>Auto</DropdownMenuItem>\n                <DropdownMenuItem>Agent</DropdownMenuItem>\n                <DropdownMenuItem>Manual</DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n          <Separator orientation=\"vertical\" className=\"!h-4\" />\n          <InputGroupButton\n            variant=\"default\"\n            className=\"rounded-full\"\n            size=\"icon-xs\"\n            disabled\n          >\n            <ArrowUpIcon />\n            <span className=\"sr-only\">Send</span>\n          </InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"@shadcn\" />\n        <InputGroupAddon align=\"inline-end\">\n          <div className=\"bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full\">\n            <IconCheck className=\"size-3\" />\n          </div>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/input-group-tooltip.json b/apps/v4/public/r/styles/base-lyra/input-group-tooltip.json
index ab9086677..af0a4635d 100644
--- a/apps/v4/public/r/styles/base-lyra/input-group-tooltip.json
+++ b/apps/v4/public/r/styles/base-lyra/input-group-tooltip.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-lyra/demo/input-group-tooltip.tsx",
-      "content": "import { HelpCircle, InfoIcon } from \"lucide-react\"\n\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-lyra/ui/tooltip\"\n\nexport default function InputGroupTooltip() {\n  return (\n    <div className=\"grid w-full max-w-sm gap-4\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Enter password\" type=\"password\" />\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <InputGroupButton\n                  variant=\"ghost\"\n                  aria-label=\"Info\"\n                  size=\"icon-xs\"\n                />\n              }\n            >\n              <InfoIcon />\n            </TooltipTrigger>\n            <TooltipContent>\n              <p>Password must be at least 8 characters</p>\n            </TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Your email address\" />\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <InputGroupButton\n                  variant=\"ghost\"\n                  aria-label=\"Help\"\n                  size=\"icon-xs\"\n                />\n              }\n            >\n              <HelpCircle />\n            </TooltipTrigger>\n            <TooltipContent>\n              <p>We&apos;ll use this to send you notifications</p>\n            </TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Enter API key\" />\n        <Tooltip>\n          <TooltipTrigger render={<InputGroupAddon />}>\n            <InputGroupButton\n              variant=\"ghost\"\n              aria-label=\"Help\"\n              size=\"icon-xs\"\n            >\n              <HelpCircle />\n            </InputGroupButton>\n          </TooltipTrigger>\n          <TooltipContent side=\"left\">\n            <p>Click for help with API keys</p>\n          </TooltipContent>\n        </Tooltip>\n      </InputGroup>\n    </div>\n  )\n}\n",
+      "content": "import { HelpCircle, InfoIcon } from \"lucide-react\"\n\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-lyra/ui/tooltip\"\n\nexport default function InputGroupTooltip() {\n  return (\n    <div className=\"grid w-full max-w-sm gap-4\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Enter password\" type=\"password\" />\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <InputGroupButton\n                  variant=\"ghost\"\n                  aria-label=\"Info\"\n                  size=\"icon-xs\"\n                />\n              }\n            >\n              <InfoIcon />\n            </TooltipTrigger>\n            <TooltipContent>\n              <p>Password must be at least 8 characters</p>\n            </TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Your email address\" />\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <InputGroupButton\n                  variant=\"ghost\"\n                  aria-label=\"Help\"\n                  size=\"icon-xs\"\n                />\n              }\n            >\n              <HelpCircle />\n            </TooltipTrigger>\n            <TooltipContent>\n              <p>We&apos;ll use this to send you notifications</p>\n            </TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Enter API key\" />\n        <Tooltip>\n          <TooltipTrigger render={<InputGroupAddon />}>\n            <InputGroupButton variant=\"ghost\" aria-label=\"Help\" size=\"icon-xs\">\n              <HelpCircle />\n            </InputGroupButton>\n          </TooltipTrigger>\n          <TooltipContent side=\"left\">\n            <p>Click for help with API keys</p>\n          </TooltipContent>\n        </Tooltip>\n      </InputGroup>\n    </div>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/item-dropdown.json b/apps/v4/public/r/styles/base-lyra/item-dropdown.json
index d97bdc92e..29c23f130 100644
--- a/apps/v4/public/r/styles/base-lyra/item-dropdown.json
+++ b/apps/v4/public/r/styles/base-lyra/item-dropdown.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-lyra/demo/item-dropdown.tsx",
-      "content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-lyra/ui/avatar\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\n\nconst people = [\n  {\n    username: \"shadcn\",\n    avatar: \"https://github.com/shadcn.png\",\n    email: \"shadcn@vercel.com\",\n  },\n  {\n    username: \"maxleiter\",\n    avatar: \"https://github.com/maxleiter.png\",\n    email: \"maxleiter@vercel.com\",\n  },\n  {\n    username: \"evilrabbit\",\n    avatar: \"https://github.com/evilrabbit.png\",\n    email: \"evilrabbit@vercel.com\",\n  },\n]\n\nexport function ItemDropdown() {\n  return (\n    <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" size=\"sm\" className=\"w-fit\" />}\n        >\n          Select <ChevronDownIcon />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n          <DropdownMenuGroup>\n            {people.map((person) => (\n              <DropdownMenuItem key={person.username} className=\"p-0\">\n                <Item size=\"sm\" className=\"w-full p-2\">\n                  <ItemMedia>\n                    <Avatar className=\"size-8\">\n                      <AvatarImage src={person.avatar} className=\"grayscale\" />\n                      <AvatarFallback>{person.username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0.5\">\n                    <ItemTitle>{person.username}</ItemTitle>\n                    <ItemDescription>{person.email}</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-lyra/ui/avatar\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\n\nconst people = [\n  {\n    username: \"shadcn\",\n    avatar: \"https://github.com/shadcn.png\",\n    email: \"shadcn@vercel.com\",\n  },\n  {\n    username: \"maxleiter\",\n    avatar: \"https://github.com/maxleiter.png\",\n    email: \"maxleiter@vercel.com\",\n  },\n  {\n    username: \"evilrabbit\",\n    avatar: \"https://github.com/evilrabbit.png\",\n    email: \"evilrabbit@vercel.com\",\n  },\n]\n\nexport function ItemDropdown() {\n  return (\n    <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" size=\"sm\" className=\"w-fit\" />}\n        >\n          Select <ChevronDownIcon />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n          <DropdownMenuGroup>\n            {people.map((person) => (\n              <DropdownMenuItem key={person.username} className=\"p-0\">\n                <Item size=\"sm\" className=\"w-full p-2\">\n                  <ItemMedia>\n                    <Avatar className=\"size-8\">\n                      <AvatarImage src={person.avatar} className=\"grayscale\" />\n                      <AvatarFallback>\n                        {person.username.charAt(0)}\n                      </AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0.5\">\n                    <ItemTitle>{person.username}</ItemTitle>\n                    <ItemDescription>{person.email}</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/sheet-side.json b/apps/v4/public/r/styles/base-lyra/sheet-side.json
index a6e3399d1..e2a812eeb 100644
--- a/apps/v4/public/r/styles/base-lyra/sheet-side.json
+++ b/apps/v4/public/r/styles/base-lyra/sheet-side.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-lyra/demo/sheet-side.tsx",
-      "content": "\"use client\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/base-lyra/ui/sheet\"\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\ntype SheetSide = (typeof SHEET_SIDES)[number]\n\nexport default function SheetSide() {\n  return (\n    <div className=\"grid grid-cols-2 gap-2\">\n      {SHEET_SIDES.map((side) => (\n        <Sheet key={side}>\n          <SheetTrigger render={<Button variant=\"outline\" />}>{side}</SheetTrigger>\n          <SheetContent side={side}>\n            <SheetHeader>\n              <SheetTitle>Edit profile</SheetTitle>\n              <SheetDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done.\n              </SheetDescription>\n            </SheetHeader>\n            <div className=\"grid gap-4 py-4\">\n              <div className=\"grid grid-cols-4 items-center gap-4\">\n                <Label htmlFor=\"name\" className=\"text-right\">\n                  Name\n                </Label>\n                <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n              </div>\n              <div className=\"grid grid-cols-4 items-center gap-4\">\n                <Label htmlFor=\"username\" className=\"text-right\">\n                  Username\n                </Label>\n                <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n              </div>\n            </div>\n            <SheetFooter>\n              <SheetClose render={<Button type=\"submit\" />}>\n                Save changes\n              </SheetClose>\n            </SheetFooter>\n          </SheetContent>\n        </Sheet>\n      ))}\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/base-lyra/ui/sheet\"\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\ntype SheetSide = (typeof SHEET_SIDES)[number]\n\nexport default function SheetSide() {\n  return (\n    <div className=\"grid grid-cols-2 gap-2\">\n      {SHEET_SIDES.map((side) => (\n        <Sheet key={side}>\n          <SheetTrigger render={<Button variant=\"outline\" />}>\n            {side}\n          </SheetTrigger>\n          <SheetContent side={side}>\n            <SheetHeader>\n              <SheetTitle>Edit profile</SheetTitle>\n              <SheetDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done.\n              </SheetDescription>\n            </SheetHeader>\n            <div className=\"grid gap-4 py-4\">\n              <div className=\"grid grid-cols-4 items-center gap-4\">\n                <Label htmlFor=\"name\" className=\"text-right\">\n                  Name\n                </Label>\n                <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n              </div>\n              <div className=\"grid grid-cols-4 items-center gap-4\">\n                <Label htmlFor=\"username\" className=\"text-right\">\n                  Username\n                </Label>\n                <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n              </div>\n            </div>\n            <SheetFooter>\n              <SheetClose render={<Button type=\"submit\" />}>\n                Save changes\n              </SheetClose>\n            </SheetFooter>\n          </SheetContent>\n        </Sheet>\n      ))}\n    </div>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/tooltip-demo.json b/apps/v4/public/r/styles/base-lyra/tooltip-demo.json
index 86bb8a03e..fd55c2aa7 100644
--- a/apps/v4/public/r/styles/base-lyra/tooltip-demo.json
+++ b/apps/v4/public/r/styles/base-lyra/tooltip-demo.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-lyra/demo/tooltip-demo.tsx",
-      "content": "import { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-lyra/ui/tooltip\"\n\nexport function TooltipDemo() {\n  return (\n    <Tooltip>\n      <TooltipTrigger render={<Button variant=\"outline\" />}>Hover</TooltipTrigger>\n      <TooltipContent>\n        <p>Add to library</p>\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-lyra/ui/tooltip\"\n\nexport function TooltipDemo() {\n  return (\n    <Tooltip>\n      <TooltipTrigger render={<Button variant=\"outline\" />}>\n        Hover\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>Add to library</p>\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/button-group-demo.json b/apps/v4/public/r/styles/base-maia/button-group-demo.json
index b54122b00..923d1acfb 100644
--- a/apps/v4/public/r/styles/base-maia/button-group-demo.json
+++ b/apps/v4/public/r/styles/base-maia/button-group-demo.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-maia/demo/button-group-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArchiveIcon,\n  ArrowLeftIcon,\n  CalendarPlusIcon,\n  ClockIcon,\n  ListFilterIcon,\n  MailCheckIcon,\n  MoreHorizontalIcon,\n  TagIcon,\n  Trash2Icon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-maia/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\n\nexport default function ButtonGroupDemo() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <ButtonGroup>\n      <ButtonGroup className=\"hidden sm:flex\">\n        <Button variant=\"outline\" size=\"icon\" aria-label=\"Go Back\">\n          <ArrowLeftIcon />\n        </Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\">Archive</Button>\n        <Button variant=\"outline\">Report</Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\">Snooze</Button>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" size=\"icon\" aria-label=\"More Options\" />}\n          >\n            <MoreHorizontalIcon />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" className=\"w-52\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <MailCheckIcon />\n                Mark as Read\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <ArchiveIcon />\n                Archive\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <ClockIcon />\n                Snooze\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CalendarPlusIcon />\n                Add to Calendar\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <ListFilterIcon />\n                Add to List\n              </DropdownMenuItem>\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>\n                  <TagIcon />\n                  Label As...\n                </DropdownMenuSubTrigger>\n                <DropdownMenuSubContent>\n                  <DropdownMenuRadioGroup\n                    value={label}\n                    onValueChange={setLabel}\n                  >\n                    <DropdownMenuRadioItem value=\"personal\">\n                      Personal\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"work\">\n                      Work\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"other\">\n                      Other\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuSub>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem variant=\"destructive\">\n                <Trash2Icon />\n                Trash\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </ButtonGroup>\n    </ButtonGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArchiveIcon,\n  ArrowLeftIcon,\n  CalendarPlusIcon,\n  ClockIcon,\n  ListFilterIcon,\n  MailCheckIcon,\n  MoreHorizontalIcon,\n  TagIcon,\n  Trash2Icon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-maia/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\n\nexport default function ButtonGroupDemo() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <ButtonGroup>\n      <ButtonGroup className=\"hidden sm:flex\">\n        <Button variant=\"outline\" size=\"icon\" aria-label=\"Go Back\">\n          <ArrowLeftIcon />\n        </Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\">Archive</Button>\n        <Button variant=\"outline\">Report</Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\">Snooze</Button>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"outline\" size=\"icon\" aria-label=\"More Options\" />\n            }\n          >\n            <MoreHorizontalIcon />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" className=\"w-52\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <MailCheckIcon />\n                Mark as Read\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <ArchiveIcon />\n                Archive\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <ClockIcon />\n                Snooze\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CalendarPlusIcon />\n                Add to Calendar\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <ListFilterIcon />\n                Add to List\n              </DropdownMenuItem>\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>\n                  <TagIcon />\n                  Label As...\n                </DropdownMenuSubTrigger>\n                <DropdownMenuSubContent>\n                  <DropdownMenuRadioGroup\n                    value={label}\n                    onValueChange={setLabel}\n                  >\n                    <DropdownMenuRadioItem value=\"personal\">\n                      Personal\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"work\">\n                      Work\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"other\">\n                      Other\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuSub>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem variant=\"destructive\">\n                <Trash2Icon />\n                Trash\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </ButtonGroup>\n    </ButtonGroup>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/button-group-dropdown.json b/apps/v4/public/r/styles/base-maia/button-group-dropdown.json
index 3b456f1bc..ba6e4c014 100644
--- a/apps/v4/public/r/styles/base-maia/button-group-dropdown.json
+++ b/apps/v4/public/r/styles/base-maia/button-group-dropdown.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-maia/demo/button-group-dropdown.tsx",
-      "content": "\"use client\"\n\nimport {\n  AlertTriangleIcon,\n  CheckIcon,\n  ChevronDownIcon,\n  CopyIcon,\n  ShareIcon,\n  TrashIcon,\n  UserRoundXIcon,\n  VolumeOffIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-maia/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\n\nexport default function ButtonGroupDropdown() {\n  return (\n    <ButtonGroup>\n      <Button variant=\"outline\">Follow</Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger render={<Button variant=\"outline\" className=\"!pl-2\" />}>\n          <ChevronDownIcon />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"[--radius:1rem]\">\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <VolumeOffIcon />\n              Mute Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CheckIcon />\n              Mark as Read\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <AlertTriangleIcon />\n              Report Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <UserRoundXIcon />\n              Block User\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <ShareIcon />\n              Share Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CopyIcon />\n              Copy Conversation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <TrashIcon />\n              Delete Conversation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </ButtonGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  AlertTriangleIcon,\n  CheckIcon,\n  ChevronDownIcon,\n  CopyIcon,\n  ShareIcon,\n  TrashIcon,\n  UserRoundXIcon,\n  VolumeOffIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-maia/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\n\nexport default function ButtonGroupDropdown() {\n  return (\n    <ButtonGroup>\n      <Button variant=\"outline\">Follow</Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"!pl-2\" />}\n        >\n          <ChevronDownIcon />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"[--radius:1rem]\">\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <VolumeOffIcon />\n              Mute Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CheckIcon />\n              Mark as Read\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <AlertTriangleIcon />\n              Report Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <UserRoundXIcon />\n              Block User\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <ShareIcon />\n              Share Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CopyIcon />\n              Copy Conversation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <TrashIcon />\n              Delete Conversation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </ButtonGroup>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/button-group-popover.json b/apps/v4/public/r/styles/base-maia/button-group-popover.json
index febd586c5..f4c049478 100644
--- a/apps/v4/public/r/styles/base-maia/button-group-popover.json
+++ b/apps/v4/public/r/styles/base-maia/button-group-popover.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-maia/demo/button-group-popover.tsx",
-      "content": "import { BotIcon, ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-maia/ui/button-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-maia/ui/popover\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport { Textarea } from \"@/registry/base-maia/ui/textarea\"\n\nexport default function ButtonGroupPopover() {\n  return (\n    <ButtonGroup>\n      <Button variant=\"outline\">\n        <BotIcon /> Copilot\n      </Button>\n      <Popover>\n        <PopoverTrigger\n          render={<Button variant=\"outline\" size=\"icon\" aria-label=\"Open Popover\" />}\n        >\n          <ChevronDownIcon />\n        </PopoverTrigger>\n        <PopoverContent align=\"end\" className=\"rounded-xl p-0 text-sm\">\n          <div className=\"px-4 py-3\">\n            <div className=\"text-sm font-medium\">Agent Tasks</div>\n          </div>\n          <Separator />\n          <div className=\"p-4 text-sm *:[p:not(:last-child)]:mb-2\">\n            <Textarea\n              placeholder=\"Describe your task in natural language.\"\n              className=\"mb-4 resize-none\"\n            />\n            <p className=\"font-medium\">Start a new task with Copilot</p>\n            <p className=\"text-muted-foreground\">\n              Describe your task in natural language. Copilot will work in the\n              background and open a pull request for your review.\n            </p>\n          </div>\n        </PopoverContent>\n      </Popover>\n    </ButtonGroup>\n  )\n}\n",
+      "content": "import { BotIcon, ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-maia/ui/button-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-maia/ui/popover\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport { Textarea } from \"@/registry/base-maia/ui/textarea\"\n\nexport default function ButtonGroupPopover() {\n  return (\n    <ButtonGroup>\n      <Button variant=\"outline\">\n        <BotIcon /> Copilot\n      </Button>\n      <Popover>\n        <PopoverTrigger\n          render={\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Open Popover\" />\n          }\n        >\n          <ChevronDownIcon />\n        </PopoverTrigger>\n        <PopoverContent align=\"end\" className=\"rounded-xl p-0 text-sm\">\n          <div className=\"px-4 py-3\">\n            <div className=\"text-sm font-medium\">Agent Tasks</div>\n          </div>\n          <Separator />\n          <div className=\"p-4 text-sm *:[p:not(:last-child)]:mb-2\">\n            <Textarea\n              placeholder=\"Describe your task in natural language.\"\n              className=\"mb-4 resize-none\"\n            />\n            <p className=\"font-medium\">Start a new task with Copilot</p>\n            <p className=\"text-muted-foreground\">\n              Describe your task in natural language. Copilot will work in the\n              background and open a pull request for your review.\n            </p>\n          </div>\n        </PopoverContent>\n      </Popover>\n    </ButtonGroup>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/combobox-popover.json b/apps/v4/public/r/styles/base-maia/combobox-popover.json
index bea2f2046..4f08e7509 100644
--- a/apps/v4/public/r/styles/base-maia/combobox-popover.json
+++ b/apps/v4/public/r/styles/base-maia/combobox-popover.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-maia/demo/combobox-popover.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/base-maia/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-maia/ui/popover\"\n\ntype Status = {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: \"backlog\",\n    label: \"Backlog\",\n  },\n  {\n    value: \"todo\",\n    label: \"Todo\",\n  },\n  {\n    value: \"in progress\",\n    label: \"In Progress\",\n  },\n  {\n    value: \"done\",\n    label: \"Done\",\n  },\n  {\n    value: \"canceled\",\n    label: \"Canceled\",\n  },\n]\n\nexport default function ComboboxPopover() {\n  const [open, setOpen] = React.useState(false)\n  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n    null\n  )\n\n  return (\n    <div className=\"flex items-center space-x-4\">\n      <p className=\"text-muted-foreground text-sm\">Status</p>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger\n          render={<Button variant=\"outline\" className=\"w-[150px] justify-start\" />}\n        >\n          {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n        </PopoverTrigger>\n        <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n          <Command>\n            <CommandInput placeholder=\"Change status...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup>\n                {statuses.map((status) => (\n                  <CommandItem\n                    key={status.value}\n                    value={status.value}\n                    onSelect={(value) => {\n                      setSelectedStatus(\n                        statuses.find((priority) => priority.value === value) ||\n                          null\n                      )\n                      setOpen(false)\n                    }}\n                  >\n                    {status.label}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/base-maia/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-maia/ui/popover\"\n\ntype Status = {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: \"backlog\",\n    label: \"Backlog\",\n  },\n  {\n    value: \"todo\",\n    label: \"Todo\",\n  },\n  {\n    value: \"in progress\",\n    label: \"In Progress\",\n  },\n  {\n    value: \"done\",\n    label: \"Done\",\n  },\n  {\n    value: \"canceled\",\n    label: \"Canceled\",\n  },\n]\n\nexport default function ComboboxPopover() {\n  const [open, setOpen] = React.useState(false)\n  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n    null\n  )\n\n  return (\n    <div className=\"flex items-center space-x-4\">\n      <p className=\"text-muted-foreground text-sm\">Status</p>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger\n          render={\n            <Button variant=\"outline\" className=\"w-[150px] justify-start\" />\n          }\n        >\n          {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n        </PopoverTrigger>\n        <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n          <Command>\n            <CommandInput placeholder=\"Change status...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup>\n                {statuses.map((status) => (\n                  <CommandItem\n                    key={status.value}\n                    value={status.value}\n                    onSelect={(value) => {\n                      setSelectedStatus(\n                        statuses.find((priority) => priority.value === value) ||\n                          null\n                      )\n                      setOpen(false)\n                    }}\n                  >\n                    {status.label}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/dialog-demo.json b/apps/v4/public/r/styles/base-maia/dialog-demo.json
index 5eb32afa7..1999b9b04 100644
--- a/apps/v4/public/r/styles/base-maia/dialog-demo.json
+++ b/apps/v4/public/r/styles/base-maia/dialog-demo.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-maia/demo/dialog-demo.tsx",
-      "content": "import { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-maia/ui/dialog\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport { Label } from \"@/registry/base-maia/ui/label\"\n\nexport function DialogDemo() {\n  return (\n    <Dialog>\n      <form>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"grid gap-4\">\n            <div className=\"grid gap-3\">\n              <Label htmlFor=\"name-1\">Name</Label>\n              <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n            </div>\n            <div className=\"grid gap-3\">\n              <Label htmlFor=\"username-1\">Username</Label>\n              <Input id=\"username-1\" name=\"username\" defaultValue=\"@peduarte\" />\n            </div>\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>Cancel</DialogClose>\n            <Button type=\"submit\">Save changes</Button>\n          </DialogFooter>\n        </DialogContent>\n      </form>\n    </Dialog>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-maia/ui/dialog\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport { Label } from \"@/registry/base-maia/ui/label\"\n\nexport function DialogDemo() {\n  return (\n    <Dialog>\n      <form>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"grid gap-4\">\n            <div className=\"grid gap-3\">\n              <Label htmlFor=\"name-1\">Name</Label>\n              <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n            </div>\n            <div className=\"grid gap-3\">\n              <Label htmlFor=\"username-1\">Username</Label>\n              <Input id=\"username-1\" name=\"username\" defaultValue=\"@peduarte\" />\n            </div>\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button type=\"submit\">Save changes</Button>\n          </DialogFooter>\n        </DialogContent>\n      </form>\n    </Dialog>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/drawer-demo.json b/apps/v4/public/r/styles/base-maia/drawer-demo.json
index d70ca7e92..126718662 100644
--- a/apps/v4/public/r/styles/base-maia/drawer-demo.json
+++ b/apps/v4/public/r/styles/base-maia/drawer-demo.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-maia/demo/drawer-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/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\nconst data = [\n  {\n    goal: 400,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 239,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 349,\n  },\n]\n\nexport function DrawerDemo() {\n  const [goal, setGoal] = React.useState(350)\n\n  function onClick(adjustment: number) {\n    setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n  }\n\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Open Drawer</Button>\n        Open Drawer\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mx-auto w-full max-w-sm\">\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"p-4 pb-0\">\n            <div className=\"flex items-center justify-center space-x-2\">\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(-10)}\n                disabled={goal <= 200}\n              >\n                <Minus />\n                <span className=\"sr-only\">Decrease</span>\n              </Button>\n              <div className=\"flex-1 text-center\">\n                <div className=\"text-7xl font-bold tracking-tighter\">\n                  {goal}\n                </div>\n                <div className=\"text-muted-foreground text-[0.70rem] uppercase\">\n                  Calories/day\n                </div>\n              </div>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(10)}\n                disabled={goal >= 400}\n              >\n                <Plus />\n                <span className=\"sr-only\">Increase</span>\n              </Button>\n            </div>\n            <div className=\"mt-3 h-[120px]\">\n              <ResponsiveContainer width=\"100%\" height=\"100%\">\n                <BarChart data={data}>\n                  <Bar\n                    dataKey=\"goal\"\n                    style={\n                      {\n                        fill: \"hsl(var(--foreground))\",\n                        opacity: 0.9,\n                      } as React.CSSProperties\n                    }\n                  />\n                </BarChart>\n              </ResponsiveContainer>\n            </div>\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n              Cancel\n            </DrawerClose>\n          </DrawerFooter>\n        </div>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/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\nconst data = [\n  {\n    goal: 400,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 239,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 349,\n  },\n]\n\nexport function DrawerDemo() {\n  const [goal, setGoal] = React.useState(350)\n\n  function onClick(adjustment: number) {\n    setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n  }\n\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Open Drawer</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mx-auto w-full max-w-sm\">\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"p-4 pb-0\">\n            <div className=\"flex items-center justify-center space-x-2\">\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(-10)}\n                disabled={goal <= 200}\n              >\n                <Minus />\n                <span className=\"sr-only\">Decrease</span>\n              </Button>\n              <div className=\"flex-1 text-center\">\n                <div className=\"text-7xl font-bold tracking-tighter\">\n                  {goal}\n                </div>\n                <div className=\"text-muted-foreground text-[0.70rem] uppercase\">\n                  Calories/day\n                </div>\n              </div>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(10)}\n                disabled={goal >= 400}\n              >\n                <Plus />\n                <span className=\"sr-only\">Increase</span>\n              </Button>\n            </div>\n            <div className=\"mt-3 h-[120px]\">\n              <ResponsiveContainer width=\"100%\" height=\"100%\">\n                <BarChart data={data}>\n                  <Bar\n                    dataKey=\"goal\"\n                    style={\n                      {\n                        fill: \"hsl(var(--foreground))\",\n                        opacity: 0.9,\n                      } as React.CSSProperties\n                    }\n                  />\n                </BarChart>\n              </ResponsiveContainer>\n            </div>\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </div>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/drawer-dialog.json b/apps/v4/public/r/styles/base-maia/drawer-dialog.json
index d3448baa2..088ba612a 100644
--- a/apps/v4/public/r/styles/base-maia/drawer-dialog.json
+++ b/apps/v4/public/r/styles/base-maia/drawer-dialog.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-maia/demo/drawer-dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-maia/ui/dialog\"\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 { Input } from \"@/registry/base-maia/ui/input\"\nimport { Label } from \"@/registry/base-maia/ui/label\"\n\nexport function DrawerDialogDemo() {\n  const [open, setOpen] = React.useState(false)\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n  if (isDesktop) {\n    return (\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Edit Profile\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <ProfileForm />\n        </DialogContent>\n      </Dialog>\n    )\n  }\n\n  return (\n    <Drawer open={open} onOpenChange={setOpen}>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Edit Profile</Button>\n        Edit Profile\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"text-left\">\n          <DrawerTitle>Edit profile</DrawerTitle>\n          <DrawerDescription>\n            Make changes to your profile here. Click save when you&apos;re done.\n          </DrawerDescription>\n        </DrawerHeader>\n        <ProfileForm className=\"px-4\" />\n        <DrawerFooter className=\"pt-2\">\n          <DrawerClose asChild>\n            <Button variant=\"outline\">Cancel</Button>\n            Cancel\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n\nfunction ProfileForm({ className }: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"grid items-start gap-6\", className)}>\n      <div className=\"grid gap-3\">\n        <Label htmlFor=\"email\">Email</Label>\n        <Input type=\"email\" id=\"email\" defaultValue=\"shadcn@example.com\" />\n      </div>\n      <div className=\"grid gap-3\">\n        <Label htmlFor=\"username\">Username</Label>\n        <Input id=\"username\" defaultValue=\"@shadcn\" />\n      </div>\n      <Button type=\"submit\">Save changes</Button>\n    </form>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-maia/ui/dialog\"\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 { Input } from \"@/registry/base-maia/ui/input\"\nimport { Label } from \"@/registry/base-maia/ui/label\"\n\nexport function DrawerDialogDemo() {\n  const [open, setOpen] = React.useState(false)\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n  if (isDesktop) {\n    return (\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Edit Profile\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <ProfileForm />\n        </DialogContent>\n      </Dialog>\n    )\n  }\n\n  return (\n    <Drawer open={open} onOpenChange={setOpen}>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Edit Profile</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"text-left\">\n          <DrawerTitle>Edit profile</DrawerTitle>\n          <DrawerDescription>\n            Make changes to your profile here. Click save when you&apos;re done.\n          </DrawerDescription>\n        </DrawerHeader>\n        <ProfileForm className=\"px-4\" />\n        <DrawerFooter className=\"pt-2\">\n          <DrawerClose asChild>\n            <Button variant=\"outline\">Cancel</Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n\nfunction ProfileForm({ className }: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"grid items-start gap-6\", className)}>\n      <div className=\"grid gap-3\">\n        <Label htmlFor=\"email\">Email</Label>\n        <Input type=\"email\" id=\"email\" defaultValue=\"shadcn@example.com\" />\n      </div>\n      <div className=\"grid gap-3\">\n        <Label htmlFor=\"username\">Username</Label>\n        <Input id=\"username\" defaultValue=\"@shadcn\" />\n      </div>\n      <Button type=\"submit\">Save changes</Button>\n    </form>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/dropdown-menu-dialog.json b/apps/v4/public/r/styles/base-maia/dropdown-menu-dialog.json
index b40678c01..017cf94a2 100644
--- a/apps/v4/public/r/styles/base-maia/dropdown-menu-dialog.json
+++ b/apps/v4/public/r/styles/base-maia/dropdown-menu-dialog.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-maia/demo/dropdown-menu-dialog.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { MoreHorizontalIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/base-maia/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport { Label } from \"@/registry/base-maia/ui/label\"\nimport { Textarea } from \"@/registry/base-maia/ui/textarea\"\n\nexport function DropdownMenuDialog() {\n  const [showNewDialog, setShowNewDialog] = useState(false)\n  const [showShareDialog, setShowShareDialog] = useState(false)\n\n  return (\n    <>\n      <DropdownMenu modal={false}>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" aria-label=\"Open menu\" size=\"icon-sm\" />}\n        >\n          <MoreHorizontalIcon />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-40\" align=\"end\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File Actions</DropdownMenuLabel>\n            <DropdownMenuItem onSelect={() => setShowNewDialog(true)}>\n              New File...\n            </DropdownMenuItem>\n            <DropdownMenuItem onSelect={() => setShowShareDialog(true)}>\n              Share...\n            </DropdownMenuItem>\n            <DropdownMenuItem disabled>Download</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n      <Dialog open={showNewDialog} onOpenChange={setShowNewDialog}>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Create New File</DialogTitle>\n            <DialogDescription>\n              Provide a name for your new file. Click create when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <FieldGroup className=\"pb-3\">\n            <Field>\n              <FieldLabel htmlFor=\"filename\">File Name</FieldLabel>\n              <Input id=\"filename\" name=\"filename\" placeholder=\"document.txt\" />\n            </Field>\n          </FieldGroup>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button type=\"submit\">Create</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n      <Dialog open={showShareDialog} onOpenChange={setShowShareDialog}>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Share File</DialogTitle>\n            <DialogDescription>\n              Anyone with the link will be able to view this file.\n            </DialogDescription>\n          </DialogHeader>\n          <FieldGroup className=\"py-3\">\n            <Field>\n              <Label htmlFor=\"email\">Email Address</Label>\n              <Input\n                id=\"email\"\n                name=\"email\"\n                type=\"email\"\n                placeholder=\"shadcn@vercel.com\"\n                autoComplete=\"off\"\n              />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"message\">Message (Optional)</FieldLabel>\n              <Textarea\n                id=\"message\"\n                name=\"message\"\n                placeholder=\"Check out this file\"\n              />\n            </Field>\n          </FieldGroup>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button type=\"submit\">Send Invite</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { MoreHorizontalIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/base-maia/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport { Label } from \"@/registry/base-maia/ui/label\"\nimport { Textarea } from \"@/registry/base-maia/ui/textarea\"\n\nexport function DropdownMenuDialog() {\n  const [showNewDialog, setShowNewDialog] = useState(false)\n  const [showShareDialog, setShowShareDialog] = useState(false)\n\n  return (\n    <>\n      <DropdownMenu modal={false}>\n        <DropdownMenuTrigger\n          render={\n            <Button variant=\"outline\" aria-label=\"Open menu\" size=\"icon-sm\" />\n          }\n        >\n          <MoreHorizontalIcon />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-40\" align=\"end\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File Actions</DropdownMenuLabel>\n            <DropdownMenuItem onSelect={() => setShowNewDialog(true)}>\n              New File...\n            </DropdownMenuItem>\n            <DropdownMenuItem onSelect={() => setShowShareDialog(true)}>\n              Share...\n            </DropdownMenuItem>\n            <DropdownMenuItem disabled>Download</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n      <Dialog open={showNewDialog} onOpenChange={setShowNewDialog}>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Create New File</DialogTitle>\n            <DialogDescription>\n              Provide a name for your new file. Click create when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <FieldGroup className=\"pb-3\">\n            <Field>\n              <FieldLabel htmlFor=\"filename\">File Name</FieldLabel>\n              <Input id=\"filename\" name=\"filename\" placeholder=\"document.txt\" />\n            </Field>\n          </FieldGroup>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button type=\"submit\">Create</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n      <Dialog open={showShareDialog} onOpenChange={setShowShareDialog}>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Share File</DialogTitle>\n            <DialogDescription>\n              Anyone with the link will be able to view this file.\n            </DialogDescription>\n          </DialogHeader>\n          <FieldGroup className=\"py-3\">\n            <Field>\n              <Label htmlFor=\"email\">Email Address</Label>\n              <Input\n                id=\"email\"\n                name=\"email\"\n                type=\"email\"\n                placeholder=\"shadcn@vercel.com\"\n                autoComplete=\"off\"\n              />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"message\">Message (Optional)</FieldLabel>\n              <Textarea\n                id=\"message\"\n                name=\"message\"\n                placeholder=\"Check out this file\"\n              />\n            </Field>\n          </FieldGroup>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button type=\"submit\">Send Invite</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/input-group-demo.json b/apps/v4/public/r/styles/base-maia/input-group-demo.json
index 0ec152c27..41ebab77d 100644
--- a/apps/v4/public/r/styles/base-maia/input-group-demo.json
+++ b/apps/v4/public/r/styles/base-maia/input-group-demo.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-maia/demo/input-group-demo.tsx",
-      "content": "import { IconCheck, IconInfoCircle, IconPlus } from \"@tabler/icons-react\"\nimport { ArrowUpIcon, Search } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/base-maia/ui/input-group\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-maia/ui/tooltip\"\n\nexport default function InputGroupDemo() {\n  return (\n    <div className=\"grid w-full max-w-sm gap-6\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Search...\" />\n        <InputGroupAddon>\n          <Search />\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n        <InputGroupAddon>\n          <InputGroupText>https://</InputGroupText>\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger\n              render={<InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />}\n            >\n              <IconInfoCircle />\n            </TooltipTrigger>\n            <TooltipContent>This is content in a tooltip.</TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n        <InputGroupAddon align=\"block-end\">\n          <InputGroupButton\n            variant=\"outline\"\n            className=\"rounded-full\"\n            size=\"icon-xs\"\n          >\n            <IconPlus />\n          </InputGroupButton>\n          <DropdownMenu>\n            <DropdownMenuTrigger render={<InputGroupButton variant=\"ghost\" />}>\n              Auto\n            </DropdownMenuTrigger>\n            <DropdownMenuContent\n              side=\"top\"\n              align=\"start\"\n              className=\"[--radius:0.95rem]\"\n            >\n              <DropdownMenuGroup>\n                <DropdownMenuItem>Auto</DropdownMenuItem>\n                <DropdownMenuItem>Agent</DropdownMenuItem>\n                <DropdownMenuItem>Manual</DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n          <Separator orientation=\"vertical\" className=\"!h-4\" />\n          <InputGroupButton\n            variant=\"default\"\n            className=\"rounded-full\"\n            size=\"icon-xs\"\n            disabled\n          >\n            <ArrowUpIcon />\n            <span className=\"sr-only\">Send</span>\n          </InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"@shadcn\" />\n        <InputGroupAddon align=\"inline-end\">\n          <div className=\"bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full\">\n            <IconCheck className=\"size-3\" />\n          </div>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n",
+      "content": "import { IconCheck, IconInfoCircle, IconPlus } from \"@tabler/icons-react\"\nimport { ArrowUpIcon, Search } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/base-maia/ui/input-group\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-maia/ui/tooltip\"\n\nexport default function InputGroupDemo() {\n  return (\n    <div className=\"grid w-full max-w-sm gap-6\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Search...\" />\n        <InputGroupAddon>\n          <Search />\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n        <InputGroupAddon>\n          <InputGroupText>https://</InputGroupText>\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n              }\n            >\n              <IconInfoCircle />\n            </TooltipTrigger>\n            <TooltipContent>This is content in a tooltip.</TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n        <InputGroupAddon align=\"block-end\">\n          <InputGroupButton\n            variant=\"outline\"\n            className=\"rounded-full\"\n            size=\"icon-xs\"\n          >\n            <IconPlus />\n          </InputGroupButton>\n          <DropdownMenu>\n            <DropdownMenuTrigger render={<InputGroupButton variant=\"ghost\" />}>\n              Auto\n            </DropdownMenuTrigger>\n            <DropdownMenuContent\n              side=\"top\"\n              align=\"start\"\n              className=\"[--radius:0.95rem]\"\n            >\n              <DropdownMenuGroup>\n                <DropdownMenuItem>Auto</DropdownMenuItem>\n                <DropdownMenuItem>Agent</DropdownMenuItem>\n                <DropdownMenuItem>Manual</DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n          <Separator orientation=\"vertical\" className=\"!h-4\" />\n          <InputGroupButton\n            variant=\"default\"\n            className=\"rounded-full\"\n            size=\"icon-xs\"\n            disabled\n          >\n            <ArrowUpIcon />\n            <span className=\"sr-only\">Send</span>\n          </InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"@shadcn\" />\n        <InputGroupAddon align=\"inline-end\">\n          <div className=\"bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full\">\n            <IconCheck className=\"size-3\" />\n          </div>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/input-group-tooltip.json b/apps/v4/public/r/styles/base-maia/input-group-tooltip.json
index c13f49340..c2a07c027 100644
--- a/apps/v4/public/r/styles/base-maia/input-group-tooltip.json
+++ b/apps/v4/public/r/styles/base-maia/input-group-tooltip.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-maia/demo/input-group-tooltip.tsx",
-      "content": "import { HelpCircle, InfoIcon } from \"lucide-react\"\n\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-maia/ui/input-group\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-maia/ui/tooltip\"\n\nexport default function InputGroupTooltip() {\n  return (\n    <div className=\"grid w-full max-w-sm gap-4\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Enter password\" type=\"password\" />\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <InputGroupButton\n                  variant=\"ghost\"\n                  aria-label=\"Info\"\n                  size=\"icon-xs\"\n                />\n              }\n            >\n              <InfoIcon />\n            </TooltipTrigger>\n            <TooltipContent>\n              <p>Password must be at least 8 characters</p>\n            </TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Your email address\" />\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <InputGroupButton\n                  variant=\"ghost\"\n                  aria-label=\"Help\"\n                  size=\"icon-xs\"\n                />\n              }\n            >\n              <HelpCircle />\n            </TooltipTrigger>\n            <TooltipContent>\n              <p>We&apos;ll use this to send you notifications</p>\n            </TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Enter API key\" />\n        <Tooltip>\n          <TooltipTrigger render={<InputGroupAddon />}>\n            <InputGroupButton\n              variant=\"ghost\"\n              aria-label=\"Help\"\n              size=\"icon-xs\"\n            >\n              <HelpCircle />\n            </InputGroupButton>\n          </TooltipTrigger>\n          <TooltipContent side=\"left\">\n            <p>Click for help with API keys</p>\n          </TooltipContent>\n        </Tooltip>\n      </InputGroup>\n    </div>\n  )\n}\n",
+      "content": "import { HelpCircle, InfoIcon } from \"lucide-react\"\n\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-maia/ui/input-group\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-maia/ui/tooltip\"\n\nexport default function InputGroupTooltip() {\n  return (\n    <div className=\"grid w-full max-w-sm gap-4\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Enter password\" type=\"password\" />\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <InputGroupButton\n                  variant=\"ghost\"\n                  aria-label=\"Info\"\n                  size=\"icon-xs\"\n                />\n              }\n            >\n              <InfoIcon />\n            </TooltipTrigger>\n            <TooltipContent>\n              <p>Password must be at least 8 characters</p>\n            </TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Your email address\" />\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <InputGroupButton\n                  variant=\"ghost\"\n                  aria-label=\"Help\"\n                  size=\"icon-xs\"\n                />\n              }\n            >\n              <HelpCircle />\n            </TooltipTrigger>\n            <TooltipContent>\n              <p>We&apos;ll use this to send you notifications</p>\n            </TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Enter API key\" />\n        <Tooltip>\n          <TooltipTrigger render={<InputGroupAddon />}>\n            <InputGroupButton variant=\"ghost\" aria-label=\"Help\" size=\"icon-xs\">\n              <HelpCircle />\n            </InputGroupButton>\n          </TooltipTrigger>\n          <TooltipContent side=\"left\">\n            <p>Click for help with API keys</p>\n          </TooltipContent>\n        </Tooltip>\n      </InputGroup>\n    </div>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/item-dropdown.json b/apps/v4/public/r/styles/base-maia/item-dropdown.json
index 4567a4f1d..c120ef5cf 100644
--- a/apps/v4/public/r/styles/base-maia/item-dropdown.json
+++ b/apps/v4/public/r/styles/base-maia/item-dropdown.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-maia/demo/item-dropdown.tsx",
-      "content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-maia/ui/avatar\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\n\nconst people = [\n  {\n    username: \"shadcn\",\n    avatar: \"https://github.com/shadcn.png\",\n    email: \"shadcn@vercel.com\",\n  },\n  {\n    username: \"maxleiter\",\n    avatar: \"https://github.com/maxleiter.png\",\n    email: \"maxleiter@vercel.com\",\n  },\n  {\n    username: \"evilrabbit\",\n    avatar: \"https://github.com/evilrabbit.png\",\n    email: \"evilrabbit@vercel.com\",\n  },\n]\n\nexport function ItemDropdown() {\n  return (\n    <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" size=\"sm\" className=\"w-fit\" />}\n        >\n          Select <ChevronDownIcon />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n          <DropdownMenuGroup>\n            {people.map((person) => (\n              <DropdownMenuItem key={person.username} className=\"p-0\">\n                <Item size=\"sm\" className=\"w-full p-2\">\n                  <ItemMedia>\n                    <Avatar className=\"size-8\">\n                      <AvatarImage src={person.avatar} className=\"grayscale\" />\n                      <AvatarFallback>{person.username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0.5\">\n                    <ItemTitle>{person.username}</ItemTitle>\n                    <ItemDescription>{person.email}</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-maia/ui/avatar\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\n\nconst people = [\n  {\n    username: \"shadcn\",\n    avatar: \"https://github.com/shadcn.png\",\n    email: \"shadcn@vercel.com\",\n  },\n  {\n    username: \"maxleiter\",\n    avatar: \"https://github.com/maxleiter.png\",\n    email: \"maxleiter@vercel.com\",\n  },\n  {\n    username: \"evilrabbit\",\n    avatar: \"https://github.com/evilrabbit.png\",\n    email: \"evilrabbit@vercel.com\",\n  },\n]\n\nexport function ItemDropdown() {\n  return (\n    <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" size=\"sm\" className=\"w-fit\" />}\n        >\n          Select <ChevronDownIcon />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n          <DropdownMenuGroup>\n            {people.map((person) => (\n              <DropdownMenuItem key={person.username} className=\"p-0\">\n                <Item size=\"sm\" className=\"w-full p-2\">\n                  <ItemMedia>\n                    <Avatar className=\"size-8\">\n                      <AvatarImage src={person.avatar} className=\"grayscale\" />\n                      <AvatarFallback>\n                        {person.username.charAt(0)}\n                      </AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0.5\">\n                    <ItemTitle>{person.username}</ItemTitle>\n                    <ItemDescription>{person.email}</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/sheet-side.json b/apps/v4/public/r/styles/base-maia/sheet-side.json
index 73a87720a..fb32ab721 100644
--- a/apps/v4/public/r/styles/base-maia/sheet-side.json
+++ b/apps/v4/public/r/styles/base-maia/sheet-side.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-maia/demo/sheet-side.tsx",
-      "content": "\"use client\"\n\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport { Label } from \"@/registry/base-maia/ui/label\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/base-maia/ui/sheet\"\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\ntype SheetSide = (typeof SHEET_SIDES)[number]\n\nexport default function SheetSide() {\n  return (\n    <div className=\"grid grid-cols-2 gap-2\">\n      {SHEET_SIDES.map((side) => (\n        <Sheet key={side}>\n          <SheetTrigger render={<Button variant=\"outline\" />}>{side}</SheetTrigger>\n          <SheetContent side={side}>\n            <SheetHeader>\n              <SheetTitle>Edit profile</SheetTitle>\n              <SheetDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done.\n              </SheetDescription>\n            </SheetHeader>\n            <div className=\"grid gap-4 py-4\">\n              <div className=\"grid grid-cols-4 items-center gap-4\">\n                <Label htmlFor=\"name\" className=\"text-right\">\n                  Name\n                </Label>\n                <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n              </div>\n              <div className=\"grid grid-cols-4 items-center gap-4\">\n                <Label htmlFor=\"username\" className=\"text-right\">\n                  Username\n                </Label>\n                <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n              </div>\n            </div>\n            <SheetFooter>\n              <SheetClose render={<Button type=\"submit\" />}>\n                Save changes\n              </SheetClose>\n            </SheetFooter>\n          </SheetContent>\n        </Sheet>\n      ))}\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport { Label } from \"@/registry/base-maia/ui/label\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/base-maia/ui/sheet\"\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\ntype SheetSide = (typeof SHEET_SIDES)[number]\n\nexport default function SheetSide() {\n  return (\n    <div className=\"grid grid-cols-2 gap-2\">\n      {SHEET_SIDES.map((side) => (\n        <Sheet key={side}>\n          <SheetTrigger render={<Button variant=\"outline\" />}>\n            {side}\n          </SheetTrigger>\n          <SheetContent side={side}>\n            <SheetHeader>\n              <SheetTitle>Edit profile</SheetTitle>\n              <SheetDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done.\n              </SheetDescription>\n            </SheetHeader>\n            <div className=\"grid gap-4 py-4\">\n              <div className=\"grid grid-cols-4 items-center gap-4\">\n                <Label htmlFor=\"name\" className=\"text-right\">\n                  Name\n                </Label>\n                <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n              </div>\n              <div className=\"grid grid-cols-4 items-center gap-4\">\n                <Label htmlFor=\"username\" className=\"text-right\">\n                  Username\n                </Label>\n                <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n              </div>\n            </div>\n            <SheetFooter>\n              <SheetClose render={<Button type=\"submit\" />}>\n                Save changes\n              </SheetClose>\n            </SheetFooter>\n          </SheetContent>\n        </Sheet>\n      ))}\n    </div>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/tooltip-demo.json b/apps/v4/public/r/styles/base-maia/tooltip-demo.json
index c4a388ef3..a29293f6d 100644
--- a/apps/v4/public/r/styles/base-maia/tooltip-demo.json
+++ b/apps/v4/public/r/styles/base-maia/tooltip-demo.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-maia/demo/tooltip-demo.tsx",
-      "content": "import { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-maia/ui/tooltip\"\n\nexport function TooltipDemo() {\n  return (\n    <Tooltip>\n      <TooltipTrigger render={<Button variant=\"outline\" />}>Hover</TooltipTrigger>\n      <TooltipContent>\n        <p>Add to library</p>\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-maia/ui/tooltip\"\n\nexport function TooltipDemo() {\n  return (\n    <Tooltip>\n      <TooltipTrigger render={<Button variant=\"outline\" />}>\n        Hover\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>Add to library</p>\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/button-group-demo.json b/apps/v4/public/r/styles/base-mira/button-group-demo.json
index ab9437a71..a42a0704c 100644
--- a/apps/v4/public/r/styles/base-mira/button-group-demo.json
+++ b/apps/v4/public/r/styles/base-mira/button-group-demo.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-mira/demo/button-group-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArchiveIcon,\n  ArrowLeftIcon,\n  CalendarPlusIcon,\n  ClockIcon,\n  ListFilterIcon,\n  MailCheckIcon,\n  MoreHorizontalIcon,\n  TagIcon,\n  Trash2Icon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-mira/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\n\nexport default function ButtonGroupDemo() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <ButtonGroup>\n      <ButtonGroup className=\"hidden sm:flex\">\n        <Button variant=\"outline\" size=\"icon\" aria-label=\"Go Back\">\n          <ArrowLeftIcon />\n        </Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\">Archive</Button>\n        <Button variant=\"outline\">Report</Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\">Snooze</Button>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" size=\"icon\" aria-label=\"More Options\" />}\n          >\n            <MoreHorizontalIcon />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" className=\"w-52\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <MailCheckIcon />\n                Mark as Read\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <ArchiveIcon />\n                Archive\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <ClockIcon />\n                Snooze\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CalendarPlusIcon />\n                Add to Calendar\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <ListFilterIcon />\n                Add to List\n              </DropdownMenuItem>\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>\n                  <TagIcon />\n                  Label As...\n                </DropdownMenuSubTrigger>\n                <DropdownMenuSubContent>\n                  <DropdownMenuRadioGroup\n                    value={label}\n                    onValueChange={setLabel}\n                  >\n                    <DropdownMenuRadioItem value=\"personal\">\n                      Personal\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"work\">\n                      Work\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"other\">\n                      Other\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuSub>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem variant=\"destructive\">\n                <Trash2Icon />\n                Trash\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </ButtonGroup>\n    </ButtonGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArchiveIcon,\n  ArrowLeftIcon,\n  CalendarPlusIcon,\n  ClockIcon,\n  ListFilterIcon,\n  MailCheckIcon,\n  MoreHorizontalIcon,\n  TagIcon,\n  Trash2Icon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-mira/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\n\nexport default function ButtonGroupDemo() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <ButtonGroup>\n      <ButtonGroup className=\"hidden sm:flex\">\n        <Button variant=\"outline\" size=\"icon\" aria-label=\"Go Back\">\n          <ArrowLeftIcon />\n        </Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\">Archive</Button>\n        <Button variant=\"outline\">Report</Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\">Snooze</Button>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"outline\" size=\"icon\" aria-label=\"More Options\" />\n            }\n          >\n            <MoreHorizontalIcon />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" className=\"w-52\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <MailCheckIcon />\n                Mark as Read\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <ArchiveIcon />\n                Archive\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <ClockIcon />\n                Snooze\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CalendarPlusIcon />\n                Add to Calendar\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <ListFilterIcon />\n                Add to List\n              </DropdownMenuItem>\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>\n                  <TagIcon />\n                  Label As...\n                </DropdownMenuSubTrigger>\n                <DropdownMenuSubContent>\n                  <DropdownMenuRadioGroup\n                    value={label}\n                    onValueChange={setLabel}\n                  >\n                    <DropdownMenuRadioItem value=\"personal\">\n                      Personal\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"work\">\n                      Work\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"other\">\n                      Other\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuSub>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem variant=\"destructive\">\n                <Trash2Icon />\n                Trash\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </ButtonGroup>\n    </ButtonGroup>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/button-group-dropdown.json b/apps/v4/public/r/styles/base-mira/button-group-dropdown.json
index 5b8a892af..9b63c1d5d 100644
--- a/apps/v4/public/r/styles/base-mira/button-group-dropdown.json
+++ b/apps/v4/public/r/styles/base-mira/button-group-dropdown.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-mira/demo/button-group-dropdown.tsx",
-      "content": "\"use client\"\n\nimport {\n  AlertTriangleIcon,\n  CheckIcon,\n  ChevronDownIcon,\n  CopyIcon,\n  ShareIcon,\n  TrashIcon,\n  UserRoundXIcon,\n  VolumeOffIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-mira/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\n\nexport default function ButtonGroupDropdown() {\n  return (\n    <ButtonGroup>\n      <Button variant=\"outline\">Follow</Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger render={<Button variant=\"outline\" className=\"!pl-2\" />}>\n          <ChevronDownIcon />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"[--radius:1rem]\">\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <VolumeOffIcon />\n              Mute Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CheckIcon />\n              Mark as Read\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <AlertTriangleIcon />\n              Report Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <UserRoundXIcon />\n              Block User\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <ShareIcon />\n              Share Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CopyIcon />\n              Copy Conversation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <TrashIcon />\n              Delete Conversation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </ButtonGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  AlertTriangleIcon,\n  CheckIcon,\n  ChevronDownIcon,\n  CopyIcon,\n  ShareIcon,\n  TrashIcon,\n  UserRoundXIcon,\n  VolumeOffIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-mira/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\n\nexport default function ButtonGroupDropdown() {\n  return (\n    <ButtonGroup>\n      <Button variant=\"outline\">Follow</Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"!pl-2\" />}\n        >\n          <ChevronDownIcon />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"[--radius:1rem]\">\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <VolumeOffIcon />\n              Mute Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CheckIcon />\n              Mark as Read\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <AlertTriangleIcon />\n              Report Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <UserRoundXIcon />\n              Block User\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <ShareIcon />\n              Share Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CopyIcon />\n              Copy Conversation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <TrashIcon />\n              Delete Conversation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </ButtonGroup>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/button-group-popover.json b/apps/v4/public/r/styles/base-mira/button-group-popover.json
index f3c687b51..448f17aeb 100644
--- a/apps/v4/public/r/styles/base-mira/button-group-popover.json
+++ b/apps/v4/public/r/styles/base-mira/button-group-popover.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-mira/demo/button-group-popover.tsx",
-      "content": "import { BotIcon, ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-mira/ui/button-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-mira/ui/popover\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport { Textarea } from \"@/registry/base-mira/ui/textarea\"\n\nexport default function ButtonGroupPopover() {\n  return (\n    <ButtonGroup>\n      <Button variant=\"outline\">\n        <BotIcon /> Copilot\n      </Button>\n      <Popover>\n        <PopoverTrigger\n          render={<Button variant=\"outline\" size=\"icon\" aria-label=\"Open Popover\" />}\n        >\n          <ChevronDownIcon />\n        </PopoverTrigger>\n        <PopoverContent align=\"end\" className=\"rounded-xl p-0 text-sm\">\n          <div className=\"px-4 py-3\">\n            <div className=\"text-sm font-medium\">Agent Tasks</div>\n          </div>\n          <Separator />\n          <div className=\"p-4 text-sm *:[p:not(:last-child)]:mb-2\">\n            <Textarea\n              placeholder=\"Describe your task in natural language.\"\n              className=\"mb-4 resize-none\"\n            />\n            <p className=\"font-medium\">Start a new task with Copilot</p>\n            <p className=\"text-muted-foreground\">\n              Describe your task in natural language. Copilot will work in the\n              background and open a pull request for your review.\n            </p>\n          </div>\n        </PopoverContent>\n      </Popover>\n    </ButtonGroup>\n  )\n}\n",
+      "content": "import { BotIcon, ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-mira/ui/button-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-mira/ui/popover\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport { Textarea } from \"@/registry/base-mira/ui/textarea\"\n\nexport default function ButtonGroupPopover() {\n  return (\n    <ButtonGroup>\n      <Button variant=\"outline\">\n        <BotIcon /> Copilot\n      </Button>\n      <Popover>\n        <PopoverTrigger\n          render={\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Open Popover\" />\n          }\n        >\n          <ChevronDownIcon />\n        </PopoverTrigger>\n        <PopoverContent align=\"end\" className=\"rounded-xl p-0 text-sm\">\n          <div className=\"px-4 py-3\">\n            <div className=\"text-sm font-medium\">Agent Tasks</div>\n          </div>\n          <Separator />\n          <div className=\"p-4 text-sm *:[p:not(:last-child)]:mb-2\">\n            <Textarea\n              placeholder=\"Describe your task in natural language.\"\n              className=\"mb-4 resize-none\"\n            />\n            <p className=\"font-medium\">Start a new task with Copilot</p>\n            <p className=\"text-muted-foreground\">\n              Describe your task in natural language. Copilot will work in the\n              background and open a pull request for your review.\n            </p>\n          </div>\n        </PopoverContent>\n      </Popover>\n    </ButtonGroup>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/combobox-popover.json b/apps/v4/public/r/styles/base-mira/combobox-popover.json
index 9139c062a..fdebe4423 100644
--- a/apps/v4/public/r/styles/base-mira/combobox-popover.json
+++ b/apps/v4/public/r/styles/base-mira/combobox-popover.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-mira/demo/combobox-popover.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/base-mira/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-mira/ui/popover\"\n\ntype Status = {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: \"backlog\",\n    label: \"Backlog\",\n  },\n  {\n    value: \"todo\",\n    label: \"Todo\",\n  },\n  {\n    value: \"in progress\",\n    label: \"In Progress\",\n  },\n  {\n    value: \"done\",\n    label: \"Done\",\n  },\n  {\n    value: \"canceled\",\n    label: \"Canceled\",\n  },\n]\n\nexport default function ComboboxPopover() {\n  const [open, setOpen] = React.useState(false)\n  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n    null\n  )\n\n  return (\n    <div className=\"flex items-center space-x-4\">\n      <p className=\"text-muted-foreground text-sm\">Status</p>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger\n          render={<Button variant=\"outline\" className=\"w-[150px] justify-start\" />}\n        >\n          {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n        </PopoverTrigger>\n        <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n          <Command>\n            <CommandInput placeholder=\"Change status...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup>\n                {statuses.map((status) => (\n                  <CommandItem\n                    key={status.value}\n                    value={status.value}\n                    onSelect={(value) => {\n                      setSelectedStatus(\n                        statuses.find((priority) => priority.value === value) ||\n                          null\n                      )\n                      setOpen(false)\n                    }}\n                  >\n                    {status.label}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/base-mira/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-mira/ui/popover\"\n\ntype Status = {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: \"backlog\",\n    label: \"Backlog\",\n  },\n  {\n    value: \"todo\",\n    label: \"Todo\",\n  },\n  {\n    value: \"in progress\",\n    label: \"In Progress\",\n  },\n  {\n    value: \"done\",\n    label: \"Done\",\n  },\n  {\n    value: \"canceled\",\n    label: \"Canceled\",\n  },\n]\n\nexport default function ComboboxPopover() {\n  const [open, setOpen] = React.useState(false)\n  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n    null\n  )\n\n  return (\n    <div className=\"flex items-center space-x-4\">\n      <p className=\"text-muted-foreground text-sm\">Status</p>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger\n          render={\n            <Button variant=\"outline\" className=\"w-[150px] justify-start\" />\n          }\n        >\n          {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n        </PopoverTrigger>\n        <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n          <Command>\n            <CommandInput placeholder=\"Change status...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup>\n                {statuses.map((status) => (\n                  <CommandItem\n                    key={status.value}\n                    value={status.value}\n                    onSelect={(value) => {\n                      setSelectedStatus(\n                        statuses.find((priority) => priority.value === value) ||\n                          null\n                      )\n                      setOpen(false)\n                    }}\n                  >\n                    {status.label}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/dialog-demo.json b/apps/v4/public/r/styles/base-mira/dialog-demo.json
index a7e06c1cf..253eb2ae5 100644
--- a/apps/v4/public/r/styles/base-mira/dialog-demo.json
+++ b/apps/v4/public/r/styles/base-mira/dialog-demo.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-mira/demo/dialog-demo.tsx",
-      "content": "import { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-mira/ui/dialog\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\n\nexport function DialogDemo() {\n  return (\n    <Dialog>\n      <form>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"grid gap-4\">\n            <div className=\"grid gap-3\">\n              <Label htmlFor=\"name-1\">Name</Label>\n              <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n            </div>\n            <div className=\"grid gap-3\">\n              <Label htmlFor=\"username-1\">Username</Label>\n              <Input id=\"username-1\" name=\"username\" defaultValue=\"@peduarte\" />\n            </div>\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>Cancel</DialogClose>\n            <Button type=\"submit\">Save changes</Button>\n          </DialogFooter>\n        </DialogContent>\n      </form>\n    </Dialog>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-mira/ui/dialog\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\n\nexport function DialogDemo() {\n  return (\n    <Dialog>\n      <form>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"grid gap-4\">\n            <div className=\"grid gap-3\">\n              <Label htmlFor=\"name-1\">Name</Label>\n              <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n            </div>\n            <div className=\"grid gap-3\">\n              <Label htmlFor=\"username-1\">Username</Label>\n              <Input id=\"username-1\" name=\"username\" defaultValue=\"@peduarte\" />\n            </div>\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button type=\"submit\">Save changes</Button>\n          </DialogFooter>\n        </DialogContent>\n      </form>\n    </Dialog>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/drawer-demo.json b/apps/v4/public/r/styles/base-mira/drawer-demo.json
index f60ef3e20..5a24847c9 100644
--- a/apps/v4/public/r/styles/base-mira/drawer-demo.json
+++ b/apps/v4/public/r/styles/base-mira/drawer-demo.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-mira/demo/drawer-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/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\nconst data = [\n  {\n    goal: 400,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 239,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 349,\n  },\n]\n\nexport function DrawerDemo() {\n  const [goal, setGoal] = React.useState(350)\n\n  function onClick(adjustment: number) {\n    setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n  }\n\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Open Drawer</Button>\n        Open Drawer\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mx-auto w-full max-w-sm\">\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"p-4 pb-0\">\n            <div className=\"flex items-center justify-center space-x-2\">\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(-10)}\n                disabled={goal <= 200}\n              >\n                <Minus />\n                <span className=\"sr-only\">Decrease</span>\n              </Button>\n              <div className=\"flex-1 text-center\">\n                <div className=\"text-7xl font-bold tracking-tighter\">\n                  {goal}\n                </div>\n                <div className=\"text-muted-foreground text-[0.70rem] uppercase\">\n                  Calories/day\n                </div>\n              </div>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(10)}\n                disabled={goal >= 400}\n              >\n                <Plus />\n                <span className=\"sr-only\">Increase</span>\n              </Button>\n            </div>\n            <div className=\"mt-3 h-[120px]\">\n              <ResponsiveContainer width=\"100%\" height=\"100%\">\n                <BarChart data={data}>\n                  <Bar\n                    dataKey=\"goal\"\n                    style={\n                      {\n                        fill: \"hsl(var(--foreground))\",\n                        opacity: 0.9,\n                      } as React.CSSProperties\n                    }\n                  />\n                </BarChart>\n              </ResponsiveContainer>\n            </div>\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n              Cancel\n            </DrawerClose>\n          </DrawerFooter>\n        </div>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/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\nconst data = [\n  {\n    goal: 400,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 239,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 349,\n  },\n]\n\nexport function DrawerDemo() {\n  const [goal, setGoal] = React.useState(350)\n\n  function onClick(adjustment: number) {\n    setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n  }\n\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Open Drawer</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mx-auto w-full max-w-sm\">\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"p-4 pb-0\">\n            <div className=\"flex items-center justify-center space-x-2\">\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(-10)}\n                disabled={goal <= 200}\n              >\n                <Minus />\n                <span className=\"sr-only\">Decrease</span>\n              </Button>\n              <div className=\"flex-1 text-center\">\n                <div className=\"text-7xl font-bold tracking-tighter\">\n                  {goal}\n                </div>\n                <div className=\"text-muted-foreground text-[0.70rem] uppercase\">\n                  Calories/day\n                </div>\n              </div>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(10)}\n                disabled={goal >= 400}\n              >\n                <Plus />\n                <span className=\"sr-only\">Increase</span>\n              </Button>\n            </div>\n            <div className=\"mt-3 h-[120px]\">\n              <ResponsiveContainer width=\"100%\" height=\"100%\">\n                <BarChart data={data}>\n                  <Bar\n                    dataKey=\"goal\"\n                    style={\n                      {\n                        fill: \"hsl(var(--foreground))\",\n                        opacity: 0.9,\n                      } as React.CSSProperties\n                    }\n                  />\n                </BarChart>\n              </ResponsiveContainer>\n            </div>\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </div>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/drawer-dialog.json b/apps/v4/public/r/styles/base-mira/drawer-dialog.json
index 1e467743e..432ac0935 100644
--- a/apps/v4/public/r/styles/base-mira/drawer-dialog.json
+++ b/apps/v4/public/r/styles/base-mira/drawer-dialog.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-mira/demo/drawer-dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-mira/ui/dialog\"\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 { Input } from \"@/registry/base-mira/ui/input\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\n\nexport function DrawerDialogDemo() {\n  const [open, setOpen] = React.useState(false)\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n  if (isDesktop) {\n    return (\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Edit Profile\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <ProfileForm />\n        </DialogContent>\n      </Dialog>\n    )\n  }\n\n  return (\n    <Drawer open={open} onOpenChange={setOpen}>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Edit Profile</Button>\n        Edit Profile\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"text-left\">\n          <DrawerTitle>Edit profile</DrawerTitle>\n          <DrawerDescription>\n            Make changes to your profile here. Click save when you&apos;re done.\n          </DrawerDescription>\n        </DrawerHeader>\n        <ProfileForm className=\"px-4\" />\n        <DrawerFooter className=\"pt-2\">\n          <DrawerClose asChild>\n            <Button variant=\"outline\">Cancel</Button>\n            Cancel\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n\nfunction ProfileForm({ className }: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"grid items-start gap-6\", className)}>\n      <div className=\"grid gap-3\">\n        <Label htmlFor=\"email\">Email</Label>\n        <Input type=\"email\" id=\"email\" defaultValue=\"shadcn@example.com\" />\n      </div>\n      <div className=\"grid gap-3\">\n        <Label htmlFor=\"username\">Username</Label>\n        <Input id=\"username\" defaultValue=\"@shadcn\" />\n      </div>\n      <Button type=\"submit\">Save changes</Button>\n    </form>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-mira/ui/dialog\"\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 { Input } from \"@/registry/base-mira/ui/input\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\n\nexport function DrawerDialogDemo() {\n  const [open, setOpen] = React.useState(false)\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n  if (isDesktop) {\n    return (\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Edit Profile\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <ProfileForm />\n        </DialogContent>\n      </Dialog>\n    )\n  }\n\n  return (\n    <Drawer open={open} onOpenChange={setOpen}>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Edit Profile</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"text-left\">\n          <DrawerTitle>Edit profile</DrawerTitle>\n          <DrawerDescription>\n            Make changes to your profile here. Click save when you&apos;re done.\n          </DrawerDescription>\n        </DrawerHeader>\n        <ProfileForm className=\"px-4\" />\n        <DrawerFooter className=\"pt-2\">\n          <DrawerClose asChild>\n            <Button variant=\"outline\">Cancel</Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n\nfunction ProfileForm({ className }: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"grid items-start gap-6\", className)}>\n      <div className=\"grid gap-3\">\n        <Label htmlFor=\"email\">Email</Label>\n        <Input type=\"email\" id=\"email\" defaultValue=\"shadcn@example.com\" />\n      </div>\n      <div className=\"grid gap-3\">\n        <Label htmlFor=\"username\">Username</Label>\n        <Input id=\"username\" defaultValue=\"@shadcn\" />\n      </div>\n      <Button type=\"submit\">Save changes</Button>\n    </form>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/dropdown-menu-dialog.json b/apps/v4/public/r/styles/base-mira/dropdown-menu-dialog.json
index 4c040dd40..504530460 100644
--- a/apps/v4/public/r/styles/base-mira/dropdown-menu-dialog.json
+++ b/apps/v4/public/r/styles/base-mira/dropdown-menu-dialog.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-mira/demo/dropdown-menu-dialog.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { MoreHorizontalIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/base-mira/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\nimport { Textarea } from \"@/registry/base-mira/ui/textarea\"\n\nexport function DropdownMenuDialog() {\n  const [showNewDialog, setShowNewDialog] = useState(false)\n  const [showShareDialog, setShowShareDialog] = useState(false)\n\n  return (\n    <>\n      <DropdownMenu modal={false}>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" aria-label=\"Open menu\" size=\"icon-sm\" />}\n        >\n          <MoreHorizontalIcon />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-40\" align=\"end\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File Actions</DropdownMenuLabel>\n            <DropdownMenuItem onSelect={() => setShowNewDialog(true)}>\n              New File...\n            </DropdownMenuItem>\n            <DropdownMenuItem onSelect={() => setShowShareDialog(true)}>\n              Share...\n            </DropdownMenuItem>\n            <DropdownMenuItem disabled>Download</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n      <Dialog open={showNewDialog} onOpenChange={setShowNewDialog}>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Create New File</DialogTitle>\n            <DialogDescription>\n              Provide a name for your new file. Click create when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <FieldGroup className=\"pb-3\">\n            <Field>\n              <FieldLabel htmlFor=\"filename\">File Name</FieldLabel>\n              <Input id=\"filename\" name=\"filename\" placeholder=\"document.txt\" />\n            </Field>\n          </FieldGroup>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button type=\"submit\">Create</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n      <Dialog open={showShareDialog} onOpenChange={setShowShareDialog}>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Share File</DialogTitle>\n            <DialogDescription>\n              Anyone with the link will be able to view this file.\n            </DialogDescription>\n          </DialogHeader>\n          <FieldGroup className=\"py-3\">\n            <Field>\n              <Label htmlFor=\"email\">Email Address</Label>\n              <Input\n                id=\"email\"\n                name=\"email\"\n                type=\"email\"\n                placeholder=\"shadcn@vercel.com\"\n                autoComplete=\"off\"\n              />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"message\">Message (Optional)</FieldLabel>\n              <Textarea\n                id=\"message\"\n                name=\"message\"\n                placeholder=\"Check out this file\"\n              />\n            </Field>\n          </FieldGroup>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button type=\"submit\">Send Invite</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { MoreHorizontalIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/base-mira/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\nimport { Textarea } from \"@/registry/base-mira/ui/textarea\"\n\nexport function DropdownMenuDialog() {\n  const [showNewDialog, setShowNewDialog] = useState(false)\n  const [showShareDialog, setShowShareDialog] = useState(false)\n\n  return (\n    <>\n      <DropdownMenu modal={false}>\n        <DropdownMenuTrigger\n          render={\n            <Button variant=\"outline\" aria-label=\"Open menu\" size=\"icon-sm\" />\n          }\n        >\n          <MoreHorizontalIcon />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-40\" align=\"end\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File Actions</DropdownMenuLabel>\n            <DropdownMenuItem onSelect={() => setShowNewDialog(true)}>\n              New File...\n            </DropdownMenuItem>\n            <DropdownMenuItem onSelect={() => setShowShareDialog(true)}>\n              Share...\n            </DropdownMenuItem>\n            <DropdownMenuItem disabled>Download</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n      <Dialog open={showNewDialog} onOpenChange={setShowNewDialog}>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Create New File</DialogTitle>\n            <DialogDescription>\n              Provide a name for your new file. Click create when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <FieldGroup className=\"pb-3\">\n            <Field>\n              <FieldLabel htmlFor=\"filename\">File Name</FieldLabel>\n              <Input id=\"filename\" name=\"filename\" placeholder=\"document.txt\" />\n            </Field>\n          </FieldGroup>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button type=\"submit\">Create</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n      <Dialog open={showShareDialog} onOpenChange={setShowShareDialog}>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Share File</DialogTitle>\n            <DialogDescription>\n              Anyone with the link will be able to view this file.\n            </DialogDescription>\n          </DialogHeader>\n          <FieldGroup className=\"py-3\">\n            <Field>\n              <Label htmlFor=\"email\">Email Address</Label>\n              <Input\n                id=\"email\"\n                name=\"email\"\n                type=\"email\"\n                placeholder=\"shadcn@vercel.com\"\n                autoComplete=\"off\"\n              />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"message\">Message (Optional)</FieldLabel>\n              <Textarea\n                id=\"message\"\n                name=\"message\"\n                placeholder=\"Check out this file\"\n              />\n            </Field>\n          </FieldGroup>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button type=\"submit\">Send Invite</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/input-group-demo.json b/apps/v4/public/r/styles/base-mira/input-group-demo.json
index bc64d250d..c5cc5e85f 100644
--- a/apps/v4/public/r/styles/base-mira/input-group-demo.json
+++ b/apps/v4/public/r/styles/base-mira/input-group-demo.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-mira/demo/input-group-demo.tsx",
-      "content": "import { IconCheck, IconInfoCircle, IconPlus } from \"@tabler/icons-react\"\nimport { ArrowUpIcon, Search } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/base-mira/ui/input-group\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-mira/ui/tooltip\"\n\nexport default function InputGroupDemo() {\n  return (\n    <div className=\"grid w-full max-w-sm gap-6\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Search...\" />\n        <InputGroupAddon>\n          <Search />\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n        <InputGroupAddon>\n          <InputGroupText>https://</InputGroupText>\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger\n              render={<InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />}\n            >\n              <IconInfoCircle />\n            </TooltipTrigger>\n            <TooltipContent>This is content in a tooltip.</TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n        <InputGroupAddon align=\"block-end\">\n          <InputGroupButton\n            variant=\"outline\"\n            className=\"rounded-full\"\n            size=\"icon-xs\"\n          >\n            <IconPlus />\n          </InputGroupButton>\n          <DropdownMenu>\n            <DropdownMenuTrigger render={<InputGroupButton variant=\"ghost\" />}>\n              Auto\n            </DropdownMenuTrigger>\n            <DropdownMenuContent\n              side=\"top\"\n              align=\"start\"\n              className=\"[--radius:0.95rem]\"\n            >\n              <DropdownMenuGroup>\n                <DropdownMenuItem>Auto</DropdownMenuItem>\n                <DropdownMenuItem>Agent</DropdownMenuItem>\n                <DropdownMenuItem>Manual</DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n          <Separator orientation=\"vertical\" className=\"!h-4\" />\n          <InputGroupButton\n            variant=\"default\"\n            className=\"rounded-full\"\n            size=\"icon-xs\"\n            disabled\n          >\n            <ArrowUpIcon />\n            <span className=\"sr-only\">Send</span>\n          </InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"@shadcn\" />\n        <InputGroupAddon align=\"inline-end\">\n          <div className=\"bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full\">\n            <IconCheck className=\"size-3\" />\n          </div>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n",
+      "content": "import { IconCheck, IconInfoCircle, IconPlus } from \"@tabler/icons-react\"\nimport { ArrowUpIcon, Search } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/base-mira/ui/input-group\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-mira/ui/tooltip\"\n\nexport default function InputGroupDemo() {\n  return (\n    <div className=\"grid w-full max-w-sm gap-6\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Search...\" />\n        <InputGroupAddon>\n          <Search />\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n        <InputGroupAddon>\n          <InputGroupText>https://</InputGroupText>\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n              }\n            >\n              <IconInfoCircle />\n            </TooltipTrigger>\n            <TooltipContent>This is content in a tooltip.</TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n        <InputGroupAddon align=\"block-end\">\n          <InputGroupButton\n            variant=\"outline\"\n            className=\"rounded-full\"\n            size=\"icon-xs\"\n          >\n            <IconPlus />\n          </InputGroupButton>\n          <DropdownMenu>\n            <DropdownMenuTrigger render={<InputGroupButton variant=\"ghost\" />}>\n              Auto\n            </DropdownMenuTrigger>\n            <DropdownMenuContent\n              side=\"top\"\n              align=\"start\"\n              className=\"[--radius:0.95rem]\"\n            >\n              <DropdownMenuGroup>\n                <DropdownMenuItem>Auto</DropdownMenuItem>\n                <DropdownMenuItem>Agent</DropdownMenuItem>\n                <DropdownMenuItem>Manual</DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n          <Separator orientation=\"vertical\" className=\"!h-4\" />\n          <InputGroupButton\n            variant=\"default\"\n            className=\"rounded-full\"\n            size=\"icon-xs\"\n            disabled\n          >\n            <ArrowUpIcon />\n            <span className=\"sr-only\">Send</span>\n          </InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"@shadcn\" />\n        <InputGroupAddon align=\"inline-end\">\n          <div className=\"bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full\">\n            <IconCheck className=\"size-3\" />\n          </div>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/input-group-tooltip.json b/apps/v4/public/r/styles/base-mira/input-group-tooltip.json
index d3231eaae..96f7e0745 100644
--- a/apps/v4/public/r/styles/base-mira/input-group-tooltip.json
+++ b/apps/v4/public/r/styles/base-mira/input-group-tooltip.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-mira/demo/input-group-tooltip.tsx",
-      "content": "import { HelpCircle, InfoIcon } from \"lucide-react\"\n\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-mira/ui/input-group\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-mira/ui/tooltip\"\n\nexport default function InputGroupTooltip() {\n  return (\n    <div className=\"grid w-full max-w-sm gap-4\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Enter password\" type=\"password\" />\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <InputGroupButton\n                  variant=\"ghost\"\n                  aria-label=\"Info\"\n                  size=\"icon-xs\"\n                />\n              }\n            >\n              <InfoIcon />\n            </TooltipTrigger>\n            <TooltipContent>\n              <p>Password must be at least 8 characters</p>\n            </TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Your email address\" />\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <InputGroupButton\n                  variant=\"ghost\"\n                  aria-label=\"Help\"\n                  size=\"icon-xs\"\n                />\n              }\n            >\n              <HelpCircle />\n            </TooltipTrigger>\n            <TooltipContent>\n              <p>We&apos;ll use this to send you notifications</p>\n            </TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Enter API key\" />\n        <Tooltip>\n          <TooltipTrigger render={<InputGroupAddon />}>\n            <InputGroupButton\n              variant=\"ghost\"\n              aria-label=\"Help\"\n              size=\"icon-xs\"\n            >\n              <HelpCircle />\n            </InputGroupButton>\n          </TooltipTrigger>\n          <TooltipContent side=\"left\">\n            <p>Click for help with API keys</p>\n          </TooltipContent>\n        </Tooltip>\n      </InputGroup>\n    </div>\n  )\n}\n",
+      "content": "import { HelpCircle, InfoIcon } from \"lucide-react\"\n\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-mira/ui/input-group\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-mira/ui/tooltip\"\n\nexport default function InputGroupTooltip() {\n  return (\n    <div className=\"grid w-full max-w-sm gap-4\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Enter password\" type=\"password\" />\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <InputGroupButton\n                  variant=\"ghost\"\n                  aria-label=\"Info\"\n                  size=\"icon-xs\"\n                />\n              }\n            >\n              <InfoIcon />\n            </TooltipTrigger>\n            <TooltipContent>\n              <p>Password must be at least 8 characters</p>\n            </TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Your email address\" />\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <InputGroupButton\n                  variant=\"ghost\"\n                  aria-label=\"Help\"\n                  size=\"icon-xs\"\n                />\n              }\n            >\n              <HelpCircle />\n            </TooltipTrigger>\n            <TooltipContent>\n              <p>We&apos;ll use this to send you notifications</p>\n            </TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Enter API key\" />\n        <Tooltip>\n          <TooltipTrigger render={<InputGroupAddon />}>\n            <InputGroupButton variant=\"ghost\" aria-label=\"Help\" size=\"icon-xs\">\n              <HelpCircle />\n            </InputGroupButton>\n          </TooltipTrigger>\n          <TooltipContent side=\"left\">\n            <p>Click for help with API keys</p>\n          </TooltipContent>\n        </Tooltip>\n      </InputGroup>\n    </div>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/item-dropdown.json b/apps/v4/public/r/styles/base-mira/item-dropdown.json
index b7526e084..678d74644 100644
--- a/apps/v4/public/r/styles/base-mira/item-dropdown.json
+++ b/apps/v4/public/r/styles/base-mira/item-dropdown.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-mira/demo/item-dropdown.tsx",
-      "content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-mira/ui/avatar\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\n\nconst people = [\n  {\n    username: \"shadcn\",\n    avatar: \"https://github.com/shadcn.png\",\n    email: \"shadcn@vercel.com\",\n  },\n  {\n    username: \"maxleiter\",\n    avatar: \"https://github.com/maxleiter.png\",\n    email: \"maxleiter@vercel.com\",\n  },\n  {\n    username: \"evilrabbit\",\n    avatar: \"https://github.com/evilrabbit.png\",\n    email: \"evilrabbit@vercel.com\",\n  },\n]\n\nexport function ItemDropdown() {\n  return (\n    <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" size=\"sm\" className=\"w-fit\" />}\n        >\n          Select <ChevronDownIcon />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n          <DropdownMenuGroup>\n            {people.map((person) => (\n              <DropdownMenuItem key={person.username} className=\"p-0\">\n                <Item size=\"sm\" className=\"w-full p-2\">\n                  <ItemMedia>\n                    <Avatar className=\"size-8\">\n                      <AvatarImage src={person.avatar} className=\"grayscale\" />\n                      <AvatarFallback>{person.username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0.5\">\n                    <ItemTitle>{person.username}</ItemTitle>\n                    <ItemDescription>{person.email}</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-mira/ui/avatar\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\n\nconst people = [\n  {\n    username: \"shadcn\",\n    avatar: \"https://github.com/shadcn.png\",\n    email: \"shadcn@vercel.com\",\n  },\n  {\n    username: \"maxleiter\",\n    avatar: \"https://github.com/maxleiter.png\",\n    email: \"maxleiter@vercel.com\",\n  },\n  {\n    username: \"evilrabbit\",\n    avatar: \"https://github.com/evilrabbit.png\",\n    email: \"evilrabbit@vercel.com\",\n  },\n]\n\nexport function ItemDropdown() {\n  return (\n    <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" size=\"sm\" className=\"w-fit\" />}\n        >\n          Select <ChevronDownIcon />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n          <DropdownMenuGroup>\n            {people.map((person) => (\n              <DropdownMenuItem key={person.username} className=\"p-0\">\n                <Item size=\"sm\" className=\"w-full p-2\">\n                  <ItemMedia>\n                    <Avatar className=\"size-8\">\n                      <AvatarImage src={person.avatar} className=\"grayscale\" />\n                      <AvatarFallback>\n                        {person.username.charAt(0)}\n                      </AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0.5\">\n                    <ItemTitle>{person.username}</ItemTitle>\n                    <ItemDescription>{person.email}</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/sheet-side.json b/apps/v4/public/r/styles/base-mira/sheet-side.json
index 5a171f2be..fbfa04df1 100644
--- a/apps/v4/public/r/styles/base-mira/sheet-side.json
+++ b/apps/v4/public/r/styles/base-mira/sheet-side.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-mira/demo/sheet-side.tsx",
-      "content": "\"use client\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/base-mira/ui/sheet\"\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\ntype SheetSide = (typeof SHEET_SIDES)[number]\n\nexport default function SheetSide() {\n  return (\n    <div className=\"grid grid-cols-2 gap-2\">\n      {SHEET_SIDES.map((side) => (\n        <Sheet key={side}>\n          <SheetTrigger render={<Button variant=\"outline\" />}>{side}</SheetTrigger>\n          <SheetContent side={side}>\n            <SheetHeader>\n              <SheetTitle>Edit profile</SheetTitle>\n              <SheetDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done.\n              </SheetDescription>\n            </SheetHeader>\n            <div className=\"grid gap-4 py-4\">\n              <div className=\"grid grid-cols-4 items-center gap-4\">\n                <Label htmlFor=\"name\" className=\"text-right\">\n                  Name\n                </Label>\n                <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n              </div>\n              <div className=\"grid grid-cols-4 items-center gap-4\">\n                <Label htmlFor=\"username\" className=\"text-right\">\n                  Username\n                </Label>\n                <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n              </div>\n            </div>\n            <SheetFooter>\n              <SheetClose render={<Button type=\"submit\" />}>\n                Save changes\n              </SheetClose>\n            </SheetFooter>\n          </SheetContent>\n        </Sheet>\n      ))}\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/base-mira/ui/sheet\"\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\ntype SheetSide = (typeof SHEET_SIDES)[number]\n\nexport default function SheetSide() {\n  return (\n    <div className=\"grid grid-cols-2 gap-2\">\n      {SHEET_SIDES.map((side) => (\n        <Sheet key={side}>\n          <SheetTrigger render={<Button variant=\"outline\" />}>\n            {side}\n          </SheetTrigger>\n          <SheetContent side={side}>\n            <SheetHeader>\n              <SheetTitle>Edit profile</SheetTitle>\n              <SheetDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done.\n              </SheetDescription>\n            </SheetHeader>\n            <div className=\"grid gap-4 py-4\">\n              <div className=\"grid grid-cols-4 items-center gap-4\">\n                <Label htmlFor=\"name\" className=\"text-right\">\n                  Name\n                </Label>\n                <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n              </div>\n              <div className=\"grid grid-cols-4 items-center gap-4\">\n                <Label htmlFor=\"username\" className=\"text-right\">\n                  Username\n                </Label>\n                <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n              </div>\n            </div>\n            <SheetFooter>\n              <SheetClose render={<Button type=\"submit\" />}>\n                Save changes\n              </SheetClose>\n            </SheetFooter>\n          </SheetContent>\n        </Sheet>\n      ))}\n    </div>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/tooltip-demo.json b/apps/v4/public/r/styles/base-mira/tooltip-demo.json
index a11a82994..1ebed659c 100644
--- a/apps/v4/public/r/styles/base-mira/tooltip-demo.json
+++ b/apps/v4/public/r/styles/base-mira/tooltip-demo.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-mira/demo/tooltip-demo.tsx",
-      "content": "import { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-mira/ui/tooltip\"\n\nexport function TooltipDemo() {\n  return (\n    <Tooltip>\n      <TooltipTrigger render={<Button variant=\"outline\" />}>Hover</TooltipTrigger>\n      <TooltipContent>\n        <p>Add to library</p>\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-mira/ui/tooltip\"\n\nexport function TooltipDemo() {\n  return (\n    <Tooltip>\n      <TooltipTrigger render={<Button variant=\"outline\" />}>\n        Hover\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>Add to library</p>\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/button-group-demo.json b/apps/v4/public/r/styles/base-nova/button-group-demo.json
index b324e63a9..dba609ef7 100644
--- a/apps/v4/public/r/styles/base-nova/button-group-demo.json
+++ b/apps/v4/public/r/styles/base-nova/button-group-demo.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-nova/demo/button-group-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArchiveIcon,\n  ArrowLeftIcon,\n  CalendarPlusIcon,\n  ClockIcon,\n  ListFilterIcon,\n  MailCheckIcon,\n  MoreHorizontalIcon,\n  TagIcon,\n  Trash2Icon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-nova/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\n\nexport default function ButtonGroupDemo() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <ButtonGroup>\n      <ButtonGroup className=\"hidden sm:flex\">\n        <Button variant=\"outline\" size=\"icon\" aria-label=\"Go Back\">\n          <ArrowLeftIcon />\n        </Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\">Archive</Button>\n        <Button variant=\"outline\">Report</Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\">Snooze</Button>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" size=\"icon\" aria-label=\"More Options\" />}\n          >\n            <MoreHorizontalIcon />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" className=\"w-52\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <MailCheckIcon />\n                Mark as Read\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <ArchiveIcon />\n                Archive\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <ClockIcon />\n                Snooze\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CalendarPlusIcon />\n                Add to Calendar\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <ListFilterIcon />\n                Add to List\n              </DropdownMenuItem>\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>\n                  <TagIcon />\n                  Label As...\n                </DropdownMenuSubTrigger>\n                <DropdownMenuSubContent>\n                  <DropdownMenuRadioGroup\n                    value={label}\n                    onValueChange={setLabel}\n                  >\n                    <DropdownMenuRadioItem value=\"personal\">\n                      Personal\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"work\">\n                      Work\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"other\">\n                      Other\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuSub>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem variant=\"destructive\">\n                <Trash2Icon />\n                Trash\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </ButtonGroup>\n    </ButtonGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArchiveIcon,\n  ArrowLeftIcon,\n  CalendarPlusIcon,\n  ClockIcon,\n  ListFilterIcon,\n  MailCheckIcon,\n  MoreHorizontalIcon,\n  TagIcon,\n  Trash2Icon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-nova/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\n\nexport default function ButtonGroupDemo() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <ButtonGroup>\n      <ButtonGroup className=\"hidden sm:flex\">\n        <Button variant=\"outline\" size=\"icon\" aria-label=\"Go Back\">\n          <ArrowLeftIcon />\n        </Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\">Archive</Button>\n        <Button variant=\"outline\">Report</Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\">Snooze</Button>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"outline\" size=\"icon\" aria-label=\"More Options\" />\n            }\n          >\n            <MoreHorizontalIcon />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" className=\"w-52\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <MailCheckIcon />\n                Mark as Read\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <ArchiveIcon />\n                Archive\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <ClockIcon />\n                Snooze\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CalendarPlusIcon />\n                Add to Calendar\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <ListFilterIcon />\n                Add to List\n              </DropdownMenuItem>\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>\n                  <TagIcon />\n                  Label As...\n                </DropdownMenuSubTrigger>\n                <DropdownMenuSubContent>\n                  <DropdownMenuRadioGroup\n                    value={label}\n                    onValueChange={setLabel}\n                  >\n                    <DropdownMenuRadioItem value=\"personal\">\n                      Personal\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"work\">\n                      Work\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"other\">\n                      Other\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuSub>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem variant=\"destructive\">\n                <Trash2Icon />\n                Trash\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </ButtonGroup>\n    </ButtonGroup>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/button-group-dropdown.json b/apps/v4/public/r/styles/base-nova/button-group-dropdown.json
index 4ad811482..899ce55e7 100644
--- a/apps/v4/public/r/styles/base-nova/button-group-dropdown.json
+++ b/apps/v4/public/r/styles/base-nova/button-group-dropdown.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-nova/demo/button-group-dropdown.tsx",
-      "content": "\"use client\"\n\nimport {\n  AlertTriangleIcon,\n  CheckIcon,\n  ChevronDownIcon,\n  CopyIcon,\n  ShareIcon,\n  TrashIcon,\n  UserRoundXIcon,\n  VolumeOffIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-nova/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\n\nexport default function ButtonGroupDropdown() {\n  return (\n    <ButtonGroup>\n      <Button variant=\"outline\">Follow</Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger render={<Button variant=\"outline\" className=\"!pl-2\" />}>\n          <ChevronDownIcon />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"[--radius:1rem]\">\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <VolumeOffIcon />\n              Mute Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CheckIcon />\n              Mark as Read\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <AlertTriangleIcon />\n              Report Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <UserRoundXIcon />\n              Block User\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <ShareIcon />\n              Share Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CopyIcon />\n              Copy Conversation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <TrashIcon />\n              Delete Conversation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </ButtonGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  AlertTriangleIcon,\n  CheckIcon,\n  ChevronDownIcon,\n  CopyIcon,\n  ShareIcon,\n  TrashIcon,\n  UserRoundXIcon,\n  VolumeOffIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-nova/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\n\nexport default function ButtonGroupDropdown() {\n  return (\n    <ButtonGroup>\n      <Button variant=\"outline\">Follow</Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"!pl-2\" />}\n        >\n          <ChevronDownIcon />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"[--radius:1rem]\">\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <VolumeOffIcon />\n              Mute Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CheckIcon />\n              Mark as Read\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <AlertTriangleIcon />\n              Report Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <UserRoundXIcon />\n              Block User\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <ShareIcon />\n              Share Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CopyIcon />\n              Copy Conversation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <TrashIcon />\n              Delete Conversation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </ButtonGroup>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/button-group-popover.json b/apps/v4/public/r/styles/base-nova/button-group-popover.json
index 1b9dca207..5dc19e50e 100644
--- a/apps/v4/public/r/styles/base-nova/button-group-popover.json
+++ b/apps/v4/public/r/styles/base-nova/button-group-popover.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-nova/demo/button-group-popover.tsx",
-      "content": "import { BotIcon, ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-nova/ui/button-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-nova/ui/popover\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport { Textarea } from \"@/registry/base-nova/ui/textarea\"\n\nexport default function ButtonGroupPopover() {\n  return (\n    <ButtonGroup>\n      <Button variant=\"outline\">\n        <BotIcon /> Copilot\n      </Button>\n      <Popover>\n        <PopoverTrigger\n          render={<Button variant=\"outline\" size=\"icon\" aria-label=\"Open Popover\" />}\n        >\n          <ChevronDownIcon />\n        </PopoverTrigger>\n        <PopoverContent align=\"end\" className=\"rounded-xl p-0 text-sm\">\n          <div className=\"px-4 py-3\">\n            <div className=\"text-sm font-medium\">Agent Tasks</div>\n          </div>\n          <Separator />\n          <div className=\"p-4 text-sm *:[p:not(:last-child)]:mb-2\">\n            <Textarea\n              placeholder=\"Describe your task in natural language.\"\n              className=\"mb-4 resize-none\"\n            />\n            <p className=\"font-medium\">Start a new task with Copilot</p>\n            <p className=\"text-muted-foreground\">\n              Describe your task in natural language. Copilot will work in the\n              background and open a pull request for your review.\n            </p>\n          </div>\n        </PopoverContent>\n      </Popover>\n    </ButtonGroup>\n  )\n}\n",
+      "content": "import { BotIcon, ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-nova/ui/button-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-nova/ui/popover\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport { Textarea } from \"@/registry/base-nova/ui/textarea\"\n\nexport default function ButtonGroupPopover() {\n  return (\n    <ButtonGroup>\n      <Button variant=\"outline\">\n        <BotIcon /> Copilot\n      </Button>\n      <Popover>\n        <PopoverTrigger\n          render={\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Open Popover\" />\n          }\n        >\n          <ChevronDownIcon />\n        </PopoverTrigger>\n        <PopoverContent align=\"end\" className=\"rounded-xl p-0 text-sm\">\n          <div className=\"px-4 py-3\">\n            <div className=\"text-sm font-medium\">Agent Tasks</div>\n          </div>\n          <Separator />\n          <div className=\"p-4 text-sm *:[p:not(:last-child)]:mb-2\">\n            <Textarea\n              placeholder=\"Describe your task in natural language.\"\n              className=\"mb-4 resize-none\"\n            />\n            <p className=\"font-medium\">Start a new task with Copilot</p>\n            <p className=\"text-muted-foreground\">\n              Describe your task in natural language. Copilot will work in the\n              background and open a pull request for your review.\n            </p>\n          </div>\n        </PopoverContent>\n      </Popover>\n    </ButtonGroup>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/combobox-popover.json b/apps/v4/public/r/styles/base-nova/combobox-popover.json
index 91a966ac1..938983636 100644
--- a/apps/v4/public/r/styles/base-nova/combobox-popover.json
+++ b/apps/v4/public/r/styles/base-nova/combobox-popover.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-nova/demo/combobox-popover.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/base-nova/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-nova/ui/popover\"\n\ntype Status = {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: \"backlog\",\n    label: \"Backlog\",\n  },\n  {\n    value: \"todo\",\n    label: \"Todo\",\n  },\n  {\n    value: \"in progress\",\n    label: \"In Progress\",\n  },\n  {\n    value: \"done\",\n    label: \"Done\",\n  },\n  {\n    value: \"canceled\",\n    label: \"Canceled\",\n  },\n]\n\nexport default function ComboboxPopover() {\n  const [open, setOpen] = React.useState(false)\n  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n    null\n  )\n\n  return (\n    <div className=\"flex items-center space-x-4\">\n      <p className=\"text-muted-foreground text-sm\">Status</p>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger\n          render={<Button variant=\"outline\" className=\"w-[150px] justify-start\" />}\n        >\n          {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n        </PopoverTrigger>\n        <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n          <Command>\n            <CommandInput placeholder=\"Change status...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup>\n                {statuses.map((status) => (\n                  <CommandItem\n                    key={status.value}\n                    value={status.value}\n                    onSelect={(value) => {\n                      setSelectedStatus(\n                        statuses.find((priority) => priority.value === value) ||\n                          null\n                      )\n                      setOpen(false)\n                    }}\n                  >\n                    {status.label}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/base-nova/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-nova/ui/popover\"\n\ntype Status = {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: \"backlog\",\n    label: \"Backlog\",\n  },\n  {\n    value: \"todo\",\n    label: \"Todo\",\n  },\n  {\n    value: \"in progress\",\n    label: \"In Progress\",\n  },\n  {\n    value: \"done\",\n    label: \"Done\",\n  },\n  {\n    value: \"canceled\",\n    label: \"Canceled\",\n  },\n]\n\nexport default function ComboboxPopover() {\n  const [open, setOpen] = React.useState(false)\n  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n    null\n  )\n\n  return (\n    <div className=\"flex items-center space-x-4\">\n      <p className=\"text-muted-foreground text-sm\">Status</p>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger\n          render={\n            <Button variant=\"outline\" className=\"w-[150px] justify-start\" />\n          }\n        >\n          {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n        </PopoverTrigger>\n        <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n          <Command>\n            <CommandInput placeholder=\"Change status...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup>\n                {statuses.map((status) => (\n                  <CommandItem\n                    key={status.value}\n                    value={status.value}\n                    onSelect={(value) => {\n                      setSelectedStatus(\n                        statuses.find((priority) => priority.value === value) ||\n                          null\n                      )\n                      setOpen(false)\n                    }}\n                  >\n                    {status.label}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/dialog-demo.json b/apps/v4/public/r/styles/base-nova/dialog-demo.json
index e97d0943b..b8e52c43b 100644
--- a/apps/v4/public/r/styles/base-nova/dialog-demo.json
+++ b/apps/v4/public/r/styles/base-nova/dialog-demo.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-nova/demo/dialog-demo.tsx",
-      "content": "import { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-nova/ui/dialog\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport { Label } from \"@/registry/base-nova/ui/label\"\n\nexport function DialogDemo() {\n  return (\n    <Dialog>\n      <form>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"grid gap-4\">\n            <div className=\"grid gap-3\">\n              <Label htmlFor=\"name-1\">Name</Label>\n              <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n            </div>\n            <div className=\"grid gap-3\">\n              <Label htmlFor=\"username-1\">Username</Label>\n              <Input id=\"username-1\" name=\"username\" defaultValue=\"@peduarte\" />\n            </div>\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>Cancel</DialogClose>\n            <Button type=\"submit\">Save changes</Button>\n          </DialogFooter>\n        </DialogContent>\n      </form>\n    </Dialog>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-nova/ui/dialog\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport { Label } from \"@/registry/base-nova/ui/label\"\n\nexport function DialogDemo() {\n  return (\n    <Dialog>\n      <form>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"grid gap-4\">\n            <div className=\"grid gap-3\">\n              <Label htmlFor=\"name-1\">Name</Label>\n              <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n            </div>\n            <div className=\"grid gap-3\">\n              <Label htmlFor=\"username-1\">Username</Label>\n              <Input id=\"username-1\" name=\"username\" defaultValue=\"@peduarte\" />\n            </div>\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button type=\"submit\">Save changes</Button>\n          </DialogFooter>\n        </DialogContent>\n      </form>\n    </Dialog>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/drawer-demo.json b/apps/v4/public/r/styles/base-nova/drawer-demo.json
index 6f5c802fc..0e97cf89f 100644
--- a/apps/v4/public/r/styles/base-nova/drawer-demo.json
+++ b/apps/v4/public/r/styles/base-nova/drawer-demo.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-nova/demo/drawer-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/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\nconst data = [\n  {\n    goal: 400,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 239,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 349,\n  },\n]\n\nexport function DrawerDemo() {\n  const [goal, setGoal] = React.useState(350)\n\n  function onClick(adjustment: number) {\n    setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n  }\n\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Open Drawer</Button>\n        Open Drawer\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mx-auto w-full max-w-sm\">\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"p-4 pb-0\">\n            <div className=\"flex items-center justify-center space-x-2\">\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(-10)}\n                disabled={goal <= 200}\n              >\n                <Minus />\n                <span className=\"sr-only\">Decrease</span>\n              </Button>\n              <div className=\"flex-1 text-center\">\n                <div className=\"text-7xl font-bold tracking-tighter\">\n                  {goal}\n                </div>\n                <div className=\"text-muted-foreground text-[0.70rem] uppercase\">\n                  Calories/day\n                </div>\n              </div>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(10)}\n                disabled={goal >= 400}\n              >\n                <Plus />\n                <span className=\"sr-only\">Increase</span>\n              </Button>\n            </div>\n            <div className=\"mt-3 h-[120px]\">\n              <ResponsiveContainer width=\"100%\" height=\"100%\">\n                <BarChart data={data}>\n                  <Bar\n                    dataKey=\"goal\"\n                    style={\n                      {\n                        fill: \"hsl(var(--foreground))\",\n                        opacity: 0.9,\n                      } as React.CSSProperties\n                    }\n                  />\n                </BarChart>\n              </ResponsiveContainer>\n            </div>\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n              Cancel\n            </DrawerClose>\n          </DrawerFooter>\n        </div>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/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\nconst data = [\n  {\n    goal: 400,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 239,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 349,\n  },\n]\n\nexport function DrawerDemo() {\n  const [goal, setGoal] = React.useState(350)\n\n  function onClick(adjustment: number) {\n    setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n  }\n\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Open Drawer</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mx-auto w-full max-w-sm\">\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"p-4 pb-0\">\n            <div className=\"flex items-center justify-center space-x-2\">\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(-10)}\n                disabled={goal <= 200}\n              >\n                <Minus />\n                <span className=\"sr-only\">Decrease</span>\n              </Button>\n              <div className=\"flex-1 text-center\">\n                <div className=\"text-7xl font-bold tracking-tighter\">\n                  {goal}\n                </div>\n                <div className=\"text-muted-foreground text-[0.70rem] uppercase\">\n                  Calories/day\n                </div>\n              </div>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(10)}\n                disabled={goal >= 400}\n              >\n                <Plus />\n                <span className=\"sr-only\">Increase</span>\n              </Button>\n            </div>\n            <div className=\"mt-3 h-[120px]\">\n              <ResponsiveContainer width=\"100%\" height=\"100%\">\n                <BarChart data={data}>\n                  <Bar\n                    dataKey=\"goal\"\n                    style={\n                      {\n                        fill: \"hsl(var(--foreground))\",\n                        opacity: 0.9,\n                      } as React.CSSProperties\n                    }\n                  />\n                </BarChart>\n              </ResponsiveContainer>\n            </div>\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </div>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/drawer-dialog.json b/apps/v4/public/r/styles/base-nova/drawer-dialog.json
index b314ad8e1..07f7c349a 100644
--- a/apps/v4/public/r/styles/base-nova/drawer-dialog.json
+++ b/apps/v4/public/r/styles/base-nova/drawer-dialog.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-nova/demo/drawer-dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-nova/ui/dialog\"\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 { Input } from \"@/registry/base-nova/ui/input\"\nimport { Label } from \"@/registry/base-nova/ui/label\"\n\nexport function DrawerDialogDemo() {\n  const [open, setOpen] = React.useState(false)\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n  if (isDesktop) {\n    return (\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Edit Profile\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <ProfileForm />\n        </DialogContent>\n      </Dialog>\n    )\n  }\n\n  return (\n    <Drawer open={open} onOpenChange={setOpen}>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Edit Profile</Button>\n        Edit Profile\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"text-left\">\n          <DrawerTitle>Edit profile</DrawerTitle>\n          <DrawerDescription>\n            Make changes to your profile here. Click save when you&apos;re done.\n          </DrawerDescription>\n        </DrawerHeader>\n        <ProfileForm className=\"px-4\" />\n        <DrawerFooter className=\"pt-2\">\n          <DrawerClose asChild>\n            <Button variant=\"outline\">Cancel</Button>\n            Cancel\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n\nfunction ProfileForm({ className }: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"grid items-start gap-6\", className)}>\n      <div className=\"grid gap-3\">\n        <Label htmlFor=\"email\">Email</Label>\n        <Input type=\"email\" id=\"email\" defaultValue=\"shadcn@example.com\" />\n      </div>\n      <div className=\"grid gap-3\">\n        <Label htmlFor=\"username\">Username</Label>\n        <Input id=\"username\" defaultValue=\"@shadcn\" />\n      </div>\n      <Button type=\"submit\">Save changes</Button>\n    </form>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-nova/ui/dialog\"\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 { Input } from \"@/registry/base-nova/ui/input\"\nimport { Label } from \"@/registry/base-nova/ui/label\"\n\nexport function DrawerDialogDemo() {\n  const [open, setOpen] = React.useState(false)\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n  if (isDesktop) {\n    return (\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Edit Profile\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <ProfileForm />\n        </DialogContent>\n      </Dialog>\n    )\n  }\n\n  return (\n    <Drawer open={open} onOpenChange={setOpen}>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Edit Profile</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"text-left\">\n          <DrawerTitle>Edit profile</DrawerTitle>\n          <DrawerDescription>\n            Make changes to your profile here. Click save when you&apos;re done.\n          </DrawerDescription>\n        </DrawerHeader>\n        <ProfileForm className=\"px-4\" />\n        <DrawerFooter className=\"pt-2\">\n          <DrawerClose asChild>\n            <Button variant=\"outline\">Cancel</Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n\nfunction ProfileForm({ className }: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"grid items-start gap-6\", className)}>\n      <div className=\"grid gap-3\">\n        <Label htmlFor=\"email\">Email</Label>\n        <Input type=\"email\" id=\"email\" defaultValue=\"shadcn@example.com\" />\n      </div>\n      <div className=\"grid gap-3\">\n        <Label htmlFor=\"username\">Username</Label>\n        <Input id=\"username\" defaultValue=\"@shadcn\" />\n      </div>\n      <Button type=\"submit\">Save changes</Button>\n    </form>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/dropdown-menu-dialog.json b/apps/v4/public/r/styles/base-nova/dropdown-menu-dialog.json
index 56724a7f3..13ae88e90 100644
--- a/apps/v4/public/r/styles/base-nova/dropdown-menu-dialog.json
+++ b/apps/v4/public/r/styles/base-nova/dropdown-menu-dialog.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-nova/demo/dropdown-menu-dialog.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { MoreHorizontalIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/base-nova/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport { Label } from \"@/registry/base-nova/ui/label\"\nimport { Textarea } from \"@/registry/base-nova/ui/textarea\"\n\nexport function DropdownMenuDialog() {\n  const [showNewDialog, setShowNewDialog] = useState(false)\n  const [showShareDialog, setShowShareDialog] = useState(false)\n\n  return (\n    <>\n      <DropdownMenu modal={false}>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" aria-label=\"Open menu\" size=\"icon-sm\" />}\n        >\n          <MoreHorizontalIcon />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-40\" align=\"end\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File Actions</DropdownMenuLabel>\n            <DropdownMenuItem onSelect={() => setShowNewDialog(true)}>\n              New File...\n            </DropdownMenuItem>\n            <DropdownMenuItem onSelect={() => setShowShareDialog(true)}>\n              Share...\n            </DropdownMenuItem>\n            <DropdownMenuItem disabled>Download</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n      <Dialog open={showNewDialog} onOpenChange={setShowNewDialog}>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Create New File</DialogTitle>\n            <DialogDescription>\n              Provide a name for your new file. Click create when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <FieldGroup className=\"pb-3\">\n            <Field>\n              <FieldLabel htmlFor=\"filename\">File Name</FieldLabel>\n              <Input id=\"filename\" name=\"filename\" placeholder=\"document.txt\" />\n            </Field>\n          </FieldGroup>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button type=\"submit\">Create</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n      <Dialog open={showShareDialog} onOpenChange={setShowShareDialog}>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Share File</DialogTitle>\n            <DialogDescription>\n              Anyone with the link will be able to view this file.\n            </DialogDescription>\n          </DialogHeader>\n          <FieldGroup className=\"py-3\">\n            <Field>\n              <Label htmlFor=\"email\">Email Address</Label>\n              <Input\n                id=\"email\"\n                name=\"email\"\n                type=\"email\"\n                placeholder=\"shadcn@vercel.com\"\n                autoComplete=\"off\"\n              />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"message\">Message (Optional)</FieldLabel>\n              <Textarea\n                id=\"message\"\n                name=\"message\"\n                placeholder=\"Check out this file\"\n              />\n            </Field>\n          </FieldGroup>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button type=\"submit\">Send Invite</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { MoreHorizontalIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/base-nova/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport { Label } from \"@/registry/base-nova/ui/label\"\nimport { Textarea } from \"@/registry/base-nova/ui/textarea\"\n\nexport function DropdownMenuDialog() {\n  const [showNewDialog, setShowNewDialog] = useState(false)\n  const [showShareDialog, setShowShareDialog] = useState(false)\n\n  return (\n    <>\n      <DropdownMenu modal={false}>\n        <DropdownMenuTrigger\n          render={\n            <Button variant=\"outline\" aria-label=\"Open menu\" size=\"icon-sm\" />\n          }\n        >\n          <MoreHorizontalIcon />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-40\" align=\"end\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File Actions</DropdownMenuLabel>\n            <DropdownMenuItem onSelect={() => setShowNewDialog(true)}>\n              New File...\n            </DropdownMenuItem>\n            <DropdownMenuItem onSelect={() => setShowShareDialog(true)}>\n              Share...\n            </DropdownMenuItem>\n            <DropdownMenuItem disabled>Download</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n      <Dialog open={showNewDialog} onOpenChange={setShowNewDialog}>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Create New File</DialogTitle>\n            <DialogDescription>\n              Provide a name for your new file. Click create when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <FieldGroup className=\"pb-3\">\n            <Field>\n              <FieldLabel htmlFor=\"filename\">File Name</FieldLabel>\n              <Input id=\"filename\" name=\"filename\" placeholder=\"document.txt\" />\n            </Field>\n          </FieldGroup>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button type=\"submit\">Create</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n      <Dialog open={showShareDialog} onOpenChange={setShowShareDialog}>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Share File</DialogTitle>\n            <DialogDescription>\n              Anyone with the link will be able to view this file.\n            </DialogDescription>\n          </DialogHeader>\n          <FieldGroup className=\"py-3\">\n            <Field>\n              <Label htmlFor=\"email\">Email Address</Label>\n              <Input\n                id=\"email\"\n                name=\"email\"\n                type=\"email\"\n                placeholder=\"shadcn@vercel.com\"\n                autoComplete=\"off\"\n              />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"message\">Message (Optional)</FieldLabel>\n              <Textarea\n                id=\"message\"\n                name=\"message\"\n                placeholder=\"Check out this file\"\n              />\n            </Field>\n          </FieldGroup>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button type=\"submit\">Send Invite</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/input-group-demo.json b/apps/v4/public/r/styles/base-nova/input-group-demo.json
index 3c00cf98e..96a417e39 100644
--- a/apps/v4/public/r/styles/base-nova/input-group-demo.json
+++ b/apps/v4/public/r/styles/base-nova/input-group-demo.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-nova/demo/input-group-demo.tsx",
-      "content": "import { IconCheck, IconInfoCircle, IconPlus } from \"@tabler/icons-react\"\nimport { ArrowUpIcon, Search } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/base-nova/ui/input-group\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-nova/ui/tooltip\"\n\nexport default function InputGroupDemo() {\n  return (\n    <div className=\"grid w-full max-w-sm gap-6\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Search...\" />\n        <InputGroupAddon>\n          <Search />\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n        <InputGroupAddon>\n          <InputGroupText>https://</InputGroupText>\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger\n              render={<InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />}\n            >\n              <IconInfoCircle />\n            </TooltipTrigger>\n            <TooltipContent>This is content in a tooltip.</TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n        <InputGroupAddon align=\"block-end\">\n          <InputGroupButton\n            variant=\"outline\"\n            className=\"rounded-full\"\n            size=\"icon-xs\"\n          >\n            <IconPlus />\n          </InputGroupButton>\n          <DropdownMenu>\n            <DropdownMenuTrigger render={<InputGroupButton variant=\"ghost\" />}>\n              Auto\n            </DropdownMenuTrigger>\n            <DropdownMenuContent\n              side=\"top\"\n              align=\"start\"\n              className=\"[--radius:0.95rem]\"\n            >\n              <DropdownMenuGroup>\n                <DropdownMenuItem>Auto</DropdownMenuItem>\n                <DropdownMenuItem>Agent</DropdownMenuItem>\n                <DropdownMenuItem>Manual</DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n          <Separator orientation=\"vertical\" className=\"!h-4\" />\n          <InputGroupButton\n            variant=\"default\"\n            className=\"rounded-full\"\n            size=\"icon-xs\"\n            disabled\n          >\n            <ArrowUpIcon />\n            <span className=\"sr-only\">Send</span>\n          </InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"@shadcn\" />\n        <InputGroupAddon align=\"inline-end\">\n          <div className=\"bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full\">\n            <IconCheck className=\"size-3\" />\n          </div>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n",
+      "content": "import { IconCheck, IconInfoCircle, IconPlus } from \"@tabler/icons-react\"\nimport { ArrowUpIcon, Search } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/base-nova/ui/input-group\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-nova/ui/tooltip\"\n\nexport default function InputGroupDemo() {\n  return (\n    <div className=\"grid w-full max-w-sm gap-6\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Search...\" />\n        <InputGroupAddon>\n          <Search />\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n        <InputGroupAddon>\n          <InputGroupText>https://</InputGroupText>\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n              }\n            >\n              <IconInfoCircle />\n            </TooltipTrigger>\n            <TooltipContent>This is content in a tooltip.</TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n        <InputGroupAddon align=\"block-end\">\n          <InputGroupButton\n            variant=\"outline\"\n            className=\"rounded-full\"\n            size=\"icon-xs\"\n          >\n            <IconPlus />\n          </InputGroupButton>\n          <DropdownMenu>\n            <DropdownMenuTrigger render={<InputGroupButton variant=\"ghost\" />}>\n              Auto\n            </DropdownMenuTrigger>\n            <DropdownMenuContent\n              side=\"top\"\n              align=\"start\"\n              className=\"[--radius:0.95rem]\"\n            >\n              <DropdownMenuGroup>\n                <DropdownMenuItem>Auto</DropdownMenuItem>\n                <DropdownMenuItem>Agent</DropdownMenuItem>\n                <DropdownMenuItem>Manual</DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n          <Separator orientation=\"vertical\" className=\"!h-4\" />\n          <InputGroupButton\n            variant=\"default\"\n            className=\"rounded-full\"\n            size=\"icon-xs\"\n            disabled\n          >\n            <ArrowUpIcon />\n            <span className=\"sr-only\">Send</span>\n          </InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"@shadcn\" />\n        <InputGroupAddon align=\"inline-end\">\n          <div className=\"bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full\">\n            <IconCheck className=\"size-3\" />\n          </div>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/input-group-tooltip.json b/apps/v4/public/r/styles/base-nova/input-group-tooltip.json
index f05977a86..c6e02fffd 100644
--- a/apps/v4/public/r/styles/base-nova/input-group-tooltip.json
+++ b/apps/v4/public/r/styles/base-nova/input-group-tooltip.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-nova/demo/input-group-tooltip.tsx",
-      "content": "import { HelpCircle, InfoIcon } from \"lucide-react\"\n\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-nova/ui/input-group\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-nova/ui/tooltip\"\n\nexport default function InputGroupTooltip() {\n  return (\n    <div className=\"grid w-full max-w-sm gap-4\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Enter password\" type=\"password\" />\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <InputGroupButton\n                  variant=\"ghost\"\n                  aria-label=\"Info\"\n                  size=\"icon-xs\"\n                />\n              }\n            >\n              <InfoIcon />\n            </TooltipTrigger>\n            <TooltipContent>\n              <p>Password must be at least 8 characters</p>\n            </TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Your email address\" />\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <InputGroupButton\n                  variant=\"ghost\"\n                  aria-label=\"Help\"\n                  size=\"icon-xs\"\n                />\n              }\n            >\n              <HelpCircle />\n            </TooltipTrigger>\n            <TooltipContent>\n              <p>We&apos;ll use this to send you notifications</p>\n            </TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Enter API key\" />\n        <Tooltip>\n          <TooltipTrigger render={<InputGroupAddon />}>\n            <InputGroupButton\n              variant=\"ghost\"\n              aria-label=\"Help\"\n              size=\"icon-xs\"\n            >\n              <HelpCircle />\n            </InputGroupButton>\n          </TooltipTrigger>\n          <TooltipContent side=\"left\">\n            <p>Click for help with API keys</p>\n          </TooltipContent>\n        </Tooltip>\n      </InputGroup>\n    </div>\n  )\n}\n",
+      "content": "import { HelpCircle, InfoIcon } from \"lucide-react\"\n\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-nova/ui/input-group\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-nova/ui/tooltip\"\n\nexport default function InputGroupTooltip() {\n  return (\n    <div className=\"grid w-full max-w-sm gap-4\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Enter password\" type=\"password\" />\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <InputGroupButton\n                  variant=\"ghost\"\n                  aria-label=\"Info\"\n                  size=\"icon-xs\"\n                />\n              }\n            >\n              <InfoIcon />\n            </TooltipTrigger>\n            <TooltipContent>\n              <p>Password must be at least 8 characters</p>\n            </TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Your email address\" />\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <InputGroupButton\n                  variant=\"ghost\"\n                  aria-label=\"Help\"\n                  size=\"icon-xs\"\n                />\n              }\n            >\n              <HelpCircle />\n            </TooltipTrigger>\n            <TooltipContent>\n              <p>We&apos;ll use this to send you notifications</p>\n            </TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Enter API key\" />\n        <Tooltip>\n          <TooltipTrigger render={<InputGroupAddon />}>\n            <InputGroupButton variant=\"ghost\" aria-label=\"Help\" size=\"icon-xs\">\n              <HelpCircle />\n            </InputGroupButton>\n          </TooltipTrigger>\n          <TooltipContent side=\"left\">\n            <p>Click for help with API keys</p>\n          </TooltipContent>\n        </Tooltip>\n      </InputGroup>\n    </div>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/item-dropdown.json b/apps/v4/public/r/styles/base-nova/item-dropdown.json
index c54c39d89..3c1ce7b4c 100644
--- a/apps/v4/public/r/styles/base-nova/item-dropdown.json
+++ b/apps/v4/public/r/styles/base-nova/item-dropdown.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-nova/demo/item-dropdown.tsx",
-      "content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-nova/ui/avatar\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\n\nconst people = [\n  {\n    username: \"shadcn\",\n    avatar: \"https://github.com/shadcn.png\",\n    email: \"shadcn@vercel.com\",\n  },\n  {\n    username: \"maxleiter\",\n    avatar: \"https://github.com/maxleiter.png\",\n    email: \"maxleiter@vercel.com\",\n  },\n  {\n    username: \"evilrabbit\",\n    avatar: \"https://github.com/evilrabbit.png\",\n    email: \"evilrabbit@vercel.com\",\n  },\n]\n\nexport function ItemDropdown() {\n  return (\n    <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" size=\"sm\" className=\"w-fit\" />}\n        >\n          Select <ChevronDownIcon />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n          <DropdownMenuGroup>\n            {people.map((person) => (\n              <DropdownMenuItem key={person.username} className=\"p-0\">\n                <Item size=\"sm\" className=\"w-full p-2\">\n                  <ItemMedia>\n                    <Avatar className=\"size-8\">\n                      <AvatarImage src={person.avatar} className=\"grayscale\" />\n                      <AvatarFallback>{person.username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0.5\">\n                    <ItemTitle>{person.username}</ItemTitle>\n                    <ItemDescription>{person.email}</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-nova/ui/avatar\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\n\nconst people = [\n  {\n    username: \"shadcn\",\n    avatar: \"https://github.com/shadcn.png\",\n    email: \"shadcn@vercel.com\",\n  },\n  {\n    username: \"maxleiter\",\n    avatar: \"https://github.com/maxleiter.png\",\n    email: \"maxleiter@vercel.com\",\n  },\n  {\n    username: \"evilrabbit\",\n    avatar: \"https://github.com/evilrabbit.png\",\n    email: \"evilrabbit@vercel.com\",\n  },\n]\n\nexport function ItemDropdown() {\n  return (\n    <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" size=\"sm\" className=\"w-fit\" />}\n        >\n          Select <ChevronDownIcon />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n          <DropdownMenuGroup>\n            {people.map((person) => (\n              <DropdownMenuItem key={person.username} className=\"p-0\">\n                <Item size=\"sm\" className=\"w-full p-2\">\n                  <ItemMedia>\n                    <Avatar className=\"size-8\">\n                      <AvatarImage src={person.avatar} className=\"grayscale\" />\n                      <AvatarFallback>\n                        {person.username.charAt(0)}\n                      </AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0.5\">\n                    <ItemTitle>{person.username}</ItemTitle>\n                    <ItemDescription>{person.email}</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/sheet-side.json b/apps/v4/public/r/styles/base-nova/sheet-side.json
index 584490259..ec3628e75 100644
--- a/apps/v4/public/r/styles/base-nova/sheet-side.json
+++ b/apps/v4/public/r/styles/base-nova/sheet-side.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-nova/demo/sheet-side.tsx",
-      "content": "\"use client\"\n\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport { Label } from \"@/registry/base-nova/ui/label\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/base-nova/ui/sheet\"\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\ntype SheetSide = (typeof SHEET_SIDES)[number]\n\nexport default function SheetSide() {\n  return (\n    <div className=\"grid grid-cols-2 gap-2\">\n      {SHEET_SIDES.map((side) => (\n        <Sheet key={side}>\n          <SheetTrigger render={<Button variant=\"outline\" />}>{side}</SheetTrigger>\n          <SheetContent side={side}>\n            <SheetHeader>\n              <SheetTitle>Edit profile</SheetTitle>\n              <SheetDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done.\n              </SheetDescription>\n            </SheetHeader>\n            <div className=\"grid gap-4 py-4\">\n              <div className=\"grid grid-cols-4 items-center gap-4\">\n                <Label htmlFor=\"name\" className=\"text-right\">\n                  Name\n                </Label>\n                <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n              </div>\n              <div className=\"grid grid-cols-4 items-center gap-4\">\n                <Label htmlFor=\"username\" className=\"text-right\">\n                  Username\n                </Label>\n                <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n              </div>\n            </div>\n            <SheetFooter>\n              <SheetClose render={<Button type=\"submit\" />}>\n                Save changes\n              </SheetClose>\n            </SheetFooter>\n          </SheetContent>\n        </Sheet>\n      ))}\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport { Label } from \"@/registry/base-nova/ui/label\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/base-nova/ui/sheet\"\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\ntype SheetSide = (typeof SHEET_SIDES)[number]\n\nexport default function SheetSide() {\n  return (\n    <div className=\"grid grid-cols-2 gap-2\">\n      {SHEET_SIDES.map((side) => (\n        <Sheet key={side}>\n          <SheetTrigger render={<Button variant=\"outline\" />}>\n            {side}\n          </SheetTrigger>\n          <SheetContent side={side}>\n            <SheetHeader>\n              <SheetTitle>Edit profile</SheetTitle>\n              <SheetDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done.\n              </SheetDescription>\n            </SheetHeader>\n            <div className=\"grid gap-4 py-4\">\n              <div className=\"grid grid-cols-4 items-center gap-4\">\n                <Label htmlFor=\"name\" className=\"text-right\">\n                  Name\n                </Label>\n                <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n              </div>\n              <div className=\"grid grid-cols-4 items-center gap-4\">\n                <Label htmlFor=\"username\" className=\"text-right\">\n                  Username\n                </Label>\n                <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n              </div>\n            </div>\n            <SheetFooter>\n              <SheetClose render={<Button type=\"submit\" />}>\n                Save changes\n              </SheetClose>\n            </SheetFooter>\n          </SheetContent>\n        </Sheet>\n      ))}\n    </div>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/tooltip-demo.json b/apps/v4/public/r/styles/base-nova/tooltip-demo.json
index 0ccfcd5ab..8e84e317c 100644
--- a/apps/v4/public/r/styles/base-nova/tooltip-demo.json
+++ b/apps/v4/public/r/styles/base-nova/tooltip-demo.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-nova/demo/tooltip-demo.tsx",
-      "content": "import { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-nova/ui/tooltip\"\n\nexport function TooltipDemo() {\n  return (\n    <Tooltip>\n      <TooltipTrigger render={<Button variant=\"outline\" />}>Hover</TooltipTrigger>\n      <TooltipContent>\n        <p>Add to library</p>\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-nova/ui/tooltip\"\n\nexport function TooltipDemo() {\n  return (\n    <Tooltip>\n      <TooltipTrigger render={<Button variant=\"outline\" />}>\n        Hover\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>Add to library</p>\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/button-group-demo.json b/apps/v4/public/r/styles/base-vega/button-group-demo.json
index 6e7c7b8bf..022b354cb 100644
--- a/apps/v4/public/r/styles/base-vega/button-group-demo.json
+++ b/apps/v4/public/r/styles/base-vega/button-group-demo.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-vega/demo/button-group-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArchiveIcon,\n  ArrowLeftIcon,\n  CalendarPlusIcon,\n  ClockIcon,\n  ListFilterIcon,\n  MailCheckIcon,\n  MoreHorizontalIcon,\n  TagIcon,\n  Trash2Icon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-vega/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\n\nexport default function ButtonGroupDemo() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <ButtonGroup>\n      <ButtonGroup className=\"hidden sm:flex\">\n        <Button variant=\"outline\" size=\"icon\" aria-label=\"Go Back\">\n          <ArrowLeftIcon />\n        </Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\">Archive</Button>\n        <Button variant=\"outline\">Report</Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\">Snooze</Button>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" size=\"icon\" aria-label=\"More Options\" />}\n          >\n            <MoreHorizontalIcon />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" className=\"w-52\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <MailCheckIcon />\n                Mark as Read\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <ArchiveIcon />\n                Archive\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <ClockIcon />\n                Snooze\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CalendarPlusIcon />\n                Add to Calendar\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <ListFilterIcon />\n                Add to List\n              </DropdownMenuItem>\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>\n                  <TagIcon />\n                  Label As...\n                </DropdownMenuSubTrigger>\n                <DropdownMenuSubContent>\n                  <DropdownMenuRadioGroup\n                    value={label}\n                    onValueChange={setLabel}\n                  >\n                    <DropdownMenuRadioItem value=\"personal\">\n                      Personal\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"work\">\n                      Work\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"other\">\n                      Other\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuSub>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem variant=\"destructive\">\n                <Trash2Icon />\n                Trash\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </ButtonGroup>\n    </ButtonGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArchiveIcon,\n  ArrowLeftIcon,\n  CalendarPlusIcon,\n  ClockIcon,\n  ListFilterIcon,\n  MailCheckIcon,\n  MoreHorizontalIcon,\n  TagIcon,\n  Trash2Icon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-vega/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\n\nexport default function ButtonGroupDemo() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <ButtonGroup>\n      <ButtonGroup className=\"hidden sm:flex\">\n        <Button variant=\"outline\" size=\"icon\" aria-label=\"Go Back\">\n          <ArrowLeftIcon />\n        </Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\">Archive</Button>\n        <Button variant=\"outline\">Report</Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\">Snooze</Button>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"outline\" size=\"icon\" aria-label=\"More Options\" />\n            }\n          >\n            <MoreHorizontalIcon />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" className=\"w-52\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <MailCheckIcon />\n                Mark as Read\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <ArchiveIcon />\n                Archive\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <ClockIcon />\n                Snooze\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CalendarPlusIcon />\n                Add to Calendar\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <ListFilterIcon />\n                Add to List\n              </DropdownMenuItem>\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>\n                  <TagIcon />\n                  Label As...\n                </DropdownMenuSubTrigger>\n                <DropdownMenuSubContent>\n                  <DropdownMenuRadioGroup\n                    value={label}\n                    onValueChange={setLabel}\n                  >\n                    <DropdownMenuRadioItem value=\"personal\">\n                      Personal\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"work\">\n                      Work\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"other\">\n                      Other\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuSub>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem variant=\"destructive\">\n                <Trash2Icon />\n                Trash\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </ButtonGroup>\n    </ButtonGroup>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/button-group-dropdown.json b/apps/v4/public/r/styles/base-vega/button-group-dropdown.json
index d7e09dd7d..8ebb2e3cd 100644
--- a/apps/v4/public/r/styles/base-vega/button-group-dropdown.json
+++ b/apps/v4/public/r/styles/base-vega/button-group-dropdown.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-vega/demo/button-group-dropdown.tsx",
-      "content": "\"use client\"\n\nimport {\n  AlertTriangleIcon,\n  CheckIcon,\n  ChevronDownIcon,\n  CopyIcon,\n  ShareIcon,\n  TrashIcon,\n  UserRoundXIcon,\n  VolumeOffIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-vega/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\n\nexport default function ButtonGroupDropdown() {\n  return (\n    <ButtonGroup>\n      <Button variant=\"outline\">Follow</Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger render={<Button variant=\"outline\" className=\"!pl-2\" />}>\n          <ChevronDownIcon />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"[--radius:1rem]\">\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <VolumeOffIcon />\n              Mute Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CheckIcon />\n              Mark as Read\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <AlertTriangleIcon />\n              Report Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <UserRoundXIcon />\n              Block User\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <ShareIcon />\n              Share Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CopyIcon />\n              Copy Conversation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <TrashIcon />\n              Delete Conversation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </ButtonGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  AlertTriangleIcon,\n  CheckIcon,\n  ChevronDownIcon,\n  CopyIcon,\n  ShareIcon,\n  TrashIcon,\n  UserRoundXIcon,\n  VolumeOffIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-vega/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\n\nexport default function ButtonGroupDropdown() {\n  return (\n    <ButtonGroup>\n      <Button variant=\"outline\">Follow</Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"!pl-2\" />}\n        >\n          <ChevronDownIcon />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"[--radius:1rem]\">\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <VolumeOffIcon />\n              Mute Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CheckIcon />\n              Mark as Read\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <AlertTriangleIcon />\n              Report Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <UserRoundXIcon />\n              Block User\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <ShareIcon />\n              Share Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CopyIcon />\n              Copy Conversation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <TrashIcon />\n              Delete Conversation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </ButtonGroup>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/button-group-popover.json b/apps/v4/public/r/styles/base-vega/button-group-popover.json
index 9f797a939..129aecd98 100644
--- a/apps/v4/public/r/styles/base-vega/button-group-popover.json
+++ b/apps/v4/public/r/styles/base-vega/button-group-popover.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-vega/demo/button-group-popover.tsx",
-      "content": "import { BotIcon, ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-vega/ui/button-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-vega/ui/popover\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport { Textarea } from \"@/registry/base-vega/ui/textarea\"\n\nexport default function ButtonGroupPopover() {\n  return (\n    <ButtonGroup>\n      <Button variant=\"outline\">\n        <BotIcon /> Copilot\n      </Button>\n      <Popover>\n        <PopoverTrigger\n          render={<Button variant=\"outline\" size=\"icon\" aria-label=\"Open Popover\" />}\n        >\n          <ChevronDownIcon />\n        </PopoverTrigger>\n        <PopoverContent align=\"end\" className=\"rounded-xl p-0 text-sm\">\n          <div className=\"px-4 py-3\">\n            <div className=\"text-sm font-medium\">Agent Tasks</div>\n          </div>\n          <Separator />\n          <div className=\"p-4 text-sm *:[p:not(:last-child)]:mb-2\">\n            <Textarea\n              placeholder=\"Describe your task in natural language.\"\n              className=\"mb-4 resize-none\"\n            />\n            <p className=\"font-medium\">Start a new task with Copilot</p>\n            <p className=\"text-muted-foreground\">\n              Describe your task in natural language. Copilot will work in the\n              background and open a pull request for your review.\n            </p>\n          </div>\n        </PopoverContent>\n      </Popover>\n    </ButtonGroup>\n  )\n}\n",
+      "content": "import { BotIcon, ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-vega/ui/button-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-vega/ui/popover\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport { Textarea } from \"@/registry/base-vega/ui/textarea\"\n\nexport default function ButtonGroupPopover() {\n  return (\n    <ButtonGroup>\n      <Button variant=\"outline\">\n        <BotIcon /> Copilot\n      </Button>\n      <Popover>\n        <PopoverTrigger\n          render={\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Open Popover\" />\n          }\n        >\n          <ChevronDownIcon />\n        </PopoverTrigger>\n        <PopoverContent align=\"end\" className=\"rounded-xl p-0 text-sm\">\n          <div className=\"px-4 py-3\">\n            <div className=\"text-sm font-medium\">Agent Tasks</div>\n          </div>\n          <Separator />\n          <div className=\"p-4 text-sm *:[p:not(:last-child)]:mb-2\">\n            <Textarea\n              placeholder=\"Describe your task in natural language.\"\n              className=\"mb-4 resize-none\"\n            />\n            <p className=\"font-medium\">Start a new task with Copilot</p>\n            <p className=\"text-muted-foreground\">\n              Describe your task in natural language. Copilot will work in the\n              background and open a pull request for your review.\n            </p>\n          </div>\n        </PopoverContent>\n      </Popover>\n    </ButtonGroup>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/combobox-popover.json b/apps/v4/public/r/styles/base-vega/combobox-popover.json
index 4570e8998..5fbd608a2 100644
--- a/apps/v4/public/r/styles/base-vega/combobox-popover.json
+++ b/apps/v4/public/r/styles/base-vega/combobox-popover.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-vega/demo/combobox-popover.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/base-vega/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-vega/ui/popover\"\n\ntype Status = {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: \"backlog\",\n    label: \"Backlog\",\n  },\n  {\n    value: \"todo\",\n    label: \"Todo\",\n  },\n  {\n    value: \"in progress\",\n    label: \"In Progress\",\n  },\n  {\n    value: \"done\",\n    label: \"Done\",\n  },\n  {\n    value: \"canceled\",\n    label: \"Canceled\",\n  },\n]\n\nexport default function ComboboxPopover() {\n  const [open, setOpen] = React.useState(false)\n  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n    null\n  )\n\n  return (\n    <div className=\"flex items-center space-x-4\">\n      <p className=\"text-muted-foreground text-sm\">Status</p>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger\n          render={<Button variant=\"outline\" className=\"w-[150px] justify-start\" />}\n        >\n          {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n        </PopoverTrigger>\n        <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n          <Command>\n            <CommandInput placeholder=\"Change status...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup>\n                {statuses.map((status) => (\n                  <CommandItem\n                    key={status.value}\n                    value={status.value}\n                    onSelect={(value) => {\n                      setSelectedStatus(\n                        statuses.find((priority) => priority.value === value) ||\n                          null\n                      )\n                      setOpen(false)\n                    }}\n                  >\n                    {status.label}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/base-vega/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-vega/ui/popover\"\n\ntype Status = {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: \"backlog\",\n    label: \"Backlog\",\n  },\n  {\n    value: \"todo\",\n    label: \"Todo\",\n  },\n  {\n    value: \"in progress\",\n    label: \"In Progress\",\n  },\n  {\n    value: \"done\",\n    label: \"Done\",\n  },\n  {\n    value: \"canceled\",\n    label: \"Canceled\",\n  },\n]\n\nexport default function ComboboxPopover() {\n  const [open, setOpen] = React.useState(false)\n  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n    null\n  )\n\n  return (\n    <div className=\"flex items-center space-x-4\">\n      <p className=\"text-muted-foreground text-sm\">Status</p>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger\n          render={\n            <Button variant=\"outline\" className=\"w-[150px] justify-start\" />\n          }\n        >\n          {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n        </PopoverTrigger>\n        <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n          <Command>\n            <CommandInput placeholder=\"Change status...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup>\n                {statuses.map((status) => (\n                  <CommandItem\n                    key={status.value}\n                    value={status.value}\n                    onSelect={(value) => {\n                      setSelectedStatus(\n                        statuses.find((priority) => priority.value === value) ||\n                          null\n                      )\n                      setOpen(false)\n                    }}\n                  >\n                    {status.label}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/dialog-demo.json b/apps/v4/public/r/styles/base-vega/dialog-demo.json
index a1738e2b1..0c57f3f65 100644
--- a/apps/v4/public/r/styles/base-vega/dialog-demo.json
+++ b/apps/v4/public/r/styles/base-vega/dialog-demo.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-vega/demo/dialog-demo.tsx",
-      "content": "import { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-vega/ui/dialog\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport { Label } from \"@/registry/base-vega/ui/label\"\n\nexport function DialogDemo() {\n  return (\n    <Dialog>\n      <form>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"grid gap-4\">\n            <div className=\"grid gap-3\">\n              <Label htmlFor=\"name-1\">Name</Label>\n              <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n            </div>\n            <div className=\"grid gap-3\">\n              <Label htmlFor=\"username-1\">Username</Label>\n              <Input id=\"username-1\" name=\"username\" defaultValue=\"@peduarte\" />\n            </div>\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>Cancel</DialogClose>\n            <Button type=\"submit\">Save changes</Button>\n          </DialogFooter>\n        </DialogContent>\n      </form>\n    </Dialog>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-vega/ui/dialog\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport { Label } from \"@/registry/base-vega/ui/label\"\n\nexport function DialogDemo() {\n  return (\n    <Dialog>\n      <form>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"grid gap-4\">\n            <div className=\"grid gap-3\">\n              <Label htmlFor=\"name-1\">Name</Label>\n              <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n            </div>\n            <div className=\"grid gap-3\">\n              <Label htmlFor=\"username-1\">Username</Label>\n              <Input id=\"username-1\" name=\"username\" defaultValue=\"@peduarte\" />\n            </div>\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button type=\"submit\">Save changes</Button>\n          </DialogFooter>\n        </DialogContent>\n      </form>\n    </Dialog>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/drawer-demo.json b/apps/v4/public/r/styles/base-vega/drawer-demo.json
index df8963f9f..a136acd00 100644
--- a/apps/v4/public/r/styles/base-vega/drawer-demo.json
+++ b/apps/v4/public/r/styles/base-vega/drawer-demo.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-vega/demo/drawer-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/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\nconst data = [\n  {\n    goal: 400,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 239,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 349,\n  },\n]\n\nexport function DrawerDemo() {\n  const [goal, setGoal] = React.useState(350)\n\n  function onClick(adjustment: number) {\n    setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n  }\n\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Open Drawer</Button>\n        Open Drawer\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mx-auto w-full max-w-sm\">\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"p-4 pb-0\">\n            <div className=\"flex items-center justify-center space-x-2\">\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(-10)}\n                disabled={goal <= 200}\n              >\n                <Minus />\n                <span className=\"sr-only\">Decrease</span>\n              </Button>\n              <div className=\"flex-1 text-center\">\n                <div className=\"text-7xl font-bold tracking-tighter\">\n                  {goal}\n                </div>\n                <div className=\"text-muted-foreground text-[0.70rem] uppercase\">\n                  Calories/day\n                </div>\n              </div>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(10)}\n                disabled={goal >= 400}\n              >\n                <Plus />\n                <span className=\"sr-only\">Increase</span>\n              </Button>\n            </div>\n            <div className=\"mt-3 h-[120px]\">\n              <ResponsiveContainer width=\"100%\" height=\"100%\">\n                <BarChart data={data}>\n                  <Bar\n                    dataKey=\"goal\"\n                    style={\n                      {\n                        fill: \"hsl(var(--foreground))\",\n                        opacity: 0.9,\n                      } as React.CSSProperties\n                    }\n                  />\n                </BarChart>\n              </ResponsiveContainer>\n            </div>\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n              Cancel\n            </DrawerClose>\n          </DrawerFooter>\n        </div>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/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\nconst data = [\n  {\n    goal: 400,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 239,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 349,\n  },\n]\n\nexport function DrawerDemo() {\n  const [goal, setGoal] = React.useState(350)\n\n  function onClick(adjustment: number) {\n    setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n  }\n\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Open Drawer</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mx-auto w-full max-w-sm\">\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"p-4 pb-0\">\n            <div className=\"flex items-center justify-center space-x-2\">\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(-10)}\n                disabled={goal <= 200}\n              >\n                <Minus />\n                <span className=\"sr-only\">Decrease</span>\n              </Button>\n              <div className=\"flex-1 text-center\">\n                <div className=\"text-7xl font-bold tracking-tighter\">\n                  {goal}\n                </div>\n                <div className=\"text-muted-foreground text-[0.70rem] uppercase\">\n                  Calories/day\n                </div>\n              </div>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(10)}\n                disabled={goal >= 400}\n              >\n                <Plus />\n                <span className=\"sr-only\">Increase</span>\n              </Button>\n            </div>\n            <div className=\"mt-3 h-[120px]\">\n              <ResponsiveContainer width=\"100%\" height=\"100%\">\n                <BarChart data={data}>\n                  <Bar\n                    dataKey=\"goal\"\n                    style={\n                      {\n                        fill: \"hsl(var(--foreground))\",\n                        opacity: 0.9,\n                      } as React.CSSProperties\n                    }\n                  />\n                </BarChart>\n              </ResponsiveContainer>\n            </div>\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </div>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/drawer-dialog.json b/apps/v4/public/r/styles/base-vega/drawer-dialog.json
index 952dfc145..2bf1bde19 100644
--- a/apps/v4/public/r/styles/base-vega/drawer-dialog.json
+++ b/apps/v4/public/r/styles/base-vega/drawer-dialog.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-vega/demo/drawer-dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-vega/ui/dialog\"\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 { Input } from \"@/registry/base-vega/ui/input\"\nimport { Label } from \"@/registry/base-vega/ui/label\"\n\nexport function DrawerDialogDemo() {\n  const [open, setOpen] = React.useState(false)\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n  if (isDesktop) {\n    return (\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Edit Profile\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <ProfileForm />\n        </DialogContent>\n      </Dialog>\n    )\n  }\n\n  return (\n    <Drawer open={open} onOpenChange={setOpen}>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Edit Profile</Button>\n        Edit Profile\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"text-left\">\n          <DrawerTitle>Edit profile</DrawerTitle>\n          <DrawerDescription>\n            Make changes to your profile here. Click save when you&apos;re done.\n          </DrawerDescription>\n        </DrawerHeader>\n        <ProfileForm className=\"px-4\" />\n        <DrawerFooter className=\"pt-2\">\n          <DrawerClose asChild>\n            <Button variant=\"outline\">Cancel</Button>\n            Cancel\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n\nfunction ProfileForm({ className }: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"grid items-start gap-6\", className)}>\n      <div className=\"grid gap-3\">\n        <Label htmlFor=\"email\">Email</Label>\n        <Input type=\"email\" id=\"email\" defaultValue=\"shadcn@example.com\" />\n      </div>\n      <div className=\"grid gap-3\">\n        <Label htmlFor=\"username\">Username</Label>\n        <Input id=\"username\" defaultValue=\"@shadcn\" />\n      </div>\n      <Button type=\"submit\">Save changes</Button>\n    </form>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-vega/ui/dialog\"\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 { Input } from \"@/registry/base-vega/ui/input\"\nimport { Label } from \"@/registry/base-vega/ui/label\"\n\nexport function DrawerDialogDemo() {\n  const [open, setOpen] = React.useState(false)\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n  if (isDesktop) {\n    return (\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Edit Profile\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <ProfileForm />\n        </DialogContent>\n      </Dialog>\n    )\n  }\n\n  return (\n    <Drawer open={open} onOpenChange={setOpen}>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Edit Profile</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"text-left\">\n          <DrawerTitle>Edit profile</DrawerTitle>\n          <DrawerDescription>\n            Make changes to your profile here. Click save when you&apos;re done.\n          </DrawerDescription>\n        </DrawerHeader>\n        <ProfileForm className=\"px-4\" />\n        <DrawerFooter className=\"pt-2\">\n          <DrawerClose asChild>\n            <Button variant=\"outline\">Cancel</Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n\nfunction ProfileForm({ className }: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"grid items-start gap-6\", className)}>\n      <div className=\"grid gap-3\">\n        <Label htmlFor=\"email\">Email</Label>\n        <Input type=\"email\" id=\"email\" defaultValue=\"shadcn@example.com\" />\n      </div>\n      <div className=\"grid gap-3\">\n        <Label htmlFor=\"username\">Username</Label>\n        <Input id=\"username\" defaultValue=\"@shadcn\" />\n      </div>\n      <Button type=\"submit\">Save changes</Button>\n    </form>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/dropdown-menu-dialog.json b/apps/v4/public/r/styles/base-vega/dropdown-menu-dialog.json
index 493b7abb1..00c6ae4e3 100644
--- a/apps/v4/public/r/styles/base-vega/dropdown-menu-dialog.json
+++ b/apps/v4/public/r/styles/base-vega/dropdown-menu-dialog.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-vega/demo/dropdown-menu-dialog.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { MoreHorizontalIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/base-vega/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport { Label } from \"@/registry/base-vega/ui/label\"\nimport { Textarea } from \"@/registry/base-vega/ui/textarea\"\n\nexport function DropdownMenuDialog() {\n  const [showNewDialog, setShowNewDialog] = useState(false)\n  const [showShareDialog, setShowShareDialog] = useState(false)\n\n  return (\n    <>\n      <DropdownMenu modal={false}>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" aria-label=\"Open menu\" size=\"icon-sm\" />}\n        >\n          <MoreHorizontalIcon />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-40\" align=\"end\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File Actions</DropdownMenuLabel>\n            <DropdownMenuItem onSelect={() => setShowNewDialog(true)}>\n              New File...\n            </DropdownMenuItem>\n            <DropdownMenuItem onSelect={() => setShowShareDialog(true)}>\n              Share...\n            </DropdownMenuItem>\n            <DropdownMenuItem disabled>Download</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n      <Dialog open={showNewDialog} onOpenChange={setShowNewDialog}>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Create New File</DialogTitle>\n            <DialogDescription>\n              Provide a name for your new file. Click create when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <FieldGroup className=\"pb-3\">\n            <Field>\n              <FieldLabel htmlFor=\"filename\">File Name</FieldLabel>\n              <Input id=\"filename\" name=\"filename\" placeholder=\"document.txt\" />\n            </Field>\n          </FieldGroup>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button type=\"submit\">Create</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n      <Dialog open={showShareDialog} onOpenChange={setShowShareDialog}>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Share File</DialogTitle>\n            <DialogDescription>\n              Anyone with the link will be able to view this file.\n            </DialogDescription>\n          </DialogHeader>\n          <FieldGroup className=\"py-3\">\n            <Field>\n              <Label htmlFor=\"email\">Email Address</Label>\n              <Input\n                id=\"email\"\n                name=\"email\"\n                type=\"email\"\n                placeholder=\"shadcn@vercel.com\"\n                autoComplete=\"off\"\n              />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"message\">Message (Optional)</FieldLabel>\n              <Textarea\n                id=\"message\"\n                name=\"message\"\n                placeholder=\"Check out this file\"\n              />\n            </Field>\n          </FieldGroup>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button type=\"submit\">Send Invite</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { MoreHorizontalIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/base-vega/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport { Label } from \"@/registry/base-vega/ui/label\"\nimport { Textarea } from \"@/registry/base-vega/ui/textarea\"\n\nexport function DropdownMenuDialog() {\n  const [showNewDialog, setShowNewDialog] = useState(false)\n  const [showShareDialog, setShowShareDialog] = useState(false)\n\n  return (\n    <>\n      <DropdownMenu modal={false}>\n        <DropdownMenuTrigger\n          render={\n            <Button variant=\"outline\" aria-label=\"Open menu\" size=\"icon-sm\" />\n          }\n        >\n          <MoreHorizontalIcon />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-40\" align=\"end\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File Actions</DropdownMenuLabel>\n            <DropdownMenuItem onSelect={() => setShowNewDialog(true)}>\n              New File...\n            </DropdownMenuItem>\n            <DropdownMenuItem onSelect={() => setShowShareDialog(true)}>\n              Share...\n            </DropdownMenuItem>\n            <DropdownMenuItem disabled>Download</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n      <Dialog open={showNewDialog} onOpenChange={setShowNewDialog}>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Create New File</DialogTitle>\n            <DialogDescription>\n              Provide a name for your new file. Click create when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <FieldGroup className=\"pb-3\">\n            <Field>\n              <FieldLabel htmlFor=\"filename\">File Name</FieldLabel>\n              <Input id=\"filename\" name=\"filename\" placeholder=\"document.txt\" />\n            </Field>\n          </FieldGroup>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button type=\"submit\">Create</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n      <Dialog open={showShareDialog} onOpenChange={setShowShareDialog}>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Share File</DialogTitle>\n            <DialogDescription>\n              Anyone with the link will be able to view this file.\n            </DialogDescription>\n          </DialogHeader>\n          <FieldGroup className=\"py-3\">\n            <Field>\n              <Label htmlFor=\"email\">Email Address</Label>\n              <Input\n                id=\"email\"\n                name=\"email\"\n                type=\"email\"\n                placeholder=\"shadcn@vercel.com\"\n                autoComplete=\"off\"\n              />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"message\">Message (Optional)</FieldLabel>\n              <Textarea\n                id=\"message\"\n                name=\"message\"\n                placeholder=\"Check out this file\"\n              />\n            </Field>\n          </FieldGroup>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button type=\"submit\">Send Invite</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/input-group-demo.json b/apps/v4/public/r/styles/base-vega/input-group-demo.json
index e1004397c..7ce28d0be 100644
--- a/apps/v4/public/r/styles/base-vega/input-group-demo.json
+++ b/apps/v4/public/r/styles/base-vega/input-group-demo.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-vega/demo/input-group-demo.tsx",
-      "content": "import { IconCheck, IconInfoCircle, IconPlus } from \"@tabler/icons-react\"\nimport { ArrowUpIcon, Search } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/base-vega/ui/input-group\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-vega/ui/tooltip\"\n\nexport default function InputGroupDemo() {\n  return (\n    <div className=\"grid w-full max-w-sm gap-6\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Search...\" />\n        <InputGroupAddon>\n          <Search />\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n        <InputGroupAddon>\n          <InputGroupText>https://</InputGroupText>\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger\n              render={<InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />}\n            >\n              <IconInfoCircle />\n            </TooltipTrigger>\n            <TooltipContent>This is content in a tooltip.</TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n        <InputGroupAddon align=\"block-end\">\n          <InputGroupButton\n            variant=\"outline\"\n            className=\"rounded-full\"\n            size=\"icon-xs\"\n          >\n            <IconPlus />\n          </InputGroupButton>\n          <DropdownMenu>\n            <DropdownMenuTrigger render={<InputGroupButton variant=\"ghost\" />}>\n              Auto\n            </DropdownMenuTrigger>\n            <DropdownMenuContent\n              side=\"top\"\n              align=\"start\"\n              className=\"[--radius:0.95rem]\"\n            >\n              <DropdownMenuGroup>\n                <DropdownMenuItem>Auto</DropdownMenuItem>\n                <DropdownMenuItem>Agent</DropdownMenuItem>\n                <DropdownMenuItem>Manual</DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n          <Separator orientation=\"vertical\" className=\"!h-4\" />\n          <InputGroupButton\n            variant=\"default\"\n            className=\"rounded-full\"\n            size=\"icon-xs\"\n            disabled\n          >\n            <ArrowUpIcon />\n            <span className=\"sr-only\">Send</span>\n          </InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"@shadcn\" />\n        <InputGroupAddon align=\"inline-end\">\n          <div className=\"bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full\">\n            <IconCheck className=\"size-3\" />\n          </div>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n",
+      "content": "import { IconCheck, IconInfoCircle, IconPlus } from \"@tabler/icons-react\"\nimport { ArrowUpIcon, Search } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/base-vega/ui/input-group\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-vega/ui/tooltip\"\n\nexport default function InputGroupDemo() {\n  return (\n    <div className=\"grid w-full max-w-sm gap-6\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Search...\" />\n        <InputGroupAddon>\n          <Search />\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n        <InputGroupAddon>\n          <InputGroupText>https://</InputGroupText>\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n              }\n            >\n              <IconInfoCircle />\n            </TooltipTrigger>\n            <TooltipContent>This is content in a tooltip.</TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n        <InputGroupAddon align=\"block-end\">\n          <InputGroupButton\n            variant=\"outline\"\n            className=\"rounded-full\"\n            size=\"icon-xs\"\n          >\n            <IconPlus />\n          </InputGroupButton>\n          <DropdownMenu>\n            <DropdownMenuTrigger render={<InputGroupButton variant=\"ghost\" />}>\n              Auto\n            </DropdownMenuTrigger>\n            <DropdownMenuContent\n              side=\"top\"\n              align=\"start\"\n              className=\"[--radius:0.95rem]\"\n            >\n              <DropdownMenuGroup>\n                <DropdownMenuItem>Auto</DropdownMenuItem>\n                <DropdownMenuItem>Agent</DropdownMenuItem>\n                <DropdownMenuItem>Manual</DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n          <Separator orientation=\"vertical\" className=\"!h-4\" />\n          <InputGroupButton\n            variant=\"default\"\n            className=\"rounded-full\"\n            size=\"icon-xs\"\n            disabled\n          >\n            <ArrowUpIcon />\n            <span className=\"sr-only\">Send</span>\n          </InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"@shadcn\" />\n        <InputGroupAddon align=\"inline-end\">\n          <div className=\"bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full\">\n            <IconCheck className=\"size-3\" />\n          </div>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/input-group-tooltip.json b/apps/v4/public/r/styles/base-vega/input-group-tooltip.json
index ab3f8aea2..e780acf8b 100644
--- a/apps/v4/public/r/styles/base-vega/input-group-tooltip.json
+++ b/apps/v4/public/r/styles/base-vega/input-group-tooltip.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-vega/demo/input-group-tooltip.tsx",
-      "content": "import { HelpCircle, InfoIcon } from \"lucide-react\"\n\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-vega/ui/input-group\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-vega/ui/tooltip\"\n\nexport default function InputGroupTooltip() {\n  return (\n    <div className=\"grid w-full max-w-sm gap-4\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Enter password\" type=\"password\" />\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <InputGroupButton\n                  variant=\"ghost\"\n                  aria-label=\"Info\"\n                  size=\"icon-xs\"\n                />\n              }\n            >\n              <InfoIcon />\n            </TooltipTrigger>\n            <TooltipContent>\n              <p>Password must be at least 8 characters</p>\n            </TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Your email address\" />\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <InputGroupButton\n                  variant=\"ghost\"\n                  aria-label=\"Help\"\n                  size=\"icon-xs\"\n                />\n              }\n            >\n              <HelpCircle />\n            </TooltipTrigger>\n            <TooltipContent>\n              <p>We&apos;ll use this to send you notifications</p>\n            </TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Enter API key\" />\n        <Tooltip>\n          <TooltipTrigger render={<InputGroupAddon />}>\n            <InputGroupButton\n              variant=\"ghost\"\n              aria-label=\"Help\"\n              size=\"icon-xs\"\n            >\n              <HelpCircle />\n            </InputGroupButton>\n          </TooltipTrigger>\n          <TooltipContent side=\"left\">\n            <p>Click for help with API keys</p>\n          </TooltipContent>\n        </Tooltip>\n      </InputGroup>\n    </div>\n  )\n}\n",
+      "content": "import { HelpCircle, InfoIcon } from \"lucide-react\"\n\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-vega/ui/input-group\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-vega/ui/tooltip\"\n\nexport default function InputGroupTooltip() {\n  return (\n    <div className=\"grid w-full max-w-sm gap-4\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Enter password\" type=\"password\" />\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <InputGroupButton\n                  variant=\"ghost\"\n                  aria-label=\"Info\"\n                  size=\"icon-xs\"\n                />\n              }\n            >\n              <InfoIcon />\n            </TooltipTrigger>\n            <TooltipContent>\n              <p>Password must be at least 8 characters</p>\n            </TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Your email address\" />\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <InputGroupButton\n                  variant=\"ghost\"\n                  aria-label=\"Help\"\n                  size=\"icon-xs\"\n                />\n              }\n            >\n              <HelpCircle />\n            </TooltipTrigger>\n            <TooltipContent>\n              <p>We&apos;ll use this to send you notifications</p>\n            </TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Enter API key\" />\n        <Tooltip>\n          <TooltipTrigger render={<InputGroupAddon />}>\n            <InputGroupButton variant=\"ghost\" aria-label=\"Help\" size=\"icon-xs\">\n              <HelpCircle />\n            </InputGroupButton>\n          </TooltipTrigger>\n          <TooltipContent side=\"left\">\n            <p>Click for help with API keys</p>\n          </TooltipContent>\n        </Tooltip>\n      </InputGroup>\n    </div>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/item-dropdown.json b/apps/v4/public/r/styles/base-vega/item-dropdown.json
index 2ada495f6..b586ac77f 100644
--- a/apps/v4/public/r/styles/base-vega/item-dropdown.json
+++ b/apps/v4/public/r/styles/base-vega/item-dropdown.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-vega/demo/item-dropdown.tsx",
-      "content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-vega/ui/avatar\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\n\nconst people = [\n  {\n    username: \"shadcn\",\n    avatar: \"https://github.com/shadcn.png\",\n    email: \"shadcn@vercel.com\",\n  },\n  {\n    username: \"maxleiter\",\n    avatar: \"https://github.com/maxleiter.png\",\n    email: \"maxleiter@vercel.com\",\n  },\n  {\n    username: \"evilrabbit\",\n    avatar: \"https://github.com/evilrabbit.png\",\n    email: \"evilrabbit@vercel.com\",\n  },\n]\n\nexport function ItemDropdown() {\n  return (\n    <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" size=\"sm\" className=\"w-fit\" />}\n        >\n          Select <ChevronDownIcon />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n          <DropdownMenuGroup>\n            {people.map((person) => (\n              <DropdownMenuItem key={person.username} className=\"p-0\">\n                <Item size=\"sm\" className=\"w-full p-2\">\n                  <ItemMedia>\n                    <Avatar className=\"size-8\">\n                      <AvatarImage src={person.avatar} className=\"grayscale\" />\n                      <AvatarFallback>{person.username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0.5\">\n                    <ItemTitle>{person.username}</ItemTitle>\n                    <ItemDescription>{person.email}</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-vega/ui/avatar\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\n\nconst people = [\n  {\n    username: \"shadcn\",\n    avatar: \"https://github.com/shadcn.png\",\n    email: \"shadcn@vercel.com\",\n  },\n  {\n    username: \"maxleiter\",\n    avatar: \"https://github.com/maxleiter.png\",\n    email: \"maxleiter@vercel.com\",\n  },\n  {\n    username: \"evilrabbit\",\n    avatar: \"https://github.com/evilrabbit.png\",\n    email: \"evilrabbit@vercel.com\",\n  },\n]\n\nexport function ItemDropdown() {\n  return (\n    <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" size=\"sm\" className=\"w-fit\" />}\n        >\n          Select <ChevronDownIcon />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n          <DropdownMenuGroup>\n            {people.map((person) => (\n              <DropdownMenuItem key={person.username} className=\"p-0\">\n                <Item size=\"sm\" className=\"w-full p-2\">\n                  <ItemMedia>\n                    <Avatar className=\"size-8\">\n                      <AvatarImage src={person.avatar} className=\"grayscale\" />\n                      <AvatarFallback>\n                        {person.username.charAt(0)}\n                      </AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0.5\">\n                    <ItemTitle>{person.username}</ItemTitle>\n                    <ItemDescription>{person.email}</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/sheet-side.json b/apps/v4/public/r/styles/base-vega/sheet-side.json
index 3e6c797b6..e3c8daf62 100644
--- a/apps/v4/public/r/styles/base-vega/sheet-side.json
+++ b/apps/v4/public/r/styles/base-vega/sheet-side.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-vega/demo/sheet-side.tsx",
-      "content": "\"use client\"\n\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport { Label } from \"@/registry/base-vega/ui/label\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/base-vega/ui/sheet\"\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\ntype SheetSide = (typeof SHEET_SIDES)[number]\n\nexport default function SheetSide() {\n  return (\n    <div className=\"grid grid-cols-2 gap-2\">\n      {SHEET_SIDES.map((side) => (\n        <Sheet key={side}>\n          <SheetTrigger render={<Button variant=\"outline\" />}>{side}</SheetTrigger>\n          <SheetContent side={side}>\n            <SheetHeader>\n              <SheetTitle>Edit profile</SheetTitle>\n              <SheetDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done.\n              </SheetDescription>\n            </SheetHeader>\n            <div className=\"grid gap-4 py-4\">\n              <div className=\"grid grid-cols-4 items-center gap-4\">\n                <Label htmlFor=\"name\" className=\"text-right\">\n                  Name\n                </Label>\n                <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n              </div>\n              <div className=\"grid grid-cols-4 items-center gap-4\">\n                <Label htmlFor=\"username\" className=\"text-right\">\n                  Username\n                </Label>\n                <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n              </div>\n            </div>\n            <SheetFooter>\n              <SheetClose render={<Button type=\"submit\" />}>\n                Save changes\n              </SheetClose>\n            </SheetFooter>\n          </SheetContent>\n        </Sheet>\n      ))}\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport { Label } from \"@/registry/base-vega/ui/label\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/base-vega/ui/sheet\"\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\ntype SheetSide = (typeof SHEET_SIDES)[number]\n\nexport default function SheetSide() {\n  return (\n    <div className=\"grid grid-cols-2 gap-2\">\n      {SHEET_SIDES.map((side) => (\n        <Sheet key={side}>\n          <SheetTrigger render={<Button variant=\"outline\" />}>\n            {side}\n          </SheetTrigger>\n          <SheetContent side={side}>\n            <SheetHeader>\n              <SheetTitle>Edit profile</SheetTitle>\n              <SheetDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done.\n              </SheetDescription>\n            </SheetHeader>\n            <div className=\"grid gap-4 py-4\">\n              <div className=\"grid grid-cols-4 items-center gap-4\">\n                <Label htmlFor=\"name\" className=\"text-right\">\n                  Name\n                </Label>\n                <Input id=\"name\" value=\"Pedro Duarte\" className=\"col-span-3\" />\n              </div>\n              <div className=\"grid grid-cols-4 items-center gap-4\">\n                <Label htmlFor=\"username\" className=\"text-right\">\n                  Username\n                </Label>\n                <Input id=\"username\" value=\"@peduarte\" className=\"col-span-3\" />\n              </div>\n            </div>\n            <SheetFooter>\n              <SheetClose render={<Button type=\"submit\" />}>\n                Save changes\n              </SheetClose>\n            </SheetFooter>\n          </SheetContent>\n        </Sheet>\n      ))}\n    </div>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/tooltip-demo.json b/apps/v4/public/r/styles/base-vega/tooltip-demo.json
index bdb244ea4..c1fbfdf97 100644
--- a/apps/v4/public/r/styles/base-vega/tooltip-demo.json
+++ b/apps/v4/public/r/styles/base-vega/tooltip-demo.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-vega/demo/tooltip-demo.tsx",
-      "content": "import { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-vega/ui/tooltip\"\n\nexport function TooltipDemo() {\n  return (\n    <Tooltip>\n      <TooltipTrigger render={<Button variant=\"outline\" />}>Hover</TooltipTrigger>\n      <TooltipContent>\n        <p>Add to library</p>\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-vega/ui/tooltip\"\n\nexport function TooltipDemo() {\n  return (\n    <Tooltip>\n      <TooltipTrigger render={<Button variant=\"outline\" />}>\n        Hover\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>Add to library</p>\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/button-group-select.json b/apps/v4/public/r/styles/radix-lyra/button-group-select.json
index 271c685cd..c6b1ee1f1 100644
--- a/apps/v4/public/r/styles/radix-lyra/button-group-select.json
+++ b/apps/v4/public/r/styles/radix-lyra/button-group-select.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/demo/button-group-select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-lyra/ui/button-group\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n} from \"@/registry/radix-lyra/ui/select\"\n\nconst CURRENCIES = [\n  {\n    value: \"$\",\n    label: \"US Dollar\",\n  },\n  {\n    value: \"€\",\n    label: \"Euro\",\n  },\n  {\n    value: \"£\",\n    label: \"British Pound\",\n  },\n]\n\nexport default function ButtonGroupSelect() {\n  const [currency, setCurrency] = React.useState(\"$\")\n\n  return (\n    <ButtonGroup>\n      <ButtonGroup>\n        <Select value={currency} onValueChange={setCurrency}>\n          <SelectTrigger className=\"font-mono\">{currency}</SelectTrigger>\n          <SelectContent className=\"min-w-24\">\n            <SelectGroup>\n              {CURRENCIES.map((currency) => (\n                <SelectItem key={currency.value} value={currency.value}>\n                  {currency.value}{\" \"}\n                  <span className=\"text-muted-foreground\">{currency.label}</span>\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Input placeholder=\"10.00\" pattern=\"[0-9]*\" />\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button aria-label=\"Send\" size=\"icon\" variant=\"outline\">\n          <ArrowRightIcon />\n        </Button>\n      </ButtonGroup>\n    </ButtonGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-lyra/ui/button-group\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n} from \"@/registry/radix-lyra/ui/select\"\n\nconst CURRENCIES = [\n  {\n    value: \"$\",\n    label: \"US Dollar\",\n  },\n  {\n    value: \"€\",\n    label: \"Euro\",\n  },\n  {\n    value: \"£\",\n    label: \"British Pound\",\n  },\n]\n\nexport default function ButtonGroupSelect() {\n  const [currency, setCurrency] = React.useState(\"$\")\n\n  return (\n    <ButtonGroup>\n      <ButtonGroup>\n        <Select value={currency} onValueChange={setCurrency}>\n          <SelectTrigger className=\"font-mono\">{currency}</SelectTrigger>\n          <SelectContent className=\"min-w-24\">\n            <SelectGroup>\n              {CURRENCIES.map((currency) => (\n                <SelectItem key={currency.value} value={currency.value}>\n                  {currency.value}{\" \"}\n                  <span className=\"text-muted-foreground\">\n                    {currency.label}\n                  </span>\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Input placeholder=\"10.00\" pattern=\"[0-9]*\" />\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button aria-label=\"Send\" size=\"icon\" variant=\"outline\">\n          <ArrowRightIcon />\n        </Button>\n      </ButtonGroup>\n    </ButtonGroup>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/item-dropdown.json b/apps/v4/public/r/styles/radix-lyra/item-dropdown.json
index 1db4112ef..fc2e7bafd 100644
--- a/apps/v4/public/r/styles/radix-lyra/item-dropdown.json
+++ b/apps/v4/public/r/styles/radix-lyra/item-dropdown.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/demo/item-dropdown.tsx",
-      "content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-lyra/ui/avatar\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-lyra/ui/item\"\n\nconst people = [\n  {\n    username: \"shadcn\",\n    avatar: \"https://github.com/shadcn.png\",\n    email: \"shadcn@vercel.com\",\n  },\n  {\n    username: \"maxleiter\",\n    avatar: \"https://github.com/maxleiter.png\",\n    email: \"maxleiter@vercel.com\",\n  },\n  {\n    username: \"evilrabbit\",\n    avatar: \"https://github.com/evilrabbit.png\",\n    email: \"evilrabbit@vercel.com\",\n  },\n]\n\nexport function ItemDropdown() {\n  return (\n    <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-fit\">\n            Select <ChevronDownIcon />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n          <DropdownMenuGroup>\n            {people.map((person) => (\n              <DropdownMenuItem key={person.username} className=\"p-0\">\n                <Item size=\"sm\" className=\"w-full p-2\">\n                  <ItemMedia>\n                    <Avatar className=\"size-8\">\n                      <AvatarImage src={person.avatar} className=\"grayscale\" />\n                      <AvatarFallback>{person.username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0.5\">\n                    <ItemTitle>{person.username}</ItemTitle>\n                    <ItemDescription>{person.email}</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-lyra/ui/avatar\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-lyra/ui/item\"\n\nconst people = [\n  {\n    username: \"shadcn\",\n    avatar: \"https://github.com/shadcn.png\",\n    email: \"shadcn@vercel.com\",\n  },\n  {\n    username: \"maxleiter\",\n    avatar: \"https://github.com/maxleiter.png\",\n    email: \"maxleiter@vercel.com\",\n  },\n  {\n    username: \"evilrabbit\",\n    avatar: \"https://github.com/evilrabbit.png\",\n    email: \"evilrabbit@vercel.com\",\n  },\n]\n\nexport function ItemDropdown() {\n  return (\n    <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-fit\">\n            Select <ChevronDownIcon />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n          <DropdownMenuGroup>\n            {people.map((person) => (\n              <DropdownMenuItem key={person.username} className=\"p-0\">\n                <Item size=\"sm\" className=\"w-full p-2\">\n                  <ItemMedia>\n                    <Avatar className=\"size-8\">\n                      <AvatarImage src={person.avatar} className=\"grayscale\" />\n                      <AvatarFallback>\n                        {person.username.charAt(0)}\n                      </AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0.5\">\n                    <ItemTitle>{person.username}</ItemTitle>\n                    <ItemDescription>{person.email}</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/button-group-select.json b/apps/v4/public/r/styles/radix-maia/button-group-select.json
index a7e564bb8..688754a5c 100644
--- a/apps/v4/public/r/styles/radix-maia/button-group-select.json
+++ b/apps/v4/public/r/styles/radix-maia/button-group-select.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-maia/demo/button-group-select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-maia/ui/button-group\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n} from \"@/registry/radix-maia/ui/select\"\n\nconst CURRENCIES = [\n  {\n    value: \"$\",\n    label: \"US Dollar\",\n  },\n  {\n    value: \"€\",\n    label: \"Euro\",\n  },\n  {\n    value: \"£\",\n    label: \"British Pound\",\n  },\n]\n\nexport default function ButtonGroupSelect() {\n  const [currency, setCurrency] = React.useState(\"$\")\n\n  return (\n    <ButtonGroup>\n      <ButtonGroup>\n        <Select value={currency} onValueChange={setCurrency}>\n          <SelectTrigger className=\"font-mono\">{currency}</SelectTrigger>\n          <SelectContent className=\"min-w-24\">\n            <SelectGroup>\n              {CURRENCIES.map((currency) => (\n                <SelectItem key={currency.value} value={currency.value}>\n                  {currency.value}{\" \"}\n                  <span className=\"text-muted-foreground\">{currency.label}</span>\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Input placeholder=\"10.00\" pattern=\"[0-9]*\" />\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button aria-label=\"Send\" size=\"icon\" variant=\"outline\">\n          <ArrowRightIcon />\n        </Button>\n      </ButtonGroup>\n    </ButtonGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-maia/ui/button-group\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n} from \"@/registry/radix-maia/ui/select\"\n\nconst CURRENCIES = [\n  {\n    value: \"$\",\n    label: \"US Dollar\",\n  },\n  {\n    value: \"€\",\n    label: \"Euro\",\n  },\n  {\n    value: \"£\",\n    label: \"British Pound\",\n  },\n]\n\nexport default function ButtonGroupSelect() {\n  const [currency, setCurrency] = React.useState(\"$\")\n\n  return (\n    <ButtonGroup>\n      <ButtonGroup>\n        <Select value={currency} onValueChange={setCurrency}>\n          <SelectTrigger className=\"font-mono\">{currency}</SelectTrigger>\n          <SelectContent className=\"min-w-24\">\n            <SelectGroup>\n              {CURRENCIES.map((currency) => (\n                <SelectItem key={currency.value} value={currency.value}>\n                  {currency.value}{\" \"}\n                  <span className=\"text-muted-foreground\">\n                    {currency.label}\n                  </span>\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Input placeholder=\"10.00\" pattern=\"[0-9]*\" />\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button aria-label=\"Send\" size=\"icon\" variant=\"outline\">\n          <ArrowRightIcon />\n        </Button>\n      </ButtonGroup>\n    </ButtonGroup>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/item-dropdown.json b/apps/v4/public/r/styles/radix-maia/item-dropdown.json
index 1041424b7..3b2dc2b6b 100644
--- a/apps/v4/public/r/styles/radix-maia/item-dropdown.json
+++ b/apps/v4/public/r/styles/radix-maia/item-dropdown.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-maia/demo/item-dropdown.tsx",
-      "content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-maia/ui/avatar\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\n\nconst people = [\n  {\n    username: \"shadcn\",\n    avatar: \"https://github.com/shadcn.png\",\n    email: \"shadcn@vercel.com\",\n  },\n  {\n    username: \"maxleiter\",\n    avatar: \"https://github.com/maxleiter.png\",\n    email: \"maxleiter@vercel.com\",\n  },\n  {\n    username: \"evilrabbit\",\n    avatar: \"https://github.com/evilrabbit.png\",\n    email: \"evilrabbit@vercel.com\",\n  },\n]\n\nexport function ItemDropdown() {\n  return (\n    <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-fit\">\n            Select <ChevronDownIcon />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n          <DropdownMenuGroup>\n            {people.map((person) => (\n              <DropdownMenuItem key={person.username} className=\"p-0\">\n                <Item size=\"sm\" className=\"w-full p-2\">\n                  <ItemMedia>\n                    <Avatar className=\"size-8\">\n                      <AvatarImage src={person.avatar} className=\"grayscale\" />\n                      <AvatarFallback>{person.username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0.5\">\n                    <ItemTitle>{person.username}</ItemTitle>\n                    <ItemDescription>{person.email}</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-maia/ui/avatar\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\n\nconst people = [\n  {\n    username: \"shadcn\",\n    avatar: \"https://github.com/shadcn.png\",\n    email: \"shadcn@vercel.com\",\n  },\n  {\n    username: \"maxleiter\",\n    avatar: \"https://github.com/maxleiter.png\",\n    email: \"maxleiter@vercel.com\",\n  },\n  {\n    username: \"evilrabbit\",\n    avatar: \"https://github.com/evilrabbit.png\",\n    email: \"evilrabbit@vercel.com\",\n  },\n]\n\nexport function ItemDropdown() {\n  return (\n    <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-fit\">\n            Select <ChevronDownIcon />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n          <DropdownMenuGroup>\n            {people.map((person) => (\n              <DropdownMenuItem key={person.username} className=\"p-0\">\n                <Item size=\"sm\" className=\"w-full p-2\">\n                  <ItemMedia>\n                    <Avatar className=\"size-8\">\n                      <AvatarImage src={person.avatar} className=\"grayscale\" />\n                      <AvatarFallback>\n                        {person.username.charAt(0)}\n                      </AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0.5\">\n                    <ItemTitle>{person.username}</ItemTitle>\n                    <ItemDescription>{person.email}</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/button-group-select.json b/apps/v4/public/r/styles/radix-mira/button-group-select.json
index 55934e5f3..3fe39592c 100644
--- a/apps/v4/public/r/styles/radix-mira/button-group-select.json
+++ b/apps/v4/public/r/styles/radix-mira/button-group-select.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-mira/demo/button-group-select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-mira/ui/button-group\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n} from \"@/registry/radix-mira/ui/select\"\n\nconst CURRENCIES = [\n  {\n    value: \"$\",\n    label: \"US Dollar\",\n  },\n  {\n    value: \"€\",\n    label: \"Euro\",\n  },\n  {\n    value: \"£\",\n    label: \"British Pound\",\n  },\n]\n\nexport default function ButtonGroupSelect() {\n  const [currency, setCurrency] = React.useState(\"$\")\n\n  return (\n    <ButtonGroup>\n      <ButtonGroup>\n        <Select value={currency} onValueChange={setCurrency}>\n          <SelectTrigger className=\"font-mono\">{currency}</SelectTrigger>\n          <SelectContent className=\"min-w-24\">\n            <SelectGroup>\n              {CURRENCIES.map((currency) => (\n                <SelectItem key={currency.value} value={currency.value}>\n                  {currency.value}{\" \"}\n                  <span className=\"text-muted-foreground\">{currency.label}</span>\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Input placeholder=\"10.00\" pattern=\"[0-9]*\" />\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button aria-label=\"Send\" size=\"icon\" variant=\"outline\">\n          <ArrowRightIcon />\n        </Button>\n      </ButtonGroup>\n    </ButtonGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-mira/ui/button-group\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n} from \"@/registry/radix-mira/ui/select\"\n\nconst CURRENCIES = [\n  {\n    value: \"$\",\n    label: \"US Dollar\",\n  },\n  {\n    value: \"€\",\n    label: \"Euro\",\n  },\n  {\n    value: \"£\",\n    label: \"British Pound\",\n  },\n]\n\nexport default function ButtonGroupSelect() {\n  const [currency, setCurrency] = React.useState(\"$\")\n\n  return (\n    <ButtonGroup>\n      <ButtonGroup>\n        <Select value={currency} onValueChange={setCurrency}>\n          <SelectTrigger className=\"font-mono\">{currency}</SelectTrigger>\n          <SelectContent className=\"min-w-24\">\n            <SelectGroup>\n              {CURRENCIES.map((currency) => (\n                <SelectItem key={currency.value} value={currency.value}>\n                  {currency.value}{\" \"}\n                  <span className=\"text-muted-foreground\">\n                    {currency.label}\n                  </span>\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Input placeholder=\"10.00\" pattern=\"[0-9]*\" />\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button aria-label=\"Send\" size=\"icon\" variant=\"outline\">\n          <ArrowRightIcon />\n        </Button>\n      </ButtonGroup>\n    </ButtonGroup>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/item-dropdown.json b/apps/v4/public/r/styles/radix-mira/item-dropdown.json
index ab12cc789..983a21b3c 100644
--- a/apps/v4/public/r/styles/radix-mira/item-dropdown.json
+++ b/apps/v4/public/r/styles/radix-mira/item-dropdown.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-mira/demo/item-dropdown.tsx",
-      "content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-mira/ui/avatar\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-mira/ui/item\"\n\nconst people = [\n  {\n    username: \"shadcn\",\n    avatar: \"https://github.com/shadcn.png\",\n    email: \"shadcn@vercel.com\",\n  },\n  {\n    username: \"maxleiter\",\n    avatar: \"https://github.com/maxleiter.png\",\n    email: \"maxleiter@vercel.com\",\n  },\n  {\n    username: \"evilrabbit\",\n    avatar: \"https://github.com/evilrabbit.png\",\n    email: \"evilrabbit@vercel.com\",\n  },\n]\n\nexport function ItemDropdown() {\n  return (\n    <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-fit\">\n            Select <ChevronDownIcon />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n          <DropdownMenuGroup>\n            {people.map((person) => (\n              <DropdownMenuItem key={person.username} className=\"p-0\">\n                <Item size=\"sm\" className=\"w-full p-2\">\n                  <ItemMedia>\n                    <Avatar className=\"size-8\">\n                      <AvatarImage src={person.avatar} className=\"grayscale\" />\n                      <AvatarFallback>{person.username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0.5\">\n                    <ItemTitle>{person.username}</ItemTitle>\n                    <ItemDescription>{person.email}</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-mira/ui/avatar\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-mira/ui/item\"\n\nconst people = [\n  {\n    username: \"shadcn\",\n    avatar: \"https://github.com/shadcn.png\",\n    email: \"shadcn@vercel.com\",\n  },\n  {\n    username: \"maxleiter\",\n    avatar: \"https://github.com/maxleiter.png\",\n    email: \"maxleiter@vercel.com\",\n  },\n  {\n    username: \"evilrabbit\",\n    avatar: \"https://github.com/evilrabbit.png\",\n    email: \"evilrabbit@vercel.com\",\n  },\n]\n\nexport function ItemDropdown() {\n  return (\n    <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-fit\">\n            Select <ChevronDownIcon />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n          <DropdownMenuGroup>\n            {people.map((person) => (\n              <DropdownMenuItem key={person.username} className=\"p-0\">\n                <Item size=\"sm\" className=\"w-full p-2\">\n                  <ItemMedia>\n                    <Avatar className=\"size-8\">\n                      <AvatarImage src={person.avatar} className=\"grayscale\" />\n                      <AvatarFallback>\n                        {person.username.charAt(0)}\n                      </AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0.5\">\n                    <ItemTitle>{person.username}</ItemTitle>\n                    <ItemDescription>{person.email}</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/button-group-select.json b/apps/v4/public/r/styles/radix-nova/button-group-select.json
index 9306591c8..1391a4f86 100644
--- a/apps/v4/public/r/styles/radix-nova/button-group-select.json
+++ b/apps/v4/public/r/styles/radix-nova/button-group-select.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-nova/demo/button-group-select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-nova/ui/button-group\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n} from \"@/registry/radix-nova/ui/select\"\n\nconst CURRENCIES = [\n  {\n    value: \"$\",\n    label: \"US Dollar\",\n  },\n  {\n    value: \"€\",\n    label: \"Euro\",\n  },\n  {\n    value: \"£\",\n    label: \"British Pound\",\n  },\n]\n\nexport default function ButtonGroupSelect() {\n  const [currency, setCurrency] = React.useState(\"$\")\n\n  return (\n    <ButtonGroup>\n      <ButtonGroup>\n        <Select value={currency} onValueChange={setCurrency}>\n          <SelectTrigger className=\"font-mono\">{currency}</SelectTrigger>\n          <SelectContent className=\"min-w-24\">\n            <SelectGroup>\n              {CURRENCIES.map((currency) => (\n                <SelectItem key={currency.value} value={currency.value}>\n                  {currency.value}{\" \"}\n                  <span className=\"text-muted-foreground\">{currency.label}</span>\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Input placeholder=\"10.00\" pattern=\"[0-9]*\" />\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button aria-label=\"Send\" size=\"icon\" variant=\"outline\">\n          <ArrowRightIcon />\n        </Button>\n      </ButtonGroup>\n    </ButtonGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-nova/ui/button-group\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n} from \"@/registry/radix-nova/ui/select\"\n\nconst CURRENCIES = [\n  {\n    value: \"$\",\n    label: \"US Dollar\",\n  },\n  {\n    value: \"€\",\n    label: \"Euro\",\n  },\n  {\n    value: \"£\",\n    label: \"British Pound\",\n  },\n]\n\nexport default function ButtonGroupSelect() {\n  const [currency, setCurrency] = React.useState(\"$\")\n\n  return (\n    <ButtonGroup>\n      <ButtonGroup>\n        <Select value={currency} onValueChange={setCurrency}>\n          <SelectTrigger className=\"font-mono\">{currency}</SelectTrigger>\n          <SelectContent className=\"min-w-24\">\n            <SelectGroup>\n              {CURRENCIES.map((currency) => (\n                <SelectItem key={currency.value} value={currency.value}>\n                  {currency.value}{\" \"}\n                  <span className=\"text-muted-foreground\">\n                    {currency.label}\n                  </span>\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Input placeholder=\"10.00\" pattern=\"[0-9]*\" />\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button aria-label=\"Send\" size=\"icon\" variant=\"outline\">\n          <ArrowRightIcon />\n        </Button>\n      </ButtonGroup>\n    </ButtonGroup>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/item-dropdown.json b/apps/v4/public/r/styles/radix-nova/item-dropdown.json
index aa5c4ec56..aa72d753e 100644
--- a/apps/v4/public/r/styles/radix-nova/item-dropdown.json
+++ b/apps/v4/public/r/styles/radix-nova/item-dropdown.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-nova/demo/item-dropdown.tsx",
-      "content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-nova/ui/avatar\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-nova/ui/item\"\n\nconst people = [\n  {\n    username: \"shadcn\",\n    avatar: \"https://github.com/shadcn.png\",\n    email: \"shadcn@vercel.com\",\n  },\n  {\n    username: \"maxleiter\",\n    avatar: \"https://github.com/maxleiter.png\",\n    email: \"maxleiter@vercel.com\",\n  },\n  {\n    username: \"evilrabbit\",\n    avatar: \"https://github.com/evilrabbit.png\",\n    email: \"evilrabbit@vercel.com\",\n  },\n]\n\nexport function ItemDropdown() {\n  return (\n    <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-fit\">\n            Select <ChevronDownIcon />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n          <DropdownMenuGroup>\n            {people.map((person) => (\n              <DropdownMenuItem key={person.username} className=\"p-0\">\n                <Item size=\"sm\" className=\"w-full p-2\">\n                  <ItemMedia>\n                    <Avatar className=\"size-8\">\n                      <AvatarImage src={person.avatar} className=\"grayscale\" />\n                      <AvatarFallback>{person.username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0.5\">\n                    <ItemTitle>{person.username}</ItemTitle>\n                    <ItemDescription>{person.email}</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-nova/ui/avatar\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-nova/ui/item\"\n\nconst people = [\n  {\n    username: \"shadcn\",\n    avatar: \"https://github.com/shadcn.png\",\n    email: \"shadcn@vercel.com\",\n  },\n  {\n    username: \"maxleiter\",\n    avatar: \"https://github.com/maxleiter.png\",\n    email: \"maxleiter@vercel.com\",\n  },\n  {\n    username: \"evilrabbit\",\n    avatar: \"https://github.com/evilrabbit.png\",\n    email: \"evilrabbit@vercel.com\",\n  },\n]\n\nexport function ItemDropdown() {\n  return (\n    <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-fit\">\n            Select <ChevronDownIcon />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n          <DropdownMenuGroup>\n            {people.map((person) => (\n              <DropdownMenuItem key={person.username} className=\"p-0\">\n                <Item size=\"sm\" className=\"w-full p-2\">\n                  <ItemMedia>\n                    <Avatar className=\"size-8\">\n                      <AvatarImage src={person.avatar} className=\"grayscale\" />\n                      <AvatarFallback>\n                        {person.username.charAt(0)}\n                      </AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0.5\">\n                    <ItemTitle>{person.username}</ItemTitle>\n                    <ItemDescription>{person.email}</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/button-group-select.json b/apps/v4/public/r/styles/radix-vega/button-group-select.json
index 1955528bd..953b1bdad 100644
--- a/apps/v4/public/r/styles/radix-vega/button-group-select.json
+++ b/apps/v4/public/r/styles/radix-vega/button-group-select.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-vega/demo/button-group-select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-vega/ui/button-group\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n} from \"@/registry/radix-vega/ui/select\"\n\nconst CURRENCIES = [\n  {\n    value: \"$\",\n    label: \"US Dollar\",\n  },\n  {\n    value: \"€\",\n    label: \"Euro\",\n  },\n  {\n    value: \"£\",\n    label: \"British Pound\",\n  },\n]\n\nexport default function ButtonGroupSelect() {\n  const [currency, setCurrency] = React.useState(\"$\")\n\n  return (\n    <ButtonGroup>\n      <ButtonGroup>\n        <Select value={currency} onValueChange={setCurrency}>\n          <SelectTrigger className=\"font-mono\">{currency}</SelectTrigger>\n          <SelectContent className=\"min-w-24\">\n            <SelectGroup>\n              {CURRENCIES.map((currency) => (\n                <SelectItem key={currency.value} value={currency.value}>\n                  {currency.value}{\" \"}\n                  <span className=\"text-muted-foreground\">{currency.label}</span>\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Input placeholder=\"10.00\" pattern=\"[0-9]*\" />\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button aria-label=\"Send\" size=\"icon\" variant=\"outline\">\n          <ArrowRightIcon />\n        </Button>\n      </ButtonGroup>\n    </ButtonGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-vega/ui/button-group\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n} from \"@/registry/radix-vega/ui/select\"\n\nconst CURRENCIES = [\n  {\n    value: \"$\",\n    label: \"US Dollar\",\n  },\n  {\n    value: \"€\",\n    label: \"Euro\",\n  },\n  {\n    value: \"£\",\n    label: \"British Pound\",\n  },\n]\n\nexport default function ButtonGroupSelect() {\n  const [currency, setCurrency] = React.useState(\"$\")\n\n  return (\n    <ButtonGroup>\n      <ButtonGroup>\n        <Select value={currency} onValueChange={setCurrency}>\n          <SelectTrigger className=\"font-mono\">{currency}</SelectTrigger>\n          <SelectContent className=\"min-w-24\">\n            <SelectGroup>\n              {CURRENCIES.map((currency) => (\n                <SelectItem key={currency.value} value={currency.value}>\n                  {currency.value}{\" \"}\n                  <span className=\"text-muted-foreground\">\n                    {currency.label}\n                  </span>\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Input placeholder=\"10.00\" pattern=\"[0-9]*\" />\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button aria-label=\"Send\" size=\"icon\" variant=\"outline\">\n          <ArrowRightIcon />\n        </Button>\n      </ButtonGroup>\n    </ButtonGroup>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/item-dropdown.json b/apps/v4/public/r/styles/radix-vega/item-dropdown.json
index becc9dc49..7e8cfcf21 100644
--- a/apps/v4/public/r/styles/radix-vega/item-dropdown.json
+++ b/apps/v4/public/r/styles/radix-vega/item-dropdown.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-vega/demo/item-dropdown.tsx",
-      "content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-vega/ui/avatar\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\n\nconst people = [\n  {\n    username: \"shadcn\",\n    avatar: \"https://github.com/shadcn.png\",\n    email: \"shadcn@vercel.com\",\n  },\n  {\n    username: \"maxleiter\",\n    avatar: \"https://github.com/maxleiter.png\",\n    email: \"maxleiter@vercel.com\",\n  },\n  {\n    username: \"evilrabbit\",\n    avatar: \"https://github.com/evilrabbit.png\",\n    email: \"evilrabbit@vercel.com\",\n  },\n]\n\nexport function ItemDropdown() {\n  return (\n    <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-fit\">\n            Select <ChevronDownIcon />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n          <DropdownMenuGroup>\n            {people.map((person) => (\n              <DropdownMenuItem key={person.username} className=\"p-0\">\n                <Item size=\"sm\" className=\"w-full p-2\">\n                  <ItemMedia>\n                    <Avatar className=\"size-8\">\n                      <AvatarImage src={person.avatar} className=\"grayscale\" />\n                      <AvatarFallback>{person.username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0.5\">\n                    <ItemTitle>{person.username}</ItemTitle>\n                    <ItemDescription>{person.email}</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-vega/ui/avatar\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\n\nconst people = [\n  {\n    username: \"shadcn\",\n    avatar: \"https://github.com/shadcn.png\",\n    email: \"shadcn@vercel.com\",\n  },\n  {\n    username: \"maxleiter\",\n    avatar: \"https://github.com/maxleiter.png\",\n    email: \"maxleiter@vercel.com\",\n  },\n  {\n    username: \"evilrabbit\",\n    avatar: \"https://github.com/evilrabbit.png\",\n    email: \"evilrabbit@vercel.com\",\n  },\n]\n\nexport function ItemDropdown() {\n  return (\n    <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-fit\">\n            Select <ChevronDownIcon />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n          <DropdownMenuGroup>\n            {people.map((person) => (\n              <DropdownMenuItem key={person.username} className=\"p-0\">\n                <Item size=\"sm\" className=\"w-full p-2\">\n                  <ItemMedia>\n                    <Avatar className=\"size-8\">\n                      <AvatarImage src={person.avatar} className=\"grayscale\" />\n                      <AvatarFallback>\n                        {person.username.charAt(0)}\n                      </AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0.5\">\n                    <ItemTitle>{person.username}</ItemTitle>\n                    <ItemDescription>{person.email}</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n",
       "type": "registry:internal"
     }
   ],
diff --git a/apps/v4/registry/base-nova/demo/drawer-demo.tsx b/apps/v4/registry/base-nova/demo/drawer-demo.tsx
index 36ed27add..aed24b695 100644
--- a/apps/v4/registry/base-nova/demo/drawer-demo.tsx
+++ b/apps/v4/registry/base-nova/demo/drawer-demo.tsx
@@ -69,7 +69,6 @@ export function DrawerDemo() {
     <Drawer>
       <DrawerTrigger asChild>
         <Button variant="outline">Open Drawer</Button>
-        Open Drawer
       </DrawerTrigger>
       <DrawerContent>
         <div className="mx-auto w-full max-w-sm">
@@ -128,7 +127,6 @@ export function DrawerDemo() {
             <Button>Submit</Button>
             <DrawerClose asChild>
               <Button variant="outline">Cancel</Button>
-              Cancel
             </DrawerClose>
           </DrawerFooter>
         </div>
diff --git a/apps/v4/registry/base-nova/demo/drawer-dialog.tsx b/apps/v4/registry/base-nova/demo/drawer-dialog.tsx
index dd6f82a6e..7196c0a1c 100644
--- a/apps/v4/registry/base-nova/demo/drawer-dialog.tsx
+++ b/apps/v4/registry/base-nova/demo/drawer-dialog.tsx
@@ -54,7 +54,6 @@ export function DrawerDialogDemo() {
     <Drawer open={open} onOpenChange={setOpen}>
       <DrawerTrigger asChild>
         <Button variant="outline">Edit Profile</Button>
-        Edit Profile
       </DrawerTrigger>
       <DrawerContent>
         <DrawerHeader className="text-left">
@@ -67,7 +66,6 @@ export function DrawerDialogDemo() {
         <DrawerFooter className="pt-2">
           <DrawerClose asChild>
             <Button variant="outline">Cancel</Button>
-            Cancel
           </DrawerClose>
         </DrawerFooter>
       </DrawerContent>
diff --git a/apps/v4/registry/bases/base/demo/drawer-demo.tsx b/apps/v4/registry/bases/base/demo/drawer-demo.tsx
index a7bd85c4a..d8dba7b9a 100644
--- a/apps/v4/registry/bases/base/demo/drawer-demo.tsx
+++ b/apps/v4/registry/bases/base/demo/drawer-demo.tsx
@@ -69,7 +69,6 @@ export function DrawerDemo() {
     <Drawer>
       <DrawerTrigger asChild>
         <Button variant="outline">Open Drawer</Button>
-        Open Drawer
       </DrawerTrigger>
       <DrawerContent>
         <div className="mx-auto w-full max-w-sm">
@@ -128,7 +127,6 @@ export function DrawerDemo() {
             <Button>Submit</Button>
             <DrawerClose asChild>
               <Button variant="outline">Cancel</Button>
-              Cancel
             </DrawerClose>
           </DrawerFooter>
         </div>
diff --git a/apps/v4/registry/bases/base/demo/drawer-dialog.tsx b/apps/v4/registry/bases/base/demo/drawer-dialog.tsx
index ca687d786..9e3b2630d 100644
--- a/apps/v4/registry/bases/base/demo/drawer-dialog.tsx
+++ b/apps/v4/registry/bases/base/demo/drawer-dialog.tsx
@@ -54,7 +54,6 @@ export function DrawerDialogDemo() {
     <Drawer open={open} onOpenChange={setOpen}>
       <DrawerTrigger asChild>
         <Button variant="outline">Edit Profile</Button>
-        Edit Profile
       </DrawerTrigger>
       <DrawerContent>
         <DrawerHeader className="text-left">
@@ -67,7 +66,6 @@ export function DrawerDialogDemo() {
         <DrawerFooter className="pt-2">
           <DrawerClose asChild>
             <Button variant="outline">Cancel</Button>
-            Cancel
           </DrawerClose>
         </DrawerFooter>
       </DrawerContent>