@igne-agency/react-web-ui 0.4.0 → 0.6.0

package/dist/components/avatar-group/avatar-group.js

@@ -8,10 +8,11 @@ import { useRender } from "@base-ui/react/use-render";
 import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 // src/components/avatar-group/avatar-group.tsx
+var DEFAULT_SIZE = 1.5;
 var LIST_AVATAR_SIZE = 1.5;
 /** The stack: a named group of avatars, overlapping, with no control of its own. */
 var Root = (t0) => {
-	const $ = c(28);
+	const $ = c(27);
 	let className;
 	let inlineStyle;
 	let label;
@@ -38,7 +39,7 @@ var Root = (t0) => {
 		render = $[6];
 		t1 = $[7];
 	}
-	const size = t1 === void 0 ? 1.5 : t1;
+	const size = t1 === void 0 ? DEFAULT_SIZE : t1;
 	let t2;
 	if ($[8] !== className) {
 		t2 = clsx(avatar_group_module_default.group, className);
@@ -86,130 +87,121 @@ var Root = (t0) => {
 	} else t6 = $[21];
 	const element = useRender(t6);
 	let t7;
-	if ($[22] !== label || $[23] !== size) {
-		t7 = {
-			label,
-			size
-		};
+	if ($[22] !== label) {
+		t7 = { label };
 		$[22] = label;
-		$[23] = size;
-		$[24] = t7;
-	} else t7 = $[24];
+		$[23] = t7;
+	} else t7 = $[23];
 	let t8;
-	if ($[25] !== element || $[26] !== t7) {
+	if ($[24] !== element || $[25] !== t7) {
 		t8 = /* @__PURE__ */ jsx(AvatarGroupContext, {
 			value: t7,
 			children: element
 		});
-		$[25] = element;
-		$[26] = t7;
-		$[27] = t8;
-	} else t8 = $[27];
+		$[24] = element;
+		$[25] = t7;
+		$[26] = t8;
+	} else t8 = $[26];
 	return t8;
 };
-/** One member of the stack, overlapping the one before it: an image named for its person. */
+/**
+* One member of the stack, overlapping the one before it: an image named for
+* its person, holding their `Avatar`.
+*
+* @example
+* <AvatarGroup.Avatar name="Ada Lovelace">
+* 	<Avatar name="Ada Lovelace" size={1.5} />
+* </AvatarGroup.Avatar>
+*/
 var Avatar = (t0) => {
-	const $ = c(22);
+	const $ = c(16);
 	let className;
 	let name;
 	let props;
 	let ref;
 	let render;
-	let src;
 	if ($[0] !== t0) {
-		({name, src, render, className, ref, ...props} = t0);
+		({name, render, className, ref, ...props} = t0);
 		$[0] = t0;
 		$[1] = className;
 		$[2] = name;
 		$[3] = props;
 		$[4] = ref;
 		$[5] = render;
-		$[6] = src;
 	} else {
 		className = $[1];
 		name = $[2];
 		props = $[3];
 		ref = $[4];
 		render = $[5];
-		src = $[6];
 	}
-	const { size } = useAvatarGroup();
 	let t1;
-	if ($[7] !== className) {
+	if ($[6] !== className) {
 		t1 = clsx(avatar_group_module_default.member, className);
-		$[7] = className;
-		$[8] = t1;
-	} else t1 = $[8];
+		$[6] = className;
+		$[7] = t1;
+	} else t1 = $[7];
 	let t2;
-	if ($[9] !== name || $[10] !== size || $[11] !== src) {
-		t2 = /* @__PURE__ */ jsx(Avatar$1, {
-			name,
-			src,
-			size
-		});
-		$[9] = name;
-		$[10] = size;
-		$[11] = src;
-		$[12] = t2;
-	} else t2 = $[12];
-	let t3;
-	if ($[13] !== name || $[14] !== props || $[15] !== t1 || $[16] !== t2) {
-		t3 = {
+	if ($[8] !== name || $[9] !== props || $[10] !== t1) {
+		t2 = {
 			role: "img",
 			...props,
 			"aria-label": name,
-			className: t1,
-			children: t2
+			className: t1
 		};
-		$[13] = name;
-		$[14] = props;
-		$[15] = t1;
-		$[16] = t2;
-		$[17] = t3;
-	} else t3 = $[17];
-	let t4;
-	if ($[18] !== ref || $[19] !== render || $[20] !== t3) {
-		t4 = {
+		$[8] = name;
+		$[9] = props;
+		$[10] = t1;
+		$[11] = t2;
+	} else t2 = $[11];
+	let t3;
+	if ($[12] !== ref || $[13] !== render || $[14] !== t2) {
+		t3 = {
 			defaultTagName: "span",
 			render,
 			ref,
-			props: t3
+			props: t2
 		};
-		$[18] = ref;
-		$[19] = render;
-		$[20] = t3;
-		$[21] = t4;
-	} else t4 = $[21];
-	return useRender(t4);
+		$[12] = ref;
+		$[13] = render;
+		$[14] = t2;
+		$[15] = t3;
+	} else t3 = $[15];
+	return useRender(t3);
 };
 /**
-* The count of everyone the stack leaves out: a button that opens a popover
-* holding its children, on hover, on a tap or from the keyboard.
+* The last member of the stack: the button that stands for everyone it leaves
+* out, holding a `Count`. Render it as the trigger of a `Popover`.
+*
+* @example
+* <AvatarGroup.Overflow
+* 	label="+3, show all invitees"
+* 	render={<Popover.Trigger openOnHover />}>
+* 	<AvatarGroup.Count count={3} />
+* </AvatarGroup.Overflow>
 */
 var Overflow = (t0) => {
-	const $ = c(24);
-	let children;
+	const $ = c(16);
 	let className;
-	let count;
 	let label;
 	let props;
+	let ref;
+	let render;
 	if ($[0] !== t0) {
-		({count, label, children, className, ...props} = t0);
+		({label, render, className, ref, ...props} = t0);
 		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = count;
-		$[4] = label;
-		$[5] = props;
+		$[1] = className;
+		$[2] = label;
+		$[3] = props;
+		$[4] = ref;
+		$[5] = render;
 	} else {
-		children = $[1];
-		className = $[2];
-		count = $[3];
-		label = $[4];
-		props = $[5];
+		className = $[1];
+		label = $[2];
+		props = $[3];
+		ref = $[4];
+		render = $[5];
 	}
-	const { label: groupLabel } = useAvatarGroup();
-	const locale = useLocale();
 	let t1;
 	if ($[6] !== className) {
 		t1 = clsx(avatar_group_module_default.member, avatar_group_module_default.overflow, className);
@@ -217,6 +209,70 @@ var Overflow = (t0) => {
 		$[7] = t1;
 	} else t1 = $[7];
 	let t2;
+	if ($[8] !== label || $[9] !== props || $[10] !== t1) {
+		t2 = {
+			type: "button",
+			...props,
+			"aria-label": label,
+			className: t1
+		};
+		$[8] = label;
+		$[9] = props;
+		$[10] = t1;
+		$[11] = t2;
+	} else t2 = $[11];
+	let t3;
+	if ($[12] !== ref || $[13] !== render || $[14] !== t2) {
+		t3 = {
+			defaultTagName: "button",
+			render,
+			ref,
+			props: t2
+		};
+		$[12] = ref;
+		$[13] = render;
+		$[14] = t2;
+		$[15] = t3;
+	} else t3 = $[15];
+	return useRender(t3);
+};
+/**
+* How many people the stack leaves out, as a signed number in the reader's
+* own format.
+*
+* @example
+* <AvatarGroup.Count count={3} />
+*/
+var Count = (t0) => {
+	const $ = c(19);
+	let className;
+	let count;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({count, render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = count;
+		$[3] = props;
+		$[4] = ref;
+		$[5] = render;
+	} else {
+		className = $[1];
+		count = $[2];
+		props = $[3];
+		ref = $[4];
+		render = $[5];
+	}
+	const locale = useLocale();
+	let t1;
+	if ($[6] !== className) {
+		t1 = clsx(avatar_group_module_default.count, className);
+		$[6] = className;
+		$[7] = t1;
+	} else t1 = $[7];
+	let t2;
 	if ($[8] !== count || $[9] !== locale) {
 		t2 = new Intl.NumberFormat(locale, { signDisplay: "always" }).format(count);
 		$[8] = count;
@@ -224,52 +280,75 @@ var Overflow = (t0) => {
 		$[10] = t2;
 	} else t2 = $[10];
 	let t3;
-	if ($[11] !== t2) {
-		t3 = /* @__PURE__ */ jsx("span", {
-			className: avatar_group_module_default.count,
+	if ($[11] !== props || $[12] !== t1 || $[13] !== t2) {
+		t3 = {
+			...props,
+			className: t1,
 			children: t2
-		});
-		$[11] = t2;
-		$[12] = t3;
-	} else t3 = $[12];
+		};
+		$[11] = props;
+		$[12] = t1;
+		$[13] = t2;
+		$[14] = t3;
+	} else t3 = $[14];
 	let t4;
-	if ($[13] !== label || $[14] !== props || $[15] !== t1 || $[16] !== t3) {
-		t4 = /* @__PURE__ */ jsx(Popover.Trigger, {
-			openOnHover: true,
-			...props,
+	if ($[15] !== ref || $[16] !== render || $[17] !== t3) {
+		t4 = {
+			defaultTagName: "span",
+			render,
+			ref,
+			props: t3
+		};
+		$[15] = ref;
+		$[16] = render;
+		$[17] = t3;
+		$[18] = t4;
+	} else t4 = $[18];
+	return useRender(t4);
+};
+/**
+* The overflow's popover surface, named after the group.
+*
+* @example
+* <Popover.Portal>
+* 	<Popover.Positioner side="top" sideOffset={8}>
+* 		<AvatarGroup.Popup><AvatarGroup.List>…</AvatarGroup.List></AvatarGroup.Popup>
+* 	</Popover.Positioner>
+* </Popover.Portal>
+*/
+var Popup = (t0) => {
+	const $ = c(9);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	const { label } = useAvatarGroup();
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(avatar_group_module_default.popup, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== label || $[6] !== props || $[7] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Popover.Popup, {
 			"aria-label": label,
-			className: t1,
-			children: t3
+			...props,
+			className: t1
 		});
-		$[13] = label;
-		$[14] = props;
-		$[15] = t1;
-		$[16] = t3;
-		$[17] = t4;
-	} else t4 = $[17];
-	let t5;
-	if ($[18] !== children || $[19] !== groupLabel) {
-		t5 = /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
-			side: "top",
-			sideOffset: 8,
-			children: /* @__PURE__ */ jsx(Popover.Popup, {
-				"aria-label": groupLabel,
-				className: avatar_group_module_default.popup,
-				children
-			})
-		}) });
-		$[18] = children;
-		$[19] = groupLabel;
-		$[20] = t5;
-	} else t5 = $[20];
-	let t6;
-	if ($[21] !== t4 || $[22] !== t5) {
-		t6 = /* @__PURE__ */ jsxs(Popover.Root, { children: [t4, t5] });
-		$[21] = t4;
-		$[22] = t5;
-		$[23] = t6;
-	} else t6 = $[23];
-	return t6;
+		$[5] = label;
+		$[6] = props;
+		$[7] = t1;
+		$[8] = t2;
+	} else t2 = $[8];
+	return t2;
 };
 /** The people in the overflow's popover, one `ListItem` each. */
 var List = (t0) => {
@@ -322,120 +401,192 @@ var List = (t0) => {
 	} else t3 = $[13];
 	return useRender(t3);
 };
-/** One person in the list: their avatar, their name and any suffix. */
+/**
+* One person in the list: their `Avatar`, then their `Name`.
+*
+* @example
+* <AvatarGroup.ListItem>
+* 	<Avatar name="Ada Lovelace" size={1.5} />
+* 	<AvatarGroup.Name>Ada Lovelace</AvatarGroup.Name>
+* </AvatarGroup.ListItem>
+*/
 var ListItem = (t0) => {
-	const $ = c(29);
+	const $ = c(14);
 	let className;
-	let name;
 	let props;
 	let ref;
 	let render;
-	let src;
-	let suffix;
 	if ($[0] !== t0) {
-		({name, src, suffix, render, className, ref, ...props} = t0);
+		({render, className, ref, ...props} = t0);
 		$[0] = t0;
 		$[1] = className;
-		$[2] = name;
-		$[3] = props;
-		$[4] = ref;
-		$[5] = render;
-		$[6] = src;
-		$[7] = suffix;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
 	} else {
 		className = $[1];
-		name = $[2];
-		props = $[3];
-		ref = $[4];
-		render = $[5];
-		src = $[6];
-		suffix = $[7];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
 	}
 	let t1;
-	if ($[8] !== className) {
+	if ($[5] !== className) {
 		t1 = clsx(avatar_group_module_default.item, className);
-		$[8] = className;
-		$[9] = t1;
-	} else t1 = $[9];
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
 	let t2;
-	if ($[10] !== name || $[11] !== src) {
-		t2 = /* @__PURE__ */ jsx(Avatar$1, {
-			name,
-			src,
-			size: LIST_AVATAR_SIZE
-		});
-		$[10] = name;
-		$[11] = src;
-		$[12] = t2;
-	} else t2 = $[12];
-	let t3;
-	if ($[13] !== suffix) {
-		t3 = suffix === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [" ", /* @__PURE__ */ jsx("span", {
-			className: avatar_group_module_default.suffix,
-			children: suffix
-		})] });
-		$[13] = suffix;
-		$[14] = t3;
-	} else t3 = $[14];
-	let t4;
-	if ($[15] !== name || $[16] !== t3) {
-		t4 = /* @__PURE__ */ jsxs("span", { children: [name, t3] });
-		$[15] = name;
-		$[16] = t3;
-		$[17] = t4;
-	} else t4 = $[17];
-	let t5;
-	if ($[18] !== t2 || $[19] !== t4) {
-		t5 = /* @__PURE__ */ jsxs(Fragment, { children: [t2, t4] });
-		$[18] = t2;
-		$[19] = t4;
-		$[20] = t5;
-	} else t5 = $[20];
-	let t6;
-	if ($[21] !== props || $[22] !== t1 || $[23] !== t5) {
-		t6 = {
+	if ($[7] !== props || $[8] !== t1) {
+		t2 = {
 			...props,
-			className: t1,
-			children: t5
+			className: t1
 		};
-		$[21] = props;
-		$[22] = t1;
-		$[23] = t5;
-		$[24] = t6;
-	} else t6 = $[24];
-	let t7;
-	if ($[25] !== ref || $[26] !== render || $[27] !== t6) {
-		t7 = {
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+		t3 = {
 			defaultTagName: "li",
 			render,
 			ref,
-			props: t6
+			props: t2
+		};
+		$[10] = ref;
+		$[11] = render;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return useRender(t3);
+};
+/**
+* A person's name in the list, with any `Suffix` after it.
+*
+* @example
+* <AvatarGroup.Name>
+* 	Ada Lovelace <AvatarGroup.Suffix>(you)</AvatarGroup.Suffix>
+* </AvatarGroup.Name>
+*/
+var Name = (t0) => {
+	const $ = c(8);
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = ref;
+		$[3] = render;
+	} else {
+		props = $[1];
+		ref = $[2];
+		render = $[3];
+	}
+	let t1;
+	if ($[4] !== props || $[5] !== ref || $[6] !== render) {
+		t1 = {
+			defaultTagName: "span",
+			render,
+			ref,
+			props
 		};
-		$[25] = ref;
-		$[26] = render;
-		$[27] = t6;
-		$[28] = t7;
-	} else t7 = $[28];
-	return useRender(t7);
+		$[4] = props;
+		$[5] = ref;
+		$[6] = render;
+		$[7] = t1;
+	} else t1 = $[7];
+	return useRender(t1);
+};
+/**
+* Muted words after a name, such as "(you)".
+*
+* @example
+* <AvatarGroup.Suffix>(you)</AvatarGroup.Suffix>
+*/
+var Suffix = (t0) => {
+	const $ = c(14);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = clsx(avatar_group_module_default.suffix, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== props || $[8] !== t1) {
+		t2 = {
+			...props,
+			className: t1
+		};
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+		t3 = {
+			defaultTagName: "span",
+			render,
+			ref,
+			props: t2
+		};
+		$[10] = ref;
+		$[11] = render;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return useRender(t3);
 };
 var Prefab = (t0) => {
-	const $ = c(23);
-	const { people, label, overflowLabel, currentUser, max: t1, size, className } = t0;
+	const $ = c(25);
+	const { people, label, overflowLabel, currentUser, max: t1, size: t2, className } = t0;
 	const max = t1 === void 0 ? 4 : t1;
+	const size = t2 === void 0 ? DEFAULT_SIZE : t2;
 	let T0;
 	let overflow;
-	let t2;
 	let t3;
 	let t4;
 	let t5;
+	let t6;
 	if ($[0] !== className || $[1] !== label || $[2] !== max || $[3] !== people || $[4] !== size) {
 		const shown = people.slice(0, max);
 		overflow = people.length - shown.length;
 		T0 = Root;
-		t2 = label;
-		t3 = size;
-		t4 = className;
-		t5 = shown.map(_temp);
+		t3 = label;
+		t4 = size;
+		t5 = className;
+		let t7;
+		if ($[11] !== size) {
+			t7 = (person) => /* @__PURE__ */ jsx(Avatar, {
+				name: person.name,
+				children: /* @__PURE__ */ jsx(Avatar$1, {
+					name: person.name,
+					src: person.src,
+					size
+				})
+			}, person.id);
+			$[11] = size;
+			$[12] = t7;
+		} else t7 = $[12];
+		t6 = shown.map(t7);
 		$[0] = className;
 		$[1] = label;
 		$[2] = max;
@@ -443,57 +594,62 @@ var Prefab = (t0) => {
 		$[4] = size;
 		$[5] = T0;
 		$[6] = overflow;
-		$[7] = t2;
-		$[8] = t3;
-		$[9] = t4;
-		$[10] = t5;
+		$[7] = t3;
+		$[8] = t4;
+		$[9] = t5;
+		$[10] = t6;
 	} else {
 		T0 = $[5];
 		overflow = $[6];
-		t2 = $[7];
-		t3 = $[8];
-		t4 = $[9];
-		t5 = $[10];
+		t3 = $[7];
+		t4 = $[8];
+		t5 = $[9];
+		t6 = $[10];
 	}
-	let t6;
-	if ($[11] !== currentUser || $[12] !== overflow || $[13] !== overflowLabel || $[14] !== people) {
-		t6 = overflow > 0 ? /* @__PURE__ */ jsx(Overflow, {
-			count: overflow,
+	let t7;
+	if ($[13] !== currentUser || $[14] !== overflow || $[15] !== overflowLabel || $[16] !== people) {
+		t7 = overflow > 0 ? /* @__PURE__ */ jsxs(Popover.Root, { children: [/* @__PURE__ */ jsx(Overflow, {
 			label: overflowLabel(overflow),
-			children: /* @__PURE__ */ jsx(List, { children: people.map((person_0) => /* @__PURE__ */ jsx(ListItem, {
+			render: /* @__PURE__ */ jsx(Popover.Trigger, { openOnHover: true }),
+			children: /* @__PURE__ */ jsx(Count, { count: overflow })
+		}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+			side: "top",
+			sideOffset: 8,
+			children: /* @__PURE__ */ jsx(Popup, { children: /* @__PURE__ */ jsx(List, { children: people.map((person_0) => /* @__PURE__ */ jsxs(ListItem, { children: [/* @__PURE__ */ jsx(Avatar$1, {
 				name: person_0.name,
 				src: person_0.src,
-				suffix: currentUser?.id === person_0.id ? currentUser.label : void 0
-			}, person_0.id)) })
-		}) : null;
-		$[11] = currentUser;
-		$[12] = overflow;
-		$[13] = overflowLabel;
-		$[14] = people;
-		$[15] = t6;
-	} else t6 = $[15];
-	let t7;
-	if ($[16] !== T0 || $[17] !== t2 || $[18] !== t3 || $[19] !== t4 || $[20] !== t5 || $[21] !== t6) {
-		t7 = /* @__PURE__ */ jsxs(T0, {
-			label: t2,
-			size: t3,
-			className: t4,
-			children: [t5, t6]
+				size: LIST_AVATAR_SIZE
+			}), /* @__PURE__ */ jsxs(Name, { children: [person_0.name, currentUser?.id === person_0.id ? /* @__PURE__ */ jsxs(Fragment, { children: [" ", /* @__PURE__ */ jsx(Suffix, { children: currentUser.label })] }) : null] })] }, person_0.id)) }) })
+		}) })] }) : null;
+		$[13] = currentUser;
+		$[14] = overflow;
+		$[15] = overflowLabel;
+		$[16] = people;
+		$[17] = t7;
+	} else t7 = $[17];
+	let t8;
+	if ($[18] !== T0 || $[19] !== t3 || $[20] !== t4 || $[21] !== t5 || $[22] !== t6 || $[23] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(T0, {
+			label: t3,
+			size: t4,
+			className: t5,
+			children: [t6, t7]
 		});
-		$[16] = T0;
-		$[17] = t2;
-		$[18] = t3;
-		$[19] = t4;
-		$[20] = t5;
-		$[21] = t6;
-		$[22] = t7;
-	} else t7 = $[22];
-	return t7;
+		$[18] = T0;
+		$[19] = t3;
+		$[20] = t4;
+		$[21] = t5;
+		$[22] = t6;
+		$[23] = t7;
+		$[24] = t8;
+	} else t8 = $[24];
+	return t8;
 };
 /**
 * A compact stack of avatars that folds everyone past `max` into a count. The
 * count is a button that lists everyone by name; the stack itself is content.
-* The parts hanging off it compose a group by hand.
+* The parts hanging off it compose a group by hand, with the overflow's
+* `Popover` composed around them.
 *
 * @example
 * <AvatarGroup
@@ -507,13 +663,11 @@ var AvatarGroup = Object.assign(Prefab, {
 	Root,
 	Avatar,
 	Overflow,
+	Count,
+	Popup,
 	List,
-	ListItem
+	ListItem,
+	Name,
+	Suffix
 });
-function _temp(person) {
-	return /* @__PURE__ */ jsx(Avatar, {
-		name: person.name,
-		src: person.src
-	}, person.id);
-}
 export { AvatarGroup };