{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "item-example",
  "title": "Item",
  "registryDependencies": [
    "button",
    "item",
    "example"
  ],
  "files": [
    {
      "path": "registry/base-nova/examples/item-example.tsx",
      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/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/base-nova/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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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            remixicon=\"RiArchiveLine\"\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              remixicon=\"RiArchiveLine\"\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              remixicon=\"RiArchiveLine\"\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              remixicon=\"RiArchiveLine\"\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              remixicon=\"RiArchiveLine\"\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              remixicon=\"RiArchiveLine\"\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              remixicon=\"RiArchiveLine\"\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              remixicon=\"RiArchiveLine\"\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              remixicon=\"RiArchiveLine\"\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              remixicon=\"RiArchiveLine\"\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              remixicon=\"RiArchiveLine\"\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              remixicon=\"RiArchiveLine\"\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              remixicon=\"RiArchiveLine\"\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              remixicon=\"RiArchiveLine\"\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-sm text-muted-foreground\">\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-sm text-muted-foreground\">\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-sm text-muted-foreground\">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-sm text-muted-foreground\">\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-sm text-muted-foreground\">\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-sm text-muted-foreground\">\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"
    }
  ],
  "type": "registry:example"
}