diff --git a/apps/v4/app/(create)/lib/search-params.ts b/apps/v4/app/(create)/lib/search-params.ts
index 6c766ad7ed..1fbd44bd68 100644
--- a/apps/v4/app/(create)/lib/search-params.ts
+++ b/apps/v4/app/(create)/lib/search-params.ts
@@ -133,7 +133,11 @@ export function useDesignSystemSearchParams(options: Options = {}) {
 
   // Use ref so setParams callback stays stable across renders.
   const paramsRef = React.useRef(params)
-  paramsRef.current = params
+  React.useEffect(() => {
+    paramsRef.current = params
+  }, [params])
+
+  type RawSetParamsInput = Parameters<typeof rawSetParams>[0]
 
   const setParams = React.useCallback(
     (
@@ -153,7 +157,7 @@ export function useDesignSystemSearchParams(options: Options = {}) {
 
       if (!hasDesignSystemUpdate) {
         // No design system change, pass through directly.
-        return rawSetParams(resolvedUpdates as any, setOptions)
+        return rawSetParams(resolvedUpdates as RawSetParamsInput, setOptions)
       }
 
       // Merge current decoded values with updates.
@@ -187,7 +191,7 @@ export function useDesignSystemSearchParams(options: Options = {}) {
         }
       }
 
-      return rawSetParams(rawUpdate as any, setOptions)
+      return rawSetParams(rawUpdate as RawSetParamsInput, setOptions)
     },
     [rawSetParams]
   )
diff --git a/apps/v4/lib/explore.ts b/apps/v4/lib/explore.ts
index 0d737fa863..0768962363 100644
--- a/apps/v4/lib/explore.ts
+++ b/apps/v4/lib/explore.ts
@@ -1,11 +1,11 @@
 export const EXPLORE_PRESETS: string[] = [
-  "AuFzoPZ",
-  "A1zDJJ",
-  "A1DN5Lx2",
-  "AbZIu0W",
-  "AL1Qw4",
-  "A2He4G",
-  "A1DOCw6i",
-  "A1D5CKfo",
-  "AbYAmrx",
+  "auFzoPZ",
+  "a1zDJJ",
+  "a1DN5Lx2",
+  "abZIu0W",
+  "a2r6bw",
+  "a2He4G",
+  "a1DOCw6i",
+  "a1D5CKfo",
+  "abYAmrx",
 ]
diff --git a/apps/v4/public/presets/A1D5CKfo-dark.png b/apps/v4/public/presets/A1D5CKfo-dark.png
index ef702a9527..af680260d5 100644
Binary files a/apps/v4/public/presets/A1D5CKfo-dark.png and b/apps/v4/public/presets/A1D5CKfo-dark.png differ
diff --git a/apps/v4/public/presets/A1D5CKfo-light.png b/apps/v4/public/presets/A1D5CKfo-light.png
index c7d8be3d68..ac1f3e74ce 100644
Binary files a/apps/v4/public/presets/A1D5CKfo-light.png and b/apps/v4/public/presets/A1D5CKfo-light.png differ
diff --git a/apps/v4/public/presets/A1DN5Lx2-dark.png b/apps/v4/public/presets/A1DN5Lx2-dark.png
index 2bb41afad9..c21103fb4e 100644
Binary files a/apps/v4/public/presets/A1DN5Lx2-dark.png and b/apps/v4/public/presets/A1DN5Lx2-dark.png differ
diff --git a/apps/v4/public/presets/A1DN5Lx2-light.png b/apps/v4/public/presets/A1DN5Lx2-light.png
index 16c645d360..190d57ca35 100644
Binary files a/apps/v4/public/presets/A1DN5Lx2-light.png and b/apps/v4/public/presets/A1DN5Lx2-light.png differ
diff --git a/apps/v4/public/presets/A1DOCw6i-dark.png b/apps/v4/public/presets/A1DOCw6i-dark.png
index 14c0df2d98..9cff9845b0 100644
Binary files a/apps/v4/public/presets/A1DOCw6i-dark.png and b/apps/v4/public/presets/A1DOCw6i-dark.png differ
diff --git a/apps/v4/public/presets/A1DOCw6i-light.png b/apps/v4/public/presets/A1DOCw6i-light.png
index 4e714dc2ab..337ba41a9b 100644
Binary files a/apps/v4/public/presets/A1DOCw6i-light.png and b/apps/v4/public/presets/A1DOCw6i-light.png differ
diff --git a/apps/v4/public/presets/A1zDJJ-dark.png b/apps/v4/public/presets/A1zDJJ-dark.png
index 4f2bbde7aa..8af0077c75 100644
Binary files a/apps/v4/public/presets/A1zDJJ-dark.png and b/apps/v4/public/presets/A1zDJJ-dark.png differ
diff --git a/apps/v4/public/presets/A1zDJJ-light.png b/apps/v4/public/presets/A1zDJJ-light.png
index 51e325144c..9372f34e52 100644
Binary files a/apps/v4/public/presets/A1zDJJ-light.png and b/apps/v4/public/presets/A1zDJJ-light.png differ
diff --git a/apps/v4/public/presets/A2He4G-dark.png b/apps/v4/public/presets/A2He4G-dark.png
index c9021ab7ad..bdfa513c67 100644
Binary files a/apps/v4/public/presets/A2He4G-dark.png and b/apps/v4/public/presets/A2He4G-dark.png differ
diff --git a/apps/v4/public/presets/A2He4G-light.png b/apps/v4/public/presets/A2He4G-light.png
index c17dbb3646..42e509bd9f 100644
Binary files a/apps/v4/public/presets/A2He4G-light.png and b/apps/v4/public/presets/A2He4G-light.png differ
diff --git a/apps/v4/public/presets/AbYAmrx-dark.png b/apps/v4/public/presets/AbYAmrx-dark.png
index 701c1e405d..e6d166b3ea 100644
Binary files a/apps/v4/public/presets/AbYAmrx-dark.png and b/apps/v4/public/presets/AbYAmrx-dark.png differ
diff --git a/apps/v4/public/presets/AbYAmrx-light.png b/apps/v4/public/presets/AbYAmrx-light.png
index 3bcdce5a9c..4ecf7cf442 100644
Binary files a/apps/v4/public/presets/AbYAmrx-light.png and b/apps/v4/public/presets/AbYAmrx-light.png differ
diff --git a/apps/v4/public/presets/AbZIu0W-dark.png b/apps/v4/public/presets/AbZIu0W-dark.png
index 8fc47c9b92..de4a7f8119 100644
Binary files a/apps/v4/public/presets/AbZIu0W-dark.png and b/apps/v4/public/presets/AbZIu0W-dark.png differ
diff --git a/apps/v4/public/presets/AbZIu0W-light.png b/apps/v4/public/presets/AbZIu0W-light.png
index 063252fcce..ac82c4590e 100644
Binary files a/apps/v4/public/presets/AbZIu0W-light.png and b/apps/v4/public/presets/AbZIu0W-light.png differ
diff --git a/apps/v4/public/presets/AuFzoPZ-dark.png b/apps/v4/public/presets/AuFzoPZ-dark.png
index 4fde9f252f..7c4b0a7950 100644
Binary files a/apps/v4/public/presets/AuFzoPZ-dark.png and b/apps/v4/public/presets/AuFzoPZ-dark.png differ
diff --git a/apps/v4/public/presets/AuFzoPZ-light.png b/apps/v4/public/presets/AuFzoPZ-light.png
index 9b4ba70edf..2763f654da 100644
Binary files a/apps/v4/public/presets/AuFzoPZ-light.png and b/apps/v4/public/presets/AuFzoPZ-light.png differ
diff --git a/apps/v4/public/presets/a2r6bw-dark.png b/apps/v4/public/presets/a2r6bw-dark.png
new file mode 100644
index 0000000000..ffbed0e134
Binary files /dev/null and b/apps/v4/public/presets/a2r6bw-dark.png differ
diff --git a/apps/v4/public/presets/a2r6bw-light.png b/apps/v4/public/presets/a2r6bw-light.png
new file mode 100644
index 0000000000..53d9595f3d
Binary files /dev/null and b/apps/v4/public/presets/a2r6bw-light.png differ
diff --git a/apps/v4/public/r/styles/base-lyra/preview.json b/apps/v4/public/r/styles/base-lyra/preview.json
index 5655949c07..6d5bf41a72 100644
--- a/apps/v4/public/r/styles/base-lyra/preview.json
+++ b/apps/v4/public/r/styles/base-lyra/preview.json
@@ -34,7 +34,7 @@
   "files": [
     {
       "path": "registry/base-lyra/blocks/preview.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\nimport { type IconLibraryName } from \"shadcn/icons\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-lyra/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-lyra/ui/badge\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/base-lyra/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-lyra/ui/chart\"\nimport { Checkbox } from \"@/registry/base-lyra/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport { Field } from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/base-lyra/ui/radio-group\"\nimport { Slider } from \"@/registry/base-lyra/ui/slider\"\nimport { Switch } from \"@/registry/base-lyra/ui/switch\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\nimport { RADII } from \"@/registry/config\"\nimport { STYLES } from \"@/registry/styles\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { FONTS } from \"@/app/(create)/lib/fonts\"\nimport { useDesignSystemSearchParams } from \"@/app/(create)/lib/search-params\"\n\nconst PREVIEW_ICONS = [\n  {\n    lucide: \"CopyIcon\",\n    tabler: \"IconCopy\",\n    hugeicons: \"Copy01Icon\",\n    phosphor: \"CopyIcon\",\n    remixicon: \"RiFileCopyLine\",\n  },\n  {\n    lucide: \"CircleAlertIcon\",\n    tabler: \"IconExclamationCircle\",\n    hugeicons: \"AlertCircleIcon\",\n    phosphor: \"WarningCircleIcon\",\n    remixicon: \"RiErrorWarningLine\",\n  },\n  {\n    lucide: \"TrashIcon\",\n    tabler: \"IconTrash\",\n    hugeicons: \"Delete02Icon\",\n    phosphor: \"TrashIcon\",\n    remixicon: \"RiDeleteBinLine\",\n  },\n  {\n    lucide: \"ShareIcon\",\n    tabler: \"IconShare\",\n    hugeicons: \"Share03Icon\",\n    phosphor: \"ShareIcon\",\n    remixicon: \"RiShareLine\",\n  },\n  {\n    lucide: \"ShoppingBagIcon\",\n    tabler: \"IconShoppingBag\",\n    hugeicons: \"ShoppingBag01Icon\",\n    phosphor: \"BagIcon\",\n    remixicon: \"RiShoppingBagLine\",\n  },\n  {\n    lucide: \"MoreHorizontalIcon\",\n    tabler: \"IconDots\",\n    hugeicons: \"MoreHorizontalCircle01Icon\",\n    phosphor: \"DotsThreeIcon\",\n    remixicon: \"RiMoreLine\",\n  },\n  {\n    lucide: \"Loader2Icon\",\n    tabler: \"IconLoader\",\n    hugeicons: \"Loading03Icon\",\n    phosphor: \"SpinnerIcon\",\n    remixicon: \"RiLoaderLine\",\n  },\n  {\n    lucide: \"PlusIcon\",\n    tabler: \"IconPlus\",\n    hugeicons: \"PlusSignIcon\",\n    phosphor: \"PlusIcon\",\n    remixicon: \"RiAddLine\",\n  },\n  {\n    lucide: \"MinusIcon\",\n    tabler: \"IconMinus\",\n    hugeicons: \"MinusSignIcon\",\n    phosphor: \"MinusIcon\",\n    remixicon: \"RiSubtractLine\",\n  },\n  {\n    lucide: \"ArrowLeftIcon\",\n    tabler: \"IconArrowLeft\",\n    hugeicons: \"ArrowLeft02Icon\",\n    phosphor: \"ArrowLeftIcon\",\n    remixicon: \"RiArrowLeftLine\",\n  },\n  {\n    lucide: \"ArrowRightIcon\",\n    tabler: \"IconArrowRight\",\n    hugeicons: \"ArrowRight02Icon\",\n    phosphor: \"ArrowRightIcon\",\n    remixicon: \"RiArrowRightLine\",\n  },\n  {\n    lucide: \"CheckIcon\",\n    tabler: \"IconCheck\",\n    hugeicons: \"Tick02Icon\",\n    phosphor: \"CheckIcon\",\n    remixicon: \"RiCheckLine\",\n  },\n  {\n    lucide: \"ChevronDownIcon\",\n    tabler: \"IconChevronDown\",\n    hugeicons: \"ArrowDown01Icon\",\n    phosphor: \"CaretDownIcon\",\n    remixicon: \"RiArrowDownSLine\",\n  },\n  {\n    lucide: \"ChevronRightIcon\",\n    tabler: \"IconChevronRight\",\n    hugeicons: \"ArrowRight01Icon\",\n    phosphor: \"CaretRightIcon\",\n    remixicon: \"RiArrowRightSLine\",\n  },\n] satisfies Record<IconLibraryName, string>[]\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport default function PreviewExample() {\n  const [params] = useDesignSystemSearchParams()\n\n  const currentFont = React.useMemo(\n    () => FONTS.find((font) => font.value === params.font),\n    [params.font]\n  )\n\n  const currentStyle = React.useMemo(\n    () => STYLES.find((style) => style.name === params.style),\n    [params.style]\n  )\n\n  const radiusValue = React.useMemo(() => {\n    const radius = RADII.find((r) => r.name === params.radius)\n    return radius?.value ?? \"\"\n  }, [params.radius])\n\n  return (\n    <ExampleWrapper className=\"w-full max-w-none! lg:p-0\">\n      <Example\n        containerClassName=\"col-span-2 max-w-none\"\n        className=\"bg-muted dark:bg-background flex min-h-svh flex-col items-center justify-center border-none sm:p-16\"\n      >\n        <div\n          data-slot=\"capture-target\"\n          className=\"grid max-w-4xl gap-6 p-6 lg:grid-cols-2\"\n          style={\n            {\n              \"--radius\": radiusValue,\n            } as React.CSSProperties\n          }\n        >\n          <div className=\"flex flex-col gap-6\">\n            <Card>\n              <CardContent className=\"flex flex-col gap-6\">\n                <div className=\"flex flex-col gap-1\">\n                  <div className=\"text-2xl font-medium\">\n                    {currentStyle?.title} - {currentFont?.name}\n                  </div>\n                  <div className=\"text-muted-foreground text-base\">\n                    Designers love packing quirky glyphs into test phrases. This\n                    is a preview of the typography styles.\n                  </div>\n                </div>\n                <div className=\"grid grid-cols-6 gap-3.5\">\n                  {[\n                    \"Background\",\n                    \"Primary\",\n                    \"Secondary\",\n                    \"Muted\",\n                    \"Accent\",\n                    \"Destructive\",\n                  ].map((variant) => (\n                    <div\n                      key={variant}\n                      className=\"flex flex-col flex-wrap items-center gap-2\"\n                    >\n                      <Card\n                        className=\"ring-border aspect-square w-full bg-(--color) ring\"\n                        style={\n                          {\n                            \"--color\": `var(--${variant.toLowerCase()})`,\n                          } as React.CSSProperties\n                        }\n                      />\n                      <div className=\"hidden max-w-14 truncate text-[0.60rem] md:block\">\n                        {variant}\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"hidden flex-1 md:flex\">\n              <CardContent className=\"flex-1\">\n                <ChartContainer\n                  config={barChartConfig}\n                  className=\"aspect-auto h-full w-auto\"\n                >\n                  <BarChart accessibilityLayer data={barChartData}>\n                    <CartesianGrid vertical={false} />\n                    <XAxis\n                      dataKey=\"month\"\n                      tickLine={false}\n                      tickMargin={10}\n                      axisLine={false}\n                      tickFormatter={(value) => value.slice(0, 3)}\n                    />\n                    <ChartTooltip\n                      cursor={false}\n                      content={<ChartTooltipContent indicator=\"dashed\" />}\n                    />\n                    <Bar\n                      dataKey=\"desktop\"\n                      fill=\"var(--color-desktop)\"\n                      radius={4}\n                    />\n                    <Bar\n                      dataKey=\"mobile\"\n                      fill=\"var(--color-mobile)\"\n                      radius={4}\n                    />\n                  </BarChart>\n                </ChartContainer>\n              </CardContent>\n            </Card>\n          </div>\n          <div className=\"flex flex-col gap-6\">\n            <Card className=\"hidden md:flex\">\n              <CardContent>\n                <div className=\"grid grid-cols-4 place-items-center gap-6 md:grid-cols-7\">\n                  {PREVIEW_ICONS.map((icon, index) => (\n                    <Card\n                      key={index}\n                      className=\"ring-border flex size-8 items-center justify-center rounded-md p-0 ring *:[svg]:size-4\"\n                    >\n                      <IconPlaceholder\n                        lucide={icon.lucide}\n                        tabler={icon.tabler}\n                        hugeicons={icon.hugeicons}\n                        phosphor={icon.phosphor}\n                        remixicon={icon.remixicon}\n                      />\n                    </Card>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"flex-1\">\n              <CardContent className=\"flex flex-col gap-6\">\n                <div className=\"flex flex-col gap-4\">\n                  <div className=\"flex flex-wrap gap-2\">\n                    <Button>Default</Button>\n                    <Button variant=\"secondary\">Secondary</Button>\n                    <Button variant=\"outline\">Outline</Button>\n                    <Button variant=\"destructive\">Destructive</Button>\n                  </div>\n                  <Item variant=\"outline\">\n                    <ItemContent>\n                      <ItemTitle>Two-factor authentication</ItemTitle>\n                      <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                        Verify via email or phone number.\n                      </ItemDescription>\n                    </ItemContent>\n                    <ItemActions className=\"hidden md:flex\">\n                      <Button size=\"sm\" variant=\"secondary\">\n                        Enable\n                      </Button>\n                    </ItemActions>\n                  </Item>\n                  <div className=\"flex flex-wrap items-center gap-1.5\">\n                    <Badge>Badge</Badge>\n                    <Badge variant=\"secondary\">Secondary</Badge>\n                    <Badge variant=\"outline\">Outline</Badge>\n                    <div className=\"mt-2 flex gap-3 md:mt-0 md:ml-auto\">\n                      <Switch defaultChecked />\n                      <RadioGroup\n                        defaultValue=\"apple\"\n                        className=\"flex flex-row gap-3\"\n                      >\n                        <RadioGroupItem value=\"apple\" />\n                        <RadioGroupItem value=\"banana\" />\n                      </RadioGroup>\n                      <div className=\"flex flex-row gap-3\">\n                        <Checkbox defaultChecked />\n                        <Checkbox />\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <Field className=\"flex-row\">\n                  <Input placeholder=\"Name\" />\n                </Field>\n                <Field className=\"flex-row\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n                <Slider\n                  value={[500]}\n                  max={1000}\n                  min={0}\n                  step={10}\n                  className=\"mt-2 w-full\"\n                  aria-label=\"Slider\"\n                />\n                <div className=\"flex gap-2 md:gap-4\">\n                  <AlertDialog>\n                    <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </AlertDialogTrigger>\n                    <AlertDialogContent size=\"sm\">\n                      <AlertDialogHeader>\n                        <AlertDialogMedia>\n                          <IconPlaceholder\n                            lucide=\"BluetoothIcon\"\n                            tabler=\"IconBluetooth\"\n                            hugeicons=\"BluetoothIcon\"\n                            phosphor=\"BluetoothIcon\"\n                            remixicon=\"RiBluetoothLine\"\n                          />\n                        </AlertDialogMedia>\n                        <AlertDialogTitle>\n                          Allow accessory to connect?\n                        </AlertDialogTitle>\n                        <AlertDialogDescription>\n                          Do you want to allow the USB accessory to connect to\n                          this device?\n                        </AlertDialogDescription>\n                      </AlertDialogHeader>\n                      <AlertDialogFooter>\n                        <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                        <AlertDialogAction>Allow</AlertDialogAction>\n                      </AlertDialogFooter>\n                    </AlertDialogContent>\n                  </AlertDialog>\n                  <ButtonGroup>\n                    <Button variant=\"outline\">Button Group</Button>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger\n                        render={<Button variant=\"outline\" size=\"icon\" />}\n                      >\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"end\" className=\"w-52\">\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"VolumeX\"\n                              tabler=\"IconVolume\"\n                              hugeicons=\"VolumeOffIcon\"\n                              phosphor=\"SpeakerSlashIcon\"\n                              remixicon=\"RiVolumeMuteLine\"\n                            />\n                            Mute Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckboxCircleLine\"\n                            />\n                            Mark as Read\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"UserRoundXIcon\"\n                              tabler=\"IconUserX\"\n                              hugeicons=\"UserRemove01Icon\"\n                              phosphor=\"UserMinusIcon\"\n                              remixicon=\"RiUserMinusLine\"\n                            />\n                            Block User\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShareIcon\"\n                              tabler=\"IconShare\"\n                              hugeicons=\"Share03Icon\"\n                              phosphor=\"ShareIcon\"\n                              remixicon=\"RiShareLine\"\n                            />\n                            Share Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                            Copy Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"AlertTriangleIcon\"\n                              tabler=\"IconAlertTriangle\"\n                              hugeicons=\"AlertCircleIcon\"\n                              phosphor=\"WarningIcon\"\n                              remixicon=\"RiErrorWarningLine\"\n                            />\n                            Report Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem variant=\"destructive\">\n                            <IconPlaceholder\n                              lucide=\"TrashIcon\"\n                              tabler=\"IconTrash\"\n                              hugeicons=\"Delete02Icon\"\n                              phosphor=\"TrashIcon\"\n                              remixicon=\"RiDeleteBinLine\"\n                            />\n                            Delete Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </ButtonGroup>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </Example>\n    </ExampleWrapper>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\nimport { type IconLibraryName } from \"shadcn/icons\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-lyra/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-lyra/ui/badge\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/base-lyra/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-lyra/ui/chart\"\nimport { Checkbox } from \"@/registry/base-lyra/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport { Field } from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/base-lyra/ui/radio-group\"\nimport { Slider } from \"@/registry/base-lyra/ui/slider\"\nimport { Switch } from \"@/registry/base-lyra/ui/switch\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\nimport { RADII } from \"@/registry/config\"\nimport { STYLES } from \"@/registry/styles\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { FONTS } from \"@/app/(create)/lib/fonts\"\nimport { useDesignSystemSearchParams } from \"@/app/(create)/lib/search-params\"\n\nconst PREVIEW_ICONS = [\n  {\n    lucide: \"CopyIcon\",\n    tabler: \"IconCopy\",\n    hugeicons: \"Copy01Icon\",\n    phosphor: \"CopyIcon\",\n    remixicon: \"RiFileCopyLine\",\n  },\n  {\n    lucide: \"CircleAlertIcon\",\n    tabler: \"IconExclamationCircle\",\n    hugeicons: \"AlertCircleIcon\",\n    phosphor: \"WarningCircleIcon\",\n    remixicon: \"RiErrorWarningLine\",\n  },\n  {\n    lucide: \"TrashIcon\",\n    tabler: \"IconTrash\",\n    hugeicons: \"Delete02Icon\",\n    phosphor: \"TrashIcon\",\n    remixicon: \"RiDeleteBinLine\",\n  },\n  {\n    lucide: \"ShareIcon\",\n    tabler: \"IconShare\",\n    hugeicons: \"Share03Icon\",\n    phosphor: \"ShareIcon\",\n    remixicon: \"RiShareLine\",\n  },\n  {\n    lucide: \"ShoppingBagIcon\",\n    tabler: \"IconShoppingBag\",\n    hugeicons: \"ShoppingBag01Icon\",\n    phosphor: \"BagIcon\",\n    remixicon: \"RiShoppingBagLine\",\n  },\n  {\n    lucide: \"MoreHorizontalIcon\",\n    tabler: \"IconDots\",\n    hugeicons: \"MoreHorizontalCircle01Icon\",\n    phosphor: \"DotsThreeIcon\",\n    remixicon: \"RiMoreLine\",\n  },\n  {\n    lucide: \"Loader2Icon\",\n    tabler: \"IconLoader\",\n    hugeicons: \"Loading03Icon\",\n    phosphor: \"SpinnerIcon\",\n    remixicon: \"RiLoaderLine\",\n  },\n  {\n    lucide: \"PlusIcon\",\n    tabler: \"IconPlus\",\n    hugeicons: \"PlusSignIcon\",\n    phosphor: \"PlusIcon\",\n    remixicon: \"RiAddLine\",\n  },\n  {\n    lucide: \"MinusIcon\",\n    tabler: \"IconMinus\",\n    hugeicons: \"MinusSignIcon\",\n    phosphor: \"MinusIcon\",\n    remixicon: \"RiSubtractLine\",\n  },\n  {\n    lucide: \"ArrowLeftIcon\",\n    tabler: \"IconArrowLeft\",\n    hugeicons: \"ArrowLeft02Icon\",\n    phosphor: \"ArrowLeftIcon\",\n    remixicon: \"RiArrowLeftLine\",\n  },\n  {\n    lucide: \"ArrowRightIcon\",\n    tabler: \"IconArrowRight\",\n    hugeicons: \"ArrowRight02Icon\",\n    phosphor: \"ArrowRightIcon\",\n    remixicon: \"RiArrowRightLine\",\n  },\n  {\n    lucide: \"CheckIcon\",\n    tabler: \"IconCheck\",\n    hugeicons: \"Tick02Icon\",\n    phosphor: \"CheckIcon\",\n    remixicon: \"RiCheckLine\",\n  },\n  {\n    lucide: \"ChevronDownIcon\",\n    tabler: \"IconChevronDown\",\n    hugeicons: \"ArrowDown01Icon\",\n    phosphor: \"CaretDownIcon\",\n    remixicon: \"RiArrowDownSLine\",\n  },\n  {\n    lucide: \"ChevronRightIcon\",\n    tabler: \"IconChevronRight\",\n    hugeicons: \"ArrowRight01Icon\",\n    phosphor: \"CaretRightIcon\",\n    remixicon: \"RiArrowRightSLine\",\n  },\n] satisfies Record<IconLibraryName, string>[]\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport default function PreviewExample() {\n  const [params] = useDesignSystemSearchParams()\n\n  const currentFont = React.useMemo(\n    () => FONTS.find((font) => font.value === params.font),\n    [params.font]\n  )\n\n  const currentStyle = React.useMemo(\n    () => STYLES.find((style) => style.name === params.style),\n    [params.style]\n  )\n\n  const radiusValue = React.useMemo(() => {\n    const radius = RADII.find((r) => r.name === params.radius)\n    return radius?.value ?? \"\"\n  }, [params.radius])\n\n  return (\n    <div>\n      <Example\n        containerClassName=\"col-span-2 max-w-none\"\n        className=\"bg-muted dark:bg-background flex min-h-svh flex-col items-center justify-center border-none p-0 sm:p-0\"\n      >\n        <div\n          data-slot=\"capture-target\"\n          className=\"grid max-w-4xl gap-6 p-12 lg:grid-cols-2\"\n          style={\n            {\n              \"--radius\": radiusValue,\n            } as React.CSSProperties\n          }\n        >\n          <div className=\"flex flex-col gap-6\">\n            <Card>\n              <CardContent className=\"flex flex-col gap-6\">\n                <div className=\"flex flex-col gap-1\">\n                  <div className=\"text-2xl font-medium\">\n                    {currentStyle?.title} - {currentFont?.name}\n                  </div>\n                  <div className=\"text-muted-foreground text-base\">\n                    Designers love packing quirky glyphs into test phrases. This\n                    is a preview of the typography styles.\n                  </div>\n                </div>\n                <div className=\"grid grid-cols-6 gap-3.5\">\n                  {[\n                    \"Background\",\n                    \"Primary\",\n                    \"Secondary\",\n                    \"Muted\",\n                    \"Accent\",\n                    \"Destructive\",\n                  ].map((variant) => (\n                    <div\n                      key={variant}\n                      className=\"flex flex-col flex-wrap items-center gap-2\"\n                    >\n                      <Item\n                        className=\"ring-border aspect-square w-full bg-(--color) ring\"\n                        style={\n                          {\n                            \"--color\": `var(--${variant.toLowerCase()})`,\n                          } as React.CSSProperties\n                        }\n                      />\n                      <div className=\"hidden max-w-14 truncate text-[0.60rem] md:block\">\n                        {variant}\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"hidden flex-1 md:flex\">\n              <CardContent className=\"flex-1\">\n                <ChartContainer\n                  config={barChartConfig}\n                  className=\"aspect-auto h-full w-auto\"\n                >\n                  <BarChart accessibilityLayer data={barChartData}>\n                    <CartesianGrid vertical={false} />\n                    <XAxis\n                      dataKey=\"month\"\n                      tickLine={false}\n                      tickMargin={10}\n                      axisLine={false}\n                      tickFormatter={(value) => value.slice(0, 3)}\n                    />\n                    <ChartTooltip\n                      cursor={false}\n                      content={<ChartTooltipContent indicator=\"dashed\" />}\n                    />\n                    <Bar\n                      dataKey=\"desktop\"\n                      fill=\"var(--color-desktop)\"\n                      radius={4}\n                    />\n                    <Bar\n                      dataKey=\"mobile\"\n                      fill=\"var(--color-mobile)\"\n                      radius={4}\n                    />\n                  </BarChart>\n                </ChartContainer>\n              </CardContent>\n            </Card>\n          </div>\n          <div className=\"flex flex-col gap-6\">\n            <Card className=\"hidden md:flex\">\n              <CardContent>\n                <div className=\"grid grid-cols-4 place-items-center gap-6 md:grid-cols-7\">\n                  {PREVIEW_ICONS.map((icon, index) => (\n                    <Card\n                      key={index}\n                      className=\"ring-border flex size-8 items-center justify-center rounded-md p-0 ring *:[svg]:size-4\"\n                    >\n                      <IconPlaceholder\n                        lucide={icon.lucide}\n                        tabler={icon.tabler}\n                        hugeicons={icon.hugeicons}\n                        phosphor={icon.phosphor}\n                        remixicon={icon.remixicon}\n                      />\n                    </Card>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"flex-1\">\n              <CardContent className=\"flex flex-1 flex-col gap-6\">\n                <div className=\"flex flex-col gap-4\">\n                  <div className=\"flex flex-wrap gap-2\">\n                    <Button>Default</Button>\n                    <Button variant=\"secondary\">Secondary</Button>\n                    <Button variant=\"outline\">Outline</Button>\n                    <Button variant=\"destructive\">Destructive</Button>\n                  </div>\n                  <Item variant=\"outline\">\n                    <ItemContent>\n                      <ItemTitle>Two-factor authentication</ItemTitle>\n                      <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                        Verify via email or phone number.\n                      </ItemDescription>\n                    </ItemContent>\n                    <ItemActions className=\"hidden md:flex\">\n                      <Button size=\"sm\" variant=\"secondary\">\n                        Enable\n                      </Button>\n                    </ItemActions>\n                  </Item>\n                  <div className=\"flex flex-wrap items-center gap-1.5\">\n                    <Badge>Badge</Badge>\n                    <Badge variant=\"secondary\">Secondary</Badge>\n                    <Badge variant=\"outline\">Outline</Badge>\n                    <div className=\"mt-2 flex gap-3 md:mt-0 md:ml-auto\">\n                      <Switch defaultChecked />\n                      <RadioGroup\n                        defaultValue=\"apple\"\n                        className=\"flex flex-row gap-3\"\n                      >\n                        <RadioGroupItem value=\"apple\" />\n                        <RadioGroupItem value=\"banana\" />\n                      </RadioGroup>\n                      <div className=\"flex flex-row gap-3\">\n                        <Checkbox defaultChecked />\n                        <Checkbox />\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <Field className=\"flex-row\">\n                  <Input placeholder=\"Name\" />\n                </Field>\n                <Field className=\"flex-1 flex-row\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n                <Slider\n                  value={[500]}\n                  max={1000}\n                  min={0}\n                  step={10}\n                  className=\"mt-2 w-full\"\n                  aria-label=\"Slider\"\n                />\n                <div className=\"flex gap-2 md:gap-4\">\n                  <AlertDialog>\n                    <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </AlertDialogTrigger>\n                    <AlertDialogContent size=\"sm\">\n                      <AlertDialogHeader>\n                        <AlertDialogMedia>\n                          <IconPlaceholder\n                            lucide=\"BluetoothIcon\"\n                            tabler=\"IconBluetooth\"\n                            hugeicons=\"BluetoothIcon\"\n                            phosphor=\"BluetoothIcon\"\n                            remixicon=\"RiBluetoothLine\"\n                          />\n                        </AlertDialogMedia>\n                        <AlertDialogTitle>\n                          Allow accessory to connect?\n                        </AlertDialogTitle>\n                        <AlertDialogDescription>\n                          Do you want to allow the USB accessory to connect to\n                          this device?\n                        </AlertDialogDescription>\n                      </AlertDialogHeader>\n                      <AlertDialogFooter>\n                        <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                        <AlertDialogAction>Allow</AlertDialogAction>\n                      </AlertDialogFooter>\n                    </AlertDialogContent>\n                  </AlertDialog>\n                  <ButtonGroup>\n                    <Button variant=\"outline\">Button Group</Button>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger\n                        render={<Button variant=\"outline\" size=\"icon\" />}\n                      >\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"end\" className=\"w-52\">\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"VolumeX\"\n                              tabler=\"IconVolume\"\n                              hugeicons=\"VolumeOffIcon\"\n                              phosphor=\"SpeakerSlashIcon\"\n                              remixicon=\"RiVolumeMuteLine\"\n                            />\n                            Mute Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckboxCircleLine\"\n                            />\n                            Mark as Read\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"UserRoundXIcon\"\n                              tabler=\"IconUserX\"\n                              hugeicons=\"UserRemove01Icon\"\n                              phosphor=\"UserMinusIcon\"\n                              remixicon=\"RiUserMinusLine\"\n                            />\n                            Block User\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShareIcon\"\n                              tabler=\"IconShare\"\n                              hugeicons=\"Share03Icon\"\n                              phosphor=\"ShareIcon\"\n                              remixicon=\"RiShareLine\"\n                            />\n                            Share Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                            Copy Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"AlertTriangleIcon\"\n                              tabler=\"IconAlertTriangle\"\n                              hugeicons=\"AlertCircleIcon\"\n                              phosphor=\"WarningIcon\"\n                              remixicon=\"RiErrorWarningLine\"\n                            />\n                            Report Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem variant=\"destructive\">\n                            <IconPlaceholder\n                              lucide=\"TrashIcon\"\n                              tabler=\"IconTrash\"\n                              hugeicons=\"Delete02Icon\"\n                              phosphor=\"TrashIcon\"\n                              remixicon=\"RiDeleteBinLine\"\n                            />\n                            Delete Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </ButtonGroup>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </Example>\n    </div>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/preview.json b/apps/v4/public/r/styles/base-maia/preview.json
index b56ec8132e..a605a2e952 100644
--- a/apps/v4/public/r/styles/base-maia/preview.json
+++ b/apps/v4/public/r/styles/base-maia/preview.json
@@ -34,7 +34,7 @@
   "files": [
     {
       "path": "registry/base-maia/blocks/preview.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\nimport { type IconLibraryName } from \"shadcn/icons\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-maia/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-maia/ui/badge\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-maia/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/base-maia/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-maia/ui/chart\"\nimport { Checkbox } from \"@/registry/base-maia/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport { Field } from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/base-maia/ui/radio-group\"\nimport { Slider } from \"@/registry/base-maia/ui/slider\"\nimport { Switch } from \"@/registry/base-maia/ui/switch\"\nimport { Textarea } from \"@/registry/base-maia/ui/textarea\"\nimport { RADII } from \"@/registry/config\"\nimport { STYLES } from \"@/registry/styles\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { FONTS } from \"@/app/(create)/lib/fonts\"\nimport { useDesignSystemSearchParams } from \"@/app/(create)/lib/search-params\"\n\nconst PREVIEW_ICONS = [\n  {\n    lucide: \"CopyIcon\",\n    tabler: \"IconCopy\",\n    hugeicons: \"Copy01Icon\",\n    phosphor: \"CopyIcon\",\n    remixicon: \"RiFileCopyLine\",\n  },\n  {\n    lucide: \"CircleAlertIcon\",\n    tabler: \"IconExclamationCircle\",\n    hugeicons: \"AlertCircleIcon\",\n    phosphor: \"WarningCircleIcon\",\n    remixicon: \"RiErrorWarningLine\",\n  },\n  {\n    lucide: \"TrashIcon\",\n    tabler: \"IconTrash\",\n    hugeicons: \"Delete02Icon\",\n    phosphor: \"TrashIcon\",\n    remixicon: \"RiDeleteBinLine\",\n  },\n  {\n    lucide: \"ShareIcon\",\n    tabler: \"IconShare\",\n    hugeicons: \"Share03Icon\",\n    phosphor: \"ShareIcon\",\n    remixicon: \"RiShareLine\",\n  },\n  {\n    lucide: \"ShoppingBagIcon\",\n    tabler: \"IconShoppingBag\",\n    hugeicons: \"ShoppingBag01Icon\",\n    phosphor: \"BagIcon\",\n    remixicon: \"RiShoppingBagLine\",\n  },\n  {\n    lucide: \"MoreHorizontalIcon\",\n    tabler: \"IconDots\",\n    hugeicons: \"MoreHorizontalCircle01Icon\",\n    phosphor: \"DotsThreeIcon\",\n    remixicon: \"RiMoreLine\",\n  },\n  {\n    lucide: \"Loader2Icon\",\n    tabler: \"IconLoader\",\n    hugeicons: \"Loading03Icon\",\n    phosphor: \"SpinnerIcon\",\n    remixicon: \"RiLoaderLine\",\n  },\n  {\n    lucide: \"PlusIcon\",\n    tabler: \"IconPlus\",\n    hugeicons: \"PlusSignIcon\",\n    phosphor: \"PlusIcon\",\n    remixicon: \"RiAddLine\",\n  },\n  {\n    lucide: \"MinusIcon\",\n    tabler: \"IconMinus\",\n    hugeicons: \"MinusSignIcon\",\n    phosphor: \"MinusIcon\",\n    remixicon: \"RiSubtractLine\",\n  },\n  {\n    lucide: \"ArrowLeftIcon\",\n    tabler: \"IconArrowLeft\",\n    hugeicons: \"ArrowLeft02Icon\",\n    phosphor: \"ArrowLeftIcon\",\n    remixicon: \"RiArrowLeftLine\",\n  },\n  {\n    lucide: \"ArrowRightIcon\",\n    tabler: \"IconArrowRight\",\n    hugeicons: \"ArrowRight02Icon\",\n    phosphor: \"ArrowRightIcon\",\n    remixicon: \"RiArrowRightLine\",\n  },\n  {\n    lucide: \"CheckIcon\",\n    tabler: \"IconCheck\",\n    hugeicons: \"Tick02Icon\",\n    phosphor: \"CheckIcon\",\n    remixicon: \"RiCheckLine\",\n  },\n  {\n    lucide: \"ChevronDownIcon\",\n    tabler: \"IconChevronDown\",\n    hugeicons: \"ArrowDown01Icon\",\n    phosphor: \"CaretDownIcon\",\n    remixicon: \"RiArrowDownSLine\",\n  },\n  {\n    lucide: \"ChevronRightIcon\",\n    tabler: \"IconChevronRight\",\n    hugeicons: \"ArrowRight01Icon\",\n    phosphor: \"CaretRightIcon\",\n    remixicon: \"RiArrowRightSLine\",\n  },\n] satisfies Record<IconLibraryName, string>[]\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport default function PreviewExample() {\n  const [params] = useDesignSystemSearchParams()\n\n  const currentFont = React.useMemo(\n    () => FONTS.find((font) => font.value === params.font),\n    [params.font]\n  )\n\n  const currentStyle = React.useMemo(\n    () => STYLES.find((style) => style.name === params.style),\n    [params.style]\n  )\n\n  const radiusValue = React.useMemo(() => {\n    const radius = RADII.find((r) => r.name === params.radius)\n    return radius?.value ?? \"\"\n  }, [params.radius])\n\n  return (\n    <ExampleWrapper className=\"w-full max-w-none! lg:p-0\">\n      <Example\n        containerClassName=\"col-span-2 max-w-none\"\n        className=\"bg-muted dark:bg-background flex min-h-svh flex-col items-center justify-center border-none sm:p-16\"\n      >\n        <div\n          data-slot=\"capture-target\"\n          className=\"grid max-w-4xl gap-6 p-6 lg:grid-cols-2\"\n          style={\n            {\n              \"--radius\": radiusValue,\n            } as React.CSSProperties\n          }\n        >\n          <div className=\"flex flex-col gap-6\">\n            <Card>\n              <CardContent className=\"flex flex-col gap-6\">\n                <div className=\"flex flex-col gap-1\">\n                  <div className=\"text-2xl font-medium\">\n                    {currentStyle?.title} - {currentFont?.name}\n                  </div>\n                  <div className=\"text-muted-foreground text-base\">\n                    Designers love packing quirky glyphs into test phrases. This\n                    is a preview of the typography styles.\n                  </div>\n                </div>\n                <div className=\"grid grid-cols-6 gap-3.5\">\n                  {[\n                    \"Background\",\n                    \"Primary\",\n                    \"Secondary\",\n                    \"Muted\",\n                    \"Accent\",\n                    \"Destructive\",\n                  ].map((variant) => (\n                    <div\n                      key={variant}\n                      className=\"flex flex-col flex-wrap items-center gap-2\"\n                    >\n                      <Card\n                        className=\"ring-border aspect-square w-full bg-(--color) ring\"\n                        style={\n                          {\n                            \"--color\": `var(--${variant.toLowerCase()})`,\n                          } as React.CSSProperties\n                        }\n                      />\n                      <div className=\"hidden max-w-14 truncate text-[0.60rem] md:block\">\n                        {variant}\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"hidden flex-1 md:flex\">\n              <CardContent className=\"flex-1\">\n                <ChartContainer\n                  config={barChartConfig}\n                  className=\"aspect-auto h-full w-auto\"\n                >\n                  <BarChart accessibilityLayer data={barChartData}>\n                    <CartesianGrid vertical={false} />\n                    <XAxis\n                      dataKey=\"month\"\n                      tickLine={false}\n                      tickMargin={10}\n                      axisLine={false}\n                      tickFormatter={(value) => value.slice(0, 3)}\n                    />\n                    <ChartTooltip\n                      cursor={false}\n                      content={<ChartTooltipContent indicator=\"dashed\" />}\n                    />\n                    <Bar\n                      dataKey=\"desktop\"\n                      fill=\"var(--color-desktop)\"\n                      radius={4}\n                    />\n                    <Bar\n                      dataKey=\"mobile\"\n                      fill=\"var(--color-mobile)\"\n                      radius={4}\n                    />\n                  </BarChart>\n                </ChartContainer>\n              </CardContent>\n            </Card>\n          </div>\n          <div className=\"flex flex-col gap-6\">\n            <Card className=\"hidden md:flex\">\n              <CardContent>\n                <div className=\"grid grid-cols-4 place-items-center gap-6 md:grid-cols-7\">\n                  {PREVIEW_ICONS.map((icon, index) => (\n                    <Card\n                      key={index}\n                      className=\"ring-border flex size-8 items-center justify-center rounded-md p-0 ring *:[svg]:size-4\"\n                    >\n                      <IconPlaceholder\n                        lucide={icon.lucide}\n                        tabler={icon.tabler}\n                        hugeicons={icon.hugeicons}\n                        phosphor={icon.phosphor}\n                        remixicon={icon.remixicon}\n                      />\n                    </Card>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"flex-1\">\n              <CardContent className=\"flex flex-col gap-6\">\n                <div className=\"flex flex-col gap-4\">\n                  <div className=\"flex flex-wrap gap-2\">\n                    <Button>Default</Button>\n                    <Button variant=\"secondary\">Secondary</Button>\n                    <Button variant=\"outline\">Outline</Button>\n                    <Button variant=\"destructive\">Destructive</Button>\n                  </div>\n                  <Item variant=\"outline\">\n                    <ItemContent>\n                      <ItemTitle>Two-factor authentication</ItemTitle>\n                      <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                        Verify via email or phone number.\n                      </ItemDescription>\n                    </ItemContent>\n                    <ItemActions className=\"hidden md:flex\">\n                      <Button size=\"sm\" variant=\"secondary\">\n                        Enable\n                      </Button>\n                    </ItemActions>\n                  </Item>\n                  <div className=\"flex flex-wrap items-center gap-1.5\">\n                    <Badge>Badge</Badge>\n                    <Badge variant=\"secondary\">Secondary</Badge>\n                    <Badge variant=\"outline\">Outline</Badge>\n                    <div className=\"mt-2 flex gap-3 md:mt-0 md:ml-auto\">\n                      <Switch defaultChecked />\n                      <RadioGroup\n                        defaultValue=\"apple\"\n                        className=\"flex flex-row gap-3\"\n                      >\n                        <RadioGroupItem value=\"apple\" />\n                        <RadioGroupItem value=\"banana\" />\n                      </RadioGroup>\n                      <div className=\"flex flex-row gap-3\">\n                        <Checkbox defaultChecked />\n                        <Checkbox />\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <Field className=\"flex-row\">\n                  <Input placeholder=\"Name\" />\n                </Field>\n                <Field className=\"flex-row\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n                <Slider\n                  value={[500]}\n                  max={1000}\n                  min={0}\n                  step={10}\n                  className=\"mt-2 w-full\"\n                  aria-label=\"Slider\"\n                />\n                <div className=\"flex gap-2 md:gap-4\">\n                  <AlertDialog>\n                    <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </AlertDialogTrigger>\n                    <AlertDialogContent size=\"sm\">\n                      <AlertDialogHeader>\n                        <AlertDialogMedia>\n                          <IconPlaceholder\n                            lucide=\"BluetoothIcon\"\n                            tabler=\"IconBluetooth\"\n                            hugeicons=\"BluetoothIcon\"\n                            phosphor=\"BluetoothIcon\"\n                            remixicon=\"RiBluetoothLine\"\n                          />\n                        </AlertDialogMedia>\n                        <AlertDialogTitle>\n                          Allow accessory to connect?\n                        </AlertDialogTitle>\n                        <AlertDialogDescription>\n                          Do you want to allow the USB accessory to connect to\n                          this device?\n                        </AlertDialogDescription>\n                      </AlertDialogHeader>\n                      <AlertDialogFooter>\n                        <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                        <AlertDialogAction>Allow</AlertDialogAction>\n                      </AlertDialogFooter>\n                    </AlertDialogContent>\n                  </AlertDialog>\n                  <ButtonGroup>\n                    <Button variant=\"outline\">Button Group</Button>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger\n                        render={<Button variant=\"outline\" size=\"icon\" />}\n                      >\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"end\" className=\"w-52\">\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"VolumeX\"\n                              tabler=\"IconVolume\"\n                              hugeicons=\"VolumeOffIcon\"\n                              phosphor=\"SpeakerSlashIcon\"\n                              remixicon=\"RiVolumeMuteLine\"\n                            />\n                            Mute Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckboxCircleLine\"\n                            />\n                            Mark as Read\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"UserRoundXIcon\"\n                              tabler=\"IconUserX\"\n                              hugeicons=\"UserRemove01Icon\"\n                              phosphor=\"UserMinusIcon\"\n                              remixicon=\"RiUserMinusLine\"\n                            />\n                            Block User\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShareIcon\"\n                              tabler=\"IconShare\"\n                              hugeicons=\"Share03Icon\"\n                              phosphor=\"ShareIcon\"\n                              remixicon=\"RiShareLine\"\n                            />\n                            Share Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                            Copy Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"AlertTriangleIcon\"\n                              tabler=\"IconAlertTriangle\"\n                              hugeicons=\"AlertCircleIcon\"\n                              phosphor=\"WarningIcon\"\n                              remixicon=\"RiErrorWarningLine\"\n                            />\n                            Report Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem variant=\"destructive\">\n                            <IconPlaceholder\n                              lucide=\"TrashIcon\"\n                              tabler=\"IconTrash\"\n                              hugeicons=\"Delete02Icon\"\n                              phosphor=\"TrashIcon\"\n                              remixicon=\"RiDeleteBinLine\"\n                            />\n                            Delete Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </ButtonGroup>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </Example>\n    </ExampleWrapper>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\nimport { type IconLibraryName } from \"shadcn/icons\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-maia/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-maia/ui/badge\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-maia/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/base-maia/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-maia/ui/chart\"\nimport { Checkbox } from \"@/registry/base-maia/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport { Field } from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/base-maia/ui/radio-group\"\nimport { Slider } from \"@/registry/base-maia/ui/slider\"\nimport { Switch } from \"@/registry/base-maia/ui/switch\"\nimport { Textarea } from \"@/registry/base-maia/ui/textarea\"\nimport { RADII } from \"@/registry/config\"\nimport { STYLES } from \"@/registry/styles\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { FONTS } from \"@/app/(create)/lib/fonts\"\nimport { useDesignSystemSearchParams } from \"@/app/(create)/lib/search-params\"\n\nconst PREVIEW_ICONS = [\n  {\n    lucide: \"CopyIcon\",\n    tabler: \"IconCopy\",\n    hugeicons: \"Copy01Icon\",\n    phosphor: \"CopyIcon\",\n    remixicon: \"RiFileCopyLine\",\n  },\n  {\n    lucide: \"CircleAlertIcon\",\n    tabler: \"IconExclamationCircle\",\n    hugeicons: \"AlertCircleIcon\",\n    phosphor: \"WarningCircleIcon\",\n    remixicon: \"RiErrorWarningLine\",\n  },\n  {\n    lucide: \"TrashIcon\",\n    tabler: \"IconTrash\",\n    hugeicons: \"Delete02Icon\",\n    phosphor: \"TrashIcon\",\n    remixicon: \"RiDeleteBinLine\",\n  },\n  {\n    lucide: \"ShareIcon\",\n    tabler: \"IconShare\",\n    hugeicons: \"Share03Icon\",\n    phosphor: \"ShareIcon\",\n    remixicon: \"RiShareLine\",\n  },\n  {\n    lucide: \"ShoppingBagIcon\",\n    tabler: \"IconShoppingBag\",\n    hugeicons: \"ShoppingBag01Icon\",\n    phosphor: \"BagIcon\",\n    remixicon: \"RiShoppingBagLine\",\n  },\n  {\n    lucide: \"MoreHorizontalIcon\",\n    tabler: \"IconDots\",\n    hugeicons: \"MoreHorizontalCircle01Icon\",\n    phosphor: \"DotsThreeIcon\",\n    remixicon: \"RiMoreLine\",\n  },\n  {\n    lucide: \"Loader2Icon\",\n    tabler: \"IconLoader\",\n    hugeicons: \"Loading03Icon\",\n    phosphor: \"SpinnerIcon\",\n    remixicon: \"RiLoaderLine\",\n  },\n  {\n    lucide: \"PlusIcon\",\n    tabler: \"IconPlus\",\n    hugeicons: \"PlusSignIcon\",\n    phosphor: \"PlusIcon\",\n    remixicon: \"RiAddLine\",\n  },\n  {\n    lucide: \"MinusIcon\",\n    tabler: \"IconMinus\",\n    hugeicons: \"MinusSignIcon\",\n    phosphor: \"MinusIcon\",\n    remixicon: \"RiSubtractLine\",\n  },\n  {\n    lucide: \"ArrowLeftIcon\",\n    tabler: \"IconArrowLeft\",\n    hugeicons: \"ArrowLeft02Icon\",\n    phosphor: \"ArrowLeftIcon\",\n    remixicon: \"RiArrowLeftLine\",\n  },\n  {\n    lucide: \"ArrowRightIcon\",\n    tabler: \"IconArrowRight\",\n    hugeicons: \"ArrowRight02Icon\",\n    phosphor: \"ArrowRightIcon\",\n    remixicon: \"RiArrowRightLine\",\n  },\n  {\n    lucide: \"CheckIcon\",\n    tabler: \"IconCheck\",\n    hugeicons: \"Tick02Icon\",\n    phosphor: \"CheckIcon\",\n    remixicon: \"RiCheckLine\",\n  },\n  {\n    lucide: \"ChevronDownIcon\",\n    tabler: \"IconChevronDown\",\n    hugeicons: \"ArrowDown01Icon\",\n    phosphor: \"CaretDownIcon\",\n    remixicon: \"RiArrowDownSLine\",\n  },\n  {\n    lucide: \"ChevronRightIcon\",\n    tabler: \"IconChevronRight\",\n    hugeicons: \"ArrowRight01Icon\",\n    phosphor: \"CaretRightIcon\",\n    remixicon: \"RiArrowRightSLine\",\n  },\n] satisfies Record<IconLibraryName, string>[]\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport default function PreviewExample() {\n  const [params] = useDesignSystemSearchParams()\n\n  const currentFont = React.useMemo(\n    () => FONTS.find((font) => font.value === params.font),\n    [params.font]\n  )\n\n  const currentStyle = React.useMemo(\n    () => STYLES.find((style) => style.name === params.style),\n    [params.style]\n  )\n\n  const radiusValue = React.useMemo(() => {\n    const radius = RADII.find((r) => r.name === params.radius)\n    return radius?.value ?? \"\"\n  }, [params.radius])\n\n  return (\n    <div>\n      <Example\n        containerClassName=\"col-span-2 max-w-none\"\n        className=\"bg-muted dark:bg-background flex min-h-svh flex-col items-center justify-center border-none p-0 sm:p-0\"\n      >\n        <div\n          data-slot=\"capture-target\"\n          className=\"grid max-w-4xl gap-6 p-12 lg:grid-cols-2\"\n          style={\n            {\n              \"--radius\": radiusValue,\n            } as React.CSSProperties\n          }\n        >\n          <div className=\"flex flex-col gap-6\">\n            <Card>\n              <CardContent className=\"flex flex-col gap-6\">\n                <div className=\"flex flex-col gap-1\">\n                  <div className=\"text-2xl font-medium\">\n                    {currentStyle?.title} - {currentFont?.name}\n                  </div>\n                  <div className=\"text-muted-foreground text-base\">\n                    Designers love packing quirky glyphs into test phrases. This\n                    is a preview of the typography styles.\n                  </div>\n                </div>\n                <div className=\"grid grid-cols-6 gap-3.5\">\n                  {[\n                    \"Background\",\n                    \"Primary\",\n                    \"Secondary\",\n                    \"Muted\",\n                    \"Accent\",\n                    \"Destructive\",\n                  ].map((variant) => (\n                    <div\n                      key={variant}\n                      className=\"flex flex-col flex-wrap items-center gap-2\"\n                    >\n                      <Item\n                        className=\"ring-border aspect-square w-full bg-(--color) ring\"\n                        style={\n                          {\n                            \"--color\": `var(--${variant.toLowerCase()})`,\n                          } as React.CSSProperties\n                        }\n                      />\n                      <div className=\"hidden max-w-14 truncate text-[0.60rem] md:block\">\n                        {variant}\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"hidden flex-1 md:flex\">\n              <CardContent className=\"flex-1\">\n                <ChartContainer\n                  config={barChartConfig}\n                  className=\"aspect-auto h-full w-auto\"\n                >\n                  <BarChart accessibilityLayer data={barChartData}>\n                    <CartesianGrid vertical={false} />\n                    <XAxis\n                      dataKey=\"month\"\n                      tickLine={false}\n                      tickMargin={10}\n                      axisLine={false}\n                      tickFormatter={(value) => value.slice(0, 3)}\n                    />\n                    <ChartTooltip\n                      cursor={false}\n                      content={<ChartTooltipContent indicator=\"dashed\" />}\n                    />\n                    <Bar\n                      dataKey=\"desktop\"\n                      fill=\"var(--color-desktop)\"\n                      radius={4}\n                    />\n                    <Bar\n                      dataKey=\"mobile\"\n                      fill=\"var(--color-mobile)\"\n                      radius={4}\n                    />\n                  </BarChart>\n                </ChartContainer>\n              </CardContent>\n            </Card>\n          </div>\n          <div className=\"flex flex-col gap-6\">\n            <Card className=\"hidden md:flex\">\n              <CardContent>\n                <div className=\"grid grid-cols-4 place-items-center gap-6 md:grid-cols-7\">\n                  {PREVIEW_ICONS.map((icon, index) => (\n                    <Card\n                      key={index}\n                      className=\"ring-border flex size-8 items-center justify-center rounded-md p-0 ring *:[svg]:size-4\"\n                    >\n                      <IconPlaceholder\n                        lucide={icon.lucide}\n                        tabler={icon.tabler}\n                        hugeicons={icon.hugeicons}\n                        phosphor={icon.phosphor}\n                        remixicon={icon.remixicon}\n                      />\n                    </Card>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"flex-1\">\n              <CardContent className=\"flex flex-1 flex-col gap-6\">\n                <div className=\"flex flex-col gap-4\">\n                  <div className=\"flex flex-wrap gap-2\">\n                    <Button>Default</Button>\n                    <Button variant=\"secondary\">Secondary</Button>\n                    <Button variant=\"outline\">Outline</Button>\n                    <Button variant=\"destructive\">Destructive</Button>\n                  </div>\n                  <Item variant=\"outline\">\n                    <ItemContent>\n                      <ItemTitle>Two-factor authentication</ItemTitle>\n                      <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                        Verify via email or phone number.\n                      </ItemDescription>\n                    </ItemContent>\n                    <ItemActions className=\"hidden md:flex\">\n                      <Button size=\"sm\" variant=\"secondary\">\n                        Enable\n                      </Button>\n                    </ItemActions>\n                  </Item>\n                  <div className=\"flex flex-wrap items-center gap-1.5\">\n                    <Badge>Badge</Badge>\n                    <Badge variant=\"secondary\">Secondary</Badge>\n                    <Badge variant=\"outline\">Outline</Badge>\n                    <div className=\"mt-2 flex gap-3 md:mt-0 md:ml-auto\">\n                      <Switch defaultChecked />\n                      <RadioGroup\n                        defaultValue=\"apple\"\n                        className=\"flex flex-row gap-3\"\n                      >\n                        <RadioGroupItem value=\"apple\" />\n                        <RadioGroupItem value=\"banana\" />\n                      </RadioGroup>\n                      <div className=\"flex flex-row gap-3\">\n                        <Checkbox defaultChecked />\n                        <Checkbox />\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <Field className=\"flex-row\">\n                  <Input placeholder=\"Name\" />\n                </Field>\n                <Field className=\"flex-1 flex-row\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n                <Slider\n                  value={[500]}\n                  max={1000}\n                  min={0}\n                  step={10}\n                  className=\"mt-2 w-full\"\n                  aria-label=\"Slider\"\n                />\n                <div className=\"flex gap-2 md:gap-4\">\n                  <AlertDialog>\n                    <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </AlertDialogTrigger>\n                    <AlertDialogContent size=\"sm\">\n                      <AlertDialogHeader>\n                        <AlertDialogMedia>\n                          <IconPlaceholder\n                            lucide=\"BluetoothIcon\"\n                            tabler=\"IconBluetooth\"\n                            hugeicons=\"BluetoothIcon\"\n                            phosphor=\"BluetoothIcon\"\n                            remixicon=\"RiBluetoothLine\"\n                          />\n                        </AlertDialogMedia>\n                        <AlertDialogTitle>\n                          Allow accessory to connect?\n                        </AlertDialogTitle>\n                        <AlertDialogDescription>\n                          Do you want to allow the USB accessory to connect to\n                          this device?\n                        </AlertDialogDescription>\n                      </AlertDialogHeader>\n                      <AlertDialogFooter>\n                        <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                        <AlertDialogAction>Allow</AlertDialogAction>\n                      </AlertDialogFooter>\n                    </AlertDialogContent>\n                  </AlertDialog>\n                  <ButtonGroup>\n                    <Button variant=\"outline\">Button Group</Button>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger\n                        render={<Button variant=\"outline\" size=\"icon\" />}\n                      >\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"end\" className=\"w-52\">\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"VolumeX\"\n                              tabler=\"IconVolume\"\n                              hugeicons=\"VolumeOffIcon\"\n                              phosphor=\"SpeakerSlashIcon\"\n                              remixicon=\"RiVolumeMuteLine\"\n                            />\n                            Mute Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckboxCircleLine\"\n                            />\n                            Mark as Read\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"UserRoundXIcon\"\n                              tabler=\"IconUserX\"\n                              hugeicons=\"UserRemove01Icon\"\n                              phosphor=\"UserMinusIcon\"\n                              remixicon=\"RiUserMinusLine\"\n                            />\n                            Block User\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShareIcon\"\n                              tabler=\"IconShare\"\n                              hugeicons=\"Share03Icon\"\n                              phosphor=\"ShareIcon\"\n                              remixicon=\"RiShareLine\"\n                            />\n                            Share Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                            Copy Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"AlertTriangleIcon\"\n                              tabler=\"IconAlertTriangle\"\n                              hugeicons=\"AlertCircleIcon\"\n                              phosphor=\"WarningIcon\"\n                              remixicon=\"RiErrorWarningLine\"\n                            />\n                            Report Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem variant=\"destructive\">\n                            <IconPlaceholder\n                              lucide=\"TrashIcon\"\n                              tabler=\"IconTrash\"\n                              hugeicons=\"Delete02Icon\"\n                              phosphor=\"TrashIcon\"\n                              remixicon=\"RiDeleteBinLine\"\n                            />\n                            Delete Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </ButtonGroup>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </Example>\n    </div>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/preview.json b/apps/v4/public/r/styles/base-mira/preview.json
index aa5dedacd9..fa6393049d 100644
--- a/apps/v4/public/r/styles/base-mira/preview.json
+++ b/apps/v4/public/r/styles/base-mira/preview.json
@@ -34,7 +34,7 @@
   "files": [
     {
       "path": "registry/base-mira/blocks/preview.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\nimport { type IconLibraryName } from \"shadcn/icons\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-mira/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-mira/ui/badge\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-mira/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/base-mira/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-mira/ui/chart\"\nimport { Checkbox } from \"@/registry/base-mira/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport { Field } from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/base-mira/ui/radio-group\"\nimport { Slider } from \"@/registry/base-mira/ui/slider\"\nimport { Switch } from \"@/registry/base-mira/ui/switch\"\nimport { Textarea } from \"@/registry/base-mira/ui/textarea\"\nimport { RADII } from \"@/registry/config\"\nimport { STYLES } from \"@/registry/styles\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { FONTS } from \"@/app/(create)/lib/fonts\"\nimport { useDesignSystemSearchParams } from \"@/app/(create)/lib/search-params\"\n\nconst PREVIEW_ICONS = [\n  {\n    lucide: \"CopyIcon\",\n    tabler: \"IconCopy\",\n    hugeicons: \"Copy01Icon\",\n    phosphor: \"CopyIcon\",\n    remixicon: \"RiFileCopyLine\",\n  },\n  {\n    lucide: \"CircleAlertIcon\",\n    tabler: \"IconExclamationCircle\",\n    hugeicons: \"AlertCircleIcon\",\n    phosphor: \"WarningCircleIcon\",\n    remixicon: \"RiErrorWarningLine\",\n  },\n  {\n    lucide: \"TrashIcon\",\n    tabler: \"IconTrash\",\n    hugeicons: \"Delete02Icon\",\n    phosphor: \"TrashIcon\",\n    remixicon: \"RiDeleteBinLine\",\n  },\n  {\n    lucide: \"ShareIcon\",\n    tabler: \"IconShare\",\n    hugeicons: \"Share03Icon\",\n    phosphor: \"ShareIcon\",\n    remixicon: \"RiShareLine\",\n  },\n  {\n    lucide: \"ShoppingBagIcon\",\n    tabler: \"IconShoppingBag\",\n    hugeicons: \"ShoppingBag01Icon\",\n    phosphor: \"BagIcon\",\n    remixicon: \"RiShoppingBagLine\",\n  },\n  {\n    lucide: \"MoreHorizontalIcon\",\n    tabler: \"IconDots\",\n    hugeicons: \"MoreHorizontalCircle01Icon\",\n    phosphor: \"DotsThreeIcon\",\n    remixicon: \"RiMoreLine\",\n  },\n  {\n    lucide: \"Loader2Icon\",\n    tabler: \"IconLoader\",\n    hugeicons: \"Loading03Icon\",\n    phosphor: \"SpinnerIcon\",\n    remixicon: \"RiLoaderLine\",\n  },\n  {\n    lucide: \"PlusIcon\",\n    tabler: \"IconPlus\",\n    hugeicons: \"PlusSignIcon\",\n    phosphor: \"PlusIcon\",\n    remixicon: \"RiAddLine\",\n  },\n  {\n    lucide: \"MinusIcon\",\n    tabler: \"IconMinus\",\n    hugeicons: \"MinusSignIcon\",\n    phosphor: \"MinusIcon\",\n    remixicon: \"RiSubtractLine\",\n  },\n  {\n    lucide: \"ArrowLeftIcon\",\n    tabler: \"IconArrowLeft\",\n    hugeicons: \"ArrowLeft02Icon\",\n    phosphor: \"ArrowLeftIcon\",\n    remixicon: \"RiArrowLeftLine\",\n  },\n  {\n    lucide: \"ArrowRightIcon\",\n    tabler: \"IconArrowRight\",\n    hugeicons: \"ArrowRight02Icon\",\n    phosphor: \"ArrowRightIcon\",\n    remixicon: \"RiArrowRightLine\",\n  },\n  {\n    lucide: \"CheckIcon\",\n    tabler: \"IconCheck\",\n    hugeicons: \"Tick02Icon\",\n    phosphor: \"CheckIcon\",\n    remixicon: \"RiCheckLine\",\n  },\n  {\n    lucide: \"ChevronDownIcon\",\n    tabler: \"IconChevronDown\",\n    hugeicons: \"ArrowDown01Icon\",\n    phosphor: \"CaretDownIcon\",\n    remixicon: \"RiArrowDownSLine\",\n  },\n  {\n    lucide: \"ChevronRightIcon\",\n    tabler: \"IconChevronRight\",\n    hugeicons: \"ArrowRight01Icon\",\n    phosphor: \"CaretRightIcon\",\n    remixicon: \"RiArrowRightSLine\",\n  },\n] satisfies Record<IconLibraryName, string>[]\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport default function PreviewExample() {\n  const [params] = useDesignSystemSearchParams()\n\n  const currentFont = React.useMemo(\n    () => FONTS.find((font) => font.value === params.font),\n    [params.font]\n  )\n\n  const currentStyle = React.useMemo(\n    () => STYLES.find((style) => style.name === params.style),\n    [params.style]\n  )\n\n  const radiusValue = React.useMemo(() => {\n    const radius = RADII.find((r) => r.name === params.radius)\n    return radius?.value ?? \"\"\n  }, [params.radius])\n\n  return (\n    <ExampleWrapper className=\"w-full max-w-none! lg:p-0\">\n      <Example\n        containerClassName=\"col-span-2 max-w-none\"\n        className=\"bg-muted dark:bg-background flex min-h-svh flex-col items-center justify-center border-none sm:p-16\"\n      >\n        <div\n          data-slot=\"capture-target\"\n          className=\"grid max-w-4xl gap-6 p-6 lg:grid-cols-2\"\n          style={\n            {\n              \"--radius\": radiusValue,\n            } as React.CSSProperties\n          }\n        >\n          <div className=\"flex flex-col gap-6\">\n            <Card>\n              <CardContent className=\"flex flex-col gap-6\">\n                <div className=\"flex flex-col gap-1\">\n                  <div className=\"text-2xl font-medium\">\n                    {currentStyle?.title} - {currentFont?.name}\n                  </div>\n                  <div className=\"text-muted-foreground text-base\">\n                    Designers love packing quirky glyphs into test phrases. This\n                    is a preview of the typography styles.\n                  </div>\n                </div>\n                <div className=\"grid grid-cols-6 gap-3.5\">\n                  {[\n                    \"Background\",\n                    \"Primary\",\n                    \"Secondary\",\n                    \"Muted\",\n                    \"Accent\",\n                    \"Destructive\",\n                  ].map((variant) => (\n                    <div\n                      key={variant}\n                      className=\"flex flex-col flex-wrap items-center gap-2\"\n                    >\n                      <Card\n                        className=\"ring-border aspect-square w-full bg-(--color) ring\"\n                        style={\n                          {\n                            \"--color\": `var(--${variant.toLowerCase()})`,\n                          } as React.CSSProperties\n                        }\n                      />\n                      <div className=\"hidden max-w-14 truncate text-[0.60rem] md:block\">\n                        {variant}\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"hidden flex-1 md:flex\">\n              <CardContent className=\"flex-1\">\n                <ChartContainer\n                  config={barChartConfig}\n                  className=\"aspect-auto h-full w-auto\"\n                >\n                  <BarChart accessibilityLayer data={barChartData}>\n                    <CartesianGrid vertical={false} />\n                    <XAxis\n                      dataKey=\"month\"\n                      tickLine={false}\n                      tickMargin={10}\n                      axisLine={false}\n                      tickFormatter={(value) => value.slice(0, 3)}\n                    />\n                    <ChartTooltip\n                      cursor={false}\n                      content={<ChartTooltipContent indicator=\"dashed\" />}\n                    />\n                    <Bar\n                      dataKey=\"desktop\"\n                      fill=\"var(--color-desktop)\"\n                      radius={4}\n                    />\n                    <Bar\n                      dataKey=\"mobile\"\n                      fill=\"var(--color-mobile)\"\n                      radius={4}\n                    />\n                  </BarChart>\n                </ChartContainer>\n              </CardContent>\n            </Card>\n          </div>\n          <div className=\"flex flex-col gap-6\">\n            <Card className=\"hidden md:flex\">\n              <CardContent>\n                <div className=\"grid grid-cols-4 place-items-center gap-6 md:grid-cols-7\">\n                  {PREVIEW_ICONS.map((icon, index) => (\n                    <Card\n                      key={index}\n                      className=\"ring-border flex size-8 items-center justify-center rounded-md p-0 ring *:[svg]:size-4\"\n                    >\n                      <IconPlaceholder\n                        lucide={icon.lucide}\n                        tabler={icon.tabler}\n                        hugeicons={icon.hugeicons}\n                        phosphor={icon.phosphor}\n                        remixicon={icon.remixicon}\n                      />\n                    </Card>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"flex-1\">\n              <CardContent className=\"flex flex-col gap-6\">\n                <div className=\"flex flex-col gap-4\">\n                  <div className=\"flex flex-wrap gap-2\">\n                    <Button>Default</Button>\n                    <Button variant=\"secondary\">Secondary</Button>\n                    <Button variant=\"outline\">Outline</Button>\n                    <Button variant=\"destructive\">Destructive</Button>\n                  </div>\n                  <Item variant=\"outline\">\n                    <ItemContent>\n                      <ItemTitle>Two-factor authentication</ItemTitle>\n                      <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                        Verify via email or phone number.\n                      </ItemDescription>\n                    </ItemContent>\n                    <ItemActions className=\"hidden md:flex\">\n                      <Button size=\"sm\" variant=\"secondary\">\n                        Enable\n                      </Button>\n                    </ItemActions>\n                  </Item>\n                  <div className=\"flex flex-wrap items-center gap-1.5\">\n                    <Badge>Badge</Badge>\n                    <Badge variant=\"secondary\">Secondary</Badge>\n                    <Badge variant=\"outline\">Outline</Badge>\n                    <div className=\"mt-2 flex gap-3 md:mt-0 md:ml-auto\">\n                      <Switch defaultChecked />\n                      <RadioGroup\n                        defaultValue=\"apple\"\n                        className=\"flex flex-row gap-3\"\n                      >\n                        <RadioGroupItem value=\"apple\" />\n                        <RadioGroupItem value=\"banana\" />\n                      </RadioGroup>\n                      <div className=\"flex flex-row gap-3\">\n                        <Checkbox defaultChecked />\n                        <Checkbox />\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <Field className=\"flex-row\">\n                  <Input placeholder=\"Name\" />\n                </Field>\n                <Field className=\"flex-row\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n                <Slider\n                  value={[500]}\n                  max={1000}\n                  min={0}\n                  step={10}\n                  className=\"mt-2 w-full\"\n                  aria-label=\"Slider\"\n                />\n                <div className=\"flex gap-2 md:gap-4\">\n                  <AlertDialog>\n                    <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </AlertDialogTrigger>\n                    <AlertDialogContent size=\"sm\">\n                      <AlertDialogHeader>\n                        <AlertDialogMedia>\n                          <IconPlaceholder\n                            lucide=\"BluetoothIcon\"\n                            tabler=\"IconBluetooth\"\n                            hugeicons=\"BluetoothIcon\"\n                            phosphor=\"BluetoothIcon\"\n                            remixicon=\"RiBluetoothLine\"\n                          />\n                        </AlertDialogMedia>\n                        <AlertDialogTitle>\n                          Allow accessory to connect?\n                        </AlertDialogTitle>\n                        <AlertDialogDescription>\n                          Do you want to allow the USB accessory to connect to\n                          this device?\n                        </AlertDialogDescription>\n                      </AlertDialogHeader>\n                      <AlertDialogFooter>\n                        <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                        <AlertDialogAction>Allow</AlertDialogAction>\n                      </AlertDialogFooter>\n                    </AlertDialogContent>\n                  </AlertDialog>\n                  <ButtonGroup>\n                    <Button variant=\"outline\">Button Group</Button>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger\n                        render={<Button variant=\"outline\" size=\"icon\" />}\n                      >\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"end\" className=\"w-52\">\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"VolumeX\"\n                              tabler=\"IconVolume\"\n                              hugeicons=\"VolumeOffIcon\"\n                              phosphor=\"SpeakerSlashIcon\"\n                              remixicon=\"RiVolumeMuteLine\"\n                            />\n                            Mute Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckboxCircleLine\"\n                            />\n                            Mark as Read\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"UserRoundXIcon\"\n                              tabler=\"IconUserX\"\n                              hugeicons=\"UserRemove01Icon\"\n                              phosphor=\"UserMinusIcon\"\n                              remixicon=\"RiUserMinusLine\"\n                            />\n                            Block User\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShareIcon\"\n                              tabler=\"IconShare\"\n                              hugeicons=\"Share03Icon\"\n                              phosphor=\"ShareIcon\"\n                              remixicon=\"RiShareLine\"\n                            />\n                            Share Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                            Copy Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"AlertTriangleIcon\"\n                              tabler=\"IconAlertTriangle\"\n                              hugeicons=\"AlertCircleIcon\"\n                              phosphor=\"WarningIcon\"\n                              remixicon=\"RiErrorWarningLine\"\n                            />\n                            Report Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem variant=\"destructive\">\n                            <IconPlaceholder\n                              lucide=\"TrashIcon\"\n                              tabler=\"IconTrash\"\n                              hugeicons=\"Delete02Icon\"\n                              phosphor=\"TrashIcon\"\n                              remixicon=\"RiDeleteBinLine\"\n                            />\n                            Delete Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </ButtonGroup>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </Example>\n    </ExampleWrapper>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\nimport { type IconLibraryName } from \"shadcn/icons\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-mira/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-mira/ui/badge\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-mira/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/base-mira/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-mira/ui/chart\"\nimport { Checkbox } from \"@/registry/base-mira/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport { Field } from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/base-mira/ui/radio-group\"\nimport { Slider } from \"@/registry/base-mira/ui/slider\"\nimport { Switch } from \"@/registry/base-mira/ui/switch\"\nimport { Textarea } from \"@/registry/base-mira/ui/textarea\"\nimport { RADII } from \"@/registry/config\"\nimport { STYLES } from \"@/registry/styles\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { FONTS } from \"@/app/(create)/lib/fonts\"\nimport { useDesignSystemSearchParams } from \"@/app/(create)/lib/search-params\"\n\nconst PREVIEW_ICONS = [\n  {\n    lucide: \"CopyIcon\",\n    tabler: \"IconCopy\",\n    hugeicons: \"Copy01Icon\",\n    phosphor: \"CopyIcon\",\n    remixicon: \"RiFileCopyLine\",\n  },\n  {\n    lucide: \"CircleAlertIcon\",\n    tabler: \"IconExclamationCircle\",\n    hugeicons: \"AlertCircleIcon\",\n    phosphor: \"WarningCircleIcon\",\n    remixicon: \"RiErrorWarningLine\",\n  },\n  {\n    lucide: \"TrashIcon\",\n    tabler: \"IconTrash\",\n    hugeicons: \"Delete02Icon\",\n    phosphor: \"TrashIcon\",\n    remixicon: \"RiDeleteBinLine\",\n  },\n  {\n    lucide: \"ShareIcon\",\n    tabler: \"IconShare\",\n    hugeicons: \"Share03Icon\",\n    phosphor: \"ShareIcon\",\n    remixicon: \"RiShareLine\",\n  },\n  {\n    lucide: \"ShoppingBagIcon\",\n    tabler: \"IconShoppingBag\",\n    hugeicons: \"ShoppingBag01Icon\",\n    phosphor: \"BagIcon\",\n    remixicon: \"RiShoppingBagLine\",\n  },\n  {\n    lucide: \"MoreHorizontalIcon\",\n    tabler: \"IconDots\",\n    hugeicons: \"MoreHorizontalCircle01Icon\",\n    phosphor: \"DotsThreeIcon\",\n    remixicon: \"RiMoreLine\",\n  },\n  {\n    lucide: \"Loader2Icon\",\n    tabler: \"IconLoader\",\n    hugeicons: \"Loading03Icon\",\n    phosphor: \"SpinnerIcon\",\n    remixicon: \"RiLoaderLine\",\n  },\n  {\n    lucide: \"PlusIcon\",\n    tabler: \"IconPlus\",\n    hugeicons: \"PlusSignIcon\",\n    phosphor: \"PlusIcon\",\n    remixicon: \"RiAddLine\",\n  },\n  {\n    lucide: \"MinusIcon\",\n    tabler: \"IconMinus\",\n    hugeicons: \"MinusSignIcon\",\n    phosphor: \"MinusIcon\",\n    remixicon: \"RiSubtractLine\",\n  },\n  {\n    lucide: \"ArrowLeftIcon\",\n    tabler: \"IconArrowLeft\",\n    hugeicons: \"ArrowLeft02Icon\",\n    phosphor: \"ArrowLeftIcon\",\n    remixicon: \"RiArrowLeftLine\",\n  },\n  {\n    lucide: \"ArrowRightIcon\",\n    tabler: \"IconArrowRight\",\n    hugeicons: \"ArrowRight02Icon\",\n    phosphor: \"ArrowRightIcon\",\n    remixicon: \"RiArrowRightLine\",\n  },\n  {\n    lucide: \"CheckIcon\",\n    tabler: \"IconCheck\",\n    hugeicons: \"Tick02Icon\",\n    phosphor: \"CheckIcon\",\n    remixicon: \"RiCheckLine\",\n  },\n  {\n    lucide: \"ChevronDownIcon\",\n    tabler: \"IconChevronDown\",\n    hugeicons: \"ArrowDown01Icon\",\n    phosphor: \"CaretDownIcon\",\n    remixicon: \"RiArrowDownSLine\",\n  },\n  {\n    lucide: \"ChevronRightIcon\",\n    tabler: \"IconChevronRight\",\n    hugeicons: \"ArrowRight01Icon\",\n    phosphor: \"CaretRightIcon\",\n    remixicon: \"RiArrowRightSLine\",\n  },\n] satisfies Record<IconLibraryName, string>[]\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport default function PreviewExample() {\n  const [params] = useDesignSystemSearchParams()\n\n  const currentFont = React.useMemo(\n    () => FONTS.find((font) => font.value === params.font),\n    [params.font]\n  )\n\n  const currentStyle = React.useMemo(\n    () => STYLES.find((style) => style.name === params.style),\n    [params.style]\n  )\n\n  const radiusValue = React.useMemo(() => {\n    const radius = RADII.find((r) => r.name === params.radius)\n    return radius?.value ?? \"\"\n  }, [params.radius])\n\n  return (\n    <div>\n      <Example\n        containerClassName=\"col-span-2 max-w-none\"\n        className=\"bg-muted dark:bg-background flex min-h-svh flex-col items-center justify-center border-none p-0 sm:p-0\"\n      >\n        <div\n          data-slot=\"capture-target\"\n          className=\"grid max-w-4xl gap-6 p-12 lg:grid-cols-2\"\n          style={\n            {\n              \"--radius\": radiusValue,\n            } as React.CSSProperties\n          }\n        >\n          <div className=\"flex flex-col gap-6\">\n            <Card>\n              <CardContent className=\"flex flex-col gap-6\">\n                <div className=\"flex flex-col gap-1\">\n                  <div className=\"text-2xl font-medium\">\n                    {currentStyle?.title} - {currentFont?.name}\n                  </div>\n                  <div className=\"text-muted-foreground text-base\">\n                    Designers love packing quirky glyphs into test phrases. This\n                    is a preview of the typography styles.\n                  </div>\n                </div>\n                <div className=\"grid grid-cols-6 gap-3.5\">\n                  {[\n                    \"Background\",\n                    \"Primary\",\n                    \"Secondary\",\n                    \"Muted\",\n                    \"Accent\",\n                    \"Destructive\",\n                  ].map((variant) => (\n                    <div\n                      key={variant}\n                      className=\"flex flex-col flex-wrap items-center gap-2\"\n                    >\n                      <Item\n                        className=\"ring-border aspect-square w-full bg-(--color) ring\"\n                        style={\n                          {\n                            \"--color\": `var(--${variant.toLowerCase()})`,\n                          } as React.CSSProperties\n                        }\n                      />\n                      <div className=\"hidden max-w-14 truncate text-[0.60rem] md:block\">\n                        {variant}\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"hidden flex-1 md:flex\">\n              <CardContent className=\"flex-1\">\n                <ChartContainer\n                  config={barChartConfig}\n                  className=\"aspect-auto h-full w-auto\"\n                >\n                  <BarChart accessibilityLayer data={barChartData}>\n                    <CartesianGrid vertical={false} />\n                    <XAxis\n                      dataKey=\"month\"\n                      tickLine={false}\n                      tickMargin={10}\n                      axisLine={false}\n                      tickFormatter={(value) => value.slice(0, 3)}\n                    />\n                    <ChartTooltip\n                      cursor={false}\n                      content={<ChartTooltipContent indicator=\"dashed\" />}\n                    />\n                    <Bar\n                      dataKey=\"desktop\"\n                      fill=\"var(--color-desktop)\"\n                      radius={4}\n                    />\n                    <Bar\n                      dataKey=\"mobile\"\n                      fill=\"var(--color-mobile)\"\n                      radius={4}\n                    />\n                  </BarChart>\n                </ChartContainer>\n              </CardContent>\n            </Card>\n          </div>\n          <div className=\"flex flex-col gap-6\">\n            <Card className=\"hidden md:flex\">\n              <CardContent>\n                <div className=\"grid grid-cols-4 place-items-center gap-6 md:grid-cols-7\">\n                  {PREVIEW_ICONS.map((icon, index) => (\n                    <Card\n                      key={index}\n                      className=\"ring-border flex size-8 items-center justify-center rounded-md p-0 ring *:[svg]:size-4\"\n                    >\n                      <IconPlaceholder\n                        lucide={icon.lucide}\n                        tabler={icon.tabler}\n                        hugeicons={icon.hugeicons}\n                        phosphor={icon.phosphor}\n                        remixicon={icon.remixicon}\n                      />\n                    </Card>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"flex-1\">\n              <CardContent className=\"flex flex-1 flex-col gap-6\">\n                <div className=\"flex flex-col gap-4\">\n                  <div className=\"flex flex-wrap gap-2\">\n                    <Button>Default</Button>\n                    <Button variant=\"secondary\">Secondary</Button>\n                    <Button variant=\"outline\">Outline</Button>\n                    <Button variant=\"destructive\">Destructive</Button>\n                  </div>\n                  <Item variant=\"outline\">\n                    <ItemContent>\n                      <ItemTitle>Two-factor authentication</ItemTitle>\n                      <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                        Verify via email or phone number.\n                      </ItemDescription>\n                    </ItemContent>\n                    <ItemActions className=\"hidden md:flex\">\n                      <Button size=\"sm\" variant=\"secondary\">\n                        Enable\n                      </Button>\n                    </ItemActions>\n                  </Item>\n                  <div className=\"flex flex-wrap items-center gap-1.5\">\n                    <Badge>Badge</Badge>\n                    <Badge variant=\"secondary\">Secondary</Badge>\n                    <Badge variant=\"outline\">Outline</Badge>\n                    <div className=\"mt-2 flex gap-3 md:mt-0 md:ml-auto\">\n                      <Switch defaultChecked />\n                      <RadioGroup\n                        defaultValue=\"apple\"\n                        className=\"flex flex-row gap-3\"\n                      >\n                        <RadioGroupItem value=\"apple\" />\n                        <RadioGroupItem value=\"banana\" />\n                      </RadioGroup>\n                      <div className=\"flex flex-row gap-3\">\n                        <Checkbox defaultChecked />\n                        <Checkbox />\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <Field className=\"flex-row\">\n                  <Input placeholder=\"Name\" />\n                </Field>\n                <Field className=\"flex-1 flex-row\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n                <Slider\n                  value={[500]}\n                  max={1000}\n                  min={0}\n                  step={10}\n                  className=\"mt-2 w-full\"\n                  aria-label=\"Slider\"\n                />\n                <div className=\"flex gap-2 md:gap-4\">\n                  <AlertDialog>\n                    <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </AlertDialogTrigger>\n                    <AlertDialogContent size=\"sm\">\n                      <AlertDialogHeader>\n                        <AlertDialogMedia>\n                          <IconPlaceholder\n                            lucide=\"BluetoothIcon\"\n                            tabler=\"IconBluetooth\"\n                            hugeicons=\"BluetoothIcon\"\n                            phosphor=\"BluetoothIcon\"\n                            remixicon=\"RiBluetoothLine\"\n                          />\n                        </AlertDialogMedia>\n                        <AlertDialogTitle>\n                          Allow accessory to connect?\n                        </AlertDialogTitle>\n                        <AlertDialogDescription>\n                          Do you want to allow the USB accessory to connect to\n                          this device?\n                        </AlertDialogDescription>\n                      </AlertDialogHeader>\n                      <AlertDialogFooter>\n                        <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                        <AlertDialogAction>Allow</AlertDialogAction>\n                      </AlertDialogFooter>\n                    </AlertDialogContent>\n                  </AlertDialog>\n                  <ButtonGroup>\n                    <Button variant=\"outline\">Button Group</Button>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger\n                        render={<Button variant=\"outline\" size=\"icon\" />}\n                      >\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"end\" className=\"w-52\">\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"VolumeX\"\n                              tabler=\"IconVolume\"\n                              hugeicons=\"VolumeOffIcon\"\n                              phosphor=\"SpeakerSlashIcon\"\n                              remixicon=\"RiVolumeMuteLine\"\n                            />\n                            Mute Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckboxCircleLine\"\n                            />\n                            Mark as Read\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"UserRoundXIcon\"\n                              tabler=\"IconUserX\"\n                              hugeicons=\"UserRemove01Icon\"\n                              phosphor=\"UserMinusIcon\"\n                              remixicon=\"RiUserMinusLine\"\n                            />\n                            Block User\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShareIcon\"\n                              tabler=\"IconShare\"\n                              hugeicons=\"Share03Icon\"\n                              phosphor=\"ShareIcon\"\n                              remixicon=\"RiShareLine\"\n                            />\n                            Share Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                            Copy Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"AlertTriangleIcon\"\n                              tabler=\"IconAlertTriangle\"\n                              hugeicons=\"AlertCircleIcon\"\n                              phosphor=\"WarningIcon\"\n                              remixicon=\"RiErrorWarningLine\"\n                            />\n                            Report Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem variant=\"destructive\">\n                            <IconPlaceholder\n                              lucide=\"TrashIcon\"\n                              tabler=\"IconTrash\"\n                              hugeicons=\"Delete02Icon\"\n                              phosphor=\"TrashIcon\"\n                              remixicon=\"RiDeleteBinLine\"\n                            />\n                            Delete Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </ButtonGroup>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </Example>\n    </div>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/preview.json b/apps/v4/public/r/styles/base-nova/preview.json
index fa42568657..72102574a6 100644
--- a/apps/v4/public/r/styles/base-nova/preview.json
+++ b/apps/v4/public/r/styles/base-nova/preview.json
@@ -34,7 +34,7 @@
   "files": [
     {
       "path": "registry/base-nova/blocks/preview.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\nimport { type IconLibraryName } from \"shadcn/icons\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-nova/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-nova/ui/badge\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-nova/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/base-nova/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-nova/ui/chart\"\nimport { Checkbox } from \"@/registry/base-nova/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport { Field } from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/base-nova/ui/radio-group\"\nimport { Slider } from \"@/registry/base-nova/ui/slider\"\nimport { Switch } from \"@/registry/base-nova/ui/switch\"\nimport { Textarea } from \"@/registry/base-nova/ui/textarea\"\nimport { RADII } from \"@/registry/config\"\nimport { STYLES } from \"@/registry/styles\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { FONTS } from \"@/app/(create)/lib/fonts\"\nimport { useDesignSystemSearchParams } from \"@/app/(create)/lib/search-params\"\n\nconst PREVIEW_ICONS = [\n  {\n    lucide: \"CopyIcon\",\n    tabler: \"IconCopy\",\n    hugeicons: \"Copy01Icon\",\n    phosphor: \"CopyIcon\",\n    remixicon: \"RiFileCopyLine\",\n  },\n  {\n    lucide: \"CircleAlertIcon\",\n    tabler: \"IconExclamationCircle\",\n    hugeicons: \"AlertCircleIcon\",\n    phosphor: \"WarningCircleIcon\",\n    remixicon: \"RiErrorWarningLine\",\n  },\n  {\n    lucide: \"TrashIcon\",\n    tabler: \"IconTrash\",\n    hugeicons: \"Delete02Icon\",\n    phosphor: \"TrashIcon\",\n    remixicon: \"RiDeleteBinLine\",\n  },\n  {\n    lucide: \"ShareIcon\",\n    tabler: \"IconShare\",\n    hugeicons: \"Share03Icon\",\n    phosphor: \"ShareIcon\",\n    remixicon: \"RiShareLine\",\n  },\n  {\n    lucide: \"ShoppingBagIcon\",\n    tabler: \"IconShoppingBag\",\n    hugeicons: \"ShoppingBag01Icon\",\n    phosphor: \"BagIcon\",\n    remixicon: \"RiShoppingBagLine\",\n  },\n  {\n    lucide: \"MoreHorizontalIcon\",\n    tabler: \"IconDots\",\n    hugeicons: \"MoreHorizontalCircle01Icon\",\n    phosphor: \"DotsThreeIcon\",\n    remixicon: \"RiMoreLine\",\n  },\n  {\n    lucide: \"Loader2Icon\",\n    tabler: \"IconLoader\",\n    hugeicons: \"Loading03Icon\",\n    phosphor: \"SpinnerIcon\",\n    remixicon: \"RiLoaderLine\",\n  },\n  {\n    lucide: \"PlusIcon\",\n    tabler: \"IconPlus\",\n    hugeicons: \"PlusSignIcon\",\n    phosphor: \"PlusIcon\",\n    remixicon: \"RiAddLine\",\n  },\n  {\n    lucide: \"MinusIcon\",\n    tabler: \"IconMinus\",\n    hugeicons: \"MinusSignIcon\",\n    phosphor: \"MinusIcon\",\n    remixicon: \"RiSubtractLine\",\n  },\n  {\n    lucide: \"ArrowLeftIcon\",\n    tabler: \"IconArrowLeft\",\n    hugeicons: \"ArrowLeft02Icon\",\n    phosphor: \"ArrowLeftIcon\",\n    remixicon: \"RiArrowLeftLine\",\n  },\n  {\n    lucide: \"ArrowRightIcon\",\n    tabler: \"IconArrowRight\",\n    hugeicons: \"ArrowRight02Icon\",\n    phosphor: \"ArrowRightIcon\",\n    remixicon: \"RiArrowRightLine\",\n  },\n  {\n    lucide: \"CheckIcon\",\n    tabler: \"IconCheck\",\n    hugeicons: \"Tick02Icon\",\n    phosphor: \"CheckIcon\",\n    remixicon: \"RiCheckLine\",\n  },\n  {\n    lucide: \"ChevronDownIcon\",\n    tabler: \"IconChevronDown\",\n    hugeicons: \"ArrowDown01Icon\",\n    phosphor: \"CaretDownIcon\",\n    remixicon: \"RiArrowDownSLine\",\n  },\n  {\n    lucide: \"ChevronRightIcon\",\n    tabler: \"IconChevronRight\",\n    hugeicons: \"ArrowRight01Icon\",\n    phosphor: \"CaretRightIcon\",\n    remixicon: \"RiArrowRightSLine\",\n  },\n] satisfies Record<IconLibraryName, string>[]\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport default function PreviewExample() {\n  const [params] = useDesignSystemSearchParams()\n\n  const currentFont = React.useMemo(\n    () => FONTS.find((font) => font.value === params.font),\n    [params.font]\n  )\n\n  const currentStyle = React.useMemo(\n    () => STYLES.find((style) => style.name === params.style),\n    [params.style]\n  )\n\n  const radiusValue = React.useMemo(() => {\n    const radius = RADII.find((r) => r.name === params.radius)\n    return radius?.value ?? \"\"\n  }, [params.radius])\n\n  return (\n    <ExampleWrapper className=\"w-full max-w-none! lg:p-0\">\n      <Example\n        containerClassName=\"col-span-2 max-w-none\"\n        className=\"bg-muted dark:bg-background flex min-h-svh flex-col items-center justify-center border-none sm:p-16\"\n      >\n        <div\n          data-slot=\"capture-target\"\n          className=\"grid max-w-4xl gap-6 p-6 lg:grid-cols-2\"\n          style={\n            {\n              \"--radius\": radiusValue,\n            } as React.CSSProperties\n          }\n        >\n          <div className=\"flex flex-col gap-6\">\n            <Card>\n              <CardContent className=\"flex flex-col gap-6\">\n                <div className=\"flex flex-col gap-1\">\n                  <div className=\"text-2xl font-medium\">\n                    {currentStyle?.title} - {currentFont?.name}\n                  </div>\n                  <div className=\"text-muted-foreground text-base\">\n                    Designers love packing quirky glyphs into test phrases. This\n                    is a preview of the typography styles.\n                  </div>\n                </div>\n                <div className=\"grid grid-cols-6 gap-3.5\">\n                  {[\n                    \"Background\",\n                    \"Primary\",\n                    \"Secondary\",\n                    \"Muted\",\n                    \"Accent\",\n                    \"Destructive\",\n                  ].map((variant) => (\n                    <div\n                      key={variant}\n                      className=\"flex flex-col flex-wrap items-center gap-2\"\n                    >\n                      <Card\n                        className=\"ring-border aspect-square w-full bg-(--color) ring\"\n                        style={\n                          {\n                            \"--color\": `var(--${variant.toLowerCase()})`,\n                          } as React.CSSProperties\n                        }\n                      />\n                      <div className=\"hidden max-w-14 truncate text-[0.60rem] md:block\">\n                        {variant}\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"hidden flex-1 md:flex\">\n              <CardContent className=\"flex-1\">\n                <ChartContainer\n                  config={barChartConfig}\n                  className=\"aspect-auto h-full w-auto\"\n                >\n                  <BarChart accessibilityLayer data={barChartData}>\n                    <CartesianGrid vertical={false} />\n                    <XAxis\n                      dataKey=\"month\"\n                      tickLine={false}\n                      tickMargin={10}\n                      axisLine={false}\n                      tickFormatter={(value) => value.slice(0, 3)}\n                    />\n                    <ChartTooltip\n                      cursor={false}\n                      content={<ChartTooltipContent indicator=\"dashed\" />}\n                    />\n                    <Bar\n                      dataKey=\"desktop\"\n                      fill=\"var(--color-desktop)\"\n                      radius={4}\n                    />\n                    <Bar\n                      dataKey=\"mobile\"\n                      fill=\"var(--color-mobile)\"\n                      radius={4}\n                    />\n                  </BarChart>\n                </ChartContainer>\n              </CardContent>\n            </Card>\n          </div>\n          <div className=\"flex flex-col gap-6\">\n            <Card className=\"hidden md:flex\">\n              <CardContent>\n                <div className=\"grid grid-cols-4 place-items-center gap-6 md:grid-cols-7\">\n                  {PREVIEW_ICONS.map((icon, index) => (\n                    <Card\n                      key={index}\n                      className=\"ring-border flex size-8 items-center justify-center rounded-md p-0 ring *:[svg]:size-4\"\n                    >\n                      <IconPlaceholder\n                        lucide={icon.lucide}\n                        tabler={icon.tabler}\n                        hugeicons={icon.hugeicons}\n                        phosphor={icon.phosphor}\n                        remixicon={icon.remixicon}\n                      />\n                    </Card>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"flex-1\">\n              <CardContent className=\"flex flex-col gap-6\">\n                <div className=\"flex flex-col gap-4\">\n                  <div className=\"flex flex-wrap gap-2\">\n                    <Button>Default</Button>\n                    <Button variant=\"secondary\">Secondary</Button>\n                    <Button variant=\"outline\">Outline</Button>\n                    <Button variant=\"destructive\">Destructive</Button>\n                  </div>\n                  <Item variant=\"outline\">\n                    <ItemContent>\n                      <ItemTitle>Two-factor authentication</ItemTitle>\n                      <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                        Verify via email or phone number.\n                      </ItemDescription>\n                    </ItemContent>\n                    <ItemActions className=\"hidden md:flex\">\n                      <Button size=\"sm\" variant=\"secondary\">\n                        Enable\n                      </Button>\n                    </ItemActions>\n                  </Item>\n                  <div className=\"flex flex-wrap items-center gap-1.5\">\n                    <Badge>Badge</Badge>\n                    <Badge variant=\"secondary\">Secondary</Badge>\n                    <Badge variant=\"outline\">Outline</Badge>\n                    <div className=\"mt-2 flex gap-3 md:mt-0 md:ml-auto\">\n                      <Switch defaultChecked />\n                      <RadioGroup\n                        defaultValue=\"apple\"\n                        className=\"flex flex-row gap-3\"\n                      >\n                        <RadioGroupItem value=\"apple\" />\n                        <RadioGroupItem value=\"banana\" />\n                      </RadioGroup>\n                      <div className=\"flex flex-row gap-3\">\n                        <Checkbox defaultChecked />\n                        <Checkbox />\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <Field className=\"flex-row\">\n                  <Input placeholder=\"Name\" />\n                </Field>\n                <Field className=\"flex-row\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n                <Slider\n                  value={[500]}\n                  max={1000}\n                  min={0}\n                  step={10}\n                  className=\"mt-2 w-full\"\n                  aria-label=\"Slider\"\n                />\n                <div className=\"flex gap-2 md:gap-4\">\n                  <AlertDialog>\n                    <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </AlertDialogTrigger>\n                    <AlertDialogContent size=\"sm\">\n                      <AlertDialogHeader>\n                        <AlertDialogMedia>\n                          <IconPlaceholder\n                            lucide=\"BluetoothIcon\"\n                            tabler=\"IconBluetooth\"\n                            hugeicons=\"BluetoothIcon\"\n                            phosphor=\"BluetoothIcon\"\n                            remixicon=\"RiBluetoothLine\"\n                          />\n                        </AlertDialogMedia>\n                        <AlertDialogTitle>\n                          Allow accessory to connect?\n                        </AlertDialogTitle>\n                        <AlertDialogDescription>\n                          Do you want to allow the USB accessory to connect to\n                          this device?\n                        </AlertDialogDescription>\n                      </AlertDialogHeader>\n                      <AlertDialogFooter>\n                        <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                        <AlertDialogAction>Allow</AlertDialogAction>\n                      </AlertDialogFooter>\n                    </AlertDialogContent>\n                  </AlertDialog>\n                  <ButtonGroup>\n                    <Button variant=\"outline\">Button Group</Button>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger\n                        render={<Button variant=\"outline\" size=\"icon\" />}\n                      >\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"end\" className=\"w-52\">\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"VolumeX\"\n                              tabler=\"IconVolume\"\n                              hugeicons=\"VolumeOffIcon\"\n                              phosphor=\"SpeakerSlashIcon\"\n                              remixicon=\"RiVolumeMuteLine\"\n                            />\n                            Mute Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckboxCircleLine\"\n                            />\n                            Mark as Read\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"UserRoundXIcon\"\n                              tabler=\"IconUserX\"\n                              hugeicons=\"UserRemove01Icon\"\n                              phosphor=\"UserMinusIcon\"\n                              remixicon=\"RiUserMinusLine\"\n                            />\n                            Block User\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShareIcon\"\n                              tabler=\"IconShare\"\n                              hugeicons=\"Share03Icon\"\n                              phosphor=\"ShareIcon\"\n                              remixicon=\"RiShareLine\"\n                            />\n                            Share Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                            Copy Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"AlertTriangleIcon\"\n                              tabler=\"IconAlertTriangle\"\n                              hugeicons=\"AlertCircleIcon\"\n                              phosphor=\"WarningIcon\"\n                              remixicon=\"RiErrorWarningLine\"\n                            />\n                            Report Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem variant=\"destructive\">\n                            <IconPlaceholder\n                              lucide=\"TrashIcon\"\n                              tabler=\"IconTrash\"\n                              hugeicons=\"Delete02Icon\"\n                              phosphor=\"TrashIcon\"\n                              remixicon=\"RiDeleteBinLine\"\n                            />\n                            Delete Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </ButtonGroup>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </Example>\n    </ExampleWrapper>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\nimport { type IconLibraryName } from \"shadcn/icons\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-nova/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-nova/ui/badge\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-nova/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/base-nova/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-nova/ui/chart\"\nimport { Checkbox } from \"@/registry/base-nova/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport { Field } from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/base-nova/ui/radio-group\"\nimport { Slider } from \"@/registry/base-nova/ui/slider\"\nimport { Switch } from \"@/registry/base-nova/ui/switch\"\nimport { Textarea } from \"@/registry/base-nova/ui/textarea\"\nimport { RADII } from \"@/registry/config\"\nimport { STYLES } from \"@/registry/styles\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { FONTS } from \"@/app/(create)/lib/fonts\"\nimport { useDesignSystemSearchParams } from \"@/app/(create)/lib/search-params\"\n\nconst PREVIEW_ICONS = [\n  {\n    lucide: \"CopyIcon\",\n    tabler: \"IconCopy\",\n    hugeicons: \"Copy01Icon\",\n    phosphor: \"CopyIcon\",\n    remixicon: \"RiFileCopyLine\",\n  },\n  {\n    lucide: \"CircleAlertIcon\",\n    tabler: \"IconExclamationCircle\",\n    hugeicons: \"AlertCircleIcon\",\n    phosphor: \"WarningCircleIcon\",\n    remixicon: \"RiErrorWarningLine\",\n  },\n  {\n    lucide: \"TrashIcon\",\n    tabler: \"IconTrash\",\n    hugeicons: \"Delete02Icon\",\n    phosphor: \"TrashIcon\",\n    remixicon: \"RiDeleteBinLine\",\n  },\n  {\n    lucide: \"ShareIcon\",\n    tabler: \"IconShare\",\n    hugeicons: \"Share03Icon\",\n    phosphor: \"ShareIcon\",\n    remixicon: \"RiShareLine\",\n  },\n  {\n    lucide: \"ShoppingBagIcon\",\n    tabler: \"IconShoppingBag\",\n    hugeicons: \"ShoppingBag01Icon\",\n    phosphor: \"BagIcon\",\n    remixicon: \"RiShoppingBagLine\",\n  },\n  {\n    lucide: \"MoreHorizontalIcon\",\n    tabler: \"IconDots\",\n    hugeicons: \"MoreHorizontalCircle01Icon\",\n    phosphor: \"DotsThreeIcon\",\n    remixicon: \"RiMoreLine\",\n  },\n  {\n    lucide: \"Loader2Icon\",\n    tabler: \"IconLoader\",\n    hugeicons: \"Loading03Icon\",\n    phosphor: \"SpinnerIcon\",\n    remixicon: \"RiLoaderLine\",\n  },\n  {\n    lucide: \"PlusIcon\",\n    tabler: \"IconPlus\",\n    hugeicons: \"PlusSignIcon\",\n    phosphor: \"PlusIcon\",\n    remixicon: \"RiAddLine\",\n  },\n  {\n    lucide: \"MinusIcon\",\n    tabler: \"IconMinus\",\n    hugeicons: \"MinusSignIcon\",\n    phosphor: \"MinusIcon\",\n    remixicon: \"RiSubtractLine\",\n  },\n  {\n    lucide: \"ArrowLeftIcon\",\n    tabler: \"IconArrowLeft\",\n    hugeicons: \"ArrowLeft02Icon\",\n    phosphor: \"ArrowLeftIcon\",\n    remixicon: \"RiArrowLeftLine\",\n  },\n  {\n    lucide: \"ArrowRightIcon\",\n    tabler: \"IconArrowRight\",\n    hugeicons: \"ArrowRight02Icon\",\n    phosphor: \"ArrowRightIcon\",\n    remixicon: \"RiArrowRightLine\",\n  },\n  {\n    lucide: \"CheckIcon\",\n    tabler: \"IconCheck\",\n    hugeicons: \"Tick02Icon\",\n    phosphor: \"CheckIcon\",\n    remixicon: \"RiCheckLine\",\n  },\n  {\n    lucide: \"ChevronDownIcon\",\n    tabler: \"IconChevronDown\",\n    hugeicons: \"ArrowDown01Icon\",\n    phosphor: \"CaretDownIcon\",\n    remixicon: \"RiArrowDownSLine\",\n  },\n  {\n    lucide: \"ChevronRightIcon\",\n    tabler: \"IconChevronRight\",\n    hugeicons: \"ArrowRight01Icon\",\n    phosphor: \"CaretRightIcon\",\n    remixicon: \"RiArrowRightSLine\",\n  },\n] satisfies Record<IconLibraryName, string>[]\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport default function PreviewExample() {\n  const [params] = useDesignSystemSearchParams()\n\n  const currentFont = React.useMemo(\n    () => FONTS.find((font) => font.value === params.font),\n    [params.font]\n  )\n\n  const currentStyle = React.useMemo(\n    () => STYLES.find((style) => style.name === params.style),\n    [params.style]\n  )\n\n  const radiusValue = React.useMemo(() => {\n    const radius = RADII.find((r) => r.name === params.radius)\n    return radius?.value ?? \"\"\n  }, [params.radius])\n\n  return (\n    <div>\n      <Example\n        containerClassName=\"col-span-2 max-w-none\"\n        className=\"bg-muted dark:bg-background flex min-h-svh flex-col items-center justify-center border-none p-0 sm:p-0\"\n      >\n        <div\n          data-slot=\"capture-target\"\n          className=\"grid max-w-4xl gap-6 p-12 lg:grid-cols-2\"\n          style={\n            {\n              \"--radius\": radiusValue,\n            } as React.CSSProperties\n          }\n        >\n          <div className=\"flex flex-col gap-6\">\n            <Card>\n              <CardContent className=\"flex flex-col gap-6\">\n                <div className=\"flex flex-col gap-1\">\n                  <div className=\"text-2xl font-medium\">\n                    {currentStyle?.title} - {currentFont?.name}\n                  </div>\n                  <div className=\"text-muted-foreground text-base\">\n                    Designers love packing quirky glyphs into test phrases. This\n                    is a preview of the typography styles.\n                  </div>\n                </div>\n                <div className=\"grid grid-cols-6 gap-3.5\">\n                  {[\n                    \"Background\",\n                    \"Primary\",\n                    \"Secondary\",\n                    \"Muted\",\n                    \"Accent\",\n                    \"Destructive\",\n                  ].map((variant) => (\n                    <div\n                      key={variant}\n                      className=\"flex flex-col flex-wrap items-center gap-2\"\n                    >\n                      <Item\n                        className=\"ring-border aspect-square w-full bg-(--color) ring\"\n                        style={\n                          {\n                            \"--color\": `var(--${variant.toLowerCase()})`,\n                          } as React.CSSProperties\n                        }\n                      />\n                      <div className=\"hidden max-w-14 truncate text-[0.60rem] md:block\">\n                        {variant}\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"hidden flex-1 md:flex\">\n              <CardContent className=\"flex-1\">\n                <ChartContainer\n                  config={barChartConfig}\n                  className=\"aspect-auto h-full w-auto\"\n                >\n                  <BarChart accessibilityLayer data={barChartData}>\n                    <CartesianGrid vertical={false} />\n                    <XAxis\n                      dataKey=\"month\"\n                      tickLine={false}\n                      tickMargin={10}\n                      axisLine={false}\n                      tickFormatter={(value) => value.slice(0, 3)}\n                    />\n                    <ChartTooltip\n                      cursor={false}\n                      content={<ChartTooltipContent indicator=\"dashed\" />}\n                    />\n                    <Bar\n                      dataKey=\"desktop\"\n                      fill=\"var(--color-desktop)\"\n                      radius={4}\n                    />\n                    <Bar\n                      dataKey=\"mobile\"\n                      fill=\"var(--color-mobile)\"\n                      radius={4}\n                    />\n                  </BarChart>\n                </ChartContainer>\n              </CardContent>\n            </Card>\n          </div>\n          <div className=\"flex flex-col gap-6\">\n            <Card className=\"hidden md:flex\">\n              <CardContent>\n                <div className=\"grid grid-cols-4 place-items-center gap-6 md:grid-cols-7\">\n                  {PREVIEW_ICONS.map((icon, index) => (\n                    <Card\n                      key={index}\n                      className=\"ring-border flex size-8 items-center justify-center rounded-md p-0 ring *:[svg]:size-4\"\n                    >\n                      <IconPlaceholder\n                        lucide={icon.lucide}\n                        tabler={icon.tabler}\n                        hugeicons={icon.hugeicons}\n                        phosphor={icon.phosphor}\n                        remixicon={icon.remixicon}\n                      />\n                    </Card>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"flex-1\">\n              <CardContent className=\"flex flex-1 flex-col gap-6\">\n                <div className=\"flex flex-col gap-4\">\n                  <div className=\"flex flex-wrap gap-2\">\n                    <Button>Default</Button>\n                    <Button variant=\"secondary\">Secondary</Button>\n                    <Button variant=\"outline\">Outline</Button>\n                    <Button variant=\"destructive\">Destructive</Button>\n                  </div>\n                  <Item variant=\"outline\">\n                    <ItemContent>\n                      <ItemTitle>Two-factor authentication</ItemTitle>\n                      <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                        Verify via email or phone number.\n                      </ItemDescription>\n                    </ItemContent>\n                    <ItemActions className=\"hidden md:flex\">\n                      <Button size=\"sm\" variant=\"secondary\">\n                        Enable\n                      </Button>\n                    </ItemActions>\n                  </Item>\n                  <div className=\"flex flex-wrap items-center gap-1.5\">\n                    <Badge>Badge</Badge>\n                    <Badge variant=\"secondary\">Secondary</Badge>\n                    <Badge variant=\"outline\">Outline</Badge>\n                    <div className=\"mt-2 flex gap-3 md:mt-0 md:ml-auto\">\n                      <Switch defaultChecked />\n                      <RadioGroup\n                        defaultValue=\"apple\"\n                        className=\"flex flex-row gap-3\"\n                      >\n                        <RadioGroupItem value=\"apple\" />\n                        <RadioGroupItem value=\"banana\" />\n                      </RadioGroup>\n                      <div className=\"flex flex-row gap-3\">\n                        <Checkbox defaultChecked />\n                        <Checkbox />\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <Field className=\"flex-row\">\n                  <Input placeholder=\"Name\" />\n                </Field>\n                <Field className=\"flex-1 flex-row\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n                <Slider\n                  value={[500]}\n                  max={1000}\n                  min={0}\n                  step={10}\n                  className=\"mt-2 w-full\"\n                  aria-label=\"Slider\"\n                />\n                <div className=\"flex gap-2 md:gap-4\">\n                  <AlertDialog>\n                    <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </AlertDialogTrigger>\n                    <AlertDialogContent size=\"sm\">\n                      <AlertDialogHeader>\n                        <AlertDialogMedia>\n                          <IconPlaceholder\n                            lucide=\"BluetoothIcon\"\n                            tabler=\"IconBluetooth\"\n                            hugeicons=\"BluetoothIcon\"\n                            phosphor=\"BluetoothIcon\"\n                            remixicon=\"RiBluetoothLine\"\n                          />\n                        </AlertDialogMedia>\n                        <AlertDialogTitle>\n                          Allow accessory to connect?\n                        </AlertDialogTitle>\n                        <AlertDialogDescription>\n                          Do you want to allow the USB accessory to connect to\n                          this device?\n                        </AlertDialogDescription>\n                      </AlertDialogHeader>\n                      <AlertDialogFooter>\n                        <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                        <AlertDialogAction>Allow</AlertDialogAction>\n                      </AlertDialogFooter>\n                    </AlertDialogContent>\n                  </AlertDialog>\n                  <ButtonGroup>\n                    <Button variant=\"outline\">Button Group</Button>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger\n                        render={<Button variant=\"outline\" size=\"icon\" />}\n                      >\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"end\" className=\"w-52\">\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"VolumeX\"\n                              tabler=\"IconVolume\"\n                              hugeicons=\"VolumeOffIcon\"\n                              phosphor=\"SpeakerSlashIcon\"\n                              remixicon=\"RiVolumeMuteLine\"\n                            />\n                            Mute Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckboxCircleLine\"\n                            />\n                            Mark as Read\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"UserRoundXIcon\"\n                              tabler=\"IconUserX\"\n                              hugeicons=\"UserRemove01Icon\"\n                              phosphor=\"UserMinusIcon\"\n                              remixicon=\"RiUserMinusLine\"\n                            />\n                            Block User\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShareIcon\"\n                              tabler=\"IconShare\"\n                              hugeicons=\"Share03Icon\"\n                              phosphor=\"ShareIcon\"\n                              remixicon=\"RiShareLine\"\n                            />\n                            Share Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                            Copy Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"AlertTriangleIcon\"\n                              tabler=\"IconAlertTriangle\"\n                              hugeicons=\"AlertCircleIcon\"\n                              phosphor=\"WarningIcon\"\n                              remixicon=\"RiErrorWarningLine\"\n                            />\n                            Report Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem variant=\"destructive\">\n                            <IconPlaceholder\n                              lucide=\"TrashIcon\"\n                              tabler=\"IconTrash\"\n                              hugeicons=\"Delete02Icon\"\n                              phosphor=\"TrashIcon\"\n                              remixicon=\"RiDeleteBinLine\"\n                            />\n                            Delete Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </ButtonGroup>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </Example>\n    </div>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/preview.json b/apps/v4/public/r/styles/base-vega/preview.json
index 39142c18ca..877339c274 100644
--- a/apps/v4/public/r/styles/base-vega/preview.json
+++ b/apps/v4/public/r/styles/base-vega/preview.json
@@ -34,7 +34,7 @@
   "files": [
     {
       "path": "registry/base-vega/blocks/preview.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\nimport { type IconLibraryName } from \"shadcn/icons\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-vega/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-vega/ui/badge\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-vega/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/base-vega/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-vega/ui/chart\"\nimport { Checkbox } from \"@/registry/base-vega/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport { Field } from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/base-vega/ui/radio-group\"\nimport { Slider } from \"@/registry/base-vega/ui/slider\"\nimport { Switch } from \"@/registry/base-vega/ui/switch\"\nimport { Textarea } from \"@/registry/base-vega/ui/textarea\"\nimport { RADII } from \"@/registry/config\"\nimport { STYLES } from \"@/registry/styles\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { FONTS } from \"@/app/(create)/lib/fonts\"\nimport { useDesignSystemSearchParams } from \"@/app/(create)/lib/search-params\"\n\nconst PREVIEW_ICONS = [\n  {\n    lucide: \"CopyIcon\",\n    tabler: \"IconCopy\",\n    hugeicons: \"Copy01Icon\",\n    phosphor: \"CopyIcon\",\n    remixicon: \"RiFileCopyLine\",\n  },\n  {\n    lucide: \"CircleAlertIcon\",\n    tabler: \"IconExclamationCircle\",\n    hugeicons: \"AlertCircleIcon\",\n    phosphor: \"WarningCircleIcon\",\n    remixicon: \"RiErrorWarningLine\",\n  },\n  {\n    lucide: \"TrashIcon\",\n    tabler: \"IconTrash\",\n    hugeicons: \"Delete02Icon\",\n    phosphor: \"TrashIcon\",\n    remixicon: \"RiDeleteBinLine\",\n  },\n  {\n    lucide: \"ShareIcon\",\n    tabler: \"IconShare\",\n    hugeicons: \"Share03Icon\",\n    phosphor: \"ShareIcon\",\n    remixicon: \"RiShareLine\",\n  },\n  {\n    lucide: \"ShoppingBagIcon\",\n    tabler: \"IconShoppingBag\",\n    hugeicons: \"ShoppingBag01Icon\",\n    phosphor: \"BagIcon\",\n    remixicon: \"RiShoppingBagLine\",\n  },\n  {\n    lucide: \"MoreHorizontalIcon\",\n    tabler: \"IconDots\",\n    hugeicons: \"MoreHorizontalCircle01Icon\",\n    phosphor: \"DotsThreeIcon\",\n    remixicon: \"RiMoreLine\",\n  },\n  {\n    lucide: \"Loader2Icon\",\n    tabler: \"IconLoader\",\n    hugeicons: \"Loading03Icon\",\n    phosphor: \"SpinnerIcon\",\n    remixicon: \"RiLoaderLine\",\n  },\n  {\n    lucide: \"PlusIcon\",\n    tabler: \"IconPlus\",\n    hugeicons: \"PlusSignIcon\",\n    phosphor: \"PlusIcon\",\n    remixicon: \"RiAddLine\",\n  },\n  {\n    lucide: \"MinusIcon\",\n    tabler: \"IconMinus\",\n    hugeicons: \"MinusSignIcon\",\n    phosphor: \"MinusIcon\",\n    remixicon: \"RiSubtractLine\",\n  },\n  {\n    lucide: \"ArrowLeftIcon\",\n    tabler: \"IconArrowLeft\",\n    hugeicons: \"ArrowLeft02Icon\",\n    phosphor: \"ArrowLeftIcon\",\n    remixicon: \"RiArrowLeftLine\",\n  },\n  {\n    lucide: \"ArrowRightIcon\",\n    tabler: \"IconArrowRight\",\n    hugeicons: \"ArrowRight02Icon\",\n    phosphor: \"ArrowRightIcon\",\n    remixicon: \"RiArrowRightLine\",\n  },\n  {\n    lucide: \"CheckIcon\",\n    tabler: \"IconCheck\",\n    hugeicons: \"Tick02Icon\",\n    phosphor: \"CheckIcon\",\n    remixicon: \"RiCheckLine\",\n  },\n  {\n    lucide: \"ChevronDownIcon\",\n    tabler: \"IconChevronDown\",\n    hugeicons: \"ArrowDown01Icon\",\n    phosphor: \"CaretDownIcon\",\n    remixicon: \"RiArrowDownSLine\",\n  },\n  {\n    lucide: \"ChevronRightIcon\",\n    tabler: \"IconChevronRight\",\n    hugeicons: \"ArrowRight01Icon\",\n    phosphor: \"CaretRightIcon\",\n    remixicon: \"RiArrowRightSLine\",\n  },\n] satisfies Record<IconLibraryName, string>[]\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport default function PreviewExample() {\n  const [params] = useDesignSystemSearchParams()\n\n  const currentFont = React.useMemo(\n    () => FONTS.find((font) => font.value === params.font),\n    [params.font]\n  )\n\n  const currentStyle = React.useMemo(\n    () => STYLES.find((style) => style.name === params.style),\n    [params.style]\n  )\n\n  const radiusValue = React.useMemo(() => {\n    const radius = RADII.find((r) => r.name === params.radius)\n    return radius?.value ?? \"\"\n  }, [params.radius])\n\n  return (\n    <ExampleWrapper className=\"w-full max-w-none! lg:p-0\">\n      <Example\n        containerClassName=\"col-span-2 max-w-none\"\n        className=\"bg-muted dark:bg-background flex min-h-svh flex-col items-center justify-center border-none sm:p-16\"\n      >\n        <div\n          data-slot=\"capture-target\"\n          className=\"grid max-w-4xl gap-6 p-6 lg:grid-cols-2\"\n          style={\n            {\n              \"--radius\": radiusValue,\n            } as React.CSSProperties\n          }\n        >\n          <div className=\"flex flex-col gap-6\">\n            <Card>\n              <CardContent className=\"flex flex-col gap-6\">\n                <div className=\"flex flex-col gap-1\">\n                  <div className=\"text-2xl font-medium\">\n                    {currentStyle?.title} - {currentFont?.name}\n                  </div>\n                  <div className=\"text-muted-foreground text-base\">\n                    Designers love packing quirky glyphs into test phrases. This\n                    is a preview of the typography styles.\n                  </div>\n                </div>\n                <div className=\"grid grid-cols-6 gap-3.5\">\n                  {[\n                    \"Background\",\n                    \"Primary\",\n                    \"Secondary\",\n                    \"Muted\",\n                    \"Accent\",\n                    \"Destructive\",\n                  ].map((variant) => (\n                    <div\n                      key={variant}\n                      className=\"flex flex-col flex-wrap items-center gap-2\"\n                    >\n                      <Card\n                        className=\"ring-border aspect-square w-full bg-(--color) ring\"\n                        style={\n                          {\n                            \"--color\": `var(--${variant.toLowerCase()})`,\n                          } as React.CSSProperties\n                        }\n                      />\n                      <div className=\"hidden max-w-14 truncate text-[0.60rem] md:block\">\n                        {variant}\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"hidden flex-1 md:flex\">\n              <CardContent className=\"flex-1\">\n                <ChartContainer\n                  config={barChartConfig}\n                  className=\"aspect-auto h-full w-auto\"\n                >\n                  <BarChart accessibilityLayer data={barChartData}>\n                    <CartesianGrid vertical={false} />\n                    <XAxis\n                      dataKey=\"month\"\n                      tickLine={false}\n                      tickMargin={10}\n                      axisLine={false}\n                      tickFormatter={(value) => value.slice(0, 3)}\n                    />\n                    <ChartTooltip\n                      cursor={false}\n                      content={<ChartTooltipContent indicator=\"dashed\" />}\n                    />\n                    <Bar\n                      dataKey=\"desktop\"\n                      fill=\"var(--color-desktop)\"\n                      radius={4}\n                    />\n                    <Bar\n                      dataKey=\"mobile\"\n                      fill=\"var(--color-mobile)\"\n                      radius={4}\n                    />\n                  </BarChart>\n                </ChartContainer>\n              </CardContent>\n            </Card>\n          </div>\n          <div className=\"flex flex-col gap-6\">\n            <Card className=\"hidden md:flex\">\n              <CardContent>\n                <div className=\"grid grid-cols-4 place-items-center gap-6 md:grid-cols-7\">\n                  {PREVIEW_ICONS.map((icon, index) => (\n                    <Card\n                      key={index}\n                      className=\"ring-border flex size-8 items-center justify-center rounded-md p-0 ring *:[svg]:size-4\"\n                    >\n                      <IconPlaceholder\n                        lucide={icon.lucide}\n                        tabler={icon.tabler}\n                        hugeicons={icon.hugeicons}\n                        phosphor={icon.phosphor}\n                        remixicon={icon.remixicon}\n                      />\n                    </Card>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"flex-1\">\n              <CardContent className=\"flex flex-col gap-6\">\n                <div className=\"flex flex-col gap-4\">\n                  <div className=\"flex flex-wrap gap-2\">\n                    <Button>Default</Button>\n                    <Button variant=\"secondary\">Secondary</Button>\n                    <Button variant=\"outline\">Outline</Button>\n                    <Button variant=\"destructive\">Destructive</Button>\n                  </div>\n                  <Item variant=\"outline\">\n                    <ItemContent>\n                      <ItemTitle>Two-factor authentication</ItemTitle>\n                      <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                        Verify via email or phone number.\n                      </ItemDescription>\n                    </ItemContent>\n                    <ItemActions className=\"hidden md:flex\">\n                      <Button size=\"sm\" variant=\"secondary\">\n                        Enable\n                      </Button>\n                    </ItemActions>\n                  </Item>\n                  <div className=\"flex flex-wrap items-center gap-1.5\">\n                    <Badge>Badge</Badge>\n                    <Badge variant=\"secondary\">Secondary</Badge>\n                    <Badge variant=\"outline\">Outline</Badge>\n                    <div className=\"mt-2 flex gap-3 md:mt-0 md:ml-auto\">\n                      <Switch defaultChecked />\n                      <RadioGroup\n                        defaultValue=\"apple\"\n                        className=\"flex flex-row gap-3\"\n                      >\n                        <RadioGroupItem value=\"apple\" />\n                        <RadioGroupItem value=\"banana\" />\n                      </RadioGroup>\n                      <div className=\"flex flex-row gap-3\">\n                        <Checkbox defaultChecked />\n                        <Checkbox />\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <Field className=\"flex-row\">\n                  <Input placeholder=\"Name\" />\n                </Field>\n                <Field className=\"flex-row\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n                <Slider\n                  value={[500]}\n                  max={1000}\n                  min={0}\n                  step={10}\n                  className=\"mt-2 w-full\"\n                  aria-label=\"Slider\"\n                />\n                <div className=\"flex gap-2 md:gap-4\">\n                  <AlertDialog>\n                    <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </AlertDialogTrigger>\n                    <AlertDialogContent size=\"sm\">\n                      <AlertDialogHeader>\n                        <AlertDialogMedia>\n                          <IconPlaceholder\n                            lucide=\"BluetoothIcon\"\n                            tabler=\"IconBluetooth\"\n                            hugeicons=\"BluetoothIcon\"\n                            phosphor=\"BluetoothIcon\"\n                            remixicon=\"RiBluetoothLine\"\n                          />\n                        </AlertDialogMedia>\n                        <AlertDialogTitle>\n                          Allow accessory to connect?\n                        </AlertDialogTitle>\n                        <AlertDialogDescription>\n                          Do you want to allow the USB accessory to connect to\n                          this device?\n                        </AlertDialogDescription>\n                      </AlertDialogHeader>\n                      <AlertDialogFooter>\n                        <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                        <AlertDialogAction>Allow</AlertDialogAction>\n                      </AlertDialogFooter>\n                    </AlertDialogContent>\n                  </AlertDialog>\n                  <ButtonGroup>\n                    <Button variant=\"outline\">Button Group</Button>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger\n                        render={<Button variant=\"outline\" size=\"icon\" />}\n                      >\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"end\" className=\"w-52\">\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"VolumeX\"\n                              tabler=\"IconVolume\"\n                              hugeicons=\"VolumeOffIcon\"\n                              phosphor=\"SpeakerSlashIcon\"\n                              remixicon=\"RiVolumeMuteLine\"\n                            />\n                            Mute Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckboxCircleLine\"\n                            />\n                            Mark as Read\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"UserRoundXIcon\"\n                              tabler=\"IconUserX\"\n                              hugeicons=\"UserRemove01Icon\"\n                              phosphor=\"UserMinusIcon\"\n                              remixicon=\"RiUserMinusLine\"\n                            />\n                            Block User\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShareIcon\"\n                              tabler=\"IconShare\"\n                              hugeicons=\"Share03Icon\"\n                              phosphor=\"ShareIcon\"\n                              remixicon=\"RiShareLine\"\n                            />\n                            Share Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                            Copy Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"AlertTriangleIcon\"\n                              tabler=\"IconAlertTriangle\"\n                              hugeicons=\"AlertCircleIcon\"\n                              phosphor=\"WarningIcon\"\n                              remixicon=\"RiErrorWarningLine\"\n                            />\n                            Report Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem variant=\"destructive\">\n                            <IconPlaceholder\n                              lucide=\"TrashIcon\"\n                              tabler=\"IconTrash\"\n                              hugeicons=\"Delete02Icon\"\n                              phosphor=\"TrashIcon\"\n                              remixicon=\"RiDeleteBinLine\"\n                            />\n                            Delete Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </ButtonGroup>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </Example>\n    </ExampleWrapper>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\nimport { type IconLibraryName } from \"shadcn/icons\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-vega/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-vega/ui/badge\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-vega/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/base-vega/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-vega/ui/chart\"\nimport { Checkbox } from \"@/registry/base-vega/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport { Field } from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/base-vega/ui/radio-group\"\nimport { Slider } from \"@/registry/base-vega/ui/slider\"\nimport { Switch } from \"@/registry/base-vega/ui/switch\"\nimport { Textarea } from \"@/registry/base-vega/ui/textarea\"\nimport { RADII } from \"@/registry/config\"\nimport { STYLES } from \"@/registry/styles\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { FONTS } from \"@/app/(create)/lib/fonts\"\nimport { useDesignSystemSearchParams } from \"@/app/(create)/lib/search-params\"\n\nconst PREVIEW_ICONS = [\n  {\n    lucide: \"CopyIcon\",\n    tabler: \"IconCopy\",\n    hugeicons: \"Copy01Icon\",\n    phosphor: \"CopyIcon\",\n    remixicon: \"RiFileCopyLine\",\n  },\n  {\n    lucide: \"CircleAlertIcon\",\n    tabler: \"IconExclamationCircle\",\n    hugeicons: \"AlertCircleIcon\",\n    phosphor: \"WarningCircleIcon\",\n    remixicon: \"RiErrorWarningLine\",\n  },\n  {\n    lucide: \"TrashIcon\",\n    tabler: \"IconTrash\",\n    hugeicons: \"Delete02Icon\",\n    phosphor: \"TrashIcon\",\n    remixicon: \"RiDeleteBinLine\",\n  },\n  {\n    lucide: \"ShareIcon\",\n    tabler: \"IconShare\",\n    hugeicons: \"Share03Icon\",\n    phosphor: \"ShareIcon\",\n    remixicon: \"RiShareLine\",\n  },\n  {\n    lucide: \"ShoppingBagIcon\",\n    tabler: \"IconShoppingBag\",\n    hugeicons: \"ShoppingBag01Icon\",\n    phosphor: \"BagIcon\",\n    remixicon: \"RiShoppingBagLine\",\n  },\n  {\n    lucide: \"MoreHorizontalIcon\",\n    tabler: \"IconDots\",\n    hugeicons: \"MoreHorizontalCircle01Icon\",\n    phosphor: \"DotsThreeIcon\",\n    remixicon: \"RiMoreLine\",\n  },\n  {\n    lucide: \"Loader2Icon\",\n    tabler: \"IconLoader\",\n    hugeicons: \"Loading03Icon\",\n    phosphor: \"SpinnerIcon\",\n    remixicon: \"RiLoaderLine\",\n  },\n  {\n    lucide: \"PlusIcon\",\n    tabler: \"IconPlus\",\n    hugeicons: \"PlusSignIcon\",\n    phosphor: \"PlusIcon\",\n    remixicon: \"RiAddLine\",\n  },\n  {\n    lucide: \"MinusIcon\",\n    tabler: \"IconMinus\",\n    hugeicons: \"MinusSignIcon\",\n    phosphor: \"MinusIcon\",\n    remixicon: \"RiSubtractLine\",\n  },\n  {\n    lucide: \"ArrowLeftIcon\",\n    tabler: \"IconArrowLeft\",\n    hugeicons: \"ArrowLeft02Icon\",\n    phosphor: \"ArrowLeftIcon\",\n    remixicon: \"RiArrowLeftLine\",\n  },\n  {\n    lucide: \"ArrowRightIcon\",\n    tabler: \"IconArrowRight\",\n    hugeicons: \"ArrowRight02Icon\",\n    phosphor: \"ArrowRightIcon\",\n    remixicon: \"RiArrowRightLine\",\n  },\n  {\n    lucide: \"CheckIcon\",\n    tabler: \"IconCheck\",\n    hugeicons: \"Tick02Icon\",\n    phosphor: \"CheckIcon\",\n    remixicon: \"RiCheckLine\",\n  },\n  {\n    lucide: \"ChevronDownIcon\",\n    tabler: \"IconChevronDown\",\n    hugeicons: \"ArrowDown01Icon\",\n    phosphor: \"CaretDownIcon\",\n    remixicon: \"RiArrowDownSLine\",\n  },\n  {\n    lucide: \"ChevronRightIcon\",\n    tabler: \"IconChevronRight\",\n    hugeicons: \"ArrowRight01Icon\",\n    phosphor: \"CaretRightIcon\",\n    remixicon: \"RiArrowRightSLine\",\n  },\n] satisfies Record<IconLibraryName, string>[]\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport default function PreviewExample() {\n  const [params] = useDesignSystemSearchParams()\n\n  const currentFont = React.useMemo(\n    () => FONTS.find((font) => font.value === params.font),\n    [params.font]\n  )\n\n  const currentStyle = React.useMemo(\n    () => STYLES.find((style) => style.name === params.style),\n    [params.style]\n  )\n\n  const radiusValue = React.useMemo(() => {\n    const radius = RADII.find((r) => r.name === params.radius)\n    return radius?.value ?? \"\"\n  }, [params.radius])\n\n  return (\n    <div>\n      <Example\n        containerClassName=\"col-span-2 max-w-none\"\n        className=\"bg-muted dark:bg-background flex min-h-svh flex-col items-center justify-center border-none p-0 sm:p-0\"\n      >\n        <div\n          data-slot=\"capture-target\"\n          className=\"grid max-w-4xl gap-6 p-12 lg:grid-cols-2\"\n          style={\n            {\n              \"--radius\": radiusValue,\n            } as React.CSSProperties\n          }\n        >\n          <div className=\"flex flex-col gap-6\">\n            <Card>\n              <CardContent className=\"flex flex-col gap-6\">\n                <div className=\"flex flex-col gap-1\">\n                  <div className=\"text-2xl font-medium\">\n                    {currentStyle?.title} - {currentFont?.name}\n                  </div>\n                  <div className=\"text-muted-foreground text-base\">\n                    Designers love packing quirky glyphs into test phrases. This\n                    is a preview of the typography styles.\n                  </div>\n                </div>\n                <div className=\"grid grid-cols-6 gap-3.5\">\n                  {[\n                    \"Background\",\n                    \"Primary\",\n                    \"Secondary\",\n                    \"Muted\",\n                    \"Accent\",\n                    \"Destructive\",\n                  ].map((variant) => (\n                    <div\n                      key={variant}\n                      className=\"flex flex-col flex-wrap items-center gap-2\"\n                    >\n                      <Item\n                        className=\"ring-border aspect-square w-full bg-(--color) ring\"\n                        style={\n                          {\n                            \"--color\": `var(--${variant.toLowerCase()})`,\n                          } as React.CSSProperties\n                        }\n                      />\n                      <div className=\"hidden max-w-14 truncate text-[0.60rem] md:block\">\n                        {variant}\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"hidden flex-1 md:flex\">\n              <CardContent className=\"flex-1\">\n                <ChartContainer\n                  config={barChartConfig}\n                  className=\"aspect-auto h-full w-auto\"\n                >\n                  <BarChart accessibilityLayer data={barChartData}>\n                    <CartesianGrid vertical={false} />\n                    <XAxis\n                      dataKey=\"month\"\n                      tickLine={false}\n                      tickMargin={10}\n                      axisLine={false}\n                      tickFormatter={(value) => value.slice(0, 3)}\n                    />\n                    <ChartTooltip\n                      cursor={false}\n                      content={<ChartTooltipContent indicator=\"dashed\" />}\n                    />\n                    <Bar\n                      dataKey=\"desktop\"\n                      fill=\"var(--color-desktop)\"\n                      radius={4}\n                    />\n                    <Bar\n                      dataKey=\"mobile\"\n                      fill=\"var(--color-mobile)\"\n                      radius={4}\n                    />\n                  </BarChart>\n                </ChartContainer>\n              </CardContent>\n            </Card>\n          </div>\n          <div className=\"flex flex-col gap-6\">\n            <Card className=\"hidden md:flex\">\n              <CardContent>\n                <div className=\"grid grid-cols-4 place-items-center gap-6 md:grid-cols-7\">\n                  {PREVIEW_ICONS.map((icon, index) => (\n                    <Card\n                      key={index}\n                      className=\"ring-border flex size-8 items-center justify-center rounded-md p-0 ring *:[svg]:size-4\"\n                    >\n                      <IconPlaceholder\n                        lucide={icon.lucide}\n                        tabler={icon.tabler}\n                        hugeicons={icon.hugeicons}\n                        phosphor={icon.phosphor}\n                        remixicon={icon.remixicon}\n                      />\n                    </Card>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"flex-1\">\n              <CardContent className=\"flex flex-1 flex-col gap-6\">\n                <div className=\"flex flex-col gap-4\">\n                  <div className=\"flex flex-wrap gap-2\">\n                    <Button>Default</Button>\n                    <Button variant=\"secondary\">Secondary</Button>\n                    <Button variant=\"outline\">Outline</Button>\n                    <Button variant=\"destructive\">Destructive</Button>\n                  </div>\n                  <Item variant=\"outline\">\n                    <ItemContent>\n                      <ItemTitle>Two-factor authentication</ItemTitle>\n                      <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                        Verify via email or phone number.\n                      </ItemDescription>\n                    </ItemContent>\n                    <ItemActions className=\"hidden md:flex\">\n                      <Button size=\"sm\" variant=\"secondary\">\n                        Enable\n                      </Button>\n                    </ItemActions>\n                  </Item>\n                  <div className=\"flex flex-wrap items-center gap-1.5\">\n                    <Badge>Badge</Badge>\n                    <Badge variant=\"secondary\">Secondary</Badge>\n                    <Badge variant=\"outline\">Outline</Badge>\n                    <div className=\"mt-2 flex gap-3 md:mt-0 md:ml-auto\">\n                      <Switch defaultChecked />\n                      <RadioGroup\n                        defaultValue=\"apple\"\n                        className=\"flex flex-row gap-3\"\n                      >\n                        <RadioGroupItem value=\"apple\" />\n                        <RadioGroupItem value=\"banana\" />\n                      </RadioGroup>\n                      <div className=\"flex flex-row gap-3\">\n                        <Checkbox defaultChecked />\n                        <Checkbox />\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <Field className=\"flex-row\">\n                  <Input placeholder=\"Name\" />\n                </Field>\n                <Field className=\"flex-1 flex-row\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n                <Slider\n                  value={[500]}\n                  max={1000}\n                  min={0}\n                  step={10}\n                  className=\"mt-2 w-full\"\n                  aria-label=\"Slider\"\n                />\n                <div className=\"flex gap-2 md:gap-4\">\n                  <AlertDialog>\n                    <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </AlertDialogTrigger>\n                    <AlertDialogContent size=\"sm\">\n                      <AlertDialogHeader>\n                        <AlertDialogMedia>\n                          <IconPlaceholder\n                            lucide=\"BluetoothIcon\"\n                            tabler=\"IconBluetooth\"\n                            hugeicons=\"BluetoothIcon\"\n                            phosphor=\"BluetoothIcon\"\n                            remixicon=\"RiBluetoothLine\"\n                          />\n                        </AlertDialogMedia>\n                        <AlertDialogTitle>\n                          Allow accessory to connect?\n                        </AlertDialogTitle>\n                        <AlertDialogDescription>\n                          Do you want to allow the USB accessory to connect to\n                          this device?\n                        </AlertDialogDescription>\n                      </AlertDialogHeader>\n                      <AlertDialogFooter>\n                        <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                        <AlertDialogAction>Allow</AlertDialogAction>\n                      </AlertDialogFooter>\n                    </AlertDialogContent>\n                  </AlertDialog>\n                  <ButtonGroup>\n                    <Button variant=\"outline\">Button Group</Button>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger\n                        render={<Button variant=\"outline\" size=\"icon\" />}\n                      >\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"end\" className=\"w-52\">\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"VolumeX\"\n                              tabler=\"IconVolume\"\n                              hugeicons=\"VolumeOffIcon\"\n                              phosphor=\"SpeakerSlashIcon\"\n                              remixicon=\"RiVolumeMuteLine\"\n                            />\n                            Mute Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckboxCircleLine\"\n                            />\n                            Mark as Read\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"UserRoundXIcon\"\n                              tabler=\"IconUserX\"\n                              hugeicons=\"UserRemove01Icon\"\n                              phosphor=\"UserMinusIcon\"\n                              remixicon=\"RiUserMinusLine\"\n                            />\n                            Block User\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShareIcon\"\n                              tabler=\"IconShare\"\n                              hugeicons=\"Share03Icon\"\n                              phosphor=\"ShareIcon\"\n                              remixicon=\"RiShareLine\"\n                            />\n                            Share Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                            Copy Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"AlertTriangleIcon\"\n                              tabler=\"IconAlertTriangle\"\n                              hugeicons=\"AlertCircleIcon\"\n                              phosphor=\"WarningIcon\"\n                              remixicon=\"RiErrorWarningLine\"\n                            />\n                            Report Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem variant=\"destructive\">\n                            <IconPlaceholder\n                              lucide=\"TrashIcon\"\n                              tabler=\"IconTrash\"\n                              hugeicons=\"Delete02Icon\"\n                              phosphor=\"TrashIcon\"\n                              remixicon=\"RiDeleteBinLine\"\n                            />\n                            Delete Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </ButtonGroup>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </Example>\n    </div>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/preview.json b/apps/v4/public/r/styles/radix-lyra/preview.json
index 76e902c5e1..c464b15dc6 100644
--- a/apps/v4/public/r/styles/radix-lyra/preview.json
+++ b/apps/v4/public/r/styles/radix-lyra/preview.json
@@ -33,7 +33,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/blocks/preview.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\nimport { type IconLibraryName } from \"shadcn/icons\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-lyra/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-lyra/ui/badge\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-lyra/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/radix-lyra/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-lyra/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-lyra/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport { Field } from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-lyra/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-lyra/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-lyra/ui/slider\"\nimport { Switch } from \"@/registry/radix-lyra/ui/switch\"\nimport { Textarea } from \"@/registry/radix-lyra/ui/textarea\"\nimport { RADII } from \"@/registry/config\"\nimport { STYLES } from \"@/registry/styles\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { FONTS } from \"@/app/(create)/lib/fonts\"\nimport { useDesignSystemSearchParams } from \"@/app/(create)/lib/search-params\"\n\nconst PREVIEW_ICONS = [\n  {\n    lucide: \"CopyIcon\",\n    tabler: \"IconCopy\",\n    hugeicons: \"Copy01Icon\",\n    phosphor: \"CopyIcon\",\n    remixicon: \"RiFileCopyLine\",\n  },\n  {\n    lucide: \"CircleAlertIcon\",\n    tabler: \"IconExclamationCircle\",\n    hugeicons: \"AlertCircleIcon\",\n    phosphor: \"WarningCircleIcon\",\n    remixicon: \"RiErrorWarningLine\",\n  },\n  {\n    lucide: \"TrashIcon\",\n    tabler: \"IconTrash\",\n    hugeicons: \"Delete02Icon\",\n    phosphor: \"TrashIcon\",\n    remixicon: \"RiDeleteBinLine\",\n  },\n  {\n    lucide: \"ShareIcon\",\n    tabler: \"IconShare\",\n    hugeicons: \"Share03Icon\",\n    phosphor: \"ShareIcon\",\n    remixicon: \"RiShareLine\",\n  },\n  {\n    lucide: \"ShoppingBagIcon\",\n    tabler: \"IconShoppingBag\",\n    hugeicons: \"ShoppingBag01Icon\",\n    phosphor: \"BagIcon\",\n    remixicon: \"RiShoppingBagLine\",\n  },\n  {\n    lucide: \"MoreHorizontalIcon\",\n    tabler: \"IconDots\",\n    hugeicons: \"MoreHorizontalCircle01Icon\",\n    phosphor: \"DotsThreeIcon\",\n    remixicon: \"RiMoreLine\",\n  },\n  {\n    lucide: \"Loader2Icon\",\n    tabler: \"IconLoader\",\n    hugeicons: \"Loading03Icon\",\n    phosphor: \"SpinnerIcon\",\n    remixicon: \"RiLoaderLine\",\n  },\n  {\n    lucide: \"PlusIcon\",\n    tabler: \"IconPlus\",\n    hugeicons: \"PlusSignIcon\",\n    phosphor: \"PlusIcon\",\n    remixicon: \"RiAddLine\",\n  },\n  {\n    lucide: \"MinusIcon\",\n    tabler: \"IconMinus\",\n    hugeicons: \"MinusSignIcon\",\n    phosphor: \"MinusIcon\",\n    remixicon: \"RiSubtractLine\",\n  },\n  {\n    lucide: \"ArrowLeftIcon\",\n    tabler: \"IconArrowLeft\",\n    hugeicons: \"ArrowLeft02Icon\",\n    phosphor: \"ArrowLeftIcon\",\n    remixicon: \"RiArrowLeftLine\",\n  },\n  {\n    lucide: \"ArrowRightIcon\",\n    tabler: \"IconArrowRight\",\n    hugeicons: \"ArrowRight02Icon\",\n    phosphor: \"ArrowRightIcon\",\n    remixicon: \"RiArrowRightLine\",\n  },\n  {\n    lucide: \"CheckIcon\",\n    tabler: \"IconCheck\",\n    hugeicons: \"Tick02Icon\",\n    phosphor: \"CheckIcon\",\n    remixicon: \"RiCheckLine\",\n  },\n  {\n    lucide: \"ChevronDownIcon\",\n    tabler: \"IconChevronDown\",\n    hugeicons: \"ArrowDown01Icon\",\n    phosphor: \"CaretDownIcon\",\n    remixicon: \"RiArrowDownSLine\",\n  },\n  {\n    lucide: \"ChevronRightIcon\",\n    tabler: \"IconChevronRight\",\n    hugeicons: \"ArrowRight01Icon\",\n    phosphor: \"CaretRightIcon\",\n    remixicon: \"RiArrowRightSLine\",\n  },\n] satisfies Record<IconLibraryName, string>[]\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport default function PreviewExample() {\n  const [params] = useDesignSystemSearchParams()\n\n  const currentFont = React.useMemo(\n    () => FONTS.find((font) => font.value === params.font),\n    [params.font]\n  )\n\n  const currentStyle = React.useMemo(\n    () => STYLES.find((style) => style.name === params.style),\n    [params.style]\n  )\n\n  const radiusValue = React.useMemo(() => {\n    const radius = RADII.find((r) => r.name === params.radius)\n    return radius?.value ?? \"\"\n  }, [params.radius])\n\n  return (\n    <ExampleWrapper className=\"w-full max-w-none! lg:p-0\">\n      <Example\n        containerClassName=\"col-span-2 max-w-none\"\n        className=\"bg-muted dark:bg-background flex min-h-svh flex-col items-center justify-center border-none sm:p-16\"\n      >\n        <div\n          data-slot=\"capture-target\"\n          className=\"grid max-w-4xl gap-6 p-6 lg:grid-cols-2\"\n          style={\n            {\n              \"--radius\": radiusValue,\n            } as React.CSSProperties\n          }\n        >\n          <div className=\"flex flex-col gap-6\">\n            <Card>\n              <CardContent className=\"flex flex-col gap-6\">\n                <div className=\"flex flex-col gap-1\">\n                  <div className=\"text-2xl font-medium\">\n                    {currentStyle?.title} - {currentFont?.name}\n                  </div>\n                  <div className=\"text-muted-foreground text-base\">\n                    Designers love packing quirky glyphs into test phrases. This\n                    is a preview of the typography styles.\n                  </div>\n                </div>\n                <div className=\"grid grid-cols-6 gap-3.5\">\n                  {[\n                    \"Background\",\n                    \"Primary\",\n                    \"Secondary\",\n                    \"Muted\",\n                    \"Accent\",\n                    \"Destructive\",\n                  ].map((variant) => (\n                    <div\n                      key={variant}\n                      className=\"flex flex-col flex-wrap items-center gap-2\"\n                    >\n                      <Card\n                        className=\"ring-border aspect-square w-full bg-(--color) ring\"\n                        style={\n                          {\n                            \"--color\": `var(--${variant.toLowerCase()})`,\n                          } as React.CSSProperties\n                        }\n                      />\n                      <div className=\"hidden max-w-14 truncate text-[0.60rem] md:block\">\n                        {variant}\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"hidden flex-1 md:flex\">\n              <CardContent className=\"flex-1\">\n                <ChartContainer\n                  config={barChartConfig}\n                  className=\"aspect-auto h-full w-auto\"\n                >\n                  <BarChart accessibilityLayer data={barChartData}>\n                    <CartesianGrid vertical={false} />\n                    <XAxis\n                      dataKey=\"month\"\n                      tickLine={false}\n                      tickMargin={10}\n                      axisLine={false}\n                      tickFormatter={(value) => value.slice(0, 3)}\n                    />\n                    <ChartTooltip\n                      cursor={false}\n                      content={<ChartTooltipContent indicator=\"dashed\" />}\n                    />\n                    <Bar\n                      dataKey=\"desktop\"\n                      fill=\"var(--color-desktop)\"\n                      radius={4}\n                    />\n                    <Bar\n                      dataKey=\"mobile\"\n                      fill=\"var(--color-mobile)\"\n                      radius={4}\n                    />\n                  </BarChart>\n                </ChartContainer>\n              </CardContent>\n            </Card>\n          </div>\n          <div className=\"flex flex-col gap-6\">\n            <Card className=\"hidden md:flex\">\n              <CardContent>\n                <div className=\"grid grid-cols-4 place-items-center gap-6 md:grid-cols-7\">\n                  {PREVIEW_ICONS.map((icon, index) => (\n                    <Card\n                      key={index}\n                      className=\"ring-border flex size-8 items-center justify-center rounded-md p-0 ring *:[svg]:size-4\"\n                    >\n                      <IconPlaceholder\n                        lucide={icon.lucide}\n                        tabler={icon.tabler}\n                        hugeicons={icon.hugeicons}\n                        phosphor={icon.phosphor}\n                        remixicon={icon.remixicon}\n                      />\n                    </Card>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"flex-1\">\n              <CardContent className=\"flex flex-col gap-6\">\n                <div className=\"flex flex-col gap-4\">\n                  <div className=\"flex flex-wrap gap-2\">\n                    <Button>Default</Button>\n                    <Button variant=\"secondary\">Secondary</Button>\n                    <Button variant=\"outline\">Outline</Button>\n                    <Button variant=\"destructive\">Destructive</Button>\n                  </div>\n                  <Item variant=\"outline\">\n                    <ItemContent>\n                      <ItemTitle>Two-factor authentication</ItemTitle>\n                      <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                        Verify via email or phone number.\n                      </ItemDescription>\n                    </ItemContent>\n                    <ItemActions className=\"hidden md:flex\">\n                      <Button size=\"sm\" variant=\"secondary\">\n                        Enable\n                      </Button>\n                    </ItemActions>\n                  </Item>\n                  <div className=\"flex flex-wrap items-center gap-1.5\">\n                    <Badge>Badge</Badge>\n                    <Badge variant=\"secondary\">Secondary</Badge>\n                    <Badge variant=\"outline\">Outline</Badge>\n                    <div className=\"mt-2 flex gap-3 md:mt-0 md:ml-auto\">\n                      <Switch defaultChecked />\n                      <RadioGroup\n                        defaultValue=\"apple\"\n                        className=\"flex flex-row gap-3\"\n                      >\n                        <RadioGroupItem value=\"apple\" />\n                        <RadioGroupItem value=\"banana\" />\n                      </RadioGroup>\n                      <div className=\"flex flex-row gap-3\">\n                        <Checkbox defaultChecked />\n                        <Checkbox />\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <Field className=\"flex-row\">\n                  <Input placeholder=\"Name\" />\n                </Field>\n                <Field className=\"flex-row\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n                <Slider\n                  value={[500]}\n                  max={1000}\n                  min={0}\n                  step={10}\n                  className=\"mt-2 w-full\"\n                  aria-label=\"Slider\"\n                />\n                <div className=\"flex gap-2 md:gap-4\">\n                  <AlertDialog>\n                    <AlertDialogTrigger asChild>\n                      <Button variant=\"outline\">\n                        <span className=\"hidden md:block\">Alert Dialog</span>\n                        <span className=\"block md:hidden\">Dialog</span>\n                      </Button>\n                    </AlertDialogTrigger>\n                    <AlertDialogContent size=\"sm\">\n                      <AlertDialogHeader>\n                        <AlertDialogMedia>\n                          <IconPlaceholder\n                            lucide=\"BluetoothIcon\"\n                            tabler=\"IconBluetooth\"\n                            hugeicons=\"BluetoothIcon\"\n                            phosphor=\"BluetoothIcon\"\n                            remixicon=\"RiBluetoothLine\"\n                          />\n                        </AlertDialogMedia>\n                        <AlertDialogTitle>\n                          Allow accessory to connect?\n                        </AlertDialogTitle>\n                        <AlertDialogDescription>\n                          Do you want to allow the USB accessory to connect to\n                          this device?\n                        </AlertDialogDescription>\n                      </AlertDialogHeader>\n                      <AlertDialogFooter>\n                        <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                        <AlertDialogAction>Allow</AlertDialogAction>\n                      </AlertDialogFooter>\n                    </AlertDialogContent>\n                  </AlertDialog>\n                  <ButtonGroup>\n                    <Button variant=\"outline\">Button Group</Button>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger asChild>\n                        <Button variant=\"outline\" size=\"icon\">\n                          <IconPlaceholder\n                            lucide=\"ChevronUpIcon\"\n                            tabler=\"IconChevronUp\"\n                            hugeicons=\"ArrowUp01Icon\"\n                            phosphor=\"CaretUpIcon\"\n                            remixicon=\"RiArrowUpSLine\"\n                          />\n                        </Button>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"end\" className=\"w-52\">\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"VolumeX\"\n                              tabler=\"IconVolume\"\n                              hugeicons=\"VolumeOffIcon\"\n                              phosphor=\"SpeakerSlashIcon\"\n                              remixicon=\"RiVolumeMuteLine\"\n                            />\n                            Mute Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckboxCircleLine\"\n                            />\n                            Mark as Read\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"UserRoundXIcon\"\n                              tabler=\"IconUserX\"\n                              hugeicons=\"UserRemove01Icon\"\n                              phosphor=\"UserMinusIcon\"\n                              remixicon=\"RiUserMinusLine\"\n                            />\n                            Block User\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShareIcon\"\n                              tabler=\"IconShare\"\n                              hugeicons=\"Share03Icon\"\n                              phosphor=\"ShareIcon\"\n                              remixicon=\"RiShareLine\"\n                            />\n                            Share Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                            Copy Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"AlertTriangleIcon\"\n                              tabler=\"IconAlertTriangle\"\n                              hugeicons=\"AlertCircleIcon\"\n                              phosphor=\"WarningIcon\"\n                              remixicon=\"RiErrorWarningLine\"\n                            />\n                            Report Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem variant=\"destructive\">\n                            <IconPlaceholder\n                              lucide=\"TrashIcon\"\n                              tabler=\"IconTrash\"\n                              hugeicons=\"Delete02Icon\"\n                              phosphor=\"TrashIcon\"\n                              remixicon=\"RiDeleteBinLine\"\n                            />\n                            Delete Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </ButtonGroup>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </Example>\n    </ExampleWrapper>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\nimport { type IconLibraryName } from \"shadcn/icons\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-lyra/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-lyra/ui/badge\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-lyra/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/radix-lyra/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-lyra/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-lyra/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport { Field } from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-lyra/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-lyra/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-lyra/ui/slider\"\nimport { Switch } from \"@/registry/radix-lyra/ui/switch\"\nimport { Textarea } from \"@/registry/radix-lyra/ui/textarea\"\nimport { RADII } from \"@/registry/config\"\nimport { STYLES } from \"@/registry/styles\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { FONTS } from \"@/app/(create)/lib/fonts\"\nimport { useDesignSystemSearchParams } from \"@/app/(create)/lib/search-params\"\n\nconst PREVIEW_ICONS = [\n  {\n    lucide: \"CopyIcon\",\n    tabler: \"IconCopy\",\n    hugeicons: \"Copy01Icon\",\n    phosphor: \"CopyIcon\",\n    remixicon: \"RiFileCopyLine\",\n  },\n  {\n    lucide: \"CircleAlertIcon\",\n    tabler: \"IconExclamationCircle\",\n    hugeicons: \"AlertCircleIcon\",\n    phosphor: \"WarningCircleIcon\",\n    remixicon: \"RiErrorWarningLine\",\n  },\n  {\n    lucide: \"TrashIcon\",\n    tabler: \"IconTrash\",\n    hugeicons: \"Delete02Icon\",\n    phosphor: \"TrashIcon\",\n    remixicon: \"RiDeleteBinLine\",\n  },\n  {\n    lucide: \"ShareIcon\",\n    tabler: \"IconShare\",\n    hugeicons: \"Share03Icon\",\n    phosphor: \"ShareIcon\",\n    remixicon: \"RiShareLine\",\n  },\n  {\n    lucide: \"ShoppingBagIcon\",\n    tabler: \"IconShoppingBag\",\n    hugeicons: \"ShoppingBag01Icon\",\n    phosphor: \"BagIcon\",\n    remixicon: \"RiShoppingBagLine\",\n  },\n  {\n    lucide: \"MoreHorizontalIcon\",\n    tabler: \"IconDots\",\n    hugeicons: \"MoreHorizontalCircle01Icon\",\n    phosphor: \"DotsThreeIcon\",\n    remixicon: \"RiMoreLine\",\n  },\n  {\n    lucide: \"Loader2Icon\",\n    tabler: \"IconLoader\",\n    hugeicons: \"Loading03Icon\",\n    phosphor: \"SpinnerIcon\",\n    remixicon: \"RiLoaderLine\",\n  },\n  {\n    lucide: \"PlusIcon\",\n    tabler: \"IconPlus\",\n    hugeicons: \"PlusSignIcon\",\n    phosphor: \"PlusIcon\",\n    remixicon: \"RiAddLine\",\n  },\n  {\n    lucide: \"MinusIcon\",\n    tabler: \"IconMinus\",\n    hugeicons: \"MinusSignIcon\",\n    phosphor: \"MinusIcon\",\n    remixicon: \"RiSubtractLine\",\n  },\n  {\n    lucide: \"ArrowLeftIcon\",\n    tabler: \"IconArrowLeft\",\n    hugeicons: \"ArrowLeft02Icon\",\n    phosphor: \"ArrowLeftIcon\",\n    remixicon: \"RiArrowLeftLine\",\n  },\n  {\n    lucide: \"ArrowRightIcon\",\n    tabler: \"IconArrowRight\",\n    hugeicons: \"ArrowRight02Icon\",\n    phosphor: \"ArrowRightIcon\",\n    remixicon: \"RiArrowRightLine\",\n  },\n  {\n    lucide: \"CheckIcon\",\n    tabler: \"IconCheck\",\n    hugeicons: \"Tick02Icon\",\n    phosphor: \"CheckIcon\",\n    remixicon: \"RiCheckLine\",\n  },\n  {\n    lucide: \"ChevronDownIcon\",\n    tabler: \"IconChevronDown\",\n    hugeicons: \"ArrowDown01Icon\",\n    phosphor: \"CaretDownIcon\",\n    remixicon: \"RiArrowDownSLine\",\n  },\n  {\n    lucide: \"ChevronRightIcon\",\n    tabler: \"IconChevronRight\",\n    hugeicons: \"ArrowRight01Icon\",\n    phosphor: \"CaretRightIcon\",\n    remixicon: \"RiArrowRightSLine\",\n  },\n] satisfies Record<IconLibraryName, string>[]\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport default function PreviewExample() {\n  const [params] = useDesignSystemSearchParams()\n\n  const currentFont = React.useMemo(\n    () => FONTS.find((font) => font.value === params.font),\n    [params.font]\n  )\n\n  const currentStyle = React.useMemo(\n    () => STYLES.find((style) => style.name === params.style),\n    [params.style]\n  )\n\n  const radiusValue = React.useMemo(() => {\n    const radius = RADII.find((r) => r.name === params.radius)\n    return radius?.value ?? \"\"\n  }, [params.radius])\n\n  return (\n    <div>\n      <Example\n        containerClassName=\"col-span-2 max-w-none\"\n        className=\"bg-muted dark:bg-background flex min-h-svh flex-col items-center justify-center border-none p-0 sm:p-0\"\n      >\n        <div\n          data-slot=\"capture-target\"\n          className=\"grid max-w-4xl gap-6 p-12 lg:grid-cols-2\"\n          style={\n            {\n              \"--radius\": radiusValue,\n            } as React.CSSProperties\n          }\n        >\n          <div className=\"flex flex-col gap-6\">\n            <Card>\n              <CardContent className=\"flex flex-col gap-6\">\n                <div className=\"flex flex-col gap-1\">\n                  <div className=\"text-2xl font-medium\">\n                    {currentStyle?.title} - {currentFont?.name}\n                  </div>\n                  <div className=\"text-muted-foreground text-base\">\n                    Designers love packing quirky glyphs into test phrases. This\n                    is a preview of the typography styles.\n                  </div>\n                </div>\n                <div className=\"grid grid-cols-6 gap-3.5\">\n                  {[\n                    \"Background\",\n                    \"Primary\",\n                    \"Secondary\",\n                    \"Muted\",\n                    \"Accent\",\n                    \"Destructive\",\n                  ].map((variant) => (\n                    <div\n                      key={variant}\n                      className=\"flex flex-col flex-wrap items-center gap-2\"\n                    >\n                      <Item\n                        className=\"ring-border aspect-square w-full bg-(--color) ring\"\n                        style={\n                          {\n                            \"--color\": `var(--${variant.toLowerCase()})`,\n                          } as React.CSSProperties\n                        }\n                      />\n                      <div className=\"hidden max-w-14 truncate text-[0.60rem] md:block\">\n                        {variant}\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"hidden flex-1 md:flex\">\n              <CardContent className=\"flex-1\">\n                <ChartContainer\n                  config={barChartConfig}\n                  className=\"aspect-auto h-full w-auto\"\n                >\n                  <BarChart accessibilityLayer data={barChartData}>\n                    <CartesianGrid vertical={false} />\n                    <XAxis\n                      dataKey=\"month\"\n                      tickLine={false}\n                      tickMargin={10}\n                      axisLine={false}\n                      tickFormatter={(value) => value.slice(0, 3)}\n                    />\n                    <ChartTooltip\n                      cursor={false}\n                      content={<ChartTooltipContent indicator=\"dashed\" />}\n                    />\n                    <Bar\n                      dataKey=\"desktop\"\n                      fill=\"var(--color-desktop)\"\n                      radius={4}\n                    />\n                    <Bar\n                      dataKey=\"mobile\"\n                      fill=\"var(--color-mobile)\"\n                      radius={4}\n                    />\n                  </BarChart>\n                </ChartContainer>\n              </CardContent>\n            </Card>\n          </div>\n          <div className=\"flex flex-col gap-6\">\n            <Card className=\"hidden md:flex\">\n              <CardContent>\n                <div className=\"grid grid-cols-4 place-items-center gap-6 md:grid-cols-7\">\n                  {PREVIEW_ICONS.map((icon, index) => (\n                    <Card\n                      key={index}\n                      className=\"ring-border flex size-8 items-center justify-center rounded-md p-0 ring *:[svg]:size-4\"\n                    >\n                      <IconPlaceholder\n                        lucide={icon.lucide}\n                        tabler={icon.tabler}\n                        hugeicons={icon.hugeicons}\n                        phosphor={icon.phosphor}\n                        remixicon={icon.remixicon}\n                      />\n                    </Card>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"flex-1\">\n              <CardContent className=\"flex flex-1 flex-col gap-6\">\n                <div className=\"flex flex-col gap-4\">\n                  <div className=\"flex flex-wrap gap-2\">\n                    <Button>Default</Button>\n                    <Button variant=\"secondary\">Secondary</Button>\n                    <Button variant=\"outline\">Outline</Button>\n                    <Button variant=\"destructive\">Destructive</Button>\n                  </div>\n                  <Item variant=\"outline\">\n                    <ItemContent>\n                      <ItemTitle>Two-factor authentication</ItemTitle>\n                      <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                        Verify via email or phone number.\n                      </ItemDescription>\n                    </ItemContent>\n                    <ItemActions className=\"hidden md:flex\">\n                      <Button size=\"sm\" variant=\"secondary\">\n                        Enable\n                      </Button>\n                    </ItemActions>\n                  </Item>\n                  <div className=\"flex flex-wrap items-center gap-1.5\">\n                    <Badge>Badge</Badge>\n                    <Badge variant=\"secondary\">Secondary</Badge>\n                    <Badge variant=\"outline\">Outline</Badge>\n                    <div className=\"mt-2 flex gap-3 md:mt-0 md:ml-auto\">\n                      <Switch defaultChecked />\n                      <RadioGroup\n                        defaultValue=\"apple\"\n                        className=\"flex flex-row gap-3\"\n                      >\n                        <RadioGroupItem value=\"apple\" />\n                        <RadioGroupItem value=\"banana\" />\n                      </RadioGroup>\n                      <div className=\"flex flex-row gap-3\">\n                        <Checkbox defaultChecked />\n                        <Checkbox />\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <Field className=\"flex-row\">\n                  <Input placeholder=\"Name\" />\n                </Field>\n                <Field className=\"flex-1 flex-row\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n                <Slider\n                  value={[500]}\n                  max={1000}\n                  min={0}\n                  step={10}\n                  className=\"mt-2 w-full\"\n                  aria-label=\"Slider\"\n                />\n                <div className=\"flex gap-2 md:gap-4\">\n                  <AlertDialog>\n                    <AlertDialogTrigger asChild>\n                      <Button variant=\"outline\">\n                        <span className=\"hidden md:block\">Alert Dialog</span>\n                        <span className=\"block md:hidden\">Dialog</span>\n                      </Button>\n                    </AlertDialogTrigger>\n                    <AlertDialogContent size=\"sm\">\n                      <AlertDialogHeader>\n                        <AlertDialogMedia>\n                          <IconPlaceholder\n                            lucide=\"BluetoothIcon\"\n                            tabler=\"IconBluetooth\"\n                            hugeicons=\"BluetoothIcon\"\n                            phosphor=\"BluetoothIcon\"\n                            remixicon=\"RiBluetoothLine\"\n                          />\n                        </AlertDialogMedia>\n                        <AlertDialogTitle>\n                          Allow accessory to connect?\n                        </AlertDialogTitle>\n                        <AlertDialogDescription>\n                          Do you want to allow the USB accessory to connect to\n                          this device?\n                        </AlertDialogDescription>\n                      </AlertDialogHeader>\n                      <AlertDialogFooter>\n                        <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                        <AlertDialogAction>Allow</AlertDialogAction>\n                      </AlertDialogFooter>\n                    </AlertDialogContent>\n                  </AlertDialog>\n                  <ButtonGroup>\n                    <Button variant=\"outline\">Button Group</Button>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger asChild>\n                        <Button variant=\"outline\" size=\"icon\">\n                          <IconPlaceholder\n                            lucide=\"ChevronUpIcon\"\n                            tabler=\"IconChevronUp\"\n                            hugeicons=\"ArrowUp01Icon\"\n                            phosphor=\"CaretUpIcon\"\n                            remixicon=\"RiArrowUpSLine\"\n                          />\n                        </Button>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"end\" className=\"w-52\">\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"VolumeX\"\n                              tabler=\"IconVolume\"\n                              hugeicons=\"VolumeOffIcon\"\n                              phosphor=\"SpeakerSlashIcon\"\n                              remixicon=\"RiVolumeMuteLine\"\n                            />\n                            Mute Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckboxCircleLine\"\n                            />\n                            Mark as Read\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"UserRoundXIcon\"\n                              tabler=\"IconUserX\"\n                              hugeicons=\"UserRemove01Icon\"\n                              phosphor=\"UserMinusIcon\"\n                              remixicon=\"RiUserMinusLine\"\n                            />\n                            Block User\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShareIcon\"\n                              tabler=\"IconShare\"\n                              hugeicons=\"Share03Icon\"\n                              phosphor=\"ShareIcon\"\n                              remixicon=\"RiShareLine\"\n                            />\n                            Share Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                            Copy Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"AlertTriangleIcon\"\n                              tabler=\"IconAlertTriangle\"\n                              hugeicons=\"AlertCircleIcon\"\n                              phosphor=\"WarningIcon\"\n                              remixicon=\"RiErrorWarningLine\"\n                            />\n                            Report Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem variant=\"destructive\">\n                            <IconPlaceholder\n                              lucide=\"TrashIcon\"\n                              tabler=\"IconTrash\"\n                              hugeicons=\"Delete02Icon\"\n                              phosphor=\"TrashIcon\"\n                              remixicon=\"RiDeleteBinLine\"\n                            />\n                            Delete Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </ButtonGroup>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </Example>\n    </div>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/preview.json b/apps/v4/public/r/styles/radix-maia/preview.json
index 703ae4d196..b253e93f3d 100644
--- a/apps/v4/public/r/styles/radix-maia/preview.json
+++ b/apps/v4/public/r/styles/radix-maia/preview.json
@@ -33,7 +33,7 @@
   "files": [
     {
       "path": "registry/radix-maia/blocks/preview.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\nimport { type IconLibraryName } from \"shadcn/icons\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-maia/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-maia/ui/badge\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-maia/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/radix-maia/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-maia/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-maia/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport { Field } from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-maia/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-maia/ui/slider\"\nimport { Switch } from \"@/registry/radix-maia/ui/switch\"\nimport { Textarea } from \"@/registry/radix-maia/ui/textarea\"\nimport { RADII } from \"@/registry/config\"\nimport { STYLES } from \"@/registry/styles\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { FONTS } from \"@/app/(create)/lib/fonts\"\nimport { useDesignSystemSearchParams } from \"@/app/(create)/lib/search-params\"\n\nconst PREVIEW_ICONS = [\n  {\n    lucide: \"CopyIcon\",\n    tabler: \"IconCopy\",\n    hugeicons: \"Copy01Icon\",\n    phosphor: \"CopyIcon\",\n    remixicon: \"RiFileCopyLine\",\n  },\n  {\n    lucide: \"CircleAlertIcon\",\n    tabler: \"IconExclamationCircle\",\n    hugeicons: \"AlertCircleIcon\",\n    phosphor: \"WarningCircleIcon\",\n    remixicon: \"RiErrorWarningLine\",\n  },\n  {\n    lucide: \"TrashIcon\",\n    tabler: \"IconTrash\",\n    hugeicons: \"Delete02Icon\",\n    phosphor: \"TrashIcon\",\n    remixicon: \"RiDeleteBinLine\",\n  },\n  {\n    lucide: \"ShareIcon\",\n    tabler: \"IconShare\",\n    hugeicons: \"Share03Icon\",\n    phosphor: \"ShareIcon\",\n    remixicon: \"RiShareLine\",\n  },\n  {\n    lucide: \"ShoppingBagIcon\",\n    tabler: \"IconShoppingBag\",\n    hugeicons: \"ShoppingBag01Icon\",\n    phosphor: \"BagIcon\",\n    remixicon: \"RiShoppingBagLine\",\n  },\n  {\n    lucide: \"MoreHorizontalIcon\",\n    tabler: \"IconDots\",\n    hugeicons: \"MoreHorizontalCircle01Icon\",\n    phosphor: \"DotsThreeIcon\",\n    remixicon: \"RiMoreLine\",\n  },\n  {\n    lucide: \"Loader2Icon\",\n    tabler: \"IconLoader\",\n    hugeicons: \"Loading03Icon\",\n    phosphor: \"SpinnerIcon\",\n    remixicon: \"RiLoaderLine\",\n  },\n  {\n    lucide: \"PlusIcon\",\n    tabler: \"IconPlus\",\n    hugeicons: \"PlusSignIcon\",\n    phosphor: \"PlusIcon\",\n    remixicon: \"RiAddLine\",\n  },\n  {\n    lucide: \"MinusIcon\",\n    tabler: \"IconMinus\",\n    hugeicons: \"MinusSignIcon\",\n    phosphor: \"MinusIcon\",\n    remixicon: \"RiSubtractLine\",\n  },\n  {\n    lucide: \"ArrowLeftIcon\",\n    tabler: \"IconArrowLeft\",\n    hugeicons: \"ArrowLeft02Icon\",\n    phosphor: \"ArrowLeftIcon\",\n    remixicon: \"RiArrowLeftLine\",\n  },\n  {\n    lucide: \"ArrowRightIcon\",\n    tabler: \"IconArrowRight\",\n    hugeicons: \"ArrowRight02Icon\",\n    phosphor: \"ArrowRightIcon\",\n    remixicon: \"RiArrowRightLine\",\n  },\n  {\n    lucide: \"CheckIcon\",\n    tabler: \"IconCheck\",\n    hugeicons: \"Tick02Icon\",\n    phosphor: \"CheckIcon\",\n    remixicon: \"RiCheckLine\",\n  },\n  {\n    lucide: \"ChevronDownIcon\",\n    tabler: \"IconChevronDown\",\n    hugeicons: \"ArrowDown01Icon\",\n    phosphor: \"CaretDownIcon\",\n    remixicon: \"RiArrowDownSLine\",\n  },\n  {\n    lucide: \"ChevronRightIcon\",\n    tabler: \"IconChevronRight\",\n    hugeicons: \"ArrowRight01Icon\",\n    phosphor: \"CaretRightIcon\",\n    remixicon: \"RiArrowRightSLine\",\n  },\n] satisfies Record<IconLibraryName, string>[]\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport default function PreviewExample() {\n  const [params] = useDesignSystemSearchParams()\n\n  const currentFont = React.useMemo(\n    () => FONTS.find((font) => font.value === params.font),\n    [params.font]\n  )\n\n  const currentStyle = React.useMemo(\n    () => STYLES.find((style) => style.name === params.style),\n    [params.style]\n  )\n\n  const radiusValue = React.useMemo(() => {\n    const radius = RADII.find((r) => r.name === params.radius)\n    return radius?.value ?? \"\"\n  }, [params.radius])\n\n  return (\n    <ExampleWrapper className=\"w-full max-w-none! lg:p-0\">\n      <Example\n        containerClassName=\"col-span-2 max-w-none\"\n        className=\"bg-muted dark:bg-background flex min-h-svh flex-col items-center justify-center border-none sm:p-16\"\n      >\n        <div\n          data-slot=\"capture-target\"\n          className=\"grid max-w-4xl gap-6 p-6 lg:grid-cols-2\"\n          style={\n            {\n              \"--radius\": radiusValue,\n            } as React.CSSProperties\n          }\n        >\n          <div className=\"flex flex-col gap-6\">\n            <Card>\n              <CardContent className=\"flex flex-col gap-6\">\n                <div className=\"flex flex-col gap-1\">\n                  <div className=\"text-2xl font-medium\">\n                    {currentStyle?.title} - {currentFont?.name}\n                  </div>\n                  <div className=\"text-muted-foreground text-base\">\n                    Designers love packing quirky glyphs into test phrases. This\n                    is a preview of the typography styles.\n                  </div>\n                </div>\n                <div className=\"grid grid-cols-6 gap-3.5\">\n                  {[\n                    \"Background\",\n                    \"Primary\",\n                    \"Secondary\",\n                    \"Muted\",\n                    \"Accent\",\n                    \"Destructive\",\n                  ].map((variant) => (\n                    <div\n                      key={variant}\n                      className=\"flex flex-col flex-wrap items-center gap-2\"\n                    >\n                      <Card\n                        className=\"ring-border aspect-square w-full bg-(--color) ring\"\n                        style={\n                          {\n                            \"--color\": `var(--${variant.toLowerCase()})`,\n                          } as React.CSSProperties\n                        }\n                      />\n                      <div className=\"hidden max-w-14 truncate text-[0.60rem] md:block\">\n                        {variant}\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"hidden flex-1 md:flex\">\n              <CardContent className=\"flex-1\">\n                <ChartContainer\n                  config={barChartConfig}\n                  className=\"aspect-auto h-full w-auto\"\n                >\n                  <BarChart accessibilityLayer data={barChartData}>\n                    <CartesianGrid vertical={false} />\n                    <XAxis\n                      dataKey=\"month\"\n                      tickLine={false}\n                      tickMargin={10}\n                      axisLine={false}\n                      tickFormatter={(value) => value.slice(0, 3)}\n                    />\n                    <ChartTooltip\n                      cursor={false}\n                      content={<ChartTooltipContent indicator=\"dashed\" />}\n                    />\n                    <Bar\n                      dataKey=\"desktop\"\n                      fill=\"var(--color-desktop)\"\n                      radius={4}\n                    />\n                    <Bar\n                      dataKey=\"mobile\"\n                      fill=\"var(--color-mobile)\"\n                      radius={4}\n                    />\n                  </BarChart>\n                </ChartContainer>\n              </CardContent>\n            </Card>\n          </div>\n          <div className=\"flex flex-col gap-6\">\n            <Card className=\"hidden md:flex\">\n              <CardContent>\n                <div className=\"grid grid-cols-4 place-items-center gap-6 md:grid-cols-7\">\n                  {PREVIEW_ICONS.map((icon, index) => (\n                    <Card\n                      key={index}\n                      className=\"ring-border flex size-8 items-center justify-center rounded-md p-0 ring *:[svg]:size-4\"\n                    >\n                      <IconPlaceholder\n                        lucide={icon.lucide}\n                        tabler={icon.tabler}\n                        hugeicons={icon.hugeicons}\n                        phosphor={icon.phosphor}\n                        remixicon={icon.remixicon}\n                      />\n                    </Card>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"flex-1\">\n              <CardContent className=\"flex flex-col gap-6\">\n                <div className=\"flex flex-col gap-4\">\n                  <div className=\"flex flex-wrap gap-2\">\n                    <Button>Default</Button>\n                    <Button variant=\"secondary\">Secondary</Button>\n                    <Button variant=\"outline\">Outline</Button>\n                    <Button variant=\"destructive\">Destructive</Button>\n                  </div>\n                  <Item variant=\"outline\">\n                    <ItemContent>\n                      <ItemTitle>Two-factor authentication</ItemTitle>\n                      <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                        Verify via email or phone number.\n                      </ItemDescription>\n                    </ItemContent>\n                    <ItemActions className=\"hidden md:flex\">\n                      <Button size=\"sm\" variant=\"secondary\">\n                        Enable\n                      </Button>\n                    </ItemActions>\n                  </Item>\n                  <div className=\"flex flex-wrap items-center gap-1.5\">\n                    <Badge>Badge</Badge>\n                    <Badge variant=\"secondary\">Secondary</Badge>\n                    <Badge variant=\"outline\">Outline</Badge>\n                    <div className=\"mt-2 flex gap-3 md:mt-0 md:ml-auto\">\n                      <Switch defaultChecked />\n                      <RadioGroup\n                        defaultValue=\"apple\"\n                        className=\"flex flex-row gap-3\"\n                      >\n                        <RadioGroupItem value=\"apple\" />\n                        <RadioGroupItem value=\"banana\" />\n                      </RadioGroup>\n                      <div className=\"flex flex-row gap-3\">\n                        <Checkbox defaultChecked />\n                        <Checkbox />\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <Field className=\"flex-row\">\n                  <Input placeholder=\"Name\" />\n                </Field>\n                <Field className=\"flex-row\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n                <Slider\n                  value={[500]}\n                  max={1000}\n                  min={0}\n                  step={10}\n                  className=\"mt-2 w-full\"\n                  aria-label=\"Slider\"\n                />\n                <div className=\"flex gap-2 md:gap-4\">\n                  <AlertDialog>\n                    <AlertDialogTrigger asChild>\n                      <Button variant=\"outline\">\n                        <span className=\"hidden md:block\">Alert Dialog</span>\n                        <span className=\"block md:hidden\">Dialog</span>\n                      </Button>\n                    </AlertDialogTrigger>\n                    <AlertDialogContent size=\"sm\">\n                      <AlertDialogHeader>\n                        <AlertDialogMedia>\n                          <IconPlaceholder\n                            lucide=\"BluetoothIcon\"\n                            tabler=\"IconBluetooth\"\n                            hugeicons=\"BluetoothIcon\"\n                            phosphor=\"BluetoothIcon\"\n                            remixicon=\"RiBluetoothLine\"\n                          />\n                        </AlertDialogMedia>\n                        <AlertDialogTitle>\n                          Allow accessory to connect?\n                        </AlertDialogTitle>\n                        <AlertDialogDescription>\n                          Do you want to allow the USB accessory to connect to\n                          this device?\n                        </AlertDialogDescription>\n                      </AlertDialogHeader>\n                      <AlertDialogFooter>\n                        <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                        <AlertDialogAction>Allow</AlertDialogAction>\n                      </AlertDialogFooter>\n                    </AlertDialogContent>\n                  </AlertDialog>\n                  <ButtonGroup>\n                    <Button variant=\"outline\">Button Group</Button>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger asChild>\n                        <Button variant=\"outline\" size=\"icon\">\n                          <IconPlaceholder\n                            lucide=\"ChevronUpIcon\"\n                            tabler=\"IconChevronUp\"\n                            hugeicons=\"ArrowUp01Icon\"\n                            phosphor=\"CaretUpIcon\"\n                            remixicon=\"RiArrowUpSLine\"\n                          />\n                        </Button>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"end\" className=\"w-52\">\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"VolumeX\"\n                              tabler=\"IconVolume\"\n                              hugeicons=\"VolumeOffIcon\"\n                              phosphor=\"SpeakerSlashIcon\"\n                              remixicon=\"RiVolumeMuteLine\"\n                            />\n                            Mute Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckboxCircleLine\"\n                            />\n                            Mark as Read\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"UserRoundXIcon\"\n                              tabler=\"IconUserX\"\n                              hugeicons=\"UserRemove01Icon\"\n                              phosphor=\"UserMinusIcon\"\n                              remixicon=\"RiUserMinusLine\"\n                            />\n                            Block User\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShareIcon\"\n                              tabler=\"IconShare\"\n                              hugeicons=\"Share03Icon\"\n                              phosphor=\"ShareIcon\"\n                              remixicon=\"RiShareLine\"\n                            />\n                            Share Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                            Copy Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"AlertTriangleIcon\"\n                              tabler=\"IconAlertTriangle\"\n                              hugeicons=\"AlertCircleIcon\"\n                              phosphor=\"WarningIcon\"\n                              remixicon=\"RiErrorWarningLine\"\n                            />\n                            Report Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem variant=\"destructive\">\n                            <IconPlaceholder\n                              lucide=\"TrashIcon\"\n                              tabler=\"IconTrash\"\n                              hugeicons=\"Delete02Icon\"\n                              phosphor=\"TrashIcon\"\n                              remixicon=\"RiDeleteBinLine\"\n                            />\n                            Delete Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </ButtonGroup>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </Example>\n    </ExampleWrapper>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\nimport { type IconLibraryName } from \"shadcn/icons\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-maia/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-maia/ui/badge\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-maia/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/radix-maia/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-maia/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-maia/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport { Field } from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-maia/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-maia/ui/slider\"\nimport { Switch } from \"@/registry/radix-maia/ui/switch\"\nimport { Textarea } from \"@/registry/radix-maia/ui/textarea\"\nimport { RADII } from \"@/registry/config\"\nimport { STYLES } from \"@/registry/styles\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { FONTS } from \"@/app/(create)/lib/fonts\"\nimport { useDesignSystemSearchParams } from \"@/app/(create)/lib/search-params\"\n\nconst PREVIEW_ICONS = [\n  {\n    lucide: \"CopyIcon\",\n    tabler: \"IconCopy\",\n    hugeicons: \"Copy01Icon\",\n    phosphor: \"CopyIcon\",\n    remixicon: \"RiFileCopyLine\",\n  },\n  {\n    lucide: \"CircleAlertIcon\",\n    tabler: \"IconExclamationCircle\",\n    hugeicons: \"AlertCircleIcon\",\n    phosphor: \"WarningCircleIcon\",\n    remixicon: \"RiErrorWarningLine\",\n  },\n  {\n    lucide: \"TrashIcon\",\n    tabler: \"IconTrash\",\n    hugeicons: \"Delete02Icon\",\n    phosphor: \"TrashIcon\",\n    remixicon: \"RiDeleteBinLine\",\n  },\n  {\n    lucide: \"ShareIcon\",\n    tabler: \"IconShare\",\n    hugeicons: \"Share03Icon\",\n    phosphor: \"ShareIcon\",\n    remixicon: \"RiShareLine\",\n  },\n  {\n    lucide: \"ShoppingBagIcon\",\n    tabler: \"IconShoppingBag\",\n    hugeicons: \"ShoppingBag01Icon\",\n    phosphor: \"BagIcon\",\n    remixicon: \"RiShoppingBagLine\",\n  },\n  {\n    lucide: \"MoreHorizontalIcon\",\n    tabler: \"IconDots\",\n    hugeicons: \"MoreHorizontalCircle01Icon\",\n    phosphor: \"DotsThreeIcon\",\n    remixicon: \"RiMoreLine\",\n  },\n  {\n    lucide: \"Loader2Icon\",\n    tabler: \"IconLoader\",\n    hugeicons: \"Loading03Icon\",\n    phosphor: \"SpinnerIcon\",\n    remixicon: \"RiLoaderLine\",\n  },\n  {\n    lucide: \"PlusIcon\",\n    tabler: \"IconPlus\",\n    hugeicons: \"PlusSignIcon\",\n    phosphor: \"PlusIcon\",\n    remixicon: \"RiAddLine\",\n  },\n  {\n    lucide: \"MinusIcon\",\n    tabler: \"IconMinus\",\n    hugeicons: \"MinusSignIcon\",\n    phosphor: \"MinusIcon\",\n    remixicon: \"RiSubtractLine\",\n  },\n  {\n    lucide: \"ArrowLeftIcon\",\n    tabler: \"IconArrowLeft\",\n    hugeicons: \"ArrowLeft02Icon\",\n    phosphor: \"ArrowLeftIcon\",\n    remixicon: \"RiArrowLeftLine\",\n  },\n  {\n    lucide: \"ArrowRightIcon\",\n    tabler: \"IconArrowRight\",\n    hugeicons: \"ArrowRight02Icon\",\n    phosphor: \"ArrowRightIcon\",\n    remixicon: \"RiArrowRightLine\",\n  },\n  {\n    lucide: \"CheckIcon\",\n    tabler: \"IconCheck\",\n    hugeicons: \"Tick02Icon\",\n    phosphor: \"CheckIcon\",\n    remixicon: \"RiCheckLine\",\n  },\n  {\n    lucide: \"ChevronDownIcon\",\n    tabler: \"IconChevronDown\",\n    hugeicons: \"ArrowDown01Icon\",\n    phosphor: \"CaretDownIcon\",\n    remixicon: \"RiArrowDownSLine\",\n  },\n  {\n    lucide: \"ChevronRightIcon\",\n    tabler: \"IconChevronRight\",\n    hugeicons: \"ArrowRight01Icon\",\n    phosphor: \"CaretRightIcon\",\n    remixicon: \"RiArrowRightSLine\",\n  },\n] satisfies Record<IconLibraryName, string>[]\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport default function PreviewExample() {\n  const [params] = useDesignSystemSearchParams()\n\n  const currentFont = React.useMemo(\n    () => FONTS.find((font) => font.value === params.font),\n    [params.font]\n  )\n\n  const currentStyle = React.useMemo(\n    () => STYLES.find((style) => style.name === params.style),\n    [params.style]\n  )\n\n  const radiusValue = React.useMemo(() => {\n    const radius = RADII.find((r) => r.name === params.radius)\n    return radius?.value ?? \"\"\n  }, [params.radius])\n\n  return (\n    <div>\n      <Example\n        containerClassName=\"col-span-2 max-w-none\"\n        className=\"bg-muted dark:bg-background flex min-h-svh flex-col items-center justify-center border-none p-0 sm:p-0\"\n      >\n        <div\n          data-slot=\"capture-target\"\n          className=\"grid max-w-4xl gap-6 p-12 lg:grid-cols-2\"\n          style={\n            {\n              \"--radius\": radiusValue,\n            } as React.CSSProperties\n          }\n        >\n          <div className=\"flex flex-col gap-6\">\n            <Card>\n              <CardContent className=\"flex flex-col gap-6\">\n                <div className=\"flex flex-col gap-1\">\n                  <div className=\"text-2xl font-medium\">\n                    {currentStyle?.title} - {currentFont?.name}\n                  </div>\n                  <div className=\"text-muted-foreground text-base\">\n                    Designers love packing quirky glyphs into test phrases. This\n                    is a preview of the typography styles.\n                  </div>\n                </div>\n                <div className=\"grid grid-cols-6 gap-3.5\">\n                  {[\n                    \"Background\",\n                    \"Primary\",\n                    \"Secondary\",\n                    \"Muted\",\n                    \"Accent\",\n                    \"Destructive\",\n                  ].map((variant) => (\n                    <div\n                      key={variant}\n                      className=\"flex flex-col flex-wrap items-center gap-2\"\n                    >\n                      <Item\n                        className=\"ring-border aspect-square w-full bg-(--color) ring\"\n                        style={\n                          {\n                            \"--color\": `var(--${variant.toLowerCase()})`,\n                          } as React.CSSProperties\n                        }\n                      />\n                      <div className=\"hidden max-w-14 truncate text-[0.60rem] md:block\">\n                        {variant}\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"hidden flex-1 md:flex\">\n              <CardContent className=\"flex-1\">\n                <ChartContainer\n                  config={barChartConfig}\n                  className=\"aspect-auto h-full w-auto\"\n                >\n                  <BarChart accessibilityLayer data={barChartData}>\n                    <CartesianGrid vertical={false} />\n                    <XAxis\n                      dataKey=\"month\"\n                      tickLine={false}\n                      tickMargin={10}\n                      axisLine={false}\n                      tickFormatter={(value) => value.slice(0, 3)}\n                    />\n                    <ChartTooltip\n                      cursor={false}\n                      content={<ChartTooltipContent indicator=\"dashed\" />}\n                    />\n                    <Bar\n                      dataKey=\"desktop\"\n                      fill=\"var(--color-desktop)\"\n                      radius={4}\n                    />\n                    <Bar\n                      dataKey=\"mobile\"\n                      fill=\"var(--color-mobile)\"\n                      radius={4}\n                    />\n                  </BarChart>\n                </ChartContainer>\n              </CardContent>\n            </Card>\n          </div>\n          <div className=\"flex flex-col gap-6\">\n            <Card className=\"hidden md:flex\">\n              <CardContent>\n                <div className=\"grid grid-cols-4 place-items-center gap-6 md:grid-cols-7\">\n                  {PREVIEW_ICONS.map((icon, index) => (\n                    <Card\n                      key={index}\n                      className=\"ring-border flex size-8 items-center justify-center rounded-md p-0 ring *:[svg]:size-4\"\n                    >\n                      <IconPlaceholder\n                        lucide={icon.lucide}\n                        tabler={icon.tabler}\n                        hugeicons={icon.hugeicons}\n                        phosphor={icon.phosphor}\n                        remixicon={icon.remixicon}\n                      />\n                    </Card>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"flex-1\">\n              <CardContent className=\"flex flex-1 flex-col gap-6\">\n                <div className=\"flex flex-col gap-4\">\n                  <div className=\"flex flex-wrap gap-2\">\n                    <Button>Default</Button>\n                    <Button variant=\"secondary\">Secondary</Button>\n                    <Button variant=\"outline\">Outline</Button>\n                    <Button variant=\"destructive\">Destructive</Button>\n                  </div>\n                  <Item variant=\"outline\">\n                    <ItemContent>\n                      <ItemTitle>Two-factor authentication</ItemTitle>\n                      <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                        Verify via email or phone number.\n                      </ItemDescription>\n                    </ItemContent>\n                    <ItemActions className=\"hidden md:flex\">\n                      <Button size=\"sm\" variant=\"secondary\">\n                        Enable\n                      </Button>\n                    </ItemActions>\n                  </Item>\n                  <div className=\"flex flex-wrap items-center gap-1.5\">\n                    <Badge>Badge</Badge>\n                    <Badge variant=\"secondary\">Secondary</Badge>\n                    <Badge variant=\"outline\">Outline</Badge>\n                    <div className=\"mt-2 flex gap-3 md:mt-0 md:ml-auto\">\n                      <Switch defaultChecked />\n                      <RadioGroup\n                        defaultValue=\"apple\"\n                        className=\"flex flex-row gap-3\"\n                      >\n                        <RadioGroupItem value=\"apple\" />\n                        <RadioGroupItem value=\"banana\" />\n                      </RadioGroup>\n                      <div className=\"flex flex-row gap-3\">\n                        <Checkbox defaultChecked />\n                        <Checkbox />\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <Field className=\"flex-row\">\n                  <Input placeholder=\"Name\" />\n                </Field>\n                <Field className=\"flex-1 flex-row\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n                <Slider\n                  value={[500]}\n                  max={1000}\n                  min={0}\n                  step={10}\n                  className=\"mt-2 w-full\"\n                  aria-label=\"Slider\"\n                />\n                <div className=\"flex gap-2 md:gap-4\">\n                  <AlertDialog>\n                    <AlertDialogTrigger asChild>\n                      <Button variant=\"outline\">\n                        <span className=\"hidden md:block\">Alert Dialog</span>\n                        <span className=\"block md:hidden\">Dialog</span>\n                      </Button>\n                    </AlertDialogTrigger>\n                    <AlertDialogContent size=\"sm\">\n                      <AlertDialogHeader>\n                        <AlertDialogMedia>\n                          <IconPlaceholder\n                            lucide=\"BluetoothIcon\"\n                            tabler=\"IconBluetooth\"\n                            hugeicons=\"BluetoothIcon\"\n                            phosphor=\"BluetoothIcon\"\n                            remixicon=\"RiBluetoothLine\"\n                          />\n                        </AlertDialogMedia>\n                        <AlertDialogTitle>\n                          Allow accessory to connect?\n                        </AlertDialogTitle>\n                        <AlertDialogDescription>\n                          Do you want to allow the USB accessory to connect to\n                          this device?\n                        </AlertDialogDescription>\n                      </AlertDialogHeader>\n                      <AlertDialogFooter>\n                        <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                        <AlertDialogAction>Allow</AlertDialogAction>\n                      </AlertDialogFooter>\n                    </AlertDialogContent>\n                  </AlertDialog>\n                  <ButtonGroup>\n                    <Button variant=\"outline\">Button Group</Button>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger asChild>\n                        <Button variant=\"outline\" size=\"icon\">\n                          <IconPlaceholder\n                            lucide=\"ChevronUpIcon\"\n                            tabler=\"IconChevronUp\"\n                            hugeicons=\"ArrowUp01Icon\"\n                            phosphor=\"CaretUpIcon\"\n                            remixicon=\"RiArrowUpSLine\"\n                          />\n                        </Button>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"end\" className=\"w-52\">\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"VolumeX\"\n                              tabler=\"IconVolume\"\n                              hugeicons=\"VolumeOffIcon\"\n                              phosphor=\"SpeakerSlashIcon\"\n                              remixicon=\"RiVolumeMuteLine\"\n                            />\n                            Mute Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckboxCircleLine\"\n                            />\n                            Mark as Read\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"UserRoundXIcon\"\n                              tabler=\"IconUserX\"\n                              hugeicons=\"UserRemove01Icon\"\n                              phosphor=\"UserMinusIcon\"\n                              remixicon=\"RiUserMinusLine\"\n                            />\n                            Block User\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShareIcon\"\n                              tabler=\"IconShare\"\n                              hugeicons=\"Share03Icon\"\n                              phosphor=\"ShareIcon\"\n                              remixicon=\"RiShareLine\"\n                            />\n                            Share Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                            Copy Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"AlertTriangleIcon\"\n                              tabler=\"IconAlertTriangle\"\n                              hugeicons=\"AlertCircleIcon\"\n                              phosphor=\"WarningIcon\"\n                              remixicon=\"RiErrorWarningLine\"\n                            />\n                            Report Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem variant=\"destructive\">\n                            <IconPlaceholder\n                              lucide=\"TrashIcon\"\n                              tabler=\"IconTrash\"\n                              hugeicons=\"Delete02Icon\"\n                              phosphor=\"TrashIcon\"\n                              remixicon=\"RiDeleteBinLine\"\n                            />\n                            Delete Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </ButtonGroup>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </Example>\n    </div>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/preview.json b/apps/v4/public/r/styles/radix-mira/preview.json
index be06587e0b..6ead429d22 100644
--- a/apps/v4/public/r/styles/radix-mira/preview.json
+++ b/apps/v4/public/r/styles/radix-mira/preview.json
@@ -33,7 +33,7 @@
   "files": [
     {
       "path": "registry/radix-mira/blocks/preview.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\nimport { type IconLibraryName } from \"shadcn/icons\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-mira/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-mira/ui/badge\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-mira/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/radix-mira/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-mira/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-mira/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport { Field } from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-mira/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-mira/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-mira/ui/slider\"\nimport { Switch } from \"@/registry/radix-mira/ui/switch\"\nimport { Textarea } from \"@/registry/radix-mira/ui/textarea\"\nimport { RADII } from \"@/registry/config\"\nimport { STYLES } from \"@/registry/styles\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { FONTS } from \"@/app/(create)/lib/fonts\"\nimport { useDesignSystemSearchParams } from \"@/app/(create)/lib/search-params\"\n\nconst PREVIEW_ICONS = [\n  {\n    lucide: \"CopyIcon\",\n    tabler: \"IconCopy\",\n    hugeicons: \"Copy01Icon\",\n    phosphor: \"CopyIcon\",\n    remixicon: \"RiFileCopyLine\",\n  },\n  {\n    lucide: \"CircleAlertIcon\",\n    tabler: \"IconExclamationCircle\",\n    hugeicons: \"AlertCircleIcon\",\n    phosphor: \"WarningCircleIcon\",\n    remixicon: \"RiErrorWarningLine\",\n  },\n  {\n    lucide: \"TrashIcon\",\n    tabler: \"IconTrash\",\n    hugeicons: \"Delete02Icon\",\n    phosphor: \"TrashIcon\",\n    remixicon: \"RiDeleteBinLine\",\n  },\n  {\n    lucide: \"ShareIcon\",\n    tabler: \"IconShare\",\n    hugeicons: \"Share03Icon\",\n    phosphor: \"ShareIcon\",\n    remixicon: \"RiShareLine\",\n  },\n  {\n    lucide: \"ShoppingBagIcon\",\n    tabler: \"IconShoppingBag\",\n    hugeicons: \"ShoppingBag01Icon\",\n    phosphor: \"BagIcon\",\n    remixicon: \"RiShoppingBagLine\",\n  },\n  {\n    lucide: \"MoreHorizontalIcon\",\n    tabler: \"IconDots\",\n    hugeicons: \"MoreHorizontalCircle01Icon\",\n    phosphor: \"DotsThreeIcon\",\n    remixicon: \"RiMoreLine\",\n  },\n  {\n    lucide: \"Loader2Icon\",\n    tabler: \"IconLoader\",\n    hugeicons: \"Loading03Icon\",\n    phosphor: \"SpinnerIcon\",\n    remixicon: \"RiLoaderLine\",\n  },\n  {\n    lucide: \"PlusIcon\",\n    tabler: \"IconPlus\",\n    hugeicons: \"PlusSignIcon\",\n    phosphor: \"PlusIcon\",\n    remixicon: \"RiAddLine\",\n  },\n  {\n    lucide: \"MinusIcon\",\n    tabler: \"IconMinus\",\n    hugeicons: \"MinusSignIcon\",\n    phosphor: \"MinusIcon\",\n    remixicon: \"RiSubtractLine\",\n  },\n  {\n    lucide: \"ArrowLeftIcon\",\n    tabler: \"IconArrowLeft\",\n    hugeicons: \"ArrowLeft02Icon\",\n    phosphor: \"ArrowLeftIcon\",\n    remixicon: \"RiArrowLeftLine\",\n  },\n  {\n    lucide: \"ArrowRightIcon\",\n    tabler: \"IconArrowRight\",\n    hugeicons: \"ArrowRight02Icon\",\n    phosphor: \"ArrowRightIcon\",\n    remixicon: \"RiArrowRightLine\",\n  },\n  {\n    lucide: \"CheckIcon\",\n    tabler: \"IconCheck\",\n    hugeicons: \"Tick02Icon\",\n    phosphor: \"CheckIcon\",\n    remixicon: \"RiCheckLine\",\n  },\n  {\n    lucide: \"ChevronDownIcon\",\n    tabler: \"IconChevronDown\",\n    hugeicons: \"ArrowDown01Icon\",\n    phosphor: \"CaretDownIcon\",\n    remixicon: \"RiArrowDownSLine\",\n  },\n  {\n    lucide: \"ChevronRightIcon\",\n    tabler: \"IconChevronRight\",\n    hugeicons: \"ArrowRight01Icon\",\n    phosphor: \"CaretRightIcon\",\n    remixicon: \"RiArrowRightSLine\",\n  },\n] satisfies Record<IconLibraryName, string>[]\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport default function PreviewExample() {\n  const [params] = useDesignSystemSearchParams()\n\n  const currentFont = React.useMemo(\n    () => FONTS.find((font) => font.value === params.font),\n    [params.font]\n  )\n\n  const currentStyle = React.useMemo(\n    () => STYLES.find((style) => style.name === params.style),\n    [params.style]\n  )\n\n  const radiusValue = React.useMemo(() => {\n    const radius = RADII.find((r) => r.name === params.radius)\n    return radius?.value ?? \"\"\n  }, [params.radius])\n\n  return (\n    <ExampleWrapper className=\"w-full max-w-none! lg:p-0\">\n      <Example\n        containerClassName=\"col-span-2 max-w-none\"\n        className=\"bg-muted dark:bg-background flex min-h-svh flex-col items-center justify-center border-none sm:p-16\"\n      >\n        <div\n          data-slot=\"capture-target\"\n          className=\"grid max-w-4xl gap-6 p-6 lg:grid-cols-2\"\n          style={\n            {\n              \"--radius\": radiusValue,\n            } as React.CSSProperties\n          }\n        >\n          <div className=\"flex flex-col gap-6\">\n            <Card>\n              <CardContent className=\"flex flex-col gap-6\">\n                <div className=\"flex flex-col gap-1\">\n                  <div className=\"text-2xl font-medium\">\n                    {currentStyle?.title} - {currentFont?.name}\n                  </div>\n                  <div className=\"text-muted-foreground text-base\">\n                    Designers love packing quirky glyphs into test phrases. This\n                    is a preview of the typography styles.\n                  </div>\n                </div>\n                <div className=\"grid grid-cols-6 gap-3.5\">\n                  {[\n                    \"Background\",\n                    \"Primary\",\n                    \"Secondary\",\n                    \"Muted\",\n                    \"Accent\",\n                    \"Destructive\",\n                  ].map((variant) => (\n                    <div\n                      key={variant}\n                      className=\"flex flex-col flex-wrap items-center gap-2\"\n                    >\n                      <Card\n                        className=\"ring-border aspect-square w-full bg-(--color) ring\"\n                        style={\n                          {\n                            \"--color\": `var(--${variant.toLowerCase()})`,\n                          } as React.CSSProperties\n                        }\n                      />\n                      <div className=\"hidden max-w-14 truncate text-[0.60rem] md:block\">\n                        {variant}\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"hidden flex-1 md:flex\">\n              <CardContent className=\"flex-1\">\n                <ChartContainer\n                  config={barChartConfig}\n                  className=\"aspect-auto h-full w-auto\"\n                >\n                  <BarChart accessibilityLayer data={barChartData}>\n                    <CartesianGrid vertical={false} />\n                    <XAxis\n                      dataKey=\"month\"\n                      tickLine={false}\n                      tickMargin={10}\n                      axisLine={false}\n                      tickFormatter={(value) => value.slice(0, 3)}\n                    />\n                    <ChartTooltip\n                      cursor={false}\n                      content={<ChartTooltipContent indicator=\"dashed\" />}\n                    />\n                    <Bar\n                      dataKey=\"desktop\"\n                      fill=\"var(--color-desktop)\"\n                      radius={4}\n                    />\n                    <Bar\n                      dataKey=\"mobile\"\n                      fill=\"var(--color-mobile)\"\n                      radius={4}\n                    />\n                  </BarChart>\n                </ChartContainer>\n              </CardContent>\n            </Card>\n          </div>\n          <div className=\"flex flex-col gap-6\">\n            <Card className=\"hidden md:flex\">\n              <CardContent>\n                <div className=\"grid grid-cols-4 place-items-center gap-6 md:grid-cols-7\">\n                  {PREVIEW_ICONS.map((icon, index) => (\n                    <Card\n                      key={index}\n                      className=\"ring-border flex size-8 items-center justify-center rounded-md p-0 ring *:[svg]:size-4\"\n                    >\n                      <IconPlaceholder\n                        lucide={icon.lucide}\n                        tabler={icon.tabler}\n                        hugeicons={icon.hugeicons}\n                        phosphor={icon.phosphor}\n                        remixicon={icon.remixicon}\n                      />\n                    </Card>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"flex-1\">\n              <CardContent className=\"flex flex-col gap-6\">\n                <div className=\"flex flex-col gap-4\">\n                  <div className=\"flex flex-wrap gap-2\">\n                    <Button>Default</Button>\n                    <Button variant=\"secondary\">Secondary</Button>\n                    <Button variant=\"outline\">Outline</Button>\n                    <Button variant=\"destructive\">Destructive</Button>\n                  </div>\n                  <Item variant=\"outline\">\n                    <ItemContent>\n                      <ItemTitle>Two-factor authentication</ItemTitle>\n                      <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                        Verify via email or phone number.\n                      </ItemDescription>\n                    </ItemContent>\n                    <ItemActions className=\"hidden md:flex\">\n                      <Button size=\"sm\" variant=\"secondary\">\n                        Enable\n                      </Button>\n                    </ItemActions>\n                  </Item>\n                  <div className=\"flex flex-wrap items-center gap-1.5\">\n                    <Badge>Badge</Badge>\n                    <Badge variant=\"secondary\">Secondary</Badge>\n                    <Badge variant=\"outline\">Outline</Badge>\n                    <div className=\"mt-2 flex gap-3 md:mt-0 md:ml-auto\">\n                      <Switch defaultChecked />\n                      <RadioGroup\n                        defaultValue=\"apple\"\n                        className=\"flex flex-row gap-3\"\n                      >\n                        <RadioGroupItem value=\"apple\" />\n                        <RadioGroupItem value=\"banana\" />\n                      </RadioGroup>\n                      <div className=\"flex flex-row gap-3\">\n                        <Checkbox defaultChecked />\n                        <Checkbox />\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <Field className=\"flex-row\">\n                  <Input placeholder=\"Name\" />\n                </Field>\n                <Field className=\"flex-row\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n                <Slider\n                  value={[500]}\n                  max={1000}\n                  min={0}\n                  step={10}\n                  className=\"mt-2 w-full\"\n                  aria-label=\"Slider\"\n                />\n                <div className=\"flex gap-2 md:gap-4\">\n                  <AlertDialog>\n                    <AlertDialogTrigger asChild>\n                      <Button variant=\"outline\">\n                        <span className=\"hidden md:block\">Alert Dialog</span>\n                        <span className=\"block md:hidden\">Dialog</span>\n                      </Button>\n                    </AlertDialogTrigger>\n                    <AlertDialogContent size=\"sm\">\n                      <AlertDialogHeader>\n                        <AlertDialogMedia>\n                          <IconPlaceholder\n                            lucide=\"BluetoothIcon\"\n                            tabler=\"IconBluetooth\"\n                            hugeicons=\"BluetoothIcon\"\n                            phosphor=\"BluetoothIcon\"\n                            remixicon=\"RiBluetoothLine\"\n                          />\n                        </AlertDialogMedia>\n                        <AlertDialogTitle>\n                          Allow accessory to connect?\n                        </AlertDialogTitle>\n                        <AlertDialogDescription>\n                          Do you want to allow the USB accessory to connect to\n                          this device?\n                        </AlertDialogDescription>\n                      </AlertDialogHeader>\n                      <AlertDialogFooter>\n                        <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                        <AlertDialogAction>Allow</AlertDialogAction>\n                      </AlertDialogFooter>\n                    </AlertDialogContent>\n                  </AlertDialog>\n                  <ButtonGroup>\n                    <Button variant=\"outline\">Button Group</Button>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger asChild>\n                        <Button variant=\"outline\" size=\"icon\">\n                          <IconPlaceholder\n                            lucide=\"ChevronUpIcon\"\n                            tabler=\"IconChevronUp\"\n                            hugeicons=\"ArrowUp01Icon\"\n                            phosphor=\"CaretUpIcon\"\n                            remixicon=\"RiArrowUpSLine\"\n                          />\n                        </Button>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"end\" className=\"w-52\">\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"VolumeX\"\n                              tabler=\"IconVolume\"\n                              hugeicons=\"VolumeOffIcon\"\n                              phosphor=\"SpeakerSlashIcon\"\n                              remixicon=\"RiVolumeMuteLine\"\n                            />\n                            Mute Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckboxCircleLine\"\n                            />\n                            Mark as Read\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"UserRoundXIcon\"\n                              tabler=\"IconUserX\"\n                              hugeicons=\"UserRemove01Icon\"\n                              phosphor=\"UserMinusIcon\"\n                              remixicon=\"RiUserMinusLine\"\n                            />\n                            Block User\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShareIcon\"\n                              tabler=\"IconShare\"\n                              hugeicons=\"Share03Icon\"\n                              phosphor=\"ShareIcon\"\n                              remixicon=\"RiShareLine\"\n                            />\n                            Share Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                            Copy Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"AlertTriangleIcon\"\n                              tabler=\"IconAlertTriangle\"\n                              hugeicons=\"AlertCircleIcon\"\n                              phosphor=\"WarningIcon\"\n                              remixicon=\"RiErrorWarningLine\"\n                            />\n                            Report Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem variant=\"destructive\">\n                            <IconPlaceholder\n                              lucide=\"TrashIcon\"\n                              tabler=\"IconTrash\"\n                              hugeicons=\"Delete02Icon\"\n                              phosphor=\"TrashIcon\"\n                              remixicon=\"RiDeleteBinLine\"\n                            />\n                            Delete Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </ButtonGroup>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </Example>\n    </ExampleWrapper>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\nimport { type IconLibraryName } from \"shadcn/icons\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-mira/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-mira/ui/badge\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-mira/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/radix-mira/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-mira/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-mira/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport { Field } from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-mira/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-mira/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-mira/ui/slider\"\nimport { Switch } from \"@/registry/radix-mira/ui/switch\"\nimport { Textarea } from \"@/registry/radix-mira/ui/textarea\"\nimport { RADII } from \"@/registry/config\"\nimport { STYLES } from \"@/registry/styles\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { FONTS } from \"@/app/(create)/lib/fonts\"\nimport { useDesignSystemSearchParams } from \"@/app/(create)/lib/search-params\"\n\nconst PREVIEW_ICONS = [\n  {\n    lucide: \"CopyIcon\",\n    tabler: \"IconCopy\",\n    hugeicons: \"Copy01Icon\",\n    phosphor: \"CopyIcon\",\n    remixicon: \"RiFileCopyLine\",\n  },\n  {\n    lucide: \"CircleAlertIcon\",\n    tabler: \"IconExclamationCircle\",\n    hugeicons: \"AlertCircleIcon\",\n    phosphor: \"WarningCircleIcon\",\n    remixicon: \"RiErrorWarningLine\",\n  },\n  {\n    lucide: \"TrashIcon\",\n    tabler: \"IconTrash\",\n    hugeicons: \"Delete02Icon\",\n    phosphor: \"TrashIcon\",\n    remixicon: \"RiDeleteBinLine\",\n  },\n  {\n    lucide: \"ShareIcon\",\n    tabler: \"IconShare\",\n    hugeicons: \"Share03Icon\",\n    phosphor: \"ShareIcon\",\n    remixicon: \"RiShareLine\",\n  },\n  {\n    lucide: \"ShoppingBagIcon\",\n    tabler: \"IconShoppingBag\",\n    hugeicons: \"ShoppingBag01Icon\",\n    phosphor: \"BagIcon\",\n    remixicon: \"RiShoppingBagLine\",\n  },\n  {\n    lucide: \"MoreHorizontalIcon\",\n    tabler: \"IconDots\",\n    hugeicons: \"MoreHorizontalCircle01Icon\",\n    phosphor: \"DotsThreeIcon\",\n    remixicon: \"RiMoreLine\",\n  },\n  {\n    lucide: \"Loader2Icon\",\n    tabler: \"IconLoader\",\n    hugeicons: \"Loading03Icon\",\n    phosphor: \"SpinnerIcon\",\n    remixicon: \"RiLoaderLine\",\n  },\n  {\n    lucide: \"PlusIcon\",\n    tabler: \"IconPlus\",\n    hugeicons: \"PlusSignIcon\",\n    phosphor: \"PlusIcon\",\n    remixicon: \"RiAddLine\",\n  },\n  {\n    lucide: \"MinusIcon\",\n    tabler: \"IconMinus\",\n    hugeicons: \"MinusSignIcon\",\n    phosphor: \"MinusIcon\",\n    remixicon: \"RiSubtractLine\",\n  },\n  {\n    lucide: \"ArrowLeftIcon\",\n    tabler: \"IconArrowLeft\",\n    hugeicons: \"ArrowLeft02Icon\",\n    phosphor: \"ArrowLeftIcon\",\n    remixicon: \"RiArrowLeftLine\",\n  },\n  {\n    lucide: \"ArrowRightIcon\",\n    tabler: \"IconArrowRight\",\n    hugeicons: \"ArrowRight02Icon\",\n    phosphor: \"ArrowRightIcon\",\n    remixicon: \"RiArrowRightLine\",\n  },\n  {\n    lucide: \"CheckIcon\",\n    tabler: \"IconCheck\",\n    hugeicons: \"Tick02Icon\",\n    phosphor: \"CheckIcon\",\n    remixicon: \"RiCheckLine\",\n  },\n  {\n    lucide: \"ChevronDownIcon\",\n    tabler: \"IconChevronDown\",\n    hugeicons: \"ArrowDown01Icon\",\n    phosphor: \"CaretDownIcon\",\n    remixicon: \"RiArrowDownSLine\",\n  },\n  {\n    lucide: \"ChevronRightIcon\",\n    tabler: \"IconChevronRight\",\n    hugeicons: \"ArrowRight01Icon\",\n    phosphor: \"CaretRightIcon\",\n    remixicon: \"RiArrowRightSLine\",\n  },\n] satisfies Record<IconLibraryName, string>[]\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport default function PreviewExample() {\n  const [params] = useDesignSystemSearchParams()\n\n  const currentFont = React.useMemo(\n    () => FONTS.find((font) => font.value === params.font),\n    [params.font]\n  )\n\n  const currentStyle = React.useMemo(\n    () => STYLES.find((style) => style.name === params.style),\n    [params.style]\n  )\n\n  const radiusValue = React.useMemo(() => {\n    const radius = RADII.find((r) => r.name === params.radius)\n    return radius?.value ?? \"\"\n  }, [params.radius])\n\n  return (\n    <div>\n      <Example\n        containerClassName=\"col-span-2 max-w-none\"\n        className=\"bg-muted dark:bg-background flex min-h-svh flex-col items-center justify-center border-none p-0 sm:p-0\"\n      >\n        <div\n          data-slot=\"capture-target\"\n          className=\"grid max-w-4xl gap-6 p-12 lg:grid-cols-2\"\n          style={\n            {\n              \"--radius\": radiusValue,\n            } as React.CSSProperties\n          }\n        >\n          <div className=\"flex flex-col gap-6\">\n            <Card>\n              <CardContent className=\"flex flex-col gap-6\">\n                <div className=\"flex flex-col gap-1\">\n                  <div className=\"text-2xl font-medium\">\n                    {currentStyle?.title} - {currentFont?.name}\n                  </div>\n                  <div className=\"text-muted-foreground text-base\">\n                    Designers love packing quirky glyphs into test phrases. This\n                    is a preview of the typography styles.\n                  </div>\n                </div>\n                <div className=\"grid grid-cols-6 gap-3.5\">\n                  {[\n                    \"Background\",\n                    \"Primary\",\n                    \"Secondary\",\n                    \"Muted\",\n                    \"Accent\",\n                    \"Destructive\",\n                  ].map((variant) => (\n                    <div\n                      key={variant}\n                      className=\"flex flex-col flex-wrap items-center gap-2\"\n                    >\n                      <Item\n                        className=\"ring-border aspect-square w-full bg-(--color) ring\"\n                        style={\n                          {\n                            \"--color\": `var(--${variant.toLowerCase()})`,\n                          } as React.CSSProperties\n                        }\n                      />\n                      <div className=\"hidden max-w-14 truncate text-[0.60rem] md:block\">\n                        {variant}\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"hidden flex-1 md:flex\">\n              <CardContent className=\"flex-1\">\n                <ChartContainer\n                  config={barChartConfig}\n                  className=\"aspect-auto h-full w-auto\"\n                >\n                  <BarChart accessibilityLayer data={barChartData}>\n                    <CartesianGrid vertical={false} />\n                    <XAxis\n                      dataKey=\"month\"\n                      tickLine={false}\n                      tickMargin={10}\n                      axisLine={false}\n                      tickFormatter={(value) => value.slice(0, 3)}\n                    />\n                    <ChartTooltip\n                      cursor={false}\n                      content={<ChartTooltipContent indicator=\"dashed\" />}\n                    />\n                    <Bar\n                      dataKey=\"desktop\"\n                      fill=\"var(--color-desktop)\"\n                      radius={4}\n                    />\n                    <Bar\n                      dataKey=\"mobile\"\n                      fill=\"var(--color-mobile)\"\n                      radius={4}\n                    />\n                  </BarChart>\n                </ChartContainer>\n              </CardContent>\n            </Card>\n          </div>\n          <div className=\"flex flex-col gap-6\">\n            <Card className=\"hidden md:flex\">\n              <CardContent>\n                <div className=\"grid grid-cols-4 place-items-center gap-6 md:grid-cols-7\">\n                  {PREVIEW_ICONS.map((icon, index) => (\n                    <Card\n                      key={index}\n                      className=\"ring-border flex size-8 items-center justify-center rounded-md p-0 ring *:[svg]:size-4\"\n                    >\n                      <IconPlaceholder\n                        lucide={icon.lucide}\n                        tabler={icon.tabler}\n                        hugeicons={icon.hugeicons}\n                        phosphor={icon.phosphor}\n                        remixicon={icon.remixicon}\n                      />\n                    </Card>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"flex-1\">\n              <CardContent className=\"flex flex-1 flex-col gap-6\">\n                <div className=\"flex flex-col gap-4\">\n                  <div className=\"flex flex-wrap gap-2\">\n                    <Button>Default</Button>\n                    <Button variant=\"secondary\">Secondary</Button>\n                    <Button variant=\"outline\">Outline</Button>\n                    <Button variant=\"destructive\">Destructive</Button>\n                  </div>\n                  <Item variant=\"outline\">\n                    <ItemContent>\n                      <ItemTitle>Two-factor authentication</ItemTitle>\n                      <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                        Verify via email or phone number.\n                      </ItemDescription>\n                    </ItemContent>\n                    <ItemActions className=\"hidden md:flex\">\n                      <Button size=\"sm\" variant=\"secondary\">\n                        Enable\n                      </Button>\n                    </ItemActions>\n                  </Item>\n                  <div className=\"flex flex-wrap items-center gap-1.5\">\n                    <Badge>Badge</Badge>\n                    <Badge variant=\"secondary\">Secondary</Badge>\n                    <Badge variant=\"outline\">Outline</Badge>\n                    <div className=\"mt-2 flex gap-3 md:mt-0 md:ml-auto\">\n                      <Switch defaultChecked />\n                      <RadioGroup\n                        defaultValue=\"apple\"\n                        className=\"flex flex-row gap-3\"\n                      >\n                        <RadioGroupItem value=\"apple\" />\n                        <RadioGroupItem value=\"banana\" />\n                      </RadioGroup>\n                      <div className=\"flex flex-row gap-3\">\n                        <Checkbox defaultChecked />\n                        <Checkbox />\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <Field className=\"flex-row\">\n                  <Input placeholder=\"Name\" />\n                </Field>\n                <Field className=\"flex-1 flex-row\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n                <Slider\n                  value={[500]}\n                  max={1000}\n                  min={0}\n                  step={10}\n                  className=\"mt-2 w-full\"\n                  aria-label=\"Slider\"\n                />\n                <div className=\"flex gap-2 md:gap-4\">\n                  <AlertDialog>\n                    <AlertDialogTrigger asChild>\n                      <Button variant=\"outline\">\n                        <span className=\"hidden md:block\">Alert Dialog</span>\n                        <span className=\"block md:hidden\">Dialog</span>\n                      </Button>\n                    </AlertDialogTrigger>\n                    <AlertDialogContent size=\"sm\">\n                      <AlertDialogHeader>\n                        <AlertDialogMedia>\n                          <IconPlaceholder\n                            lucide=\"BluetoothIcon\"\n                            tabler=\"IconBluetooth\"\n                            hugeicons=\"BluetoothIcon\"\n                            phosphor=\"BluetoothIcon\"\n                            remixicon=\"RiBluetoothLine\"\n                          />\n                        </AlertDialogMedia>\n                        <AlertDialogTitle>\n                          Allow accessory to connect?\n                        </AlertDialogTitle>\n                        <AlertDialogDescription>\n                          Do you want to allow the USB accessory to connect to\n                          this device?\n                        </AlertDialogDescription>\n                      </AlertDialogHeader>\n                      <AlertDialogFooter>\n                        <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                        <AlertDialogAction>Allow</AlertDialogAction>\n                      </AlertDialogFooter>\n                    </AlertDialogContent>\n                  </AlertDialog>\n                  <ButtonGroup>\n                    <Button variant=\"outline\">Button Group</Button>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger asChild>\n                        <Button variant=\"outline\" size=\"icon\">\n                          <IconPlaceholder\n                            lucide=\"ChevronUpIcon\"\n                            tabler=\"IconChevronUp\"\n                            hugeicons=\"ArrowUp01Icon\"\n                            phosphor=\"CaretUpIcon\"\n                            remixicon=\"RiArrowUpSLine\"\n                          />\n                        </Button>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"end\" className=\"w-52\">\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"VolumeX\"\n                              tabler=\"IconVolume\"\n                              hugeicons=\"VolumeOffIcon\"\n                              phosphor=\"SpeakerSlashIcon\"\n                              remixicon=\"RiVolumeMuteLine\"\n                            />\n                            Mute Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckboxCircleLine\"\n                            />\n                            Mark as Read\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"UserRoundXIcon\"\n                              tabler=\"IconUserX\"\n                              hugeicons=\"UserRemove01Icon\"\n                              phosphor=\"UserMinusIcon\"\n                              remixicon=\"RiUserMinusLine\"\n                            />\n                            Block User\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShareIcon\"\n                              tabler=\"IconShare\"\n                              hugeicons=\"Share03Icon\"\n                              phosphor=\"ShareIcon\"\n                              remixicon=\"RiShareLine\"\n                            />\n                            Share Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                            Copy Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"AlertTriangleIcon\"\n                              tabler=\"IconAlertTriangle\"\n                              hugeicons=\"AlertCircleIcon\"\n                              phosphor=\"WarningIcon\"\n                              remixicon=\"RiErrorWarningLine\"\n                            />\n                            Report Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem variant=\"destructive\">\n                            <IconPlaceholder\n                              lucide=\"TrashIcon\"\n                              tabler=\"IconTrash\"\n                              hugeicons=\"Delete02Icon\"\n                              phosphor=\"TrashIcon\"\n                              remixicon=\"RiDeleteBinLine\"\n                            />\n                            Delete Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </ButtonGroup>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </Example>\n    </div>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/preview.json b/apps/v4/public/r/styles/radix-nova/preview.json
index ecca744c45..07560d0bfe 100644
--- a/apps/v4/public/r/styles/radix-nova/preview.json
+++ b/apps/v4/public/r/styles/radix-nova/preview.json
@@ -33,7 +33,7 @@
   "files": [
     {
       "path": "registry/radix-nova/blocks/preview.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\nimport { type IconLibraryName } from \"shadcn/icons\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-nova/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-nova/ui/badge\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-nova/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/radix-nova/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-nova/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-nova/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport { Field } from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-nova/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-nova/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-nova/ui/slider\"\nimport { Switch } from \"@/registry/radix-nova/ui/switch\"\nimport { Textarea } from \"@/registry/radix-nova/ui/textarea\"\nimport { RADII } from \"@/registry/config\"\nimport { STYLES } from \"@/registry/styles\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { FONTS } from \"@/app/(create)/lib/fonts\"\nimport { useDesignSystemSearchParams } from \"@/app/(create)/lib/search-params\"\n\nconst PREVIEW_ICONS = [\n  {\n    lucide: \"CopyIcon\",\n    tabler: \"IconCopy\",\n    hugeicons: \"Copy01Icon\",\n    phosphor: \"CopyIcon\",\n    remixicon: \"RiFileCopyLine\",\n  },\n  {\n    lucide: \"CircleAlertIcon\",\n    tabler: \"IconExclamationCircle\",\n    hugeicons: \"AlertCircleIcon\",\n    phosphor: \"WarningCircleIcon\",\n    remixicon: \"RiErrorWarningLine\",\n  },\n  {\n    lucide: \"TrashIcon\",\n    tabler: \"IconTrash\",\n    hugeicons: \"Delete02Icon\",\n    phosphor: \"TrashIcon\",\n    remixicon: \"RiDeleteBinLine\",\n  },\n  {\n    lucide: \"ShareIcon\",\n    tabler: \"IconShare\",\n    hugeicons: \"Share03Icon\",\n    phosphor: \"ShareIcon\",\n    remixicon: \"RiShareLine\",\n  },\n  {\n    lucide: \"ShoppingBagIcon\",\n    tabler: \"IconShoppingBag\",\n    hugeicons: \"ShoppingBag01Icon\",\n    phosphor: \"BagIcon\",\n    remixicon: \"RiShoppingBagLine\",\n  },\n  {\n    lucide: \"MoreHorizontalIcon\",\n    tabler: \"IconDots\",\n    hugeicons: \"MoreHorizontalCircle01Icon\",\n    phosphor: \"DotsThreeIcon\",\n    remixicon: \"RiMoreLine\",\n  },\n  {\n    lucide: \"Loader2Icon\",\n    tabler: \"IconLoader\",\n    hugeicons: \"Loading03Icon\",\n    phosphor: \"SpinnerIcon\",\n    remixicon: \"RiLoaderLine\",\n  },\n  {\n    lucide: \"PlusIcon\",\n    tabler: \"IconPlus\",\n    hugeicons: \"PlusSignIcon\",\n    phosphor: \"PlusIcon\",\n    remixicon: \"RiAddLine\",\n  },\n  {\n    lucide: \"MinusIcon\",\n    tabler: \"IconMinus\",\n    hugeicons: \"MinusSignIcon\",\n    phosphor: \"MinusIcon\",\n    remixicon: \"RiSubtractLine\",\n  },\n  {\n    lucide: \"ArrowLeftIcon\",\n    tabler: \"IconArrowLeft\",\n    hugeicons: \"ArrowLeft02Icon\",\n    phosphor: \"ArrowLeftIcon\",\n    remixicon: \"RiArrowLeftLine\",\n  },\n  {\n    lucide: \"ArrowRightIcon\",\n    tabler: \"IconArrowRight\",\n    hugeicons: \"ArrowRight02Icon\",\n    phosphor: \"ArrowRightIcon\",\n    remixicon: \"RiArrowRightLine\",\n  },\n  {\n    lucide: \"CheckIcon\",\n    tabler: \"IconCheck\",\n    hugeicons: \"Tick02Icon\",\n    phosphor: \"CheckIcon\",\n    remixicon: \"RiCheckLine\",\n  },\n  {\n    lucide: \"ChevronDownIcon\",\n    tabler: \"IconChevronDown\",\n    hugeicons: \"ArrowDown01Icon\",\n    phosphor: \"CaretDownIcon\",\n    remixicon: \"RiArrowDownSLine\",\n  },\n  {\n    lucide: \"ChevronRightIcon\",\n    tabler: \"IconChevronRight\",\n    hugeicons: \"ArrowRight01Icon\",\n    phosphor: \"CaretRightIcon\",\n    remixicon: \"RiArrowRightSLine\",\n  },\n] satisfies Record<IconLibraryName, string>[]\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport default function PreviewExample() {\n  const [params] = useDesignSystemSearchParams()\n\n  const currentFont = React.useMemo(\n    () => FONTS.find((font) => font.value === params.font),\n    [params.font]\n  )\n\n  const currentStyle = React.useMemo(\n    () => STYLES.find((style) => style.name === params.style),\n    [params.style]\n  )\n\n  const radiusValue = React.useMemo(() => {\n    const radius = RADII.find((r) => r.name === params.radius)\n    return radius?.value ?? \"\"\n  }, [params.radius])\n\n  return (\n    <ExampleWrapper className=\"w-full max-w-none! lg:p-0\">\n      <Example\n        containerClassName=\"col-span-2 max-w-none\"\n        className=\"bg-muted dark:bg-background flex min-h-svh flex-col items-center justify-center border-none sm:p-16\"\n      >\n        <div\n          data-slot=\"capture-target\"\n          className=\"grid max-w-4xl gap-6 p-6 lg:grid-cols-2\"\n          style={\n            {\n              \"--radius\": radiusValue,\n            } as React.CSSProperties\n          }\n        >\n          <div className=\"flex flex-col gap-6\">\n            <Card>\n              <CardContent className=\"flex flex-col gap-6\">\n                <div className=\"flex flex-col gap-1\">\n                  <div className=\"text-2xl font-medium\">\n                    {currentStyle?.title} - {currentFont?.name}\n                  </div>\n                  <div className=\"text-muted-foreground text-base\">\n                    Designers love packing quirky glyphs into test phrases. This\n                    is a preview of the typography styles.\n                  </div>\n                </div>\n                <div className=\"grid grid-cols-6 gap-3.5\">\n                  {[\n                    \"Background\",\n                    \"Primary\",\n                    \"Secondary\",\n                    \"Muted\",\n                    \"Accent\",\n                    \"Destructive\",\n                  ].map((variant) => (\n                    <div\n                      key={variant}\n                      className=\"flex flex-col flex-wrap items-center gap-2\"\n                    >\n                      <Card\n                        className=\"ring-border aspect-square w-full bg-(--color) ring\"\n                        style={\n                          {\n                            \"--color\": `var(--${variant.toLowerCase()})`,\n                          } as React.CSSProperties\n                        }\n                      />\n                      <div className=\"hidden max-w-14 truncate text-[0.60rem] md:block\">\n                        {variant}\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"hidden flex-1 md:flex\">\n              <CardContent className=\"flex-1\">\n                <ChartContainer\n                  config={barChartConfig}\n                  className=\"aspect-auto h-full w-auto\"\n                >\n                  <BarChart accessibilityLayer data={barChartData}>\n                    <CartesianGrid vertical={false} />\n                    <XAxis\n                      dataKey=\"month\"\n                      tickLine={false}\n                      tickMargin={10}\n                      axisLine={false}\n                      tickFormatter={(value) => value.slice(0, 3)}\n                    />\n                    <ChartTooltip\n                      cursor={false}\n                      content={<ChartTooltipContent indicator=\"dashed\" />}\n                    />\n                    <Bar\n                      dataKey=\"desktop\"\n                      fill=\"var(--color-desktop)\"\n                      radius={4}\n                    />\n                    <Bar\n                      dataKey=\"mobile\"\n                      fill=\"var(--color-mobile)\"\n                      radius={4}\n                    />\n                  </BarChart>\n                </ChartContainer>\n              </CardContent>\n            </Card>\n          </div>\n          <div className=\"flex flex-col gap-6\">\n            <Card className=\"hidden md:flex\">\n              <CardContent>\n                <div className=\"grid grid-cols-4 place-items-center gap-6 md:grid-cols-7\">\n                  {PREVIEW_ICONS.map((icon, index) => (\n                    <Card\n                      key={index}\n                      className=\"ring-border flex size-8 items-center justify-center rounded-md p-0 ring *:[svg]:size-4\"\n                    >\n                      <IconPlaceholder\n                        lucide={icon.lucide}\n                        tabler={icon.tabler}\n                        hugeicons={icon.hugeicons}\n                        phosphor={icon.phosphor}\n                        remixicon={icon.remixicon}\n                      />\n                    </Card>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"flex-1\">\n              <CardContent className=\"flex flex-col gap-6\">\n                <div className=\"flex flex-col gap-4\">\n                  <div className=\"flex flex-wrap gap-2\">\n                    <Button>Default</Button>\n                    <Button variant=\"secondary\">Secondary</Button>\n                    <Button variant=\"outline\">Outline</Button>\n                    <Button variant=\"destructive\">Destructive</Button>\n                  </div>\n                  <Item variant=\"outline\">\n                    <ItemContent>\n                      <ItemTitle>Two-factor authentication</ItemTitle>\n                      <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                        Verify via email or phone number.\n                      </ItemDescription>\n                    </ItemContent>\n                    <ItemActions className=\"hidden md:flex\">\n                      <Button size=\"sm\" variant=\"secondary\">\n                        Enable\n                      </Button>\n                    </ItemActions>\n                  </Item>\n                  <div className=\"flex flex-wrap items-center gap-1.5\">\n                    <Badge>Badge</Badge>\n                    <Badge variant=\"secondary\">Secondary</Badge>\n                    <Badge variant=\"outline\">Outline</Badge>\n                    <div className=\"mt-2 flex gap-3 md:mt-0 md:ml-auto\">\n                      <Switch defaultChecked />\n                      <RadioGroup\n                        defaultValue=\"apple\"\n                        className=\"flex flex-row gap-3\"\n                      >\n                        <RadioGroupItem value=\"apple\" />\n                        <RadioGroupItem value=\"banana\" />\n                      </RadioGroup>\n                      <div className=\"flex flex-row gap-3\">\n                        <Checkbox defaultChecked />\n                        <Checkbox />\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <Field className=\"flex-row\">\n                  <Input placeholder=\"Name\" />\n                </Field>\n                <Field className=\"flex-row\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n                <Slider\n                  value={[500]}\n                  max={1000}\n                  min={0}\n                  step={10}\n                  className=\"mt-2 w-full\"\n                  aria-label=\"Slider\"\n                />\n                <div className=\"flex gap-2 md:gap-4\">\n                  <AlertDialog>\n                    <AlertDialogTrigger asChild>\n                      <Button variant=\"outline\">\n                        <span className=\"hidden md:block\">Alert Dialog</span>\n                        <span className=\"block md:hidden\">Dialog</span>\n                      </Button>\n                    </AlertDialogTrigger>\n                    <AlertDialogContent size=\"sm\">\n                      <AlertDialogHeader>\n                        <AlertDialogMedia>\n                          <IconPlaceholder\n                            lucide=\"BluetoothIcon\"\n                            tabler=\"IconBluetooth\"\n                            hugeicons=\"BluetoothIcon\"\n                            phosphor=\"BluetoothIcon\"\n                            remixicon=\"RiBluetoothLine\"\n                          />\n                        </AlertDialogMedia>\n                        <AlertDialogTitle>\n                          Allow accessory to connect?\n                        </AlertDialogTitle>\n                        <AlertDialogDescription>\n                          Do you want to allow the USB accessory to connect to\n                          this device?\n                        </AlertDialogDescription>\n                      </AlertDialogHeader>\n                      <AlertDialogFooter>\n                        <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                        <AlertDialogAction>Allow</AlertDialogAction>\n                      </AlertDialogFooter>\n                    </AlertDialogContent>\n                  </AlertDialog>\n                  <ButtonGroup>\n                    <Button variant=\"outline\">Button Group</Button>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger asChild>\n                        <Button variant=\"outline\" size=\"icon\">\n                          <IconPlaceholder\n                            lucide=\"ChevronUpIcon\"\n                            tabler=\"IconChevronUp\"\n                            hugeicons=\"ArrowUp01Icon\"\n                            phosphor=\"CaretUpIcon\"\n                            remixicon=\"RiArrowUpSLine\"\n                          />\n                        </Button>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"end\" className=\"w-52\">\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"VolumeX\"\n                              tabler=\"IconVolume\"\n                              hugeicons=\"VolumeOffIcon\"\n                              phosphor=\"SpeakerSlashIcon\"\n                              remixicon=\"RiVolumeMuteLine\"\n                            />\n                            Mute Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckboxCircleLine\"\n                            />\n                            Mark as Read\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"UserRoundXIcon\"\n                              tabler=\"IconUserX\"\n                              hugeicons=\"UserRemove01Icon\"\n                              phosphor=\"UserMinusIcon\"\n                              remixicon=\"RiUserMinusLine\"\n                            />\n                            Block User\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShareIcon\"\n                              tabler=\"IconShare\"\n                              hugeicons=\"Share03Icon\"\n                              phosphor=\"ShareIcon\"\n                              remixicon=\"RiShareLine\"\n                            />\n                            Share Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                            Copy Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"AlertTriangleIcon\"\n                              tabler=\"IconAlertTriangle\"\n                              hugeicons=\"AlertCircleIcon\"\n                              phosphor=\"WarningIcon\"\n                              remixicon=\"RiErrorWarningLine\"\n                            />\n                            Report Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem variant=\"destructive\">\n                            <IconPlaceholder\n                              lucide=\"TrashIcon\"\n                              tabler=\"IconTrash\"\n                              hugeicons=\"Delete02Icon\"\n                              phosphor=\"TrashIcon\"\n                              remixicon=\"RiDeleteBinLine\"\n                            />\n                            Delete Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </ButtonGroup>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </Example>\n    </ExampleWrapper>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\nimport { type IconLibraryName } from \"shadcn/icons\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-nova/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-nova/ui/badge\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-nova/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/radix-nova/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-nova/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-nova/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport { Field } from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-nova/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-nova/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-nova/ui/slider\"\nimport { Switch } from \"@/registry/radix-nova/ui/switch\"\nimport { Textarea } from \"@/registry/radix-nova/ui/textarea\"\nimport { RADII } from \"@/registry/config\"\nimport { STYLES } from \"@/registry/styles\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { FONTS } from \"@/app/(create)/lib/fonts\"\nimport { useDesignSystemSearchParams } from \"@/app/(create)/lib/search-params\"\n\nconst PREVIEW_ICONS = [\n  {\n    lucide: \"CopyIcon\",\n    tabler: \"IconCopy\",\n    hugeicons: \"Copy01Icon\",\n    phosphor: \"CopyIcon\",\n    remixicon: \"RiFileCopyLine\",\n  },\n  {\n    lucide: \"CircleAlertIcon\",\n    tabler: \"IconExclamationCircle\",\n    hugeicons: \"AlertCircleIcon\",\n    phosphor: \"WarningCircleIcon\",\n    remixicon: \"RiErrorWarningLine\",\n  },\n  {\n    lucide: \"TrashIcon\",\n    tabler: \"IconTrash\",\n    hugeicons: \"Delete02Icon\",\n    phosphor: \"TrashIcon\",\n    remixicon: \"RiDeleteBinLine\",\n  },\n  {\n    lucide: \"ShareIcon\",\n    tabler: \"IconShare\",\n    hugeicons: \"Share03Icon\",\n    phosphor: \"ShareIcon\",\n    remixicon: \"RiShareLine\",\n  },\n  {\n    lucide: \"ShoppingBagIcon\",\n    tabler: \"IconShoppingBag\",\n    hugeicons: \"ShoppingBag01Icon\",\n    phosphor: \"BagIcon\",\n    remixicon: \"RiShoppingBagLine\",\n  },\n  {\n    lucide: \"MoreHorizontalIcon\",\n    tabler: \"IconDots\",\n    hugeicons: \"MoreHorizontalCircle01Icon\",\n    phosphor: \"DotsThreeIcon\",\n    remixicon: \"RiMoreLine\",\n  },\n  {\n    lucide: \"Loader2Icon\",\n    tabler: \"IconLoader\",\n    hugeicons: \"Loading03Icon\",\n    phosphor: \"SpinnerIcon\",\n    remixicon: \"RiLoaderLine\",\n  },\n  {\n    lucide: \"PlusIcon\",\n    tabler: \"IconPlus\",\n    hugeicons: \"PlusSignIcon\",\n    phosphor: \"PlusIcon\",\n    remixicon: \"RiAddLine\",\n  },\n  {\n    lucide: \"MinusIcon\",\n    tabler: \"IconMinus\",\n    hugeicons: \"MinusSignIcon\",\n    phosphor: \"MinusIcon\",\n    remixicon: \"RiSubtractLine\",\n  },\n  {\n    lucide: \"ArrowLeftIcon\",\n    tabler: \"IconArrowLeft\",\n    hugeicons: \"ArrowLeft02Icon\",\n    phosphor: \"ArrowLeftIcon\",\n    remixicon: \"RiArrowLeftLine\",\n  },\n  {\n    lucide: \"ArrowRightIcon\",\n    tabler: \"IconArrowRight\",\n    hugeicons: \"ArrowRight02Icon\",\n    phosphor: \"ArrowRightIcon\",\n    remixicon: \"RiArrowRightLine\",\n  },\n  {\n    lucide: \"CheckIcon\",\n    tabler: \"IconCheck\",\n    hugeicons: \"Tick02Icon\",\n    phosphor: \"CheckIcon\",\n    remixicon: \"RiCheckLine\",\n  },\n  {\n    lucide: \"ChevronDownIcon\",\n    tabler: \"IconChevronDown\",\n    hugeicons: \"ArrowDown01Icon\",\n    phosphor: \"CaretDownIcon\",\n    remixicon: \"RiArrowDownSLine\",\n  },\n  {\n    lucide: \"ChevronRightIcon\",\n    tabler: \"IconChevronRight\",\n    hugeicons: \"ArrowRight01Icon\",\n    phosphor: \"CaretRightIcon\",\n    remixicon: \"RiArrowRightSLine\",\n  },\n] satisfies Record<IconLibraryName, string>[]\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport default function PreviewExample() {\n  const [params] = useDesignSystemSearchParams()\n\n  const currentFont = React.useMemo(\n    () => FONTS.find((font) => font.value === params.font),\n    [params.font]\n  )\n\n  const currentStyle = React.useMemo(\n    () => STYLES.find((style) => style.name === params.style),\n    [params.style]\n  )\n\n  const radiusValue = React.useMemo(() => {\n    const radius = RADII.find((r) => r.name === params.radius)\n    return radius?.value ?? \"\"\n  }, [params.radius])\n\n  return (\n    <div>\n      <Example\n        containerClassName=\"col-span-2 max-w-none\"\n        className=\"bg-muted dark:bg-background flex min-h-svh flex-col items-center justify-center border-none p-0 sm:p-0\"\n      >\n        <div\n          data-slot=\"capture-target\"\n          className=\"grid max-w-4xl gap-6 p-12 lg:grid-cols-2\"\n          style={\n            {\n              \"--radius\": radiusValue,\n            } as React.CSSProperties\n          }\n        >\n          <div className=\"flex flex-col gap-6\">\n            <Card>\n              <CardContent className=\"flex flex-col gap-6\">\n                <div className=\"flex flex-col gap-1\">\n                  <div className=\"text-2xl font-medium\">\n                    {currentStyle?.title} - {currentFont?.name}\n                  </div>\n                  <div className=\"text-muted-foreground text-base\">\n                    Designers love packing quirky glyphs into test phrases. This\n                    is a preview of the typography styles.\n                  </div>\n                </div>\n                <div className=\"grid grid-cols-6 gap-3.5\">\n                  {[\n                    \"Background\",\n                    \"Primary\",\n                    \"Secondary\",\n                    \"Muted\",\n                    \"Accent\",\n                    \"Destructive\",\n                  ].map((variant) => (\n                    <div\n                      key={variant}\n                      className=\"flex flex-col flex-wrap items-center gap-2\"\n                    >\n                      <Item\n                        className=\"ring-border aspect-square w-full bg-(--color) ring\"\n                        style={\n                          {\n                            \"--color\": `var(--${variant.toLowerCase()})`,\n                          } as React.CSSProperties\n                        }\n                      />\n                      <div className=\"hidden max-w-14 truncate text-[0.60rem] md:block\">\n                        {variant}\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"hidden flex-1 md:flex\">\n              <CardContent className=\"flex-1\">\n                <ChartContainer\n                  config={barChartConfig}\n                  className=\"aspect-auto h-full w-auto\"\n                >\n                  <BarChart accessibilityLayer data={barChartData}>\n                    <CartesianGrid vertical={false} />\n                    <XAxis\n                      dataKey=\"month\"\n                      tickLine={false}\n                      tickMargin={10}\n                      axisLine={false}\n                      tickFormatter={(value) => value.slice(0, 3)}\n                    />\n                    <ChartTooltip\n                      cursor={false}\n                      content={<ChartTooltipContent indicator=\"dashed\" />}\n                    />\n                    <Bar\n                      dataKey=\"desktop\"\n                      fill=\"var(--color-desktop)\"\n                      radius={4}\n                    />\n                    <Bar\n                      dataKey=\"mobile\"\n                      fill=\"var(--color-mobile)\"\n                      radius={4}\n                    />\n                  </BarChart>\n                </ChartContainer>\n              </CardContent>\n            </Card>\n          </div>\n          <div className=\"flex flex-col gap-6\">\n            <Card className=\"hidden md:flex\">\n              <CardContent>\n                <div className=\"grid grid-cols-4 place-items-center gap-6 md:grid-cols-7\">\n                  {PREVIEW_ICONS.map((icon, index) => (\n                    <Card\n                      key={index}\n                      className=\"ring-border flex size-8 items-center justify-center rounded-md p-0 ring *:[svg]:size-4\"\n                    >\n                      <IconPlaceholder\n                        lucide={icon.lucide}\n                        tabler={icon.tabler}\n                        hugeicons={icon.hugeicons}\n                        phosphor={icon.phosphor}\n                        remixicon={icon.remixicon}\n                      />\n                    </Card>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"flex-1\">\n              <CardContent className=\"flex flex-1 flex-col gap-6\">\n                <div className=\"flex flex-col gap-4\">\n                  <div className=\"flex flex-wrap gap-2\">\n                    <Button>Default</Button>\n                    <Button variant=\"secondary\">Secondary</Button>\n                    <Button variant=\"outline\">Outline</Button>\n                    <Button variant=\"destructive\">Destructive</Button>\n                  </div>\n                  <Item variant=\"outline\">\n                    <ItemContent>\n                      <ItemTitle>Two-factor authentication</ItemTitle>\n                      <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                        Verify via email or phone number.\n                      </ItemDescription>\n                    </ItemContent>\n                    <ItemActions className=\"hidden md:flex\">\n                      <Button size=\"sm\" variant=\"secondary\">\n                        Enable\n                      </Button>\n                    </ItemActions>\n                  </Item>\n                  <div className=\"flex flex-wrap items-center gap-1.5\">\n                    <Badge>Badge</Badge>\n                    <Badge variant=\"secondary\">Secondary</Badge>\n                    <Badge variant=\"outline\">Outline</Badge>\n                    <div className=\"mt-2 flex gap-3 md:mt-0 md:ml-auto\">\n                      <Switch defaultChecked />\n                      <RadioGroup\n                        defaultValue=\"apple\"\n                        className=\"flex flex-row gap-3\"\n                      >\n                        <RadioGroupItem value=\"apple\" />\n                        <RadioGroupItem value=\"banana\" />\n                      </RadioGroup>\n                      <div className=\"flex flex-row gap-3\">\n                        <Checkbox defaultChecked />\n                        <Checkbox />\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <Field className=\"flex-row\">\n                  <Input placeholder=\"Name\" />\n                </Field>\n                <Field className=\"flex-1 flex-row\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n                <Slider\n                  value={[500]}\n                  max={1000}\n                  min={0}\n                  step={10}\n                  className=\"mt-2 w-full\"\n                  aria-label=\"Slider\"\n                />\n                <div className=\"flex gap-2 md:gap-4\">\n                  <AlertDialog>\n                    <AlertDialogTrigger asChild>\n                      <Button variant=\"outline\">\n                        <span className=\"hidden md:block\">Alert Dialog</span>\n                        <span className=\"block md:hidden\">Dialog</span>\n                      </Button>\n                    </AlertDialogTrigger>\n                    <AlertDialogContent size=\"sm\">\n                      <AlertDialogHeader>\n                        <AlertDialogMedia>\n                          <IconPlaceholder\n                            lucide=\"BluetoothIcon\"\n                            tabler=\"IconBluetooth\"\n                            hugeicons=\"BluetoothIcon\"\n                            phosphor=\"BluetoothIcon\"\n                            remixicon=\"RiBluetoothLine\"\n                          />\n                        </AlertDialogMedia>\n                        <AlertDialogTitle>\n                          Allow accessory to connect?\n                        </AlertDialogTitle>\n                        <AlertDialogDescription>\n                          Do you want to allow the USB accessory to connect to\n                          this device?\n                        </AlertDialogDescription>\n                      </AlertDialogHeader>\n                      <AlertDialogFooter>\n                        <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                        <AlertDialogAction>Allow</AlertDialogAction>\n                      </AlertDialogFooter>\n                    </AlertDialogContent>\n                  </AlertDialog>\n                  <ButtonGroup>\n                    <Button variant=\"outline\">Button Group</Button>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger asChild>\n                        <Button variant=\"outline\" size=\"icon\">\n                          <IconPlaceholder\n                            lucide=\"ChevronUpIcon\"\n                            tabler=\"IconChevronUp\"\n                            hugeicons=\"ArrowUp01Icon\"\n                            phosphor=\"CaretUpIcon\"\n                            remixicon=\"RiArrowUpSLine\"\n                          />\n                        </Button>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"end\" className=\"w-52\">\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"VolumeX\"\n                              tabler=\"IconVolume\"\n                              hugeicons=\"VolumeOffIcon\"\n                              phosphor=\"SpeakerSlashIcon\"\n                              remixicon=\"RiVolumeMuteLine\"\n                            />\n                            Mute Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckboxCircleLine\"\n                            />\n                            Mark as Read\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"UserRoundXIcon\"\n                              tabler=\"IconUserX\"\n                              hugeicons=\"UserRemove01Icon\"\n                              phosphor=\"UserMinusIcon\"\n                              remixicon=\"RiUserMinusLine\"\n                            />\n                            Block User\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShareIcon\"\n                              tabler=\"IconShare\"\n                              hugeicons=\"Share03Icon\"\n                              phosphor=\"ShareIcon\"\n                              remixicon=\"RiShareLine\"\n                            />\n                            Share Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                            Copy Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"AlertTriangleIcon\"\n                              tabler=\"IconAlertTriangle\"\n                              hugeicons=\"AlertCircleIcon\"\n                              phosphor=\"WarningIcon\"\n                              remixicon=\"RiErrorWarningLine\"\n                            />\n                            Report Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem variant=\"destructive\">\n                            <IconPlaceholder\n                              lucide=\"TrashIcon\"\n                              tabler=\"IconTrash\"\n                              hugeicons=\"Delete02Icon\"\n                              phosphor=\"TrashIcon\"\n                              remixicon=\"RiDeleteBinLine\"\n                            />\n                            Delete Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </ButtonGroup>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </Example>\n    </div>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/preview.json b/apps/v4/public/r/styles/radix-vega/preview.json
index f4b785d32a..11cb2bf816 100644
--- a/apps/v4/public/r/styles/radix-vega/preview.json
+++ b/apps/v4/public/r/styles/radix-vega/preview.json
@@ -33,7 +33,7 @@
   "files": [
     {
       "path": "registry/radix-vega/blocks/preview.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\nimport { type IconLibraryName } from \"shadcn/icons\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-vega/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-vega/ui/badge\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-vega/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/radix-vega/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-vega/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-vega/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport { Field } from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-vega/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-vega/ui/slider\"\nimport { Switch } from \"@/registry/radix-vega/ui/switch\"\nimport { Textarea } from \"@/registry/radix-vega/ui/textarea\"\nimport { RADII } from \"@/registry/config\"\nimport { STYLES } from \"@/registry/styles\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { FONTS } from \"@/app/(create)/lib/fonts\"\nimport { useDesignSystemSearchParams } from \"@/app/(create)/lib/search-params\"\n\nconst PREVIEW_ICONS = [\n  {\n    lucide: \"CopyIcon\",\n    tabler: \"IconCopy\",\n    hugeicons: \"Copy01Icon\",\n    phosphor: \"CopyIcon\",\n    remixicon: \"RiFileCopyLine\",\n  },\n  {\n    lucide: \"CircleAlertIcon\",\n    tabler: \"IconExclamationCircle\",\n    hugeicons: \"AlertCircleIcon\",\n    phosphor: \"WarningCircleIcon\",\n    remixicon: \"RiErrorWarningLine\",\n  },\n  {\n    lucide: \"TrashIcon\",\n    tabler: \"IconTrash\",\n    hugeicons: \"Delete02Icon\",\n    phosphor: \"TrashIcon\",\n    remixicon: \"RiDeleteBinLine\",\n  },\n  {\n    lucide: \"ShareIcon\",\n    tabler: \"IconShare\",\n    hugeicons: \"Share03Icon\",\n    phosphor: \"ShareIcon\",\n    remixicon: \"RiShareLine\",\n  },\n  {\n    lucide: \"ShoppingBagIcon\",\n    tabler: \"IconShoppingBag\",\n    hugeicons: \"ShoppingBag01Icon\",\n    phosphor: \"BagIcon\",\n    remixicon: \"RiShoppingBagLine\",\n  },\n  {\n    lucide: \"MoreHorizontalIcon\",\n    tabler: \"IconDots\",\n    hugeicons: \"MoreHorizontalCircle01Icon\",\n    phosphor: \"DotsThreeIcon\",\n    remixicon: \"RiMoreLine\",\n  },\n  {\n    lucide: \"Loader2Icon\",\n    tabler: \"IconLoader\",\n    hugeicons: \"Loading03Icon\",\n    phosphor: \"SpinnerIcon\",\n    remixicon: \"RiLoaderLine\",\n  },\n  {\n    lucide: \"PlusIcon\",\n    tabler: \"IconPlus\",\n    hugeicons: \"PlusSignIcon\",\n    phosphor: \"PlusIcon\",\n    remixicon: \"RiAddLine\",\n  },\n  {\n    lucide: \"MinusIcon\",\n    tabler: \"IconMinus\",\n    hugeicons: \"MinusSignIcon\",\n    phosphor: \"MinusIcon\",\n    remixicon: \"RiSubtractLine\",\n  },\n  {\n    lucide: \"ArrowLeftIcon\",\n    tabler: \"IconArrowLeft\",\n    hugeicons: \"ArrowLeft02Icon\",\n    phosphor: \"ArrowLeftIcon\",\n    remixicon: \"RiArrowLeftLine\",\n  },\n  {\n    lucide: \"ArrowRightIcon\",\n    tabler: \"IconArrowRight\",\n    hugeicons: \"ArrowRight02Icon\",\n    phosphor: \"ArrowRightIcon\",\n    remixicon: \"RiArrowRightLine\",\n  },\n  {\n    lucide: \"CheckIcon\",\n    tabler: \"IconCheck\",\n    hugeicons: \"Tick02Icon\",\n    phosphor: \"CheckIcon\",\n    remixicon: \"RiCheckLine\",\n  },\n  {\n    lucide: \"ChevronDownIcon\",\n    tabler: \"IconChevronDown\",\n    hugeicons: \"ArrowDown01Icon\",\n    phosphor: \"CaretDownIcon\",\n    remixicon: \"RiArrowDownSLine\",\n  },\n  {\n    lucide: \"ChevronRightIcon\",\n    tabler: \"IconChevronRight\",\n    hugeicons: \"ArrowRight01Icon\",\n    phosphor: \"CaretRightIcon\",\n    remixicon: \"RiArrowRightSLine\",\n  },\n] satisfies Record<IconLibraryName, string>[]\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport default function PreviewExample() {\n  const [params] = useDesignSystemSearchParams()\n\n  const currentFont = React.useMemo(\n    () => FONTS.find((font) => font.value === params.font),\n    [params.font]\n  )\n\n  const currentStyle = React.useMemo(\n    () => STYLES.find((style) => style.name === params.style),\n    [params.style]\n  )\n\n  const radiusValue = React.useMemo(() => {\n    const radius = RADII.find((r) => r.name === params.radius)\n    return radius?.value ?? \"\"\n  }, [params.radius])\n\n  return (\n    <ExampleWrapper className=\"w-full max-w-none! lg:p-0\">\n      <Example\n        containerClassName=\"col-span-2 max-w-none\"\n        className=\"bg-muted dark:bg-background flex min-h-svh flex-col items-center justify-center border-none sm:p-16\"\n      >\n        <div\n          data-slot=\"capture-target\"\n          className=\"grid max-w-4xl gap-6 p-6 lg:grid-cols-2\"\n          style={\n            {\n              \"--radius\": radiusValue,\n            } as React.CSSProperties\n          }\n        >\n          <div className=\"flex flex-col gap-6\">\n            <Card>\n              <CardContent className=\"flex flex-col gap-6\">\n                <div className=\"flex flex-col gap-1\">\n                  <div className=\"text-2xl font-medium\">\n                    {currentStyle?.title} - {currentFont?.name}\n                  </div>\n                  <div className=\"text-muted-foreground text-base\">\n                    Designers love packing quirky glyphs into test phrases. This\n                    is a preview of the typography styles.\n                  </div>\n                </div>\n                <div className=\"grid grid-cols-6 gap-3.5\">\n                  {[\n                    \"Background\",\n                    \"Primary\",\n                    \"Secondary\",\n                    \"Muted\",\n                    \"Accent\",\n                    \"Destructive\",\n                  ].map((variant) => (\n                    <div\n                      key={variant}\n                      className=\"flex flex-col flex-wrap items-center gap-2\"\n                    >\n                      <Card\n                        className=\"ring-border aspect-square w-full bg-(--color) ring\"\n                        style={\n                          {\n                            \"--color\": `var(--${variant.toLowerCase()})`,\n                          } as React.CSSProperties\n                        }\n                      />\n                      <div className=\"hidden max-w-14 truncate text-[0.60rem] md:block\">\n                        {variant}\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"hidden flex-1 md:flex\">\n              <CardContent className=\"flex-1\">\n                <ChartContainer\n                  config={barChartConfig}\n                  className=\"aspect-auto h-full w-auto\"\n                >\n                  <BarChart accessibilityLayer data={barChartData}>\n                    <CartesianGrid vertical={false} />\n                    <XAxis\n                      dataKey=\"month\"\n                      tickLine={false}\n                      tickMargin={10}\n                      axisLine={false}\n                      tickFormatter={(value) => value.slice(0, 3)}\n                    />\n                    <ChartTooltip\n                      cursor={false}\n                      content={<ChartTooltipContent indicator=\"dashed\" />}\n                    />\n                    <Bar\n                      dataKey=\"desktop\"\n                      fill=\"var(--color-desktop)\"\n                      radius={4}\n                    />\n                    <Bar\n                      dataKey=\"mobile\"\n                      fill=\"var(--color-mobile)\"\n                      radius={4}\n                    />\n                  </BarChart>\n                </ChartContainer>\n              </CardContent>\n            </Card>\n          </div>\n          <div className=\"flex flex-col gap-6\">\n            <Card className=\"hidden md:flex\">\n              <CardContent>\n                <div className=\"grid grid-cols-4 place-items-center gap-6 md:grid-cols-7\">\n                  {PREVIEW_ICONS.map((icon, index) => (\n                    <Card\n                      key={index}\n                      className=\"ring-border flex size-8 items-center justify-center rounded-md p-0 ring *:[svg]:size-4\"\n                    >\n                      <IconPlaceholder\n                        lucide={icon.lucide}\n                        tabler={icon.tabler}\n                        hugeicons={icon.hugeicons}\n                        phosphor={icon.phosphor}\n                        remixicon={icon.remixicon}\n                      />\n                    </Card>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"flex-1\">\n              <CardContent className=\"flex flex-col gap-6\">\n                <div className=\"flex flex-col gap-4\">\n                  <div className=\"flex flex-wrap gap-2\">\n                    <Button>Default</Button>\n                    <Button variant=\"secondary\">Secondary</Button>\n                    <Button variant=\"outline\">Outline</Button>\n                    <Button variant=\"destructive\">Destructive</Button>\n                  </div>\n                  <Item variant=\"outline\">\n                    <ItemContent>\n                      <ItemTitle>Two-factor authentication</ItemTitle>\n                      <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                        Verify via email or phone number.\n                      </ItemDescription>\n                    </ItemContent>\n                    <ItemActions className=\"hidden md:flex\">\n                      <Button size=\"sm\" variant=\"secondary\">\n                        Enable\n                      </Button>\n                    </ItemActions>\n                  </Item>\n                  <div className=\"flex flex-wrap items-center gap-1.5\">\n                    <Badge>Badge</Badge>\n                    <Badge variant=\"secondary\">Secondary</Badge>\n                    <Badge variant=\"outline\">Outline</Badge>\n                    <div className=\"mt-2 flex gap-3 md:mt-0 md:ml-auto\">\n                      <Switch defaultChecked />\n                      <RadioGroup\n                        defaultValue=\"apple\"\n                        className=\"flex flex-row gap-3\"\n                      >\n                        <RadioGroupItem value=\"apple\" />\n                        <RadioGroupItem value=\"banana\" />\n                      </RadioGroup>\n                      <div className=\"flex flex-row gap-3\">\n                        <Checkbox defaultChecked />\n                        <Checkbox />\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <Field className=\"flex-row\">\n                  <Input placeholder=\"Name\" />\n                </Field>\n                <Field className=\"flex-row\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n                <Slider\n                  value={[500]}\n                  max={1000}\n                  min={0}\n                  step={10}\n                  className=\"mt-2 w-full\"\n                  aria-label=\"Slider\"\n                />\n                <div className=\"flex gap-2 md:gap-4\">\n                  <AlertDialog>\n                    <AlertDialogTrigger asChild>\n                      <Button variant=\"outline\">\n                        <span className=\"hidden md:block\">Alert Dialog</span>\n                        <span className=\"block md:hidden\">Dialog</span>\n                      </Button>\n                    </AlertDialogTrigger>\n                    <AlertDialogContent size=\"sm\">\n                      <AlertDialogHeader>\n                        <AlertDialogMedia>\n                          <IconPlaceholder\n                            lucide=\"BluetoothIcon\"\n                            tabler=\"IconBluetooth\"\n                            hugeicons=\"BluetoothIcon\"\n                            phosphor=\"BluetoothIcon\"\n                            remixicon=\"RiBluetoothLine\"\n                          />\n                        </AlertDialogMedia>\n                        <AlertDialogTitle>\n                          Allow accessory to connect?\n                        </AlertDialogTitle>\n                        <AlertDialogDescription>\n                          Do you want to allow the USB accessory to connect to\n                          this device?\n                        </AlertDialogDescription>\n                      </AlertDialogHeader>\n                      <AlertDialogFooter>\n                        <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                        <AlertDialogAction>Allow</AlertDialogAction>\n                      </AlertDialogFooter>\n                    </AlertDialogContent>\n                  </AlertDialog>\n                  <ButtonGroup>\n                    <Button variant=\"outline\">Button Group</Button>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger asChild>\n                        <Button variant=\"outline\" size=\"icon\">\n                          <IconPlaceholder\n                            lucide=\"ChevronUpIcon\"\n                            tabler=\"IconChevronUp\"\n                            hugeicons=\"ArrowUp01Icon\"\n                            phosphor=\"CaretUpIcon\"\n                            remixicon=\"RiArrowUpSLine\"\n                          />\n                        </Button>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"end\" className=\"w-52\">\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"VolumeX\"\n                              tabler=\"IconVolume\"\n                              hugeicons=\"VolumeOffIcon\"\n                              phosphor=\"SpeakerSlashIcon\"\n                              remixicon=\"RiVolumeMuteLine\"\n                            />\n                            Mute Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckboxCircleLine\"\n                            />\n                            Mark as Read\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"UserRoundXIcon\"\n                              tabler=\"IconUserX\"\n                              hugeicons=\"UserRemove01Icon\"\n                              phosphor=\"UserMinusIcon\"\n                              remixicon=\"RiUserMinusLine\"\n                            />\n                            Block User\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShareIcon\"\n                              tabler=\"IconShare\"\n                              hugeicons=\"Share03Icon\"\n                              phosphor=\"ShareIcon\"\n                              remixicon=\"RiShareLine\"\n                            />\n                            Share Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                            Copy Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"AlertTriangleIcon\"\n                              tabler=\"IconAlertTriangle\"\n                              hugeicons=\"AlertCircleIcon\"\n                              phosphor=\"WarningIcon\"\n                              remixicon=\"RiErrorWarningLine\"\n                            />\n                            Report Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem variant=\"destructive\">\n                            <IconPlaceholder\n                              lucide=\"TrashIcon\"\n                              tabler=\"IconTrash\"\n                              hugeicons=\"Delete02Icon\"\n                              phosphor=\"TrashIcon\"\n                              remixicon=\"RiDeleteBinLine\"\n                            />\n                            Delete Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </ButtonGroup>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </Example>\n    </ExampleWrapper>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\nimport { type IconLibraryName } from \"shadcn/icons\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-vega/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-vega/ui/badge\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-vega/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/radix-vega/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-vega/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-vega/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport { Field } from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-vega/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-vega/ui/slider\"\nimport { Switch } from \"@/registry/radix-vega/ui/switch\"\nimport { Textarea } from \"@/registry/radix-vega/ui/textarea\"\nimport { RADII } from \"@/registry/config\"\nimport { STYLES } from \"@/registry/styles\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { FONTS } from \"@/app/(create)/lib/fonts\"\nimport { useDesignSystemSearchParams } from \"@/app/(create)/lib/search-params\"\n\nconst PREVIEW_ICONS = [\n  {\n    lucide: \"CopyIcon\",\n    tabler: \"IconCopy\",\n    hugeicons: \"Copy01Icon\",\n    phosphor: \"CopyIcon\",\n    remixicon: \"RiFileCopyLine\",\n  },\n  {\n    lucide: \"CircleAlertIcon\",\n    tabler: \"IconExclamationCircle\",\n    hugeicons: \"AlertCircleIcon\",\n    phosphor: \"WarningCircleIcon\",\n    remixicon: \"RiErrorWarningLine\",\n  },\n  {\n    lucide: \"TrashIcon\",\n    tabler: \"IconTrash\",\n    hugeicons: \"Delete02Icon\",\n    phosphor: \"TrashIcon\",\n    remixicon: \"RiDeleteBinLine\",\n  },\n  {\n    lucide: \"ShareIcon\",\n    tabler: \"IconShare\",\n    hugeicons: \"Share03Icon\",\n    phosphor: \"ShareIcon\",\n    remixicon: \"RiShareLine\",\n  },\n  {\n    lucide: \"ShoppingBagIcon\",\n    tabler: \"IconShoppingBag\",\n    hugeicons: \"ShoppingBag01Icon\",\n    phosphor: \"BagIcon\",\n    remixicon: \"RiShoppingBagLine\",\n  },\n  {\n    lucide: \"MoreHorizontalIcon\",\n    tabler: \"IconDots\",\n    hugeicons: \"MoreHorizontalCircle01Icon\",\n    phosphor: \"DotsThreeIcon\",\n    remixicon: \"RiMoreLine\",\n  },\n  {\n    lucide: \"Loader2Icon\",\n    tabler: \"IconLoader\",\n    hugeicons: \"Loading03Icon\",\n    phosphor: \"SpinnerIcon\",\n    remixicon: \"RiLoaderLine\",\n  },\n  {\n    lucide: \"PlusIcon\",\n    tabler: \"IconPlus\",\n    hugeicons: \"PlusSignIcon\",\n    phosphor: \"PlusIcon\",\n    remixicon: \"RiAddLine\",\n  },\n  {\n    lucide: \"MinusIcon\",\n    tabler: \"IconMinus\",\n    hugeicons: \"MinusSignIcon\",\n    phosphor: \"MinusIcon\",\n    remixicon: \"RiSubtractLine\",\n  },\n  {\n    lucide: \"ArrowLeftIcon\",\n    tabler: \"IconArrowLeft\",\n    hugeicons: \"ArrowLeft02Icon\",\n    phosphor: \"ArrowLeftIcon\",\n    remixicon: \"RiArrowLeftLine\",\n  },\n  {\n    lucide: \"ArrowRightIcon\",\n    tabler: \"IconArrowRight\",\n    hugeicons: \"ArrowRight02Icon\",\n    phosphor: \"ArrowRightIcon\",\n    remixicon: \"RiArrowRightLine\",\n  },\n  {\n    lucide: \"CheckIcon\",\n    tabler: \"IconCheck\",\n    hugeicons: \"Tick02Icon\",\n    phosphor: \"CheckIcon\",\n    remixicon: \"RiCheckLine\",\n  },\n  {\n    lucide: \"ChevronDownIcon\",\n    tabler: \"IconChevronDown\",\n    hugeicons: \"ArrowDown01Icon\",\n    phosphor: \"CaretDownIcon\",\n    remixicon: \"RiArrowDownSLine\",\n  },\n  {\n    lucide: \"ChevronRightIcon\",\n    tabler: \"IconChevronRight\",\n    hugeicons: \"ArrowRight01Icon\",\n    phosphor: \"CaretRightIcon\",\n    remixicon: \"RiArrowRightSLine\",\n  },\n] satisfies Record<IconLibraryName, string>[]\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport default function PreviewExample() {\n  const [params] = useDesignSystemSearchParams()\n\n  const currentFont = React.useMemo(\n    () => FONTS.find((font) => font.value === params.font),\n    [params.font]\n  )\n\n  const currentStyle = React.useMemo(\n    () => STYLES.find((style) => style.name === params.style),\n    [params.style]\n  )\n\n  const radiusValue = React.useMemo(() => {\n    const radius = RADII.find((r) => r.name === params.radius)\n    return radius?.value ?? \"\"\n  }, [params.radius])\n\n  return (\n    <div>\n      <Example\n        containerClassName=\"col-span-2 max-w-none\"\n        className=\"bg-muted dark:bg-background flex min-h-svh flex-col items-center justify-center border-none p-0 sm:p-0\"\n      >\n        <div\n          data-slot=\"capture-target\"\n          className=\"grid max-w-4xl gap-6 p-12 lg:grid-cols-2\"\n          style={\n            {\n              \"--radius\": radiusValue,\n            } as React.CSSProperties\n          }\n        >\n          <div className=\"flex flex-col gap-6\">\n            <Card>\n              <CardContent className=\"flex flex-col gap-6\">\n                <div className=\"flex flex-col gap-1\">\n                  <div className=\"text-2xl font-medium\">\n                    {currentStyle?.title} - {currentFont?.name}\n                  </div>\n                  <div className=\"text-muted-foreground text-base\">\n                    Designers love packing quirky glyphs into test phrases. This\n                    is a preview of the typography styles.\n                  </div>\n                </div>\n                <div className=\"grid grid-cols-6 gap-3.5\">\n                  {[\n                    \"Background\",\n                    \"Primary\",\n                    \"Secondary\",\n                    \"Muted\",\n                    \"Accent\",\n                    \"Destructive\",\n                  ].map((variant) => (\n                    <div\n                      key={variant}\n                      className=\"flex flex-col flex-wrap items-center gap-2\"\n                    >\n                      <Item\n                        className=\"ring-border aspect-square w-full bg-(--color) ring\"\n                        style={\n                          {\n                            \"--color\": `var(--${variant.toLowerCase()})`,\n                          } as React.CSSProperties\n                        }\n                      />\n                      <div className=\"hidden max-w-14 truncate text-[0.60rem] md:block\">\n                        {variant}\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"hidden flex-1 md:flex\">\n              <CardContent className=\"flex-1\">\n                <ChartContainer\n                  config={barChartConfig}\n                  className=\"aspect-auto h-full w-auto\"\n                >\n                  <BarChart accessibilityLayer data={barChartData}>\n                    <CartesianGrid vertical={false} />\n                    <XAxis\n                      dataKey=\"month\"\n                      tickLine={false}\n                      tickMargin={10}\n                      axisLine={false}\n                      tickFormatter={(value) => value.slice(0, 3)}\n                    />\n                    <ChartTooltip\n                      cursor={false}\n                      content={<ChartTooltipContent indicator=\"dashed\" />}\n                    />\n                    <Bar\n                      dataKey=\"desktop\"\n                      fill=\"var(--color-desktop)\"\n                      radius={4}\n                    />\n                    <Bar\n                      dataKey=\"mobile\"\n                      fill=\"var(--color-mobile)\"\n                      radius={4}\n                    />\n                  </BarChart>\n                </ChartContainer>\n              </CardContent>\n            </Card>\n          </div>\n          <div className=\"flex flex-col gap-6\">\n            <Card className=\"hidden md:flex\">\n              <CardContent>\n                <div className=\"grid grid-cols-4 place-items-center gap-6 md:grid-cols-7\">\n                  {PREVIEW_ICONS.map((icon, index) => (\n                    <Card\n                      key={index}\n                      className=\"ring-border flex size-8 items-center justify-center rounded-md p-0 ring *:[svg]:size-4\"\n                    >\n                      <IconPlaceholder\n                        lucide={icon.lucide}\n                        tabler={icon.tabler}\n                        hugeicons={icon.hugeicons}\n                        phosphor={icon.phosphor}\n                        remixicon={icon.remixicon}\n                      />\n                    </Card>\n                  ))}\n                </div>\n              </CardContent>\n            </Card>\n            <Card className=\"flex-1\">\n              <CardContent className=\"flex flex-1 flex-col gap-6\">\n                <div className=\"flex flex-col gap-4\">\n                  <div className=\"flex flex-wrap gap-2\">\n                    <Button>Default</Button>\n                    <Button variant=\"secondary\">Secondary</Button>\n                    <Button variant=\"outline\">Outline</Button>\n                    <Button variant=\"destructive\">Destructive</Button>\n                  </div>\n                  <Item variant=\"outline\">\n                    <ItemContent>\n                      <ItemTitle>Two-factor authentication</ItemTitle>\n                      <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                        Verify via email or phone number.\n                      </ItemDescription>\n                    </ItemContent>\n                    <ItemActions className=\"hidden md:flex\">\n                      <Button size=\"sm\" variant=\"secondary\">\n                        Enable\n                      </Button>\n                    </ItemActions>\n                  </Item>\n                  <div className=\"flex flex-wrap items-center gap-1.5\">\n                    <Badge>Badge</Badge>\n                    <Badge variant=\"secondary\">Secondary</Badge>\n                    <Badge variant=\"outline\">Outline</Badge>\n                    <div className=\"mt-2 flex gap-3 md:mt-0 md:ml-auto\">\n                      <Switch defaultChecked />\n                      <RadioGroup\n                        defaultValue=\"apple\"\n                        className=\"flex flex-row gap-3\"\n                      >\n                        <RadioGroupItem value=\"apple\" />\n                        <RadioGroupItem value=\"banana\" />\n                      </RadioGroup>\n                      <div className=\"flex flex-row gap-3\">\n                        <Checkbox defaultChecked />\n                        <Checkbox />\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <Field className=\"flex-row\">\n                  <Input placeholder=\"Name\" />\n                </Field>\n                <Field className=\"flex-1 flex-row\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n                <Slider\n                  value={[500]}\n                  max={1000}\n                  min={0}\n                  step={10}\n                  className=\"mt-2 w-full\"\n                  aria-label=\"Slider\"\n                />\n                <div className=\"flex gap-2 md:gap-4\">\n                  <AlertDialog>\n                    <AlertDialogTrigger asChild>\n                      <Button variant=\"outline\">\n                        <span className=\"hidden md:block\">Alert Dialog</span>\n                        <span className=\"block md:hidden\">Dialog</span>\n                      </Button>\n                    </AlertDialogTrigger>\n                    <AlertDialogContent size=\"sm\">\n                      <AlertDialogHeader>\n                        <AlertDialogMedia>\n                          <IconPlaceholder\n                            lucide=\"BluetoothIcon\"\n                            tabler=\"IconBluetooth\"\n                            hugeicons=\"BluetoothIcon\"\n                            phosphor=\"BluetoothIcon\"\n                            remixicon=\"RiBluetoothLine\"\n                          />\n                        </AlertDialogMedia>\n                        <AlertDialogTitle>\n                          Allow accessory to connect?\n                        </AlertDialogTitle>\n                        <AlertDialogDescription>\n                          Do you want to allow the USB accessory to connect to\n                          this device?\n                        </AlertDialogDescription>\n                      </AlertDialogHeader>\n                      <AlertDialogFooter>\n                        <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                        <AlertDialogAction>Allow</AlertDialogAction>\n                      </AlertDialogFooter>\n                    </AlertDialogContent>\n                  </AlertDialog>\n                  <ButtonGroup>\n                    <Button variant=\"outline\">Button Group</Button>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger asChild>\n                        <Button variant=\"outline\" size=\"icon\">\n                          <IconPlaceholder\n                            lucide=\"ChevronUpIcon\"\n                            tabler=\"IconChevronUp\"\n                            hugeicons=\"ArrowUp01Icon\"\n                            phosphor=\"CaretUpIcon\"\n                            remixicon=\"RiArrowUpSLine\"\n                          />\n                        </Button>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"end\" className=\"w-52\">\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"VolumeX\"\n                              tabler=\"IconVolume\"\n                              hugeicons=\"VolumeOffIcon\"\n                              phosphor=\"SpeakerSlashIcon\"\n                              remixicon=\"RiVolumeMuteLine\"\n                            />\n                            Mute Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckboxCircleLine\"\n                            />\n                            Mark as Read\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"UserRoundXIcon\"\n                              tabler=\"IconUserX\"\n                              hugeicons=\"UserRemove01Icon\"\n                              phosphor=\"UserMinusIcon\"\n                              remixicon=\"RiUserMinusLine\"\n                            />\n                            Block User\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShareIcon\"\n                              tabler=\"IconShare\"\n                              hugeicons=\"Share03Icon\"\n                              phosphor=\"ShareIcon\"\n                              remixicon=\"RiShareLine\"\n                            />\n                            Share Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                            Copy Conversation\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"AlertTriangleIcon\"\n                              tabler=\"IconAlertTriangle\"\n                              hugeicons=\"AlertCircleIcon\"\n                              phosphor=\"WarningIcon\"\n                              remixicon=\"RiErrorWarningLine\"\n                            />\n                            Report Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem variant=\"destructive\">\n                            <IconPlaceholder\n                              lucide=\"TrashIcon\"\n                              tabler=\"IconTrash\"\n                              hugeicons=\"Delete02Icon\"\n                              phosphor=\"TrashIcon\"\n                              remixicon=\"RiDeleteBinLine\"\n                            />\n                            Delete Conversation\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </ButtonGroup>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </Example>\n    </div>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/registry/bases/base/blocks/preview.tsx b/apps/v4/registry/bases/base/blocks/preview.tsx
index 7ce98822ae..8470f215bf 100644
--- a/apps/v4/registry/bases/base/blocks/preview.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview.tsx
@@ -202,14 +202,14 @@ export default function PreviewExample() {
   }, [params.radius])
 
   return (
-    <ExampleWrapper className="w-full max-w-none! lg:p-0">
+    <div>
       <Example
         containerClassName="col-span-2 max-w-none"
-        className="bg-muted dark:bg-background flex min-h-svh flex-col items-center justify-center border-none sm:p-16"
+        className="bg-muted dark:bg-background flex min-h-svh flex-col items-center justify-center border-none p-0 sm:p-0"
       >
         <div
           data-slot="capture-target"
-          className="grid max-w-4xl gap-6 p-6 lg:grid-cols-2"
+          className="grid max-w-4xl gap-6 p-8 lg:grid-cols-2"
           style={
             {
               "--radius": radiusValue,
@@ -241,7 +241,7 @@ export default function PreviewExample() {
                       key={variant}
                       className="flex flex-col flex-wrap items-center gap-2"
                     >
-                      <Card
+                      <Item
                         className="ring-border aspect-square w-full bg-(--color) ring"
                         style={
                           {
@@ -294,7 +294,7 @@ export default function PreviewExample() {
           <div className="flex flex-col gap-6">
             <Card className="hidden md:flex">
               <CardContent>
-                <div className="grid grid-cols-4 place-items-center gap-6 md:grid-cols-7">
+                <div className="grid grid-cols-4 place-items-center gap-4 md:grid-cols-7">
                   {PREVIEW_ICONS.map((icon, index) => (
                     <Card
                       key={index}
@@ -313,7 +313,7 @@ export default function PreviewExample() {
               </CardContent>
             </Card>
             <Card className="flex-1">
-              <CardContent className="flex flex-col gap-6">
+              <CardContent className="flex flex-1 flex-col gap-6">
                 <div className="flex flex-col gap-4">
                   <div className="flex flex-wrap gap-2">
                     <Button>Default</Button>
@@ -357,7 +357,7 @@ export default function PreviewExample() {
                 <Field className="flex-row">
                   <Input placeholder="Name" />
                 </Field>
-                <Field className="flex-row">
+                <Field className="flex-1 flex-row">
                   <Textarea placeholder="Message" className="resize-none" />
                 </Field>
                 <Slider
@@ -503,6 +503,6 @@ export default function PreviewExample() {
           </div>
         </div>
       </Example>
-    </ExampleWrapper>
+    </div>
   )
 }
diff --git a/apps/v4/registry/bases/radix/blocks/preview.tsx b/apps/v4/registry/bases/radix/blocks/preview.tsx
index d55b26f1c7..77a617078d 100644
--- a/apps/v4/registry/bases/radix/blocks/preview.tsx
+++ b/apps/v4/registry/bases/radix/blocks/preview.tsx
@@ -202,14 +202,14 @@ export default function PreviewExample() {
   }, [params.radius])
 
   return (
-    <ExampleWrapper className="w-full max-w-none! lg:p-0">
+    <div>
       <Example
         containerClassName="col-span-2 max-w-none"
-        className="bg-muted dark:bg-background flex min-h-svh flex-col items-center justify-center border-none sm:p-16"
+        className="bg-muted dark:bg-background flex min-h-svh flex-col items-center justify-center border-none p-0 sm:p-0"
       >
         <div
           data-slot="capture-target"
-          className="grid max-w-4xl gap-6 p-6 lg:grid-cols-2"
+          className="grid max-w-4xl gap-6 p-8 lg:grid-cols-2"
           style={
             {
               "--radius": radiusValue,
@@ -241,7 +241,7 @@ export default function PreviewExample() {
                       key={variant}
                       className="flex flex-col flex-wrap items-center gap-2"
                     >
-                      <Card
+                      <Item
                         className="ring-border aspect-square w-full bg-(--color) ring"
                         style={
                           {
@@ -294,7 +294,7 @@ export default function PreviewExample() {
           <div className="flex flex-col gap-6">
             <Card className="hidden md:flex">
               <CardContent>
-                <div className="grid grid-cols-4 place-items-center gap-6 md:grid-cols-7">
+                <div className="grid grid-cols-4 place-items-center gap-4 md:grid-cols-7">
                   {PREVIEW_ICONS.map((icon, index) => (
                     <Card
                       key={index}
@@ -313,7 +313,7 @@ export default function PreviewExample() {
               </CardContent>
             </Card>
             <Card className="flex-1">
-              <CardContent className="flex flex-col gap-6">
+              <CardContent className="flex flex-1 flex-col gap-6">
                 <div className="flex flex-col gap-4">
                   <div className="flex flex-wrap gap-2">
                     <Button>Default</Button>
@@ -357,7 +357,7 @@ export default function PreviewExample() {
                 <Field className="flex-row">
                   <Input placeholder="Name" />
                 </Field>
-                <Field className="flex-row">
+                <Field className="flex-1 flex-row">
                   <Textarea placeholder="Message" className="resize-none" />
                 </Field>
                 <Slider
@@ -505,6 +505,6 @@ export default function PreviewExample() {
           </div>
         </div>
       </Example>
-    </ExampleWrapper>
+    </div>
   )
 }
diff --git a/apps/v4/scripts/capture-explore.mts b/apps/v4/scripts/capture-explore.mts
index 3d992d205e..59d73c2163 100644
--- a/apps/v4/scripts/capture-explore.mts
+++ b/apps/v4/scripts/capture-explore.mts
@@ -6,6 +6,7 @@ import { decodePreset } from "shadcn/preset"
 import { EXPLORE_PRESETS } from "../lib/explore"
 
 const PRESETS_PATH = path.join(process.cwd(), "public/presets")
+const force = process.argv.includes("--force")
 
 // ----------------------------------------------------------------------------
 // Capture explore preset screenshots.
@@ -16,11 +17,13 @@ async function captureScreenshots() {
     mkdirSync(PRESETS_PATH, { recursive: true })
   }
 
-  const presets = EXPLORE_PRESETS.filter((code) => {
-    const lightPath = path.join(PRESETS_PATH, `${code}-light.png`)
-    const darkPath = path.join(PRESETS_PATH, `${code}-dark.png`)
-    return !existsSync(lightPath) || !existsSync(darkPath)
-  })
+  const presets = force
+    ? EXPLORE_PRESETS
+    : EXPLORE_PRESETS.filter((code) => {
+        const lightPath = path.join(PRESETS_PATH, `${code}-light.png`)
+        const darkPath = path.join(PRESETS_PATH, `${code}-dark.png`)
+        return !existsSync(lightPath) || !existsSync(darkPath)
+      })
 
   if (presets.length === 0) {
     console.log("✨ All screenshots exist, nothing to capture")
@@ -57,7 +60,7 @@ async function captureScreenshots() {
         `${code}-${theme}.png`
       )
 
-      if (existsSync(screenshotPath)) {
+      if (!force && existsSync(screenshotPath)) {
         continue
       }
 
diff --git a/packages/shadcn/src/utils/preset.test.ts b/packages/shadcn/src/utils/preset.test.ts
index 3e60b1b0b1..334c3ac03a 100644
--- a/packages/shadcn/src/utils/preset.test.ts
+++ b/packages/shadcn/src/utils/preset.test.ts
@@ -68,7 +68,7 @@ describe("encodePreset / decodePreset", () => {
 
   it("should start with the version character", () => {
     const code = encodePreset(DEFAULT_PRESET_CONFIG)
-    expect(code[0]).toBe("A")
+    expect(code[0]).toBe("a")
   })
 
   it("should handle partial config by filling defaults", () => {
@@ -153,7 +153,7 @@ describe("decodePreset edge cases", () => {
   })
 
   it("should return null for wrong version prefix", () => {
-    expect(decodePreset("B123")).toBeNull()
+    expect(decodePreset("b123")).toBeNull()
   })
 
   it("should return null for invalid base62 characters", () => {
@@ -196,7 +196,7 @@ describe("isValidPreset", () => {
 
   it("should return false for invalid codes", () => {
     expect(isValidPreset("")).toBe(false)
-    expect(isValidPreset("B123")).toBe(false)
+    expect(isValidPreset("b123")).toBe(false)
   })
 })
 
diff --git a/packages/shadcn/src/utils/preset.ts b/packages/shadcn/src/utils/preset.ts
index 0308205019..550300ea59 100644
--- a/packages/shadcn/src/utils/preset.ts
+++ b/packages/shadcn/src/utils/preset.ts
@@ -100,7 +100,7 @@ export const DEFAULT_PRESET_CONFIG: PresetConfig = Object.fromEntries(
 const BASE62 = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"
 
 // Version prefix — 'A' = version 1.
-const VERSION_CHAR = "A"
+const VERSION_CHAR = "a"
 
 export function toBase62(num: number) {
   if (num === 0) return "0"