@questpie/admin 3.2.4 → 3.2.6

package/dist/client/components/fields/relation/displays/cards-display.mjs

@@ -4,9 +4,8 @@ import { Button } from "../../../ui/button.mjs";
 import { Skeleton } from "../../../ui/skeleton.mjs";
 import { formatCellValue, formatColumnHeader, getImageUrl, getItemDisplayValue } from "./types.mjs";
 import { CollectionEditLink } from "../../../admin-link.mjs";
-import { c } from "react/compiler-runtime";
 import { Icon } from "@iconify/react";
-import "react";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/client/components/fields/relation/displays/cards-display.tsx
@@ -19,23 +18,11 @@ const gridCols = {
 	3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
 	4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
 };
-function CardsSkeleton(t0) {
-	const $ = c(8);
-	const { count: t1, gridColumns: t2, hasImage: t3 } = t0;
-	const count = t1 === void 0 ? 3 : t1;
-	const gridColumns = t2 === void 0 ? 2 : t2;
-	const hasImage = t3 === void 0 ? false : t3;
-	let t4;
-	if ($[0] !== count) {
-		t4 = Array.from({ length: count }, _temp);
-		$[0] = count;
-		$[1] = t4;
-	} else t4 = $[1];
-	const skeletonKeys = t4;
-	const t5 = `grid gap-4 ${gridCols[gridColumns]}`;
-	let t6;
-	if ($[2] !== hasImage || $[3] !== skeletonKeys) {
-		t6 = skeletonKeys.map((key) => /* @__PURE__ */ jsxs("div", {
+function CardsSkeleton({ count = 3, gridColumns = 2, hasImage = false }) {
+	const skeletonKeys = React.useMemo(() => Array.from({ length: count }, () => crypto.randomUUID()), [count]);
+	return /* @__PURE__ */ jsx("div", {
+		className: `grid gap-4 ${gridCols[gridColumns]}`,
+		children: skeletonKeys.map((key) => /* @__PURE__ */ jsxs("div", {
 			className: "panel-surface overflow-hidden",
 			children: [hasImage && /* @__PURE__ */ jsx(Skeleton, { className: "aspect-video w-full" }), /* @__PURE__ */ jsxs("div", {
 				className: "space-y-2 p-3",
@@ -47,214 +34,113 @@ function CardsSkeleton(t0) {
 					className: "h-4 w-1/2"
 				})]
 			})]
-		}, key));
-		$[2] = hasImage;
-		$[3] = skeletonKeys;
-		$[4] = t6;
-	} else t6 = $[4];
-	let t7;
-	if ($[5] !== t5 || $[6] !== t6) {
-		t7 = /* @__PURE__ */ jsx("div", {
-			className: t5,
-			children: t6
-		});
-		$[5] = t5;
-		$[6] = t6;
-		$[7] = t7;
-	} else t7 = $[7];
-	return t7;
+		}, key))
+	});
 }
-function _temp() {
-	return crypto.randomUUID();
-}
-function CardsDisplay(t0) {
-	const $ = c(38);
-	const { items, collection, actions, editable: t1, fields, gridColumns: t2, linkToDetail: t3, isLoading: t4, loadingCount: t5 } = t0;
-	const editable = t1 === void 0 ? false : t1;
-	const gridColumns = t2 === void 0 ? 2 : t2;
-	const linkToDetail = t3 === void 0 ? false : t3;
-	const isLoading = t4 === void 0 ? false : t4;
-	const loadingCount = t5 === void 0 ? 3 : t5;
+function CardsDisplay({ items, collection, actions, editable = false, fields, gridColumns = 2, linkToDetail = false, isLoading = false, loadingCount = 3 }) {
 	const { t } = useTranslation();
 	const resolveText = useResolveText();
-	let t6;
-	if ($[0] !== fields?.title) {
-		t6 = (item) => item[fields?.title || "_title"] || getItemDisplayValue(item);
-		$[0] = fields?.title;
-		$[1] = t6;
-	} else t6 = $[1];
-	const getTitle = t6;
-	let t7;
-	if ($[2] !== fields) {
-		t7 = (item_0) => fields?.subtitle ? item_0[fields.subtitle] : null;
-		$[2] = fields;
-		$[3] = t7;
-	} else t7 = $[3];
-	const getSubtitle = t7;
-	let t8;
-	if ($[4] !== fields?.image) {
-		t8 = (item_1) => getImageUrl(item_1, fields?.image);
-		$[4] = fields?.image;
-		$[5] = t8;
-	} else t8 = $[5];
-	const getImage = t8;
-	let t9;
-	if ($[6] !== fields) {
-		t9 = (item_2) => {
-			if (!fields?.meta?.length) return [];
-			return fields.meta.map((field) => ({
-				label: formatColumnHeader(field),
-				value: formatCellValue(item_2[field])
-			})).filter(_temp2);
-		};
-		$[6] = fields;
-		$[7] = t9;
-	} else t9 = $[7];
-	const getMeta = t9;
-	if (isLoading && items.length === 0) {
-		const t10$1 = !!fields?.image;
-		let t11$1;
-		if ($[8] !== gridColumns || $[9] !== loadingCount || $[10] !== t10$1) {
-			t11$1 = /* @__PURE__ */ jsx(CardsSkeleton, {
-				count: loadingCount,
-				gridColumns,
-				hasImage: t10$1
-			});
-			$[8] = gridColumns;
-			$[9] = loadingCount;
-			$[10] = t10$1;
-			$[11] = t11$1;
-		} else t11$1 = $[11];
-		return t11$1;
-	}
-	const t10 = `grid gap-4 ${gridCols[gridColumns]}`;
-	let t11;
-	if ($[12] !== actions || $[13] !== collection || $[14] !== editable || $[15] !== getImage || $[16] !== getMeta || $[17] !== getSubtitle || $[18] !== getTitle || $[19] !== items || $[20] !== linkToDetail || $[21] !== resolveText || $[22] !== t) {
-		let t12$1;
-		if ($[24] !== actions || $[25] !== collection || $[26] !== editable || $[27] !== getImage || $[28] !== getMeta || $[29] !== getSubtitle || $[30] !== getTitle || $[31] !== linkToDetail || $[32] !== resolveText || $[33] !== t) {
-			t12$1 = (item_3) => {
-				const image = getImage(item_3);
-				const subtitle = getSubtitle(item_3);
-				const meta = getMeta(item_3);
-				const cardContent = /* @__PURE__ */ jsxs("div", {
-					className: cn("panel-surface h-full overflow-hidden", (editable || !!actions?.onEdit || linkToDetail) && "hover:border-border hover:bg-accent/30 hover:text-foreground"),
-					children: [image && /* @__PURE__ */ jsx("div", {
-						className: "bg-muted aspect-video",
-						children: /* @__PURE__ */ jsx("img", {
-							src: image,
-							alt: getTitle(item_3),
-							className: "image-outline h-full w-full object-cover"
-						})
-					}), /* @__PURE__ */ jsxs("div", {
-						className: "p-3",
+	const getTitle = (item) => item[fields?.title || "_title"] || getItemDisplayValue(item);
+	const getSubtitle = (item) => fields?.subtitle ? item[fields.subtitle] : null;
+	const getImage = (item) => getImageUrl(item, fields?.image);
+	const getMeta = (item) => {
+		if (!fields?.meta?.length) return [];
+		return fields.meta.map((field) => ({
+			label: formatColumnHeader(field),
+			value: formatCellValue(item[field])
+		})).filter((m) => m.value !== "-");
+	};
+	if (isLoading && items.length === 0) return /* @__PURE__ */ jsx(CardsSkeleton, {
+		count: loadingCount,
+		gridColumns,
+		hasImage: !!fields?.image
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: `grid gap-4 ${gridCols[gridColumns]}`,
+		children: items.map((item) => {
+			const image = getImage(item);
+			const subtitle = getSubtitle(item);
+			const meta = getMeta(item);
+			const cardContent = /* @__PURE__ */ jsxs("div", {
+				className: cn("panel-surface h-full overflow-hidden", (editable || !!actions?.onEdit || linkToDetail) && "hover:border-border hover:bg-accent/30 hover:text-foreground"),
+				children: [image && /* @__PURE__ */ jsx("div", {
+					className: "bg-muted aspect-video",
+					children: /* @__PURE__ */ jsx("img", {
+						src: image,
+						alt: getTitle(item),
+						className: "image-outline h-full w-full object-cover"
+					})
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "p-3",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-start justify-between gap-2",
 						children: [/* @__PURE__ */ jsxs("div", {
-							className: "flex items-start justify-between gap-2",
-							children: [/* @__PURE__ */ jsxs("div", {
-								className: "min-w-0 flex-1",
-								children: [/* @__PURE__ */ jsx("div", {
-									className: "truncate font-medium",
-									children: getTitle(item_3)
-								}), subtitle && /* @__PURE__ */ jsx("div", {
-									className: "text-muted-foreground mt-0.5 truncate text-sm",
-									children: subtitle
-								})]
-							}), editable && (actions?.onEdit || actions?.onRemove) && /* @__PURE__ */ jsxs("div", {
-								className: "flex shrink-0 items-center gap-1",
-								children: [actions?.onEdit && /* @__PURE__ */ jsx(Button, {
-									type: "button",
-									variant: "ghost",
-									size: "icon-xs",
-									className: "relative after:absolute after:-inset-1",
-									onClick: (e) => {
-										e.preventDefault();
-										e.stopPropagation();
-										actions.onEdit?.(item_3);
-									},
-									"aria-label": t("field.editItem"),
-									children: /* @__PURE__ */ jsx(Icon, {
-										icon: "ph:pencil",
-										className: "size-3"
-									})
-								}), actions?.onRemove && /* @__PURE__ */ jsx(Button, {
-									type: "button",
-									variant: "ghost",
-									size: "icon-xs",
-									className: "relative after:absolute after:-inset-1",
-									onClick: (e_0) => {
-										e_0.preventDefault();
-										e_0.stopPropagation();
-										actions.onRemove?.(item_3);
-									},
-									"aria-label": t("field.removeItem"),
-									children: /* @__PURE__ */ jsx(Icon, {
-										icon: "ph:x",
-										className: "size-3"
-									})
-								})]
+							className: "min-w-0 flex-1",
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "truncate font-medium",
+								children: getTitle(item)
+							}), subtitle && /* @__PURE__ */ jsx("div", {
+								className: "text-muted-foreground mt-0.5 truncate text-sm",
+								children: subtitle
+							})]
+						}), editable && (actions?.onEdit || actions?.onRemove) && /* @__PURE__ */ jsxs("div", {
+							className: "flex shrink-0 items-center gap-1",
+							children: [actions?.onEdit && /* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "ghost",
+								size: "icon-xs",
+								className: "relative after:absolute after:-inset-1",
+								onClick: (e) => {
+									e.preventDefault();
+									e.stopPropagation();
+									actions.onEdit?.(item);
+								},
+								"aria-label": t("field.editItem"),
+								children: /* @__PURE__ */ jsx(Icon, {
+									icon: "ph:pencil",
+									className: "size-3"
+								})
+							}), actions?.onRemove && /* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "ghost",
+								size: "icon-xs",
+								className: "relative after:absolute after:-inset-1",
+								onClick: (e) => {
+									e.preventDefault();
+									e.stopPropagation();
+									actions.onRemove?.(item);
+								},
+								"aria-label": t("field.removeItem"),
+								children: /* @__PURE__ */ jsx(Icon, {
+									icon: "ph:x",
+									className: "size-3"
+								})
 							})]
-						}), meta.length > 0 && /* @__PURE__ */ jsx("div", {
-							className: "text-muted-foreground mt-2 flex flex-wrap gap-x-3 gap-y-1 text-xs",
-							children: meta.map((m_0) => /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsxs("span", {
-								className: "font-chrome chrome-meta mr-1 font-medium",
-								children: [resolveText(m_0.label), ":"]
-							}), m_0.value] }, String(m_0.label)))
 						})]
+					}), meta.length > 0 && /* @__PURE__ */ jsx("div", {
+						className: "text-muted-foreground mt-2 flex flex-wrap gap-x-3 gap-y-1 text-xs",
+						children: meta.map((m) => /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsxs("span", {
+							className: "font-chrome chrome-meta mr-1 font-medium",
+							children: [resolveText(m.label), ":"]
+						}), m.value] }, String(m.label)))
 					})]
-				});
-				if (!editable && actions?.onEdit) return /* @__PURE__ */ jsx("button", {
-					type: "button",
-					onClick: () => actions.onEdit?.(item_3),
-					className: "w-full text-left",
-					children: cardContent
-				}, item_3.id);
-				if (!editable && linkToDetail) return /* @__PURE__ */ jsx(CollectionEditLink, {
-					collection,
-					id: item_3.id,
-					className: "block",
-					children: cardContent
-				}, item_3.id);
-				return /* @__PURE__ */ jsx("div", { children: cardContent }, item_3.id);
-			};
-			$[24] = actions;
-			$[25] = collection;
-			$[26] = editable;
-			$[27] = getImage;
-			$[28] = getMeta;
-			$[29] = getSubtitle;
-			$[30] = getTitle;
-			$[31] = linkToDetail;
-			$[32] = resolveText;
-			$[33] = t;
-			$[34] = t12$1;
-		} else t12$1 = $[34];
-		t11 = items.map(t12$1);
-		$[12] = actions;
-		$[13] = collection;
-		$[14] = editable;
-		$[15] = getImage;
-		$[16] = getMeta;
-		$[17] = getSubtitle;
-		$[18] = getTitle;
-		$[19] = items;
-		$[20] = linkToDetail;
-		$[21] = resolveText;
-		$[22] = t;
-		$[23] = t11;
-	} else t11 = $[23];
-	let t12;
-	if ($[35] !== t10 || $[36] !== t11) {
-		t12 = /* @__PURE__ */ jsx("div", {
-			className: t10,
-			children: t11
-		});
-		$[35] = t10;
-		$[36] = t11;
-		$[37] = t12;
-	} else t12 = $[37];
-	return t12;
-}
-function _temp2(m) {
-	return m.value !== "-";
+				})]
+			});
+			if (!editable && actions?.onEdit) return /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => actions.onEdit?.(item),
+				className: "w-full text-left",
+				children: cardContent
+			}, item.id);
+			if (!editable && linkToDetail) return /* @__PURE__ */ jsx(CollectionEditLink, {
+				collection,
+				id: item.id,
+				className: "block",
+				children: cardContent
+			}, item.id);
+			return /* @__PURE__ */ jsx("div", { children: cardContent }, item.id);
+		})
+	});
 }
 
 //#endregion

package/dist/client/components/fields/relation/displays/chips-display.mjs

@@ -5,171 +5,99 @@ import { Badge } from "../../../ui/badge.mjs";
 import { Skeleton } from "../../../ui/skeleton.mjs";
 import { getItemDisplayValue } from "./types.mjs";
 import { CollectionEditLink } from "../../../admin-link.mjs";
-import { c } from "react/compiler-runtime";
 import { Icon } from "@iconify/react";
-import "react";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/client/components/fields/relation/displays/chips-display.tsx
 /**
 * Chips Display - compact badge/tag style
 */
-function ChipsSkeleton(t0) {
-	const $ = c(4);
-	const { count: t1 } = t0;
-	const count = t1 === void 0 ? 3 : t1;
-	let t2;
-	if ($[0] !== count) {
-		t2 = Array.from({ length: count }, _temp);
-		$[0] = count;
-		$[1] = t2;
-	} else t2 = $[1];
-	const skeletonKeys = t2;
-	let t3;
-	if ($[2] !== skeletonKeys) {
-		t3 = /* @__PURE__ */ jsx("div", {
-			className: "flex flex-wrap gap-2",
-			children: skeletonKeys.map(_temp2)
-		});
-		$[2] = skeletonKeys;
-		$[3] = t3;
-	} else t3 = $[3];
-	return t3;
+function ChipsSkeleton({ count = 3 }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-wrap gap-2",
+		children: React.useMemo(() => Array.from({ length: count }, () => crypto.randomUUID()), [count]).map((key) => /* @__PURE__ */ jsx(Skeleton, {
+			variant: "chip",
+			className: "h-6 w-20"
+		}, key))
+	});
 }
-function _temp2(key) {
-	return /* @__PURE__ */ jsx(Skeleton, {
-		variant: "chip",
-		className: "h-6 w-20"
-	}, key);
-}
-function _temp() {
-	return crypto.randomUUID();
-}
-function ChipsDisplay(t0) {
-	const $ = c(21);
-	const { items, collection, collectionIcon, actions, editable: t1, linkToDetail: t2, isLoading: t3, loadingCount: t4 } = t0;
-	const editable = t1 === void 0 ? false : t1;
-	const linkToDetail = t2 === void 0 ? false : t2;
-	const isLoading = t3 === void 0 ? false : t3;
-	const loadingCount = t4 === void 0 ? 3 : t4;
+function ChipsDisplay({ items, collection, collectionIcon, actions, editable = false, linkToDetail = false, isLoading = false, loadingCount = 3 }) {
 	const { t } = useTranslation();
-	let t5;
-	if ($[0] !== collectionIcon) {
-		t5 = resolveIconElement(collectionIcon, { className: "size-3 text-muted-foreground" });
-		$[0] = collectionIcon;
-		$[1] = t5;
-	} else t5 = $[1];
-	const iconElement = t5;
-	if (isLoading && items.length === 0) {
-		let t6$1;
-		if ($[2] !== loadingCount) {
-			t6$1 = /* @__PURE__ */ jsx(ChipsSkeleton, { count: loadingCount });
-			$[2] = loadingCount;
-			$[3] = t6$1;
-		} else t6$1 = $[3];
-		return t6$1;
-	}
-	let t6;
-	if ($[4] !== actions || $[5] !== collection || $[6] !== editable || $[7] !== iconElement || $[8] !== items || $[9] !== linkToDetail || $[10] !== t) {
-		let t7$1;
-		if ($[12] !== actions || $[13] !== collection || $[14] !== editable || $[15] !== iconElement || $[16] !== linkToDetail || $[17] !== t) {
-			t7$1 = (item) => {
-				const displayText = getItemDisplayValue(item);
-				if (editable && (actions?.onEdit || actions?.onRemove)) return /* @__PURE__ */ jsxs("div", {
-					className: "qa-chips-display__chip item-surface border-border bg-secondary text-secondary-foreground inline-flex min-h-8 items-center gap-1 py-0.5 pr-1 pl-2",
+	const iconElement = resolveIconElement(collectionIcon, { className: "size-3 text-muted-foreground" });
+	if (isLoading && items.length === 0) return /* @__PURE__ */ jsx(ChipsSkeleton, { count: loadingCount });
+	return /* @__PURE__ */ jsx("div", {
+		className: "qa-chips-display flex flex-wrap gap-2",
+		children: items.map((item) => {
+			const displayText = getItemDisplayValue(item);
+			if (editable && (actions?.onEdit || actions?.onRemove)) return /* @__PURE__ */ jsxs("div", {
+				className: "qa-chips-display__chip item-surface border-border bg-secondary text-secondary-foreground inline-flex min-h-8 items-center gap-1 py-0.5 pr-1 pl-2",
+				children: [
+					iconElement,
+					/* @__PURE__ */ jsx("span", {
+						className: "text-sm",
+						children: displayText
+					}),
+					actions?.onEdit && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon-xs",
+						className: "relative after:absolute after:-inset-1",
+						onClick: () => actions.onEdit?.(item),
+						"aria-label": t("field.editItem"),
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: "ph:pencil",
+							className: "size-3"
+						})
+					}),
+					actions?.onRemove && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon-xs",
+						className: "relative after:absolute after:-inset-1",
+						onClick: () => actions.onRemove?.(item),
+						"aria-label": t("field.removeItem"),
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: "ph:x",
+							className: "size-3"
+						})
+					})
+				]
+			}, item.id);
+			if (actions?.onEdit) return /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => actions.onEdit?.(item),
+				className: "focus-visible:ring-ring/40 inline-flex rounded-md focus-visible:ring-2 focus-visible:outline-none active:scale-[0.96]",
+				children: /* @__PURE__ */ jsxs(Badge, {
+					variant: "secondary",
+					className: "item-surface border-border hover:bg-accent hover:text-accent-foreground cursor-pointer gap-1",
 					children: [
 						iconElement,
-						/* @__PURE__ */ jsx("span", {
-							className: "text-sm",
-							children: displayText
-						}),
-						actions?.onEdit && /* @__PURE__ */ jsx(Button, {
-							type: "button",
-							variant: "ghost",
-							size: "icon-xs",
-							className: "relative after:absolute after:-inset-1",
-							onClick: () => actions.onEdit?.(item),
-							"aria-label": t("field.editItem"),
-							children: /* @__PURE__ */ jsx(Icon, {
-								icon: "ph:pencil",
-								className: "size-3"
-							})
-						}),
-						actions?.onRemove && /* @__PURE__ */ jsx(Button, {
-							type: "button",
-							variant: "ghost",
-							size: "icon-xs",
-							className: "relative after:absolute after:-inset-1",
-							onClick: () => actions.onRemove?.(item),
-							"aria-label": t("field.removeItem"),
-							children: /* @__PURE__ */ jsx(Icon, {
-								icon: "ph:x",
-								className: "size-3"
-							})
+						displayText,
+						/* @__PURE__ */ jsx(Icon, {
+							icon: "ph:pencil",
+							className: "size-3"
 						})
 					]
-				}, item.id);
-				if (actions?.onEdit) return /* @__PURE__ */ jsx("button", {
-					type: "button",
-					onClick: () => actions.onEdit?.(item),
-					className: "focus-visible:ring-ring/40 inline-flex rounded-md focus-visible:ring-2 focus-visible:outline-none active:scale-[0.96]",
-					children: /* @__PURE__ */ jsxs(Badge, {
-						variant: "secondary",
-						className: "item-surface border-border hover:bg-accent hover:text-accent-foreground cursor-pointer gap-1",
-						children: [
-							iconElement,
-							displayText,
-							/* @__PURE__ */ jsx(Icon, {
-								icon: "ph:pencil",
-								className: "size-3"
-							})
-						]
-					})
-				}, item.id);
-				if (linkToDetail && actions?.onNavigate) return /* @__PURE__ */ jsx(CollectionEditLink, {
-					collection,
-					id: item.id,
-					className: "focus-visible:ring-ring/40 inline-flex rounded-md focus-visible:ring-2 focus-visible:outline-none active:scale-[0.96]",
-					children: /* @__PURE__ */ jsxs(Badge, {
-						variant: "secondary",
-						className: "item-surface border-border hover:bg-accent hover:text-accent-foreground cursor-pointer gap-1",
-						children: [iconElement, displayText]
-					})
-				}, item.id);
-				return /* @__PURE__ */ jsxs(Badge, {
+				})
+			}, item.id);
+			if (linkToDetail && actions?.onNavigate) return /* @__PURE__ */ jsx(CollectionEditLink, {
+				collection,
+				id: item.id,
+				className: "focus-visible:ring-ring/40 inline-flex rounded-md focus-visible:ring-2 focus-visible:outline-none active:scale-[0.96]",
+				children: /* @__PURE__ */ jsxs(Badge, {
 					variant: "secondary",
-					className: "item-surface border-border gap-1",
+					className: "item-surface border-border hover:bg-accent hover:text-accent-foreground cursor-pointer gap-1",
 					children: [iconElement, displayText]
-				}, item.id);
-			};
-			$[12] = actions;
-			$[13] = collection;
-			$[14] = editable;
-			$[15] = iconElement;
-			$[16] = linkToDetail;
-			$[17] = t;
-			$[18] = t7$1;
-		} else t7$1 = $[18];
-		t6 = items.map(t7$1);
-		$[4] = actions;
-		$[5] = collection;
-		$[6] = editable;
-		$[7] = iconElement;
-		$[8] = items;
-		$[9] = linkToDetail;
-		$[10] = t;
-		$[11] = t6;
-	} else t6 = $[11];
-	let t7;
-	if ($[19] !== t6) {
-		t7 = /* @__PURE__ */ jsx("div", {
-			className: "qa-chips-display flex flex-wrap gap-2",
-			children: t6
-		});
-		$[19] = t6;
-		$[20] = t7;
-	} else t7 = $[20];
-	return t7;
+				})
+			}, item.id);
+			return /* @__PURE__ */ jsxs(Badge, {
+				variant: "secondary",
+				className: "item-surface border-border gap-1",
+				children: [iconElement, displayText]
+			}, item.id);
+		})
+	});
 }
 
 //#endregion