docs(avatar-group): update

docs/content/3.components/avatar-group.md

@@ -9,7 +9,58 @@ links:
 
 ## Usage
 
-## Examples
+Wrap multiple [Avatar](/components/avatar) within an AvatarGroup to stack them.
+
+::component-code
+---
+slots:
+  default: |
+    <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
+    <UAvatar src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" />
+    <UAvatar src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" />
+---
+:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac"}
+:u-avatar{src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml"}
+:u-avatar{src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook"}
+::
+
+### Size
+
+Use the `size` prop to change the size of all the avatars.
+
+::component-code
+---
+props:
+  size: md
+slots:
+  default: |
+    <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
+    <UAvatar src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" />
+    <UAvatar src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" />
+---
+:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac"}
+:u-avatar{src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml"}
+:u-avatar{src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook"}
+::
+
+### Max
+
+Use the `max` prop to limit the number of avatars displayed. The rest will be displayed as a `+X` avatar.
+
+::component-code
+---
+props:
+  max: 2
+slots:
+  default: >
+    <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
+    <UAvatar src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" />
+    <UAvatar src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" />
+---
+:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac"}
+:u-avatar{src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml"}
+:u-avatar{src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook"}
+::
 
 ## API
 

docs/nuxt.config.ts

@@ -119,6 +119,7 @@ export default defineNuxtConfig({
       const globals = components.filter(c => [
         'UAlert',
         'UAvatar',
+        'UAvatarGroup',
         'UBadge',
         'UButton',
         'UIcon',

playground/app/pages/components/avatar.vue

@@ -20,19 +20,19 @@ const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.varia
     </div>
 
     <div class="flex items-center gap-1.5">
-      <UAvatarGroup v-for="size in sizes" :key="size" :text="size" :size="size" :max="2">
+      <UAvatarGroup v-for="size in sizes" :key="size" :size="size" :max="2">
         <UChip inset text="1">
           <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
         </UChip>
-        <UAvatar src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" />
-        <UAvatar src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" />
+        <UAvatar src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" />
+        <UAvatar src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" />
       </UAvatarGroup>
     </div>
     <div class="flex items-center gap-1.5">
-      <UAvatarGroup v-for="size in sizes" :key="size" :text="size" :size="size" :max="4">
+      <UAvatarGroup v-for="size in sizes" :key="size" :size="size" :max="4">
         <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
-        <UAvatar src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" />
-        <UAvatar src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" />
+        <UAvatar src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" />
+        <UAvatar src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" />
       </UAvatarGroup>
     </div>
   </div>

test/components/AvatarGroup.spec.ts

@@ -12,8 +12,8 @@ const AvatarGroupWrapper = defineComponent({
   },
   template: `<UAvatarGroup>
   <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
-  <UAvatar src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" />
-  <UAvatar src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" />
+  <UAvatar src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" />
+  <UAvatar src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" />
 </UAvatarGroup>`
 })
 

test/components/__snapshots__/AvatarGroup.spec.ts.snap

@@ -1,77 +1,77 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`AvatarGroup > renders with as correctly 1`] = `"<span class="inline-flex flex-row-reverse justify-end"><!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">s</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">A</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span></span>"`;
+exports[`AvatarGroup > renders with as correctly 1`] = `"<span class="inline-flex flex-row-reverse justify-end"><!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">n</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">r</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span></span>"`;
 
 exports[`AvatarGroup > renders with class correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-start">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">s</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">A</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">n</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">r</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with default slot correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">s</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">A</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">n</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">r</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
 </div>"
 `;
 
-exports[`AvatarGroup > renders with max correctly 1`] = `"<div class="inline-flex flex-row-reverse justify-end"><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">+1</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">A</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span></div>"`;
+exports[`AvatarGroup > renders with max correctly 1`] = `"<div class="inline-flex flex-row-reverse justify-end"><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">+1</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">r</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span></div>"`;
 
 exports[`AvatarGroup > renders with size 2xl correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-11 text-[22px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">s</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-11 text-[22px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">A</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-11 text-[22px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-11 text-[22px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">n</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-11 text-[22px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">r</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-11 text-[22px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size 2xs correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">s</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">A</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">n</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">r</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size 3xl correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-12 text-2xl relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">s</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-12 text-2xl relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">A</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-12 text-2xl relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-12 text-2xl relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">n</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-12 text-2xl relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">r</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-12 text-2xl relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size 3xs correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-4 text-[8px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">s</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-4 text-[8px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">A</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-4 text-[8px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-4 text-[8px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">n</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-4 text-[8px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">r</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-4 text-[8px] relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size lg correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-9 text-lg relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">s</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-9 text-lg relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">A</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-9 text-lg relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-9 text-lg relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">n</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-9 text-lg relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">r</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-9 text-lg relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size md correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">s</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">A</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">n</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">r</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size sm correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-7 text-sm relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">s</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-7 text-sm relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">A</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-7 text-sm relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-7 text-sm relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">n</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-7 text-sm relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">r</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-7 text-sm relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2 -me-1.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size xl correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-10 text-xl relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">s</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-10 text-xl relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">A</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-10 text-xl relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-10 text-xl relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">n</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-10 text-xl relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">r</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-10 text-xl relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-2.5 -me-2"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with size xs correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-6 text-xs relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">s</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-6 text-xs relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">A</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-6 text-xs relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-6 text-xs relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">n</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-6 text-xs relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">r</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-6 text-xs relative rounded-full ring-white dark:ring-gray-900 first:me-0 ring-1 -me-0.5"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
 </div>"
 `;
 
 exports[`AvatarGroup > renders with ui correctly 1`] = `
 "<div class="inline-flex flex-row-reverse justify-end">
-  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative ring-white dark:ring-gray-900 first:me-0 rounded-lg"><img role="img" src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">s</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative ring-white dark:ring-gray-900 first:me-0 rounded-lg"><img role="img" src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">A</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative ring-white dark:ring-gray-900 first:me-0 rounded-lg"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative ring-white dark:ring-gray-900 first:me-0 rounded-lg"><img role="img" src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">n</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative ring-white dark:ring-gray-900 first:me-0 rounded-lg"><img role="img" src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">r</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-gray-100 dark:bg-gray-800 size-8 text-base relative ring-white dark:ring-gray-900 first:me-0 rounded-lg"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">b</span></span>
 </div>"
 `;