@questpie/admin 3.0.2 → 3.0.4

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

@@ -1,4 +1,5 @@
 import { useTranslation } from "../../../../i18n/hooks.mjs";
+import { cn } from "../../../../lib/utils.mjs";
 import { resolveIconElement } from "../../../component-renderer.mjs";
 import { Button } from "../../../ui/button.mjs";
 import { Skeleton } from "../../../ui/skeleton.mjs";
@@ -52,8 +53,11 @@ function GridSkeleton(t0) {
 }
 function _temp2(key) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "border-border bg-card flex items-center gap-2 border p-2",
-		children: [/* @__PURE__ */ jsx(Skeleton, { className: "size-8 shrink-0 rounded" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 max-w-[120px] flex-1 rounded" })]
+		className: "panel-surface flex items-center gap-2 p-2.5",
+		children: [/* @__PURE__ */ jsx(Skeleton, { className: "size-8 shrink-0" }), /* @__PURE__ */ jsx(Skeleton, {
+			variant: "text",
+			className: "h-4 max-w-[120px] flex-1"
+		})]
 	}, key);
 }
 function _temp() {
@@ -103,17 +107,17 @@ function GridDisplay(t0) {
 			t10$1 = (item_1) => {
 				const image = getImage(item_1);
 				const gridContent = /* @__PURE__ */ jsxs("div", {
-					className: "border-border bg-card hover:bg-card flex h-full items-center gap-2 border p-2 transition-colors",
+					className: cn("item-surface border-border bg-card flex h-full items-center gap-2 px-3 py-2.5 transition-colors", (editable || !!actions?.onEdit || linkToDetail) && "hover:border-border hover:bg-accent hover:text-accent-foreground"),
 					children: [
 						image ? /* @__PURE__ */ jsx("div", {
-							className: "bg-muted size-8 shrink-0 overflow-hidden rounded",
+							className: "bg-muted size-8 shrink-0 overflow-hidden rounded-sm",
 							children: /* @__PURE__ */ jsx("img", {
 								src: image,
 								alt: getTitle(item_1),
-								className: "h-full w-full object-cover"
+								className: "image-outline h-full w-full object-cover"
 							})
 						}) : collectionIcon ? /* @__PURE__ */ jsx("div", {
-							className: "bg-muted flex size-8 shrink-0 items-center justify-center rounded",
+							className: "bg-muted flex size-8 shrink-0 items-center justify-center rounded-sm",
 							children: resolveIconElement(collectionIcon, { className: "size-4 text-muted-foreground" })
 						}) : null,
 						/* @__PURE__ */ jsx("span", {
@@ -121,12 +125,12 @@ function GridDisplay(t0) {
 							children: getTitle(item_1)
 						}),
 						editable && (actions?.onEdit || actions?.onRemove) && /* @__PURE__ */ jsxs("div", {
-							className: "flex shrink-0 items-center gap-0.5",
+							className: "flex shrink-0 items-center gap-1",
 							children: [actions?.onEdit && /* @__PURE__ */ jsx(Button, {
 								type: "button",
 								variant: "ghost",
-								size: "icon",
-								className: "h-6 w-6",
+								size: "icon-xs",
+								className: "relative after:absolute after:-inset-1",
 								onClick: (e) => {
 									e.preventDefault();
 									e.stopPropagation();
@@ -140,8 +144,8 @@ function GridDisplay(t0) {
 							}), actions?.onRemove && /* @__PURE__ */ jsx(Button, {
 								type: "button",
 								variant: "ghost",
-								size: "icon",
-								className: "h-6 w-6",
+								size: "icon-xs",
+								className: "relative after:absolute after:-inset-1",
 								onClick: (e_0) => {
 									e_0.preventDefault();
 									e_0.stopPropagation();

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

@@ -1,4 +1,5 @@
 import { useTranslation } from "../../../../i18n/hooks.mjs";
+import { cn } from "../../../../lib/utils.mjs";
 import { resolveIconElement } from "../../../component-renderer.mjs";
 import { Button } from "../../../ui/button.mjs";
 import { Skeleton } from "../../../ui/skeleton.mjs";
@@ -29,7 +30,7 @@ function ListSkeleton(t0) {
 		let t4$1;
 		if ($[2] !== skeletonKeys) {
 			t4$1 = /* @__PURE__ */ jsx("div", {
-				className: "border-border bg-card space-y-2 border p-3",
+				className: "panel-surface space-y-2 p-3",
 				children: skeletonKeys.map(_temp2)
 			});
 			$[2] = skeletonKeys;
@@ -40,7 +41,7 @@ function ListSkeleton(t0) {
 	let t4;
 	if ($[4] !== skeletonKeys) {
 		t4 = /* @__PURE__ */ jsx("ul", {
-			className: "space-y-1",
+			className: "space-y-2",
 			children: skeletonKeys.map(_temp3)
 		});
 		$[4] = skeletonKeys;
@@ -50,14 +51,26 @@ function ListSkeleton(t0) {
 }
 function _temp3(key_0) {
 	return /* @__PURE__ */ jsxs("li", {
-		className: "flex items-center gap-1",
-		children: [/* @__PURE__ */ jsx(Skeleton, { className: "size-3 rounded" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32 rounded" })]
+		className: "item-surface border-border bg-card flex items-center gap-2 px-3 py-2",
+		children: [/* @__PURE__ */ jsx(Skeleton, {
+			variant: "text",
+			className: "size-3.5"
+		}), /* @__PURE__ */ jsx(Skeleton, {
+			variant: "text",
+			className: "h-4 w-32"
+		})]
 	}, key_0);
 }
 function _temp2(key) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "border-border bg-card flex items-center gap-2 border p-2",
-		children: [/* @__PURE__ */ jsx(Skeleton, { className: "size-3.5 rounded" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 max-w-[200px] flex-1 rounded" })]
+		className: "item-surface border-border bg-card flex items-center gap-2 px-3 py-2.5",
+		children: [/* @__PURE__ */ jsx(Skeleton, {
+			variant: "text",
+			className: "size-3.5"
+		}), /* @__PURE__ */ jsx(Skeleton, {
+			variant: "text",
+			className: "h-4 max-w-[200px] flex-1"
+		})]
 	}, key);
 }
 function _temp() {
@@ -81,7 +94,7 @@ function ListDisplay(t0) {
 	const iconElement = t6;
 	let t7;
 	if ($[2] !== collectionIcon) {
-		t7 = resolveIconElement(collectionIcon, { className: "size-3 text-muted-foreground" });
+		t7 = resolveIconElement(collectionIcon, { className: "size-3.5 text-muted-foreground shrink-0" });
 		$[2] = collectionIcon;
 		$[3] = t7;
 	} else t7 = $[3];
@@ -105,11 +118,11 @@ function ListDisplay(t0) {
 			let t9$2;
 			if ($[14] !== actions || $[15] !== iconElement || $[16] !== orderable || $[17] !== renderItem || $[18] !== t) {
 				t9$2 = (item, index) => /* @__PURE__ */ jsxs("div", {
-					className: "border-border bg-card flex items-center gap-2 border p-2",
+					className: "item-surface border-border bg-card flex items-center gap-2 px-3 py-2.5",
 					children: [
 						orderable && /* @__PURE__ */ jsx("button", {
 							type: "button",
-							className: "text-muted-foreground hover:text-foreground cursor-grab",
+							className: "text-muted-foreground hover:text-foreground flex shrink-0 cursor-grab items-center",
 							"aria-label": t("field.dragToReorder"),
 							children: /* @__PURE__ */ jsx(Icon, {
 								icon: "ph:dots-six-vertical",
@@ -126,8 +139,8 @@ function ListDisplay(t0) {
 						actions?.onEdit && /* @__PURE__ */ jsx(Button, {
 							type: "button",
 							variant: "ghost",
-							size: "icon",
-							className: "h-7 w-7 shrink-0",
+							size: "icon-xs",
+							className: "shrink-0",
 							onClick: () => actions.onEdit?.(item),
 							title: t("common.edit"),
 							"aria-label": t("field.editItem"),
@@ -139,8 +152,8 @@ function ListDisplay(t0) {
 						actions?.onRemove && /* @__PURE__ */ jsx(Button, {
 							type: "button",
 							variant: "ghost",
-							size: "icon",
-							className: "h-7 w-7 shrink-0",
+							size: "icon-xs",
+							className: "shrink-0",
 							onClick: () => actions.onRemove?.(item),
 							title: t("common.remove"),
 							"aria-label": t("field.removeItem"),
@@ -170,7 +183,7 @@ function ListDisplay(t0) {
 		let t9$1;
 		if ($[20] !== t8$1) {
 			t9$1 = /* @__PURE__ */ jsx("div", {
-				className: "border-border bg-card space-y-2 border p-3",
+				className: "panel-surface space-y-2 p-3",
 				children: t8$1
 			});
 			$[20] = t8$1;
@@ -187,31 +200,31 @@ function ListDisplay(t0) {
 				if (actions?.onEdit) return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
 					type: "button",
 					onClick: () => actions.onEdit?.(item_0),
-					className: "text-primary inline-flex items-center gap-1 text-sm hover:underline",
+					className: cn("item-surface border-border bg-card flex w-full items-center gap-2 px-3 py-2 text-sm", "hover:border-border hover:bg-accent hover:text-accent-foreground"),
 					children: [
 						smallIconElement,
 						displayText,
 						/* @__PURE__ */ jsx(Icon, {
 							icon: "ph:pencil",
-							className: "size-3"
+							className: "ml-auto size-3.5 shrink-0"
 						})
 					]
 				}) }, item_0.id);
 				if (linkToDetail) return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(CollectionEditLink, {
 					collection,
 					id: item_0.id,
-					className: "text-primary inline-flex items-center gap-1 text-sm hover:underline",
+					className: cn("item-surface border-border bg-card flex w-full items-center gap-2 px-3 py-2 text-sm", "hover:border-border hover:bg-accent hover:text-accent-foreground"),
 					children: [
 						smallIconElement,
 						displayText,
 						/* @__PURE__ */ jsx(Icon, {
 							icon: "ph:arrow-right",
-							className: "size-3"
+							className: "ml-auto size-3.5 shrink-0"
 						})
 					]
 				}) }, item_0.id);
 				return /* @__PURE__ */ jsxs("li", {
-					className: "flex items-center gap-1 text-sm",
+					className: "item-surface border-border bg-card flex w-full items-center gap-2 px-3 py-2 text-sm",
 					children: [smallIconElement, displayText]
 				}, item_0.id);
 			};
@@ -234,7 +247,7 @@ function ListDisplay(t0) {
 	let t9;
 	if ($[35] !== t8) {
 		t9 = /* @__PURE__ */ jsx("ul", {
-			className: "space-y-1",
+			className: "space-y-2",
 			children: t8
 		});
 		$[35] = t8;

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

@@ -1,6 +1,7 @@
 import { useTranslation } from "../../../../i18n/hooks.mjs";
 import { Button } from "../../../ui/button.mjs";
 import { Skeleton } from "../../../ui/skeleton.mjs";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../../ui/table.mjs";
 import { formatColumnHeader, resolveCellForColumn } from "./types.mjs";
 import { CollectionEditLink } from "../../../admin-link.mjs";
 import { c } from "react/compiler-runtime";
@@ -41,32 +42,26 @@ function TableSkeleton(t0) {
 	} else t6 = $[5];
 	let t7;
 	if ($[6] !== hasActions) {
-		t7 = hasActions && /* @__PURE__ */ jsx("th", { className: "w-20 px-3 py-2" });
+		t7 = hasActions && /* @__PURE__ */ jsx(TableHead, { className: "w-20" });
 		$[6] = hasActions;
 		$[7] = t7;
 	} else t7 = $[7];
 	let t8;
 	if ($[8] !== t6 || $[9] !== t7) {
-		t8 = /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
-			className: "border-border bg-card border-b",
-			children: [t6, t7]
-		}) });
+		t8 = /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [t6, t7] }) });
 		$[8] = t6;
 		$[9] = t7;
 		$[10] = t8;
 	} else t8 = $[10];
 	let t9;
 	if ($[11] !== columns || $[12] !== hasActions || $[13] !== skeletonKeys) {
-		t9 = /* @__PURE__ */ jsx("tbody", { children: skeletonKeys.map((key) => /* @__PURE__ */ jsxs("tr", {
-			className: "border-b last:border-0",
-			children: [columns.map(_temp3), hasActions && /* @__PURE__ */ jsx("td", {
-				className: "px-3 py-2",
-				children: /* @__PURE__ */ jsx("div", {
-					className: "flex items-center justify-end gap-1",
-					children: /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-7 rounded" })
-				})
-			})]
-		}, key)) });
+		t9 = /* @__PURE__ */ jsx(TableBody, { children: skeletonKeys.map((key) => /* @__PURE__ */ jsxs(TableRow, { children: [columns.map(_temp3), hasActions && /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("div", {
+			className: "flex items-center justify-end gap-1",
+			children: /* @__PURE__ */ jsx(Skeleton, {
+				variant: "text",
+				className: "h-6 w-6"
+			})
+		}) })] }, key)) });
 		$[11] = columns;
 		$[12] = hasActions;
 		$[13] = skeletonKeys;
@@ -75,11 +70,8 @@ function TableSkeleton(t0) {
 	let t10;
 	if ($[15] !== t8 || $[16] !== t9) {
 		t10 = /* @__PURE__ */ jsx("div", {
-			className: "min-w-0 overflow-x-auto border",
-			children: /* @__PURE__ */ jsxs("table", {
-				className: "w-full text-sm",
-				children: [t8, t9]
-			})
+			className: "panel-surface min-w-0 overflow-x-auto",
+			children: /* @__PURE__ */ jsxs(Table, { children: [t8, t9] })
 		});
 		$[15] = t8;
 		$[16] = t9;
@@ -91,16 +83,13 @@ function TableSkeleton(t0) {
 * Cell renderer that uses resolved cell components from field registry
 */
 function _temp3(col_0) {
-	return /* @__PURE__ */ jsx("td", {
-		className: "px-3 py-2",
-		children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24 rounded" })
-	}, col_0);
+	return /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, {
+		variant: "text",
+		className: "h-4 w-24"
+	}) }, col_0);
 }
 function _temp2(col) {
-	return /* @__PURE__ */ jsx("th", {
-		className: "px-3 py-2 text-left font-medium",
-		children: formatColumnHeader(col)
-	}, col);
+	return /* @__PURE__ */ jsx(TableHead, { children: formatColumnHeader(col) }, col);
 }
 function _temp() {
 	return crypto.randomUUID();
@@ -186,16 +175,13 @@ function TableDisplay(t0) {
 	} else t7 = $[7];
 	let t8;
 	if ($[8] !== hasActions) {
-		t8 = hasActions && /* @__PURE__ */ jsx("th", { className: "w-20 px-3 py-2" });
+		t8 = hasActions && /* @__PURE__ */ jsx(TableHead, { className: "w-20" });
 		$[8] = hasActions;
 		$[9] = t8;
 	} else t8 = $[9];
 	let t9;
 	if ($[10] !== t7 || $[11] !== t8) {
-		t9 = /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
-			className: "border-border bg-card border-b",
-			children: [t7, t8]
-		}) });
+		t9 = /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [t7, t8] }) });
 		$[10] = t7;
 		$[11] = t8;
 		$[12] = t9;
@@ -204,57 +190,46 @@ function TableDisplay(t0) {
 	if ($[13] !== actions || $[14] !== collection || $[15] !== collectionConfig || $[16] !== columns || $[17] !== editable || $[18] !== hasActions || $[19] !== items || $[20] !== linkToDetail || $[21] !== t) {
 		let t11$1;
 		if ($[23] !== actions || $[24] !== collection || $[25] !== collectionConfig || $[26] !== columns || $[27] !== editable || $[28] !== hasActions || $[29] !== linkToDetail || $[30] !== t) {
-			t11$1 = (item) => /* @__PURE__ */ jsxs("tr", {
-				className: "border-b last:border-0",
-				children: [columns.map((col_0) => /* @__PURE__ */ jsx("td", {
-					className: "px-3 py-2",
-					children: /* @__PURE__ */ jsx(CellRenderer, {
-						item,
-						column: col_0,
-						collectionConfig
+			t11$1 = (item) => /* @__PURE__ */ jsxs(TableRow, { children: [columns.map((col_0) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(CellRenderer, {
+				item,
+				column: col_0,
+				collectionConfig
+			}) }, col_0)), hasActions && /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-end gap-1",
+				children: [
+					actions?.onEdit && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon-xs",
+						onClick: () => actions.onEdit?.(item),
+						"aria-label": t("field.editItem"),
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: "ph:pencil",
+							className: "size-4"
+						})
+					}),
+					editable && actions?.onRemove && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon-xs",
+						onClick: () => actions.onRemove?.(item),
+						"aria-label": t("field.removeItem"),
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: "ph:x",
+							className: "size-4"
+						})
+					}),
+					!editable && linkToDetail && !actions?.onEdit && /* @__PURE__ */ jsx(CollectionEditLink, {
+						collection,
+						id: item.id,
+						className: "item-surface text-muted-foreground hover:border-border hover:bg-accent hover:text-accent-foreground inline-flex min-h-10 min-w-10 items-center justify-center active:scale-[0.96]",
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: "ph:arrow-right",
+							className: "size-4"
+						})
 					})
-				}, col_0)), hasActions && /* @__PURE__ */ jsx("td", {
-					className: "px-3 py-2",
-					children: /* @__PURE__ */ jsxs("div", {
-						className: "flex items-center justify-end gap-1",
-						children: [
-							actions?.onEdit && /* @__PURE__ */ jsx(Button, {
-								type: "button",
-								variant: "ghost",
-								size: "icon",
-								className: "h-7 w-7",
-								onClick: () => actions.onEdit?.(item),
-								"aria-label": t("field.editItem"),
-								children: /* @__PURE__ */ jsx(Icon, {
-									icon: "ph:pencil",
-									className: "size-4"
-								})
-							}),
-							editable && actions?.onRemove && /* @__PURE__ */ jsx(Button, {
-								type: "button",
-								variant: "ghost",
-								size: "icon",
-								className: "h-7 w-7",
-								onClick: () => actions.onRemove?.(item),
-								"aria-label": t("field.removeItem"),
-								children: /* @__PURE__ */ jsx(Icon, {
-									icon: "ph:x",
-									className: "size-4"
-								})
-							}),
-							!editable && linkToDetail && !actions?.onEdit && /* @__PURE__ */ jsx(CollectionEditLink, {
-								collection,
-								id: item.id,
-								className: "text-primary hover:underline",
-								children: /* @__PURE__ */ jsx(Icon, {
-									icon: "ph:arrow-right",
-									className: "size-4"
-								})
-							})
-						]
-					})
-				})]
-			}, item.id);
+				]
+			}) })] }, item.id);
 			$[23] = actions;
 			$[24] = collection;
 			$[25] = collectionConfig;
@@ -279,18 +254,15 @@ function TableDisplay(t0) {
 	} else t10 = $[22];
 	let t11;
 	if ($[32] !== t10) {
-		t11 = /* @__PURE__ */ jsx("tbody", { children: t10 });
+		t11 = /* @__PURE__ */ jsx(TableBody, { children: t10 });
 		$[32] = t10;
 		$[33] = t11;
 	} else t11 = $[33];
 	let t12;
 	if ($[34] !== t11 || $[35] !== t9) {
 		t12 = /* @__PURE__ */ jsx("div", {
-			className: "min-w-0 overflow-x-auto border",
-			children: /* @__PURE__ */ jsxs("table", {
-				className: "w-full text-sm",
-				children: [t9, t11]
-			})
+			className: "panel-surface min-w-0 overflow-x-auto",
+			children: /* @__PURE__ */ jsxs(Table, { children: [t9, t11] })
 		});
 		$[34] = t11;
 		$[35] = t9;
@@ -299,10 +271,7 @@ function TableDisplay(t0) {
 	return t12;
 }
 function _temp4(col) {
-	return /* @__PURE__ */ jsx("th", {
-		className: "px-3 py-2 text-left font-medium",
-		children: formatColumnHeader(col)
-	}, col);
+	return /* @__PURE__ */ jsx(TableHead, { children: formatColumnHeader(col) }, col);
 }
 
 //#endregion

package/dist/client/components/fields/relation/relation-items-display.mjs

@@ -78,7 +78,7 @@ function RelationItemsDisplay(t0) {
 		let t10;
 		if ($[23] !== resolvedEmptyMessage) {
 			t10 = /* @__PURE__ */ jsx("div", {
-				className: "border border-dashed p-4 text-center",
+				className: "py-2",
 				children: /* @__PURE__ */ jsx("p", {
 					className: "text-muted-foreground text-sm",
 					children: resolvedEmptyMessage

package/dist/client/components/fields/relation-picker.mjs

@@ -192,7 +192,7 @@ function RelationPicker({ name, value, onChange, targetCollection, label, filter
 				className: "flex items-center gap-2",
 				children: [/* @__PURE__ */ jsxs("label", {
 					htmlFor: name,
-					className: "flex items-center gap-1.5 text-sm font-medium",
+					className: "font-chrome flex items-center gap-1.5 text-sm font-medium",
 					children: [
 						resolveIconElement(collectionIconRef, { className: "size-3.5 text-muted-foreground" }),
 						resolvedLabel,
@@ -201,7 +201,7 @@ function RelationPicker({ name, value, onChange, targetCollection, label, filter
 							children: "*"
 						}),
 						maxItems && /* @__PURE__ */ jsxs("span", {
-							className: "text-muted-foreground ml-2 text-xs",
+							className: "text-muted-foreground font-chrome chrome-meta ml-2 text-xs tabular-nums",
 							children: [
 								"(",
 								selectedIds.length,
@@ -230,7 +230,7 @@ function RelationPicker({ name, value, onChange, targetCollection, label, filter
 				loadingCount: selectedIds.length || 3
 			}),
 			!readOnly && canAddMore && /* @__PURE__ */ jsxs("div", {
-				className: "flex gap-2",
+				className: "qa-relation-picker__add-more flex items-center gap-2",
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "flex-1",
 					children: /* @__PURE__ */ jsx(SelectSingle, {
@@ -259,6 +259,7 @@ function RelationPicker({ name, value, onChange, targetCollection, label, filter
 					type: "button",
 					variant: "outline",
 					size: "icon",
+					className: "text-muted-foreground hover:text-foreground size-10",
 					onClick: handleOpenCreate,
 					disabled,
 					title: createLabel,
@@ -270,14 +271,14 @@ function RelationPicker({ name, value, onChange, targetCollection, label, filter
 				})]
 			}),
 			selectedIds.length === 0 && !isLoadingItems && /* @__PURE__ */ jsx("div", {
-				className: "border border-dashed p-4 text-center",
+				className: "qa-relation-picker__empty-state py-2",
 				children: /* @__PURE__ */ jsx("p", {
-					className: "text-muted-foreground text-sm",
+					className: "text-muted-foreground text-sm text-pretty",
 					children: resolvedPlaceholder || emptyLabel
 				})
 			}),
 			error && /* @__PURE__ */ jsx("p", {
-				className: "text-destructive text-sm",
+				className: "text-destructive text-sm text-pretty",
 				children: error
 			}),
 			/* @__PURE__ */ jsx(ResourceSheet, {