diff --git a/apps/v4/content/docs/components/base/data-table.mdx b/apps/v4/content/docs/components/base/data-table.mdx
index 10fcf8f117..8e42fcdc89 100644
--- a/apps/v4/content/docs/components/base/data-table.mdx
+++ b/apps/v4/content/docs/components/base/data-table.mdx
@@ -8,9 +8,10 @@ links:
 ---
 
 <ComponentPreview
-  styleName="base-nova"
+  styleName="radix-nova"
   name="data-table-demo"
-  className="[&_.preview]:items-start"
+  align="start"
+  previewClassName="items-start h-[28rem] px-4 md:px-8"
 />
 
 ## Introduction
@@ -863,7 +864,7 @@ Add pagination controls to your table including page size and selection count.
 
 <ComponentSource
   src="/app/(app)/examples/tasks/components/data-table-pagination.tsx"
-  styleName="base-nova"
+  styleName="radix-nova"
 />
 
 ```tsx
@@ -876,7 +877,7 @@ A component to toggle column visibility.
 
 <ComponentSource
   src="/app/(app)/examples/tasks/components/data-table-view-options.tsx"
-  styleName="base-nova"
+  styleName="radix-nova"
 />
 
 ```tsx
diff --git a/apps/v4/content/docs/components/base/dialog.mdx b/apps/v4/content/docs/components/base/dialog.mdx
index 6388e288e3..c1b0e52cc8 100644
--- a/apps/v4/content/docs/components/base/dialog.mdx
+++ b/apps/v4/content/docs/components/base/dialog.mdx
@@ -87,40 +87,30 @@ import {
 
 ## Examples
 
-### Custom close button
+### Custom Close Button
+
+Replace the default close control with your own button.
 
 <ComponentPreview styleName="base-nova" name="dialog-close-button" />
 
-## Notes
+### No Close Button
 
-To use the `Dialog` component from within a `Context Menu` or `Dropdown Menu`, you must encase the `Context Menu` or
-`Dropdown Menu` component in the `Dialog` component.
+Use `showCloseButton={false}` to hide the close button.
 
-```tsx showLineNumbers title="components/example-dialog-context-menu.tsx" {1, 26}
-<Dialog>
-  <ContextMenu>
-    <ContextMenuTrigger>Right click</ContextMenuTrigger>
-    <ContextMenuContent>
-      <ContextMenuItem>Open</ContextMenuItem>
-      <ContextMenuItem>Download</ContextMenuItem>
-      <DialogTrigger asChild>
-        <ContextMenuItem>
-          <span>Delete</span>
-        </ContextMenuItem>
-      </DialogTrigger>
-    </ContextMenuContent>
-  </ContextMenu>
-  <DialogContent>
-    <DialogHeader>
-      <DialogTitle>Are you absolutely sure?</DialogTitle>
-      <DialogDescription>
-        This action cannot be undone. Are you sure you want to permanently
-        delete this file from our servers?
-      </DialogDescription>
-    </DialogHeader>
-    <DialogFooter>
-      <Button type="submit">Confirm</Button>
-    </DialogFooter>
-  </DialogContent>
-</Dialog>
-```
+<ComponentPreview styleName="base-nova" name="dialog-no-close-button" />
+
+### Sticky Footer
+
+Keep actions visible while the content scrolls.
+
+<ComponentPreview styleName="base-nova" name="dialog-sticky-footer" />
+
+### Scrollable Content
+
+Long content can scroll while the header stays in view.
+
+<ComponentPreview styleName="base-nova" name="dialog-scrollable-content" />
+
+## API Reference
+
+See the [Base UI](https://base-ui.com/react/components/dialog#api-reference) documentation for more information.
diff --git a/apps/v4/content/docs/components/base/drawer.mdx b/apps/v4/content/docs/components/base/drawer.mdx
index 2d6e8f2382..d72166e135 100644
--- a/apps/v4/content/docs/components/base/drawer.mdx
+++ b/apps/v4/content/docs/components/base/drawer.mdx
@@ -7,11 +7,7 @@ links:
   doc: https://vaul.emilkowal.ski/getting-started
 ---
 
-<ComponentPreview
-  styleName="base-nova"
-  name="drawer-demo"
-  description="A drawer component."
-/>
+<ComponentPreview styleName="base-nova" name="drawer-demo" />
 
 ## About
 
@@ -94,8 +90,24 @@ import {
 
 ## Examples
 
+### Scrollable Content
+
+Keep actions visible while the content scrolls.
+
+<ComponentPreview styleName="base-nova" name="drawer-scrollable-content" />
+
+### Sides
+
+Use the `direction` prop to set the side of the drawer. Available options are `top`, `right`, `bottom`, and `left`.
+
+<ComponentPreview styleName="base-nova" name="drawer-sides" />
+
 ### Responsive Dialog
 
 You can combine the `Dialog` and `Drawer` components to create a responsive dialog. This renders a `Dialog` component on desktop and a `Drawer` on mobile.
 
 <ComponentPreview styleName="base-nova" name="drawer-dialog" />
+
+## API Reference
+
+See the [Vaul documentation](https://vaul.emilkowal.ski/components/drawer) for the full API reference.
diff --git a/apps/v4/content/docs/components/radix/data-table.mdx b/apps/v4/content/docs/components/radix/data-table.mdx
index 1495103583..8e42fcdc89 100644
--- a/apps/v4/content/docs/components/radix/data-table.mdx
+++ b/apps/v4/content/docs/components/radix/data-table.mdx
@@ -1,7 +1,7 @@
 ---
 title: Data Table
 description: Powerful table and datagrids built using TanStack Table.
-base: radix
+base: base
 component: true
 links:
   doc: https://tanstack.com/table/v8/docs/introduction
@@ -10,7 +10,8 @@ links:
 <ComponentPreview
   styleName="radix-nova"
   name="data-table-demo"
-  className="[&_.preview]:items-start"
+  align="start"
+  previewClassName="items-start h-[28rem] px-4 md:px-8"
 />
 
 ## Introduction
diff --git a/apps/v4/content/docs/components/radix/dialog.mdx b/apps/v4/content/docs/components/radix/dialog.mdx
index 394ee5829b..fadc790bfc 100644
--- a/apps/v4/content/docs/components/radix/dialog.mdx
+++ b/apps/v4/content/docs/components/radix/dialog.mdx
@@ -87,40 +87,30 @@ import {
 
 ## Examples
 
-### Custom close button
+### Custom Close Button
+
+Replace the default close control with your own button.
 
 <ComponentPreview styleName="radix-nova" name="dialog-close-button" />
 
-## Notes
+### No Close Button
 
-To use the `Dialog` component from within a `Context Menu` or `Dropdown Menu`, you must encase the `Context Menu` or
-`Dropdown Menu` component in the `Dialog` component.
+Use `showCloseButton={false}` to hide the close button.
 
-```tsx showLineNumbers title="components/example-dialog-context-menu.tsx" {1, 26}
-<Dialog>
-  <ContextMenu>
-    <ContextMenuTrigger>Right click</ContextMenuTrigger>
-    <ContextMenuContent>
-      <ContextMenuItem>Open</ContextMenuItem>
-      <ContextMenuItem>Download</ContextMenuItem>
-      <DialogTrigger asChild>
-        <ContextMenuItem>
-          <span>Delete</span>
-        </ContextMenuItem>
-      </DialogTrigger>
-    </ContextMenuContent>
-  </ContextMenu>
-  <DialogContent>
-    <DialogHeader>
-      <DialogTitle>Are you absolutely sure?</DialogTitle>
-      <DialogDescription>
-        This action cannot be undone. Are you sure you want to permanently
-        delete this file from our servers?
-      </DialogDescription>
-    </DialogHeader>
-    <DialogFooter>
-      <Button type="submit">Confirm</Button>
-    </DialogFooter>
-  </DialogContent>
-</Dialog>
-```
+<ComponentPreview styleName="radix-nova" name="dialog-no-close-button" />
+
+### Sticky Footer
+
+Keep actions visible while the content scrolls.
+
+<ComponentPreview styleName="radix-nova" name="dialog-sticky-footer" />
+
+### Scrollable Content
+
+Long content can scroll while the header stays in view.
+
+<ComponentPreview styleName="radix-nova" name="dialog-scrollable-content" />
+
+## API Reference
+
+See the [Radix UI](https://www.radix-ui.com/docs/primitives/components/dialog#api-reference) documentation for more information.
diff --git a/apps/v4/content/docs/components/radix/drawer.mdx b/apps/v4/content/docs/components/radix/drawer.mdx
index aa2c8777b0..0e816351a3 100644
--- a/apps/v4/content/docs/components/radix/drawer.mdx
+++ b/apps/v4/content/docs/components/radix/drawer.mdx
@@ -7,11 +7,7 @@ links:
   doc: https://vaul.emilkowal.ski/getting-started
 ---
 
-<ComponentPreview
-  styleName="radix-nova"
-  name="drawer-demo"
-  description="A drawer component."
-/>
+<ComponentPreview styleName="base-nova" name="drawer-demo" />
 
 ## About
 
@@ -48,7 +44,7 @@ npm install vaul
 <ComponentSource
   name="drawer"
   title="components/ui/drawer.tsx"
-  styleName="radix-nova"
+  styleName="base-nova"
 />
 
 <Step>Update the import paths to match your project setup.</Step>
@@ -94,8 +90,24 @@ import {
 
 ## Examples
 
+### Scrollable Content
+
+Keep actions visible while the content scrolls.
+
+<ComponentPreview styleName="base-nova" name="drawer-scrollable-content" />
+
+### Sides
+
+Use the `direction` prop to set the side of the drawer. Available options are `top`, `right`, `bottom`, and `left`.
+
+<ComponentPreview styleName="base-nova" name="drawer-sides" />
+
 ### Responsive Dialog
 
 You can combine the `Dialog` and `Drawer` components to create a responsive dialog. This renders a `Dialog` component on desktop and a `Drawer` on mobile.
 
-<ComponentPreview styleName="radix-nova" name="drawer-dialog" />
+<ComponentPreview styleName="base-nova" name="drawer-dialog" />
+
+## API Reference
+
+See the [Vaul documentation](https://vaul.emilkowal.ski/components/drawer) for the full API reference.
diff --git a/apps/v4/examples/__index__.tsx b/apps/v4/examples/__index__.tsx
index d9b43061c5..7a417cdc6b 100644
--- a/apps/v4/examples/__index__.tsx
+++ b/apps/v4/examples/__index__.tsx
@@ -1799,19 +1799,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
-    "dialog-chat-settings": {
-      name: "dialog-chat-settings",
-      filePath: "examples/radix/dialog-chat-settings.tsx",
-      component: React.lazy(async () => {
-        const mod = await import("./radix/dialog-chat-settings")
-        const exportName =
-          Object.keys(mod).find(
-            (key) =>
-              typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "dialog-chat-settings"
-        return { default: mod.default || mod[exportName] }
-      }),
-    },
     "dialog-close-button": {
       name: "dialog-close-button",
       filePath: "examples/radix/dialog-close-button.tsx",
@@ -1864,29 +1851,16 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
-    "dialog-with-form": {
-      name: "dialog-with-form",
-      filePath: "examples/radix/dialog-with-form.tsx",
+    "dialog-sticky-footer": {
+      name: "dialog-sticky-footer",
+      filePath: "examples/radix/dialog-sticky-footer.tsx",
       component: React.lazy(async () => {
-        const mod = await import("./radix/dialog-with-form")
+        const mod = await import("./radix/dialog-sticky-footer")
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "dialog-with-form"
-        return { default: mod.default || mod[exportName] }
-      }),
-    },
-    "dialog-with-sticky-footer": {
-      name: "dialog-with-sticky-footer",
-      filePath: "examples/radix/dialog-with-sticky-footer.tsx",
-      component: React.lazy(async () => {
-        const mod = await import("./radix/dialog-with-sticky-footer")
-        const exportName =
-          Object.keys(mod).find(
-            (key) =>
-              typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "dialog-with-sticky-footer"
+          ) || "dialog-sticky-footer"
         return { default: mod.default || mod[exportName] }
       }),
     },
@@ -1929,16 +1903,16 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
-    "drawer-with-sides": {
-      name: "drawer-with-sides",
-      filePath: "examples/radix/drawer-with-sides.tsx",
+    "drawer-sides": {
+      name: "drawer-sides",
+      filePath: "examples/radix/drawer-sides.tsx",
       component: React.lazy(async () => {
-        const mod = await import("./radix/drawer-with-sides")
+        const mod = await import("./radix/drawer-sides")
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "drawer-with-sides"
+          ) || "drawer-sides"
         return { default: mod.default || mod[exportName] }
       }),
     },
@@ -8238,32 +8212,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
-    "default-item-group": {
-      name: "default-item-group",
-      filePath: "examples/base/default-item-group.tsx",
-      component: React.lazy(async () => {
-        const mod = await import("./base/default-item-group")
-        const exportName =
-          Object.keys(mod).find(
-            (key) =>
-              typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "default-item-group"
-        return { default: mod.default || mod[exportName] }
-      }),
-    },
-    "dialog-chat-settings": {
-      name: "dialog-chat-settings",
-      filePath: "examples/base/dialog-chat-settings.tsx",
-      component: React.lazy(async () => {
-        const mod = await import("./base/dialog-chat-settings")
-        const exportName =
-          Object.keys(mod).find(
-            (key) =>
-              typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "dialog-chat-settings"
-        return { default: mod.default || mod[exportName] }
-      }),
-    },
     "dialog-close-button": {
       name: "dialog-close-button",
       filePath: "examples/base/dialog-close-button.tsx",
@@ -8316,29 +8264,16 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
-    "dialog-with-form": {
-      name: "dialog-with-form",
-      filePath: "examples/base/dialog-with-form.tsx",
+    "dialog-sticky-footer": {
+      name: "dialog-sticky-footer",
+      filePath: "examples/base/dialog-sticky-footer.tsx",
       component: React.lazy(async () => {
-        const mod = await import("./base/dialog-with-form")
+        const mod = await import("./base/dialog-sticky-footer")
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "dialog-with-form"
-        return { default: mod.default || mod[exportName] }
-      }),
-    },
-    "dialog-with-sticky-footer": {
-      name: "dialog-with-sticky-footer",
-      filePath: "examples/base/dialog-with-sticky-footer.tsx",
-      component: React.lazy(async () => {
-        const mod = await import("./base/dialog-with-sticky-footer")
-        const exportName =
-          Object.keys(mod).find(
-            (key) =>
-              typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "dialog-with-sticky-footer"
+          ) || "dialog-sticky-footer"
         return { default: mod.default || mod[exportName] }
       }),
     },
@@ -8381,16 +8316,16 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
-    "drawer-with-sides": {
-      name: "drawer-with-sides",
-      filePath: "examples/base/drawer-with-sides.tsx",
+    "drawer-sides": {
+      name: "drawer-sides",
+      filePath: "examples/base/drawer-sides.tsx",
       component: React.lazy(async () => {
-        const mod = await import("./base/drawer-with-sides")
+        const mod = await import("./base/drawer-sides")
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "drawer-with-sides"
+          ) || "drawer-sides"
         return { default: mod.default || mod[exportName] }
       }),
     },
@@ -9655,6 +9590,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "item-group-default": {
+      name: "item-group-default",
+      filePath: "examples/base/item-group-default.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/item-group-default")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-group-default"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "item-group": {
       name: "item-group",
       filePath: "examples/base/item-group.tsx",
diff --git a/apps/v4/examples/base/dialog-chat-settings.tsx b/apps/v4/examples/base/dialog-chat-settings.tsx
deleted file mode 100644
index c7f653d1dc..0000000000
--- a/apps/v4/examples/base/dialog-chat-settings.tsx
+++ /dev/null
@@ -1,429 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Button } from "@/examples/base/ui/button"
-import { Checkbox } from "@/examples/base/ui/checkbox"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/examples/base/ui/dialog"
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldSeparator,
-  FieldSet,
-  FieldTitle,
-} from "@/examples/base/ui/field"
-import { Input } from "@/examples/base/ui/input"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-} from "@/examples/base/ui/input-group"
-import { Kbd } from "@/examples/base/ui/kbd"
-import {
-  NativeSelect,
-  NativeSelectOption,
-} from "@/examples/base/ui/native-select"
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/examples/base/ui/select"
-import { Switch } from "@/examples/base/ui/switch"
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/examples/base/ui/tabs"
-import { Textarea } from "@/examples/base/ui/textarea"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/examples/base/ui/tooltip"
-import { InfoIcon } from "lucide-react"
-
-const spokenLanguages = [
-  { label: "Auto", value: "auto" },
-  { label: "English", value: "en" },
-  { label: "Spanish", value: "es" },
-  { label: "French", value: "fr" },
-  { label: "German", value: "de" },
-  { label: "Italian", value: "it" },
-  { label: "Portuguese", value: "pt" },
-  { label: "Russian", value: "ru" },
-  { label: "Chinese", value: "zh" },
-  { label: "Japanese", value: "ja" },
-  { label: "Korean", value: "ko" },
-  { label: "Arabic", value: "ar" },
-  { label: "Hindi", value: "hi" },
-  { label: "Bengali", value: "bn" },
-  { label: "Telugu", value: "te" },
-  { label: "Marathi", value: "mr" },
-  { label: "Kannada", value: "kn" },
-  { label: "Malayalam", value: "ml" },
-]
-
-const voices = [
-  { label: "Samantha", value: "samantha" },
-  { label: "Alex", value: "alex" },
-  { label: "Fred", value: "fred" },
-  { label: "Victoria", value: "victoria" },
-  { label: "Tom", value: "tom" },
-  { label: "Karen", value: "karen" },
-  { label: "Sam", value: "sam" },
-  { label: "Daniel", value: "daniel" },
-]
-
-const themes = [
-  { label: "Light", value: "light" },
-  { label: "Dark", value: "dark" },
-  { label: "System", value: "system" },
-]
-
-const accents = [
-  { label: "Default", value: "default" },
-  { label: "Red", value: "red" },
-  { label: "Blue", value: "blue" },
-  { label: "Green", value: "green" },
-  { label: "Purple", value: "purple" },
-  { label: "Pink", value: "pink" },
-]
-
-export function DialogChatSettings() {
-  const [tab, setTab] = React.useState("general")
-  const [theme, setTheme] = React.useState("system")
-  const [accentColor, setAccentColor] = React.useState("default")
-  const [spokenLanguage, setSpokenLanguage] = React.useState("en")
-  const [voice, setVoice] = React.useState("samantha")
-
-  return (
-    <>
-      <Dialog>
-        <DialogTrigger render={<Button variant="outline" />}>
-          Chat Settings
-        </DialogTrigger>
-        <DialogContent className="min-w-md">
-          <DialogHeader>
-            <DialogTitle>Chat Settings</DialogTitle>
-            <DialogDescription>
-              Customize your chat settings: theme, accent color, spoken
-              language, voice, personality, and custom instructions.
-            </DialogDescription>
-          </DialogHeader>
-          <div className="flex flex-col gap-4">
-            <NativeSelect
-              value={tab}
-              onChange={(e) => setTab(e.target.value)}
-              className="w-full md:hidden"
-            >
-              <NativeSelectOption value="general">General</NativeSelectOption>
-              <NativeSelectOption value="notifications">
-                Notifications
-              </NativeSelectOption>
-              <NativeSelectOption value="personalization">
-                Personalization
-              </NativeSelectOption>
-              <NativeSelectOption value="security">Security</NativeSelectOption>
-            </NativeSelect>
-            <Tabs value={tab} onValueChange={setTab}>
-              <TabsList className="hidden w-full md:flex">
-                <TabsTrigger value="general">General</TabsTrigger>
-                <TabsTrigger value="notifications">Notifications</TabsTrigger>
-                <TabsTrigger value="personalization">
-                  Personalization
-                </TabsTrigger>
-                <TabsTrigger value="security">Security</TabsTrigger>
-              </TabsList>
-              <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]">
-                <TabsContent value="general">
-                  <FieldSet>
-                    <FieldGroup>
-                      <Field orientation="horizontal">
-                        <FieldLabel htmlFor="theme">Theme</FieldLabel>
-                        <Select
-                          items={themes}
-                          value={theme}
-                          onValueChange={(value) => setTheme(value as string)}
-                        >
-                          <SelectTrigger id="theme">
-                            <SelectValue />
-                          </SelectTrigger>
-                          <SelectContent align="end">
-                            <SelectGroup>
-                              {themes.map((theme) => (
-                                <SelectItem
-                                  key={theme.value}
-                                  value={theme.value}
-                                >
-                                  {theme.label}
-                                </SelectItem>
-                              ))}
-                            </SelectGroup>
-                          </SelectContent>
-                        </Select>
-                      </Field>
-                      <FieldSeparator />
-                      <Field orientation="horizontal">
-                        <FieldLabel htmlFor="accent-color">
-                          Accent Color
-                        </FieldLabel>
-                        <Select
-                          items={accents}
-                          value={accentColor}
-                          onValueChange={(value) =>
-                            setAccentColor(value as string)
-                          }
-                        >
-                          <SelectTrigger id="accent-color">
-                            <SelectValue />
-                          </SelectTrigger>
-                          <SelectContent align="end">
-                            <SelectGroup>
-                              {accents.map((accent) => (
-                                <SelectItem
-                                  key={accent.value}
-                                  value={accent.value}
-                                >
-                                  {accent.label}
-                                </SelectItem>
-                              ))}
-                            </SelectGroup>
-                          </SelectContent>
-                        </Select>
-                      </Field>
-                      <FieldSeparator />
-                      <Field orientation="responsive">
-                        <FieldContent>
-                          <FieldLabel htmlFor="spoken-language">
-                            Spoken Language
-                          </FieldLabel>
-                          <FieldDescription>
-                            For best results, select the language you mainly
-                            speak. If it&apos;s not listed, it may still be
-                            supported via auto-detection.
-                          </FieldDescription>
-                        </FieldContent>
-                        <Select
-                          items={spokenLanguages}
-                          value={spokenLanguage}
-                          onValueChange={(value) =>
-                            setSpokenLanguage(value as string)
-                          }
-                        >
-                          <SelectTrigger id="spoken-language">
-                            <SelectValue />
-                          </SelectTrigger>
-                          <SelectContent align="end">
-                            <SelectGroup>
-                              {spokenLanguages.map((language) => (
-                                <SelectItem
-                                  key={language.value}
-                                  value={language.value}
-                                >
-                                  {language.label}
-                                </SelectItem>
-                              ))}
-                            </SelectGroup>
-                          </SelectContent>
-                        </Select>
-                      </Field>
-                      <FieldSeparator />
-                      <Field orientation="horizontal">
-                        <FieldLabel htmlFor="voice">Voice</FieldLabel>
-                        <Select
-                          items={voices}
-                          value={voice}
-                          onValueChange={(value) => setVoice(value as string)}
-                        >
-                          <SelectTrigger id="voice">
-                            <SelectValue />
-                          </SelectTrigger>
-                          <SelectContent align="end">
-                            <SelectGroup>
-                              {voices.map((voice) => (
-                                <SelectItem
-                                  key={voice.value}
-                                  value={voice.value}
-                                >
-                                  {voice.label}
-                                </SelectItem>
-                              ))}
-                            </SelectGroup>
-                          </SelectContent>
-                        </Select>
-                      </Field>
-                    </FieldGroup>
-                  </FieldSet>
-                </TabsContent>
-                <TabsContent value="notifications">
-                  <FieldGroup>
-                    <FieldSet>
-                      <FieldLabel>Responses</FieldLabel>
-                      <FieldDescription>
-                        Get notified when ChatGPT responds to requests that take
-                        time, like research or image generation.
-                      </FieldDescription>
-                      <FieldGroup data-slot="checkbox-group">
-                        <Field orientation="horizontal">
-                          <Checkbox id="push" defaultChecked disabled />
-                          <FieldLabel htmlFor="push" className="font-normal">
-                            Push notifications
-                          </FieldLabel>
-                        </Field>
-                      </FieldGroup>
-                    </FieldSet>
-                    <FieldSeparator />
-                    <FieldSet>
-                      <FieldLabel>Tasks</FieldLabel>
-                      <FieldDescription>
-                        Get notified when tasks you&apos;ve created have
-                        updates. <a href="#">Manage tasks</a>
-                      </FieldDescription>
-                      <FieldGroup data-slot="checkbox-group">
-                        <Field orientation="horizontal">
-                          <Checkbox id="push-tasks" />
-                          <FieldLabel
-                            htmlFor="push-tasks"
-                            className="font-normal"
-                          >
-                            Push notifications
-                          </FieldLabel>
-                        </Field>
-                        <Field orientation="horizontal">
-                          <Checkbox id="email-tasks" />
-                          <FieldLabel
-                            htmlFor="email-tasks"
-                            className="font-normal"
-                          >
-                            Email notifications
-                          </FieldLabel>
-                        </Field>
-                      </FieldGroup>
-                    </FieldSet>
-                  </FieldGroup>
-                </TabsContent>
-                <TabsContent value="personalization">
-                  <FieldGroup>
-                    <Field orientation="responsive">
-                      <FieldLabel htmlFor="nickname">Nickname</FieldLabel>
-                      <InputGroup>
-                        <InputGroupInput
-                          id="nickname"
-                          placeholder="Broski"
-                          className="@md/field-group:max-w-[200px]"
-                        />
-                        <InputGroupAddon align="inline-end">
-                          <Tooltip>
-                            <TooltipTrigger
-                              render={<InputGroupButton size="icon-xs" />}
-                            >
-                              <InfoIcon />
-                            </TooltipTrigger>
-                            <TooltipContent className="flex items-center gap-2">
-                              Used to identify you in the chat. <Kbd>N</Kbd>
-                            </TooltipContent>
-                          </Tooltip>
-                        </InputGroupAddon>
-                      </InputGroup>
-                    </Field>
-                    <FieldSeparator />
-                    <Field
-                      orientation="responsive"
-                      className="@md/field-group:flex-col @2xl/field-group:flex-row"
-                    >
-                      <FieldContent>
-                        <FieldLabel htmlFor="about">More about you</FieldLabel>
-                        <FieldDescription>
-                          Tell us more about yourself. This will be used to help
-                          us personalize your experience.
-                        </FieldDescription>
-                      </FieldContent>
-                      <Textarea
-                        id="about"
-                        placeholder="I'm a software engineer..."
-                        className="min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]"
-                      />
-                    </Field>
-                    <FieldSeparator />
-                    <FieldLabel>
-                      <Field orientation="horizontal">
-                        <FieldContent>
-                          <FieldLabel htmlFor="customization">
-                            Enable customizations
-                          </FieldLabel>
-                          <FieldDescription>
-                            Enable customizations to make ChatGPT more
-                            personalized.
-                          </FieldDescription>
-                        </FieldContent>
-                        <Switch id="customization" defaultChecked />
-                      </Field>
-                    </FieldLabel>
-                  </FieldGroup>
-                </TabsContent>
-                <TabsContent value="security">
-                  <FieldGroup>
-                    <Field orientation="horizontal">
-                      <FieldContent>
-                        <FieldLabel htmlFor="2fa">
-                          Multi-factor authentication
-                        </FieldLabel>
-                        <FieldDescription>
-                          Enable multi-factor authentication to secure your
-                          account. If you do not have a two-factor
-                          authentication device, you can use a one-time code
-                          sent to your email.
-                        </FieldDescription>
-                      </FieldContent>
-                      <Switch id="2fa" />
-                    </Field>
-                    <FieldSeparator />
-                    <Field orientation="horizontal">
-                      <FieldContent>
-                        <FieldTitle>Log out</FieldTitle>
-                        <FieldDescription>
-                          Log out of your account on this device.
-                        </FieldDescription>
-                      </FieldContent>
-                      <Button variant="outline" size="sm">
-                        Log Out
-                      </Button>
-                    </Field>
-                    <FieldSeparator />
-                    <Field orientation="horizontal">
-                      <FieldContent>
-                        <FieldTitle>Log out of all devices</FieldTitle>
-                        <FieldDescription>
-                          This will log you out of all devices, including the
-                          current session. It may take up to 30 minutes for the
-                          changes to take effect.
-                        </FieldDescription>
-                      </FieldContent>
-                      <Button variant="outline" size="sm">
-                        Log Out All
-                      </Button>
-                    </Field>
-                  </FieldGroup>
-                </TabsContent>
-              </div>
-            </Tabs>
-          </div>
-        </DialogContent>
-      </Dialog>
-    </>
-  )
-}
diff --git a/apps/v4/examples/base/dialog-close-button.tsx b/apps/v4/examples/base/dialog-close-button.tsx
index bd07895554..41ef4d3531 100644
--- a/apps/v4/examples/base/dialog-close-button.tsx
+++ b/apps/v4/examples/base/dialog-close-button.tsx
@@ -36,9 +36,7 @@ export function DialogCloseButton() {
           </div>
         </div>
         <DialogFooter className="sm:justify-start">
-          <DialogClose render={<Button type="button" variant="secondary" />}>
-            Close
-          </DialogClose>
+          <DialogClose render={<Button type="button" />}>Close</DialogClose>
         </DialogFooter>
       </DialogContent>
     </Dialog>
diff --git a/apps/v4/examples/base/dialog-no-close-button.tsx b/apps/v4/examples/base/dialog-no-close-button.tsx
index 1fae948234..637779824c 100644
--- a/apps/v4/examples/base/dialog-no-close-button.tsx
+++ b/apps/v4/examples/base/dialog-no-close-button.tsx
@@ -12,26 +12,19 @@ import {
 
 export function DialogNoCloseButton() {
   return (
-    <>
-      <Dialog>
-        <DialogTrigger render={<Button variant="outline" />}>
-          No Close Button
-        </DialogTrigger>
-        <DialogContent showCloseButton={false}>
-          <DialogHeader>
-            <DialogTitle>No Close Button</DialogTitle>
-            <DialogDescription>
-              This dialog doesn&apos;t have a close button in the top-right
-              corner.
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter>
-            <DialogClose render={<Button variant="outline" />}>
-              Close
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </>
+    <Dialog>
+      <DialogTrigger render={<Button variant="outline" />}>
+        No Close Button
+      </DialogTrigger>
+      <DialogContent showCloseButton={false}>
+        <DialogHeader>
+          <DialogTitle>No Close Button</DialogTitle>
+          <DialogDescription>
+            This dialog doesn&apos;t have a close button in the top-right
+            corner.
+          </DialogDescription>
+        </DialogHeader>
+      </DialogContent>
+    </Dialog>
   )
 }
diff --git a/apps/v4/examples/base/dialog-scrollable-content.tsx b/apps/v4/examples/base/dialog-scrollable-content.tsx
index de33bbc49c..7b5f8e29da 100644
--- a/apps/v4/examples/base/dialog-scrollable-content.tsx
+++ b/apps/v4/examples/base/dialog-scrollable-content.tsx
@@ -10,36 +10,31 @@ import {
 
 export function DialogScrollableContent() {
   return (
-    <>
-      <Dialog>
-        <DialogTrigger render={<Button variant="outline" />}>
-          Scrollable Content
-        </DialogTrigger>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Scrollable Content</DialogTitle>
-            <DialogDescription>
-              This is a dialog with scrollable content.
-            </DialogDescription>
-          </DialogHeader>
-          <div className="style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto">
-            {Array.from({ length: 10 }).map((_, index) => (
-              <p
-                key={index}
-                className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
-              >
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
-                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
-                enim ad minim veniam, quis nostrud exercitation ullamco laboris
-                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
-                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
-                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
-                sunt in culpa qui officia deserunt mollit anim id est laborum.
-              </p>
-            ))}
-          </div>
-        </DialogContent>
-      </Dialog>
-    </>
+    <Dialog>
+      <DialogTrigger render={<Button variant="outline" />}>
+        Scrollable Content
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Scrollable Content</DialogTitle>
+          <DialogDescription>
+            This is a dialog with scrollable content.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="no-scrollbar -mx-4 max-h-[50vh] overflow-y-auto px-4">
+          {Array.from({ length: 10 }).map((_, index) => (
+            <p key={index} className="mb-4 leading-normal">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+          ))}
+        </div>
+      </DialogContent>
+    </Dialog>
   )
 }
diff --git a/apps/v4/examples/base/dialog-sticky-footer.tsx b/apps/v4/examples/base/dialog-sticky-footer.tsx
new file mode 100644
index 0000000000..f513c5e6ee
--- /dev/null
+++ b/apps/v4/examples/base/dialog-sticky-footer.tsx
@@ -0,0 +1,46 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/examples/base/ui/dialog"
+
+export function DialogStickyFooter() {
+  return (
+    <Dialog>
+      <DialogTrigger render={<Button variant="outline" />}>
+        Sticky Footer
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Sticky Footer</DialogTitle>
+          <DialogDescription>
+            This dialog has a sticky footer that stays visible while the content
+            scrolls.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="no-scrollbar -mx-4 max-h-[50vh] overflow-y-auto px-4">
+          {Array.from({ length: 10 }).map((_, index) => (
+            <p key={index} className="mb-4 leading-normal">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+          ))}
+        </div>
+        <DialogFooter>
+          <DialogClose render={<Button variant="outline" />}>Close</DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/v4/examples/base/dialog-with-form.tsx b/apps/v4/examples/base/dialog-with-form.tsx
deleted file mode 100644
index eaf6b0302a..0000000000
--- a/apps/v4/examples/base/dialog-with-form.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Button } from "@/examples/base/ui/button"
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/examples/base/ui/dialog"
-import { Field, FieldGroup, FieldLabel } from "@/examples/base/ui/field"
-import { Input } from "@/examples/base/ui/input"
-
-export function DialogWithForm() {
-  return (
-    <Dialog>
-      <form>
-        <DialogTrigger render={<Button variant="outline" />}>
-          Edit Profile
-        </DialogTrigger>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Edit profile</DialogTitle>
-            <DialogDescription>
-              Make changes to your profile here. Click save when you&apos;re
-              done. Your profile will be updated immediately.
-            </DialogDescription>
-          </DialogHeader>
-          <FieldGroup>
-            <Field>
-              <FieldLabel htmlFor="name-1">Name</FieldLabel>
-              <Input id="name-1" name="name" defaultValue="Pedro Duarte" />
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="username-1">Username</FieldLabel>
-              <Input id="username-1" name="username" defaultValue="@peduarte" />
-            </Field>
-          </FieldGroup>
-          <DialogFooter>
-            <DialogClose render={<Button variant="outline" />}>
-              Cancel
-            </DialogClose>
-            <Button type="submit">Save changes</Button>
-          </DialogFooter>
-        </DialogContent>
-      </form>
-    </Dialog>
-  )
-}
diff --git a/apps/v4/examples/base/dialog-with-sticky-footer.tsx b/apps/v4/examples/base/dialog-with-sticky-footer.tsx
deleted file mode 100644
index 4393ac2cee..0000000000
--- a/apps/v4/examples/base/dialog-with-sticky-footer.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Button } from "@/examples/base/ui/button"
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/examples/base/ui/dialog"
-
-export function DialogWithStickyFooter() {
-  return (
-    <>
-      <Dialog>
-        <DialogTrigger render={<Button variant="outline" />}>
-          Sticky Footer
-        </DialogTrigger>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Scrollable Content</DialogTitle>
-            <DialogDescription>
-              This is a dialog with scrollable content.
-            </DialogDescription>
-          </DialogHeader>
-          <div className="style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto">
-            {Array.from({ length: 10 }).map((_, index) => (
-              <p
-                key={index}
-                className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
-              >
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
-                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
-                enim ad minim veniam, quis nostrud exercitation ullamco laboris
-                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
-                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
-                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
-                sunt in culpa qui officia deserunt mollit anim id est laborum.
-              </p>
-            ))}
-          </div>
-          <DialogFooter>
-            <DialogClose render={<Button variant="outline" />}>
-              Close
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </>
-  )
-}
diff --git a/apps/v4/examples/base/drawer-scrollable-content.tsx b/apps/v4/examples/base/drawer-scrollable-content.tsx
index 9e111cfbd1..ee395b7105 100644
--- a/apps/v4/examples/base/drawer-scrollable-content.tsx
+++ b/apps/v4/examples/base/drawer-scrollable-content.tsx
@@ -23,10 +23,7 @@ export function DrawerScrollableContent() {
         </DrawerHeader>
         <div className="no-scrollbar overflow-y-auto px-4">
           {Array.from({ length: 10 }).map((_, index) => (
-            <p
-              key={index}
-              className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
-            >
+            <p key={index} className="mb-4 leading-normal">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
               eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
               enim ad minim veniam, quis nostrud exercitation ullamco laboris
diff --git a/apps/v4/examples/base/drawer-with-sides.tsx b/apps/v4/examples/base/drawer-sides.tsx
similarity index 93%
rename from apps/v4/examples/base/drawer-with-sides.tsx
rename to apps/v4/examples/base/drawer-sides.tsx
index 374ff8aad5..dcd2bfe4f4 100644
--- a/apps/v4/examples/base/drawer-with-sides.tsx
+++ b/apps/v4/examples/base/drawer-sides.tsx
@@ -36,10 +36,7 @@ export function DrawerWithSides() {
             </DrawerHeader>
             <div className="no-scrollbar overflow-y-auto px-4">
               {Array.from({ length: 10 }).map((_, index) => (
-                <p
-                  key={index}
-                  className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
-                >
+                <p key={index} className="mb-4 leading-normal">
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
                   do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                   Ut enim ad minim veniam, quis nostrud exercitation ullamco
diff --git a/apps/v4/examples/base/default-item-group.tsx b/apps/v4/examples/base/item-group-default.tsx
similarity index 100%
rename from apps/v4/examples/base/default-item-group.tsx
rename to apps/v4/examples/base/item-group-default.tsx
diff --git a/apps/v4/examples/radix/dialog-chat-settings.tsx b/apps/v4/examples/radix/dialog-chat-settings.tsx
deleted file mode 100644
index a55e461ee9..0000000000
--- a/apps/v4/examples/radix/dialog-chat-settings.tsx
+++ /dev/null
@@ -1,396 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Button } from "@/examples/radix/ui/button"
-import { Checkbox } from "@/examples/radix/ui/checkbox"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/examples/radix/ui/dialog"
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldSeparator,
-  FieldSet,
-  FieldTitle,
-} from "@/examples/radix/ui/field"
-import { Input } from "@/examples/radix/ui/input"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-} from "@/examples/radix/ui/input-group"
-import { Kbd } from "@/examples/radix/ui/kbd"
-import {
-  NativeSelect,
-  NativeSelectOption,
-} from "@/examples/radix/ui/native-select"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-} from "@/examples/radix/ui/select"
-import { Switch } from "@/examples/radix/ui/switch"
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/examples/radix/ui/tabs"
-import { Textarea } from "@/examples/radix/ui/textarea"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/examples/radix/ui/tooltip"
-import { InfoIcon } from "lucide-react"
-
-const spokenLanguages = [
-  { label: "English", value: "en" },
-  { label: "Spanish", value: "es" },
-  { label: "French", value: "fr" },
-  { label: "German", value: "de" },
-  { label: "Italian", value: "it" },
-  { label: "Portuguese", value: "pt" },
-  { label: "Russian", value: "ru" },
-  { label: "Chinese", value: "zh" },
-  { label: "Japanese", value: "ja" },
-  { label: "Korean", value: "ko" },
-  { label: "Arabic", value: "ar" },
-  { label: "Hindi", value: "hi" },
-  { label: "Bengali", value: "bn" },
-  { label: "Telugu", value: "te" },
-  { label: "Marathi", value: "mr" },
-  { label: "Kannada", value: "kn" },
-  { label: "Malayalam", value: "ml" },
-]
-
-const voices = [
-  { label: "Samantha", value: "samantha" },
-  { label: "Alex", value: "alex" },
-  { label: "Fred", value: "fred" },
-  { label: "Victoria", value: "victoria" },
-  { label: "Tom", value: "tom" },
-  { label: "Karen", value: "karen" },
-  { label: "Sam", value: "sam" },
-  { label: "Daniel", value: "daniel" },
-]
-
-export function DialogChatSettings() {
-  const [tab, setTab] = React.useState("general")
-  const [theme, setTheme] = React.useState("system")
-  const [accentColor, setAccentColor] = React.useState("default")
-  const [spokenLanguage, setSpokenLanguage] = React.useState("en")
-  const [voice, setVoice] = React.useState("samantha")
-
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button variant="outline">Chat Settings</Button>
-      </DialogTrigger>
-      <DialogContent className="min-w-md">
-        <DialogHeader>
-          <DialogTitle>Chat Settings</DialogTitle>
-          <DialogDescription>
-            Customize your chat settings: theme, accent color, spoken language,
-            voice, personality, and custom instructions.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="flex flex-col gap-4">
-          <NativeSelect
-            value={tab}
-            onChange={(e) => setTab(e.target.value)}
-            className="w-full md:hidden"
-          >
-            <NativeSelectOption value="general">General</NativeSelectOption>
-            <NativeSelectOption value="notifications">
-              Notifications
-            </NativeSelectOption>
-            <NativeSelectOption value="personalization">
-              Personalization
-            </NativeSelectOption>
-            <NativeSelectOption value="security">Security</NativeSelectOption>
-          </NativeSelect>
-          <Tabs value={tab} onValueChange={setTab}>
-            <TabsList className="hidden w-full md:flex">
-              <TabsTrigger value="general">General</TabsTrigger>
-              <TabsTrigger value="notifications">Notifications</TabsTrigger>
-              <TabsTrigger value="personalization">Personalization</TabsTrigger>
-              <TabsTrigger value="security">Security</TabsTrigger>
-            </TabsList>
-            <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]">
-              <TabsContent value="general">
-                <FieldSet>
-                  <FieldGroup>
-                    <Field orientation="horizontal">
-                      <FieldLabel htmlFor="theme">Theme</FieldLabel>
-                      <Select value={theme} onValueChange={setTheme}>
-                        <SelectTrigger id="theme">
-                          <SelectValue placeholder="Select" />
-                        </SelectTrigger>
-                        <SelectContent align="end">
-                          <SelectItem value="light">Light</SelectItem>
-                          <SelectItem value="dark">Dark</SelectItem>
-                          <SelectItem value="system">System</SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </Field>
-                    <FieldSeparator />
-                    <Field orientation="horizontal">
-                      <FieldLabel htmlFor="accent-color">
-                        Accent Color
-                      </FieldLabel>
-                      <Select
-                        value={accentColor}
-                        onValueChange={setAccentColor}
-                      >
-                        <SelectTrigger id="accent-color">
-                          <SelectValue placeholder="Select" />
-                        </SelectTrigger>
-                        <SelectContent align="end">
-                          <SelectItem value="default">
-                            <div className="size-3 rounded-full bg-neutral-500 dark:bg-neutral-400" />
-                            Default
-                          </SelectItem>
-                          <SelectItem value="red">
-                            <div className="size-3 rounded-full bg-red-500 dark:bg-red-400" />
-                            Red
-                          </SelectItem>
-                          <SelectItem value="blue">
-                            <div className="size-3 rounded-full bg-blue-500 dark:bg-blue-400" />
-                            Blue
-                          </SelectItem>
-                          <SelectItem value="green">
-                            <div className="size-3 rounded-full bg-green-500 dark:bg-green-400" />
-                            Green
-                          </SelectItem>
-                          <SelectItem value="purple">
-                            <div className="size-3 rounded-full bg-purple-500 dark:bg-purple-400" />
-                            Purple
-                          </SelectItem>
-                          <SelectItem value="pink">
-                            <div className="size-3 rounded-full bg-pink-500 dark:bg-pink-400" />
-                            Pink
-                          </SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </Field>
-                    <FieldSeparator />
-                    <Field orientation="responsive">
-                      <FieldContent>
-                        <FieldLabel htmlFor="spoken-language">
-                          Spoken Language
-                        </FieldLabel>
-                        <FieldDescription>
-                          For best results, select the language you mainly
-                          speak. If it&apos;s not listed, it may still be
-                          supported via auto-detection.
-                        </FieldDescription>
-                      </FieldContent>
-                      <Select
-                        value={spokenLanguage}
-                        onValueChange={setSpokenLanguage}
-                      >
-                        <SelectTrigger id="spoken-language">
-                          <SelectValue placeholder="Select" />
-                        </SelectTrigger>
-                        <SelectContent align="end" position="item-aligned">
-                          <SelectItem value="auto">Auto</SelectItem>
-                          <SelectSeparator />
-                          {spokenLanguages.map((language) => (
-                            <SelectItem
-                              key={language.value}
-                              value={language.value}
-                            >
-                              {language.label}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </Field>
-                    <FieldSeparator />
-                    <Field orientation="horizontal">
-                      <FieldLabel htmlFor="voice">Voice</FieldLabel>
-                      <Select value={voice} onValueChange={setVoice}>
-                        <SelectTrigger id="voice">
-                          <SelectValue placeholder="Select" />
-                        </SelectTrigger>
-                        <SelectContent align="end" position="item-aligned">
-                          {voices.map((voice) => (
-                            <SelectItem key={voice.value} value={voice.value}>
-                              {voice.label}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </Field>
-                  </FieldGroup>
-                </FieldSet>
-              </TabsContent>
-              <TabsContent value="notifications">
-                <FieldGroup>
-                  <FieldSet>
-                    <FieldLabel>Responses</FieldLabel>
-                    <FieldDescription>
-                      Get notified when ChatGPT responds to requests that take
-                      time, like research or image generation.
-                    </FieldDescription>
-                    <FieldGroup data-slot="checkbox-group">
-                      <Field orientation="horizontal">
-                        <Checkbox id="push" defaultChecked disabled />
-                        <FieldLabel htmlFor="push" className="font-normal">
-                          Push notifications
-                        </FieldLabel>
-                      </Field>
-                    </FieldGroup>
-                  </FieldSet>
-                  <FieldSeparator />
-                  <FieldSet>
-                    <FieldLabel>Tasks</FieldLabel>
-                    <FieldDescription>
-                      Get notified when tasks you&apos;ve created have updates.{" "}
-                      <a href="#">Manage tasks</a>
-                    </FieldDescription>
-                    <FieldGroup data-slot="checkbox-group">
-                      <Field orientation="horizontal">
-                        <Checkbox id="push-tasks" />
-                        <FieldLabel
-                          htmlFor="push-tasks"
-                          className="font-normal"
-                        >
-                          Push notifications
-                        </FieldLabel>
-                      </Field>
-                      <Field orientation="horizontal">
-                        <Checkbox id="email-tasks" />
-                        <FieldLabel
-                          htmlFor="email-tasks"
-                          className="font-normal"
-                        >
-                          Email notifications
-                        </FieldLabel>
-                      </Field>
-                    </FieldGroup>
-                  </FieldSet>
-                </FieldGroup>
-              </TabsContent>
-              <TabsContent value="personalization">
-                <FieldGroup>
-                  <Field orientation="responsive">
-                    <FieldLabel htmlFor="nickname">Nickname</FieldLabel>
-                    <InputGroup>
-                      <InputGroupInput
-                        id="nickname"
-                        placeholder="Broski"
-                        className="@md/field-group:max-w-[200px]"
-                      />
-                      <InputGroupAddon align="inline-end">
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <InputGroupButton size="icon-xs">
-                              <InfoIcon />
-                            </InputGroupButton>
-                          </TooltipTrigger>
-                          <TooltipContent className="flex items-center gap-2">
-                            Used to identify you in the chat. <Kbd>N</Kbd>
-                          </TooltipContent>
-                        </Tooltip>
-                      </InputGroupAddon>
-                    </InputGroup>
-                  </Field>
-                  <FieldSeparator />
-                  <Field
-                    orientation="responsive"
-                    className="@md/field-group:flex-col @2xl/field-group:flex-row"
-                  >
-                    <FieldContent>
-                      <FieldLabel htmlFor="about">More about you</FieldLabel>
-                      <FieldDescription>
-                        Tell us more about yourself. This will be used to help
-                        us personalize your experience.
-                      </FieldDescription>
-                    </FieldContent>
-                    <Textarea
-                      id="about"
-                      placeholder="I'm a software engineer..."
-                      className="min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]"
-                    />
-                  </Field>
-                  <FieldSeparator />
-                  <FieldLabel>
-                    <Field orientation="horizontal">
-                      <FieldContent>
-                        <FieldLabel htmlFor="customization">
-                          Enable customizations
-                        </FieldLabel>
-                        <FieldDescription>
-                          Enable customizations to make ChatGPT more
-                          personalized.
-                        </FieldDescription>
-                      </FieldContent>
-                      <Switch id="customization" defaultChecked />
-                    </Field>
-                  </FieldLabel>
-                </FieldGroup>
-              </TabsContent>
-              <TabsContent value="security">
-                <FieldGroup>
-                  <Field orientation="horizontal">
-                    <FieldContent>
-                      <FieldLabel htmlFor="2fa">
-                        Multi-factor authentication
-                      </FieldLabel>
-                      <FieldDescription>
-                        Enable multi-factor authentication to secure your
-                        account. If you do not have a two-factor authentication
-                        device, you can use a one-time code sent to your email.
-                      </FieldDescription>
-                    </FieldContent>
-                    <Switch id="2fa" />
-                  </Field>
-                  <FieldSeparator />
-                  <Field orientation="horizontal">
-                    <FieldContent>
-                      <FieldTitle>Log out</FieldTitle>
-                      <FieldDescription>
-                        Log out of your account on this device.
-                      </FieldDescription>
-                    </FieldContent>
-                    <Button variant="outline" size="sm">
-                      Log Out
-                    </Button>
-                  </Field>
-                  <FieldSeparator />
-                  <Field orientation="horizontal">
-                    <FieldContent>
-                      <FieldTitle>Log out of all devices</FieldTitle>
-                      <FieldDescription>
-                        This will log you out of all devices, including the
-                        current session. It may take up to 30 minutes for the
-                        changes to take effect.
-                      </FieldDescription>
-                    </FieldContent>
-                    <Button variant="outline" size="sm">
-                      Log Out All
-                    </Button>
-                  </Field>
-                </FieldGroup>
-              </TabsContent>
-            </div>
-          </Tabs>
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
-}
diff --git a/apps/v4/examples/radix/dialog-close-button.tsx b/apps/v4/examples/radix/dialog-close-button.tsx
index 7c1f20adea..1b0ad948fa 100644
--- a/apps/v4/examples/radix/dialog-close-button.tsx
+++ b/apps/v4/examples/radix/dialog-close-button.tsx
@@ -39,9 +39,7 @@ export function DialogCloseButton() {
         </div>
         <DialogFooter className="sm:justify-start">
           <DialogClose asChild>
-            <Button type="button" variant="secondary">
-              Close
-            </Button>
+            <Button type="button">Close</Button>
           </DialogClose>
         </DialogFooter>
       </DialogContent>
diff --git a/apps/v4/examples/radix/dialog-no-close-button.tsx b/apps/v4/examples/radix/dialog-no-close-button.tsx
index 0440fa4be2..d70d876fbd 100644
--- a/apps/v4/examples/radix/dialog-no-close-button.tsx
+++ b/apps/v4/examples/radix/dialog-no-close-button.tsx
@@ -1,10 +1,8 @@
 import { Button } from "@/examples/radix/ui/button"
 import {
   Dialog,
-  DialogClose,
   DialogContent,
   DialogDescription,
-  DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
@@ -24,11 +22,6 @@ export function DialogNoCloseButton() {
             corner.
           </DialogDescription>
         </DialogHeader>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Close</Button>
-          </DialogClose>
-        </DialogFooter>
       </DialogContent>
     </Dialog>
   )
diff --git a/apps/v4/examples/radix/dialog-scrollable-content.tsx b/apps/v4/examples/radix/dialog-scrollable-content.tsx
index 02253197d9..6a680ea412 100644
--- a/apps/v4/examples/radix/dialog-scrollable-content.tsx
+++ b/apps/v4/examples/radix/dialog-scrollable-content.tsx
@@ -21,12 +21,9 @@ export function DialogScrollableContent() {
             This is a dialog with scrollable content.
           </DialogDescription>
         </DialogHeader>
-        <div className="style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto">
+        <div className="no-scrollbar -mx-4 max-h-[50vh] overflow-y-auto px-4">
           {Array.from({ length: 10 }).map((_, index) => (
-            <p
-              key={index}
-              className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
-            >
+            <p key={index} className="mb-4 leading-normal">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
               eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
               enim ad minim veniam, quis nostrud exercitation ullamco laboris
diff --git a/apps/v4/examples/radix/dialog-with-sticky-footer.tsx b/apps/v4/examples/radix/dialog-sticky-footer.tsx
similarity index 71%
rename from apps/v4/examples/radix/dialog-with-sticky-footer.tsx
rename to apps/v4/examples/radix/dialog-sticky-footer.tsx
index 5d6e88e7fb..14e714bd11 100644
--- a/apps/v4/examples/radix/dialog-with-sticky-footer.tsx
+++ b/apps/v4/examples/radix/dialog-sticky-footer.tsx
@@ -10,7 +10,7 @@ import {
   DialogTrigger,
 } from "@/examples/radix/ui/dialog"
 
-export function DialogWithStickyFooter() {
+export function DialogStickyFooter() {
   return (
     <Dialog>
       <DialogTrigger asChild>
@@ -18,17 +18,15 @@ export function DialogWithStickyFooter() {
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Scrollable Content</DialogTitle>
+          <DialogTitle>Sticky Footer</DialogTitle>
           <DialogDescription>
-            This is a dialog with scrollable content.
+            This dialog has a sticky footer that stays visible while the content
+            scrolls.
           </DialogDescription>
         </DialogHeader>
-        <div className="style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto">
+        <div className="no-scrollbar -mx-4 max-h-[50vh] overflow-y-auto px-4">
           {Array.from({ length: 10 }).map((_, index) => (
-            <p
-              key={index}
-              className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
-            >
+            <p key={index} className="mb-4 leading-normal">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
               eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
               enim ad minim veniam, quis nostrud exercitation ullamco laboris
diff --git a/apps/v4/examples/radix/dialog-with-form.tsx b/apps/v4/examples/radix/dialog-with-form.tsx
deleted file mode 100644
index b9f8231f91..0000000000
--- a/apps/v4/examples/radix/dialog-with-form.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Button } from "@/examples/radix/ui/button"
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/examples/radix/ui/dialog"
-import { Field, FieldGroup, FieldLabel } from "@/examples/radix/ui/field"
-import { Input } from "@/examples/radix/ui/input"
-
-export function DialogWithForm() {
-  return (
-    <Dialog>
-      <form>
-        <DialogTrigger asChild>
-          <Button variant="outline">Edit Profile</Button>
-        </DialogTrigger>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Edit profile</DialogTitle>
-            <DialogDescription>
-              Make changes to your profile here. Click save when you&apos;re
-              done. Your profile will be updated immediately.
-            </DialogDescription>
-          </DialogHeader>
-          <FieldGroup>
-            <Field>
-              <FieldLabel htmlFor="name-1">Name</FieldLabel>
-              <Input id="name-1" name="name" defaultValue="Pedro Duarte" />
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="username-1">Username</FieldLabel>
-              <Input id="username-1" name="username" defaultValue="@peduarte" />
-            </Field>
-          </FieldGroup>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button variant="outline">Cancel</Button>
-            </DialogClose>
-            <Button type="submit">Save changes</Button>
-          </DialogFooter>
-        </DialogContent>
-      </form>
-    </Dialog>
-  )
-}
diff --git a/apps/v4/examples/radix/drawer-with-sides.tsx b/apps/v4/examples/radix/drawer-sides.tsx
similarity index 100%
rename from apps/v4/examples/radix/drawer-with-sides.tsx
rename to apps/v4/examples/radix/drawer-sides.tsx