diff --git a/apps/v4/public/r/config.json b/apps/v4/public/r/config.json
index 31867c3cfb..e8a383bb79 100644
--- a/apps/v4/public/r/config.json
+++ b/apps/v4/public/r/config.json
@@ -3,13 +3,13 @@
     {
       "name": "radix-vega",
       "title": "Vega (Radix)",
-      "description": "Vega / Lucide / Geist Sans",
+      "description": "Vega / Lucide / Inter",
       "base": "radix",
       "style": "vega",
       "baseColor": "neutral",
       "theme": "neutral",
       "iconLibrary": "lucide",
-      "font": "geist",
+      "font": "inter",
       "item": "Item",
       "menuAccent": "subtle",
       "menuColor": "default",
diff --git a/apps/v4/public/r/styles/base-lyra/calendar.json b/apps/v4/public/r/styles/base-lyra/calendar.json
index 5de2511806..6ef42f3937 100644
--- a/apps/v4/public/r/styles/base-lyra/calendar.json
+++ b/apps/v4/public/r/styles/base-lyra/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-2 [--cell-size:--spacing(7)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-2 [--cell-size:--spacing(7)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/input-group-example.json b/apps/v4/public/r/styles/base-lyra/input-group-example.json
index e6df8720d1..0736085323 100644
--- a/apps/v4/public/r/styles/base-lyra/input-group-example.json
+++ b/apps/v4/public/r/styles/base-lyra/input-group-example.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/input-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/base/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <InputGroupButton className=\"text-muted-foreground tabular-nums\" />\n                  }\n                >\n                  {country}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDownIcon\"\n                    phosphor=\"CaretDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>\n                <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </InputGroupButton>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/base/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <InputGroupButton className=\"text-muted-foreground tabular-nums\" />\n                  }\n                >\n                  {country}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDownIcon\"\n                    phosphor=\"CaretDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>\n                <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                  />\n                </InputGroupButton>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/item-example.json b/apps/v4/public/r/styles/base-lyra/item-example.json
index 8ecf0dfae5..54484b6776 100644
--- a/apps/v4/public/r/styles/base-lyra/item-example.json
+++ b/apps/v4/public/r/styles/base-lyra/item-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/item-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/toggle-example.json b/apps/v4/public/r/styles/base-lyra/toggle-example.json
index 543e10cce1..756132b6a2 100644
--- a/apps/v4/public/r/styles/base-lyra/toggle-example.json
+++ b/apps/v4/public/r/styles/base-lyra/toggle-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/toggle-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Toggle } from \"@/registry/bases/base/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleBasic />\n      <ToggleOutline />\n      <ToggleSizes />\n      <ToggleWithButtonText />\n      <ToggleWithButtonIcon />\n      <ToggleWithButtonIconText />\n      <ToggleDisabled />\n      <ToggleWithIcon />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bold\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleOutline() {\n  return (\n    <Example title=\"Outline\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n          Italic\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n          Bold\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle small\" size=\"sm\">\n          Small\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n          Default\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle large\" size=\"lg\">\n          Large\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonText() {\n  return (\n    <Example title=\"With Button Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm\" size=\"sm\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg\" size=\"lg\">\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIcon() {\n  return (\n    <Example title=\"With Button Icon\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIconText() {\n  return (\n    <Example title=\"With Button Icon + Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon text\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon text\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon text\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle disabled\" disabled>\n          Disabled\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle disabled outline\" disabled>\n          Disabled\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bookmark\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bookmark outline\">\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n          Bookmark\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Toggle } from \"@/registry/bases/base/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleBasic />\n      <ToggleOutline />\n      <ToggleSizes />\n      <ToggleWithButtonText />\n      <ToggleWithButtonIcon />\n      <ToggleWithButtonIconText />\n      <ToggleDisabled />\n      <ToggleWithIcon />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bold\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleOutline() {\n  return (\n    <Example title=\"Outline\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n          Italic\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n          Bold\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle small\" size=\"sm\">\n          Small\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n          Default\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle large\" size=\"lg\">\n          Large\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonText() {\n  return (\n    <Example title=\"With Button Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm\" size=\"sm\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg\" size=\"lg\">\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIcon() {\n  return (\n    <Example title=\"With Button Icon\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n            />\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n            />\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIconText() {\n  return (\n    <Example title=\"With Button Icon + Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon text\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon text\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon text\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle disabled\" disabled>\n          Disabled\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle disabled outline\" disabled>\n          Disabled\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bookmark\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bookmark outline\">\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n          Bookmark\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/toggle-group-example.json b/apps/v4/public/r/styles/base-lyra/toggle-group-example.json
index 84f4b5d691..b3828dd720 100644
--- a/apps/v4/public/r/styles/base-lyra/toggle-group-example.json
+++ b/apps/v4/public/r/styles/base-lyra/toggle-group-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/toggle-group-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/bases/base/ui/toggle-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleGroupBasic />\n      <ToggleGroupOutline />\n      <ToggleGroupOutlineWithIcons />\n      <ToggleGroupSizes />\n      <ToggleGroupSpacing />\n      <ToggleGroupWithIcons />\n      <ToggleGroupFilter />\n      <ToggleGroupDateRange />\n      <ToggleGroupSort />\n      <ToggleGroupWithInputAndSelect />\n      <ToggleGroupVertical />\n      <ToggleGroupVerticalOutline />\n      <ToggleGroupVerticalOutlineWithIcons />\n      <ToggleGroupVerticalWithSpacing />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ToggleGroup multiple spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutline() {\n  return (\n    <Example title=\"Outline\">\n      <ToggleGroup variant=\"outline\" defaultValue={[\"all\"]}>\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"missed\" aria-label=\"Toggle missed\">\n          Missed\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutlineWithIcons() {\n  return (\n    <Example title=\"Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <ToggleGroup size=\"sm\" defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <ToggleGroup defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSpacing() {\n  return (\n    <Example title=\"With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ToggleGroup multiple variant=\"outline\" spacing={2} size=\"sm\">\n        <ToggleGroupItem\n          value=\"star\"\n          aria-label=\"Toggle star\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"StarIcon\"\n            tabler=\"IconStar\"\n            hugeicons=\"StarIcon\"\n            phosphor=\"StarIcon\"\n          />\n          Star\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"heart\"\n          aria-label=\"Toggle heart\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconHeart\"\n            hugeicons=\"FavouriteIcon\"\n            phosphor=\"HeartIcon\"\n          />\n          Heart\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"bookmark\"\n          aria-label=\"Toggle bookmark\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n          />\n          Bookmark\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFilter() {\n  return (\n    <Example title=\"Filter\">\n      <ToggleGroup defaultValue={[\"all\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"all\" aria-label=\"All\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupDateRange() {\n  return (\n    <Example title=\"Date Range\">\n      <ToggleGroup\n        defaultValue={[\"today\"]}\n        variant=\"outline\"\n        size=\"sm\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"today\" aria-label=\"Today\">\n          Today\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"week\" aria-label=\"This Week\">\n          This Week\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"month\" aria-label=\"This Month\">\n          This Month\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"year\" aria-label=\"This Year\">\n          This Year\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSort() {\n  return (\n    <Example title=\"Sort\">\n      <ToggleGroup defaultValue={[\"newest\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"newest\" aria-label=\"Newest\">\n          <IconPlaceholder\n            lucide=\"ArrowDownIcon\"\n            tabler=\"IconArrowDown\"\n            hugeicons=\"ArrowDownIcon\"\n            phosphor=\"ArrowDownIcon\"\n          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n            phosphor=\"ArrowUpIcon\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\n            phosphor=\"TrendUpIcon\"\n          />\n          Popular\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithInputAndSelect() {\n  const items = [\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Archived\", value: \"archived\" },\n  ]\n  return (\n    <Example title=\"With Input and Select\">\n      <div className=\"flex items-center gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items} defaultValue={items[0]}>\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <ToggleGroup defaultValue={[\"grid\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n            Grid\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"list\" aria-label=\"List view\">\n            List\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ToggleGroup multiple orientation=\"vertical\" spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutline() {\n  return (\n    <Example title=\"Vertical Outline\">\n      <ToggleGroup\n        variant=\"outline\"\n        defaultValue={[\"all\"]}\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Toggle active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Toggle completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Toggle archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutlineWithIcons() {\n  return (\n    <Example title=\"Vertical Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple orientation=\"vertical\" size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalWithSpacing() {\n  return (\n    <Example title=\"Vertical With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        orientation=\"vertical\"\n        spacing={1}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/bases/base/ui/toggle-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleGroupBasic />\n      <ToggleGroupOutline />\n      <ToggleGroupOutlineWithIcons />\n      <ToggleGroupSizes />\n      <ToggleGroupSpacing />\n      <ToggleGroupWithIcons />\n      <ToggleGroupFilter />\n      <ToggleGroupDateRange />\n      <ToggleGroupSort />\n      <ToggleGroupWithInputAndSelect />\n      <ToggleGroupVertical />\n      <ToggleGroupVerticalOutline />\n      <ToggleGroupVerticalOutlineWithIcons />\n      <ToggleGroupVerticalWithSpacing />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ToggleGroup multiple spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutline() {\n  return (\n    <Example title=\"Outline\">\n      <ToggleGroup variant=\"outline\" defaultValue={[\"all\"]}>\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"missed\" aria-label=\"Toggle missed\">\n          Missed\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutlineWithIcons() {\n  return (\n    <Example title=\"Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <ToggleGroup size=\"sm\" defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <ToggleGroup defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSpacing() {\n  return (\n    <Example title=\"With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ToggleGroup multiple variant=\"outline\" spacing={2} size=\"sm\">\n        <ToggleGroupItem\n          value=\"star\"\n          aria-label=\"Toggle star\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"StarIcon\"\n            tabler=\"IconStar\"\n            hugeicons=\"StarIcon\"\n            phosphor=\"StarIcon\"\n          />\n          Star\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"heart\"\n          aria-label=\"Toggle heart\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconHeart\"\n            hugeicons=\"FavouriteIcon\"\n            phosphor=\"HeartIcon\"\n          />\n          Heart\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"bookmark\"\n          aria-label=\"Toggle bookmark\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n          />\n          Bookmark\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFilter() {\n  return (\n    <Example title=\"Filter\">\n      <ToggleGroup defaultValue={[\"all\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"all\" aria-label=\"All\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupDateRange() {\n  return (\n    <Example title=\"Date Range\">\n      <ToggleGroup\n        defaultValue={[\"today\"]}\n        variant=\"outline\"\n        size=\"sm\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"today\" aria-label=\"Today\">\n          Today\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"week\" aria-label=\"This Week\">\n          This Week\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"month\" aria-label=\"This Month\">\n          This Month\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"year\" aria-label=\"This Year\">\n          This Year\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSort() {\n  return (\n    <Example title=\"Sort\">\n      <ToggleGroup defaultValue={[\"newest\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"newest\" aria-label=\"Newest\">\n          <IconPlaceholder\n            lucide=\"ArrowDownIcon\"\n            tabler=\"IconArrowDown\"\n            hugeicons=\"ArrowDownIcon\"\n            phosphor=\"ArrowDownIcon\"\n          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n            phosphor=\"ArrowUpIcon\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\n            phosphor=\"TrendUpIcon\"\n          />\n          Popular\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithInputAndSelect() {\n  const items = [\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Archived\", value: \"archived\" },\n  ]\n  return (\n    <Example title=\"With Input and Select\">\n      <div className=\"flex items-center gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items} defaultValue={items[0]}>\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <ToggleGroup defaultValue={[\"grid\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n            Grid\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"list\" aria-label=\"List view\">\n            List\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ToggleGroup multiple orientation=\"vertical\" spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutline() {\n  return (\n    <Example title=\"Vertical Outline\">\n      <ToggleGroup\n        variant=\"outline\"\n        defaultValue={[\"all\"]}\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Toggle active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Toggle completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Toggle archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutlineWithIcons() {\n  return (\n    <Example title=\"Vertical Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple orientation=\"vertical\" size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalWithSpacing() {\n  return (\n    <Example title=\"Vertical With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        orientation=\"vertical\"\n        spacing={1}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/calendar.json b/apps/v4/public/r/styles/base-maia/calendar.json
index 090cd463cd..1099d107e6 100644
--- a/apps/v4/public/r/styles/base-maia/calendar.json
+++ b/apps/v4/public/r/styles/base-maia/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-3 [--cell-radius:var(--radius-4xl)] [--cell-size:--spacing(8)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-3 [--cell-radius:var(--radius-4xl)] [--cell-size:--spacing(8)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/input-group-example.json b/apps/v4/public/r/styles/base-maia/input-group-example.json
index da6b08c020..2fb200598c 100644
--- a/apps/v4/public/r/styles/base-maia/input-group-example.json
+++ b/apps/v4/public/r/styles/base-maia/input-group-example.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/input-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/base/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <InputGroupButton className=\"text-muted-foreground tabular-nums\" />\n                  }\n                >\n                  {country}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDownIcon\"\n                    phosphor=\"CaretDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>\n                <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </InputGroupButton>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/base/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <InputGroupButton className=\"text-muted-foreground tabular-nums\" />\n                  }\n                >\n                  {country}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDownIcon\"\n                    phosphor=\"CaretDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>\n                <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                  />\n                </InputGroupButton>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/item-example.json b/apps/v4/public/r/styles/base-maia/item-example.json
index aaea31ae7d..38450b12e9 100644
--- a/apps/v4/public/r/styles/base-maia/item-example.json
+++ b/apps/v4/public/r/styles/base-maia/item-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/item-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/toggle-example.json b/apps/v4/public/r/styles/base-maia/toggle-example.json
index bac2594d0a..f643af46b2 100644
--- a/apps/v4/public/r/styles/base-maia/toggle-example.json
+++ b/apps/v4/public/r/styles/base-maia/toggle-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/toggle-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Toggle } from \"@/registry/bases/base/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleBasic />\n      <ToggleOutline />\n      <ToggleSizes />\n      <ToggleWithButtonText />\n      <ToggleWithButtonIcon />\n      <ToggleWithButtonIconText />\n      <ToggleDisabled />\n      <ToggleWithIcon />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bold\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleOutline() {\n  return (\n    <Example title=\"Outline\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n          Italic\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n          Bold\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle small\" size=\"sm\">\n          Small\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n          Default\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle large\" size=\"lg\">\n          Large\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonText() {\n  return (\n    <Example title=\"With Button Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm\" size=\"sm\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg\" size=\"lg\">\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIcon() {\n  return (\n    <Example title=\"With Button Icon\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIconText() {\n  return (\n    <Example title=\"With Button Icon + Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon text\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon text\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon text\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle disabled\" disabled>\n          Disabled\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle disabled outline\" disabled>\n          Disabled\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bookmark\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bookmark outline\">\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n          Bookmark\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Toggle } from \"@/registry/bases/base/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleBasic />\n      <ToggleOutline />\n      <ToggleSizes />\n      <ToggleWithButtonText />\n      <ToggleWithButtonIcon />\n      <ToggleWithButtonIconText />\n      <ToggleDisabled />\n      <ToggleWithIcon />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bold\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleOutline() {\n  return (\n    <Example title=\"Outline\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n          Italic\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n          Bold\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle small\" size=\"sm\">\n          Small\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n          Default\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle large\" size=\"lg\">\n          Large\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonText() {\n  return (\n    <Example title=\"With Button Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm\" size=\"sm\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg\" size=\"lg\">\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIcon() {\n  return (\n    <Example title=\"With Button Icon\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n            />\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n            />\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIconText() {\n  return (\n    <Example title=\"With Button Icon + Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon text\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon text\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon text\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle disabled\" disabled>\n          Disabled\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle disabled outline\" disabled>\n          Disabled\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bookmark\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bookmark outline\">\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n          Bookmark\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/toggle-group-example.json b/apps/v4/public/r/styles/base-maia/toggle-group-example.json
index 881f89f5cc..fa1c1129a6 100644
--- a/apps/v4/public/r/styles/base-maia/toggle-group-example.json
+++ b/apps/v4/public/r/styles/base-maia/toggle-group-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/toggle-group-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/bases/base/ui/toggle-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleGroupBasic />\n      <ToggleGroupOutline />\n      <ToggleGroupOutlineWithIcons />\n      <ToggleGroupSizes />\n      <ToggleGroupSpacing />\n      <ToggleGroupWithIcons />\n      <ToggleGroupFilter />\n      <ToggleGroupDateRange />\n      <ToggleGroupSort />\n      <ToggleGroupWithInputAndSelect />\n      <ToggleGroupVertical />\n      <ToggleGroupVerticalOutline />\n      <ToggleGroupVerticalOutlineWithIcons />\n      <ToggleGroupVerticalWithSpacing />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ToggleGroup multiple spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutline() {\n  return (\n    <Example title=\"Outline\">\n      <ToggleGroup variant=\"outline\" defaultValue={[\"all\"]}>\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"missed\" aria-label=\"Toggle missed\">\n          Missed\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutlineWithIcons() {\n  return (\n    <Example title=\"Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <ToggleGroup size=\"sm\" defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <ToggleGroup defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSpacing() {\n  return (\n    <Example title=\"With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ToggleGroup multiple variant=\"outline\" spacing={2} size=\"sm\">\n        <ToggleGroupItem\n          value=\"star\"\n          aria-label=\"Toggle star\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"StarIcon\"\n            tabler=\"IconStar\"\n            hugeicons=\"StarIcon\"\n            phosphor=\"StarIcon\"\n          />\n          Star\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"heart\"\n          aria-label=\"Toggle heart\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconHeart\"\n            hugeicons=\"FavouriteIcon\"\n            phosphor=\"HeartIcon\"\n          />\n          Heart\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"bookmark\"\n          aria-label=\"Toggle bookmark\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n          />\n          Bookmark\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFilter() {\n  return (\n    <Example title=\"Filter\">\n      <ToggleGroup defaultValue={[\"all\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"all\" aria-label=\"All\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupDateRange() {\n  return (\n    <Example title=\"Date Range\">\n      <ToggleGroup\n        defaultValue={[\"today\"]}\n        variant=\"outline\"\n        size=\"sm\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"today\" aria-label=\"Today\">\n          Today\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"week\" aria-label=\"This Week\">\n          This Week\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"month\" aria-label=\"This Month\">\n          This Month\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"year\" aria-label=\"This Year\">\n          This Year\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSort() {\n  return (\n    <Example title=\"Sort\">\n      <ToggleGroup defaultValue={[\"newest\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"newest\" aria-label=\"Newest\">\n          <IconPlaceholder\n            lucide=\"ArrowDownIcon\"\n            tabler=\"IconArrowDown\"\n            hugeicons=\"ArrowDownIcon\"\n            phosphor=\"ArrowDownIcon\"\n          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n            phosphor=\"ArrowUpIcon\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\n            phosphor=\"TrendUpIcon\"\n          />\n          Popular\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithInputAndSelect() {\n  const items = [\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Archived\", value: \"archived\" },\n  ]\n  return (\n    <Example title=\"With Input and Select\">\n      <div className=\"flex items-center gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items} defaultValue={items[0]}>\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <ToggleGroup defaultValue={[\"grid\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n            Grid\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"list\" aria-label=\"List view\">\n            List\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ToggleGroup multiple orientation=\"vertical\" spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutline() {\n  return (\n    <Example title=\"Vertical Outline\">\n      <ToggleGroup\n        variant=\"outline\"\n        defaultValue={[\"all\"]}\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Toggle active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Toggle completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Toggle archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutlineWithIcons() {\n  return (\n    <Example title=\"Vertical Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple orientation=\"vertical\" size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalWithSpacing() {\n  return (\n    <Example title=\"Vertical With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        orientation=\"vertical\"\n        spacing={1}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/bases/base/ui/toggle-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleGroupBasic />\n      <ToggleGroupOutline />\n      <ToggleGroupOutlineWithIcons />\n      <ToggleGroupSizes />\n      <ToggleGroupSpacing />\n      <ToggleGroupWithIcons />\n      <ToggleGroupFilter />\n      <ToggleGroupDateRange />\n      <ToggleGroupSort />\n      <ToggleGroupWithInputAndSelect />\n      <ToggleGroupVertical />\n      <ToggleGroupVerticalOutline />\n      <ToggleGroupVerticalOutlineWithIcons />\n      <ToggleGroupVerticalWithSpacing />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ToggleGroup multiple spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutline() {\n  return (\n    <Example title=\"Outline\">\n      <ToggleGroup variant=\"outline\" defaultValue={[\"all\"]}>\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"missed\" aria-label=\"Toggle missed\">\n          Missed\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutlineWithIcons() {\n  return (\n    <Example title=\"Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <ToggleGroup size=\"sm\" defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <ToggleGroup defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSpacing() {\n  return (\n    <Example title=\"With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ToggleGroup multiple variant=\"outline\" spacing={2} size=\"sm\">\n        <ToggleGroupItem\n          value=\"star\"\n          aria-label=\"Toggle star\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"StarIcon\"\n            tabler=\"IconStar\"\n            hugeicons=\"StarIcon\"\n            phosphor=\"StarIcon\"\n          />\n          Star\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"heart\"\n          aria-label=\"Toggle heart\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconHeart\"\n            hugeicons=\"FavouriteIcon\"\n            phosphor=\"HeartIcon\"\n          />\n          Heart\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"bookmark\"\n          aria-label=\"Toggle bookmark\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n          />\n          Bookmark\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFilter() {\n  return (\n    <Example title=\"Filter\">\n      <ToggleGroup defaultValue={[\"all\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"all\" aria-label=\"All\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupDateRange() {\n  return (\n    <Example title=\"Date Range\">\n      <ToggleGroup\n        defaultValue={[\"today\"]}\n        variant=\"outline\"\n        size=\"sm\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"today\" aria-label=\"Today\">\n          Today\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"week\" aria-label=\"This Week\">\n          This Week\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"month\" aria-label=\"This Month\">\n          This Month\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"year\" aria-label=\"This Year\">\n          This Year\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSort() {\n  return (\n    <Example title=\"Sort\">\n      <ToggleGroup defaultValue={[\"newest\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"newest\" aria-label=\"Newest\">\n          <IconPlaceholder\n            lucide=\"ArrowDownIcon\"\n            tabler=\"IconArrowDown\"\n            hugeicons=\"ArrowDownIcon\"\n            phosphor=\"ArrowDownIcon\"\n          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n            phosphor=\"ArrowUpIcon\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\n            phosphor=\"TrendUpIcon\"\n          />\n          Popular\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithInputAndSelect() {\n  const items = [\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Archived\", value: \"archived\" },\n  ]\n  return (\n    <Example title=\"With Input and Select\">\n      <div className=\"flex items-center gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items} defaultValue={items[0]}>\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <ToggleGroup defaultValue={[\"grid\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n            Grid\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"list\" aria-label=\"List view\">\n            List\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ToggleGroup multiple orientation=\"vertical\" spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutline() {\n  return (\n    <Example title=\"Vertical Outline\">\n      <ToggleGroup\n        variant=\"outline\"\n        defaultValue={[\"all\"]}\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Toggle active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Toggle completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Toggle archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutlineWithIcons() {\n  return (\n    <Example title=\"Vertical Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple orientation=\"vertical\" size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalWithSpacing() {\n  return (\n    <Example title=\"Vertical With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        orientation=\"vertical\"\n        spacing={1}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/calendar.json b/apps/v4/public/r/styles/base-mira/calendar.json
index f9d741e299..fcffd2fabe 100644
--- a/apps/v4/public/r/styles/base-mira/calendar.json
+++ b/apps/v4/public/r/styles/base-mira/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(6)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(6)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/input-group-example.json b/apps/v4/public/r/styles/base-mira/input-group-example.json
index 2bf3bc6971..dc9cf6c797 100644
--- a/apps/v4/public/r/styles/base-mira/input-group-example.json
+++ b/apps/v4/public/r/styles/base-mira/input-group-example.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/input-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/base/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <InputGroupButton className=\"text-muted-foreground tabular-nums\" />\n                  }\n                >\n                  {country}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDownIcon\"\n                    phosphor=\"CaretDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>\n                <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </InputGroupButton>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/base/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <InputGroupButton className=\"text-muted-foreground tabular-nums\" />\n                  }\n                >\n                  {country}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDownIcon\"\n                    phosphor=\"CaretDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>\n                <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                  />\n                </InputGroupButton>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/item-example.json b/apps/v4/public/r/styles/base-mira/item-example.json
index 71aa2bbb95..b66cb8acd8 100644
--- a/apps/v4/public/r/styles/base-mira/item-example.json
+++ b/apps/v4/public/r/styles/base-mira/item-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/item-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/toggle-example.json b/apps/v4/public/r/styles/base-mira/toggle-example.json
index 92105cf68b..6e648b3d18 100644
--- a/apps/v4/public/r/styles/base-mira/toggle-example.json
+++ b/apps/v4/public/r/styles/base-mira/toggle-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/toggle-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Toggle } from \"@/registry/bases/base/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleBasic />\n      <ToggleOutline />\n      <ToggleSizes />\n      <ToggleWithButtonText />\n      <ToggleWithButtonIcon />\n      <ToggleWithButtonIconText />\n      <ToggleDisabled />\n      <ToggleWithIcon />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bold\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleOutline() {\n  return (\n    <Example title=\"Outline\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n          Italic\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n          Bold\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle small\" size=\"sm\">\n          Small\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n          Default\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle large\" size=\"lg\">\n          Large\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonText() {\n  return (\n    <Example title=\"With Button Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm\" size=\"sm\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg\" size=\"lg\">\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIcon() {\n  return (\n    <Example title=\"With Button Icon\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIconText() {\n  return (\n    <Example title=\"With Button Icon + Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon text\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon text\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon text\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle disabled\" disabled>\n          Disabled\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle disabled outline\" disabled>\n          Disabled\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bookmark\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bookmark outline\">\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n          Bookmark\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Toggle } from \"@/registry/bases/base/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleBasic />\n      <ToggleOutline />\n      <ToggleSizes />\n      <ToggleWithButtonText />\n      <ToggleWithButtonIcon />\n      <ToggleWithButtonIconText />\n      <ToggleDisabled />\n      <ToggleWithIcon />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bold\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleOutline() {\n  return (\n    <Example title=\"Outline\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n          Italic\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n          Bold\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle small\" size=\"sm\">\n          Small\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n          Default\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle large\" size=\"lg\">\n          Large\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonText() {\n  return (\n    <Example title=\"With Button Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm\" size=\"sm\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg\" size=\"lg\">\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIcon() {\n  return (\n    <Example title=\"With Button Icon\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n            />\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n            />\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIconText() {\n  return (\n    <Example title=\"With Button Icon + Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon text\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon text\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon text\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle disabled\" disabled>\n          Disabled\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle disabled outline\" disabled>\n          Disabled\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bookmark\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bookmark outline\">\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n          Bookmark\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/toggle-group-example.json b/apps/v4/public/r/styles/base-mira/toggle-group-example.json
index 795e595d6b..28d2cc5643 100644
--- a/apps/v4/public/r/styles/base-mira/toggle-group-example.json
+++ b/apps/v4/public/r/styles/base-mira/toggle-group-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/toggle-group-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/bases/base/ui/toggle-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleGroupBasic />\n      <ToggleGroupOutline />\n      <ToggleGroupOutlineWithIcons />\n      <ToggleGroupSizes />\n      <ToggleGroupSpacing />\n      <ToggleGroupWithIcons />\n      <ToggleGroupFilter />\n      <ToggleGroupDateRange />\n      <ToggleGroupSort />\n      <ToggleGroupWithInputAndSelect />\n      <ToggleGroupVertical />\n      <ToggleGroupVerticalOutline />\n      <ToggleGroupVerticalOutlineWithIcons />\n      <ToggleGroupVerticalWithSpacing />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ToggleGroup multiple spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutline() {\n  return (\n    <Example title=\"Outline\">\n      <ToggleGroup variant=\"outline\" defaultValue={[\"all\"]}>\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"missed\" aria-label=\"Toggle missed\">\n          Missed\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutlineWithIcons() {\n  return (\n    <Example title=\"Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <ToggleGroup size=\"sm\" defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <ToggleGroup defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSpacing() {\n  return (\n    <Example title=\"With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ToggleGroup multiple variant=\"outline\" spacing={2} size=\"sm\">\n        <ToggleGroupItem\n          value=\"star\"\n          aria-label=\"Toggle star\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"StarIcon\"\n            tabler=\"IconStar\"\n            hugeicons=\"StarIcon\"\n            phosphor=\"StarIcon\"\n          />\n          Star\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"heart\"\n          aria-label=\"Toggle heart\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconHeart\"\n            hugeicons=\"FavouriteIcon\"\n            phosphor=\"HeartIcon\"\n          />\n          Heart\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"bookmark\"\n          aria-label=\"Toggle bookmark\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n          />\n          Bookmark\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFilter() {\n  return (\n    <Example title=\"Filter\">\n      <ToggleGroup defaultValue={[\"all\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"all\" aria-label=\"All\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupDateRange() {\n  return (\n    <Example title=\"Date Range\">\n      <ToggleGroup\n        defaultValue={[\"today\"]}\n        variant=\"outline\"\n        size=\"sm\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"today\" aria-label=\"Today\">\n          Today\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"week\" aria-label=\"This Week\">\n          This Week\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"month\" aria-label=\"This Month\">\n          This Month\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"year\" aria-label=\"This Year\">\n          This Year\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSort() {\n  return (\n    <Example title=\"Sort\">\n      <ToggleGroup defaultValue={[\"newest\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"newest\" aria-label=\"Newest\">\n          <IconPlaceholder\n            lucide=\"ArrowDownIcon\"\n            tabler=\"IconArrowDown\"\n            hugeicons=\"ArrowDownIcon\"\n            phosphor=\"ArrowDownIcon\"\n          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n            phosphor=\"ArrowUpIcon\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\n            phosphor=\"TrendUpIcon\"\n          />\n          Popular\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithInputAndSelect() {\n  const items = [\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Archived\", value: \"archived\" },\n  ]\n  return (\n    <Example title=\"With Input and Select\">\n      <div className=\"flex items-center gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items} defaultValue={items[0]}>\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <ToggleGroup defaultValue={[\"grid\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n            Grid\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"list\" aria-label=\"List view\">\n            List\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ToggleGroup multiple orientation=\"vertical\" spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutline() {\n  return (\n    <Example title=\"Vertical Outline\">\n      <ToggleGroup\n        variant=\"outline\"\n        defaultValue={[\"all\"]}\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Toggle active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Toggle completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Toggle archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutlineWithIcons() {\n  return (\n    <Example title=\"Vertical Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple orientation=\"vertical\" size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalWithSpacing() {\n  return (\n    <Example title=\"Vertical With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        orientation=\"vertical\"\n        spacing={1}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/bases/base/ui/toggle-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleGroupBasic />\n      <ToggleGroupOutline />\n      <ToggleGroupOutlineWithIcons />\n      <ToggleGroupSizes />\n      <ToggleGroupSpacing />\n      <ToggleGroupWithIcons />\n      <ToggleGroupFilter />\n      <ToggleGroupDateRange />\n      <ToggleGroupSort />\n      <ToggleGroupWithInputAndSelect />\n      <ToggleGroupVertical />\n      <ToggleGroupVerticalOutline />\n      <ToggleGroupVerticalOutlineWithIcons />\n      <ToggleGroupVerticalWithSpacing />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ToggleGroup multiple spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutline() {\n  return (\n    <Example title=\"Outline\">\n      <ToggleGroup variant=\"outline\" defaultValue={[\"all\"]}>\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"missed\" aria-label=\"Toggle missed\">\n          Missed\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutlineWithIcons() {\n  return (\n    <Example title=\"Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <ToggleGroup size=\"sm\" defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <ToggleGroup defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSpacing() {\n  return (\n    <Example title=\"With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ToggleGroup multiple variant=\"outline\" spacing={2} size=\"sm\">\n        <ToggleGroupItem\n          value=\"star\"\n          aria-label=\"Toggle star\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"StarIcon\"\n            tabler=\"IconStar\"\n            hugeicons=\"StarIcon\"\n            phosphor=\"StarIcon\"\n          />\n          Star\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"heart\"\n          aria-label=\"Toggle heart\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconHeart\"\n            hugeicons=\"FavouriteIcon\"\n            phosphor=\"HeartIcon\"\n          />\n          Heart\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"bookmark\"\n          aria-label=\"Toggle bookmark\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n          />\n          Bookmark\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFilter() {\n  return (\n    <Example title=\"Filter\">\n      <ToggleGroup defaultValue={[\"all\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"all\" aria-label=\"All\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupDateRange() {\n  return (\n    <Example title=\"Date Range\">\n      <ToggleGroup\n        defaultValue={[\"today\"]}\n        variant=\"outline\"\n        size=\"sm\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"today\" aria-label=\"Today\">\n          Today\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"week\" aria-label=\"This Week\">\n          This Week\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"month\" aria-label=\"This Month\">\n          This Month\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"year\" aria-label=\"This Year\">\n          This Year\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSort() {\n  return (\n    <Example title=\"Sort\">\n      <ToggleGroup defaultValue={[\"newest\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"newest\" aria-label=\"Newest\">\n          <IconPlaceholder\n            lucide=\"ArrowDownIcon\"\n            tabler=\"IconArrowDown\"\n            hugeicons=\"ArrowDownIcon\"\n            phosphor=\"ArrowDownIcon\"\n          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n            phosphor=\"ArrowUpIcon\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\n            phosphor=\"TrendUpIcon\"\n          />\n          Popular\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithInputAndSelect() {\n  const items = [\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Archived\", value: \"archived\" },\n  ]\n  return (\n    <Example title=\"With Input and Select\">\n      <div className=\"flex items-center gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items} defaultValue={items[0]}>\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <ToggleGroup defaultValue={[\"grid\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n            Grid\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"list\" aria-label=\"List view\">\n            List\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ToggleGroup multiple orientation=\"vertical\" spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutline() {\n  return (\n    <Example title=\"Vertical Outline\">\n      <ToggleGroup\n        variant=\"outline\"\n        defaultValue={[\"all\"]}\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Toggle active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Toggle completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Toggle archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutlineWithIcons() {\n  return (\n    <Example title=\"Vertical Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple orientation=\"vertical\" size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalWithSpacing() {\n  return (\n    <Example title=\"Vertical With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        orientation=\"vertical\"\n        spacing={1}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/calendar.json b/apps/v4/public/r/styles/base-nova/calendar.json
index 71901bcf9d..486cb3769e 100644
--- a/apps/v4/public/r/styles/base-nova/calendar.json
+++ b/apps/v4/public/r/styles/base-nova/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/input-group-example.json b/apps/v4/public/r/styles/base-nova/input-group-example.json
index abc0d06cb7..a14c12088d 100644
--- a/apps/v4/public/r/styles/base-nova/input-group-example.json
+++ b/apps/v4/public/r/styles/base-nova/input-group-example.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/input-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/base/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <InputGroupButton className=\"text-muted-foreground tabular-nums\" />\n                  }\n                >\n                  {country}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDownIcon\"\n                    phosphor=\"CaretDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>\n                <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </InputGroupButton>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/base/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <InputGroupButton className=\"text-muted-foreground tabular-nums\" />\n                  }\n                >\n                  {country}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDownIcon\"\n                    phosphor=\"CaretDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>\n                <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                  />\n                </InputGroupButton>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/item-example.json b/apps/v4/public/r/styles/base-nova/item-example.json
index ba43576e82..4957d9fb41 100644
--- a/apps/v4/public/r/styles/base-nova/item-example.json
+++ b/apps/v4/public/r/styles/base-nova/item-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/item-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/toggle-example.json b/apps/v4/public/r/styles/base-nova/toggle-example.json
index 10ea0d6f6c..683ccb63c7 100644
--- a/apps/v4/public/r/styles/base-nova/toggle-example.json
+++ b/apps/v4/public/r/styles/base-nova/toggle-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/toggle-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Toggle } from \"@/registry/bases/base/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleBasic />\n      <ToggleOutline />\n      <ToggleSizes />\n      <ToggleWithButtonText />\n      <ToggleWithButtonIcon />\n      <ToggleWithButtonIconText />\n      <ToggleDisabled />\n      <ToggleWithIcon />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bold\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleOutline() {\n  return (\n    <Example title=\"Outline\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n          Italic\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n          Bold\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle small\" size=\"sm\">\n          Small\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n          Default\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle large\" size=\"lg\">\n          Large\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonText() {\n  return (\n    <Example title=\"With Button Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm\" size=\"sm\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg\" size=\"lg\">\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIcon() {\n  return (\n    <Example title=\"With Button Icon\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIconText() {\n  return (\n    <Example title=\"With Button Icon + Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon text\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon text\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon text\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle disabled\" disabled>\n          Disabled\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle disabled outline\" disabled>\n          Disabled\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bookmark\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bookmark outline\">\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n          Bookmark\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Toggle } from \"@/registry/bases/base/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleBasic />\n      <ToggleOutline />\n      <ToggleSizes />\n      <ToggleWithButtonText />\n      <ToggleWithButtonIcon />\n      <ToggleWithButtonIconText />\n      <ToggleDisabled />\n      <ToggleWithIcon />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bold\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleOutline() {\n  return (\n    <Example title=\"Outline\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n          Italic\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n          Bold\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle small\" size=\"sm\">\n          Small\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n          Default\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle large\" size=\"lg\">\n          Large\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonText() {\n  return (\n    <Example title=\"With Button Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm\" size=\"sm\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg\" size=\"lg\">\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIcon() {\n  return (\n    <Example title=\"With Button Icon\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n            />\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n            />\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIconText() {\n  return (\n    <Example title=\"With Button Icon + Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon text\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon text\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon text\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle disabled\" disabled>\n          Disabled\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle disabled outline\" disabled>\n          Disabled\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bookmark\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bookmark outline\">\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n          Bookmark\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/toggle-group-example.json b/apps/v4/public/r/styles/base-nova/toggle-group-example.json
index 5807c140ae..c638c81234 100644
--- a/apps/v4/public/r/styles/base-nova/toggle-group-example.json
+++ b/apps/v4/public/r/styles/base-nova/toggle-group-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/toggle-group-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/bases/base/ui/toggle-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleGroupBasic />\n      <ToggleGroupOutline />\n      <ToggleGroupOutlineWithIcons />\n      <ToggleGroupSizes />\n      <ToggleGroupSpacing />\n      <ToggleGroupWithIcons />\n      <ToggleGroupFilter />\n      <ToggleGroupDateRange />\n      <ToggleGroupSort />\n      <ToggleGroupWithInputAndSelect />\n      <ToggleGroupVertical />\n      <ToggleGroupVerticalOutline />\n      <ToggleGroupVerticalOutlineWithIcons />\n      <ToggleGroupVerticalWithSpacing />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ToggleGroup multiple spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutline() {\n  return (\n    <Example title=\"Outline\">\n      <ToggleGroup variant=\"outline\" defaultValue={[\"all\"]}>\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"missed\" aria-label=\"Toggle missed\">\n          Missed\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutlineWithIcons() {\n  return (\n    <Example title=\"Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <ToggleGroup size=\"sm\" defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <ToggleGroup defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSpacing() {\n  return (\n    <Example title=\"With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ToggleGroup multiple variant=\"outline\" spacing={2} size=\"sm\">\n        <ToggleGroupItem\n          value=\"star\"\n          aria-label=\"Toggle star\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"StarIcon\"\n            tabler=\"IconStar\"\n            hugeicons=\"StarIcon\"\n            phosphor=\"StarIcon\"\n          />\n          Star\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"heart\"\n          aria-label=\"Toggle heart\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconHeart\"\n            hugeicons=\"FavouriteIcon\"\n            phosphor=\"HeartIcon\"\n          />\n          Heart\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"bookmark\"\n          aria-label=\"Toggle bookmark\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n          />\n          Bookmark\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFilter() {\n  return (\n    <Example title=\"Filter\">\n      <ToggleGroup defaultValue={[\"all\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"all\" aria-label=\"All\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupDateRange() {\n  return (\n    <Example title=\"Date Range\">\n      <ToggleGroup\n        defaultValue={[\"today\"]}\n        variant=\"outline\"\n        size=\"sm\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"today\" aria-label=\"Today\">\n          Today\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"week\" aria-label=\"This Week\">\n          This Week\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"month\" aria-label=\"This Month\">\n          This Month\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"year\" aria-label=\"This Year\">\n          This Year\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSort() {\n  return (\n    <Example title=\"Sort\">\n      <ToggleGroup defaultValue={[\"newest\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"newest\" aria-label=\"Newest\">\n          <IconPlaceholder\n            lucide=\"ArrowDownIcon\"\n            tabler=\"IconArrowDown\"\n            hugeicons=\"ArrowDownIcon\"\n            phosphor=\"ArrowDownIcon\"\n          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n            phosphor=\"ArrowUpIcon\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\n            phosphor=\"TrendUpIcon\"\n          />\n          Popular\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithInputAndSelect() {\n  const items = [\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Archived\", value: \"archived\" },\n  ]\n  return (\n    <Example title=\"With Input and Select\">\n      <div className=\"flex items-center gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items} defaultValue={items[0]}>\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <ToggleGroup defaultValue={[\"grid\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n            Grid\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"list\" aria-label=\"List view\">\n            List\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ToggleGroup multiple orientation=\"vertical\" spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutline() {\n  return (\n    <Example title=\"Vertical Outline\">\n      <ToggleGroup\n        variant=\"outline\"\n        defaultValue={[\"all\"]}\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Toggle active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Toggle completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Toggle archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutlineWithIcons() {\n  return (\n    <Example title=\"Vertical Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple orientation=\"vertical\" size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalWithSpacing() {\n  return (\n    <Example title=\"Vertical With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        orientation=\"vertical\"\n        spacing={1}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/bases/base/ui/toggle-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleGroupBasic />\n      <ToggleGroupOutline />\n      <ToggleGroupOutlineWithIcons />\n      <ToggleGroupSizes />\n      <ToggleGroupSpacing />\n      <ToggleGroupWithIcons />\n      <ToggleGroupFilter />\n      <ToggleGroupDateRange />\n      <ToggleGroupSort />\n      <ToggleGroupWithInputAndSelect />\n      <ToggleGroupVertical />\n      <ToggleGroupVerticalOutline />\n      <ToggleGroupVerticalOutlineWithIcons />\n      <ToggleGroupVerticalWithSpacing />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ToggleGroup multiple spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutline() {\n  return (\n    <Example title=\"Outline\">\n      <ToggleGroup variant=\"outline\" defaultValue={[\"all\"]}>\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"missed\" aria-label=\"Toggle missed\">\n          Missed\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutlineWithIcons() {\n  return (\n    <Example title=\"Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <ToggleGroup size=\"sm\" defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <ToggleGroup defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSpacing() {\n  return (\n    <Example title=\"With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ToggleGroup multiple variant=\"outline\" spacing={2} size=\"sm\">\n        <ToggleGroupItem\n          value=\"star\"\n          aria-label=\"Toggle star\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"StarIcon\"\n            tabler=\"IconStar\"\n            hugeicons=\"StarIcon\"\n            phosphor=\"StarIcon\"\n          />\n          Star\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"heart\"\n          aria-label=\"Toggle heart\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconHeart\"\n            hugeicons=\"FavouriteIcon\"\n            phosphor=\"HeartIcon\"\n          />\n          Heart\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"bookmark\"\n          aria-label=\"Toggle bookmark\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n          />\n          Bookmark\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFilter() {\n  return (\n    <Example title=\"Filter\">\n      <ToggleGroup defaultValue={[\"all\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"all\" aria-label=\"All\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupDateRange() {\n  return (\n    <Example title=\"Date Range\">\n      <ToggleGroup\n        defaultValue={[\"today\"]}\n        variant=\"outline\"\n        size=\"sm\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"today\" aria-label=\"Today\">\n          Today\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"week\" aria-label=\"This Week\">\n          This Week\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"month\" aria-label=\"This Month\">\n          This Month\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"year\" aria-label=\"This Year\">\n          This Year\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSort() {\n  return (\n    <Example title=\"Sort\">\n      <ToggleGroup defaultValue={[\"newest\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"newest\" aria-label=\"Newest\">\n          <IconPlaceholder\n            lucide=\"ArrowDownIcon\"\n            tabler=\"IconArrowDown\"\n            hugeicons=\"ArrowDownIcon\"\n            phosphor=\"ArrowDownIcon\"\n          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n            phosphor=\"ArrowUpIcon\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\n            phosphor=\"TrendUpIcon\"\n          />\n          Popular\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithInputAndSelect() {\n  const items = [\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Archived\", value: \"archived\" },\n  ]\n  return (\n    <Example title=\"With Input and Select\">\n      <div className=\"flex items-center gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items} defaultValue={items[0]}>\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <ToggleGroup defaultValue={[\"grid\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n            Grid\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"list\" aria-label=\"List view\">\n            List\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ToggleGroup multiple orientation=\"vertical\" spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutline() {\n  return (\n    <Example title=\"Vertical Outline\">\n      <ToggleGroup\n        variant=\"outline\"\n        defaultValue={[\"all\"]}\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Toggle active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Toggle completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Toggle archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutlineWithIcons() {\n  return (\n    <Example title=\"Vertical Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple orientation=\"vertical\" size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalWithSpacing() {\n  return (\n    <Example title=\"Vertical With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        orientation=\"vertical\"\n        spacing={1}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/calendar.json b/apps/v4/public/r/styles/base-vega/calendar.json
index cc750f4095..6337ace126 100644
--- a/apps/v4/public/r/styles/base-vega/calendar.json
+++ b/apps/v4/public/r/styles/base-vega/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/input-group-example.json b/apps/v4/public/r/styles/base-vega/input-group-example.json
index 9590f48c9e..bb1cb0933a 100644
--- a/apps/v4/public/r/styles/base-vega/input-group-example.json
+++ b/apps/v4/public/r/styles/base-vega/input-group-example.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/input-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/base/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <InputGroupButton className=\"text-muted-foreground tabular-nums\" />\n                  }\n                >\n                  {country}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDownIcon\"\n                    phosphor=\"CaretDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>\n                <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </InputGroupButton>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/base/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <InputGroupButton className=\"text-muted-foreground tabular-nums\" />\n                  }\n                >\n                  {country}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDownIcon\"\n                    phosphor=\"CaretDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>\n                <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                  />\n                </InputGroupButton>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/item-example.json b/apps/v4/public/r/styles/base-vega/item-example.json
index de27523e55..b6bf1aa040 100644
--- a/apps/v4/public/r/styles/base-vega/item-example.json
+++ b/apps/v4/public/r/styles/base-vega/item-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/item-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/toggle-example.json b/apps/v4/public/r/styles/base-vega/toggle-example.json
index a94fced9cc..852e8d29af 100644
--- a/apps/v4/public/r/styles/base-vega/toggle-example.json
+++ b/apps/v4/public/r/styles/base-vega/toggle-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/toggle-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Toggle } from \"@/registry/bases/base/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleBasic />\n      <ToggleOutline />\n      <ToggleSizes />\n      <ToggleWithButtonText />\n      <ToggleWithButtonIcon />\n      <ToggleWithButtonIconText />\n      <ToggleDisabled />\n      <ToggleWithIcon />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bold\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleOutline() {\n  return (\n    <Example title=\"Outline\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n          Italic\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n          Bold\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle small\" size=\"sm\">\n          Small\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n          Default\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle large\" size=\"lg\">\n          Large\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonText() {\n  return (\n    <Example title=\"With Button Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm\" size=\"sm\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg\" size=\"lg\">\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIcon() {\n  return (\n    <Example title=\"With Button Icon\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIconText() {\n  return (\n    <Example title=\"With Button Icon + Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon text\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon text\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon text\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle disabled\" disabled>\n          Disabled\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle disabled outline\" disabled>\n          Disabled\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bookmark\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bookmark outline\">\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n          Bookmark\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Toggle } from \"@/registry/bases/base/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleBasic />\n      <ToggleOutline />\n      <ToggleSizes />\n      <ToggleWithButtonText />\n      <ToggleWithButtonIcon />\n      <ToggleWithButtonIconText />\n      <ToggleDisabled />\n      <ToggleWithIcon />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bold\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleOutline() {\n  return (\n    <Example title=\"Outline\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n          Italic\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n          Bold\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle small\" size=\"sm\">\n          Small\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n          Default\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle large\" size=\"lg\">\n          Large\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonText() {\n  return (\n    <Example title=\"With Button Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm\" size=\"sm\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg\" size=\"lg\">\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIcon() {\n  return (\n    <Example title=\"With Button Icon\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n            />\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n            />\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIconText() {\n  return (\n    <Example title=\"With Button Icon + Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon text\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon text\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon text\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle disabled\" disabled>\n          Disabled\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle disabled outline\" disabled>\n          Disabled\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bookmark\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bookmark outline\">\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n          Bookmark\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/toggle-group-example.json b/apps/v4/public/r/styles/base-vega/toggle-group-example.json
index 5c8e870233..8063eed0f2 100644
--- a/apps/v4/public/r/styles/base-vega/toggle-group-example.json
+++ b/apps/v4/public/r/styles/base-vega/toggle-group-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/toggle-group-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/bases/base/ui/toggle-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleGroupBasic />\n      <ToggleGroupOutline />\n      <ToggleGroupOutlineWithIcons />\n      <ToggleGroupSizes />\n      <ToggleGroupSpacing />\n      <ToggleGroupWithIcons />\n      <ToggleGroupFilter />\n      <ToggleGroupDateRange />\n      <ToggleGroupSort />\n      <ToggleGroupWithInputAndSelect />\n      <ToggleGroupVertical />\n      <ToggleGroupVerticalOutline />\n      <ToggleGroupVerticalOutlineWithIcons />\n      <ToggleGroupVerticalWithSpacing />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ToggleGroup multiple spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutline() {\n  return (\n    <Example title=\"Outline\">\n      <ToggleGroup variant=\"outline\" defaultValue={[\"all\"]}>\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"missed\" aria-label=\"Toggle missed\">\n          Missed\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutlineWithIcons() {\n  return (\n    <Example title=\"Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <ToggleGroup size=\"sm\" defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <ToggleGroup defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSpacing() {\n  return (\n    <Example title=\"With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ToggleGroup multiple variant=\"outline\" spacing={2} size=\"sm\">\n        <ToggleGroupItem\n          value=\"star\"\n          aria-label=\"Toggle star\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"StarIcon\"\n            tabler=\"IconStar\"\n            hugeicons=\"StarIcon\"\n            phosphor=\"StarIcon\"\n          />\n          Star\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"heart\"\n          aria-label=\"Toggle heart\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconHeart\"\n            hugeicons=\"FavouriteIcon\"\n            phosphor=\"HeartIcon\"\n          />\n          Heart\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"bookmark\"\n          aria-label=\"Toggle bookmark\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n          />\n          Bookmark\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFilter() {\n  return (\n    <Example title=\"Filter\">\n      <ToggleGroup defaultValue={[\"all\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"all\" aria-label=\"All\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupDateRange() {\n  return (\n    <Example title=\"Date Range\">\n      <ToggleGroup\n        defaultValue={[\"today\"]}\n        variant=\"outline\"\n        size=\"sm\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"today\" aria-label=\"Today\">\n          Today\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"week\" aria-label=\"This Week\">\n          This Week\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"month\" aria-label=\"This Month\">\n          This Month\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"year\" aria-label=\"This Year\">\n          This Year\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSort() {\n  return (\n    <Example title=\"Sort\">\n      <ToggleGroup defaultValue={[\"newest\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"newest\" aria-label=\"Newest\">\n          <IconPlaceholder\n            lucide=\"ArrowDownIcon\"\n            tabler=\"IconArrowDown\"\n            hugeicons=\"ArrowDownIcon\"\n            phosphor=\"ArrowDownIcon\"\n          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n            phosphor=\"ArrowUpIcon\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\n            phosphor=\"TrendUpIcon\"\n          />\n          Popular\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithInputAndSelect() {\n  const items = [\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Archived\", value: \"archived\" },\n  ]\n  return (\n    <Example title=\"With Input and Select\">\n      <div className=\"flex items-center gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items} defaultValue={items[0]}>\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <ToggleGroup defaultValue={[\"grid\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n            Grid\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"list\" aria-label=\"List view\">\n            List\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ToggleGroup multiple orientation=\"vertical\" spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutline() {\n  return (\n    <Example title=\"Vertical Outline\">\n      <ToggleGroup\n        variant=\"outline\"\n        defaultValue={[\"all\"]}\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Toggle active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Toggle completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Toggle archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutlineWithIcons() {\n  return (\n    <Example title=\"Vertical Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple orientation=\"vertical\" size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalWithSpacing() {\n  return (\n    <Example title=\"Vertical With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        orientation=\"vertical\"\n        spacing={1}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/bases/base/ui/toggle-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleGroupBasic />\n      <ToggleGroupOutline />\n      <ToggleGroupOutlineWithIcons />\n      <ToggleGroupSizes />\n      <ToggleGroupSpacing />\n      <ToggleGroupWithIcons />\n      <ToggleGroupFilter />\n      <ToggleGroupDateRange />\n      <ToggleGroupSort />\n      <ToggleGroupWithInputAndSelect />\n      <ToggleGroupVertical />\n      <ToggleGroupVerticalOutline />\n      <ToggleGroupVerticalOutlineWithIcons />\n      <ToggleGroupVerticalWithSpacing />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ToggleGroup multiple spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutline() {\n  return (\n    <Example title=\"Outline\">\n      <ToggleGroup variant=\"outline\" defaultValue={[\"all\"]}>\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"missed\" aria-label=\"Toggle missed\">\n          Missed\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutlineWithIcons() {\n  return (\n    <Example title=\"Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <ToggleGroup size=\"sm\" defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <ToggleGroup defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSpacing() {\n  return (\n    <Example title=\"With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ToggleGroup multiple variant=\"outline\" spacing={2} size=\"sm\">\n        <ToggleGroupItem\n          value=\"star\"\n          aria-label=\"Toggle star\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"StarIcon\"\n            tabler=\"IconStar\"\n            hugeicons=\"StarIcon\"\n            phosphor=\"StarIcon\"\n          />\n          Star\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"heart\"\n          aria-label=\"Toggle heart\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconHeart\"\n            hugeicons=\"FavouriteIcon\"\n            phosphor=\"HeartIcon\"\n          />\n          Heart\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"bookmark\"\n          aria-label=\"Toggle bookmark\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n          />\n          Bookmark\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFilter() {\n  return (\n    <Example title=\"Filter\">\n      <ToggleGroup defaultValue={[\"all\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"all\" aria-label=\"All\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupDateRange() {\n  return (\n    <Example title=\"Date Range\">\n      <ToggleGroup\n        defaultValue={[\"today\"]}\n        variant=\"outline\"\n        size=\"sm\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"today\" aria-label=\"Today\">\n          Today\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"week\" aria-label=\"This Week\">\n          This Week\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"month\" aria-label=\"This Month\">\n          This Month\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"year\" aria-label=\"This Year\">\n          This Year\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSort() {\n  return (\n    <Example title=\"Sort\">\n      <ToggleGroup defaultValue={[\"newest\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"newest\" aria-label=\"Newest\">\n          <IconPlaceholder\n            lucide=\"ArrowDownIcon\"\n            tabler=\"IconArrowDown\"\n            hugeicons=\"ArrowDownIcon\"\n            phosphor=\"ArrowDownIcon\"\n          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n            phosphor=\"ArrowUpIcon\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\n            phosphor=\"TrendUpIcon\"\n          />\n          Popular\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithInputAndSelect() {\n  const items = [\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Archived\", value: \"archived\" },\n  ]\n  return (\n    <Example title=\"With Input and Select\">\n      <div className=\"flex items-center gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items} defaultValue={items[0]}>\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <ToggleGroup defaultValue={[\"grid\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n            Grid\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"list\" aria-label=\"List view\">\n            List\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ToggleGroup multiple orientation=\"vertical\" spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutline() {\n  return (\n    <Example title=\"Vertical Outline\">\n      <ToggleGroup\n        variant=\"outline\"\n        defaultValue={[\"all\"]}\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Toggle active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Toggle completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Toggle archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutlineWithIcons() {\n  return (\n    <Example title=\"Vertical Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple orientation=\"vertical\" size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalWithSpacing() {\n  return (\n    <Example title=\"Vertical With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        orientation=\"vertical\"\n        spacing={1}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/calendar.json b/apps/v4/public/r/styles/radix-lyra/calendar.json
index 13d8c18cc4..323199d5c0 100644
--- a/apps/v4/public/r/styles/radix-lyra/calendar.json
+++ b/apps/v4/public/r/styles/radix-lyra/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-2 [--cell-size:--spacing(7)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted-200 after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-2 [--cell-size:--spacing(7)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted-200 after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/github.json b/apps/v4/public/r/styles/radix-lyra/github.json
index 35ef71d44e..3bdc01d25c 100644
--- a/apps/v4/public/r/styles/radix-lyra/github.json
+++ b/apps/v4/public/r/styles/radix-lyra/github.json
@@ -30,7 +30,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/blocks/github.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/bases/radix/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/bases/radix/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport { NativeSelect } from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon-sm\">\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <DropdownMenuTrigger asChild>\n                          <Button variant=\"ghost\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"MoreHorizontalIcon\"\n                              tabler=\"IconDots\"\n                              hugeicons=\"MoreHorizontalCircle01Icon\"\n                              phosphor=\"DotsThreeOutlineIcon\"\n                            />\n                          </Button>\n                        </DropdownMenuTrigger>\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                      className=\"w-56\"\n                    >\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                        />\n                        New with options...\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ContainerIcon\"\n                          tabler=\"IconBox\"\n                          hugeicons=\"CubeIcon\"\n                          phosphor=\"CubeIcon\"\n                        />\n                        Configure dev container\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ZapIcon\"\n                          tabler=\"IconBolt\"\n                          hugeicons=\"ZapIcon\"\n                          phosphor=\"LightningIcon\"\n                        />\n                        Set up prebuilds\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ServerIcon\"\n                          tabler=\"IconServer\"\n                          hugeicons=\"ServerStackIcon\"\n                          phosphor=\"HardDrivesIcon\"\n                        />\n                        Manage codespaces\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ShareIcon\"\n                          tabler=\"IconShare2\"\n                          hugeicons=\"Share03Icon\"\n                          phosphor=\"ShareIcon\"\n                        />\n                        Share deep link\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                        />\n                        What are codespaces?\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">\n              Add File\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n              Create new file\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UploadIcon\"\n                hugeicons=\"Upload01Icon\"\n                tabler=\"IconUpload\"\n                phosphor=\"UploadIcon\"\n              />\n              Upload files\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <PopoverTrigger asChild>\n                <Button variant=\"outline\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"CloudCogIcon\"\n                    hugeicons=\"AiCloud01Icon\"\n                    tabler=\"IconCloudCog\"\n                    phosphor=\"CloudArrowUpIcon\"\n                  />\n                </Button>\n              </PopoverTrigger>\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent\n            className=\"w-80\"\n            onCloseAutoFocus={(e) => e.preventDefault()}\n          >\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"GitBranchIcon\"\n                              hugeicons=\"GitBranchIcon\"\n                              tabler=\"IconGitBranch\"\n                              phosphor=\"GitBranchIcon\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent\n                      side=\"bottom\"\n                      align=\"start\"\n                      className=\"p-1\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                    >\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"BotIcon\"\n                              hugeicons=\"RoboticIcon\"\n                              tabler=\"IconRobot\"\n                              phosphor=\"RobotIcon\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"top\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <InputGroupButton\n                        variant=\"ghost\"\n                        size=\"icon-sm\"\n                        className=\"ml-auto\"\n                      >\n                        <IconPlaceholder\n                          lucide=\"SendIcon\"\n                          hugeicons=\"SentIcon\"\n                          tabler=\"IconSend\"\n                          phosphor=\"PaperPlaneTiltIcon\"\n                        />\n                      </InputGroupButton>\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"HomeIcon\"\n                        tabler=\"IconHome\"\n                        hugeicons=\"HomeIcon\"\n                        phosphor=\"HouseIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Home</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"CircleIcon\"\n                        tabler=\"IconCircle\"\n                        hugeicons=\"CircleIcon\"\n                        phosphor=\"CircleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Issues</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"GitBranchIcon\"\n                        tabler=\"IconGitBranch\"\n                        hugeicons=\"GitBranchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Pull requests</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LayoutGridIcon\"\n                        tabler=\"IconLayoutGrid\"\n                        hugeicons=\"GridIcon\"\n                        phosphor=\"GridFourIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Projects</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Discussions</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ServerIcon\"\n                        tabler=\"IconServer\"\n                        hugeicons=\"ServerStackIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Codespaces</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"BotIcon\"\n                        tabler=\"IconRobot\"\n                        hugeicons=\"RoboticIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Copilot</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SparklesIcon\"\n                        tabler=\"IconSparkles\"\n                        hugeicons=\"SparklesIcon\"\n                        phosphor=\"SparkleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Spark</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <ItemSeparator />\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SearchIcon\"\n                        tabler=\"IconSearch\"\n                        hugeicons=\"SearchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Explore</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ShoppingBagIcon\"\n                        tabler=\"IconShoppingBag\"\n                        hugeicons=\"ShoppingBasket01Icon\"\n                        phosphor=\"BagIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Marketplace</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LinkIcon\"\n                        tabler=\"IconLink\"\n                        hugeicons=\"LinkIcon\"\n                        phosphor=\"LinkIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>MCP registry</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"ml-auto rounded-full\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>SC</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                <ItemMedia>\n                  <Avatar>\n                    <AvatarImage\n                      src=\"https://github.com/shadcn.png\"\n                      alt=\"shadcn\"\n                    />\n                    <AvatarFallback>SC</AvatarFallback>\n                  </Avatar>\n                </ItemMedia>\n                <ItemContent className=\"gap-0\">\n                  <ItemTitle className=\"text-foreground text-sm\">\n                    shadcn\n                  </ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    shadcn@example.com\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Sign out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <option value=\"m@shadcn.com\">m@shadcn.com</option>\n                  <option value=\"m@gmail.com\">m@gmail.com</option>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/bases/radix/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/bases/radix/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport { NativeSelect } from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon-sm\">\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <DropdownMenuTrigger asChild>\n                          <Button variant=\"ghost\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"MoreHorizontalIcon\"\n                              tabler=\"IconDots\"\n                              hugeicons=\"MoreHorizontalCircle01Icon\"\n                              phosphor=\"DotsThreeOutlineIcon\"\n                            />\n                          </Button>\n                        </DropdownMenuTrigger>\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                      className=\"w-56\"\n                    >\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                        />\n                        New with options...\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ContainerIcon\"\n                          tabler=\"IconBox\"\n                          hugeicons=\"CubeIcon\"\n                          phosphor=\"CubeIcon\"\n                        />\n                        Configure dev container\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ZapIcon\"\n                          tabler=\"IconBolt\"\n                          hugeicons=\"ZapIcon\"\n                          phosphor=\"LightningIcon\"\n                        />\n                        Set up prebuilds\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ServerIcon\"\n                          tabler=\"IconServer\"\n                          hugeicons=\"ServerStackIcon\"\n                          phosphor=\"HardDrivesIcon\"\n                        />\n                        Manage codespaces\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ShareIcon\"\n                          tabler=\"IconShare2\"\n                          hugeicons=\"Share03Icon\"\n                          phosphor=\"ShareIcon\"\n                        />\n                        Share deep link\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                        />\n                        What are codespaces?\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">\n              Add File\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n              Create new file\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UploadIcon\"\n                hugeicons=\"Upload01Icon\"\n                tabler=\"IconUpload\"\n                phosphor=\"UploadIcon\"\n              />\n              Upload files\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <PopoverTrigger asChild>\n                <Button variant=\"outline\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"CloudCogIcon\"\n                    hugeicons=\"AiCloud01Icon\"\n                    tabler=\"IconCloudCog\"\n                    phosphor=\"CloudArrowUpIcon\"\n                  />\n                </Button>\n              </PopoverTrigger>\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent\n            className=\"w-80\"\n            onCloseAutoFocus={(e) => e.preventDefault()}\n          >\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"GitBranchIcon\"\n                              hugeicons=\"GitBranchIcon\"\n                              tabler=\"IconGitBranch\"\n                              phosphor=\"GitBranchIcon\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent\n                      side=\"bottom\"\n                      align=\"start\"\n                      className=\"p-1\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                    >\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"BotIcon\"\n                              hugeicons=\"RoboticIcon\"\n                              tabler=\"IconRobot\"\n                              phosphor=\"RobotIcon\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"top\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <InputGroupButton\n                        variant=\"ghost\"\n                        size=\"icon-sm\"\n                        className=\"ml-auto\"\n                      >\n                        <IconPlaceholder\n                          lucide=\"SendIcon\"\n                          hugeicons=\"SentIcon\"\n                          tabler=\"IconSend\"\n                          phosphor=\"PaperPlaneTiltIcon\"\n                        />\n                      </InputGroupButton>\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"HomeIcon\"\n                        tabler=\"IconHome\"\n                        hugeicons=\"HomeIcon\"\n                        phosphor=\"HouseIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Home</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"CircleIcon\"\n                        tabler=\"IconCircle\"\n                        hugeicons=\"CircleIcon\"\n                        phosphor=\"CircleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Issues</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"GitBranchIcon\"\n                        tabler=\"IconGitBranch\"\n                        hugeicons=\"GitBranchIcon\"\n                        phosphor=\"GitBranchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Pull requests</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LayoutGridIcon\"\n                        tabler=\"IconLayoutGrid\"\n                        hugeicons=\"GridIcon\"\n                        phosphor=\"GridFourIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Projects</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Discussions</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ServerIcon\"\n                        tabler=\"IconServer\"\n                        hugeicons=\"ServerStackIcon\"\n                        phosphor=\"HardDrivesIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Codespaces</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"BotIcon\"\n                        tabler=\"IconRobot\"\n                        hugeicons=\"RoboticIcon\"\n                        phosphor=\"RobotIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Copilot</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SparklesIcon\"\n                        tabler=\"IconSparkles\"\n                        hugeicons=\"SparklesIcon\"\n                        phosphor=\"SparkleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Spark</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <ItemSeparator />\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SearchIcon\"\n                        tabler=\"IconSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Explore</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ShoppingBagIcon\"\n                        tabler=\"IconShoppingBag\"\n                        hugeicons=\"ShoppingBasket01Icon\"\n                        phosphor=\"BagIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Marketplace</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LinkIcon\"\n                        tabler=\"IconLink\"\n                        hugeicons=\"LinkIcon\"\n                        phosphor=\"LinkIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>MCP registry</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"ml-auto rounded-full\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>SC</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                <ItemMedia>\n                  <Avatar>\n                    <AvatarImage\n                      src=\"https://github.com/shadcn.png\"\n                      alt=\"shadcn\"\n                    />\n                    <AvatarFallback>SC</AvatarFallback>\n                  </Avatar>\n                </ItemMedia>\n                <ItemContent className=\"gap-0\">\n                  <ItemTitle className=\"text-foreground text-sm\">\n                    shadcn\n                  </ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    shadcn@example.com\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                  phosphor=\"HardDrivesIcon\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                  phosphor=\"HeartIcon\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                  phosphor=\"RobotIcon\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                  phosphor=\"MonitorIcon\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n              />\n              Sign out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <option value=\"m@shadcn.com\">m@shadcn.com</option>\n                  <option value=\"m@gmail.com\">m@gmail.com</option>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                  />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/vercel.json b/apps/v4/public/r/styles/radix-lyra/vercel.json
index 722794dcbd..609a354707 100644
--- a/apps/v4/public/r/styles/radix-lyra/vercel.json
+++ b/apps/v4/public/r/styles/radix-lyra/vercel.json
@@ -23,7 +23,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/blocks/vercel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/radix/ui/alert\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Calendar } from \"@/registry/bases/radix/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/radix/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                asChild\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n              >\n                <a href=\"#\">\n                  <ItemMedia variant=\"icon\" className=\"text-primary\">\n                    <CircularGauge percentage={item.percentage} />\n                  </ItemMedia>\n                  <ItemContent className=\"inline-block truncate\">\n                    <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                  </ItemContent>\n                  <ItemActions>\n                    <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                      {item.value}\n                    </span>\n                  </ItemActions>\n                </a>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example title=\"Anomaly Alert\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-start\">\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"Calendar01Icon\"\n                phosphor=\"CalendarIcon\"\n                data-icon=\"inline-start\"\n                className=\"text-muted-foreground\"\n              />\n              {dateRange?.from ? (\n                dateRange.to ? (\n                  <>\n                    {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                    {format(dateRange.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(dateRange.from, \"LLL dd, y\")\n                )\n              ) : (\n                \"Select Date Range\"\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              {selectedEnvironment}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              <div className=\"flex items-center -space-x-0.5\">\n                {statuses.map((status) => (\n                  <div\n                    key={status.name}\n                    style={\n                      {\n                        \"--color\": status.color,\n                      } as React.CSSProperties\n                    }\n                    className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                    data-active={selectedStatuses.has(status.name)}\n                  />\n                ))}\n              </div>\n              Status {selectedStatuses.size}/{statuses.length}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                      />\n                      <span className=\"sr-only\">More options</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Activate Agent</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n                phosphor=\"CurrencyCircleDollarIcon\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/radix/ui/alert\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Calendar } from \"@/registry/bases/radix/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/radix/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                asChild\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n              >\n                <a href=\"#\">\n                  <ItemMedia variant=\"icon\" className=\"text-primary\">\n                    <CircularGauge percentage={item.percentage} />\n                  </ItemMedia>\n                  <ItemContent className=\"inline-block truncate\">\n                    <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                  </ItemContent>\n                  <ItemActions>\n                    <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                      {item.value}\n                    </span>\n                  </ItemActions>\n                </a>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example title=\"Anomaly Alert\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-start\">\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"Calendar01Icon\"\n                phosphor=\"CalendarIcon\"\n                data-icon=\"inline-start\"\n                className=\"text-muted-foreground\"\n              />\n              {dateRange?.from ? (\n                dateRange.to ? (\n                  <>\n                    {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                    {format(dateRange.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(dateRange.from, \"LLL dd, y\")\n                )\n              ) : (\n                \"Select Date Range\"\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              {selectedEnvironment}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              <div className=\"flex items-center -space-x-0.5\">\n                {statuses.map((status) => (\n                  <div\n                    key={status.name}\n                    style={\n                      {\n                        \"--color\": status.color,\n                      } as React.CSSProperties\n                    }\n                    className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                    data-active={selectedStatuses.has(status.name)}\n                  />\n                ))}\n              </div>\n              Status {selectedStatuses.size}/{statuses.length}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                      />\n                      <span className=\"sr-only\">More options</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Activate Agent</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n                phosphor=\"CurrencyCircleDollarIcon\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/calendar.json b/apps/v4/public/r/styles/radix-maia/calendar.json
index 56170f3e08..2d48057ded 100644
--- a/apps/v4/public/r/styles/radix-maia/calendar.json
+++ b/apps/v4/public/r/styles/radix-maia/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-3 [--cell-radius:var(--radius-4xl)] [--cell-size:--spacing(8)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted-200 after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-3 [--cell-radius:var(--radius-4xl)] [--cell-size:--spacing(8)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted-200 after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/github.json b/apps/v4/public/r/styles/radix-maia/github.json
index de4b1c7bf5..6b40325188 100644
--- a/apps/v4/public/r/styles/radix-maia/github.json
+++ b/apps/v4/public/r/styles/radix-maia/github.json
@@ -30,7 +30,7 @@
   "files": [
     {
       "path": "registry/radix-maia/blocks/github.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/bases/radix/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/bases/radix/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport { NativeSelect } from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon-sm\">\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <DropdownMenuTrigger asChild>\n                          <Button variant=\"ghost\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"MoreHorizontalIcon\"\n                              tabler=\"IconDots\"\n                              hugeicons=\"MoreHorizontalCircle01Icon\"\n                              phosphor=\"DotsThreeOutlineIcon\"\n                            />\n                          </Button>\n                        </DropdownMenuTrigger>\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                      className=\"w-56\"\n                    >\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                        />\n                        New with options...\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ContainerIcon\"\n                          tabler=\"IconBox\"\n                          hugeicons=\"CubeIcon\"\n                          phosphor=\"CubeIcon\"\n                        />\n                        Configure dev container\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ZapIcon\"\n                          tabler=\"IconBolt\"\n                          hugeicons=\"ZapIcon\"\n                          phosphor=\"LightningIcon\"\n                        />\n                        Set up prebuilds\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ServerIcon\"\n                          tabler=\"IconServer\"\n                          hugeicons=\"ServerStackIcon\"\n                          phosphor=\"HardDrivesIcon\"\n                        />\n                        Manage codespaces\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ShareIcon\"\n                          tabler=\"IconShare2\"\n                          hugeicons=\"Share03Icon\"\n                          phosphor=\"ShareIcon\"\n                        />\n                        Share deep link\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                        />\n                        What are codespaces?\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">\n              Add File\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n              Create new file\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UploadIcon\"\n                hugeicons=\"Upload01Icon\"\n                tabler=\"IconUpload\"\n                phosphor=\"UploadIcon\"\n              />\n              Upload files\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <PopoverTrigger asChild>\n                <Button variant=\"outline\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"CloudCogIcon\"\n                    hugeicons=\"AiCloud01Icon\"\n                    tabler=\"IconCloudCog\"\n                    phosphor=\"CloudArrowUpIcon\"\n                  />\n                </Button>\n              </PopoverTrigger>\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent\n            className=\"w-80\"\n            onCloseAutoFocus={(e) => e.preventDefault()}\n          >\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"GitBranchIcon\"\n                              hugeicons=\"GitBranchIcon\"\n                              tabler=\"IconGitBranch\"\n                              phosphor=\"GitBranchIcon\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent\n                      side=\"bottom\"\n                      align=\"start\"\n                      className=\"p-1\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                    >\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"BotIcon\"\n                              hugeicons=\"RoboticIcon\"\n                              tabler=\"IconRobot\"\n                              phosphor=\"RobotIcon\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"top\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <InputGroupButton\n                        variant=\"ghost\"\n                        size=\"icon-sm\"\n                        className=\"ml-auto\"\n                      >\n                        <IconPlaceholder\n                          lucide=\"SendIcon\"\n                          hugeicons=\"SentIcon\"\n                          tabler=\"IconSend\"\n                          phosphor=\"PaperPlaneTiltIcon\"\n                        />\n                      </InputGroupButton>\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"HomeIcon\"\n                        tabler=\"IconHome\"\n                        hugeicons=\"HomeIcon\"\n                        phosphor=\"HouseIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Home</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"CircleIcon\"\n                        tabler=\"IconCircle\"\n                        hugeicons=\"CircleIcon\"\n                        phosphor=\"CircleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Issues</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"GitBranchIcon\"\n                        tabler=\"IconGitBranch\"\n                        hugeicons=\"GitBranchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Pull requests</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LayoutGridIcon\"\n                        tabler=\"IconLayoutGrid\"\n                        hugeicons=\"GridIcon\"\n                        phosphor=\"GridFourIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Projects</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Discussions</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ServerIcon\"\n                        tabler=\"IconServer\"\n                        hugeicons=\"ServerStackIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Codespaces</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"BotIcon\"\n                        tabler=\"IconRobot\"\n                        hugeicons=\"RoboticIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Copilot</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SparklesIcon\"\n                        tabler=\"IconSparkles\"\n                        hugeicons=\"SparklesIcon\"\n                        phosphor=\"SparkleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Spark</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <ItemSeparator />\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SearchIcon\"\n                        tabler=\"IconSearch\"\n                        hugeicons=\"SearchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Explore</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ShoppingBagIcon\"\n                        tabler=\"IconShoppingBag\"\n                        hugeicons=\"ShoppingBasket01Icon\"\n                        phosphor=\"BagIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Marketplace</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LinkIcon\"\n                        tabler=\"IconLink\"\n                        hugeicons=\"LinkIcon\"\n                        phosphor=\"LinkIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>MCP registry</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"ml-auto rounded-full\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>SC</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                <ItemMedia>\n                  <Avatar>\n                    <AvatarImage\n                      src=\"https://github.com/shadcn.png\"\n                      alt=\"shadcn\"\n                    />\n                    <AvatarFallback>SC</AvatarFallback>\n                  </Avatar>\n                </ItemMedia>\n                <ItemContent className=\"gap-0\">\n                  <ItemTitle className=\"text-foreground text-sm\">\n                    shadcn\n                  </ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    shadcn@example.com\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Sign out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <option value=\"m@shadcn.com\">m@shadcn.com</option>\n                  <option value=\"m@gmail.com\">m@gmail.com</option>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/bases/radix/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/bases/radix/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport { NativeSelect } from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon-sm\">\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <DropdownMenuTrigger asChild>\n                          <Button variant=\"ghost\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"MoreHorizontalIcon\"\n                              tabler=\"IconDots\"\n                              hugeicons=\"MoreHorizontalCircle01Icon\"\n                              phosphor=\"DotsThreeOutlineIcon\"\n                            />\n                          </Button>\n                        </DropdownMenuTrigger>\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                      className=\"w-56\"\n                    >\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                        />\n                        New with options...\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ContainerIcon\"\n                          tabler=\"IconBox\"\n                          hugeicons=\"CubeIcon\"\n                          phosphor=\"CubeIcon\"\n                        />\n                        Configure dev container\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ZapIcon\"\n                          tabler=\"IconBolt\"\n                          hugeicons=\"ZapIcon\"\n                          phosphor=\"LightningIcon\"\n                        />\n                        Set up prebuilds\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ServerIcon\"\n                          tabler=\"IconServer\"\n                          hugeicons=\"ServerStackIcon\"\n                          phosphor=\"HardDrivesIcon\"\n                        />\n                        Manage codespaces\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ShareIcon\"\n                          tabler=\"IconShare2\"\n                          hugeicons=\"Share03Icon\"\n                          phosphor=\"ShareIcon\"\n                        />\n                        Share deep link\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                        />\n                        What are codespaces?\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">\n              Add File\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n              Create new file\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UploadIcon\"\n                hugeicons=\"Upload01Icon\"\n                tabler=\"IconUpload\"\n                phosphor=\"UploadIcon\"\n              />\n              Upload files\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <PopoverTrigger asChild>\n                <Button variant=\"outline\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"CloudCogIcon\"\n                    hugeicons=\"AiCloud01Icon\"\n                    tabler=\"IconCloudCog\"\n                    phosphor=\"CloudArrowUpIcon\"\n                  />\n                </Button>\n              </PopoverTrigger>\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent\n            className=\"w-80\"\n            onCloseAutoFocus={(e) => e.preventDefault()}\n          >\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"GitBranchIcon\"\n                              hugeicons=\"GitBranchIcon\"\n                              tabler=\"IconGitBranch\"\n                              phosphor=\"GitBranchIcon\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent\n                      side=\"bottom\"\n                      align=\"start\"\n                      className=\"p-1\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                    >\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"BotIcon\"\n                              hugeicons=\"RoboticIcon\"\n                              tabler=\"IconRobot\"\n                              phosphor=\"RobotIcon\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"top\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <InputGroupButton\n                        variant=\"ghost\"\n                        size=\"icon-sm\"\n                        className=\"ml-auto\"\n                      >\n                        <IconPlaceholder\n                          lucide=\"SendIcon\"\n                          hugeicons=\"SentIcon\"\n                          tabler=\"IconSend\"\n                          phosphor=\"PaperPlaneTiltIcon\"\n                        />\n                      </InputGroupButton>\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"HomeIcon\"\n                        tabler=\"IconHome\"\n                        hugeicons=\"HomeIcon\"\n                        phosphor=\"HouseIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Home</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"CircleIcon\"\n                        tabler=\"IconCircle\"\n                        hugeicons=\"CircleIcon\"\n                        phosphor=\"CircleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Issues</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"GitBranchIcon\"\n                        tabler=\"IconGitBranch\"\n                        hugeicons=\"GitBranchIcon\"\n                        phosphor=\"GitBranchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Pull requests</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LayoutGridIcon\"\n                        tabler=\"IconLayoutGrid\"\n                        hugeicons=\"GridIcon\"\n                        phosphor=\"GridFourIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Projects</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Discussions</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ServerIcon\"\n                        tabler=\"IconServer\"\n                        hugeicons=\"ServerStackIcon\"\n                        phosphor=\"HardDrivesIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Codespaces</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"BotIcon\"\n                        tabler=\"IconRobot\"\n                        hugeicons=\"RoboticIcon\"\n                        phosphor=\"RobotIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Copilot</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SparklesIcon\"\n                        tabler=\"IconSparkles\"\n                        hugeicons=\"SparklesIcon\"\n                        phosphor=\"SparkleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Spark</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <ItemSeparator />\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SearchIcon\"\n                        tabler=\"IconSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Explore</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ShoppingBagIcon\"\n                        tabler=\"IconShoppingBag\"\n                        hugeicons=\"ShoppingBasket01Icon\"\n                        phosphor=\"BagIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Marketplace</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LinkIcon\"\n                        tabler=\"IconLink\"\n                        hugeicons=\"LinkIcon\"\n                        phosphor=\"LinkIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>MCP registry</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"ml-auto rounded-full\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>SC</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                <ItemMedia>\n                  <Avatar>\n                    <AvatarImage\n                      src=\"https://github.com/shadcn.png\"\n                      alt=\"shadcn\"\n                    />\n                    <AvatarFallback>SC</AvatarFallback>\n                  </Avatar>\n                </ItemMedia>\n                <ItemContent className=\"gap-0\">\n                  <ItemTitle className=\"text-foreground text-sm\">\n                    shadcn\n                  </ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    shadcn@example.com\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                  phosphor=\"HardDrivesIcon\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                  phosphor=\"HeartIcon\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                  phosphor=\"RobotIcon\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                  phosphor=\"MonitorIcon\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n              />\n              Sign out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <option value=\"m@shadcn.com\">m@shadcn.com</option>\n                  <option value=\"m@gmail.com\">m@gmail.com</option>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                  />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/vercel.json b/apps/v4/public/r/styles/radix-maia/vercel.json
index 4d72c7458d..50bcc52f60 100644
--- a/apps/v4/public/r/styles/radix-maia/vercel.json
+++ b/apps/v4/public/r/styles/radix-maia/vercel.json
@@ -23,7 +23,7 @@
   "files": [
     {
       "path": "registry/radix-maia/blocks/vercel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/radix/ui/alert\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Calendar } from \"@/registry/bases/radix/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/radix/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                asChild\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n              >\n                <a href=\"#\">\n                  <ItemMedia variant=\"icon\" className=\"text-primary\">\n                    <CircularGauge percentage={item.percentage} />\n                  </ItemMedia>\n                  <ItemContent className=\"inline-block truncate\">\n                    <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                  </ItemContent>\n                  <ItemActions>\n                    <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                      {item.value}\n                    </span>\n                  </ItemActions>\n                </a>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example title=\"Anomaly Alert\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-start\">\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"Calendar01Icon\"\n                phosphor=\"CalendarIcon\"\n                data-icon=\"inline-start\"\n                className=\"text-muted-foreground\"\n              />\n              {dateRange?.from ? (\n                dateRange.to ? (\n                  <>\n                    {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                    {format(dateRange.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(dateRange.from, \"LLL dd, y\")\n                )\n              ) : (\n                \"Select Date Range\"\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              {selectedEnvironment}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              <div className=\"flex items-center -space-x-0.5\">\n                {statuses.map((status) => (\n                  <div\n                    key={status.name}\n                    style={\n                      {\n                        \"--color\": status.color,\n                      } as React.CSSProperties\n                    }\n                    className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                    data-active={selectedStatuses.has(status.name)}\n                  />\n                ))}\n              </div>\n              Status {selectedStatuses.size}/{statuses.length}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                      />\n                      <span className=\"sr-only\">More options</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Activate Agent</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n                phosphor=\"CurrencyCircleDollarIcon\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/radix/ui/alert\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Calendar } from \"@/registry/bases/radix/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/radix/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                asChild\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n              >\n                <a href=\"#\">\n                  <ItemMedia variant=\"icon\" className=\"text-primary\">\n                    <CircularGauge percentage={item.percentage} />\n                  </ItemMedia>\n                  <ItemContent className=\"inline-block truncate\">\n                    <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                  </ItemContent>\n                  <ItemActions>\n                    <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                      {item.value}\n                    </span>\n                  </ItemActions>\n                </a>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example title=\"Anomaly Alert\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-start\">\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"Calendar01Icon\"\n                phosphor=\"CalendarIcon\"\n                data-icon=\"inline-start\"\n                className=\"text-muted-foreground\"\n              />\n              {dateRange?.from ? (\n                dateRange.to ? (\n                  <>\n                    {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                    {format(dateRange.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(dateRange.from, \"LLL dd, y\")\n                )\n              ) : (\n                \"Select Date Range\"\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              {selectedEnvironment}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              <div className=\"flex items-center -space-x-0.5\">\n                {statuses.map((status) => (\n                  <div\n                    key={status.name}\n                    style={\n                      {\n                        \"--color\": status.color,\n                      } as React.CSSProperties\n                    }\n                    className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                    data-active={selectedStatuses.has(status.name)}\n                  />\n                ))}\n              </div>\n              Status {selectedStatuses.size}/{statuses.length}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                      />\n                      <span className=\"sr-only\">More options</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Activate Agent</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n                phosphor=\"CurrencyCircleDollarIcon\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/calendar.json b/apps/v4/public/r/styles/radix-mira/calendar.json
index 7eee4c34ae..299023b043 100644
--- a/apps/v4/public/r/styles/radix-mira/calendar.json
+++ b/apps/v4/public/r/styles/radix-mira/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(6)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted-200 after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(6)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted-200 after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/github.json b/apps/v4/public/r/styles/radix-mira/github.json
index a125bb4989..7cdce33c8e 100644
--- a/apps/v4/public/r/styles/radix-mira/github.json
+++ b/apps/v4/public/r/styles/radix-mira/github.json
@@ -30,7 +30,7 @@
   "files": [
     {
       "path": "registry/radix-mira/blocks/github.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/bases/radix/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/bases/radix/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport { NativeSelect } from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon-sm\">\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <DropdownMenuTrigger asChild>\n                          <Button variant=\"ghost\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"MoreHorizontalIcon\"\n                              tabler=\"IconDots\"\n                              hugeicons=\"MoreHorizontalCircle01Icon\"\n                              phosphor=\"DotsThreeOutlineIcon\"\n                            />\n                          </Button>\n                        </DropdownMenuTrigger>\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                      className=\"w-56\"\n                    >\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                        />\n                        New with options...\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ContainerIcon\"\n                          tabler=\"IconBox\"\n                          hugeicons=\"CubeIcon\"\n                          phosphor=\"CubeIcon\"\n                        />\n                        Configure dev container\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ZapIcon\"\n                          tabler=\"IconBolt\"\n                          hugeicons=\"ZapIcon\"\n                          phosphor=\"LightningIcon\"\n                        />\n                        Set up prebuilds\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ServerIcon\"\n                          tabler=\"IconServer\"\n                          hugeicons=\"ServerStackIcon\"\n                          phosphor=\"HardDrivesIcon\"\n                        />\n                        Manage codespaces\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ShareIcon\"\n                          tabler=\"IconShare2\"\n                          hugeicons=\"Share03Icon\"\n                          phosphor=\"ShareIcon\"\n                        />\n                        Share deep link\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                        />\n                        What are codespaces?\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">\n              Add File\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n              Create new file\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UploadIcon\"\n                hugeicons=\"Upload01Icon\"\n                tabler=\"IconUpload\"\n                phosphor=\"UploadIcon\"\n              />\n              Upload files\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <PopoverTrigger asChild>\n                <Button variant=\"outline\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"CloudCogIcon\"\n                    hugeicons=\"AiCloud01Icon\"\n                    tabler=\"IconCloudCog\"\n                    phosphor=\"CloudArrowUpIcon\"\n                  />\n                </Button>\n              </PopoverTrigger>\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent\n            className=\"w-80\"\n            onCloseAutoFocus={(e) => e.preventDefault()}\n          >\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"GitBranchIcon\"\n                              hugeicons=\"GitBranchIcon\"\n                              tabler=\"IconGitBranch\"\n                              phosphor=\"GitBranchIcon\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent\n                      side=\"bottom\"\n                      align=\"start\"\n                      className=\"p-1\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                    >\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"BotIcon\"\n                              hugeicons=\"RoboticIcon\"\n                              tabler=\"IconRobot\"\n                              phosphor=\"RobotIcon\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"top\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <InputGroupButton\n                        variant=\"ghost\"\n                        size=\"icon-sm\"\n                        className=\"ml-auto\"\n                      >\n                        <IconPlaceholder\n                          lucide=\"SendIcon\"\n                          hugeicons=\"SentIcon\"\n                          tabler=\"IconSend\"\n                          phosphor=\"PaperPlaneTiltIcon\"\n                        />\n                      </InputGroupButton>\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"HomeIcon\"\n                        tabler=\"IconHome\"\n                        hugeicons=\"HomeIcon\"\n                        phosphor=\"HouseIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Home</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"CircleIcon\"\n                        tabler=\"IconCircle\"\n                        hugeicons=\"CircleIcon\"\n                        phosphor=\"CircleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Issues</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"GitBranchIcon\"\n                        tabler=\"IconGitBranch\"\n                        hugeicons=\"GitBranchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Pull requests</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LayoutGridIcon\"\n                        tabler=\"IconLayoutGrid\"\n                        hugeicons=\"GridIcon\"\n                        phosphor=\"GridFourIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Projects</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Discussions</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ServerIcon\"\n                        tabler=\"IconServer\"\n                        hugeicons=\"ServerStackIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Codespaces</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"BotIcon\"\n                        tabler=\"IconRobot\"\n                        hugeicons=\"RoboticIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Copilot</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SparklesIcon\"\n                        tabler=\"IconSparkles\"\n                        hugeicons=\"SparklesIcon\"\n                        phosphor=\"SparkleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Spark</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <ItemSeparator />\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SearchIcon\"\n                        tabler=\"IconSearch\"\n                        hugeicons=\"SearchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Explore</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ShoppingBagIcon\"\n                        tabler=\"IconShoppingBag\"\n                        hugeicons=\"ShoppingBasket01Icon\"\n                        phosphor=\"BagIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Marketplace</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LinkIcon\"\n                        tabler=\"IconLink\"\n                        hugeicons=\"LinkIcon\"\n                        phosphor=\"LinkIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>MCP registry</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"ml-auto rounded-full\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>SC</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                <ItemMedia>\n                  <Avatar>\n                    <AvatarImage\n                      src=\"https://github.com/shadcn.png\"\n                      alt=\"shadcn\"\n                    />\n                    <AvatarFallback>SC</AvatarFallback>\n                  </Avatar>\n                </ItemMedia>\n                <ItemContent className=\"gap-0\">\n                  <ItemTitle className=\"text-foreground text-sm\">\n                    shadcn\n                  </ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    shadcn@example.com\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Sign out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <option value=\"m@shadcn.com\">m@shadcn.com</option>\n                  <option value=\"m@gmail.com\">m@gmail.com</option>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/bases/radix/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/bases/radix/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport { NativeSelect } from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon-sm\">\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <DropdownMenuTrigger asChild>\n                          <Button variant=\"ghost\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"MoreHorizontalIcon\"\n                              tabler=\"IconDots\"\n                              hugeicons=\"MoreHorizontalCircle01Icon\"\n                              phosphor=\"DotsThreeOutlineIcon\"\n                            />\n                          </Button>\n                        </DropdownMenuTrigger>\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                      className=\"w-56\"\n                    >\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                        />\n                        New with options...\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ContainerIcon\"\n                          tabler=\"IconBox\"\n                          hugeicons=\"CubeIcon\"\n                          phosphor=\"CubeIcon\"\n                        />\n                        Configure dev container\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ZapIcon\"\n                          tabler=\"IconBolt\"\n                          hugeicons=\"ZapIcon\"\n                          phosphor=\"LightningIcon\"\n                        />\n                        Set up prebuilds\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ServerIcon\"\n                          tabler=\"IconServer\"\n                          hugeicons=\"ServerStackIcon\"\n                          phosphor=\"HardDrivesIcon\"\n                        />\n                        Manage codespaces\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ShareIcon\"\n                          tabler=\"IconShare2\"\n                          hugeicons=\"Share03Icon\"\n                          phosphor=\"ShareIcon\"\n                        />\n                        Share deep link\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                        />\n                        What are codespaces?\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">\n              Add File\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n              Create new file\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UploadIcon\"\n                hugeicons=\"Upload01Icon\"\n                tabler=\"IconUpload\"\n                phosphor=\"UploadIcon\"\n              />\n              Upload files\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <PopoverTrigger asChild>\n                <Button variant=\"outline\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"CloudCogIcon\"\n                    hugeicons=\"AiCloud01Icon\"\n                    tabler=\"IconCloudCog\"\n                    phosphor=\"CloudArrowUpIcon\"\n                  />\n                </Button>\n              </PopoverTrigger>\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent\n            className=\"w-80\"\n            onCloseAutoFocus={(e) => e.preventDefault()}\n          >\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"GitBranchIcon\"\n                              hugeicons=\"GitBranchIcon\"\n                              tabler=\"IconGitBranch\"\n                              phosphor=\"GitBranchIcon\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent\n                      side=\"bottom\"\n                      align=\"start\"\n                      className=\"p-1\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                    >\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"BotIcon\"\n                              hugeicons=\"RoboticIcon\"\n                              tabler=\"IconRobot\"\n                              phosphor=\"RobotIcon\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"top\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <InputGroupButton\n                        variant=\"ghost\"\n                        size=\"icon-sm\"\n                        className=\"ml-auto\"\n                      >\n                        <IconPlaceholder\n                          lucide=\"SendIcon\"\n                          hugeicons=\"SentIcon\"\n                          tabler=\"IconSend\"\n                          phosphor=\"PaperPlaneTiltIcon\"\n                        />\n                      </InputGroupButton>\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"HomeIcon\"\n                        tabler=\"IconHome\"\n                        hugeicons=\"HomeIcon\"\n                        phosphor=\"HouseIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Home</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"CircleIcon\"\n                        tabler=\"IconCircle\"\n                        hugeicons=\"CircleIcon\"\n                        phosphor=\"CircleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Issues</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"GitBranchIcon\"\n                        tabler=\"IconGitBranch\"\n                        hugeicons=\"GitBranchIcon\"\n                        phosphor=\"GitBranchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Pull requests</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LayoutGridIcon\"\n                        tabler=\"IconLayoutGrid\"\n                        hugeicons=\"GridIcon\"\n                        phosphor=\"GridFourIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Projects</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Discussions</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ServerIcon\"\n                        tabler=\"IconServer\"\n                        hugeicons=\"ServerStackIcon\"\n                        phosphor=\"HardDrivesIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Codespaces</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"BotIcon\"\n                        tabler=\"IconRobot\"\n                        hugeicons=\"RoboticIcon\"\n                        phosphor=\"RobotIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Copilot</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SparklesIcon\"\n                        tabler=\"IconSparkles\"\n                        hugeicons=\"SparklesIcon\"\n                        phosphor=\"SparkleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Spark</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <ItemSeparator />\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SearchIcon\"\n                        tabler=\"IconSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Explore</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ShoppingBagIcon\"\n                        tabler=\"IconShoppingBag\"\n                        hugeicons=\"ShoppingBasket01Icon\"\n                        phosphor=\"BagIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Marketplace</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LinkIcon\"\n                        tabler=\"IconLink\"\n                        hugeicons=\"LinkIcon\"\n                        phosphor=\"LinkIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>MCP registry</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"ml-auto rounded-full\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>SC</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                <ItemMedia>\n                  <Avatar>\n                    <AvatarImage\n                      src=\"https://github.com/shadcn.png\"\n                      alt=\"shadcn\"\n                    />\n                    <AvatarFallback>SC</AvatarFallback>\n                  </Avatar>\n                </ItemMedia>\n                <ItemContent className=\"gap-0\">\n                  <ItemTitle className=\"text-foreground text-sm\">\n                    shadcn\n                  </ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    shadcn@example.com\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                  phosphor=\"HardDrivesIcon\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                  phosphor=\"HeartIcon\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                  phosphor=\"RobotIcon\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                  phosphor=\"MonitorIcon\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n              />\n              Sign out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <option value=\"m@shadcn.com\">m@shadcn.com</option>\n                  <option value=\"m@gmail.com\">m@gmail.com</option>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                  />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/vercel.json b/apps/v4/public/r/styles/radix-mira/vercel.json
index 70732833ea..8cbb466d06 100644
--- a/apps/v4/public/r/styles/radix-mira/vercel.json
+++ b/apps/v4/public/r/styles/radix-mira/vercel.json
@@ -23,7 +23,7 @@
   "files": [
     {
       "path": "registry/radix-mira/blocks/vercel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/radix/ui/alert\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Calendar } from \"@/registry/bases/radix/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/radix/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                asChild\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n              >\n                <a href=\"#\">\n                  <ItemMedia variant=\"icon\" className=\"text-primary\">\n                    <CircularGauge percentage={item.percentage} />\n                  </ItemMedia>\n                  <ItemContent className=\"inline-block truncate\">\n                    <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                  </ItemContent>\n                  <ItemActions>\n                    <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                      {item.value}\n                    </span>\n                  </ItemActions>\n                </a>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example title=\"Anomaly Alert\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-start\">\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"Calendar01Icon\"\n                phosphor=\"CalendarIcon\"\n                data-icon=\"inline-start\"\n                className=\"text-muted-foreground\"\n              />\n              {dateRange?.from ? (\n                dateRange.to ? (\n                  <>\n                    {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                    {format(dateRange.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(dateRange.from, \"LLL dd, y\")\n                )\n              ) : (\n                \"Select Date Range\"\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              {selectedEnvironment}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              <div className=\"flex items-center -space-x-0.5\">\n                {statuses.map((status) => (\n                  <div\n                    key={status.name}\n                    style={\n                      {\n                        \"--color\": status.color,\n                      } as React.CSSProperties\n                    }\n                    className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                    data-active={selectedStatuses.has(status.name)}\n                  />\n                ))}\n              </div>\n              Status {selectedStatuses.size}/{statuses.length}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                      />\n                      <span className=\"sr-only\">More options</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Activate Agent</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n                phosphor=\"CurrencyCircleDollarIcon\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/radix/ui/alert\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Calendar } from \"@/registry/bases/radix/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/radix/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                asChild\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n              >\n                <a href=\"#\">\n                  <ItemMedia variant=\"icon\" className=\"text-primary\">\n                    <CircularGauge percentage={item.percentage} />\n                  </ItemMedia>\n                  <ItemContent className=\"inline-block truncate\">\n                    <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                  </ItemContent>\n                  <ItemActions>\n                    <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                      {item.value}\n                    </span>\n                  </ItemActions>\n                </a>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example title=\"Anomaly Alert\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-start\">\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"Calendar01Icon\"\n                phosphor=\"CalendarIcon\"\n                data-icon=\"inline-start\"\n                className=\"text-muted-foreground\"\n              />\n              {dateRange?.from ? (\n                dateRange.to ? (\n                  <>\n                    {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                    {format(dateRange.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(dateRange.from, \"LLL dd, y\")\n                )\n              ) : (\n                \"Select Date Range\"\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              {selectedEnvironment}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              <div className=\"flex items-center -space-x-0.5\">\n                {statuses.map((status) => (\n                  <div\n                    key={status.name}\n                    style={\n                      {\n                        \"--color\": status.color,\n                      } as React.CSSProperties\n                    }\n                    className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                    data-active={selectedStatuses.has(status.name)}\n                  />\n                ))}\n              </div>\n              Status {selectedStatuses.size}/{statuses.length}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                      />\n                      <span className=\"sr-only\">More options</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Activate Agent</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n                phosphor=\"CurrencyCircleDollarIcon\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/calendar.json b/apps/v4/public/r/styles/radix-nova/calendar.json
index 0ab7554034..532d29c348 100644
--- a/apps/v4/public/r/styles/radix-nova/calendar.json
+++ b/apps/v4/public/r/styles/radix-nova/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted-200 after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted-200 after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/github.json b/apps/v4/public/r/styles/radix-nova/github.json
index 9bc08993e1..8fcc80cd0f 100644
--- a/apps/v4/public/r/styles/radix-nova/github.json
+++ b/apps/v4/public/r/styles/radix-nova/github.json
@@ -30,7 +30,7 @@
   "files": [
     {
       "path": "registry/radix-nova/blocks/github.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/bases/radix/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/bases/radix/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport { NativeSelect } from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon-sm\">\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <DropdownMenuTrigger asChild>\n                          <Button variant=\"ghost\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"MoreHorizontalIcon\"\n                              tabler=\"IconDots\"\n                              hugeicons=\"MoreHorizontalCircle01Icon\"\n                              phosphor=\"DotsThreeOutlineIcon\"\n                            />\n                          </Button>\n                        </DropdownMenuTrigger>\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                      className=\"w-56\"\n                    >\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                        />\n                        New with options...\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ContainerIcon\"\n                          tabler=\"IconBox\"\n                          hugeicons=\"CubeIcon\"\n                          phosphor=\"CubeIcon\"\n                        />\n                        Configure dev container\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ZapIcon\"\n                          tabler=\"IconBolt\"\n                          hugeicons=\"ZapIcon\"\n                          phosphor=\"LightningIcon\"\n                        />\n                        Set up prebuilds\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ServerIcon\"\n                          tabler=\"IconServer\"\n                          hugeicons=\"ServerStackIcon\"\n                          phosphor=\"HardDrivesIcon\"\n                        />\n                        Manage codespaces\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ShareIcon\"\n                          tabler=\"IconShare2\"\n                          hugeicons=\"Share03Icon\"\n                          phosphor=\"ShareIcon\"\n                        />\n                        Share deep link\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                        />\n                        What are codespaces?\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">\n              Add File\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n              Create new file\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UploadIcon\"\n                hugeicons=\"Upload01Icon\"\n                tabler=\"IconUpload\"\n                phosphor=\"UploadIcon\"\n              />\n              Upload files\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <PopoverTrigger asChild>\n                <Button variant=\"outline\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"CloudCogIcon\"\n                    hugeicons=\"AiCloud01Icon\"\n                    tabler=\"IconCloudCog\"\n                    phosphor=\"CloudArrowUpIcon\"\n                  />\n                </Button>\n              </PopoverTrigger>\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent\n            className=\"w-80\"\n            onCloseAutoFocus={(e) => e.preventDefault()}\n          >\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"GitBranchIcon\"\n                              hugeicons=\"GitBranchIcon\"\n                              tabler=\"IconGitBranch\"\n                              phosphor=\"GitBranchIcon\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent\n                      side=\"bottom\"\n                      align=\"start\"\n                      className=\"p-1\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                    >\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"BotIcon\"\n                              hugeicons=\"RoboticIcon\"\n                              tabler=\"IconRobot\"\n                              phosphor=\"RobotIcon\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"top\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <InputGroupButton\n                        variant=\"ghost\"\n                        size=\"icon-sm\"\n                        className=\"ml-auto\"\n                      >\n                        <IconPlaceholder\n                          lucide=\"SendIcon\"\n                          hugeicons=\"SentIcon\"\n                          tabler=\"IconSend\"\n                          phosphor=\"PaperPlaneTiltIcon\"\n                        />\n                      </InputGroupButton>\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"HomeIcon\"\n                        tabler=\"IconHome\"\n                        hugeicons=\"HomeIcon\"\n                        phosphor=\"HouseIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Home</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"CircleIcon\"\n                        tabler=\"IconCircle\"\n                        hugeicons=\"CircleIcon\"\n                        phosphor=\"CircleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Issues</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"GitBranchIcon\"\n                        tabler=\"IconGitBranch\"\n                        hugeicons=\"GitBranchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Pull requests</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LayoutGridIcon\"\n                        tabler=\"IconLayoutGrid\"\n                        hugeicons=\"GridIcon\"\n                        phosphor=\"GridFourIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Projects</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Discussions</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ServerIcon\"\n                        tabler=\"IconServer\"\n                        hugeicons=\"ServerStackIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Codespaces</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"BotIcon\"\n                        tabler=\"IconRobot\"\n                        hugeicons=\"RoboticIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Copilot</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SparklesIcon\"\n                        tabler=\"IconSparkles\"\n                        hugeicons=\"SparklesIcon\"\n                        phosphor=\"SparkleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Spark</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <ItemSeparator />\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SearchIcon\"\n                        tabler=\"IconSearch\"\n                        hugeicons=\"SearchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Explore</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ShoppingBagIcon\"\n                        tabler=\"IconShoppingBag\"\n                        hugeicons=\"ShoppingBasket01Icon\"\n                        phosphor=\"BagIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Marketplace</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LinkIcon\"\n                        tabler=\"IconLink\"\n                        hugeicons=\"LinkIcon\"\n                        phosphor=\"LinkIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>MCP registry</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"ml-auto rounded-full\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>SC</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                <ItemMedia>\n                  <Avatar>\n                    <AvatarImage\n                      src=\"https://github.com/shadcn.png\"\n                      alt=\"shadcn\"\n                    />\n                    <AvatarFallback>SC</AvatarFallback>\n                  </Avatar>\n                </ItemMedia>\n                <ItemContent className=\"gap-0\">\n                  <ItemTitle className=\"text-foreground text-sm\">\n                    shadcn\n                  </ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    shadcn@example.com\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Sign out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <option value=\"m@shadcn.com\">m@shadcn.com</option>\n                  <option value=\"m@gmail.com\">m@gmail.com</option>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/bases/radix/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/bases/radix/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport { NativeSelect } from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon-sm\">\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <DropdownMenuTrigger asChild>\n                          <Button variant=\"ghost\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"MoreHorizontalIcon\"\n                              tabler=\"IconDots\"\n                              hugeicons=\"MoreHorizontalCircle01Icon\"\n                              phosphor=\"DotsThreeOutlineIcon\"\n                            />\n                          </Button>\n                        </DropdownMenuTrigger>\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                      className=\"w-56\"\n                    >\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                        />\n                        New with options...\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ContainerIcon\"\n                          tabler=\"IconBox\"\n                          hugeicons=\"CubeIcon\"\n                          phosphor=\"CubeIcon\"\n                        />\n                        Configure dev container\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ZapIcon\"\n                          tabler=\"IconBolt\"\n                          hugeicons=\"ZapIcon\"\n                          phosphor=\"LightningIcon\"\n                        />\n                        Set up prebuilds\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ServerIcon\"\n                          tabler=\"IconServer\"\n                          hugeicons=\"ServerStackIcon\"\n                          phosphor=\"HardDrivesIcon\"\n                        />\n                        Manage codespaces\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ShareIcon\"\n                          tabler=\"IconShare2\"\n                          hugeicons=\"Share03Icon\"\n                          phosphor=\"ShareIcon\"\n                        />\n                        Share deep link\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                        />\n                        What are codespaces?\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">\n              Add File\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n              Create new file\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UploadIcon\"\n                hugeicons=\"Upload01Icon\"\n                tabler=\"IconUpload\"\n                phosphor=\"UploadIcon\"\n              />\n              Upload files\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <PopoverTrigger asChild>\n                <Button variant=\"outline\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"CloudCogIcon\"\n                    hugeicons=\"AiCloud01Icon\"\n                    tabler=\"IconCloudCog\"\n                    phosphor=\"CloudArrowUpIcon\"\n                  />\n                </Button>\n              </PopoverTrigger>\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent\n            className=\"w-80\"\n            onCloseAutoFocus={(e) => e.preventDefault()}\n          >\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"GitBranchIcon\"\n                              hugeicons=\"GitBranchIcon\"\n                              tabler=\"IconGitBranch\"\n                              phosphor=\"GitBranchIcon\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent\n                      side=\"bottom\"\n                      align=\"start\"\n                      className=\"p-1\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                    >\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"BotIcon\"\n                              hugeicons=\"RoboticIcon\"\n                              tabler=\"IconRobot\"\n                              phosphor=\"RobotIcon\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"top\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <InputGroupButton\n                        variant=\"ghost\"\n                        size=\"icon-sm\"\n                        className=\"ml-auto\"\n                      >\n                        <IconPlaceholder\n                          lucide=\"SendIcon\"\n                          hugeicons=\"SentIcon\"\n                          tabler=\"IconSend\"\n                          phosphor=\"PaperPlaneTiltIcon\"\n                        />\n                      </InputGroupButton>\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"HomeIcon\"\n                        tabler=\"IconHome\"\n                        hugeicons=\"HomeIcon\"\n                        phosphor=\"HouseIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Home</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"CircleIcon\"\n                        tabler=\"IconCircle\"\n                        hugeicons=\"CircleIcon\"\n                        phosphor=\"CircleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Issues</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"GitBranchIcon\"\n                        tabler=\"IconGitBranch\"\n                        hugeicons=\"GitBranchIcon\"\n                        phosphor=\"GitBranchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Pull requests</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LayoutGridIcon\"\n                        tabler=\"IconLayoutGrid\"\n                        hugeicons=\"GridIcon\"\n                        phosphor=\"GridFourIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Projects</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Discussions</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ServerIcon\"\n                        tabler=\"IconServer\"\n                        hugeicons=\"ServerStackIcon\"\n                        phosphor=\"HardDrivesIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Codespaces</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"BotIcon\"\n                        tabler=\"IconRobot\"\n                        hugeicons=\"RoboticIcon\"\n                        phosphor=\"RobotIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Copilot</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SparklesIcon\"\n                        tabler=\"IconSparkles\"\n                        hugeicons=\"SparklesIcon\"\n                        phosphor=\"SparkleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Spark</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <ItemSeparator />\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SearchIcon\"\n                        tabler=\"IconSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Explore</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ShoppingBagIcon\"\n                        tabler=\"IconShoppingBag\"\n                        hugeicons=\"ShoppingBasket01Icon\"\n                        phosphor=\"BagIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Marketplace</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LinkIcon\"\n                        tabler=\"IconLink\"\n                        hugeicons=\"LinkIcon\"\n                        phosphor=\"LinkIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>MCP registry</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"ml-auto rounded-full\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>SC</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                <ItemMedia>\n                  <Avatar>\n                    <AvatarImage\n                      src=\"https://github.com/shadcn.png\"\n                      alt=\"shadcn\"\n                    />\n                    <AvatarFallback>SC</AvatarFallback>\n                  </Avatar>\n                </ItemMedia>\n                <ItemContent className=\"gap-0\">\n                  <ItemTitle className=\"text-foreground text-sm\">\n                    shadcn\n                  </ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    shadcn@example.com\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                  phosphor=\"HardDrivesIcon\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                  phosphor=\"HeartIcon\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                  phosphor=\"RobotIcon\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                  phosphor=\"MonitorIcon\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n              />\n              Sign out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <option value=\"m@shadcn.com\">m@shadcn.com</option>\n                  <option value=\"m@gmail.com\">m@gmail.com</option>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                  />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/vercel.json b/apps/v4/public/r/styles/radix-nova/vercel.json
index a61ec8c77e..50e0168709 100644
--- a/apps/v4/public/r/styles/radix-nova/vercel.json
+++ b/apps/v4/public/r/styles/radix-nova/vercel.json
@@ -23,7 +23,7 @@
   "files": [
     {
       "path": "registry/radix-nova/blocks/vercel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/radix/ui/alert\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Calendar } from \"@/registry/bases/radix/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/radix/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                asChild\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n              >\n                <a href=\"#\">\n                  <ItemMedia variant=\"icon\" className=\"text-primary\">\n                    <CircularGauge percentage={item.percentage} />\n                  </ItemMedia>\n                  <ItemContent className=\"inline-block truncate\">\n                    <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                  </ItemContent>\n                  <ItemActions>\n                    <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                      {item.value}\n                    </span>\n                  </ItemActions>\n                </a>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example title=\"Anomaly Alert\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-start\">\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"Calendar01Icon\"\n                phosphor=\"CalendarIcon\"\n                data-icon=\"inline-start\"\n                className=\"text-muted-foreground\"\n              />\n              {dateRange?.from ? (\n                dateRange.to ? (\n                  <>\n                    {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                    {format(dateRange.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(dateRange.from, \"LLL dd, y\")\n                )\n              ) : (\n                \"Select Date Range\"\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              {selectedEnvironment}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              <div className=\"flex items-center -space-x-0.5\">\n                {statuses.map((status) => (\n                  <div\n                    key={status.name}\n                    style={\n                      {\n                        \"--color\": status.color,\n                      } as React.CSSProperties\n                    }\n                    className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                    data-active={selectedStatuses.has(status.name)}\n                  />\n                ))}\n              </div>\n              Status {selectedStatuses.size}/{statuses.length}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                      />\n                      <span className=\"sr-only\">More options</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Activate Agent</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n                phosphor=\"CurrencyCircleDollarIcon\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/radix/ui/alert\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Calendar } from \"@/registry/bases/radix/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/radix/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                asChild\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n              >\n                <a href=\"#\">\n                  <ItemMedia variant=\"icon\" className=\"text-primary\">\n                    <CircularGauge percentage={item.percentage} />\n                  </ItemMedia>\n                  <ItemContent className=\"inline-block truncate\">\n                    <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                  </ItemContent>\n                  <ItemActions>\n                    <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                      {item.value}\n                    </span>\n                  </ItemActions>\n                </a>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example title=\"Anomaly Alert\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-start\">\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"Calendar01Icon\"\n                phosphor=\"CalendarIcon\"\n                data-icon=\"inline-start\"\n                className=\"text-muted-foreground\"\n              />\n              {dateRange?.from ? (\n                dateRange.to ? (\n                  <>\n                    {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                    {format(dateRange.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(dateRange.from, \"LLL dd, y\")\n                )\n              ) : (\n                \"Select Date Range\"\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              {selectedEnvironment}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              <div className=\"flex items-center -space-x-0.5\">\n                {statuses.map((status) => (\n                  <div\n                    key={status.name}\n                    style={\n                      {\n                        \"--color\": status.color,\n                      } as React.CSSProperties\n                    }\n                    className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                    data-active={selectedStatuses.has(status.name)}\n                  />\n                ))}\n              </div>\n              Status {selectedStatuses.size}/{statuses.length}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                      />\n                      <span className=\"sr-only\">More options</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Activate Agent</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n                phosphor=\"CurrencyCircleDollarIcon\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/calendar.json b/apps/v4/public/r/styles/radix-vega/calendar.json
index fcfe05fe78..7e2d5c6321 100644
--- a/apps/v4/public/r/styles/radix-vega/calendar.json
+++ b/apps/v4/public/r/styles/radix-vega/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted-200 after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted-200 after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/github.json b/apps/v4/public/r/styles/radix-vega/github.json
index de00d624a9..c94c2ef42e 100644
--- a/apps/v4/public/r/styles/radix-vega/github.json
+++ b/apps/v4/public/r/styles/radix-vega/github.json
@@ -30,7 +30,7 @@
   "files": [
     {
       "path": "registry/radix-vega/blocks/github.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/bases/radix/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/bases/radix/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport { NativeSelect } from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon-sm\">\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <DropdownMenuTrigger asChild>\n                          <Button variant=\"ghost\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"MoreHorizontalIcon\"\n                              tabler=\"IconDots\"\n                              hugeicons=\"MoreHorizontalCircle01Icon\"\n                              phosphor=\"DotsThreeOutlineIcon\"\n                            />\n                          </Button>\n                        </DropdownMenuTrigger>\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                      className=\"w-56\"\n                    >\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                        />\n                        New with options...\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ContainerIcon\"\n                          tabler=\"IconBox\"\n                          hugeicons=\"CubeIcon\"\n                          phosphor=\"CubeIcon\"\n                        />\n                        Configure dev container\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ZapIcon\"\n                          tabler=\"IconBolt\"\n                          hugeicons=\"ZapIcon\"\n                          phosphor=\"LightningIcon\"\n                        />\n                        Set up prebuilds\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ServerIcon\"\n                          tabler=\"IconServer\"\n                          hugeicons=\"ServerStackIcon\"\n                          phosphor=\"HardDrivesIcon\"\n                        />\n                        Manage codespaces\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ShareIcon\"\n                          tabler=\"IconShare2\"\n                          hugeicons=\"Share03Icon\"\n                          phosphor=\"ShareIcon\"\n                        />\n                        Share deep link\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                        />\n                        What are codespaces?\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">\n              Add File\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n              Create new file\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UploadIcon\"\n                hugeicons=\"Upload01Icon\"\n                tabler=\"IconUpload\"\n                phosphor=\"UploadIcon\"\n              />\n              Upload files\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <PopoverTrigger asChild>\n                <Button variant=\"outline\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"CloudCogIcon\"\n                    hugeicons=\"AiCloud01Icon\"\n                    tabler=\"IconCloudCog\"\n                    phosphor=\"CloudArrowUpIcon\"\n                  />\n                </Button>\n              </PopoverTrigger>\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent\n            className=\"w-80\"\n            onCloseAutoFocus={(e) => e.preventDefault()}\n          >\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"GitBranchIcon\"\n                              hugeicons=\"GitBranchIcon\"\n                              tabler=\"IconGitBranch\"\n                              phosphor=\"GitBranchIcon\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent\n                      side=\"bottom\"\n                      align=\"start\"\n                      className=\"p-1\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                    >\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"BotIcon\"\n                              hugeicons=\"RoboticIcon\"\n                              tabler=\"IconRobot\"\n                              phosphor=\"RobotIcon\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"top\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <InputGroupButton\n                        variant=\"ghost\"\n                        size=\"icon-sm\"\n                        className=\"ml-auto\"\n                      >\n                        <IconPlaceholder\n                          lucide=\"SendIcon\"\n                          hugeicons=\"SentIcon\"\n                          tabler=\"IconSend\"\n                          phosphor=\"PaperPlaneTiltIcon\"\n                        />\n                      </InputGroupButton>\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"HomeIcon\"\n                        tabler=\"IconHome\"\n                        hugeicons=\"HomeIcon\"\n                        phosphor=\"HouseIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Home</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"CircleIcon\"\n                        tabler=\"IconCircle\"\n                        hugeicons=\"CircleIcon\"\n                        phosphor=\"CircleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Issues</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"GitBranchIcon\"\n                        tabler=\"IconGitBranch\"\n                        hugeicons=\"GitBranchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Pull requests</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LayoutGridIcon\"\n                        tabler=\"IconLayoutGrid\"\n                        hugeicons=\"GridIcon\"\n                        phosphor=\"GridFourIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Projects</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Discussions</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ServerIcon\"\n                        tabler=\"IconServer\"\n                        hugeicons=\"ServerStackIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Codespaces</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"BotIcon\"\n                        tabler=\"IconRobot\"\n                        hugeicons=\"RoboticIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Copilot</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SparklesIcon\"\n                        tabler=\"IconSparkles\"\n                        hugeicons=\"SparklesIcon\"\n                        phosphor=\"SparkleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Spark</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <ItemSeparator />\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SearchIcon\"\n                        tabler=\"IconSearch\"\n                        hugeicons=\"SearchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Explore</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ShoppingBagIcon\"\n                        tabler=\"IconShoppingBag\"\n                        hugeicons=\"ShoppingBasket01Icon\"\n                        phosphor=\"BagIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Marketplace</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LinkIcon\"\n                        tabler=\"IconLink\"\n                        hugeicons=\"LinkIcon\"\n                        phosphor=\"LinkIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>MCP registry</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"ml-auto rounded-full\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>SC</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                <ItemMedia>\n                  <Avatar>\n                    <AvatarImage\n                      src=\"https://github.com/shadcn.png\"\n                      alt=\"shadcn\"\n                    />\n                    <AvatarFallback>SC</AvatarFallback>\n                  </Avatar>\n                </ItemMedia>\n                <ItemContent className=\"gap-0\">\n                  <ItemTitle className=\"text-foreground text-sm\">\n                    shadcn\n                  </ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    shadcn@example.com\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Sign out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <option value=\"m@shadcn.com\">m@shadcn.com</option>\n                  <option value=\"m@gmail.com\">m@gmail.com</option>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/bases/radix/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/bases/radix/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport { NativeSelect } from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon-sm\">\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <DropdownMenuTrigger asChild>\n                          <Button variant=\"ghost\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"MoreHorizontalIcon\"\n                              tabler=\"IconDots\"\n                              hugeicons=\"MoreHorizontalCircle01Icon\"\n                              phosphor=\"DotsThreeOutlineIcon\"\n                            />\n                          </Button>\n                        </DropdownMenuTrigger>\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                      className=\"w-56\"\n                    >\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                        />\n                        New with options...\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ContainerIcon\"\n                          tabler=\"IconBox\"\n                          hugeicons=\"CubeIcon\"\n                          phosphor=\"CubeIcon\"\n                        />\n                        Configure dev container\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ZapIcon\"\n                          tabler=\"IconBolt\"\n                          hugeicons=\"ZapIcon\"\n                          phosphor=\"LightningIcon\"\n                        />\n                        Set up prebuilds\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ServerIcon\"\n                          tabler=\"IconServer\"\n                          hugeicons=\"ServerStackIcon\"\n                          phosphor=\"HardDrivesIcon\"\n                        />\n                        Manage codespaces\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ShareIcon\"\n                          tabler=\"IconShare2\"\n                          hugeicons=\"Share03Icon\"\n                          phosphor=\"ShareIcon\"\n                        />\n                        Share deep link\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                        />\n                        What are codespaces?\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">\n              Add File\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n              Create new file\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UploadIcon\"\n                hugeicons=\"Upload01Icon\"\n                tabler=\"IconUpload\"\n                phosphor=\"UploadIcon\"\n              />\n              Upload files\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <PopoverTrigger asChild>\n                <Button variant=\"outline\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"CloudCogIcon\"\n                    hugeicons=\"AiCloud01Icon\"\n                    tabler=\"IconCloudCog\"\n                    phosphor=\"CloudArrowUpIcon\"\n                  />\n                </Button>\n              </PopoverTrigger>\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent\n            className=\"w-80\"\n            onCloseAutoFocus={(e) => e.preventDefault()}\n          >\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"GitBranchIcon\"\n                              hugeicons=\"GitBranchIcon\"\n                              tabler=\"IconGitBranch\"\n                              phosphor=\"GitBranchIcon\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent\n                      side=\"bottom\"\n                      align=\"start\"\n                      className=\"p-1\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                    >\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"BotIcon\"\n                              hugeicons=\"RoboticIcon\"\n                              tabler=\"IconRobot\"\n                              phosphor=\"RobotIcon\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"top\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <InputGroupButton\n                        variant=\"ghost\"\n                        size=\"icon-sm\"\n                        className=\"ml-auto\"\n                      >\n                        <IconPlaceholder\n                          lucide=\"SendIcon\"\n                          hugeicons=\"SentIcon\"\n                          tabler=\"IconSend\"\n                          phosphor=\"PaperPlaneTiltIcon\"\n                        />\n                      </InputGroupButton>\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"HomeIcon\"\n                        tabler=\"IconHome\"\n                        hugeicons=\"HomeIcon\"\n                        phosphor=\"HouseIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Home</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"CircleIcon\"\n                        tabler=\"IconCircle\"\n                        hugeicons=\"CircleIcon\"\n                        phosphor=\"CircleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Issues</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"GitBranchIcon\"\n                        tabler=\"IconGitBranch\"\n                        hugeicons=\"GitBranchIcon\"\n                        phosphor=\"GitBranchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Pull requests</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LayoutGridIcon\"\n                        tabler=\"IconLayoutGrid\"\n                        hugeicons=\"GridIcon\"\n                        phosphor=\"GridFourIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Projects</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Discussions</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ServerIcon\"\n                        tabler=\"IconServer\"\n                        hugeicons=\"ServerStackIcon\"\n                        phosphor=\"HardDrivesIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Codespaces</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"BotIcon\"\n                        tabler=\"IconRobot\"\n                        hugeicons=\"RoboticIcon\"\n                        phosphor=\"RobotIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Copilot</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SparklesIcon\"\n                        tabler=\"IconSparkles\"\n                        hugeicons=\"SparklesIcon\"\n                        phosphor=\"SparkleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Spark</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <ItemSeparator />\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SearchIcon\"\n                        tabler=\"IconSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Explore</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ShoppingBagIcon\"\n                        tabler=\"IconShoppingBag\"\n                        hugeicons=\"ShoppingBasket01Icon\"\n                        phosphor=\"BagIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Marketplace</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LinkIcon\"\n                        tabler=\"IconLink\"\n                        hugeicons=\"LinkIcon\"\n                        phosphor=\"LinkIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>MCP registry</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"ml-auto rounded-full\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>SC</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                <ItemMedia>\n                  <Avatar>\n                    <AvatarImage\n                      src=\"https://github.com/shadcn.png\"\n                      alt=\"shadcn\"\n                    />\n                    <AvatarFallback>SC</AvatarFallback>\n                  </Avatar>\n                </ItemMedia>\n                <ItemContent className=\"gap-0\">\n                  <ItemTitle className=\"text-foreground text-sm\">\n                    shadcn\n                  </ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    shadcn@example.com\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                  phosphor=\"HardDrivesIcon\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                  phosphor=\"HeartIcon\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                  phosphor=\"RobotIcon\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                  phosphor=\"MonitorIcon\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n              />\n              Sign out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <option value=\"m@shadcn.com\">m@shadcn.com</option>\n                  <option value=\"m@gmail.com\">m@gmail.com</option>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                  />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/vercel.json b/apps/v4/public/r/styles/radix-vega/vercel.json
index e6c561d07d..f30df169a5 100644
--- a/apps/v4/public/r/styles/radix-vega/vercel.json
+++ b/apps/v4/public/r/styles/radix-vega/vercel.json
@@ -23,7 +23,7 @@
   "files": [
     {
       "path": "registry/radix-vega/blocks/vercel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/radix/ui/alert\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Calendar } from \"@/registry/bases/radix/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/radix/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                asChild\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n              >\n                <a href=\"#\">\n                  <ItemMedia variant=\"icon\" className=\"text-primary\">\n                    <CircularGauge percentage={item.percentage} />\n                  </ItemMedia>\n                  <ItemContent className=\"inline-block truncate\">\n                    <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                  </ItemContent>\n                  <ItemActions>\n                    <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                      {item.value}\n                    </span>\n                  </ItemActions>\n                </a>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example title=\"Anomaly Alert\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-start\">\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"Calendar01Icon\"\n                phosphor=\"CalendarIcon\"\n                data-icon=\"inline-start\"\n                className=\"text-muted-foreground\"\n              />\n              {dateRange?.from ? (\n                dateRange.to ? (\n                  <>\n                    {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                    {format(dateRange.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(dateRange.from, \"LLL dd, y\")\n                )\n              ) : (\n                \"Select Date Range\"\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              {selectedEnvironment}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              <div className=\"flex items-center -space-x-0.5\">\n                {statuses.map((status) => (\n                  <div\n                    key={status.name}\n                    style={\n                      {\n                        \"--color\": status.color,\n                      } as React.CSSProperties\n                    }\n                    className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                    data-active={selectedStatuses.has(status.name)}\n                  />\n                ))}\n              </div>\n              Status {selectedStatuses.size}/{statuses.length}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                      />\n                      <span className=\"sr-only\">More options</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Activate Agent</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n                phosphor=\"CurrencyCircleDollarIcon\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/radix/ui/alert\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Calendar } from \"@/registry/bases/radix/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/radix/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                asChild\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n              >\n                <a href=\"#\">\n                  <ItemMedia variant=\"icon\" className=\"text-primary\">\n                    <CircularGauge percentage={item.percentage} />\n                  </ItemMedia>\n                  <ItemContent className=\"inline-block truncate\">\n                    <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                  </ItemContent>\n                  <ItemActions>\n                    <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                      {item.value}\n                    </span>\n                  </ItemActions>\n                </a>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example title=\"Anomaly Alert\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-start\">\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"Calendar01Icon\"\n                phosphor=\"CalendarIcon\"\n                data-icon=\"inline-start\"\n                className=\"text-muted-foreground\"\n              />\n              {dateRange?.from ? (\n                dateRange.to ? (\n                  <>\n                    {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                    {format(dateRange.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(dateRange.from, \"LLL dd, y\")\n                )\n              ) : (\n                \"Select Date Range\"\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              {selectedEnvironment}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              <div className=\"flex items-center -space-x-0.5\">\n                {statuses.map((status) => (\n                  <div\n                    key={status.name}\n                    style={\n                      {\n                        \"--color\": status.color,\n                      } as React.CSSProperties\n                    }\n                    className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                    data-active={selectedStatuses.has(status.name)}\n                  />\n                ))}\n              </div>\n              Status {selectedStatuses.size}/{statuses.length}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                      />\n                      <span className=\"sr-only\">More options</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Activate Agent</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n                phosphor=\"CurrencyCircleDollarIcon\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],