@questpie/admin 2.0.0 → 3.0.0

package/dist/client/components/fields/upload-field.mjs

@@ -1,23 +1,26 @@
 import { useResolveText, useTranslation } from "../../i18n/hooks.mjs";
+import { cn } from "../../lib/utils.mjs";
 import { selectClient, useAdminStore } from "../../runtime/provider.mjs";
 import { Button } from "../ui/button.mjs";
 import { sanitizeFilename, useResolvedControl } from "./field-utils.mjs";
+import { FieldWrapper } from "./field-wrapper.mjs";
 import { useCollectionItem } from "../../hooks/use-collection.mjs";
+import { ResourceSheet } from "../sheets/resource-sheet.mjs";
 import { useUploadCollection } from "../../hooks/use-upload-collection.mjs";
 import { useUpload } from "../../hooks/use-upload.mjs";
-import { ResourceSheet } from "../sheets/resource-sheet.mjs";
-import { FieldWrapper } from "./field-wrapper.mjs";
 import { AssetPreview } from "../primitives/asset-preview.mjs";
 import { MediaPickerDialog } from "../media/media-picker-dialog.mjs";
 import { Dropzone } from "../primitives/dropzone.mjs";
+import { c } from "react/compiler-runtime";
 import { Icon } from "@iconify/react";
-import * as React$1 from "react";
-import { Controller } from "react-hook-form";
-import { toast } from "sonner";
+import * as React from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Controller } from "react-hook-form";
 import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
 import { SortableContext, arrayMove, rectSortingStrategy, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
+import { toast } from "sonner";
 
 //#region src/client/components/fields/upload-field.tsx
 /**
@@ -58,59 +61,127 @@ function normalizeAccept(accept) {
 	if (Array.isArray(accept)) return accept;
 	return [accept];
 }
-function SortableAssetItem({ id, asset, loading, progress, disabled, variant, orderable, editable, href, onRemove, onEdit }) {
-	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
-	return /* @__PURE__ */ jsx("div", {
-		ref: setNodeRef,
-		style: {
-			transform: CSS.Transform.toString(transform),
+function SortableAssetItem(t0) {
+	const $ = c(30);
+	const { id, asset, loading, progress, disabled, variant, orderable, editable, href, onRemove, onEdit } = t0;
+	let t1;
+	if ($[0] !== id) {
+		t1 = { id };
+		$[0] = id;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable(t1);
+	let t2;
+	if ($[2] !== transform) {
+		t2 = CSS.Transform.toString(transform);
+		$[2] = transform;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t2 || $[5] !== transition) {
+		t3 = {
+			transform: t2,
 			transition
-		},
-		className: isDragging ? "opacity-50" : "",
-		children: /* @__PURE__ */ jsx(AssetPreview, {
-			asset: asset || { id },
+		};
+		$[4] = t2;
+		$[5] = transition;
+		$[6] = t3;
+	} else t3 = $[6];
+	const style = t3;
+	const t4 = isDragging ? "opacity-50" : "";
+	let t5;
+	if ($[7] !== asset || $[8] !== id) {
+		t5 = asset || { id };
+		$[7] = asset;
+		$[8] = id;
+		$[9] = t5;
+	} else t5 = $[9];
+	const t6 = orderable && !disabled;
+	let t7;
+	if ($[10] !== attributes || $[11] !== listeners || $[12] !== orderable) {
+		t7 = orderable ? {
+			...attributes,
+			...listeners
+		} : void 0;
+		$[10] = attributes;
+		$[11] = listeners;
+		$[12] = orderable;
+		$[13] = t7;
+	} else t7 = $[13];
+	const t8 = disabled ? void 0 : onRemove;
+	const t9 = editable && !disabled ? onEdit : void 0;
+	let t10;
+	if ($[14] !== disabled || $[15] !== href || $[16] !== loading || $[17] !== progress || $[18] !== t5 || $[19] !== t6 || $[20] !== t7 || $[21] !== t8 || $[22] !== t9 || $[23] !== variant) {
+		t10 = /* @__PURE__ */ jsx(AssetPreview, {
+			asset: t5,
 			loading,
 			progress,
 			disabled,
 			variant,
-			showDragHandle: orderable && !disabled,
-			dragHandleProps: orderable ? {
-				...attributes,
-				...listeners
-			} : void 0,
+			showDragHandle: t6,
+			dragHandleProps: t7,
 			href,
-			onRemove: disabled ? void 0 : onRemove,
-			onEdit: editable && !disabled ? onEdit : void 0
-		})
-	});
+			onRemove: t8,
+			onEdit: t9
+		});
+		$[14] = disabled;
+		$[15] = href;
+		$[16] = loading;
+		$[17] = progress;
+		$[18] = t5;
+		$[19] = t6;
+		$[20] = t7;
+		$[21] = t8;
+		$[22] = t9;
+		$[23] = variant;
+		$[24] = t10;
+	} else t10 = $[24];
+	let t11;
+	if ($[25] !== setNodeRef || $[26] !== style || $[27] !== t10 || $[28] !== t4) {
+		t11 = /* @__PURE__ */ jsx("div", {
+			ref: setNodeRef,
+			style,
+			className: t4,
+			children: t10
+		});
+		$[25] = setNodeRef;
+		$[26] = style;
+		$[27] = t10;
+		$[28] = t4;
+		$[29] = t11;
+	} else t11 = $[29];
+	return t11;
 }
 function SingleUploadInner({ field, error, collection, unresolvedCollectionMessage, accept, maxSize, showPreview, editable, previewVariant, disabled, placeholder, onUploadStart, onUploadComplete, onUploadError, className }) {
+	"use no memo";
 	const normalizedAccept = normalizeAccept(accept);
 	const { t } = useTranslation();
 	const resolveText = useResolveText();
 	const resolvedPlaceholder = placeholder ? resolveText(placeholder) : void 0;
 	const { upload, isUploading, progress, error: uploadError } = useUpload();
-	const [isPickerOpen, setIsPickerOpen] = React$1.useState(false);
-	const [isEditSheetOpen, setIsEditSheetOpen] = React$1.useState(false);
+	const [isPickerOpen, setIsPickerOpen] = React.useState(false);
+	const [isEditSheetOpen, setIsEditSheetOpen] = React.useState(false);
 	const assetId = field.value;
 	const { data: asset, isLoading: isLoadingAsset } = useCollectionItem(collection, assetId || "", void 0, { enabled: !!collection && !!assetId && showPreview });
 	const handleDrop = async (files) => {
 		if (files.length === 0 || disabled) return;
 		if (!collection) {
-			toast.error(unresolvedCollectionMessage || "No upload collection is configured.");
+			toast.error(unresolvedCollectionMessage || t("error.noUploadCollection"));
 			return;
 		}
 		const originalFile = files[0];
 		const sanitizedName = sanitizeFilename(originalFile.name);
 		const file = new File([originalFile], sanitizedName, { type: originalFile.type });
 		try {
-			onUploadStart?.();
+			if (onUploadStart) onUploadStart();
 			const uploadedAsset = await upload(file, { to: collection });
 			field.onChange(uploadedAsset.id);
-			onUploadComplete?.(uploadedAsset);
+			if (onUploadComplete) onUploadComplete(uploadedAsset);
 		} catch (err) {
-			const uploadErr = err instanceof Error ? err : new Error(t("upload.error"));
-			onUploadError?.(uploadErr);
+			let uploadErr;
+			if (err instanceof Error) uploadErr = err;
+			else uploadErr = new Error(t("upload.error"));
+			if (onUploadError) onUploadError(uploadErr);
 			toast.error(uploadErr.message);
 		}
 	};
@@ -123,15 +194,15 @@ function SingleUploadInner({ field, error, collection, unresolvedCollectionMessa
 	const handleValidationError = (errors) => {
 		for (const validationError of errors) toast.error(validationError.message);
 	};
-	const hintText = React$1.useMemo(() => {
+	const hintText = React.useMemo(() => {
 		const parts = [];
 		if (normalizedAccept?.length) {
-			const types = normalizedAccept.map((t$1) => {
-				if (t$1.startsWith("image/")) return "Images";
-				if (t$1.startsWith("video/")) return "Videos";
-				if (t$1.startsWith("audio/")) return "Audio";
-				if (t$1 === "application/pdf") return "PDF";
-				return t$1;
+			const types = normalizedAccept.map((t_0) => {
+				if (t_0.startsWith("image/")) return "Images";
+				if (t_0.startsWith("video/")) return "Videos";
+				if (t_0.startsWith("audio/")) return "Audio";
+				if (t_0 === "application/pdf") return "PDF";
+				return t_0;
 			}).filter((v, i, a) => a.indexOf(v) === i);
 			parts.push(types.join(", "));
 		}
@@ -150,7 +221,7 @@ function SingleUploadInner({ field, error, collection, unresolvedCollectionMessa
 		className,
 		children: [
 			unresolvedCollectionMessage && /* @__PURE__ */ jsx("p", {
-				className: "mb-2 rounded-md border border-warning/40 bg-warning/5 px-3 py-2 text-xs text-warning",
+				className: "border-warning/40 bg-warning/5 text-warning mb-2 border px-3 py-2 text-xs",
 				children: unresolvedCollectionMessage
 			}),
 			hasValue && showPreview && asset ? /* @__PURE__ */ jsx(AssetPreview, {
@@ -174,7 +245,7 @@ function SingleUploadInner({ field, error, collection, unresolvedCollectionMessa
 				disabled,
 				loading: isUploading,
 				progress: isUploading ? progress : void 0,
-				label: resolvedPlaceholder || "Drop file here or click to browse",
+				label: resolvedPlaceholder || t("dropzone.label"),
 				hint: hintText,
 				onValidationError: handleValidationError
 			}),
@@ -212,50 +283,45 @@ function SingleUploadInner({ field, error, collection, unresolvedCollectionMessa
 	});
 }
 function MultipleUploadInner({ field, collection, unresolvedCollectionMessage, accept, maxSize, maxItems, orderable, layout, editable, disabled, placeholder, onUploadStart, onUploadComplete, onUploadError, className }) {
+	"use no memo";
 	const normalizedAccept = normalizeAccept(accept);
 	const { t } = useTranslation();
 	const resolveText = useResolveText();
 	const resolvedPlaceholder = placeholder ? resolveText(placeholder) : void 0;
 	const { uploadMany, isUploading, progress } = useUpload();
 	const client = useAdminStore(selectClient);
-	const [isPickerOpen, setIsPickerOpen] = React$1.useState(false);
-	const [editAssetId, setEditAssetId] = React$1.useState(null);
-	const [pendingUploads, setPendingUploads] = React$1.useState([]);
-	const [fetchedAssets, setFetchedAssets] = React$1.useState(() => /* @__PURE__ */ new Map());
+	const [isPickerOpen, setIsPickerOpen] = React.useState(false);
+	const [editAssetId, setEditAssetId] = React.useState(null);
+	const [pendingUploads, setPendingUploads] = React.useState([]);
+	const queryClient = useQueryClient();
 	const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
 	const assetIds = field.value || [];
-	React$1.useEffect(() => {
-		if (!client || !collection || assetIds.length === 0) return;
-		const missingIds = assetIds.filter((id) => !fetchedAssets.has(id));
-		if (missingIds.length === 0) return;
-		let cancelled = false;
-		(async () => {
-			for (const id of missingIds) {
-				if (cancelled) return;
-				try {
-					const response = await client.collections[collection].findOne({ where: { id } });
-					if (!cancelled && response) setFetchedAssets((prev) => new Map(prev).set(id, response));
-				} catch (fetchError) {
-					if (!cancelled) {
-						console.error("Failed to fetch asset:", fetchError);
-						toast.error("Failed to load asset");
-					}
-				}
-			}
-		})();
-		return () => {
-			cancelled = true;
-		};
-	}, [
-		assetIds,
-		collection,
-		fetchedAssets,
-		client
-	]);
-	const handleDrop = async (files) => {
+	const { data: fetchedAssetsMap = /* @__PURE__ */ new Map() } = useQuery({
+		queryKey: [
+			"questpie",
+			"collections",
+			collection,
+			"batch-assets",
+			...assetIds
+		],
+		queryFn: async () => {
+			if (!client || !collection || assetIds.length === 0) return /* @__PURE__ */ new Map();
+			const response = await client.collections[collection].find({
+				where: { id: { in: assetIds } },
+				limit: assetIds.length
+			});
+			const map = /* @__PURE__ */ new Map();
+			if (response?.docs) for (const doc of response.docs) map.set(doc.id, doc);
+			return map;
+		},
+		enabled: !!client && !!collection && assetIds.length > 0,
+		staleTime: 3e4,
+		placeholderData: (prev) => prev
+	});
+	const handleDrop = (files) => {
 		if (files.length === 0 || disabled) return;
 		if (!collection) {
-			toast.error(unresolvedCollectionMessage || "No upload collection is configured.");
+			toast.error(unresolvedCollectionMessage || t("error.noUploadCollection"));
 			return;
 		}
 		const remainingSlots = maxItems ? maxItems - assetIds.length : files.length;
@@ -269,30 +335,36 @@ function MultipleUploadInner({ field, collection, unresolvedCollectionMessage, a
 			const sanitizedName = sanitizeFilename(file.name);
 			return new File([file], sanitizedName, { type: file.type });
 		});
-		setPendingUploads(sanitizedFiles.map((file, index) => ({
+		setPendingUploads(sanitizedFiles.map((file_0, index) => ({
 			id: `pending-${Date.now()}-${index}`,
-			file
+			file: file_0
 		})));
-		try {
-			onUploadStart?.();
-			const uploadedAssets = await uploadMany(sanitizedFiles, { to: collection });
+		if (onUploadStart) onUploadStart();
+		uploadMany(sanitizedFiles, { to: collection }).then((uploadedAssets) => {
 			const newIds = uploadedAssets.map((a) => a.id);
 			field.onChange([...assetIds, ...newIds]);
-			for (const asset of uploadedAssets) setFetchedAssets((prev) => new Map(prev).set(asset.id, asset));
-			onUploadComplete?.(uploadedAssets);
-		} catch (err) {
-			const uploadError = err instanceof Error ? err : new Error(t("upload.error"));
-			onUploadError?.(uploadError);
+			queryClient.invalidateQueries({ queryKey: [
+				"questpie",
+				"collections",
+				collection,
+				"batch-assets"
+			] });
+			if (onUploadComplete) onUploadComplete(uploadedAssets);
+			setPendingUploads([]);
+		}, (err) => {
+			let uploadError;
+			if (err instanceof Error) uploadError = err;
+			else uploadError = new Error(t("upload.error"));
+			if (onUploadError) onUploadError(uploadError);
 			toast.error(uploadError.message);
-		} finally {
 			setPendingUploads([]);
-		}
+		});
 	};
 	const handleRemove = (idToRemove) => {
 		field.onChange(assetIds.filter((id) => id !== idToRemove));
 	};
-	const handleEdit = (id) => {
-		setEditAssetId(id);
+	const handleEdit = (id_0) => {
+		setEditAssetId(id_0);
 	};
 	const handleDragEnd = (event) => {
 		const { active, over } = event;
@@ -310,28 +382,28 @@ function MultipleUploadInner({ field, collection, unresolvedCollectionMessage, a
 	};
 	const handlePickerSelect = (ids) => {
 		if (!collection) {
-			toast.error(unresolvedCollectionMessage || "No upload collection is configured.");
+			toast.error(unresolvedCollectionMessage || t("error.noUploadCollection"));
 			return;
 		}
-		const newIds = Array.isArray(ids) ? ids : [ids];
-		const totalAfterAdd = assetIds.length + newIds.length;
+		const newIds_0 = Array.isArray(ids) ? ids : [ids];
+		const totalAfterAdd = assetIds.length + newIds_0.length;
 		if (maxItems && totalAfterAdd > maxItems) {
-			toast.warning(`Maximum ${maxItems} items allowed`);
-			const remainingSlots = maxItems - assetIds.length;
-			const idsToAdd = newIds.slice(0, remainingSlots);
+			toast.warning(t("error.maxItemsAllowed", { max: maxItems }));
+			const remainingSlots_0 = maxItems - assetIds.length;
+			const idsToAdd = newIds_0.slice(0, remainingSlots_0);
 			field.onChange([...assetIds, ...idsToAdd]);
-		} else field.onChange([...assetIds, ...newIds]);
+		} else field.onChange([...assetIds, ...newIds_0]);
 	};
-	const hintText = React$1.useMemo(() => {
+	const hintText = React.useMemo(() => {
 		const parts = [];
 		if (normalizedAccept?.length) {
-			const types = normalizedAccept.map((t$1) => {
-				if (t$1.startsWith("image/")) return "Images";
-				if (t$1.startsWith("video/")) return "Videos";
-				if (t$1.startsWith("audio/")) return "Audio";
-				if (t$1 === "application/pdf") return "PDF";
-				return t$1;
-			}).filter((v, i, a) => a.indexOf(v) === i);
+			const types = normalizedAccept.map((t_0) => {
+				if (t_0.startsWith("image/")) return "Images";
+				if (t_0.startsWith("video/")) return "Videos";
+				if (t_0.startsWith("audio/")) return "Audio";
+				if (t_0 === "application/pdf") return "PDF";
+				return t_0;
+			}).filter((v, i, a_0) => a_0.indexOf(v) === i);
 			parts.push(types.join(", "));
 		}
 		if (maxSize) {
@@ -347,7 +419,7 @@ function MultipleUploadInner({ field, collection, unresolvedCollectionMessage, a
 		className,
 		children: [
 			unresolvedCollectionMessage && /* @__PURE__ */ jsx("p", {
-				className: "mb-2 rounded-md border border-warning/40 bg-warning/5 px-3 py-2 text-xs text-warning",
+				className: "border-warning/40 bg-warning/5 text-warning mb-2 border px-3 py-2 text-xs",
 				children: unresolvedCollectionMessage
 			}),
 			hasItems && /* @__PURE__ */ jsx(DndContext, {
@@ -360,23 +432,23 @@ function MultipleUploadInner({ field, collection, unresolvedCollectionMessage, a
 					disabled: !orderable,
 					children: /* @__PURE__ */ jsxs("div", {
 						className: layout === "grid" ? "mb-3 grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4" : "mb-3 space-y-2",
-						children: [assetIds.map((id) => /* @__PURE__ */ jsx(SortableAssetItem, {
-							id,
-							asset: fetchedAssets.get(id) || null,
+						children: [assetIds.map((id_1) => /* @__PURE__ */ jsx(SortableAssetItem, {
+							id: id_1,
+							asset: fetchedAssetsMap.get(id_1) || null,
 							disabled,
 							variant: previewVariant,
 							orderable,
 							editable,
-							onRemove: () => handleRemove(id),
-							onEdit: () => handleEdit(id)
-						}, id)), pendingUploads.map((pending, index) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AssetPreview, {
-							asset: { filename: pending.file.name },
-							pendingFile: pending.file,
+							onRemove: () => handleRemove(id_1),
+							onEdit: () => handleEdit(id_1)
+						}, id_1)), pendingUploads.map((pending_0, index_0) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AssetPreview, {
+							asset: { filename: pending_0.file.name },
+							pendingFile: pending_0.file,
 							loading: true,
-							progress: Math.min(100, Math.max(0, progress - index / pendingUploads.length * 100) * (pendingUploads.length / (pendingUploads.length - index))),
+							progress: Math.min(100, Math.max(0, progress - index_0 / pendingUploads.length * 100) * (pendingUploads.length / (pendingUploads.length - index_0))),
 							disabled: true,
 							variant: previewVariant
-						}) }, pending.id))]
+						}) }, pending_0.id))]
 					})
 				})
 			}),
@@ -388,7 +460,7 @@ function MultipleUploadInner({ field, collection, unresolvedCollectionMessage, a
 				disabled,
 				loading: isUploading,
 				progress: isUploading ? progress : void 0,
-				label: hasItems ? "Drop more files or click to add" : resolvedPlaceholder || "Drop files here or click to browse",
+				label: hasItems ? t("dropzone.addMore") : resolvedPlaceholder || t("dropzone.label"),
 				hint: hintText,
 				onValidationError: handleValidationError,
 				className: hasItems ? "min-h-[80px]" : void 0
@@ -421,9 +493,10 @@ function MultipleUploadInner({ field, collection, unresolvedCollectionMessage, a
 				onOpenChange: (open) => !open && setEditAssetId(null)
 			}),
 			isUploading && !canAddMore && /* @__PURE__ */ jsxs("div", {
-				className: "text-muted-foreground flex items-center justify-center gap-2 rounded-lg border border-dashed p-4 text-sm",
+				className: "text-muted-foreground flex items-center justify-center gap-2 border border-dashed p-4 text-sm",
 				children: [
-					"Uploading... ",
+					t("upload.uploading"),
+					" ",
 					progress,
 					"%"
 				]
@@ -431,18 +504,32 @@ function MultipleUploadInner({ field, collection, unresolvedCollectionMessage, a
 		]
 	});
 }
-function UploadField({ name, label, description, placeholder, required, disabled, localized, locale, control, className, to, accept, maxSize, showPreview = true, editable = true, previewVariant, onUploadStart, onUploadComplete, onUploadError, multiple = false, maxItems, orderable = false, layout = "grid" }) {
+function UploadField(t0) {
+	const $ = c(32);
+	const { name, label, description, placeholder, required, disabled, localized, locale, control, className, to, accept, maxSize, showPreview: t1, editable: t2, previewVariant, onUploadStart, onUploadComplete, onUploadError, multiple: t3, maxItems, orderable: t4, layout: t5 } = t0;
+	const showPreview = t1 === void 0 ? true : t1;
+	const editable = t2 === void 0 ? true : t2;
+	const multiple = t3 === void 0 ? false : t3;
+	const orderable = t4 === void 0 ? false : t4;
+	const layout = t5 === void 0 ? "grid" : t5;
 	const resolveText = useResolveText();
 	const resolvedControl = useResolvedControl(control);
 	const { collection: resolvedUploadCollection, collections: availableUploadCollections } = useUploadCollection(to);
 	const collection = resolvedUploadCollection || "";
-	const unresolvedCollectionMessage = !resolvedUploadCollection ? availableUploadCollections.length > 1 ? `Multiple upload collections are available (${availableUploadCollections.join(", ")}). Configure the field with \`to\` to choose one.` : "No upload collection is configured for this field." : void 0;
+	let t6;
+	if ($[0] !== availableUploadCollections || $[1] !== resolvedUploadCollection) {
+		t6 = !resolvedUploadCollection ? availableUploadCollections.length > 1 ? `Multiple upload collections are available (${availableUploadCollections.join(", ")}). Configure the field with \`to\` to choose one.` : "No upload collection is configured for this field." : void 0;
+		$[0] = availableUploadCollections;
+		$[1] = resolvedUploadCollection;
+		$[2] = t6;
+	} else t6 = $[2];
+	const unresolvedCollectionMessage = t6;
 	const fieldDisabled = disabled || !!unresolvedCollectionMessage;
 	const effectivePreviewVariant = previewVariant ?? (multiple ? layout === "grid" ? "thumbnail" : "compact" : "card");
-	return /* @__PURE__ */ jsx(Controller, {
-		name,
-		control: resolvedControl,
-		render: ({ field, fieldState }) => {
+	let t7;
+	if ($[3] !== accept || $[4] !== className || $[5] !== collection || $[6] !== description || $[7] !== editable || $[8] !== effectivePreviewVariant || $[9] !== fieldDisabled || $[10] !== label || $[11] !== layout || $[12] !== locale || $[13] !== localized || $[14] !== maxItems || $[15] !== maxSize || $[16] !== multiple || $[17] !== name || $[18] !== onUploadComplete || $[19] !== onUploadError || $[20] !== onUploadStart || $[21] !== orderable || $[22] !== placeholder || $[23] !== required || $[24] !== resolveText || $[25] !== showPreview || $[26] !== unresolvedCollectionMessage) {
+		t7 = (t8$1) => {
+			const { field, fieldState } = t8$1;
 			const assetIds = multiple ? field.value || [] : [];
 			return /* @__PURE__ */ jsx(FieldWrapper, {
 				name,
@@ -469,7 +556,7 @@ function UploadField({ name, label, description, placeholder, required, disabled
 					onUploadStart,
 					onUploadComplete,
 					onUploadError,
-					className
+					className: cn("qa-upload-field", className)
 				}) : /* @__PURE__ */ jsx(SingleUploadInner, {
 					field,
 					error: fieldState.error?.message,
@@ -485,13 +572,50 @@ function UploadField({ name, label, description, placeholder, required, disabled
 					onUploadStart,
 					onUploadComplete,
 					onUploadError,
-					className
+					className: cn("qa-upload-field", className)
 				})
 			});
-		}
-	});
+		};
+		$[3] = accept;
+		$[4] = className;
+		$[5] = collection;
+		$[6] = description;
+		$[7] = editable;
+		$[8] = effectivePreviewVariant;
+		$[9] = fieldDisabled;
+		$[10] = label;
+		$[11] = layout;
+		$[12] = locale;
+		$[13] = localized;
+		$[14] = maxItems;
+		$[15] = maxSize;
+		$[16] = multiple;
+		$[17] = name;
+		$[18] = onUploadComplete;
+		$[19] = onUploadError;
+		$[20] = onUploadStart;
+		$[21] = orderable;
+		$[22] = placeholder;
+		$[23] = required;
+		$[24] = resolveText;
+		$[25] = showPreview;
+		$[26] = unresolvedCollectionMessage;
+		$[27] = t7;
+	} else t7 = $[27];
+	let t8;
+	if ($[28] !== name || $[29] !== resolvedControl || $[30] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Controller, {
+			name,
+			control: resolvedControl,
+			render: t7
+		});
+		$[28] = name;
+		$[29] = resolvedControl;
+		$[30] = t7;
+		$[31] = t8;
+	} else t8 = $[31];
+	return t8;
 }
 
 //#endregion
-export { UploadField };
-//# sourceMappingURL=upload-field.mjs.map
+export { UploadField };