themelia-ui 3.0.0 → 3.2.0

package/dist/upload-CYuoJykZ.js

@@ -0,0 +1,968 @@
+import "#core.css";
+import { s as e } from "./typography-DmeR05Er.js";
+import { t } from "./cx--CBrhWH0.js";
+import { c as n } from "./buttons-BX2JfL5X.js";
+import { t as r } from "./strings-Co9_qArR.js";
+import { C as i, S as a } from "./primitives-BskKlf35.js";
+import { t as o } from "./badge-VlJVZjdm.js";
+import { h as s } from "./feedback-D4qVsKlD.js";
+import { d as c } from "./display-a7AoX_u7.js";
+import { CheckIcon as l, CircleAlertIcon as u, ClockIcon as d, FileIcon as f, ImageIcon as p, ImagePlusIcon as m, Loader2Icon as h, PaperclipIcon as g, PencilIcon as _, RotateCwIcon as v, TrashIcon as y, UploadCloudIcon as b, UserIcon as x, XIcon as S } from "lucide-react";
+import { useCallback as C, useEffect as w, useId as T, useMemo as E, useRef as D, useState as O } from "react";
+import { Fragment as k, jsx as A, jsxs as j } from "react/jsx-runtime";
+import "#css/upload.css";
+//#region src/hooks/use-object-urls.ts
+function M(e) {
+	let [t, n] = O([]), r = D([]), i = D([]);
+	return w(() => {
+		if (e.length === r.current.length && e.every((e, t) => e === r.current[t])) return;
+		r.current = e;
+		let t = i.current;
+		i.current = e.map((e) => URL.createObjectURL(e)), n(i.current);
+		for (let e of t) URL.revokeObjectURL(e);
+	}, [e]), w(() => () => {
+		for (let e of i.current) URL.revokeObjectURL(e);
+		i.current = [], r.current = [];
+	}, []), t;
+}
+//#endregion
+//#region src/components/base/upload/preview-image.tsx
+function N({ src: e, alt: n = "", fallback: r, className: i }) {
+	let [a, o] = O(!1), [s, c] = O(e);
+	return e !== s && (c(e), o(!1)), a ? /* @__PURE__ */ A(k, { children: r }) : /* @__PURE__ */ A("img", {
+		src: e,
+		alt: n,
+		className: t("preview-image--component", i),
+		onError: () => o(!0)
+	});
+}
+//#endregion
+//#region src/components/base/upload/file-upload.strings.ts
+var P = {
+	instruction: "Drop a file here, or browse",
+	instructionMultiple: "Drop files here, or browse",
+	uploading: (e) => `Uploading ${e}`,
+	remove: (e) => `Remove ${e}`,
+	rejection: ({ file: e, code: t, details: n }) => {
+		switch (t) {
+			case "invalid-type": return `${e.name} is not an accepted file type.`;
+			case "too-small": return `${e.name} is smaller than ${i(n.limitBytes ?? 0)}.`;
+			case "too-large": return `${e.name} is larger than ${i(n.limitBytes ?? 0)}.`;
+			case "duplicate": return `${e.name} has already been added.`;
+			case "too-many": return `${e.name} exceeds the limit of ${n.maxFiles ?? 0} file${n.maxFiles === 1 ? "" : "s"}.`;
+			default: return n.customMessage ?? `${e.name} was rejected.`;
+		}
+	},
+	constraintHint: ({ accept: e, maxSizeBytes: t }) => [e, t === void 0 ? void 0 : `up to ${Math.round(t / 1024 / 1024)} MB`].filter(Boolean).join(" · ")
+}, F = {
+	cover: "Cover",
+	add: "Add images",
+	position: (e, t, n) => `${e}, position ${t} of ${n}. Use the arrow keys to reorder.`,
+	remove: (e) => `Remove ${e}`
+}, I = {
+	empty: "Add a photo",
+	overlay: "Change photo",
+	remove: "Remove photo"
+}, L = {
+	empty: "Drop an image here, or browse",
+	overlay: "Change image",
+	remove: "Remove image"
+}, R = {
+	status: {
+		queued: "Queued",
+		uploading: "Uploading",
+		done: "Uploaded",
+		error: "Failed",
+		cancelled: "Cancelled"
+	},
+	cancel: (e) => `Cancel ${e}`,
+	retry: (e) => `Retry ${e}`,
+	remove: (e) => `Remove ${e}`,
+	uploading: (e) => `Uploading ${e}`,
+	settled: (e, t) => `${e}: ${t}`
+}, z = {
+	...P,
+	...R,
+	clearAll: "Clear all"
+}, B = {
+	instruction: "Drop a file here, or browse",
+	instructionMultiple: "Drop files here, or browse",
+	dragOver: "Release to add",
+	helper: ""
+}, V = {
+	empty: "No file chosen",
+	clear: "Remove file"
+};
+//#endregion
+//#region src/components/base/upload/use-file-drop-target.ts
+function H({ disabled: e = !1, onFiles: t }) {
+	let n = D(0), [r, i] = O(!1), a = r && !e, o = C((e) => {
+		e.preventDefault(), e.stopPropagation();
+	}, []);
+	return {
+		isDragging: a,
+		dropTargetProps: {
+			onDragEnter: C((t) => {
+				if (o(t), e) {
+					n.current = 0;
+					return;
+				}
+				n.current += 1, i(!0);
+			}, [e, o]),
+			onDragOver: C((t) => {
+				o(t), !e && (t.dataTransfer && (t.dataTransfer.dropEffect = "copy"), i(!0));
+			}, [e, o]),
+			onDragLeave: C((e) => {
+				o(e), n.current = Math.max(0, n.current - 1), n.current === 0 && i(!1);
+			}, [o]),
+			onDrop: C((r) => {
+				if (o(r), n.current = 0, i(!1), e) return;
+				let a = r.dataTransfer?.files;
+				a?.length && t(Array.from(a));
+			}, [
+				e,
+				t,
+				o
+			])
+		}
+	};
+}
+var U = {
+	dropzone: "upload__dropzone___18PHm",
+	dropzoneCompact: "upload__dropzoneCompact___lO1Y2",
+	dropzoneInput: "upload__dropzoneInput___OSLjX",
+	dropzoneIcon: "upload__dropzoneIcon___dEbuz",
+	dropzoneCopy: "upload__dropzoneCopy___FGRl_",
+	dropzoneHint: "upload__dropzoneHint____aACx",
+	list: "upload__list___54BTe",
+	row: "upload__row___6TE2T",
+	rowActions: "upload__rowActions___fgMkU",
+	thumb: "upload__thumb___I7oD7",
+	statusIcon: "upload__statusIcon___VRRk3",
+	rowBody: "upload__rowBody___51jrN",
+	rowName: "upload__rowName____3TMo",
+	progress: "upload__progress___sfhZY",
+	progressFill: "upload__progressFill___PXFlt",
+	root: "upload__root___TLif3",
+	rejections: "upload__rejections___VTeCm",
+	mediaRoot: "upload__mediaRoot___yS2ko",
+	mediaPicker: "upload__mediaPicker___eVcZk",
+	avatarPicker: "upload__avatarPicker___rAikO",
+	imagePicker: "upload__imagePicker___zDNWf",
+	mediaPreview: "upload__mediaPreview___BS0TO",
+	mediaOverlay: "upload__mediaOverlay___diadO",
+	mediaEmpty: "upload__mediaEmpty___5M65A",
+	tray: "upload__tray___u741N",
+	trayToolbar: "upload__trayToolbar___NmrU5",
+	trayCounts: "upload__trayCounts___hrAmS",
+	statusQueued: "upload__statusQueued___CMIPL",
+	statusUploading: "upload__statusUploading___ec2M2",
+	statusDone: "upload__statusDone___MW_Za",
+	statusError: "upload__statusError___kutx4",
+	statusCancelled: "upload__statusCancelled___JKMmC",
+	gallery: "upload__gallery___1UoHk",
+	tile: "upload__tile___8-XgU",
+	tileImage: "upload__tileImage___pT1Rk",
+	tileFallback: "upload__tileFallback___h-Jsc",
+	tileHandle: "upload__tileHandle___ulbFv",
+	tileRemove: "upload__tileRemove___JQHnl",
+	tileCover: "upload__tileCover___0TJt3",
+	galleryAdd: "upload__galleryAdd___CGqBt",
+	pickerShell: "upload__pickerShell___25oaj",
+	pickerIcon: "upload__pickerIcon___v0eFJ",
+	pickerLabel: "upload__pickerLabel___tY20Z",
+	pickerEmpty: "upload__pickerEmpty___Ql3p-",
+	pickerMeta: "upload__pickerMeta___0fZCN",
+	pickerClear: "upload__pickerClear___Rf83M",
+	dropzoneFooter: "upload__dropzoneFooter___q6ETS"
+};
+//#endregion
+//#region src/components/base/upload/dropzone.tsx
+function W({ onDrop: n, accept: r, multiple: i = !1, disabled: a = !1, invalid: o = !1, compact: s = !1, icon: c, inputProps: l, strings: u, label: d, hint: f, footer: p, className: m, ...h }) {
+	let g = {
+		...B,
+		...u
+	}, _ = T(), v = l?.id ?? _, y = `${_}-prompt`, { isDragging: x, dropTargetProps: S } = H({
+		disabled: a,
+		onFiles: n
+	}), C = x ? g.dragOver : d ?? (i ? g.instructionMultiple : g.instruction), w = f === void 0 ? g.helper : f, E = l?.["aria-labelledby"];
+	return /* @__PURE__ */ j("div", {
+		className: t("dropzone--component", m),
+		...h,
+		children: [/* @__PURE__ */ j("label", {
+			htmlFor: v,
+			...S,
+			"data-slot": "dropzone",
+			"data-dragging": x || void 0,
+			"data-disabled": a || void 0,
+			"data-invalid": o || void 0,
+			className: t(U.dropzone, s && U.dropzoneCompact),
+			children: [
+				/* @__PURE__ */ A("input", {
+					"aria-invalid": o || void 0,
+					...l,
+					"aria-labelledby": E ? `${E} ${y}` : void 0,
+					id: v,
+					type: "file",
+					accept: r,
+					multiple: i,
+					disabled: a,
+					className: t(U.dropzoneInput, l?.className),
+					onChange: (e) => {
+						let t = e.target.files;
+						t?.length && n(Array.from(t)), e.target.value = "";
+					}
+				}),
+				c ?? /* @__PURE__ */ A(b, {
+					"aria-hidden": !0,
+					className: U.dropzoneIcon
+				}),
+				/* @__PURE__ */ j("span", {
+					className: U.dropzoneCopy,
+					children: [/* @__PURE__ */ A(e, {
+						tag: "span",
+						id: y,
+						size: "sm",
+						children: C
+					}), w != null && w !== "" && /* @__PURE__ */ A(e, {
+						tag: "span",
+						size: "xs",
+						type: "secondary",
+						className: U.dropzoneHint,
+						children: w
+					})]
+				})
+			]
+		}), !!p && /* @__PURE__ */ A("div", {
+			className: U.dropzoneFooter,
+			children: p
+		})]
+	});
+}
+//#endregion
+//#region src/components/base/upload/validate-files.ts
+function G(e) {
+	return [
+		e.name,
+		e.size,
+		e.type,
+		e.lastModified
+	].join("|");
+}
+function K(e, t) {
+	if (!t?.trim()) return !0;
+	let n = e.name.toLowerCase(), r = e.type.toLowerCase();
+	return t.split(",").map((e) => e.trim().toLowerCase()).filter(Boolean).some((e) => e.startsWith(".") ? n.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r === e);
+}
+function q(e, t) {
+	let { accept: n, minSizeBytes: r, maxSizeBytes: i, validateFile: a } = t;
+	if (!K(e, n)) return {
+		file: e,
+		code: "invalid-type",
+		details: {}
+	};
+	if (r !== void 0 && e.size < r) return {
+		file: e,
+		code: "too-small",
+		details: { limitBytes: r }
+	};
+	if (i !== void 0 && e.size > i) return {
+		file: e,
+		code: "too-large",
+		details: { limitBytes: i }
+	};
+	if (a) {
+		let t;
+		try {
+			t = a(e);
+		} catch {
+			t = !1;
+		}
+		if (t !== !0) return {
+			file: e,
+			code: "custom",
+			details: { customMessage: typeof t == "string" ? t : void 0 }
+		};
+	}
+}
+function J({ incoming: e, current: t, maxFiles: n, append: r, ...i }) {
+	let a = r ? [...t] : [], o = new Set(a.map(G)), s = [], c = [];
+	for (let t of e) {
+		let e = q(t, i);
+		if (e) {
+			c.push(e);
+			continue;
+		}
+		let r = G(t);
+		if (o.has(r)) {
+			c.push({
+				file: t,
+				code: "duplicate",
+				details: {}
+			});
+			continue;
+		}
+		if (a.length >= n) {
+			c.push({
+				file: t,
+				code: "too-many",
+				details: { maxFiles: n }
+			});
+			continue;
+		}
+		s.push(t), a.push(t), o.add(r);
+	}
+	return {
+		accepted: s,
+		nextFiles: a,
+		rejections: c
+	};
+}
+//#endregion
+//#region src/components/base/upload/file-upload.tsx
+var ee = [];
+function Y({ id: e, value: r, defaultValue: i, onValueChange: o, onRejectedFiles: c, multiple: l = !1, maxFiles: u, selectionMode: d, disabled: f = !1, invalid: p = !1, compact: m = !1, label: h, strings: g, hint: _, showList: v = !0, showRejections: y = !0, progress: b, name: x, className: E, "aria-labelledby": k, "aria-describedby": M, "aria-invalid": N, "aria-required": F, ...I }) {
+	let L = {
+		...P,
+		...g
+	}, R = T(), z = e ?? R, B = D(null), V = r !== void 0, [H, G] = O(i ?? []), K = V ? r ?? ee : H, [q, Y] = O([]), X = u ?? (l ? Infinity : 1), Z = (d ?? (l ? "append" : "replace")) === "append", ne = C((e) => {
+		let t = J({
+			incoming: e,
+			current: K,
+			maxFiles: X,
+			append: Z,
+			...I
+		});
+		Y(t.rejections), t.rejections.length > 0 && c?.(t.rejections), (t.accepted.length > 0 || !Z) && (V || G(t.nextFiles), o?.(t.nextFiles)), B.current && (B.current.value = "");
+	}, [
+		Z,
+		I,
+		K,
+		V,
+		c,
+		o,
+		X
+	]), re = D(null), Q = D(null), ie = C((e) => {
+		let t = K.filter((t, n) => n !== e);
+		Q.current = e, V || G(t), o?.(t);
+	}, [
+		K,
+		V,
+		o
+	]);
+	w(() => {
+		if (Q.current === null) return;
+		let e = Q.current;
+		Q.current = null;
+		let t = re.current?.querySelectorAll("[data-remove]") ?? [], n = t[Math.min(e, t.length - 1)];
+		n ? n.focus() : B.current?.focus();
+	}, [K]);
+	let $ = N ?? (p || void 0), ae = _ === void 0 ? L.constraintHint?.({
+		accept: I.accept,
+		maxSizeBytes: I.maxSizeBytes
+	}) || null : _;
+	return /* @__PURE__ */ j("div", {
+		className: t("file-upload--component", U.root, E),
+		children: [
+			/* @__PURE__ */ A(W, {
+				onDrop: ne,
+				accept: I.accept,
+				multiple: l,
+				disabled: f,
+				invalid: $ === !0 || $ === "true",
+				compact: m,
+				label: h,
+				hint: ae,
+				strings: {
+					instruction: L.instruction,
+					instructionMultiple: L.instructionMultiple,
+					...L.dragOver ? { dragOver: L.dragOver } : null
+				},
+				inputProps: {
+					ref: B,
+					id: z,
+					name: x,
+					"aria-labelledby": k,
+					"aria-describedby": M,
+					"aria-invalid": $,
+					"aria-required": F
+				}
+			}),
+			y && q.length > 0 && /* @__PURE__ */ A("div", {
+				className: U.rejections,
+				children: q.map((e) => /* @__PURE__ */ A(s, {
+					tone: "destructive",
+					children: L.rejection(e)
+				}, `${e.file.name}-${e.code}`))
+			}),
+			v && K.length > 0 && /* @__PURE__ */ A("ul", {
+				ref: re,
+				className: U.list,
+				children: K.map((e, t) => /* @__PURE__ */ j("li", {
+					className: U.row,
+					children: [
+						/* @__PURE__ */ A(te, { file: e }),
+						/* @__PURE__ */ j("div", {
+							className: U.rowBody,
+							children: [
+								/* @__PURE__ */ A("span", {
+									className: U.rowName,
+									children: e.name
+								}),
+								/* @__PURE__ */ A(a, {
+									value: e.size,
+									size: "xs",
+									type: "secondary"
+								}),
+								b?.[e.name] !== void 0 && /* @__PURE__ */ A("div", {
+									className: U.progress,
+									role: "progressbar",
+									"aria-valuenow": b[e.name],
+									"aria-valuemin": 0,
+									"aria-valuemax": 100,
+									"aria-label": L.uploading(e.name),
+									children: /* @__PURE__ */ A("div", {
+										className: U.progressFill,
+										style: { width: `${b[e.name]}%` }
+									})
+								})
+							]
+						}),
+						/* @__PURE__ */ A(n, {
+							tone: "neutral",
+							appearance: "ghost",
+							iconOnly: !0,
+							"aria-label": L.remove(e.name),
+							"data-remove": "",
+							disabled: f,
+							onClick: () => ie(t),
+							children: /* @__PURE__ */ A(S, {})
+						})
+					]
+				}, `${e.name}-${e.lastModified}`))
+			})
+		]
+	});
+}
+function te({ file: e }) {
+	let t = e.type.startsWith("image/"), [n] = M(t ? [e] : []);
+	return /* @__PURE__ */ A("span", {
+		className: U.thumb,
+		children: t && n ? /* @__PURE__ */ A(N, {
+			src: n,
+			fallback: /* @__PURE__ */ A(f, { "aria-hidden": !0 })
+		}) : /* @__PURE__ */ A(f, { "aria-hidden": !0 })
+	});
+}
+//#endregion
+//#region src/components/base/upload/media-upload.tsx
+function X({ value: e, onValueChange: t, onRejectedFiles: n, previewUrl: r, accept: i = "image/*", ...a }) {
+	let o = D(null), [s, c] = O(void 0), [l, u] = O(void 0), [d, f] = O(r);
+	d !== r && (f(r), u(void 0));
+	let p = e === void 0 ? s : e ?? void 0, [m] = M(p ? [p] : []);
+	return {
+		inputRef: o,
+		accepted: C((r) => {
+			let s = J({
+				incoming: r,
+				current: [],
+				maxFiles: 1,
+				append: !1,
+				accept: i,
+				...a
+			}), l = s.accepted[0];
+			l && (e === void 0 && c(l), t?.(l)), s.rejections.length > 0 && n?.(s.rejections), o.current && (o.current.value = "");
+		}, [
+			i,
+			a,
+			n,
+			t,
+			e
+		]),
+		clear: C(() => {
+			e === void 0 && (c(void 0), u(r)), t?.(void 0);
+		}, [
+			t,
+			r,
+			e
+		]),
+		shown: m ?? (e === void 0 && l === r ? null : r) ?? null,
+		accept: i
+	};
+}
+function Z({ shape: r, emptyIcon: i, emptyLabel: a, overlayLabel: o, removeLabel: s, props: c }) {
+	let { id: l, disabled: u, invalid: d, className: f, name: p, "aria-label": m, "aria-labelledby": h, "aria-describedby": g, "aria-invalid": v, "aria-required": b } = c, { inputRef: x, accepted: S, clear: C, shown: w, accept: E } = X(c), { isDragging: D, dropTargetProps: O } = H({
+		disabled: u,
+		onFiles: S
+	}), k = v ?? (d || void 0), M = T(), P = l ?? M;
+	return /* @__PURE__ */ j("div", {
+		className: t(r === "avatar" ? "avatar-upload--component" : "image-upload--component", U.mediaRoot, f),
+		children: [/* @__PURE__ */ j("div", {
+			...O,
+			"data-dragging": D || void 0,
+			"data-disabled": u || void 0,
+			"data-filled": w ? "" : void 0,
+			"data-invalid": k && k !== "false" || void 0,
+			className: t(U.mediaPicker, r === "avatar" ? U.avatarPicker : U.imagePicker),
+			children: [
+				/* @__PURE__ */ A("input", {
+					ref: x,
+					id: P,
+					type: "file",
+					name: p,
+					accept: E,
+					disabled: u,
+					"aria-label": m ?? (w ? o : a),
+					"aria-labelledby": h ? `${h} ${P}` : void 0,
+					"aria-describedby": g,
+					"aria-invalid": k,
+					"aria-required": b,
+					className: U.dropzoneInput,
+					onChange: (e) => {
+						let t = e.target.files;
+						t?.length && S(Array.from(t)), e.target.value = "";
+					}
+				}),
+				w ? /* @__PURE__ */ A(N, {
+					src: w,
+					fallback: /* @__PURE__ */ A("span", {
+						className: U.mediaEmpty,
+						children: i
+					}),
+					className: U.mediaPreview
+				}) : /* @__PURE__ */ j("span", {
+					className: U.mediaEmpty,
+					children: [i, r === "image" && /* @__PURE__ */ A(e, {
+						tag: "span",
+						size: "xs",
+						type: "inherit",
+						children: a
+					})]
+				}),
+				/* @__PURE__ */ j("span", {
+					className: U.mediaOverlay,
+					"aria-hidden": !0,
+					children: [/* @__PURE__ */ A(_, { "aria-hidden": !0 }), r === "image" && /* @__PURE__ */ A(e, {
+						tag: "span",
+						size: "xs",
+						type: "inherit",
+						children: o
+					})]
+				})
+			]
+		}), w && !u && /* @__PURE__ */ j(n, {
+			tone: "neutral",
+			appearance: "ghost",
+			onClick: () => {
+				C(), x.current?.focus();
+			},
+			children: [/* @__PURE__ */ A(y, {}), s]
+		})]
+	});
+}
+function ne({ strings: e, ...t }) {
+	let n = {
+		...I,
+		...e
+	};
+	return /* @__PURE__ */ A(Z, {
+		shape: "avatar",
+		emptyIcon: /* @__PURE__ */ A(x, { "aria-hidden": !0 }),
+		emptyLabel: n.empty,
+		overlayLabel: n.overlay,
+		removeLabel: n.remove,
+		props: t
+	});
+}
+function re({ strings: e, ...t }) {
+	let n = {
+		...L,
+		...e
+	};
+	return /* @__PURE__ */ A(Z, {
+		shape: "image",
+		emptyIcon: /* @__PURE__ */ A(p, { "aria-hidden": !0 }),
+		emptyLabel: n.empty,
+		overlayLabel: n.overlay,
+		removeLabel: n.remove,
+		props: t
+	});
+}
+//#endregion
+//#region src/components/base/upload/upload-queue.tsx
+var Q = {
+	queued: /* @__PURE__ */ A(d, { "aria-hidden": !0 }),
+	uploading: /* @__PURE__ */ A(h, { "aria-hidden": !0 }),
+	done: /* @__PURE__ */ A(l, { "aria-hidden": !0 }),
+	error: /* @__PURE__ */ A(u, { "aria-hidden": !0 }),
+	cancelled: /* @__PURE__ */ A(S, { "aria-hidden": !0 })
+}, ie = {
+	queued: U.statusQueued,
+	uploading: U.statusUploading,
+	done: U.statusDone,
+	error: U.statusError,
+	cancelled: U.statusCancelled
+};
+function $({ items: i, onCancel: o, onRetry: s, onRemove: l, strings: u, className: d }) {
+	let p = r(R, u), m = D(/* @__PURE__ */ new Map()), [h, g] = O(""), _ = i.some((e) => e.status === "queued" || e.status === "uploading"), [y, b] = O(_);
+	return _ && !y && b(!0), w(() => {
+		let e = [];
+		for (let t of i) {
+			let n = m.current.get(t.id), r = t.status === "done" || t.status === "error" || t.status === "cancelled";
+			n !== void 0 && n !== t.status && r && e.push(p.settled?.(t.name, p.status[t.status]) ?? `${t.name}: ${p.status[t.status]}`);
+		}
+		m.current = new Map(i.map((e) => [e.id, e.status])), e.length > 0 && g(e.join(". "));
+	}, [i, p]), i.length === 0 ? null : /* @__PURE__ */ j(k, { children: [/* @__PURE__ */ A("ul", {
+		className: t("upload-progress-list--component", U.list, d),
+		children: i.map((r) => {
+			let i = {
+				key: "cancel",
+				label: p.cancel(r.name),
+				icon: /* @__PURE__ */ A(S, {}),
+				run: () => o?.(r.id)
+			}, c = {
+				key: "retry",
+				label: p.retry(r.name),
+				icon: /* @__PURE__ */ A(v, {}),
+				run: () => s?.(r.id)
+			}, u = {
+				key: "remove",
+				label: p.remove(r.name),
+				icon: /* @__PURE__ */ A(S, {}),
+				run: () => l?.(r.id)
+			}, d = r.status === "uploading" ? o ? [i] : [] : r.status === "queued" ? o ? [i] : l ? [u] : [] : r.status === "error" ? [...s ? [c] : [], ...l ? [u] : []] : l ? [u] : [];
+			return /* @__PURE__ */ j("li", {
+				className: U.row,
+				children: [
+					r.preview ? /* @__PURE__ */ A("span", {
+						className: U.thumb,
+						children: /* @__PURE__ */ A(N, {
+							src: r.preview,
+							fallback: /* @__PURE__ */ A(f, { "aria-hidden": !0 })
+						})
+					}) : /* @__PURE__ */ A("span", {
+						className: t(U.statusIcon, ie[r.status]),
+						"aria-hidden": !0,
+						children: Q[r.status]
+					}),
+					/* @__PURE__ */ j("div", {
+						className: U.rowBody,
+						children: [
+							/* @__PURE__ */ A("span", {
+								className: U.rowName,
+								children: r.name
+							}),
+							/* @__PURE__ */ j(e, {
+								tag: "span",
+								size: "xs",
+								type: "secondary",
+								children: [p.status[r.status], r.size !== void 0 && /* @__PURE__ */ j(k, { children: [" · ", /* @__PURE__ */ A(a, {
+									value: r.size,
+									size: "inherit",
+									type: "inherit"
+								})] })]
+							}),
+							r.status === "uploading" && /* @__PURE__ */ A("div", {
+								className: U.progress,
+								role: "progressbar",
+								"aria-valuenow": r.progress ?? 0,
+								"aria-valuemin": 0,
+								"aria-valuemax": 100,
+								"aria-label": p.uploading(r.name),
+								children: /* @__PURE__ */ A("div", {
+									className: U.progressFill,
+									style: { width: `${r.progress ?? 0}%` }
+								})
+							}),
+							r.status === "error" && !!r.error && /* @__PURE__ */ A(e, {
+								tag: "span",
+								size: "xs",
+								type: "error",
+								children: r.error
+							})
+						]
+					}),
+					d.length > 0 && /* @__PURE__ */ A("span", {
+						className: U.rowActions,
+						children: d.map((e) => /* @__PURE__ */ A(n, {
+							tone: "neutral",
+							appearance: "ghost",
+							iconOnly: !0,
+							"aria-label": e.label,
+							onClick: e.run,
+							children: e.icon
+						}, e.key))
+					})
+				]
+			}, r.id);
+		})
+	}), y && /* @__PURE__ */ A(c, {
+		"aria-live": "polite",
+		children: h
+	})] });
+}
+function ae({ items: e, onAddFiles: r, onCancel: i, onRetry: a, onRemove: s, onClearAll: c, strings: l, showSummary: u = !0, className: d, ...f }) {
+	let p = {
+		...z,
+		...l
+	}, m = E(() => {
+		let t = {};
+		for (let n of e) t[n.status] = (t[n.status] ?? 0) + 1;
+		return t;
+	}, [e]), h = [
+		"uploading",
+		"queued",
+		"done",
+		"error",
+		"cancelled"
+	].filter((e) => m[e]).map((e) => ({
+		status: e,
+		count: m[e]
+	}));
+	return /* @__PURE__ */ j("div", {
+		className: t("upload-tray--component", U.tray, d),
+		children: [
+			/* @__PURE__ */ A(Y, {
+				...f,
+				strings: l,
+				multiple: !0,
+				showList: !1,
+				value: [],
+				onValueChange: (e) => {
+					e.length > 0 && r(e);
+				}
+			}),
+			u && h.length > 0 && /* @__PURE__ */ j("div", {
+				className: U.trayToolbar,
+				children: [/* @__PURE__ */ A("div", {
+					className: U.trayCounts,
+					children: h.map(({ status: e, count: t }) => /* @__PURE__ */ j(o, {
+						tone: e === "error" ? "destructive" : "neutral",
+						children: [
+							p.status[e],
+							" ",
+							t
+						]
+					}, e))
+				}), !!c && /* @__PURE__ */ A(n, {
+					tone: "neutral",
+					appearance: "ghost",
+					onClick: c,
+					children: p.clearAll
+				})]
+			}),
+			/* @__PURE__ */ A($, {
+				items: e,
+				strings: l,
+				onCancel: i,
+				onRetry: a,
+				onRemove: s
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/base/upload/media-gallery.tsx
+var oe = [];
+function se({ value: r, defaultValue: i, onValueChange: a, onRejectedFiles: s, maxFiles: c, disabled: l = !1, invalid: u = !1, showCover: d = !0, strings: f, accept: h = "image/*", ...g }) {
+	let _ = {
+		...F,
+		...f
+	}, v = r !== void 0, [y, b] = O(i ?? []), x = v ? r ?? oe : y, [w, T] = O(null), [D, k] = O(null), P = C((e) => {
+		v || b(e), a?.(e);
+	}, [v, a]), I = C((e) => {
+		let t = J({
+			incoming: e,
+			current: x,
+			maxFiles: c ?? Infinity,
+			append: !0,
+			accept: h,
+			...g
+		});
+		t.rejections.length > 0 && s?.(t.rejections), t.accepted.length > 0 && P(t.nextFiles);
+	}, [
+		h,
+		P,
+		g,
+		x,
+		c,
+		s
+	]), { isDragging: L, dropTargetProps: R } = H({
+		disabled: l,
+		onFiles: I
+	}), z = C((e, t) => {
+		if (e === t || t < 0 || t >= x.length) return;
+		let n = [...x], [r] = n.splice(e, 1);
+		r !== void 0 && (n.splice(t, 0, r), P(n));
+	}, [P, x]), B = M(x), V = (e, t) => {
+		let n = e.key === "ArrowLeft" ? -1 : +(e.key === "ArrowRight");
+		if (n === 0) return;
+		e.preventDefault();
+		let r = t + n;
+		z(t, r);
+		let i = e.currentTarget.closest("[data-gallery]")?.querySelectorAll("[data-gallery-tile]");
+		requestAnimationFrame(() => i?.[r]?.focus());
+	}, W = (e, t) => {
+		e.preventDefault(), w !== null && z(w, t), T(null), k(null);
+	}, G = c !== void 0 && x.length >= c, K = E(() => x.map((e, t) => ({
+		file: e,
+		url: B[t]
+	})), [x, B]);
+	return /* @__PURE__ */ j("div", {
+		"data-gallery": "",
+		className: t("media-gallery--component", U.gallery),
+		children: [K.map(({ file: e, url: t }, r) => /* @__PURE__ */ j("div", {
+			className: U.tile,
+			"data-dragging": w === r || void 0,
+			"data-drop": D === r && w !== null && w !== r || void 0,
+			onDragOver: (e) => {
+				w !== null && (e.preventDefault(), k(r));
+			},
+			onDrop: (e) => W(e, r),
+			onDragEnd: () => {
+				T(null), k(null);
+			},
+			children: [
+				!!t && /* @__PURE__ */ A(N, {
+					src: t,
+					fallback: /* @__PURE__ */ A(p, {
+						"aria-hidden": !0,
+						className: U.tileFallback
+					}),
+					className: U.tileImage
+				}),
+				/* @__PURE__ */ A("button", {
+					type: "button",
+					"data-gallery-tile": "",
+					className: U.tileHandle,
+					"aria-label": _.position(e.name, r + 1, x.length),
+					disabled: l,
+					draggable: !l,
+					onDragStart: (e) => {
+						T(r), e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", String(r));
+						let t = e.currentTarget.closest("[data-drop], div");
+						t && e.dataTransfer.setDragImage(t, 20, 20);
+					},
+					onDragEnd: () => {
+						T(null), k(null);
+					},
+					onKeyDown: (e) => V(e, r)
+				}),
+				r === 0 && d && /* @__PURE__ */ A(o, {
+					tone: "neutral",
+					className: U.tileCover,
+					children: _.cover
+				}),
+				/* @__PURE__ */ A(n, {
+					tone: "neutral",
+					appearance: "solid",
+					iconOnly: !0,
+					className: U.tileRemove,
+					"aria-label": _.remove(e.name),
+					disabled: l,
+					onClick: () => P(x.filter((e, t) => t !== r)),
+					children: /* @__PURE__ */ A(S, {})
+				})
+			]
+		}, `${e.name}-${e.lastModified}-${r}`)), !G && /* @__PURE__ */ j("label", {
+			...R,
+			"data-dragging": L || void 0,
+			"data-disabled": l || void 0,
+			"aria-invalid": u || void 0,
+			className: U.galleryAdd,
+			children: [
+				/* @__PURE__ */ A("input", {
+					type: "file",
+					accept: h,
+					multiple: !0,
+					disabled: l,
+					className: U.dropzoneInput,
+					onChange: (e) => {
+						let t = e.target.files;
+						t?.length && I(Array.from(t)), e.target.value = "";
+					}
+				}),
+				/* @__PURE__ */ A(m, { "aria-hidden": !0 }),
+				/* @__PURE__ */ A(e, {
+					tag: "span",
+					size: "xs",
+					type: "inherit",
+					children: _.add
+				})
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/components/base/upload/file-picker-input.tsx
+function ce({ value: e, onValueChange: r, onRejectedFiles: i, constraints: o = {}, disabled: s = !1, invalid: c = !1, name: l, strings: u, className: d, ...f }) {
+	let p = {
+		...V,
+		...u
+	}, m = D(null), [h, _] = O(void 0), v = e === void 0 ? h : e ?? void 0, y = C((t) => {
+		let n = J({
+			incoming: t,
+			current: [],
+			maxFiles: 1,
+			append: !1,
+			...o
+		});
+		n.rejections.length > 0 && i?.(n.rejections);
+		let a = n.accepted[0];
+		a && (e === void 0 && _(a), r?.(a)), m.current && (m.current.value = "");
+	}, [
+		o,
+		i,
+		r,
+		e
+	]);
+	return /* @__PURE__ */ j("div", {
+		"data-field-shell": "",
+		"data-disabled": s || void 0,
+		"aria-invalid": c || void 0,
+		className: t("file-picker-input--component", U.pickerShell, d),
+		...f,
+		children: [
+			/* @__PURE__ */ A("input", {
+				ref: m,
+				type: "file",
+				name: l,
+				accept: o.accept,
+				disabled: s,
+				"aria-label": v ? v.name : p.empty,
+				className: U.dropzoneInput,
+				onChange: (e) => {
+					let t = e.target.files;
+					t?.length && y(Array.from(t));
+				}
+			}),
+			/* @__PURE__ */ A(g, {
+				"aria-hidden": !0,
+				className: U.pickerIcon
+			}),
+			/* @__PURE__ */ A("span", {
+				className: t(U.pickerLabel, !v && U.pickerEmpty),
+				children: v ? v.name : p.empty
+			}),
+			!!v && /* @__PURE__ */ A(a, {
+				value: v.size,
+				size: "xs",
+				type: "secondary",
+				className: U.pickerMeta
+			}),
+			!!v && !s && /* @__PURE__ */ A(n, {
+				tone: "neutral",
+				appearance: "ghost",
+				iconOnly: !0,
+				"aria-label": p.clear,
+				className: U.pickerClear,
+				onClick: () => {
+					e === void 0 && _(void 0), r?.(void 0);
+				},
+				children: /* @__PURE__ */ A(S, {})
+			})
+		]
+	});
+}
+//#endregion
+export { z as _, ne as a, J as c, I as d, B as f, R as g, F as h, ae as i, W as l, L as m, se as n, re as o, V as p, $ as r, Y as s, ce as t, H as u, P as v, N as y };