@props({'variant': 'default', 'size': 'default'})
<div data-slot="item" data-variant="{{ variant }}" data-size="{{ size }}" {{ attributes.cn(
    "group/item flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-accent/50",
    {'default': 'bg-transparent', 'outline': 'border-border', 'muted': 'bg-muted/50'}[variant],
    {'default': 'gap-4 p-4', 'sm': 'gap-2.5 px-4 py-3'}[size],
) }}>{{ slot }}</div>