@vjdesigns/vjdesigns-ui 2.4.0 → 2.5.0

package/dist/components/forms/FileUpload/FileUpload.mjs

@@ -1,50 +1,52 @@
-import { en as e } from "../../../i18n/en.mjs";
-import { useControllableState as t } from "../../../hooks/useControllableState.mjs";
-import { useFormReset as n } from "../../../hooks/useFormReset.mjs";
-import { useLocale as r } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
-import { assignRef as i } from "../../../utils/refs.mjs";
-import { cx as a } from "../../../utils/cx.mjs";
-import { VisuallyHidden as o } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
-import { Spinner as s } from "../../feedback/Spinner/Spinner.mjs";
-import { Button as c, IconButton as l } from "../../primitives/Button/Button.mjs";
-import { CheckIcon as u, CloseIcon as d, ErrorIcon as f, FileIcon as p, ImageIcon as m, TrashIcon as h, UploadIcon as g } from "../../primitives/Icon/icons.mjs";
+"use client";
+import { cx as e } from "../../../utils/cx.mjs";
+import { getNumberFormat as t } from "../../../utils/intl.mjs";
+import { assignRef as n } from "../../../utils/refs.mjs";
+import { useControllableState as r } from "../../../hooks/useControllableState.mjs";
+import { useFormReset as i } from "../../../hooks/useFormReset.mjs";
+import { Button as a, IconButton as o } from "../../primitives/Button/Button.mjs";
+import { CheckIcon as s, CloseIcon as c, ErrorIcon as l, FileIcon as u, ImageIcon as d, TrashIcon as f, UploadIcon as p } from "../../primitives/Icon/icons.mjs";
+import { Progress as m } from "../../feedback/Progress/Progress.mjs";
+import { Spinner as h } from "../../feedback/Spinner/Spinner.mjs";
+import { VisuallyHidden as g } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
 import { useFieldContext as _, useFieldControl as v } from "../Field/FieldContext.mjs";
-import { Progress as y } from "../../feedback/Progress/Progress.mjs";
-import b from "./FileUpload.module.css.mjs";
-import { useCallback as x, useEffect as S, useId as C, useLayoutEffect as w, useMemo as T, useRef as E, useState as D } from "react";
-import { Fragment as ee, jsx as O, jsxs as k } from "react/jsx-runtime";
-//#region src/components/forms/FileUpload/FileUpload.tsx
-var te = {
-	sm: b.sm,
-	md: b.md,
-	lg: b.lg
-}, A = {
-	dropzone: b.variantDropzone,
-	button: b.variantButton
+import y from "./FileUpload.module.css.mjs";
+import { useLocale as ee } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { en as b } from "../../../i18n/en.mjs";
+import { useCallback as x, useEffect as S, useId as C, useLayoutEffect as w, useMemo as te, useRef as T, useState as E } from "react";
+import { Fragment as ne, jsx as D, jsxs as O } from "react/jsx-runtime";
+// src/components/forms/FileUpload/FileUpload.tsx
+var re = {
+	sm: y.sm,
+	md: y.md,
+	lg: y.lg
+}, k = {
+	dropzone: y.variantDropzone,
+	button: y.variantButton
 };
-function j(t, n = e.fileUpload.units, r) {
-	let i = (e) => new Intl.NumberFormat(r).format(e);
-	if (!Number.isFinite(t) || t < 0) return `${i(0)} ${n.B}`;
-	if (t < 1024) return `${i(Math.round(t))} ${n.B}`;
+function A(e, n = b.fileUpload.units, r) {
+	let i = (e) => t(r).format(e);
+	if (!Number.isFinite(e) || e < 0) return `${i(0)} ${n.B}`;
+	if (e < 1024) return `${i(Math.round(e))} ${n.B}`;
 	let a = [
 		n.KB,
 		n.MB,
 		n.GB,
 		n.TB
-	], o = t / 1024, s = 0;
+	], o = e / 1024, s = 0;
 	for (; o >= 1024 && s < a.length - 1;) o /= 1024, s++;
 	return `${i(o >= 10 ? Math.round(o) : Math.round(o * 10) / 10)} ${a[s]}`;
 }
-function M(e) {
+function j(e) {
 	return e ? e.split(",").map((e) => e.trim().toLowerCase()).filter(Boolean) : [];
 }
-function N(e, t) {
-	let n = M(t);
+function M(e, t) {
+	let n = j(t);
 	if (n.length === 0) return !0;
 	let r = e.name.toLowerCase(), i = (e.type || "").toLowerCase();
 	return n.some((e) => e.startsWith(".") ? r.endsWith(e) : e.endsWith("/*") ? i.startsWith(e.slice(0, -1)) : i === e);
 }
-var P = {
+var ie = {
 	"image/jpeg": "JPG",
 	"image/svg+xml": "SVG",
 	"text/plain": "TXT",
@@ -53,36 +55,36 @@ var P = {
 	"application/vnd.ms-excel": "XLS",
 	"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "XLSX"
 };
-function F(t, n = e.fileUpload) {
-	let r = n.typeGroups, i = M(t).map((e) => {
+function ae(e, t = b.fileUpload) {
+	let n = t.typeGroups, r = j(e).map((e) => {
 		if (e.startsWith(".")) return e.slice(1).toUpperCase();
 		if (e.endsWith("/*")) {
-			let t = e.slice(0, -2);
-			return r[t] ?? n.typeGroup(t);
+			let r = e.slice(0, -2);
+			return n[r] ?? t.typeGroup(r);
 		}
-		return P[e] ? P[e] : (e.split("/")[1] ?? e).toUpperCase();
-	}), a = Array.from(new Set(i));
-	if (a.length === 0) return "";
-	let o = a.join(", ");
-	return o.charAt(0).toUpperCase() + o.slice(1);
+		return ie[e] ? ie[e] : (e.split("/")[1] ?? e).toUpperCase();
+	}), i = Array.from(new Set(r));
+	if (i.length === 0) return "";
+	let a = i.join(", ");
+	return a.charAt(0).toUpperCase() + a.slice(1);
 }
-var I = (e) => `${e.name}::${e.size}::${e.lastModified}`, ne = (e) => (e.type || "").startsWith("image/"), L = /* @__PURE__ */ new WeakMap(), re = 0;
-function ie(e) {
-	let t = L.get(e);
-	return t || (t = `file-${++re}`, L.set(e, t)), t;
+var N = (e) => `${e.name}::${e.size}::${e.lastModified}`, oe = (e) => (e.type || "").startsWith("image/"), se = /* @__PURE__ */ new WeakMap(), ce = 0;
+function le(e) {
+	let t = se.get(e);
+	return t || (t = `file-${++ce}`, se.set(e, t)), t;
 }
-function ae(e, t) {
+function P(e, t) {
 	let n = Intl.ListFormat;
 	return n ? new n(t, { type: "conjunction" }).format(e) : e.join(", ");
 }
-function oe() {
-	let [e, t] = D(""), n = E(!1);
+function ue() {
+	let [e, t] = E(""), n = T(!1);
 	return [e, x((e) => {
 		n.current = !n.current, t(n.current ? `${e} ` : e);
 	}, [])];
 }
-function R(e, t) {
-	let [n, r] = D();
+function F(e, t) {
+	let [n, r] = E();
 	return S(() => {
 		if (!t || typeof URL > "u" || typeof URL.createObjectURL != "function") return;
 		let n = URL.createObjectURL(e);
@@ -91,7 +93,7 @@ function R(e, t) {
 		};
 	}, [e, t]), n;
 }
-var z = (e, t) => {
+var de = (e, t) => {
 	if (!e?.status && e?.progress == null) return null;
 	if (e.message) return e.message;
 	switch (e.status) {
@@ -99,160 +101,154 @@ var z = (e, t) => {
 		case "error": return t.uploadFailed;
 		default: return e.progress == null ? t.uploading : t.uploadingPercent(Math.round(e.progress));
 	}
-}, se = ({ file: e, state: t, showThumbnails: n, disabled: i, removeLabel: a, onRemove: o, removeRef: c }) => {
-	let { messages: g, locale: _ } = r(), v = ne(e), [x, S] = D(!1), C = R(e, n && v), w = t?.status ?? (t?.progress == null ? void 0 : "uploading"), T = z(t, g.fileUpload), E = w === "uploading" && t?.progress != null;
-	return /* @__PURE__ */ k("li", {
-		className: b.item,
-		"data-status": w,
+}, I = ({ file: e, state: t, showThumbnails: n, disabled: r, removeLabel: i, onRemove: a, removeRef: p }) => {
+	let { messages: g, locale: _ } = ee(), v = oe(e), [b, x] = E(!1), S = F(e, n && v), C = t?.status ?? (t?.progress == null ? void 0 : "uploading"), w = de(t, g.fileUpload), te = C === "uploading" && t?.progress != null;
+	return /* @__PURE__ */ O("li", {
+		className: y.item,
+		"data-status": C,
 		children: [
-			/* @__PURE__ */ O("span", {
-				className: b.thumb,
+			/* @__PURE__ */ D("span", {
+				className: y.thumb,
 				"aria-hidden": "true",
-				children: C && !x ? /* @__PURE__ */ O("img", {
-					className: b.thumbImage,
-					src: C,
+				children: S && !b ? /* @__PURE__ */ D("img", {
+					className: y.thumbImage,
+					src: S,
 					alt: "",
-					onError: () => S(!0)
-				}) : O(v ? m : p, { size: "md" })
+					onError: () => x(!0)
+				}) : D(v ? d : u, { size: "md" })
 			}),
-			/* @__PURE__ */ k("div", {
-				className: b.itemBody,
+			/* @__PURE__ */ O("div", {
+				className: y.itemBody,
 				children: [
-					/* @__PURE__ */ O("span", {
-						className: b.fileName,
+					/* @__PURE__ */ D("span", {
+						className: y.fileName,
 						title: e.name,
 						children: e.name
 					}),
-					/* @__PURE__ */ k("span", {
-						className: b.meta,
-						children: [/* @__PURE__ */ O("span", { children: j(e.size, g.fileUpload.units, _) }), T && /* @__PURE__ */ k("span", {
-							className: b.status,
-							"data-status": w,
+					/* @__PURE__ */ O("span", {
+						className: y.meta,
+						children: [/* @__PURE__ */ D("span", { children: A(e.size, g.fileUpload.units, _) }), w && /* @__PURE__ */ O("span", {
+							className: y.status,
+							"data-status": C,
 							children: [
-								w === "done" && /* @__PURE__ */ O(u, { size: "sm" }),
-								w === "error" && /* @__PURE__ */ O(f, { size: "sm" }),
-								w === "uploading" && /* @__PURE__ */ O(s, {
+								C === "done" && /* @__PURE__ */ D(s, { size: "sm" }),
+								C === "error" && /* @__PURE__ */ D(l, { size: "sm" }),
+								C === "uploading" && /* @__PURE__ */ D(h, {
 									decorative: !0,
 									size: "xs"
 								}),
-								/* @__PURE__ */ O("span", { children: T })
+								/* @__PURE__ */ D("span", { children: w })
 							]
 						})]
 					}),
-					E && /* @__PURE__ */ O(y, {
-						className: b.progress,
+					te && /* @__PURE__ */ D(m, {
+						className: y.progress,
 						size: "sm",
 						value: t?.progress,
 						"aria-label": g.fileUpload.progressFor(e.name)
 					})
 				]
 			}),
-			o && /* @__PURE__ */ O(l, {
-				ref: c,
-				className: b.remove,
+			a && /* @__PURE__ */ D(o, {
+				ref: p,
+				className: y.remove,
 				variant: "ghost",
 				tone: "neutral",
 				size: "sm",
-				"aria-label": a,
-				disabled: i,
-				onClick: o,
-				children: O(w === "uploading" ? d : h, { size: "sm" })
+				"aria-label": i,
+				disabled: r,
+				onClick: a,
+				children: D(C === "uploading" ? c : f, { size: "sm" })
 			})
 		]
 	});
-}, ce = ({ files: e, onRemove: t, getFileState: n, showThumbnails: i = !0, disabled: s = !1, removeLabel: c, focusFallback: l, size: u = "md", className: d, "aria-label": f, ...p }) => {
-	let { messages: m, locale: h } = r(), g = (e) => ae(e, h), _ = c ?? m.fileUpload.remove, v = f ?? m.fileUpload.list, y = E([]), x = E(null), [C, T] = oe(), D = (n, r) => {
-		x.current = {
+}, L = ({ files: t, onRemove: n, getFileState: r, showThumbnails: i = !0, disabled: a = !1, removeLabel: o, focusFallback: s, size: c = "md", className: l, "aria-label": u, ...d }) => {
+	let { messages: f, locale: p } = ee(), m = (e) => P(e, p), h = o ?? f.fileUpload.remove, _ = u ?? f.fileUpload.list, v = T([]), b = T(null), [x, C] = ue(), te = (e, r) => {
+		b.current = {
 			index: r,
-			length: e.length
-		}, t?.(n, r);
+			length: t.length
+		}, n?.(e, r);
 	};
 	w(() => {
-		let t = x.current;
-		if (t && (x.current = null, !(e.length >= t.length))) {
-			if (e.length === 0) {
-				l?.()?.focus();
-				return;
-			}
-			y.current[Math.min(t.index, e.length - 1)]?.focus();
-		}
-	}, [e, l]);
-	let A = e.map((e, t) => n?.(e, t)), j = E(/* @__PURE__ */ new WeakMap()), M = A.map((e) => e?.status ?? "").join("|");
+		let e = b.current;
+		e && (b.current = null, t.length >= e.length || (t.length === 0 ? s?.()?.focus() : v.current[Math.min(e.index, t.length - 1)]?.focus()));
+	}, [t, s]);
+	let E = t.map((e, t) => r?.(e, t)), k = T(/* @__PURE__ */ new WeakMap()), A = E.map((e) => e?.status ?? "").join("|");
 	return S(() => {
-		let t = [], n = [];
-		e.forEach((e, r) => {
-			let i = A[r]?.status, a = j.current.get(e);
-			i !== a && ((a !== void 0 || j.current.has(e)) && (i === "done" && t.push(e.name), i === "error" && n.push(e.name)), j.current.set(e, i));
+		let e = [], n = [];
+		t.forEach((t, r) => {
+			let i = E[r]?.status, a = k.current.get(t);
+			i !== a && ((a !== void 0 || k.current.has(t)) && (i === "done" && e.push(t.name), i === "error" && n.push(t.name)), k.current.set(t, i));
 		});
 		let r = [];
-		t.length && r.push(m.fileUpload.announceUploaded(g(t))), n.length && r.push(m.fileUpload.announceFailed(g(n))), r.length && T(r.join(" "));
+		e.length && r.push(f.fileUpload.announceUploaded(m(e))), n.length && r.push(f.fileUpload.announceFailed(m(n))), r.length && C(r.join(" "));
 	}, [
-		e,
-		M,
-		T
-	]), /* @__PURE__ */ k(ee, { children: [e.length > 0 && /* @__PURE__ */ O("ul", {
-		...p,
-		"aria-label": v,
-		className: a(b.list, te[u], d),
-		children: e.map((e, n) => /* @__PURE__ */ O(se, {
+		t,
+		A,
+		C
+	]), /* @__PURE__ */ O(ne, { children: [t.length > 0 && /* @__PURE__ */ D("ul", {
+		...d,
+		"aria-label": _,
+		className: e(y.list, re[c], l),
+		children: t.map((e, t) => /* @__PURE__ */ D(I, {
 			file: e,
-			state: A[n],
+			state: E[t],
 			showThumbnails: i,
-			disabled: s,
-			removeLabel: _(e.name),
-			onRemove: t ? () => D(e, n) : void 0,
+			disabled: a,
+			removeLabel: h(e.name),
+			onRemove: n ? () => te(e, t) : void 0,
 			removeRef: (e) => {
-				y.current[n] = e;
+				v.current[t] = e;
 			}
-		}, ie(e)))
-	}), /* @__PURE__ */ O(o, {
+		}, le(e)))
+	}), /* @__PURE__ */ D(g, {
 		role: "status",
-		children: C
+		children: x
 	})] });
 };
-function le(e, t, n, r, i) {
-	let a = (e) => j(e, r.units, i), { accept: o, multiple: s = !1, maxFiles: c, maxSize: l, minSize: u, validator: d } = n, f = [], p = [], m = new Set(s ? t.map(I) : []), h = s ? c ?? Infinity : 1, g = s ? t.length : 0, _ = F(o, r);
+function fe(e, t, n, r, i) {
+	let a = (e) => A(e, r.units, i), { accept: o, multiple: s = !1, maxFiles: c, maxSize: l, minSize: u, validator: d } = n, f = [], p = [], m = new Set(s ? t.map(N) : []), h = s ? c ?? Infinity : 1, g = s ? t.length : 0, _ = ae(o, r);
 	for (let t of e) {
 		let e = [];
-		if (N(t, o) || e.push(_ ? r.typeNotAcceptedUse(_) : r.typeNotAccepted), l != null && t.size > l && e.push(r.tooLarge(a(l))), u != null && t.size < u && e.push(r.tooSmall(a(u))), m.has(I(t)) && e.push(r.duplicate), e.length === 0 && d) {
+		if (M(t, o) || e.push(_ ? r.typeNotAcceptedUse(_) : r.typeNotAccepted), l != null && t.size > l && e.push(r.tooLarge(a(l))), u != null && t.size < u && e.push(r.tooSmall(a(u))), m.has(N(t)) && e.push(r.duplicate), e.length === 0 && d) {
 			let n = d(t);
 			n && e.push(n);
 		}
 		e.length === 0 && g + f.length >= h && e.push(s ? r.tooMany(h) : r.onlyOne), e.length ? p.push({
 			file: t,
 			errors: e
-		}) : (f.push(t), m.add(I(t)));
+		}) : (f.push(t), m.add(N(t)));
 	}
 	return {
 		accepted: f,
 		rejections: p
 	};
 }
-var B = (e) => Array.from(e.dataTransfer?.types ?? []).includes("Files"), ue = Object.assign(({ accept: e, multiple: s = !1, maxFiles: u, maxSize: p, minSize: m, validator: h, value: y, defaultValue: w, onValueChange: M, onReject: N, onFileRemove: P, disabled: I, invalid: ne, name: L, required: re, size: ae, variant: R = "dropzone", children: z, prompt: se, hint: ue, browseLabel: de, showList: fe = !0, showRejections: pe = !0, showThumbnails: me = !0, getFileState: he, inputRef: ge, buttonRef: _e, id: ve, className: ye, style: be, "aria-describedby": xe, "aria-label": Se, "aria-labelledby": Ce, ...we }) => {
-	let { messages: V, locale: Te } = r(), Ee = (e) => j(e, V.fileUpload.units, Te), H = C(), De = `${H}-hint`, Oe = `${H}-prompt`, ke = `${H}-browse`, Ae = `${H}-rejections`, je = `${H}-required`, Me = `${H}-input`, U = _(), [Ne, Pe] = D([]), W = ue === void 0 ? [[F(e, V.fileUpload), p == null ? "" : s ? V.fileUpload.upToEach(Ee(p)) : V.fileUpload.upTo(Ee(p))].filter(Boolean).join(" "), s && u != null ? V.fileUpload.maxFiles(u) : ""].filter(Boolean).map((e) => `${e}.`).join(" ") || null : ue, Fe = W !== null && W !== !1 && W !== "", Ie = pe && Ne.length > 0, G = v({
-		id: ve,
-		invalid: ne,
-		required: re,
-		disabled: I,
-		size: ae,
+var R = (e) => Array.from(e.dataTransfer?.types ?? []).includes("Files"), pe = Object.assign(({ accept: t, multiple: s = !1, maxFiles: u, maxSize: d, minSize: f, validator: m, value: h, defaultValue: b, onValueChange: w, onReject: j, onFileRemove: M, disabled: ie, invalid: N, name: oe, required: se, size: ce, variant: P = "dropzone", children: F, prompt: de, hint: I, browseLabel: pe, showList: me = !0, showRejections: he = !0, showThumbnails: ge = !0, getFileState: _e, inputRef: ve, buttonRef: ye, id: be, className: xe, style: Se, "aria-describedby": Ce, "aria-label": we, "aria-labelledby": Te, ...Ee }) => {
+	let { messages: z, locale: De } = ee(), Oe = (e) => A(e, z.fileUpload.units, De), B = C(), ke = `${B}-hint`, Ae = `${B}-prompt`, je = `${B}-browse`, Me = `${B}-rejections`, Ne = `${B}-required`, Pe = `${B}-input`, V = _(), [Fe, Ie] = E([]), H = I === void 0 ? [[ae(t, z.fileUpload), d == null ? "" : s ? z.fileUpload.upToEach(Oe(d)) : z.fileUpload.upTo(Oe(d))].filter(Boolean).join(" "), s && u != null ? z.fileUpload.maxFiles(u) : ""].filter(Boolean).map((e) => `${e}.`).join(" ") || null : I, Le = H !== null && H !== !1 && H !== "", Re = he && Fe.length > 0, U = v({
+		id: be,
+		invalid: N,
+		required: se,
+		disabled: ie,
+		size: ce,
 		"aria-describedby": [
-			xe,
-			Fe && !z ? De : void 0,
-			Ie ? Ae : void 0
+			Ce,
+			Le && !F ? ke : void 0,
+			Re ? Me : void 0
 		].filter(Boolean).join(" ") || void 0
-	}), K = G.size ?? "md", q = G.disabled, [J, Le] = t({
-		value: y,
-		defaultValue: w ?? [],
-		onChange: M
+	}), W = U.size ?? "md", G = U.disabled, [K, q] = r({
+		value: h,
+		defaultValue: b ?? [],
+		onChange: w
 	});
-	n(() => G.id ? document.getElementById(G.id) : null, () => Le(w ?? []), y === void 0);
-	let Y = E(J);
-	Y.current = J;
-	let [Re, ze] = oe(), [Be, Ve] = D(!1), X = E(0), Z = E(null), Q = E(null), He = x((e) => {
-		Z.current = e, i(ge, e);
-	}, [ge]), Ue = x((e) => {
-		Q.current = e, i(_e, e);
-	}, [_e]), $ = x((e) => {
+	i(() => U.id ? document.getElementById(U.id) : null, () => q(b ?? []), h === void 0);
+	let J = T(K);
+	J.current = K;
+	let [ze, Be] = ue(), [Ve, Y] = E(!1), X = T(0), Z = T(null), Q = T(null), He = x((e) => {
+		Z.current = e, n(ve, e);
+	}, [ve]), Ue = x((e) => {
+		Q.current = e, n(ye, e);
+	}, [ye]), $ = x((e) => {
 		let t = Z.current;
 		if (t) try {
 			if (typeof DataTransfer > "u") throw Error("unsupported");
@@ -263,185 +259,184 @@ var B = (e) => Array.from(e.dataTransfer?.types ?? []).includes("Files"), ue = O
 		}
 	}, []);
 	S(() => {
-		$(J);
-	}, [J, $]);
+		$(K);
+	}, [K, $]);
 	let We = x(() => {
-		if (q) return;
+		if (G) return;
 		let e = Z.current;
 		e && (e.value = "", e.click());
-	}, [q]);
+	}, [G]);
 	S(() => {
 		let e = Z.current;
 		if (!e) return;
-		let t = () => $(Y.current);
+		let t = () => $(J.current);
 		return e.addEventListener("cancel", t), () => e.removeEventListener("cancel", t);
 	}, [$]);
-	let Ge = (t) => {
-		if (q || t.length === 0) return;
-		let n = Y.current, r = le(t, n, {
-			accept: e,
+	let Ge = (e) => {
+		if (G || e.length === 0) return;
+		let n = J.current, r = fe(e, n, {
+			accept: t,
 			multiple: s,
 			maxFiles: u,
-			maxSize: p,
-			minSize: m,
-			validator: h
-		}, V.fileUpload, Te);
-		r.accepted.length && Le(s ? [...n, ...r.accepted] : r.accepted), Pe(r.rejections), r.rejections.length && N?.(r.rejections);
-		let i = r.accepted.length, a = r.rejections.length, o = V.fileUpload.announceAdded(i, a);
-		a === 1 && i === 0 && (o += ` ${r.rejections[0].file.name}: ${r.rejections[0].errors.join(" ")}`), ze(o);
+			maxSize: d,
+			minSize: f,
+			validator: m
+		}, z.fileUpload, De);
+		r.accepted.length && q(s ? [...n, ...r.accepted] : r.accepted), Ie(r.rejections), r.rejections.length && j?.(r.rejections);
+		let i = r.accepted.length, a = r.rejections.length, o = z.fileUpload.announceAdded(i, a);
+		a === 1 && i === 0 && (o += ` ${r.rejections[0].file.name}: ${r.rejections[0].errors.join(" ")}`), Be(o);
 	}, Ke = (e) => {
 		let t = Array.from(e.target.files ?? []);
-		Ge(t), requestAnimationFrame(() => $(Y.current));
+		Ge(t), requestAnimationFrame(() => $(J.current));
 	}, qe = (e) => {
-		let t = Y.current.filter((t) => t !== e);
-		Le(t), P?.(e), ze(`${e.name} removed.`);
+		let t = J.current.filter((t) => t !== e);
+		q(t), M?.(e), Be(`${e.name} removed.`);
 	}, Je = () => {
-		X.current = 0, Ve(!1);
+		X.current = 0, Y(!1);
 	}, Ye = (e) => {
-		B(e) && (e.preventDefault(), X.current += 1, q || Ve(!0));
+		R(e) && (e.preventDefault(), X.current += 1, G || Y(!0));
 	}, Xe = (e) => {
-		B(e) && (e.preventDefault(), e.dataTransfer.dropEffect = q ? "none" : "copy");
+		R(e) && (e.preventDefault(), e.dataTransfer.dropEffect = G ? "none" : "copy");
 	}, Ze = (e) => {
-		B(e) && (X.current = Math.max(0, X.current - 1), X.current === 0 && Ve(!1));
+		R(e) && (X.current = Math.max(0, X.current - 1), X.current === 0 && Y(!1));
 	}, Qe = (e) => {
-		B(e) && (e.preventDefault(), Je(), !q && Ge(Array.from(e.dataTransfer.files ?? [])));
-	}, $e = [ke, U && !U.isGroup ? U.labelId : void 0].filter(Boolean).join(" "), et = [G.ariaProps["aria-describedby"], G.required ? je : void 0].filter(Boolean).join(" ") || void 0, tt = de ?? (R === "button" ? V.fileUpload.uploadFiles : V.fileUpload.browseFiles), nt = K, rt = /* @__PURE__ */ O(c, {
+		R(e) && (e.preventDefault(), Je(), G || Ge(Array.from(e.dataTransfer.files ?? [])));
+	}, $e = [je, V && !V.isGroup ? V.labelId : void 0].filter(Boolean).join(" "), et = [U.ariaProps["aria-describedby"], U.required ? Ne : void 0].filter(Boolean).join(" ") || void 0, tt = pe ?? (P === "button" ? z.fileUpload.uploadFiles : z.fileUpload.browseFiles), nt = W, rt = /* @__PURE__ */ D(a, {
 		ref: Ue,
-		id: G.id,
-		className: b.browse,
-		variant: R === "button" ? "outline" : "solid",
+		id: U.id,
+		className: y.browse,
+		variant: P === "button" ? "outline" : "solid",
 		size: nt,
-		startIcon: R === "button" ? /* @__PURE__ */ O(g, { size: "sm" }) : void 0,
-		disabled: q,
+		startIcon: P === "button" ? /* @__PURE__ */ D(p, { size: "sm" }) : void 0,
+		disabled: G,
 		"aria-labelledby": $e,
 		"aria-describedby": et,
-		"aria-invalid": G.ariaProps["aria-invalid"],
-		"aria-errormessage": G.ariaProps["aria-errormessage"],
-		"aria-controls": Me,
+		"aria-invalid": U.ariaProps["aria-invalid"],
+		"aria-errormessage": U.ariaProps["aria-errormessage"],
+		"aria-controls": Pe,
 		onClick: We,
-		children: /* @__PURE__ */ O("span", {
-			id: ke,
+		children: /* @__PURE__ */ D("span", {
+			id: je,
 			children: tt
 		})
-	}), it = se ?? (s ? V.fileUpload.dropFiles : V.fileUpload.dropFile), at = typeof z == "function" ? z({
-		dragging: Be,
-		disabled: q,
+	}), it = de ?? (s ? z.fileUpload.dropFiles : z.fileUpload.dropFile), at = typeof F == "function" ? F({
+		dragging: Ve,
+		disabled: G,
 		openPicker: We
-	}) : z, ot = Fe ? /* @__PURE__ */ O("p", {
-		id: De,
-		className: b.hint,
-		children: W
-	}) : null, st = Ce ?? (U && !Se ? U.labelId : void 0), ct = !!(Se || st), lt = x(() => Q.current, []), ut = T(() => J, [J]);
-	return /* @__PURE__ */ k("div", {
-		...we,
-		role: ct ? "group" : we.role,
-		"aria-label": Se,
+	}) : F, ot = Le ? /* @__PURE__ */ D("p", {
+		id: ke,
+		className: y.hint,
+		children: H
+	}) : null, st = Te ?? (V && !we ? V.labelId : void 0), ct = !!(we || st), lt = x(() => Q.current, []), ut = te(() => K, [K]);
+	return /* @__PURE__ */ O("div", {
+		...Ee,
+		role: ct ? "group" : Ee.role,
+		"aria-label": we,
 		"aria-labelledby": st,
-		className: a(b.root, te[K], A[R], G.invalid && b.invalid, q && b.disabled, ye),
-		style: be,
-		"data-size": K,
-		"data-variant": R,
-		"data-dragging": Be || void 0,
-		"data-disabled": q || void 0,
-		"aria-disabled": q || void 0,
+		className: e(y.root, re[W], k[P], U.invalid && y.invalid, G && y.disabled, xe),
+		style: Se,
+		"data-size": W,
+		"data-variant": P,
+		"data-dragging": Ve || void 0,
+		"data-disabled": G || void 0,
+		"aria-disabled": G || void 0,
 		children: [
-			/* @__PURE__ */ O("input", {
+			/* @__PURE__ */ D("input", {
 				ref: He,
-				id: Me,
-				className: b.nativeInput,
+				id: Pe,
+				className: y.nativeInput,
 				type: "file",
-				name: L,
-				accept: e,
+				name: oe,
+				accept: t,
 				multiple: s,
-				required: G.required,
-				disabled: q,
+				required: U.required,
+				disabled: G,
 				tabIndex: -1,
 				"aria-hidden": "true",
 				onChange: Ke,
 				onInvalid: () => Q.current?.focus()
 			}),
-			G.required && /* @__PURE__ */ O(o, {
-				id: je,
-				children: V.fileUpload.required
+			U.required && /* @__PURE__ */ D(g, {
+				id: Ne,
+				children: z.fileUpload.required
 			}),
-			R === "dropzone" ? /* @__PURE__ */ k("div", {
-				className: b.dropzone,
+			P === "dropzone" ? /* @__PURE__ */ O("div", {
+				className: y.dropzone,
 				onDragEnter: Ye,
 				onDragOver: Xe,
 				onDragLeave: Ze,
 				onDrop: Qe,
 				children: [
-					/* @__PURE__ */ O("span", {
-						className: b.iconBadge,
+					/* @__PURE__ */ D("span", {
+						className: y.iconBadge,
 						"aria-hidden": "true",
-						children: /* @__PURE__ */ O(g, { size: K === "lg" ? "xl" : K === "sm" ? "sm" : "lg" })
+						children: /* @__PURE__ */ D(p, { size: W === "lg" ? "xl" : W === "sm" ? "sm" : "lg" })
 					}),
-					/* @__PURE__ */ O("div", {
-						className: b.text,
-						children: at ?? /* @__PURE__ */ k(ee, { children: [/* @__PURE__ */ O("p", {
-							id: Oe,
-							className: b.prompt,
+					/* @__PURE__ */ D("div", {
+						className: y.text,
+						children: at ?? /* @__PURE__ */ O(ne, { children: [/* @__PURE__ */ D("p", {
+							id: Ae,
+							className: y.prompt,
 							children: it
 						}), ot] })
 					}),
 					rt
 				]
-			}) : /* @__PURE__ */ k("div", {
-				className: b.buttonRow,
+			}) : /* @__PURE__ */ O("div", {
+				className: y.buttonRow,
 				children: [rt, at ?? ot]
 			}),
-			Ie && /* @__PURE__ */ k("div", {
-				id: Ae,
-				className: b.rejections,
-				children: [/* @__PURE__ */ k("div", {
-					className: b.rejectionsHeader,
+			Re && /* @__PURE__ */ O("div", {
+				id: Me,
+				className: y.rejections,
+				children: [/* @__PURE__ */ O("div", {
+					className: y.rejectionsHeader,
 					children: [
-						/* @__PURE__ */ O(f, { size: "sm" }),
-						/* @__PURE__ */ O("p", {
-							className: b.rejectionsTitle,
-							children: V.fileUpload.rejected(Ne.length)
+						/* @__PURE__ */ D(l, { size: "sm" }),
+						/* @__PURE__ */ D("p", {
+							className: y.rejectionsTitle,
+							children: z.fileUpload.rejected(Fe.length)
 						}),
-						/* @__PURE__ */ O(l, {
-							className: b.rejectionsDismiss,
+						/* @__PURE__ */ D(o, {
+							className: y.rejectionsDismiss,
 							variant: "ghost",
 							tone: "neutral",
 							size: "sm",
-							"aria-label": V.fileUpload.dismissErrors,
+							"aria-label": z.fileUpload.dismissErrors,
 							onClick: () => {
-								Pe([]), Q.current?.focus();
+								Ie([]), Q.current?.focus();
 							},
-							children: /* @__PURE__ */ O(d, { size: "sm" })
+							children: /* @__PURE__ */ D(c, { size: "sm" })
 						})
 					]
-				}), /* @__PURE__ */ O("ul", {
-					className: b.rejectionList,
-					children: Ne.map(({ file: e, errors: t }, n) => /* @__PURE__ */ k("li", {
-						className: b.rejection,
-						children: [/* @__PURE__ */ O("span", {
-							className: b.rejectionName,
+				}), /* @__PURE__ */ D("ul", {
+					className: y.rejectionList,
+					children: Fe.map(({ file: e, errors: t }, n) => /* @__PURE__ */ O("li", {
+						className: y.rejection,
+						children: [/* @__PURE__ */ D("span", {
+							className: y.rejectionName,
 							children: e.name
-						}), /* @__PURE__ */ O("span", {
-							className: b.rejectionReason,
+						}), /* @__PURE__ */ D("span", {
+							className: y.rejectionReason,
 							children: t.join(" ")
 						})]
-					}, `${ie(e)}-${n}`))
+					}, `${le(e)}-${n}`))
 				})]
 			}),
-			fe && /* @__PURE__ */ O(ce, {
+			me && /* @__PURE__ */ D(L, {
 				files: ut,
-				size: K,
-				disabled: q,
-				showThumbnails: me,
-				getFileState: he,
+				size: W,
+				disabled: G,
+				showThumbnails: ge,
+				getFileState: _e,
 				onRemove: qe,
 				focusFallback: lt
 			}),
-			/* @__PURE__ */ O(o, {
+			/* @__PURE__ */ D(g, {
 				role: "status",
-				children: Re
+				children: ze
 			})
 		]
 	});
-}, { List: ce });
-//#endregion
-export { ue as FileUpload, ce as FileUploadList, F as describeAccept, N as fileMatchesAccept, j as formatFileSize };
+}, { List: L });
+export { pe as FileUpload, L as FileUploadList, ae as describeAccept, M as fileMatchesAccept, A as formatFileSize };