diff --git a/apps/v4/app/(create)/components/project-form.tsx b/apps/v4/app/(create)/components/project-form.tsx
index 82be82152..e9d89bada 100644
--- a/apps/v4/app/(create)/components/project-form.tsx
+++ b/apps/v4/app/(create)/components/project-form.tsx
@@ -10,6 +10,7 @@ import { HugeiconsIcon } from "@hugeicons/react"
 
 import { useConfig } from "@/hooks/use-config"
 import { copyToClipboardWithMeta } from "@/components/copy-button"
+import { BASES } from "@/registry/config"
 import { Button } from "@/registry/new-york-v4/ui/button"
 import {
   Collapsible,
@@ -87,23 +88,25 @@ export function ProjectForm() {
   const commands = React.useMemo(() => {
     const origin = process.env.NEXT_PUBLIC_APP_URL || "http://localhost:4000"
     const isLocalDev = origin.includes("localhost")
+    const baseFlag = params.base ? ` --base ${params.base}` : ""
     const rtlFlag = params.rtl ? " --rtl" : ""
     const templateFlag = params.template ? ` --template ${params.template}` : ""
+    const flags = `${baseFlag}${rtlFlag}`
 
     return isLocalDev
       ? {
-          pnpm: `pnpm shadcn init${rtlFlag} --preset ${presetCode}${templateFlag}`,
-          npm: `pnpm shadcn init${rtlFlag} --preset ${presetCode}${templateFlag}`,
-          yarn: `pnpm shadcn init${rtlFlag} --preset ${presetCode}${templateFlag}`,
-          bun: `pnpm shadcn init${rtlFlag} --preset ${presetCode}${templateFlag}`,
+          pnpm: `pnpm shadcn init${flags} --preset ${presetCode}${templateFlag}`,
+          npm: `pnpm shadcn init${flags} --preset ${presetCode}${templateFlag}`,
+          yarn: `pnpm shadcn init${flags} --preset ${presetCode}${templateFlag}`,
+          bun: `pnpm shadcn init${flags} --preset ${presetCode}${templateFlag}`,
         }
       : {
-          pnpm: `pnpm dlx shadcn@latest init${rtlFlag} --preset ${presetCode}${templateFlag}`,
-          npm: `npx shadcn@latest init${rtlFlag} --preset ${presetCode}${templateFlag}`,
-          yarn: `yarn dlx shadcn@latest init${rtlFlag} --preset ${presetCode}${templateFlag}`,
-          bun: `bunx --bun shadcn@latest init${rtlFlag} --preset ${presetCode}${templateFlag}`,
+          pnpm: `pnpm dlx shadcn@latest init${flags} --preset ${presetCode}${templateFlag}`,
+          npm: `npx shadcn@latest init${flags} --preset ${presetCode}${templateFlag}`,
+          yarn: `yarn dlx shadcn@latest init${flags} --preset ${presetCode}${templateFlag}`,
+          bun: `bunx --bun shadcn@latest init${flags} --preset ${presetCode}${templateFlag}`,
         }
-  }, [presetCode, params.rtl, params.template])
+  }, [presetCode, params.base, params.rtl, params.template])
 
   const command = commands[packageManager]
 
@@ -222,7 +225,40 @@ export function ProjectForm() {
                 <path d="m6 9 6 6 6-6" />
               </svg>
             </CollapsibleTrigger>
-            <CollapsibleContent className="border-t px-3 py-3">
+            <CollapsibleContent className="space-y-4 border-t px-3 py-3">
+              <Field>
+                <FieldLabel className="text-sm">Component Library</FieldLabel>
+                <RadioGroup
+                  value={params.base}
+                  onValueChange={(value) => {
+                    setParams({
+                      base: value as "radix" | "base",
+                    })
+                  }}
+                  className="grid grid-cols-2 gap-2"
+                >
+                  {BASES.map((base) => (
+                    <FieldLabel key={base.name} htmlFor={`base-${base.name}`}>
+                      <Field className="flex min-w-0 flex-row items-center gap-2 p-3! *:w-auto!">
+                        <RadioGroupItem
+                          value={base.name}
+                          id={`base-${base.name}`}
+                          className="sr-only"
+                        />
+                        {base.meta?.logo && (
+                          <div
+                            className="text-foreground *:[svg]:text-foreground! size-4 shrink-0 [&_svg]:size-4"
+                            dangerouslySetInnerHTML={{
+                              __html: base.meta.logo,
+                            }}
+                          />
+                        )}
+                        <FieldTitle>{base.title}</FieldTitle>
+                      </Field>
+                    </FieldLabel>
+                  ))}
+                </RadioGroup>
+              </Field>
               <Field orientation="horizontal" className="items-center">
                 <FieldContent className="gap-0.5">
                   <FieldLabel htmlFor="rtl" className="text-sm">
diff --git a/apps/v4/app/(create)/hooks/use-design-system.ts b/apps/v4/app/(create)/hooks/use-design-system.ts
index 7141dbe18..f759d5525 100644
--- a/apps/v4/app/(create)/hooks/use-design-system.ts
+++ b/apps/v4/app/(create)/hooks/use-design-system.ts
@@ -17,7 +17,6 @@ export function usePresetCode() {
 
     // Otherwise encode current params (e.g. on initial load before first interaction).
     return encodePreset({
-      base: params.base ?? undefined,
       style: params.style ?? undefined,
       baseColor: params.baseColor ?? undefined,
       theme: params.theme ?? undefined,
@@ -29,7 +28,6 @@ export function usePresetCode() {
     } as Parameters<typeof encodePreset>[0])
   }, [
     params.preset,
-    params.base,
     params.style,
     params.baseColor,
     params.theme,
diff --git a/apps/v4/app/(create)/lib/search-params.ts b/apps/v4/app/(create)/lib/search-params.ts
index 1fbd44bd6..33d233ac0 100644
--- a/apps/v4/app/(create)/lib/search-params.ts
+++ b/apps/v4/app/(create)/lib/search-params.ts
@@ -78,7 +78,6 @@ const designSystemSearchParams = {
 
 // Design system param keys that get encoded into the preset code.
 const DESIGN_SYSTEM_KEYS = [
-  "base",
   "style",
   "baseColor",
   "theme",
@@ -90,7 +89,9 @@ const DESIGN_SYSTEM_KEYS = [
 ] as const
 
 // Non-design-system keys that get passed through as-is.
+// `base` is not encoded in preset codes — it's an architectural choice, not visual.
 const NON_DESIGN_SYSTEM_KEYS = [
+  "base",
   "item",
   "template",
   "rtl",
@@ -167,7 +168,6 @@ export function useDesignSystemSearchParams(options: Options = {}) {
       // Cast needed: merged values may include null from nuqs resets,
       // but encodePreset handles missing values by falling back to defaults.
       const code = encodePreset({
-        base: merged.base ?? undefined,
         style: merged.style ?? undefined,
         baseColor: merged.baseColor ?? undefined,
         theme: merged.theme ?? undefined,
diff --git a/apps/v4/public/r/styles/base-lyra/input-group.json b/apps/v4/public/r/styles/base-lyra/input-group.json
index c6e150fe9..3866e78bd 100644
--- a/apps/v4/public/r/styles/base-lyra/input-group.json
+++ b/apps/v4/public/r/styles/base-lyra/input-group.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/input-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-none border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot][aria-invalid=true]]:ring-1 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground h-auto gap-2 py-1.5 text-xs font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-none [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\": \"pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"gap-2 text-xs shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-none px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 rounded-none p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\" | \"type\"> &\n  VariantProps<typeof inputGroupButtonVariants> & {\n    type?: \"button\" | \"submit\" | \"reset\"\n  }) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"text-muted-foreground gap-2 text-xs [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({\n  className,\n  ...props\n}: React.ComponentProps<\"input\">) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: React.ComponentProps<\"textarea\">) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-none border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot][aria-invalid=true]]:ring-1 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground h-auto gap-2 py-1.5 text-xs font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-none [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\": \"pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"gap-2 text-xs shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-none px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"gap-1\",\n        \"icon-xs\": \"size-6 rounded-none p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-7 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\" | \"type\"> &\n  VariantProps<typeof inputGroupButtonVariants> & {\n    type?: \"button\" | \"submit\" | \"reset\"\n  }) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"text-muted-foreground gap-2 text-xs [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({\n  className,\n  ...props\n}: React.ComponentProps<\"input\">) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: React.ComponentProps<\"textarea\">) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/preview.json b/apps/v4/public/r/styles/base-lyra/preview.json
index 6d5bf41a7..8268b2e51 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    <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",
+      "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-8 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-4 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 a605a2e95..a46e39080 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    <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",
+      "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-8 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-4 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/input-group.json b/apps/v4/public/r/styles/base-mira/input-group.json
index 9536e9329..7bd4d5dff 100644
--- a/apps/v4/public/r/styles/base-mira/input-group.json
+++ b/apps/v4/public/r/styles/base-mira/input-group.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/input-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport { Textarea } from \"@/registry/base-mira/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"border-input bg-input/20 dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/30 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-7 rounded-md border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-md has-data-[align=block-start]:rounded-md has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot][aria-invalid=true]]:ring-2 has-[textarea]:rounded-md has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground **:data-[slot=kbd]:bg-muted-foreground/10 h-auto gap-1 py-2 text-xs/relaxed font-medium group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-[calc(var(--radius-sm)-2px)] **:data-[slot=kbd]:px-1 **:data-[slot=kbd]:text-[0.625rem] [&>svg:not([class*='size-'])]:size-3.5 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"pl-2 has-[>button]:ml-[-0.275rem] has-[>kbd]:ml-[-0.275rem] order-first\",\n        \"inline-end\": \"pr-2 has-[>button]:mr-[-0.275rem] has-[>kbd]:mr-[-0.275rem] order-last\",\n        \"block-start\":\n          \"px-2 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"gap-2 rounded-md text-xs/relaxed shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-5 gap-1 rounded-[calc(var(--radius-sm)-2px)] px-1 [&>svg:not([class*='size-'])]:size-3\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\" | \"type\"> &\n  VariantProps<typeof inputGroupButtonVariants> & {\n    type?: \"button\" | \"submit\" | \"reset\"\n  }) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"text-muted-foreground gap-2 text-xs/relaxed [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({\n  className,\n  ...props\n}: React.ComponentProps<\"input\">) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: React.ComponentProps<\"textarea\">) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1 resize-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport { Textarea } from \"@/registry/base-mira/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"border-input bg-input/20 dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/30 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-7 rounded-md border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-md has-data-[align=block-start]:rounded-md has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot][aria-invalid=true]]:ring-2 has-[textarea]:rounded-md has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground **:data-[slot=kbd]:bg-muted-foreground/10 h-auto gap-1 py-2 text-xs/relaxed font-medium group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-[calc(var(--radius-sm)-2px)] **:data-[slot=kbd]:px-1 **:data-[slot=kbd]:text-[0.625rem] [&>svg:not([class*='size-'])]:size-3.5 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"pl-2 has-[>button]:ml-[-0.275rem] has-[>kbd]:ml-[-0.275rem] order-first\",\n        \"inline-end\": \"pr-2 has-[>button]:mr-[-0.275rem] has-[>kbd]:mr-[-0.275rem] order-last\",\n        \"block-start\":\n          \"px-2 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"gap-2 rounded-md text-xs/relaxed shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-5 gap-1 rounded-[calc(var(--radius-sm)-2px)] px-1 [&>svg:not([class*='size-'])]:size-3\",\n        sm: \"gap-1\",\n        \"icon-xs\": \"size-6 p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-7 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\" | \"type\"> &\n  VariantProps<typeof inputGroupButtonVariants> & {\n    type?: \"button\" | \"submit\" | \"reset\"\n  }) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"text-muted-foreground gap-2 text-xs/relaxed [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({\n  className,\n  ...props\n}: React.ComponentProps<\"input\">) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: React.ComponentProps<\"textarea\">) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1 resize-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/preview.json b/apps/v4/public/r/styles/base-mira/preview.json
index fa6393049..b9a477a64 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    <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",
+      "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-8 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-4 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 72102574a..1b9d824d3 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    <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",
+      "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-8 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-4 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 877339c27..67a8c8f8d 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    <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",
+      "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-8 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-4 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/input-group.json b/apps/v4/public/r/styles/radix-lyra/input-group.json
index 589dea973..bc2adb213 100644
--- a/apps/v4/public/r/styles/radix-lyra/input-group.json
+++ b/apps/v4/public/r/styles/radix-lyra/input-group.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/input-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport { Textarea } from \"@/registry/radix-lyra/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-none border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot][aria-invalid=true]]:ring-1 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground h-auto gap-2 py-1.5 text-xs font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-none [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\": \"pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"gap-2 text-xs shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-none px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 rounded-none p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"text-muted-foreground gap-2 text-xs [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({\n  className,\n  ...props\n}: React.ComponentProps<\"input\">) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: React.ComponentProps<\"textarea\">) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport { Textarea } from \"@/registry/radix-lyra/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-none border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot][aria-invalid=true]]:ring-1 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground h-auto gap-2 py-1.5 text-xs font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-none [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\": \"pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"gap-2 text-xs shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-none px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"gap-1\",\n        \"icon-xs\": \"size-6 rounded-none p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-7 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"text-muted-foreground gap-2 text-xs [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({\n  className,\n  ...props\n}: React.ComponentProps<\"input\">) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: React.ComponentProps<\"textarea\">) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/preview.json b/apps/v4/public/r/styles/radix-lyra/preview.json
index c464b15dc..15dfb21e4 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    <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",
+      "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-8 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-4 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 b253e93f3..ad460c6d2 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    <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",
+      "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-8 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-4 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/input-group.json b/apps/v4/public/r/styles/radix-mira/input-group.json
index 1c9ae93e4..32d5b0f18 100644
--- a/apps/v4/public/r/styles/radix-mira/input-group.json
+++ b/apps/v4/public/r/styles/radix-mira/input-group.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/input-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport { Textarea } from \"@/registry/radix-mira/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"border-input bg-input/20 dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/30 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-7 rounded-md border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-md has-data-[align=block-start]:rounded-md has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot][aria-invalid=true]]:ring-2 has-[textarea]:rounded-md has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground **:data-[slot=kbd]:bg-muted-foreground/10 h-auto gap-1 py-2 text-xs/relaxed font-medium group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-[calc(var(--radius-sm)-2px)] **:data-[slot=kbd]:px-1 **:data-[slot=kbd]:text-[0.625rem] [&>svg:not([class*='size-'])]:size-3.5 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"pl-2 has-[>button]:ml-[-0.275rem] has-[>kbd]:ml-[-0.275rem] order-first\",\n        \"inline-end\": \"pr-2 has-[>button]:mr-[-0.275rem] has-[>kbd]:mr-[-0.275rem] order-last\",\n        \"block-start\":\n          \"px-2 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"gap-2 rounded-md text-xs/relaxed shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-5 gap-1 rounded-[calc(var(--radius-sm)-2px)] px-1 [&>svg:not([class*='size-'])]:size-3\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"text-muted-foreground gap-2 text-xs/relaxed [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({\n  className,\n  ...props\n}: React.ComponentProps<\"input\">) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: React.ComponentProps<\"textarea\">) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1 resize-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport { Textarea } from \"@/registry/radix-mira/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"border-input bg-input/20 dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/30 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-7 rounded-md border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-md has-data-[align=block-start]:rounded-md has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot][aria-invalid=true]]:ring-2 has-[textarea]:rounded-md has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground **:data-[slot=kbd]:bg-muted-foreground/10 h-auto gap-1 py-2 text-xs/relaxed font-medium group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-[calc(var(--radius-sm)-2px)] **:data-[slot=kbd]:px-1 **:data-[slot=kbd]:text-[0.625rem] [&>svg:not([class*='size-'])]:size-3.5 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"pl-2 has-[>button]:ml-[-0.275rem] has-[>kbd]:ml-[-0.275rem] order-first\",\n        \"inline-end\": \"pr-2 has-[>button]:mr-[-0.275rem] has-[>kbd]:mr-[-0.275rem] order-last\",\n        \"block-start\":\n          \"px-2 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"gap-2 rounded-md text-xs/relaxed shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-5 gap-1 rounded-[calc(var(--radius-sm)-2px)] px-1 [&>svg:not([class*='size-'])]:size-3\",\n        sm: \"gap-1\",\n        \"icon-xs\": \"size-6 p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-7 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"text-muted-foreground gap-2 text-xs/relaxed [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({\n  className,\n  ...props\n}: React.ComponentProps<\"input\">) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: React.ComponentProps<\"textarea\">) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1 resize-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/preview.json b/apps/v4/public/r/styles/radix-mira/preview.json
index 6ead429d2..d54b1ad0f 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    <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",
+      "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-8 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-4 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 07560d0bf..eb9c17795 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    <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",
+      "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-8 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-4 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 11cb2bf81..84c015c03 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    <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",
+      "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-8 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-4 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/styles/style-lyra.css b/apps/v4/registry/styles/style-lyra.css
index c3513b482..5d9a00f61 100644
--- a/apps/v4/registry/styles/style-lyra.css
+++ b/apps/v4/registry/styles/style-lyra.css
@@ -1317,8 +1317,12 @@
     @apply size-6 rounded-none p-0 has-[>svg]:p-0;
   }
 
+  .cn-input-group-button-size-sm {
+    @apply gap-1;
+  }
+
   .cn-input-group-button-size-icon-sm {
-    @apply size-8 p-0 has-[>svg]:p-0;
+    @apply size-7 p-0 has-[>svg]:p-0;
   }
 
   .cn-input-group-text {
diff --git a/apps/v4/registry/styles/style-mira.css b/apps/v4/registry/styles/style-mira.css
index 89e0aef69..300d6367b 100644
--- a/apps/v4/registry/styles/style-mira.css
+++ b/apps/v4/registry/styles/style-mira.css
@@ -1344,8 +1344,12 @@
     @apply size-6 p-0 has-[>svg]:p-0;
   }
 
+  .cn-input-group-button-size-sm {
+    @apply gap-1;
+  }
+
   .cn-input-group-button-size-icon-sm {
-    @apply size-8 p-0 has-[>svg]:p-0;
+    @apply size-7 p-0 has-[>svg]:p-0;
   }
 
   .cn-input-group-text {
diff --git a/apps/v4/scripts/capture-explore.mts b/apps/v4/scripts/capture-explore.mts
index 59d73c216..edeaab4de 100644
--- a/apps/v4/scripts/capture-explore.mts
+++ b/apps/v4/scripts/capture-explore.mts
@@ -45,7 +45,7 @@ async function captureScreenshots() {
       continue
     }
 
-    const pageUrl = `http://localhost:4000/preview/${decoded.base}/preview?preset=${code}`
+    const pageUrl = `http://localhost:4000/preview/radix/preview?preset=${code}`
 
     const page = await browser.newPage()
     await page.goto(pageUrl, {
diff --git a/packages/shadcn/src/preflights/preflight-init.ts b/packages/shadcn/src/preflights/preflight-init.ts
index 035e51a20..ce5c6f5d3 100644
--- a/packages/shadcn/src/preflights/preflight-init.ts
+++ b/packages/shadcn/src/preflights/preflight-init.ts
@@ -58,8 +58,7 @@ export async function preFlightInit(
     | Record<string, unknown>
     | undefined
   const projectInfo = await getProjectInfo(options.cwd, {
-    configCssFile:
-      typeof tailwind?.css === "string" ? tailwind.css : undefined,
+    configCssFile: typeof tailwind?.css === "string" ? tailwind.css : undefined,
   })
   if (!projectInfo || projectInfo?.framework.name === "manual") {
     errors[ERRORS.UNSUPPORTED_FRAMEWORK] = true
diff --git a/packages/shadcn/src/utils/add-components.ts b/packages/shadcn/src/utils/add-components.ts
index 7c6e0ab24..7bcfe08e5 100644
--- a/packages/shadcn/src/utils/add-components.ts
+++ b/packages/shadcn/src/utils/add-components.ts
@@ -137,8 +137,8 @@ async function addProjectComponents(
   // Write CSS last so the file watcher triggers a rebuild
   // after all component files and dependencies are in place.
   const overwriteCssVars = tree.cssVars
-    ? (options.overwriteCssVars ??
-      (await shouldOverwriteCssVars(components, config)))
+    ? options.overwriteCssVars ??
+      (await shouldOverwriteCssVars(components, config))
     : undefined
   await updateCss(tree.css, config, {
     silent: options.silent,
@@ -267,7 +267,9 @@ async function addWorkspaceComponents(
 
     const configKey = FILE_TYPE_TO_CONFIG_KEY[type]
     const targetConfig =
-      configKey && workspaceConfig[configKey] ? workspaceConfig[configKey] : config
+      configKey && workspaceConfig[configKey]
+        ? workspaceConfig[configKey]
+        : config
 
     const typeWorkspaceRoot = findCommonRoot(
       config.resolvedPaths.cwd,
@@ -309,8 +311,8 @@ async function addWorkspaceComponents(
   // 6. Write CSS last so the file watcher triggers a rebuild
   // after all component files and dependencies are in place.
   const overwriteCssVars = tree.cssVars
-    ? (options.overwriteCssVars ??
-      (await shouldOverwriteCssVars(components, config)))
+    ? options.overwriteCssVars ??
+      (await shouldOverwriteCssVars(components, config))
     : undefined
   await updateCss(tree.css, mainTargetConfig, {
     silent: true,
diff --git a/packages/shadcn/src/utils/get-project-info.ts b/packages/shadcn/src/utils/get-project-info.ts
index 0e57dbb68..ff8faddbc 100644
--- a/packages/shadcn/src/utils/get-project-info.ts
+++ b/packages/shadcn/src/utils/get-project-info.ts
@@ -245,10 +245,7 @@ export async function getTailwindVersion(
   return "v4"
 }
 
-export async function getTailwindCssFile(
-  cwd: string,
-  configCssFile?: string
-) {
+export async function getTailwindCssFile(cwd: string, configCssFile?: string) {
   // If the existing config has a known CSS file, check it first.
   if (configCssFile) {
     const resolvedPath = path.resolve(cwd, configCssFile)