{"name":"item","title":"Item","description":"A flexible flex container for displaying content with media, title, description, and actions. Group items together with `ItemGroup` to build lists.","installCommand":"bunx marko-ui add item -y","usageTags":"<Item>, <ItemContent>, <ItemMedia>, <ItemTitle>, <ItemDescription>, <ItemActions>","importSnippet":"import Item from \"@/components/ui/item/item.marko\";\nimport ItemContent from \"@/components/ui/item/content.marko\";\nimport ItemMedia from \"@/components/ui/item/media.marko\";\nimport ItemTitle from \"@/components/ui/item/title.marko\";\nimport ItemDescription from \"@/components/ui/item/description.marko\";\nimport ItemActions from \"@/components/ui/item/actions.marko\";","usageSnippet":"<Item>\n  <ItemMedia variant=\"icon\">\n    <Icon name=\"InfoIcon\"/>\n  </ItemMedia>\n  <ItemContent>\n    <ItemTitle>Title</ItemTitle>\n    <ItemDescription>Description</ItemDescription>\n  </ItemContent>\n  <ItemActions>\n    <Button>Action</Button>\n  </ItemActions>\n</Item>","tags":["Item","ItemActions","ItemContent","ItemDescription","ItemFooter","ItemGroup","ItemHeader","ItemMedia","ItemSeparator","ItemTitle"],"parts":[],"props":[{"name":"size","type":"'default' | 'sm' | 'xs' | null | undefined","required":false,"default":"default"},{"name":"variant","type":"'default' | 'outline' | 'muted' | null | undefined","required":false,"default":"default"}],"events":[],"keyboard":[],"accessibilityNotes":["Item is a plain flex container with no ARIA role of its own — accessibility semantics come from its content (a heading in `ItemTitle`, an interactive control in `ItemActions`, etc.).","Upstream renders a clickable item as an anchor via a `render` prop (`<Item render={<a href=\"/dashboard\" />}>`); our `Item` has no `render` prop, so the equivalent pattern wraps the `<Item>` in a plain `<a>` element instead (see the \"As link\" and \"RTL\" examples)."],"examples":[{"id":"item-demo","title":"Basic","source":"import Item from \"@marko-ui/shadcn/ui/item/item.marko\";\nimport ItemActions from \"@marko-ui/shadcn/ui/item/actions.marko\";\nimport ItemMedia from \"@marko-ui/shadcn/ui/item/media.marko\";\nimport ItemContent from \"@marko-ui/shadcn/ui/item/content.marko\";\nimport ItemTitle from \"@marko-ui/shadcn/ui/item/title.marko\";\nimport ItemDescription from \"@marko-ui/shadcn/ui/item/description.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\n\n<div class=\"flex w-full max-w-md flex-col gap-6\">\n  <Item variant=\"outline\">\n    <ItemContent>\n      <ItemTitle>Basic Item</ItemTitle>\n      <ItemDescription>A simple item with title and description.</ItemDescription>\n    </ItemContent>\n    <ItemActions>\n      <Button type=\"button\" variant=\"outline\" size=\"sm\">Action</Button>\n    </ItemActions>\n  </Item>\n  <a href=\"#\" style=\"text-decoration: none; display: block;\">\n    <Item variant=\"outline\" size=\"sm\">\n      <ItemMedia>\n        <Icon name=\"BadgeCheckIcon\" class=\"size-5\"/>\n      </ItemMedia>\n      <ItemContent>\n        <ItemTitle>Your profile has been verified.</ItemTitle>\n      </ItemContent>\n      <ItemActions>\n        <Icon name=\"ChevronRight\" class=\"size-4\"/>\n      </ItemActions>\n    </Item>\n  </a>\n</div>","description":"A simple item with just a title and description."},{"id":"item-variant","title":"Variant","source":"import Item from \"@marko-ui/shadcn/ui/item/item.marko\";\nimport ItemMedia from \"@marko-ui/shadcn/ui/item/media.marko\";\nimport ItemContent from \"@marko-ui/shadcn/ui/item/content.marko\";\nimport ItemTitle from \"@marko-ui/shadcn/ui/item/title.marko\";\nimport ItemDescription from \"@marko-ui/shadcn/ui/item/description.marko\";\nimport Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\n\n<div class=\"flex w-full max-w-md flex-col gap-6\">\n  <Item>\n    <ItemMedia variant=\"icon\">\n      <Icon name=\"InboxIcon\"/>\n    </ItemMedia>\n    <ItemContent>\n      <ItemTitle>Default Variant</ItemTitle>\n      <ItemDescription>Transparent background with no border.</ItemDescription>\n    </ItemContent>\n  </Item>\n  <Item variant=\"outline\">\n    <ItemMedia variant=\"icon\">\n      <Icon name=\"InboxIcon\"/>\n    </ItemMedia>\n    <ItemContent>\n      <ItemTitle>Outline Variant</ItemTitle>\n      <ItemDescription>Outlined style with a visible border.</ItemDescription>\n    </ItemContent>\n  </Item>\n  <Item variant=\"muted\">\n    <ItemMedia variant=\"icon\">\n      <Icon name=\"InboxIcon\"/>\n    </ItemMedia>\n    <ItemContent>\n      <ItemTitle>Muted Variant</ItemTitle>\n      <ItemDescription>Muted background for secondary content.</ItemDescription>\n    </ItemContent>\n  </Item>\n</div>","description":"Use the `variant` prop to change the visual style of the item: `default`, `outline`, or `muted`."},{"id":"item-size","title":"Size","source":"import Item from \"@marko-ui/shadcn/ui/item/item.marko\";\nimport ItemMedia from \"@marko-ui/shadcn/ui/item/media.marko\";\nimport ItemContent from \"@marko-ui/shadcn/ui/item/content.marko\";\nimport ItemTitle from \"@marko-ui/shadcn/ui/item/title.marko\";\nimport ItemDescription from \"@marko-ui/shadcn/ui/item/description.marko\";\nimport Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\n\n<div class=\"flex w-full max-w-md flex-col gap-6\">\n  <Item variant=\"outline\">\n    <ItemMedia variant=\"icon\">\n      <Icon name=\"InboxIcon\"/>\n    </ItemMedia>\n    <ItemContent>\n      <ItemTitle>Default Size</ItemTitle>\n      <ItemDescription>The standard size for most use cases.</ItemDescription>\n    </ItemContent>\n  </Item>\n  <Item variant=\"outline\" size=\"sm\">\n    <ItemMedia variant=\"icon\">\n      <Icon name=\"InboxIcon\"/>\n    </ItemMedia>\n    <ItemContent>\n      <ItemTitle>Small Size</ItemTitle>\n      <ItemDescription>A compact size for dense layouts.</ItemDescription>\n    </ItemContent>\n  </Item>\n  <Item variant=\"outline\" size=\"xs\">\n    <ItemMedia variant=\"icon\">\n      <Icon name=\"InboxIcon\"/>\n    </ItemMedia>\n    <ItemContent>\n      <ItemTitle>Extra Small Size</ItemTitle>\n      <ItemDescription>The most compact size available.</ItemDescription>\n    </ItemContent>\n  </Item>\n</div>","description":"Use the `size` prop to change the padding and gap of the item: `default` or `sm`."},{"id":"item-icon","title":"Icon","source":"import Item from \"@marko-ui/shadcn/ui/item/item.marko\";\nimport ItemMedia from \"@marko-ui/shadcn/ui/item/media.marko\";\nimport ItemContent from \"@marko-ui/shadcn/ui/item/content.marko\";\nimport ItemTitle from \"@marko-ui/shadcn/ui/item/title.marko\";\nimport ItemDescription from \"@marko-ui/shadcn/ui/item/description.marko\";\nimport ItemActions from \"@marko-ui/shadcn/ui/item/actions.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<Item variant=\"outline\" style=\"width: 400px;\">\n  <ItemMedia variant=\"icon\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2v20M2 12h20\"/></svg>\n  </ItemMedia>\n  <ItemContent>\n    <ItemTitle>New feature available</ItemTitle>\n    <ItemDescription>Check out the latest update to your dashboard.</ItemDescription>\n  </ItemContent>\n  <ItemActions>\n    <Button type=\"button\" variant=\"outline\" size=\"sm\">View</Button>\n  </ItemActions>\n</Item>","description":"Use `ItemMedia` with `variant=\"icon\"` to display an icon."},{"id":"item-avatar","title":"Avatar","source":"import Item from \"@marko-ui/shadcn/ui/item/item.marko\";\nimport ItemMedia from \"@marko-ui/shadcn/ui/item/media.marko\";\nimport ItemContent from \"@marko-ui/shadcn/ui/item/content.marko\";\nimport ItemTitle from \"@marko-ui/shadcn/ui/item/title.marko\";\nimport ItemDescription from \"@marko-ui/shadcn/ui/item/description.marko\";\nimport ItemActions from \"@marko-ui/shadcn/ui/item/actions.marko\";\nimport Avatar from \"@marko-ui/shadcn/ui/avatar/avatar.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\n\n<div class=\"flex w-full max-w-lg flex-col gap-6\">\n  <Item variant=\"outline\">\n    <ItemMedia>\n      <Avatar src=\"https://github.com/evilrabbit.png\" alt=\"Evil Rabbit\" fallback=\"ER\" class=\"size-10\"/>\n    </ItemMedia>\n    <ItemContent>\n      <ItemTitle>Evil Rabbit</ItemTitle>\n      <ItemDescription>Last seen 5 months ago</ItemDescription>\n    </ItemContent>\n    <ItemActions>\n      <Button type=\"button\" size=\"icon-sm\" variant=\"outline\" class=\"rounded-full\" aria-label=\"Invite\">\n        <Icon name=\"Plus\"/>\n      </Button>\n    </ItemActions>\n  </Item>\n  <Item variant=\"outline\">\n    <ItemMedia>\n      <div class=\"flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale\">\n        <Avatar src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" fallback=\"CN\" class=\"hidden sm:flex\"/>\n        <Avatar src=\"https://github.com/maxleiter.png\" alt=\"@maxleiter\" fallback=\"LR\" class=\"hidden sm:flex\"/>\n        <Avatar src=\"https://github.com/evilrabbit.png\" alt=\"@evilrabbit\" fallback=\"ER\"/>\n      </div>\n    </ItemMedia>\n    <ItemContent>\n      <ItemTitle>No Team Members</ItemTitle>\n      <ItemDescription>Invite your team to collaborate on this project.</ItemDescription>\n    </ItemContent>\n    <ItemActions>\n      <Button type=\"button\" size=\"sm\" variant=\"outline\">Invite</Button>\n    </ItemActions>\n  </Item>\n</div>","description":"Use `ItemMedia` with an `Avatar` to display a user's picture, and stack multiple avatars for a group."},{"id":"item-image","title":"Image","source":"import Item from \"@marko-ui/shadcn/ui/item/item.marko\";\nimport ItemGroup from \"@marko-ui/shadcn/ui/item/group.marko\";\nimport ItemMedia from \"@marko-ui/shadcn/ui/item/media.marko\";\nimport ItemContent from \"@marko-ui/shadcn/ui/item/content.marko\";\nimport ItemTitle from \"@marko-ui/shadcn/ui/item/title.marko\";\nimport ItemDescription from \"@marko-ui/shadcn/ui/item/description.marko\";\n\nstatic const music = [\n  {\n    title: \"Midnight City Lights\",\n    artist: \"Neon Dreams\",\n    album: \"Electric Nights\",\n    duration: \"3:45\",\n  },\n  {\n    title: \"Coffee Shop Conversations\",\n    artist: \"The Morning Brew\",\n    album: \"Urban Stories\",\n    duration: \"4:05\",\n  },\n  {\n    title: \"Digital Rain\",\n    artist: \"Cyber Symphony\",\n    album: \"Binary Beats\",\n    duration: \"3:30\",\n  },\n];\n\n<div class=\"flex w-full max-w-md flex-col gap-6\">\n  <ItemGroup class=\"gap-4\">\n    <for|song| of=music by=(song) => song.title>\n      <a href=\"#\" style=\"text-decoration: none; display: block;\">\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"image\">\n            <img src=`https://avatar.vercel.sh/${song.title}` alt=song.title width=\"32\" height=\"32\" class=\"object-cover grayscale\"/>\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle class=\"line-clamp-1\">\n              ${song.title} - <span class=\"text-muted-foreground\">${song.album}</span>\n            </ItemTitle>\n            <ItemDescription>${song.artist}</ItemDescription>\n          </ItemContent>\n          <ItemContent class=\"flex-none text-center\">\n            <ItemDescription>${song.duration}</ItemDescription>\n          </ItemContent>\n        </Item>\n      </a>\n    </for>\n  </ItemGroup>\n</div>","description":"Use `ItemMedia` with `variant=\"image\"` to display an image."},{"id":"item-group","title":"Group","source":"import Item from \"@marko-ui/shadcn/ui/item/item.marko\";\nimport ItemGroup from \"@marko-ui/shadcn/ui/item/group.marko\";\nimport ItemMedia from \"@marko-ui/shadcn/ui/item/media.marko\";\nimport ItemContent from \"@marko-ui/shadcn/ui/item/content.marko\";\nimport ItemTitle from \"@marko-ui/shadcn/ui/item/title.marko\";\nimport ItemDescription from \"@marko-ui/shadcn/ui/item/description.marko\";\nimport ItemActions from \"@marko-ui/shadcn/ui/item/actions.marko\";\nimport Avatar from \"@marko-ui/shadcn/ui/avatar/avatar.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\n\nstatic const PEOPLE = [\n  { username: \"shadcn\", avatar: \"https://github.com/shadcn.png\", email: \"shadcn@vercel.com\" },\n  { username: \"maxleiter\", avatar: \"https://github.com/maxleiter.png\", email: \"maxleiter@vercel.com\" },\n  { username: \"evilrabbit\", avatar: \"https://github.com/evilrabbit.png\", email: \"evilrabbit@vercel.com\" },\n];\n\n<ItemGroup class=\"max-w-sm\">\n  <for|person| of=PEOPLE by=(person) => person.username>\n    <Item variant=\"outline\">\n      <ItemMedia>\n        <Avatar src=person.avatar alt=person.username fallback=person.username.charAt(0).toUpperCase() class=\"grayscale\"/>\n      </ItemMedia>\n      <ItemContent class=\"gap-1\">\n        <ItemTitle>${person.username}</ItemTitle>\n        <ItemDescription>${person.email}</ItemDescription>\n      </ItemContent>\n      <ItemActions>\n        <Button type=\"button\" variant=\"ghost\" size=\"icon\" class=\"rounded-full\" aria-label=`Invite ${person.username}`>\n          <Icon name=\"Plus\"/>\n        </Button>\n      </ItemActions>\n    </Item>\n  </for>\n</ItemGroup>","description":"Use `ItemGroup` and `ItemSeparator` to group related items together."},{"id":"item-header","title":"Header and footer","source":"import Item from \"@marko-ui/shadcn/ui/item/item.marko\";\nimport ItemGroup from \"@marko-ui/shadcn/ui/item/group.marko\";\nimport ItemHeader from \"@marko-ui/shadcn/ui/item/header.marko\";\nimport ItemContent from \"@marko-ui/shadcn/ui/item/content.marko\";\nimport ItemTitle from \"@marko-ui/shadcn/ui/item/title.marko\";\nimport ItemDescription from \"@marko-ui/shadcn/ui/item/description.marko\";\n\nstatic const models = [\n  {\n    name: \"v0-1.5-sm\",\n    description: \"Everyday tasks and UI generation.\",\n    image: \"https://images.unsplash.com/photo-1650804068570-7fb2e3dbf888?q=80&w=640&auto=format&fit=crop\",\n  },\n  {\n    name: \"v0-1.5-lg\",\n    description: \"Advanced thinking or reasoning.\",\n    image: \"https://images.unsplash.com/photo-1610280777472-54133d004c8c?q=80&w=640&auto=format&fit=crop\",\n  },\n  {\n    name: \"v0-2.0-mini\",\n    description: \"Open Source model for everyone.\",\n    image: \"https://images.unsplash.com/photo-1602146057681-08560aee8cde?q=80&w=640&auto=format&fit=crop\",\n  },\n];\n\n<div class=\"flex w-full max-w-xl flex-col gap-6\">\n  <ItemGroup class=\"grid grid-cols-3 gap-4\">\n    <for|model| of=models by=(model) => model.name>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <img src=model.image alt=model.name width=\"128\" height=\"128\" class=\"aspect-square w-full rounded-sm object-cover\"/>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>${model.name}</ItemTitle>\n          <ItemDescription>${model.description}</ItemDescription>\n        </ItemContent>\n      </Item>\n    </for>\n  </ItemGroup>\n</div>","description":"Use `ItemHeader` and `ItemFooter` to add content above and below the item body."},{"id":"item-link","title":"As link","source":"import Item from \"@marko-ui/shadcn/ui/item/item.marko\";\nimport ItemContent from \"@marko-ui/shadcn/ui/item/content.marko\";\nimport ItemTitle from \"@marko-ui/shadcn/ui/item/title.marko\";\nimport ItemDescription from \"@marko-ui/shadcn/ui/item/description.marko\";\nimport ItemActions from \"@marko-ui/shadcn/ui/item/actions.marko\";\nimport Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\n\n<div class=\"flex w-full max-w-md flex-col gap-4\">\n  <a href=\"#\" style=\"text-decoration: none; display: block;\">\n    <Item>\n      <ItemContent>\n        <ItemTitle>Visit our documentation</ItemTitle>\n        <ItemDescription>Learn how to get started with our components.</ItemDescription>\n      </ItemContent>\n      <ItemActions>\n        <Icon name=\"ChevronRight\" class=\"size-4\"/>\n      </ItemActions>\n    </Item>\n  </a>\n  <a href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"text-decoration: none; display: block;\">\n    <Item variant=\"outline\">\n      <ItemContent>\n        <ItemTitle>External resource</ItemTitle>\n        <ItemDescription>Opens in a new tab with security attributes.</ItemDescription>\n      </ItemContent>\n      <ItemActions>\n        <Icon name=\"ExternalLinkIcon\" class=\"size-4\"/>\n      </ItemActions>\n    </Item>\n  </a>\n</div>","description":"Wrap an `Item` in an anchor tag to make the entire item clickable."},{"id":"item-dropdown","title":"Dropdown","source":"import Avatar from \"@marko-ui/shadcn/ui/avatar/avatar.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\nimport DropdownMenu from \"@marko-ui/shadcn/ui/dropdown-menu/dropdown-menu.marko\";\n\nstatic const PEOPLE = [\n  { username: \"shadcn\", avatar: \"https://github.com/shadcn.png\", email: \"shadcn@vercel.com\" },\n  { username: \"maxleiter\", avatar: \"https://github.com/maxleiter.png\", email: \"maxleiter@vercel.com\" },\n  { username: \"evilrabbit\", avatar: \"https://github.com/evilrabbit.png\", email: \"evilrabbit@vercel.com\" },\n];\n\n<DropdownMenu class=\"w-48\">\n  <@trigger|triggerProps: Record<string, unknown>|>\n    <Button type=\"button\" variant=\"outline\" ...triggerProps>\n      Select\n      <Icon name=\"ChevronDown\"/>\n    </Button>\n  </@trigger>\n  <for|person| of=PEOPLE>\n    <@item value=person.username>\n      <div data-slot=\"item\" data-variant=\"default\" data-size=\"xs\" class=\"mu-item group/item mu-item-variant-default mu-item-size-xs flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors w-full p-2\">\n        <div data-slot=\"item-media\" data-variant=\"default\" class=\"mu-item-media mu-item-media-variant-default flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\">\n          <Avatar src=person.avatar alt=person.username fallback=person.username.charAt(0).toUpperCase() class=\"size-[26px] grayscale\"/>\n        </div>\n        <div data-slot=\"item-content\" class=\"mu-item-content flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none gap-0\">\n          <div data-slot=\"item-title\" class=\"mu-item-title line-clamp-1 flex w-fit items-center\">${person.username}</div>\n          <p data-slot=\"item-description\" class=\"mu-item-description line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary leading-none\">${person.email}</p>\n        </div>\n      </div>\n    </@item>\n  </for>\n</DropdownMenu>","description":"Compose `Item` with `DropdownMenu` to render a rich list of selectable people or options."},{"id":"item-rtl","title":"RTL","source":"import Item from \"@marko-ui/shadcn/ui/item/item.marko\";\nimport ItemContent from \"@marko-ui/shadcn/ui/item/content.marko\";\nimport ItemMedia from \"@marko-ui/shadcn/ui/item/media.marko\";\nimport ItemTitle from \"@marko-ui/shadcn/ui/item/title.marko\";\nimport ItemDescription from \"@marko-ui/shadcn/ui/item/description.marko\";\nimport ItemActions from \"@marko-ui/shadcn/ui/item/actions.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\n\n<div class=\"flex w-full max-w-md flex-col gap-6\" dir=\"rtl\">\n  <Item variant=\"outline\" dir=\"rtl\">\n    <ItemContent>\n      <ItemTitle>عنصر أساسي</ItemTitle>\n      <ItemDescription>عنصر بسيط يحتوي على عنوان ووصف.</ItemDescription>\n    </ItemContent>\n    <ItemActions>\n      <Button type=\"button\" variant=\"outline\" size=\"sm\">إجراء</Button>\n    </ItemActions>\n  </Item>\n  <a href=\"#\" style=\"text-decoration: none; display: block;\">\n    <Item variant=\"outline\" size=\"sm\" dir=\"rtl\">\n      <ItemMedia>\n        <Icon name=\"BadgeCheckIcon\" class=\"size-5\"/>\n      </ItemMedia>\n      <ItemContent>\n        <ItemTitle>تم التحقق من ملفك الشخصي.</ItemTitle>\n      </ItemContent>\n      <ItemActions>\n        <Icon name=\"ChevronRight\" class=\"size-4\"/>\n      </ItemActions>\n    </Item>\n  </a>\n</div>","description":"Item's flex layout uses logical properties, so it restyles correctly under `dir=\"rtl\"` with no extra markup."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","requires":["button","icon"],"nativeAttributes":"div","subcomponents":[{"name":"actions","props":[],"nativeAttributes":"div"},{"name":"content","props":[],"nativeAttributes":"div"},{"name":"description","props":[],"nativeAttributes":"p"},{"name":"footer","props":[],"nativeAttributes":"div"},{"name":"group","props":[],"nativeAttributes":"div"},{"name":"header","props":[],"nativeAttributes":"div"},{"name":"media","props":[{"name":"variant","type":"'image' | 'default' | 'icon' | null | undefined","required":false,"default":"default"}],"nativeAttributes":"div"},{"name":"separator","props":[],"nativeAttributes":"div"},{"name":"title","props":[],"nativeAttributes":"div"}]}