@declarion/react 0.66.0 → 0.80.0

package/dist-lib/components/file-widgets/Grid.js

@@ -2,38 +2,35 @@ import { pluralText as e } from "../../lib/language.js";
 import { useText as t } from "../../hooks/useText.js";
 import { UploadError as n, discardFile as r, formatBytes as i, uploadCheckFailure as a, uploadFailure as o, uploadFile as s, validateClientSide as c } from "./upload.js";
 import { UploadFailureText as l } from "./UploadFailureText.js";
-import { preferredListThumbnailURL as u, preferredThumbnailVariant as d } from "./helpers.js";
-import { useDraftRegistration as f } from "./draft-scope.js";
-import { useEmbedFileSrc as p } from "./useEmbedFileSrc.js";
-import { fileArrayFromValue as m } from "./value.js";
-import { useCallback as h, useEffect as g, useMemo as _, useRef as v, useState as y } from "react";
-import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
-import { DndContext as C, PointerSensor as w, closestCenter as ee, useSensor as te, useSensors as ne } from "@dnd-kit/core";
+import { fileFieldLabel as u, preferredListThumbnail as d, previewFileURL as f } from "./helpers.js";
+import { useDraftRegistration as p } from "./draft-scope.js";
+import { useEmbedFileSrc as m } from "./useEmbedFileSrc.js";
+import { fileArrayFromValue as h } from "./value.js";
+import { useCallback as g, useEffect as _, useMemo as v, useRef as y, useState as b } from "react";
+import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
+import { DndContext as w, PointerSensor as ee, closestCenter as te, useSensor as ne, useSensors as re } from "@dnd-kit/core";
 import { SortableContext as T, arrayMove as E, rectSortingStrategy as D, useSortable as O } from "@dnd-kit/sortable";
 import { CSS as k } from "@dnd-kit/utilities";
 //#region src/components/file-widgets/Grid.tsx
-function A(e, t) {
-	return u(e, t);
-}
-function j(i) {
-	let { field: l, fieldName: u, value: d, onChange: p, mode: b, disabled: O } = i, k = m(d), [A, j] = y([]), [M, N] = y(/* @__PURE__ */ new Set()), [P, F] = y(null), { register: I, unregister: L, isDraft: R } = f(), z = t(), B = t("errors"), V = v(/* @__PURE__ */ new Set()), H = v([]);
-	H.current = A;
-	let U = v(k);
-	U.current = k, g(() => () => {
-		H.current.forEach((e) => e.abort());
+function A(i) {
+	let { field: l, fieldName: d, value: f, onChange: m, mode: x, disabled: O } = i, k = h(f), [A, M] = b([]), [N, P] = b(/* @__PURE__ */ new Set()), [F, I] = b(null), { register: L, unregister: R, isDraft: z } = p(), B = t(), V = t("errors"), H = y(/* @__PURE__ */ new Set()), U = y([]);
+	U.current = A;
+	let W = y(k);
+	W.current = k, _(() => () => {
+		U.current.forEach((e) => e.abort());
 	}, []);
-	let W = ne(te(w, { activationConstraint: { distance: 5 } })), oe = (l.accepts ?? ["image/*"]).join(","), se = l.display?.reorderable !== !1, ce = l.display?.listable_thumbnail, G = h(async (e) => {
-		let t = c(e, l.accepts, l.max_size_bytes), d = `tile-${Math.random().toString(36).slice(2)}-${Date.now()}`, f = new AbortController();
-		if (t) j((n) => [...n, {
-			localId: d,
+	let oe = re(ne(ee, { activationConstraint: { distance: 5 } })), se = (l.accepts ?? ["image/*"]).join(","), ce = l.display?.reorderable !== !1, le = l.display?.listable_thumbnail, G = g(async (e) => {
+		let t = c(e, l.accepts, l.max_size_bytes), u = `tile-${Math.random().toString(36).slice(2)}-${Date.now()}`, f = new AbortController();
+		if (t) M((n) => [...n, {
+			localId: u,
 			filename: e.name,
 			progress: null,
-			error: a(z, B, t),
+			error: a(B, V, t),
 			abort: () => {}
 		}]);
 		else {
-			j((t) => [...t, {
-				localId: d,
+			M((t) => [...t, {
+				localId: u,
 				filename: e.name,
 				progress: {
 					loaded: 0,
@@ -47,18 +44,18 @@ function j(i) {
 				let t = await s({
 					file: e,
 					entityCode: i.entityCode,
-					fieldCode: u,
+					fieldCode: d,
 					signal: f.signal,
-					onProgress: (e) => j((t) => t.map((t) => t.localId === d ? {
+					onProgress: (e) => M((t) => t.map((t) => t.localId === u ? {
 						...t,
 						progress: e
 					} : t))
 				});
-				if (V.current.delete(d)) {
-					r(t.id).catch(() => {}), L(t.id);
+				if (H.current.delete(u)) {
+					r(t.id).catch(() => {}), R(t.id);
 					return;
 				}
-				I(t.id, () => r(t.id));
+				L(t.id, () => r(t.id));
 				let n = {
 					id: t.id,
 					filename: t.filename,
@@ -69,15 +66,15 @@ function j(i) {
 					height: t.height,
 					url: t.url,
 					metadata: t.metadata
-				}, a = [...U.current, n];
-				U.current = a, p?.(a), j((e) => e.filter((e) => e.localId !== d));
+				}, a = [...W.current, n];
+				W.current = a, m?.(a), M((e) => e.filter((e) => e.localId !== u));
 			} catch (e) {
 				if (e instanceof n && e.code === "ABORTED") {
-					j((e) => e.filter((e) => e.localId !== d));
+					M((e) => e.filter((e) => e.localId !== u));
 					return;
 				}
-				let t = o(z, B, e);
-				j((e) => e.map((e) => e.localId === d ? {
+				let t = o(B, V, e);
+				M((e) => e.map((e) => e.localId === u ? {
 					...e,
 					error: t,
 					progress: null,
@@ -86,169 +83,173 @@ function j(i) {
 			}
 		}
 	}, [
+		V,
 		B,
-		z,
 		l.accepts,
 		l.max_size_bytes,
-		u,
-		p,
+		d,
+		m,
 		i.entityCode,
-		I,
-		L
-	]), K = h((e) => {
+		L,
+		R
+	]), K = g((e) => {
 		Array.from(e).forEach((e) => void G(e));
-	}, [G]), q = v(null), J = h(() => {
+	}, [G]), q = y(null), J = g(() => {
 		O || q.current?.click();
-	}, [O]), le = h((e) => {
+	}, [O]), ue = g((e) => {
 		O || (e.preventDefault(), e.dataTransfer.dropEffect = "copy");
-	}, [O]), ue = h((e) => {
+	}, [O]), de = g((e) => {
 		if (O) return;
 		e.preventDefault();
 		let t = e.dataTransfer.files;
 		t && t.length > 0 && K(t);
-	}, [O, K]), de = h((e) => {
+	}, [O, K]), fe = g((e) => {
 		let t = e.target.files;
 		e.target.value = "", t && t.length > 0 && K(t);
-	}, [K]), fe = h((e) => {
-		R(e) && (r(e).catch(() => {}), L(e));
+	}, [K]), pe = g((e) => {
+		z(e) && (r(e).catch(() => {}), R(e));
 		let t = k.filter((t) => t.id !== e);
-		p?.(t), N((t) => {
+		m?.(t), P((t) => {
 			let n = new Set(t);
 			return n.delete(e), n;
 		});
 	}, [
-		R,
+		z,
 		k,
-		p,
-		L
-	]), pe = h(() => {
-		M.size !== 0 && (Array.from(M).forEach((e) => {
-			R(e) && (r(e).catch(() => {}), L(e));
-		}), p?.(k.filter((e) => !M.has(e.id))), N(/* @__PURE__ */ new Set()));
+		m,
+		R
+	]), me = g(() => {
+		N.size !== 0 && (Array.from(N).forEach((e) => {
+			z(e) && (r(e).catch(() => {}), R(e));
+		}), m?.(k.filter((e) => !N.has(e.id))), P(/* @__PURE__ */ new Set()));
 	}, [
-		R,
+		z,
 		k,
-		M,
-		p,
-		L
-	]), me = h((e) => {
+		N,
+		m,
+		R
+	]), he = g((e) => {
 		let { active: t, over: n } = e;
 		if (!n || t.id === n.id) return;
 		let r = k.findIndex((e) => e.id === t.id), i = k.findIndex((e) => e.id === n.id);
-		r < 0 || i < 0 || p?.(E(k, r, i));
-	}, [k, p]), he = h((e) => {
-		N((t) => {
+		r < 0 || i < 0 || m?.(E(k, r, i));
+	}, [k, m]), ge = g((e) => {
+		P((t) => {
 			let n = new Set(t);
 			return n.has(e) ? n.delete(e) : n.add(e), n;
 		});
-	}, []), Y = P == null ? null : k[P], X = h(() => {
-		F((e) => e == null ? e : Math.min(k.length - 1, e + 1));
-	}, [k.length]), Z = h(() => {
-		F((e) => e == null ? e : Math.max(0, e - 1));
-	}, []), Q = h(() => F(null), []);
-	g(() => {
-		if (P == null) return;
+	}, []), Y = F == null ? null : k[F], X = g(() => {
+		I((e) => e == null ? e : Math.min(k.length - 1, e + 1));
+	}, [k.length]), Z = g(() => {
+		I((e) => e == null ? e : Math.max(0, e - 1));
+	}, []), Q = g(() => I(null), []);
+	_(() => {
+		if (F == null) return;
 		let e = (e) => {
 			e.key === "Escape" ? Q() : e.key === "ArrowRight" ? X() : e.key === "ArrowLeft" && Z();
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
 	}, [
-		P,
+		F,
 		Q,
 		X,
 		Z
 	]);
-	let ge = h((e) => {
+	let _e = g((e) => {
 		O || (e.key === "Enter" || e.key === " ") && e.target === e.currentTarget && (e.preventDefault(), J());
-	}, [O, J]), $ = b === "display", _e = _(() => k.map((e) => e.id), [k]);
-	return /* @__PURE__ */ S("div", {
-		"data-testid": `file-widget-${u}`,
+	}, [O, J]), $ = x === "display", ve = v(() => k.map((e) => e.id), [k]);
+	return /* @__PURE__ */ C("div", {
+		"data-testid": `file-widget-${d}`,
 		className: "flex flex-col gap-2",
 		children: [
-			!$ && M.size > 0 && /* @__PURE__ */ S("div", {
+			!$ && N.size > 0 && /* @__PURE__ */ C("div", {
 				className: "flex items-center gap-2 rounded-md border border-border bg-surface-2 p-2 text-sm",
 				role: "toolbar",
-				"aria-label": z("file.grid.bulk_actions", "Bulk actions"),
+				"aria-label": B("file.grid.bulk_actions", "Bulk actions"),
 				children: [
-					/* @__PURE__ */ x("span", {
+					/* @__PURE__ */ S("span", {
 						className: "text-foreground",
-						children: e(z, "file.grid.selected", M.size, {
+						children: e(B, "file.grid.selected", N.size, {
 							one: "{count} selected",
 							other: "{count} selected"
 						})
 					}),
-					/* @__PURE__ */ x("button", {
+					/* @__PURE__ */ S("button", {
 						type: "button",
 						className: "rounded-sm border border-border bg-card px-2 py-1 text-xs text-destructive hover:bg-surface-2",
-						onClick: pe,
+						onClick: me,
 						"data-testid": "bulk-delete",
-						children: z("file.delete", "Delete")
+						children: B("file.delete", "Delete")
 					}),
-					/* @__PURE__ */ x("button", {
+					/* @__PURE__ */ S("button", {
 						type: "button",
 						className: "rounded-sm border border-border bg-card px-2 py-1 text-xs text-foreground hover:bg-surface-2",
-						onClick: () => N(/* @__PURE__ */ new Set()),
-						children: z("file.grid.clear_selection", "Clear")
+						onClick: () => P(/* @__PURE__ */ new Set()),
+						children: B("file.grid.clear_selection", "Clear")
 					})
 				]
 			}),
-			/* @__PURE__ */ x(C, {
-				sensors: W,
-				collisionDetection: ee,
-				onDragEnd: me,
-				children: /* @__PURE__ */ x(T, {
-					items: _e,
+			/* @__PURE__ */ S(w, {
+				sensors: oe,
+				collisionDetection: te,
+				onDragEnd: he,
+				children: /* @__PURE__ */ S(T, {
+					items: ve,
 					strategy: D,
-					children: /* @__PURE__ */ S("div", {
-						className: "grid grid-cols-[repeat(auto-fill,minmax(140px,1fr))] gap-3 rounded-md border border-dashed border-border bg-surface p-3 outline-none focus-visible:outline-2 focus-visible:outline-accent",
+					children: /* @__PURE__ */ C("div", {
+						className: $ ? "grid grid-cols-[repeat(auto-fill,minmax(140px,1fr))] gap-3" : "grid grid-cols-[repeat(auto-fill,minmax(140px,1fr))] gap-3 rounded-md border border-dashed border-border bg-surface p-3 outline-none focus-visible:outline-2 focus-visible:outline-accent",
 						role: "grid",
-						"aria-label": u,
+						"aria-label": u(B, l, d),
 						tabIndex: $ || O ? -1 : 0,
-						onDragOver: le,
-						onDrop: ue,
-						onKeyDown: ge,
+						onDragOver: ue,
+						onDrop: de,
+						onKeyDown: _e,
 						"data-testid": "grid-container",
 						children: [
-							k.map((e, t) => /* @__PURE__ */ x(re, {
+							k.map((e, t) => /* @__PURE__ */ S(j, {
 								file: e,
-								selected: M.has(e.id),
+								selected: N.has(e.id),
 								disabled: O || $,
-								reorderable: se && !$,
-								preferredThumbnail: ce,
-								onSelect: () => he(e.id),
-								onRemove: () => fe(e.id),
-								onPreview: () => F(t)
+								reorderable: ce && !$,
+								preferredThumbnail: le,
+								onSelect: () => ge(e.id),
+								onRemove: () => pe(e.id),
+								onPreview: () => I(t)
 							}, e.id)),
-							A.map((e) => /* @__PURE__ */ x(ie, {
+							A.map((e) => /* @__PURE__ */ S(ie, {
 								tile: e,
 								onCancel: () => {
-									e.abort(), V.current.add(e.localId), j((t) => t.filter((t) => t.localId !== e.localId));
+									e.abort(), H.current.add(e.localId), M((t) => t.filter((t) => t.localId !== e.localId));
 								},
-								onDismiss: () => j((t) => t.filter((t) => t.localId !== e.localId))
+								onDismiss: () => M((t) => t.filter((t) => t.localId !== e.localId))
 							}, e.localId)),
-							k.length === 0 && A.length === 0 && /* @__PURE__ */ x("div", {
+							k.length === 0 && A.length === 0 && ($ ? /* @__PURE__ */ S("div", {
+								className: "col-span-full text-sm text-muted-foreground",
+								"data-testid": "grid-empty",
+								children: B(l.display?.placeholder) || B("file.list.empty", "No files")
+							}) : /* @__PURE__ */ S("div", {
 								className: "col-span-full flex h-24 cursor-pointer items-center justify-center text-sm text-muted-foreground",
 								onClick: J,
 								"data-testid": "grid-empty",
-								children: z(l.display?.placeholder) || z("file.grid.empty", "Drop files here or click to browse")
-							})
+								children: B(l.display?.placeholder) || B("file.grid.empty", "Drop files here or click to browse")
+							}))
 						]
 					})
 				})
 			}),
-			!$ && /* @__PURE__ */ x("input", {
+			!$ && /* @__PURE__ */ S("input", {
 				ref: q,
 				type: "file",
-				accept: oe,
+				accept: se,
 				multiple: !0,
-				onChange: de,
+				onChange: fe,
 				style: { display: "none" },
-				"data-testid": `file-input-${u}`
+				"data-testid": `file-input-${d}`
 			}),
-			Y && /* @__PURE__ */ x(ae, {
+			Y && /* @__PURE__ */ S(ae, {
 				file: Y,
-				hasPrev: P > 0,
-				hasNext: P < k.length - 1,
+				hasPrev: F > 0,
+				hasNext: F < k.length - 1,
 				onPrev: Z,
 				onNext: X,
 				onClose: Q
@@ -256,63 +257,63 @@ function j(i) {
 		]
 	});
 }
-function re({ file: e, selected: n, disabled: r, reorderable: i, preferredThumbnail: a, onSelect: o, onRemove: s, onPreview: c }) {
-	let { attributes: l, listeners: u, setNodeRef: f, transform: m, transition: h, isDragging: g } = O({
+function j({ file: e, selected: n, disabled: r, reorderable: i, preferredThumbnail: a, onSelect: o, onRemove: s, onPreview: c }) {
+	let { attributes: l, listeners: u, setNodeRef: p, transform: h, transition: g, isDragging: _ } = O({
 		id: e.id,
 		disabled: !i
-	}), _ = t(), v = {
-		transform: k.Transform.toString(m),
-		transition: h,
-		opacity: g ? .5 : 1
-	}, y = p(e.id, d(e, a), A(e, a));
-	return /* @__PURE__ */ S("div", {
-		ref: f,
-		style: v,
+	}), v = t(), y = {
+		transform: k.Transform.toString(h),
+		transition: g,
+		opacity: _ ? .5 : 1
+	}, b = d(e, a), w = m(b?.id, "preview", b && f(b));
+	return /* @__PURE__ */ C("div", {
+		ref: p,
+		style: y,
 		className: `group relative aspect-square overflow-hidden rounded-md border ${n ? "border-accent" : "border-border"} bg-surface-2`,
 		"data-testid": `grid-tile-${e.id}`,
 		"data-selected": n || void 0,
-		children: [y ? /* @__PURE__ */ x("img", {
-			src: y,
+		children: [w ? /* @__PURE__ */ S("img", {
+			src: w,
 			alt: e.filename,
 			className: "h-full w-full cursor-pointer object-cover",
 			loading: "lazy",
 			onClick: c
-		}) : /* @__PURE__ */ x("div", {
+		}) : /* @__PURE__ */ S("div", {
 			className: "flex h-full w-full cursor-pointer items-center justify-center bg-surface-3 text-xs text-muted-foreground",
 			onClick: c,
 			children: e.filename
-		}), !r && /* @__PURE__ */ S(b, { children: [
-			/* @__PURE__ */ x("input", {
+		}), !r && /* @__PURE__ */ C(x, { children: [
+			/* @__PURE__ */ S("input", {
 				type: "checkbox",
 				className: "absolute left-1 top-1 h-4 w-4 cursor-pointer",
 				checked: n,
 				onChange: o,
-				"aria-label": _("file.grid.select", "Select {filename}", { filename: e.filename }),
+				"aria-label": v("file.grid.select", "Select {filename}", { filename: e.filename }),
 				"data-testid": `select-${e.id}`,
 				onClick: (e) => e.stopPropagation()
 			}),
-			i && /* @__PURE__ */ x("button", {
+			i && /* @__PURE__ */ S("button", {
 				type: "button",
 				className: "absolute right-1 top-1 cursor-grab rounded-sm border border-border bg-card px-1 text-xs",
-				"aria-label": _("file.grid.reorder", "Drag to reorder {filename}", { filename: e.filename }),
+				"aria-label": v("file.grid.reorder", "Drag to reorder {filename}", { filename: e.filename }),
 				"data-testid": `drag-${e.id}`,
 				...l,
 				...u,
 				children: "⋮⋮"
 			}),
-			/* @__PURE__ */ S("div", {
+			/* @__PURE__ */ C("div", {
 				className: "absolute inset-x-0 bottom-0 flex items-center justify-end gap-1 bg-black/50 p-1 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100",
-				children: [/* @__PURE__ */ x("button", {
+				children: [/* @__PURE__ */ S("button", {
 					type: "button",
 					className: "rounded-sm border border-border bg-card px-2 py-0.5 text-xs",
 					onClick: c,
-					children: _("file.view", "View")
-				}), /* @__PURE__ */ x("button", {
+					children: v("file.view", "View")
+				}), /* @__PURE__ */ S("button", {
 					type: "button",
 					className: "rounded-sm border border-border bg-card px-2 py-0.5 text-xs text-destructive",
 					onClick: s,
 					"data-testid": `remove-${e.id}`,
-					children: _("file.delete", "Delete")
+					children: v("file.delete", "Delete")
 				})]
 			})
 		] })]
@@ -320,16 +321,16 @@ function re({ file: e, selected: n, disabled: r, reorderable: i, preferredThumbn
 }
 function ie({ tile: e, onCancel: n, onDismiss: r }) {
 	let i = t();
-	return /* @__PURE__ */ S("div", {
+	return /* @__PURE__ */ C("div", {
 		className: `relative flex aspect-square flex-col items-center justify-center rounded-md border ${e.error ? "border-destructive" : "border-border"} bg-surface-2 p-2 text-center text-xs`,
 		"data-testid": `pending-tile-${e.localId}`,
 		children: [
-			/* @__PURE__ */ x("span", {
+			/* @__PURE__ */ S("span", {
 				className: "truncate",
 				title: e.filename,
 				children: e.filename
 			}),
-			e.progress && !e.error && /* @__PURE__ */ S("span", {
+			e.progress && !e.error && /* @__PURE__ */ C("span", {
 				className: "mt-1 text-muted-foreground",
 				role: "progressbar",
 				"aria-valuenow": e.progress.pct,
@@ -337,12 +338,12 @@ function ie({ tile: e, onCancel: n, onDismiss: r }) {
 				"aria-valuemax": 100,
 				children: [e.progress.pct, "%"]
 			}),
-			e.error && /* @__PURE__ */ x("div", {
+			e.error && /* @__PURE__ */ S("div", {
 				role: "alert",
 				className: "mt-1 text-destructive",
-				children: /* @__PURE__ */ x(l, { failure: e.error })
+				children: /* @__PURE__ */ S(l, { failure: e.error })
 			}),
-			/* @__PURE__ */ x("button", {
+			/* @__PURE__ */ S("button", {
 				type: "button",
 				className: "mt-1 rounded-sm border border-border bg-card px-2 py-0.5",
 				onClick: e.error ? r : n,
@@ -352,8 +353,8 @@ function ie({ tile: e, onCancel: n, onDismiss: r }) {
 	});
 }
 function ae({ file: e, hasPrev: n, hasNext: r, onPrev: a, onNext: o, onClose: s }) {
-	let c = t(), l = p(e.id, "preview", e.presigned_url ?? e.url ?? A(e));
-	return /* @__PURE__ */ S("div", {
+	let c = t(), l = m(e.id, "preview", f(e));
+	return /* @__PURE__ */ C("div", {
 		className: "fixed inset-0 z-50 flex items-center justify-center bg-black/80",
 		role: "dialog",
 		"aria-modal": "true",
@@ -361,7 +362,7 @@ function ae({ file: e, hasPrev: n, hasNext: r, onPrev: a, onNext: o, onClose: s
 		"data-testid": "lightbox",
 		onClick: s,
 		children: [
-			/* @__PURE__ */ x("button", {
+			/* @__PURE__ */ S("button", {
 				type: "button",
 				className: "absolute right-4 top-4 rounded-sm border border-border bg-card px-3 py-1 text-foreground",
 				onClick: (e) => {
@@ -370,7 +371,7 @@ function ae({ file: e, hasPrev: n, hasNext: r, onPrev: a, onNext: o, onClose: s
 				"data-testid": "lightbox-close",
 				children: c("file.lightbox.close", "Close")
 			}),
-			n && /* @__PURE__ */ x("button", {
+			n && /* @__PURE__ */ S("button", {
 				type: "button",
 				className: "absolute left-4 rounded-sm border border-border bg-card px-3 py-2 text-foreground",
 				onClick: (e) => {
@@ -379,7 +380,7 @@ function ae({ file: e, hasPrev: n, hasNext: r, onPrev: a, onNext: o, onClose: s
 				"data-testid": "lightbox-prev",
 				children: "‹"
 			}),
-			r && /* @__PURE__ */ x("button", {
+			r && /* @__PURE__ */ S("button", {
 				type: "button",
 				className: "absolute right-4 bottom-4 rounded-sm border border-border bg-card px-3 py-2 text-foreground",
 				onClick: (e) => {
@@ -388,12 +389,12 @@ function ae({ file: e, hasPrev: n, hasNext: r, onPrev: a, onNext: o, onClose: s
 				"data-testid": "lightbox-next",
 				children: "›"
 			}),
-			l ? /* @__PURE__ */ x("img", {
+			l ? /* @__PURE__ */ S("img", {
 				src: l,
 				alt: e.filename,
 				className: "max-h-[90vh] max-w-[90vw] object-contain",
 				onClick: (e) => e.stopPropagation()
-			}) : /* @__PURE__ */ S("div", {
+			}) : /* @__PURE__ */ C("div", {
 				className: "rounded-md bg-card p-4 text-foreground",
 				children: [
 					e.filename,
@@ -406,4 +407,4 @@ function ae({ file: e, hasPrev: n, hasNext: r, onPrev: a, onNext: o, onClose: s
 	});
 }
 //#endregion
-export { j as Grid };
+export { A as Grid };