themelia-ui 1.0.0

package/dist/upload-4YDU7od8.js

@@ -0,0 +1,918 @@
+import "./css/upload.css";
+import { t as e } from "./cx--CBrhWH0.js";
+import { h as t } from "./feedback-DHdvxang.js";
+import { c as n } from "./buttons-CabBjPap.js";
+import { o as r } from "./structure-es_UqqmD.js";
+import { C as i, S as a } from "./primitives-D-cyAv5O.js";
+import { t as o } from "./badge-DwsR_WXN.js";
+import { t as s } from "./strings-Co9_qArR.js";
+import { CheckIcon as c, CircleAlertIcon as l, ClockIcon as u, FileIcon as d, ImageIcon as f, ImagePlusIcon as p, Loader2Icon as m, PaperclipIcon as h, PencilIcon as g, RotateCwIcon as _, TrashIcon as v, UploadCloudIcon as y, UserIcon as b, XIcon as x } from "lucide-react";
+import { useCallback as S, useEffect as C, useId as w, useMemo as T, useRef as E, useState as D } from "react";
+import { Fragment as O, jsx as k, jsxs as A } from "react/jsx-runtime";
+//#region src/hooks/use-object-urls.ts
+function j(e) {
+	let [t, n] = D([]), r = E([]), i = E([]);
+	return C(() => {
+		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]), C(() => () => {
+		for (let e of i.current) URL.revokeObjectURL(e);
+		i.current = [], r.current = [];
+	}, []), t;
+}
+//#endregion
+//#region src/components/base/upload/preview-image.tsx
+function M({ src: t, alt: n = "", fallback: r, className: i }) {
+	let [a, o] = D(!1), [s, c] = D(t);
+	return t !== s && (c(t), o(!1)), a ? /* @__PURE__ */ k(O, { children: r }) : /* @__PURE__ */ k("img", {
+		src: t,
+		alt: n,
+		className: e("preview-image--component", i),
+		onError: () => o(!0)
+	});
+}
+//#endregion
+//#region src/components/base/upload/file-upload.strings.ts
+var N = {
+	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.`;
+		}
+	}
+}, P = {
+	light: "upload-module__light___KCovW",
+	dark: "upload-module__dark___YspDx",
+	dropzone: "upload-module__dropzone___PApUq",
+	dropzoneCompact: "upload-module__dropzoneCompact___gYbqK",
+	dropzoneInput: "upload-module__dropzoneInput___tsHcX",
+	dropzoneIcon: "upload-module__dropzoneIcon___CRI-N",
+	dropzoneText: "upload-module__dropzoneText___XA7aN",
+	dropzoneHint: "upload-module__dropzoneHint___BYW1F",
+	list: "upload-module__list___p7-Qo",
+	row: "upload-module__row___oug28",
+	thumb: "upload-module__thumb___hBomc",
+	statusIcon: "upload-module__statusIcon___cxy92",
+	rowBody: "upload-module__rowBody___nY0O5",
+	rowName: "upload-module__rowName___Pfz0d",
+	rowMeta: "upload-module__rowMeta___EjcAe",
+	progress: "upload-module__progress___wf216",
+	progressFill: "upload-module__progressFill___wuAaZ",
+	root: "upload-module__root___ZBYc6",
+	rejections: "upload-module__rejections___PXstQ",
+	mediaPicker: "upload-module__mediaPicker___lFcHl",
+	avatarPicker: "upload-module__avatarPicker___uGeLK",
+	imagePicker: "upload-module__imagePicker___sL51R",
+	mediaPreview: "upload-module__mediaPreview___9KLJ-",
+	mediaOverlay: "upload-module__mediaOverlay___hP1e8",
+	mediaEmpty: "upload-module__mediaEmpty___FVD8t",
+	mediaRemove: "upload-module__mediaRemove___b5tbc",
+	tray: "upload-module__tray___R0MZG",
+	trayToolbar: "upload-module__trayToolbar___OtzL2",
+	trayCounts: "upload-module__trayCounts___9VPnT",
+	statusQueued: "upload-module__statusQueued___5gevd",
+	statusUploading: "upload-module__statusUploading___12V-2",
+	statusDone: "upload-module__statusDone___KDdpL",
+	statusError: "upload-module__statusError___q-DAk",
+	statusCancelled: "upload-module__statusCancelled___VdKLv",
+	rowError: "upload-module__rowError___16SZZ",
+	gallery: "upload-module__gallery___Ro73W",
+	tile: "upload-module__tile___iRwMs",
+	tileImage: "upload-module__tileImage___DJVsJ",
+	tileFallback: "upload-module__tileFallback___uIYR4",
+	tileHandle: "upload-module__tileHandle___6uNpd",
+	tileRemove: "upload-module__tileRemove___dYsvY",
+	tileCover: "upload-module__tileCover___o5tbS",
+	galleryAdd: "upload-module__galleryAdd___ErfDL",
+	pickerShell: "upload-module__pickerShell___uOUeA",
+	pickerIcon: "upload-module__pickerIcon___rYkJn",
+	pickerLabel: "upload-module__pickerLabel___YfK8o",
+	pickerEmpty: "upload-module__pickerEmpty___x-0oI",
+	pickerMeta: "upload-module__pickerMeta___QNdk8",
+	pickerClear: "upload-module__pickerClear___It275",
+	dropzoneFooter: "upload-module__dropzoneFooter___T9JPr"
+};
+//#endregion
+//#region src/components/base/upload/use-file-drop-target.ts
+function F({ disabled: e = !1, onFiles: t }) {
+	let n = E(0), [r, i] = D(!1), a = r && !e, o = S((e) => {
+		e.preventDefault(), e.stopPropagation();
+	}, []);
+	return {
+		isDragging: a,
+		dropTargetProps: {
+			onDragEnter: S((t) => {
+				if (o(t), e) {
+					n.current = 0;
+					return;
+				}
+				n.current += 1, i(!0);
+			}, [e, o]),
+			onDragOver: S((t) => {
+				o(t), !e && (t.dataTransfer && (t.dataTransfer.dropEffect = "copy"), i(!0));
+			}, [e, o]),
+			onDragLeave: S((e) => {
+				o(e), n.current = Math.max(0, n.current - 1), n.current === 0 && i(!1);
+			}, [o]),
+			onDrop: S((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
+			])
+		}
+	};
+}
+//#endregion
+//#region src/components/base/upload/validate-files.ts
+function I(e) {
+	return [
+		e.name,
+		e.size,
+		e.type,
+		e.lastModified
+	].join("|");
+}
+function L(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 R(e, t) {
+	let { accept: n, minSizeBytes: r, maxSizeBytes: i, validateFile: a } = t;
+	if (!L(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 z({ incoming: e, current: t, maxFiles: n, append: r, ...i }) {
+	let a = r ? [...t] : [], o = new Set(a.map(I)), s = [], c = [];
+	for (let t of e) {
+		let e = R(t, i);
+		if (e) {
+			c.push(e);
+			continue;
+		}
+		let r = I(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 B = [];
+function V({ id: i, value: o, defaultValue: s, onValueChange: c, onRejectedFiles: l, multiple: u = !1, maxFiles: d, selectionMode: f, disabled: p = !1, invalid: m = !1, compact: h = !1, label: g, strings: _, hint: v, showList: b = !0, showRejections: C = !0, progress: O, name: j, className: M, ...I }) {
+	let L = {
+		...N,
+		..._
+	}, R = w(), V = i ?? R, U = E(null), W = o !== void 0, [G, K] = D(s ?? []), q = W ? o ?? B : G, [J, Y] = D([]), X = d ?? (u ? Infinity : 1), Z = (f ?? (u ? "append" : "replace")) === "append", Q = S((e) => {
+		let t = z({
+			incoming: e,
+			current: q,
+			maxFiles: X,
+			append: Z,
+			...I
+		});
+		Y(t.rejections), t.rejections.length > 0 && l?.(t.rejections), (t.accepted.length > 0 || !Z) && (W || K(t.nextFiles), c?.(t.nextFiles)), U.current && (U.current.value = "");
+	}, [
+		Z,
+		I,
+		q,
+		W,
+		l,
+		c,
+		X
+	]), { isDragging: ee, dropTargetProps: te } = F({
+		disabled: p,
+		onFiles: Q
+	}), ne = S((e) => {
+		let t = q.filter((t, n) => n !== e);
+		W || K(t), c?.(t);
+	}, [
+		q,
+		W,
+		c
+	]), $ = T(() => {
+		if (v !== void 0) return v;
+		let e = [];
+		return I.accept && e.push(I.accept), I.maxSizeBytes !== void 0 && e.push(`up to ${Math.round(I.maxSizeBytes / 1024 / 1024)} MB`), e.length > 0 ? e.join(" · ") : null;
+	}, [
+		I.accept,
+		I.maxSizeBytes,
+		v
+	]);
+	return /* @__PURE__ */ A("div", {
+		className: e("file-upload--component", P.root, M),
+		children: [
+			/* @__PURE__ */ A("label", {
+				htmlFor: V,
+				...te,
+				"data-dragging": ee || void 0,
+				"data-disabled": p || void 0,
+				"aria-invalid": m || void 0,
+				className: e(P.dropzone, h && P.dropzoneCompact),
+				children: [
+					/* @__PURE__ */ k("input", {
+						ref: U,
+						id: V,
+						type: "file",
+						name: j,
+						accept: I.accept,
+						multiple: u,
+						disabled: p,
+						className: P.dropzoneInput,
+						onChange: (e) => {
+							let t = e.target.files;
+							t?.length && Q(Array.from(t));
+						}
+					}),
+					/* @__PURE__ */ k(y, {
+						"aria-hidden": !0,
+						className: P.dropzoneIcon
+					}),
+					/* @__PURE__ */ A(r, {
+						gap: "2xs",
+						align: h ? "start" : "center",
+						children: [/* @__PURE__ */ k("span", {
+							className: P.dropzoneText,
+							children: g ?? (u ? L.instructionMultiple : L.instruction)
+						}), $ != null && /* @__PURE__ */ k("span", {
+							className: P.dropzoneHint,
+							children: $
+						})]
+					})
+				]
+			}),
+			C && J.length > 0 && /* @__PURE__ */ k("div", {
+				className: P.rejections,
+				children: J.map((e) => /* @__PURE__ */ k(t, {
+					tone: "destructive",
+					children: L.rejection(e)
+				}, `${e.file.name}-${e.code}`))
+			}),
+			b && q.length > 0 && /* @__PURE__ */ k("ul", {
+				className: P.list,
+				children: q.map((e, t) => /* @__PURE__ */ A("li", {
+					className: P.row,
+					children: [
+						/* @__PURE__ */ k(H, { file: e }),
+						/* @__PURE__ */ A("div", {
+							className: P.rowBody,
+							children: [
+								/* @__PURE__ */ k("span", {
+									className: P.rowName,
+									children: e.name
+								}),
+								/* @__PURE__ */ k("span", {
+									className: P.rowMeta,
+									children: /* @__PURE__ */ k(a, { value: e.size })
+								}),
+								O?.[e.name] !== void 0 && /* @__PURE__ */ k("div", {
+									className: P.progress,
+									role: "progressbar",
+									"aria-valuenow": O[e.name],
+									"aria-valuemin": 0,
+									"aria-valuemax": 100,
+									"aria-label": L.uploading(e.name),
+									children: /* @__PURE__ */ k("div", {
+										className: P.progressFill,
+										style: { width: `${O[e.name]}%` }
+									})
+								})
+							]
+						}),
+						/* @__PURE__ */ k(n, {
+							tone: "neutral",
+							buttonStyle: "ghost",
+							iconOnly: !0,
+							"aria-label": L.remove(e.name),
+							disabled: p,
+							onClick: () => ne(t),
+							children: /* @__PURE__ */ k(x, {})
+						})
+					]
+				}, `${e.name}-${e.lastModified}`))
+			})
+		]
+	});
+}
+function H({ file: e }) {
+	let t = e.type.startsWith("image/"), [n] = j(t ? [e] : []);
+	return /* @__PURE__ */ k("span", {
+		className: P.thumb,
+		children: t && n ? /* @__PURE__ */ k(M, {
+			src: n,
+			fallback: /* @__PURE__ */ k(d, { "aria-hidden": !0 })
+		}) : /* @__PURE__ */ k(d, { "aria-hidden": !0 })
+	});
+}
+//#endregion
+//#region src/components/base/upload/upload.strings.ts
+var U = {
+	cover: "Cover",
+	add: "Add images",
+	position: (e, t, n) => `${e}, position ${t} of ${n}. Use the arrow keys to reorder.`,
+	remove: (e) => `Remove ${e}`
+}, W = {
+	empty: "Add a photo",
+	overlay: "Change photo",
+	remove: "Remove photo"
+}, G = {
+	empty: "Drop an image here, or browse",
+	overlay: "Change image",
+	remove: "Remove image"
+}, K = {
+	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}`
+}, q = {
+	...N,
+	...K,
+	clearAll: "Clear all"
+}, J = {
+	instruction: "Drop a file here, or browse",
+	instructionMultiple: "Drop files here, or browse",
+	dragOver: "Release to add",
+	helper: ""
+}, Y = {
+	empty: "No file chosen",
+	clear: "Remove file"
+};
+//#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 = E(null), [s, c] = D(void 0), l = e === void 0 ? s : e ?? void 0, [u] = j(l ? [l] : []);
+	return {
+		inputRef: o,
+		accepted: S((r) => {
+			let s = z({
+				incoming: r,
+				current: [],
+				maxFiles: 1,
+				append: !1,
+				accept: i,
+				...a
+			});
+			s.rejections.length > 0 && n?.(s.rejections);
+			let l = s.accepted[0];
+			l && (e === void 0 && c(l), t?.(l)), o.current && (o.current.value = "");
+		}, [
+			i,
+			a,
+			n,
+			t,
+			e
+		]),
+		clear: S(() => {
+			e === void 0 && c(void 0), t?.(void 0);
+		}, [t, e]),
+		shown: u ?? r ?? null,
+		accept: i
+	};
+}
+function Z({ shape: t, emptyIcon: r, emptyLabel: i, overlayLabel: a, removeLabel: o, props: s }) {
+	let { id: c, disabled: l, invalid: u, className: d, name: f, "aria-label": p } = s, { inputRef: m, accepted: h, clear: _, shown: y, accept: b } = X(s), { isDragging: x, dropTargetProps: S } = F({
+		disabled: l,
+		onFiles: h
+	});
+	return /* @__PURE__ */ A("div", {
+		className: e(t === "avatar" ? "avatar-upload--component" : "image-upload--component", d),
+		children: [/* @__PURE__ */ A("div", {
+			...S,
+			"data-dragging": x || void 0,
+			"data-disabled": l || void 0,
+			"data-filled": y ? "" : void 0,
+			"aria-invalid": u || void 0,
+			className: e(P.mediaPicker, t === "avatar" ? P.avatarPicker : P.imagePicker),
+			children: [
+				/* @__PURE__ */ k("input", {
+					ref: m,
+					id: c,
+					type: "file",
+					name: f,
+					accept: b,
+					disabled: l,
+					"aria-label": p ?? a,
+					className: P.dropzoneInput,
+					onChange: (e) => {
+						let t = e.target.files;
+						t?.length && h(Array.from(t));
+					}
+				}),
+				y ? /* @__PURE__ */ k(M, {
+					src: y,
+					fallback: /* @__PURE__ */ k("span", {
+						className: P.mediaEmpty,
+						children: r
+					}),
+					className: P.mediaPreview
+				}) : /* @__PURE__ */ A("span", {
+					className: P.mediaEmpty,
+					children: [r, t === "image" && /* @__PURE__ */ k("span", { children: i })]
+				}),
+				/* @__PURE__ */ A("span", {
+					className: P.mediaOverlay,
+					children: [/* @__PURE__ */ k(g, { "aria-hidden": !0 }), t === "image" && /* @__PURE__ */ k("span", { children: a })]
+				})
+			]
+		}), y && !l && /* @__PURE__ */ A(n, {
+			tone: "neutral",
+			buttonStyle: "ghost",
+			onClick: _,
+			children: [/* @__PURE__ */ k(v, {}), o]
+		})]
+	});
+}
+function Q({ strings: e, ...t }) {
+	let n = {
+		...W,
+		...e
+	};
+	return /* @__PURE__ */ k(Z, {
+		shape: "avatar",
+		emptyIcon: /* @__PURE__ */ k(b, { "aria-hidden": !0 }),
+		emptyLabel: n.empty,
+		overlayLabel: n.overlay,
+		removeLabel: n.remove,
+		props: t
+	});
+}
+function ee({ strings: e, ...t }) {
+	let n = {
+		...G,
+		...e
+	};
+	return /* @__PURE__ */ k(Z, {
+		shape: "image",
+		emptyIcon: /* @__PURE__ */ k(f, { "aria-hidden": !0 }),
+		emptyLabel: n.empty,
+		overlayLabel: n.overlay,
+		removeLabel: n.remove,
+		props: t
+	});
+}
+//#endregion
+//#region src/components/base/upload/upload-queue.tsx
+var te = {
+	queued: /* @__PURE__ */ k(u, { "aria-hidden": !0 }),
+	uploading: /* @__PURE__ */ k(m, { "aria-hidden": !0 }),
+	done: /* @__PURE__ */ k(c, { "aria-hidden": !0 }),
+	error: /* @__PURE__ */ k(l, { "aria-hidden": !0 }),
+	cancelled: /* @__PURE__ */ k(x, { "aria-hidden": !0 })
+}, ne = {
+	queued: P.statusQueued,
+	uploading: P.statusUploading,
+	done: P.statusDone,
+	error: P.statusError,
+	cancelled: P.statusCancelled
+};
+function $({ items: t, onCancel: r, onRetry: i, onRemove: o, strings: c, className: l }) {
+	let u = s(K, c);
+	return t.length === 0 ? null : /* @__PURE__ */ k("ul", {
+		className: e("upload-progress-list--component", P.list, l),
+		children: t.map((t) => {
+			let s = t.status === "uploading" && r ? {
+				label: u.cancel(t.name),
+				icon: /* @__PURE__ */ k(x, {}),
+				run: () => r(t.id)
+			} : t.status === "error" && i ? {
+				label: u.retry(t.name),
+				icon: /* @__PURE__ */ k(_, {}),
+				run: () => i(t.id)
+			} : o ? {
+				label: u.remove(t.name),
+				icon: /* @__PURE__ */ k(x, {}),
+				run: () => o(t.id)
+			} : null;
+			return /* @__PURE__ */ A("li", {
+				className: P.row,
+				children: [
+					t.preview ? /* @__PURE__ */ k("span", {
+						className: P.thumb,
+						children: /* @__PURE__ */ k(M, {
+							src: t.preview,
+							fallback: /* @__PURE__ */ k(d, { "aria-hidden": !0 })
+						})
+					}) : /* @__PURE__ */ k("span", {
+						className: e(P.statusIcon, ne[t.status]),
+						"aria-hidden": !0,
+						children: te[t.status]
+					}),
+					/* @__PURE__ */ A("div", {
+						className: P.rowBody,
+						children: [
+							/* @__PURE__ */ k("span", {
+								className: P.rowName,
+								children: t.name
+							}),
+							/* @__PURE__ */ A("span", {
+								className: P.rowMeta,
+								children: [u.status[t.status], t.size !== void 0 && /* @__PURE__ */ A(O, { children: [" · ", /* @__PURE__ */ k(a, { value: t.size })] })]
+							}),
+							t.status === "uploading" && /* @__PURE__ */ k("div", {
+								className: P.progress,
+								role: "progressbar",
+								"aria-valuenow": t.progress ?? 0,
+								"aria-valuemin": 0,
+								"aria-valuemax": 100,
+								"aria-label": u.uploading(t.name),
+								children: /* @__PURE__ */ k("div", {
+									className: P.progressFill,
+									style: { width: `${t.progress ?? 0}%` }
+								})
+							}),
+							t.status === "error" && !!t.error && /* @__PURE__ */ k("span", {
+								className: P.rowError,
+								children: t.error
+							})
+						]
+					}),
+					!!s && /* @__PURE__ */ k(n, {
+						tone: "neutral",
+						buttonStyle: "ghost",
+						iconOnly: !0,
+						"aria-label": s.label,
+						onClick: s.run,
+						children: s.icon
+					})
+				]
+			}, t.id);
+		})
+	});
+}
+function re({ items: t, onAddFiles: r, onCancel: i, onRetry: a, onRemove: s, onClearAll: c, strings: l, showSummary: u = !0, className: d, ...f }) {
+	let p = {
+		...q,
+		...l
+	}, m = T(() => {
+		let e = {};
+		for (let n of t) e[n.status] = (e[n.status] ?? 0) + 1;
+		return e;
+	}, [t]), h = [
+		"uploading",
+		"queued",
+		"done",
+		"error",
+		"cancelled"
+	].filter((e) => m[e]).map((e) => ({
+		status: e,
+		count: m[e]
+	}));
+	return /* @__PURE__ */ A("div", {
+		className: e("upload-tray--component", P.tray, d),
+		children: [
+			/* @__PURE__ */ k(V, {
+				...f,
+				multiple: !0,
+				showList: !1,
+				value: [],
+				onValueChange: (e) => {
+					e.length > 0 && r(e);
+				}
+			}),
+			u && h.length > 0 && /* @__PURE__ */ A("div", {
+				className: P.trayToolbar,
+				children: [/* @__PURE__ */ k("div", {
+					className: P.trayCounts,
+					children: h.map(({ status: e, count: t }) => /* @__PURE__ */ A(o, {
+						tone: e === "error" ? "destructive" : "neutral",
+						children: [
+							p.status[e],
+							" ",
+							t
+						]
+					}, e))
+				}), !!c && /* @__PURE__ */ k(n, {
+					tone: "neutral",
+					buttonStyle: "ghost",
+					onClick: c,
+					children: p.clearAll
+				})]
+			}),
+			/* @__PURE__ */ k($, {
+				items: t,
+				onCancel: i,
+				onRetry: a,
+				onRemove: s
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/base/upload/media-gallery.tsx
+var ie = [];
+function ae({ value: t, defaultValue: r, onValueChange: i, onRejectedFiles: a, maxFiles: s, disabled: c = !1, invalid: l = !1, showCover: u = !0, strings: d, accept: m = "image/*", ...h }) {
+	let g = {
+		...U,
+		...d
+	}, _ = t !== void 0, [v, y] = D(r ?? []), b = _ ? t ?? ie : v, [C, w] = D(null), [E, O] = D(null), N = S((e) => {
+		_ || y(e), i?.(e);
+	}, [_, i]), I = S((e) => {
+		let t = z({
+			incoming: e,
+			current: b,
+			maxFiles: s ?? Infinity,
+			append: !0,
+			accept: m,
+			...h
+		});
+		t.rejections.length > 0 && a?.(t.rejections), t.accepted.length > 0 && N(t.nextFiles);
+	}, [
+		m,
+		N,
+		h,
+		b,
+		s,
+		a
+	]), { isDragging: L, dropTargetProps: R } = F({
+		disabled: c,
+		onFiles: I
+	}), B = S((e, t) => {
+		if (e === t || t < 0 || t >= b.length) return;
+		let n = [...b], [r] = n.splice(e, 1);
+		r !== void 0 && (n.splice(t, 0, r), N(n));
+	}, [N, b]), V = j(b), H = (e, t) => {
+		let n = e.key === "ArrowLeft" ? -1 : +(e.key === "ArrowRight");
+		if (n === 0) return;
+		e.preventDefault();
+		let r = t + n;
+		B(t, r);
+		let i = e.currentTarget.closest("[data-gallery]")?.querySelectorAll("[data-gallery-tile]");
+		requestAnimationFrame(() => i?.[r]?.focus());
+	}, W = (e, t) => {
+		e.preventDefault(), C !== null && B(C, t), w(null), O(null);
+	}, G = s !== void 0 && b.length >= s, K = T(() => b.map((e, t) => ({
+		file: e,
+		url: V[t]
+	})), [b, V]);
+	return /* @__PURE__ */ A("div", {
+		"data-gallery": "",
+		className: e("media-gallery--component", P.gallery),
+		children: [K.map(({ file: e, url: t }, r) => /* @__PURE__ */ A("div", {
+			className: P.tile,
+			"data-dragging": C === r || void 0,
+			"data-drop": E === r && C !== null && C !== r || void 0,
+			onDragOver: (e) => {
+				C !== null && (e.preventDefault(), O(r));
+			},
+			onDrop: (e) => W(e, r),
+			onDragEnd: () => {
+				w(null), O(null);
+			},
+			children: [
+				!!t && /* @__PURE__ */ k(M, {
+					src: t,
+					fallback: /* @__PURE__ */ k(f, {
+						"aria-hidden": !0,
+						className: P.tileFallback
+					}),
+					className: P.tileImage
+				}),
+				/* @__PURE__ */ k("button", {
+					type: "button",
+					"data-gallery-tile": "",
+					className: P.tileHandle,
+					"aria-label": g.position(e.name, r + 1, b.length),
+					disabled: c,
+					draggable: !c,
+					onDragStart: (e) => {
+						w(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: () => {
+						w(null), O(null);
+					},
+					onKeyDown: (e) => H(e, r)
+				}),
+				r === 0 && u && /* @__PURE__ */ k(o, {
+					tone: "neutral",
+					className: P.tileCover,
+					children: g.cover
+				}),
+				/* @__PURE__ */ k(n, {
+					tone: "neutral",
+					buttonStyle: "solid",
+					iconOnly: !0,
+					className: P.tileRemove,
+					"aria-label": g.remove(e.name),
+					disabled: c,
+					onClick: () => N(b.filter((e, t) => t !== r)),
+					children: /* @__PURE__ */ k(x, {})
+				})
+			]
+		}, `${e.name}-${e.lastModified}-${r}`)), !G && /* @__PURE__ */ A("label", {
+			...R,
+			"data-dragging": L || void 0,
+			"data-disabled": c || void 0,
+			"aria-invalid": l || void 0,
+			className: P.galleryAdd,
+			children: [
+				/* @__PURE__ */ k("input", {
+					type: "file",
+					accept: m,
+					multiple: !0,
+					disabled: c,
+					className: P.dropzoneInput,
+					onChange: (e) => {
+						let t = e.target.files;
+						t?.length && I(Array.from(t)), e.target.value = "";
+					}
+				}),
+				/* @__PURE__ */ k(p, { "aria-hidden": !0 }),
+				/* @__PURE__ */ k("span", { children: g.add })
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/components/base/upload/file-picker-input.tsx
+function oe({ value: t, onValueChange: r, onRejectedFiles: i, constraints: o = {}, disabled: s = !1, invalid: c = !1, name: l, strings: u, className: d, ...f }) {
+	let p = {
+		...Y,
+		...u
+	}, m = E(null), [g, _] = D(void 0), v = t === void 0 ? g : t ?? void 0, y = S((e) => {
+		let n = z({
+			incoming: e,
+			current: [],
+			maxFiles: 1,
+			append: !1,
+			...o
+		});
+		n.rejections.length > 0 && i?.(n.rejections);
+		let a = n.accepted[0];
+		a && (t === void 0 && _(a), r?.(a)), m.current && (m.current.value = "");
+	}, [
+		o,
+		i,
+		r,
+		t
+	]);
+	return /* @__PURE__ */ A("div", {
+		"data-field-shell": "",
+		"data-disabled": s || void 0,
+		"aria-invalid": c || void 0,
+		className: e("file-picker-input--component", P.pickerShell, d),
+		...f,
+		children: [
+			/* @__PURE__ */ k("input", {
+				ref: m,
+				type: "file",
+				name: l,
+				accept: o.accept,
+				disabled: s,
+				"aria-label": v ? v.name : p.empty,
+				className: P.dropzoneInput,
+				onChange: (e) => {
+					let t = e.target.files;
+					t?.length && y(Array.from(t));
+				}
+			}),
+			/* @__PURE__ */ k(h, {
+				"aria-hidden": !0,
+				className: P.pickerIcon
+			}),
+			/* @__PURE__ */ k("span", {
+				className: e(P.pickerLabel, !v && P.pickerEmpty),
+				children: v ? v.name : p.empty
+			}),
+			!!v && /* @__PURE__ */ k("span", {
+				className: P.pickerMeta,
+				children: /* @__PURE__ */ k(a, { value: v.size })
+			}),
+			!!v && !s && /* @__PURE__ */ k(n, {
+				tone: "neutral",
+				buttonStyle: "ghost",
+				iconOnly: !0,
+				"aria-label": p.clear,
+				className: P.pickerClear,
+				onClick: () => {
+					t === void 0 && _(void 0), r?.(void 0);
+				},
+				children: /* @__PURE__ */ k(x, {})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/base/upload/dropzone.tsx
+function se({ onDrop: t, accept: n, multiple: r = !1, disabled: i = !1, invalid: a = !1, compact: o = !1, icon: s, inputProps: c, strings: l, footer: u, className: d, ...f }) {
+	let p = {
+		...J,
+		...l
+	}, m = w(), { isDragging: h, dropTargetProps: g } = F({
+		disabled: i,
+		onFiles: t
+	});
+	return /* @__PURE__ */ A("div", {
+		className: e("dropzone--component", d),
+		...f,
+		children: [/* @__PURE__ */ A("label", {
+			htmlFor: m,
+			...g,
+			"data-slot": "dropzone",
+			"data-dragging": h || void 0,
+			"data-disabled": i || void 0,
+			"aria-invalid": a || void 0,
+			className: e(P.dropzone, o && P.dropzoneCompact),
+			children: [
+				/* @__PURE__ */ k("input", {
+					...c,
+					id: m,
+					type: "file",
+					accept: n,
+					multiple: r,
+					disabled: i,
+					className: e(P.dropzoneInput, c?.className),
+					onChange: (e) => {
+						let n = e.target.files;
+						n?.length && t(Array.from(n)), e.target.value = "";
+					}
+				}),
+				s ?? /* @__PURE__ */ k(y, {
+					"aria-hidden": !0,
+					className: P.dropzoneIcon
+				}),
+				/* @__PURE__ */ k("span", {
+					className: P.dropzoneText,
+					children: h ? p.dragOver : r ? p.instructionMultiple : p.instruction
+				}),
+				!!p.helper && /* @__PURE__ */ k("span", {
+					className: P.dropzoneHint,
+					children: p.helper
+				})
+			]
+		}), !!u && /* @__PURE__ */ k("div", {
+			className: P.dropzoneFooter,
+			children: u
+		})]
+	});
+}
+//#endregion
+export { F as _, re as a, W as c, G as d, U as f, z as g, V as h, $ as i, J as l, q as m, oe as n, Q as o, K as p, ae as r, ee as s, se as t, Y as u, N as v, M as y };