@epam/ai-dial-attachment-input 1.0.0-dev.481 → 1.0.0-dev.486

package/index.js

@@ -1,16 +1,16 @@
 import { AttachmentErrorReason as e, AttachmentType as t, CodeBlockTheme as n, Highlight as r, MIME_TYPE_EXT_MAP as i, RequestStatus as a, buildCssVars as o, mergeClasses as s } from "@epam/ai-dial-chat-shared";
 import { DIAL_ICON_SIZE as c, DialGhostIconButton as l, DialSkeleton as u, DialSkeletonVariant as d, DialSpinner as f, ElementSize as p } from "@epam/ai-dial-ui-kit";
-import { IconChevronUp as m, IconClipboard as h, IconDownload as g, IconFile as _, IconFileDescription as v, IconFileTypeBmp as y, IconFileTypeCss as b, IconFileTypeCsv as x, IconFileTypeDoc as S, IconFileTypeDocx as C, IconFileTypeHtml as w, IconFileTypeJpg as T, IconFileTypeJs as E, IconFileTypeJsx as D, IconFileTypePdf as O, IconFileTypePhp as k, IconFileTypePng as A, IconFileTypePpt as j, IconFileTypeRs as M, IconFileTypeSql as N, IconFileTypeSvg as P, IconFileTypeTs as F, IconFileTypeTsx as I, IconFileTypeTxt as L, IconFileTypeVue as ee, IconFileTypeXls as te, IconFileTypeXml as ne, IconFileTypeZip as R, IconFileX as z, IconMusic as B, IconPaperclip as V, IconPhoto as H, IconReload as re, IconTerminal2 as ie, IconVideo as ae, IconX as oe } from "@tabler/icons-react";
-import { useCallback as U, useEffect as W, useMemo as se, useRef as ce, useState as G } from "react";
+import { IconChevronUp as m, IconClipboard as h, IconDownload as g, IconFile as _, IconFileDescription as v, IconFileTypeBmp as y, IconFileTypeCss as b, IconFileTypeCsv as x, IconFileTypeDoc as S, IconFileTypeDocx as C, IconFileTypeHtml as w, IconFileTypeJpg as T, IconFileTypeJs as E, IconFileTypeJsx as D, IconFileTypePdf as O, IconFileTypePhp as k, IconFileTypePng as A, IconFileTypePpt as j, IconFileTypeRs as M, IconFileTypeSql as N, IconFileTypeSvg as P, IconFileTypeTs as F, IconFileTypeTsx as I, IconFileTypeTxt as L, IconFileTypeVue as R, IconFileTypeXls as z, IconFileTypeXml as ee, IconFileTypeZip as te, IconFileX as ne, IconMusic as B, IconPaperclip as re, IconPhoto as V, IconReload as ie, IconTerminal2 as H, IconVideo as U, IconX as ae } from "@tabler/icons-react";
+import { useCallback as oe, useEffect as se, useMemo as ce, useRef as W, useState as G } from "react";
 import { Fragment as K, jsx as q, jsxs as J } from "react/jsx-runtime";
 //#region src/hooks/useLazyImageLoad.ts
 var Y = /* @__PURE__ */ function(e) {
 	return e.Idle = "idle", e.Loading = "loading", e.Loaded = "loaded", e.Error = "error", e;
 }({}), le = ({ enabled: e, src: t }) => {
-	let n = ce(null), [r, i] = G("idle");
-	return W(() => {
+	let n = W(null), [r, i] = G("idle");
+	return se(() => {
 		i(e && t ? "loading" : "idle");
-	}, [e, t]), W(() => {
+	}, [e, t]), se(() => {
 		let r = n.current;
 		if (!r || !e || !t) return;
 		let a = () => i("loaded"), o = () => i("error");
@@ -22,18 +22,42 @@ var Y = /* @__PURE__ */ function(e) {
 		imageLoadStatus: r
 	};
 }, X = {
-	card: "_card_1wsze_1",
-	cardError: "_cardError_1wsze_6",
-	cardSelected: "_cardSelected_1wsze_10",
-	cardPrompt: "_cardPrompt_1wsze_15",
-	cardPasted: "_cardPasted_1wsze_16",
-	name: "_name_1wsze_20",
-	meta: "_meta_1wsze_24",
-	loadingOverlay: "_loadingOverlay_1wsze_28",
-	actionBtn: "_actionBtn_1wsze_32",
-	removeBtnImage: "_removeBtnImage_1wsze_43",
-	hoverDownloadIcon: "_hoverDownloadIcon_1wsze_51"
-}, Z = (e) => {
+	card: "_card_ywrb5_1",
+	cardError: "_cardError_ywrb5_6",
+	cardSelected: "_cardSelected_ywrb5_10",
+	cardPrompt: "_cardPrompt_ywrb5_15",
+	cardPasted: "_cardPasted_ywrb5_16",
+	name: "_name_ywrb5_20",
+	meta: "_meta_ywrb5_24",
+	loadingOverlay: "_loadingOverlay_ywrb5_28",
+	actionBtn: "_actionBtn_ywrb5_32",
+	removeBtnImage: "_removeBtnImage_ywrb5_43",
+	hoverDownloadIcon: "_hoverDownloadIcon_ywrb5_51"
+}, ue = 5, de = 4, Z = /* @__PURE__ */ function(e) {
+	return e.None = "none", e.AllVisible = "all-visible", e.Collapsed = "collapsed", e;
+}({}), fe = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, pe = (e) => {
+	let t = e.lastIndexOf(".");
+	return t > 0 ? e.slice(0, t) : e;
+}, me = {
+	image: "Image files",
+	audio: "Audio files",
+	video: "Video files",
+	text: "Text files"
+}, he = (e) => e.map((e) => {
+	if (e.endsWith("/*")) {
+		let t = e.slice(0, -2);
+		return me[t] ?? `${t} files`;
+	}
+	let t = e.split("/")[1];
+	return t == null ? e.toUpperCase() : t.toUpperCase();
+}).join(", "), ge = (e, t) => t.length === 0 ? !1 : t.some((t) => {
+	if (t === "*" || t === "*/*") return !0;
+	if (t.endsWith("/*")) {
+		let n = t.slice(0, -2);
+		return e.startsWith(`${n}/`);
+	}
+	return e === t;
+}), _e = (e) => {
 	if (!e) return _;
 	if (e.startsWith("image/")) switch (e) {
 		case "image/jpeg":
@@ -41,9 +65,9 @@ var Y = /* @__PURE__ */ function(e) {
 		case "image/png": return A;
 		case "image/svg+xml": return P;
 		case "image/bmp": return y;
-		default: return H;
+		default: return V;
 	}
-	if (e.startsWith("video/")) return ae;
+	if (e.startsWith("video/")) return U;
 	if (e.startsWith("audio/")) return B;
 	switch (e) {
 		case "application/pdf": return O;
@@ -52,20 +76,20 @@ var Y = /* @__PURE__ */ function(e) {
 		case "application/vnd.openxmlformats-officedocument.wordprocessingml.document": return C;
 		case "application/vnd.ms-powerpoint": return j;
 		case "application/vnd.openxmlformats-officedocument.presentationml.presentation": return j;
-		case "application/vnd.ms-excel": return te;
-		case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": return te;
+		case "application/vnd.ms-excel": return z;
+		case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": return z;
 		case "application/zip":
 		case "application/x-zip-compressed":
 		case "application/x-rar-compressed":
 		case "application/x-7z-compressed":
 		case "application/gzip":
-		case "application/x-tar": return R;
+		case "application/x-tar": return te;
 		case "text/csv": return x;
 		case "text/plain": return L;
 		case "text/html":
 		case "application/xhtml+xml": return w;
 		case "text/xml":
-		case "application/xml": return ne;
+		case "application/xml": return ee;
 		case "application/sql":
 		case "text/x-sql": return N;
 		case "text/javascript":
@@ -79,29 +103,29 @@ var Y = /* @__PURE__ */ function(e) {
 		case "application/x-php": return k;
 		case "text/x-rustsrc":
 		case "application/x-rust": return M;
-		case "text/x-vue": return ee;
+		case "text/x-vue": return R;
 		default: return _;
 	}
-}, ue = (e) => {
+}, ve = (e) => {
 	let { type: n, contentType: r } = e;
-	return n === t.Prompt ? ie : n === t.Pasted ? h : n === t.Image ? H : Z(r ?? "");
-}, de = (e) => {
+	return n === t.Prompt ? H : n === t.Pasted ? h : n === t.Image ? V : _e(r ?? "");
+}, ye = (e) => {
 	let t = e.toLowerCase().split(";")[0].trim(), n = i[t];
 	if (n) return n;
 	let r = t.split("/")[1];
 	if (r && !r.startsWith("vnd.") && !r.includes("+")) return r;
-}, fe = (e) => {
+}, be = (e) => {
 	let { type: n, name: r, contentType: i } = e;
 	if (n === t.Prompt) return "Prompt";
 	if (n === t.Pasted) return "Pasted";
 	if (n === t.Image) return "Image";
 	if (i) {
-		let e = de(i);
+		let e = ye(i);
 		if (e) return `.${e}`;
 	}
 	let a = r.lastIndexOf(".");
 	return a > 0 && a < r.length - 1 ? `.${r.slice(a + 1).toLowerCase()}` : r;
-}, pe = (e, n, r) => {
+}, xe = (e, n, r) => {
 	let { type: i, status: o, previewUrl: c, url: l } = e, u = o === a.Loading, d = o === a.Error, f = i === t.Image && !!(c ?? l) && !d, p = i === t.Audio && !d, m = s(X.card, d && X.cardError, n && X.cardSelected, !d && !n && i === t.Prompt && X.cardPrompt, !d && !n && i === t.Pasted && X.cardPasted);
 	return {
 		isLoading: u,
@@ -109,40 +133,49 @@ var Y = /* @__PURE__ */ function(e) {
 		isImage: f,
 		isAudio: p,
 		areActionsVisible: d || r,
-		BottomIcon: ue(e),
-		typeLabel: fe(e),
+		BottomIcon: ve(e),
+		typeLabel: be(e),
 		cardColorClass: m,
 		removeBtnClass: f ? X.removeBtnImage : X.actionBtn
 	};
-}, me = (e) => {
-	let t = e.lastIndexOf(".");
-	return t > 0 ? e.slice(0, t) : e;
-}, he = ({ attachment: n, searchQuery: i = "", onRemove: a, onRetry: m, onExpand: h, onClick: _, isSelected: v, shouldAlwaysShowActions: y, removeLabel: b = "Remove attachment", retryLabel: x = "Retry upload", clickLabel: S = "Open attachment", colors: C, typography: w, roundedClassName: T = "rounded-xl", showHoverDownloadIcon: E = !1, className: D }) => {
-	let { id: O, name: k } = n, A = n.previewUrl ?? n.url, j = n.type === t.Pasted, M = j && h !== void 0, N = se(() => j ? k : me(k), [j, k]), P = o({
-		"--ci-card-border": C?.border,
-		"--ci-card-bg": C?.background,
-		"--ci-card-name": C?.nameText,
-		"--ci-card-meta": C?.metaText
-	}), { isLoading: F, isError: I, isImage: L, isAudio: ee, areActionsVisible: te, BottomIcon: ne, typeLabel: R, cardColorClass: z, removeBtnClass: B } = se(() => pe(n, v ?? !1, y ?? !1), [
+}, Se = (e, t) => e <= 0 ? {
+	layout: Z.None,
+	visibleCount: 0,
+	hiddenCount: 0
+} : e < 5 || t ? {
+	layout: Z.AllVisible,
+	visibleCount: e,
+	hiddenCount: 0
+} : {
+	layout: Z.Collapsed,
+	visibleCount: 4,
+	hiddenCount: e - 4
+}, Ce = ({ attachment: n, searchQuery: i = "", onRemove: a, onRetry: m, onExpand: h, onClick: _, isSelected: v, shouldAlwaysShowActions: y, labels: b, styles: x, showHoverDownloadIcon: S = !1, className: C }) => {
+	let { removeLabel: w = "Remove attachment", retryLabel: T = "Retry upload", clickLabel: E = "Open attachment" } = b ?? {}, { colors: D, typography: O, roundedClassName: k = "rounded-xl" } = x ?? {}, { id: A, name: j } = n, M = n.previewUrl ?? n.url, N = n.type === t.Pasted, P = N && h !== void 0, F = ce(() => N ? j : pe(j), [N, j]), I = o({
+		"--ci-card-border": D?.border,
+		"--ci-card-bg": D?.background,
+		"--ci-card-name": D?.nameText,
+		"--ci-card-meta": D?.metaText
+	}), { isLoading: L, isError: R, isImage: z, isAudio: ee, areActionsVisible: te, BottomIcon: ne, typeLabel: B, cardColorClass: re, removeBtnClass: H } = ce(() => xe(n, v ?? !1, y ?? !1), [
 		n,
 		v,
 		y
-	]), V = _ !== void 0 && !M && !F && !I, ie = M || V, { imageRef: ae, imageLoadStatus: U } = le({
-		enabled: L,
-		src: A
-	}), W = () => {
-		M && h ? h(O) : V && _ && _(O);
-	}, ce = (e) => {
-		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), W());
+	]), U = _ !== void 0 && !P && !L && !R, oe = P || U, { imageRef: se, imageLoadStatus: W } = le({
+		enabled: z,
+		src: M
+	}), G = () => {
+		P && h ? h(A) : U && _ && _(A);
+	}, ue = (e) => {
+		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), G());
 	};
 	if (ee) return /* @__PURE__ */ J("div", {
-		style: P,
-		className: s("group flex w-full min-w-[280px] max-w-[300px] flex-col gap-2 border p-3", T, z, D),
+		style: I,
+		className: s("group flex w-full min-w-[280px] max-w-[300px] flex-col gap-2 border p-3", k, re, C),
 		children: [/* @__PURE__ */ J("div", {
 			className: "flex items-center justify-between gap-2",
 			children: [/* @__PURE__ */ q("span", {
 				title: n.name,
-				className: s(w?.fontClassName ?? "dial-tiny-text", "min-w-0 truncate", X.name),
+				className: s(O?.fontClassName ?? "dial-tiny-text", "min-w-0 truncate", X.name),
 				children: i ? /* @__PURE__ */ q(r, {
 					text: n.name,
 					query: i,
@@ -154,10 +187,10 @@ var Y = /* @__PURE__ */ function(e) {
 					"aria-hidden": !0
 				}),
 				size: p.Small,
-				className: s("h-6 w-6 shrink-0 rounded", B),
-				"aria-label": S,
+				className: s("h-6 w-6 shrink-0 rounded", H),
+				"aria-label": E,
 				onClick: (e) => {
-					e.stopPropagation(), _(O);
+					e.stopPropagation(), _(A);
 				}
 			})]
 		}), n.playUrl && /* @__PURE__ */ q("audio", {
@@ -167,60 +200,60 @@ var Y = /* @__PURE__ */ function(e) {
 			preload: "metadata"
 		})]
 	});
-	let G = s("group relative flex h-[100px] w-[100px] flex-shrink-0 border focus-within:outline focus-within:outline-1 focus-within:outline-offset-1", T, z, !L && "flex-col gap-3 p-3", ie && "cursor-pointer", D), Z = /* @__PURE__ */ J(K, { children: [
-		L ? /* @__PURE__ */ J("div", {
+	let de = s("group relative flex h-[100px] w-[100px] flex-shrink-0 border focus-within:outline focus-within:outline-1 focus-within:outline-offset-1", k, re, !z && "flex-col gap-3 p-3", oe && "cursor-pointer", C), Z = /* @__PURE__ */ J(K, { children: [
+		z ? /* @__PURE__ */ J("div", {
 			className: "relative h-full w-full overflow-hidden",
-			children: [U !== Y.Loaded && /* @__PURE__ */ q(u, {
+			children: [W !== Y.Loaded && /* @__PURE__ */ q(u, {
 				variant: d.Rectangular,
 				width: "100%",
 				height: "100%",
-				active: U === Y.Loading,
-				overlay: /* @__PURE__ */ q(H, {
+				active: W === Y.Loading,
+				overlay: /* @__PURE__ */ q(V, {
 					size: c.LG,
-					className: w?.placeholderIconClassName ?? "text-secondary",
+					className: O?.placeholderIconClassName ?? "text-secondary",
 					"aria-hidden": !0
 				}),
-				className: s("absolute inset-0", T)
+				className: s("absolute inset-0", k)
 			}), /* @__PURE__ */ q("img", {
-				ref: ae,
-				src: A,
-				alt: k,
+				ref: se,
+				src: M,
+				alt: j,
 				loading: "lazy",
 				decoding: "async",
-				className: s("h-full w-full object-cover transition-opacity duration-200", U === Y.Loaded ? "opacity-100" : "opacity-0", T)
+				className: s("h-full w-full object-cover transition-opacity duration-200", W === Y.Loaded ? "opacity-100" : "opacity-0", k)
 			})]
-		}) : I ? /* @__PURE__ */ J(K, { children: [/* @__PURE__ */ J("div", {
+		}) : R ? /* @__PURE__ */ J(K, { children: [/* @__PURE__ */ J("div", {
 			className: "flex flex-row items-center gap-1 overflow-hidden",
 			children: [/* @__PURE__ */ q(ne, {
 				size: c.SM,
 				className: s("shrink-0", X.meta),
 				"aria-hidden": !0
 			}), /* @__PURE__ */ q("span", {
-				title: R,
-				className: s(w?.metaClassName ?? "dial-tiny-text", "min-w-0 truncate", X.meta),
-				children: R
+				title: B,
+				className: s(O?.metaClassName ?? "dial-tiny-text", "min-w-0 truncate", X.meta),
+				children: B
 			})]
 		}), /* @__PURE__ */ q("div", {
 			className: "min-w-0 flex-1",
 			children: /* @__PURE__ */ q("div", {
-				title: N,
-				className: s(w?.fontClassName ?? "dial-tiny-text", "line-clamp-3 break-words", X.name),
+				title: F,
+				className: s(O?.fontClassName ?? "dial-tiny-text", "line-clamp-3 break-words", X.name),
 				children: i ? /* @__PURE__ */ q(r, {
-					text: N,
+					text: F,
 					query: i,
 					maxLines: 3
-				}) : N
+				}) : F
 			})
 		})] }) : /* @__PURE__ */ J(K, { children: [/* @__PURE__ */ q("div", {
 			className: "min-w-0 flex-1",
 			children: /* @__PURE__ */ q("div", {
-				title: N,
-				className: s(w?.fontClassName ?? "dial-tiny-text", "line-clamp-3 break-words", X.name),
+				title: F,
+				className: s(O?.fontClassName ?? "dial-tiny-text", "line-clamp-3 break-words", X.name),
 				children: i ? /* @__PURE__ */ q(r, {
-					text: N,
+					text: F,
 					query: i,
 					maxLines: 3
-				}) : N
+				}) : F
 			})
 		}), /* @__PURE__ */ J("div", {
 			className: "flex flex-row items-center gap-1 overflow-hidden",
@@ -229,47 +262,47 @@ var Y = /* @__PURE__ */ function(e) {
 				className: s("shrink-0", X.meta),
 				"aria-hidden": !0
 			}), /* @__PURE__ */ q("span", {
-				title: R,
-				className: s(w?.metaClassName ?? "dial-tiny-text", "min-w-0 truncate", X.meta),
-				children: R
+				title: B,
+				className: s(O?.metaClassName ?? "dial-tiny-text", "min-w-0 truncate", X.meta),
+				children: B
 			})]
 		})] }),
-		F && /* @__PURE__ */ q("span", {
-			className: s("absolute inset-0 flex items-center justify-center", T, X.loadingOverlay),
+		L && /* @__PURE__ */ q("span", {
+			className: s("absolute inset-0 flex items-center justify-center", k, X.loadingOverlay),
 			children: /* @__PURE__ */ q(f, {
 				size: 40,
 				ariaLabel: "Loading attachment",
 				className: "z-50"
 			})
 		}),
-		!F && /* @__PURE__ */ J("div", {
+		!L && /* @__PURE__ */ J("div", {
 			className: s("absolute end-1 top-1 flex gap-1 transition-opacity", te ? "opacity-100" : "opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 mobile:opacity-100"),
 			children: [
-				I && m && n.errorReason !== e.UnsupportedType && /* @__PURE__ */ q(l, {
-					icon: /* @__PURE__ */ q(re, {
+				R && m && n.errorReason !== e.UnsupportedType && /* @__PURE__ */ q(l, {
+					icon: /* @__PURE__ */ q(ie, {
 						size: c.SM,
 						"aria-hidden": !0
 					}),
 					size: p.Small,
-					className: s("h-6 w-6 rounded", B),
-					"aria-label": x,
+					className: s("h-6 w-6 rounded", H),
+					"aria-label": T,
 					onClick: (e) => {
-						e.stopPropagation(), m(O);
+						e.stopPropagation(), m(A);
 					}
 				}),
 				a && /* @__PURE__ */ q(l, {
-					icon: /* @__PURE__ */ q(oe, {
+					icon: /* @__PURE__ */ q(ae, {
 						size: c.SM,
 						"aria-hidden": !0
 					}),
 					size: p.Small,
-					className: s("h-6 w-6 rounded", B),
-					"aria-label": b,
+					className: s("h-6 w-6 rounded", H),
+					"aria-label": w,
 					onClick: (e) => {
-						e.stopPropagation(), a?.(O);
+						e.stopPropagation(), a?.(A);
 					}
 				}),
-				E && !a && !I && /* @__PURE__ */ q(g, {
+				S && !a && !R && /* @__PURE__ */ q(g, {
 					size: c.SM,
 					"aria-hidden": !0,
 					className: s("h-6 w-6 rounded-lg p-1", X.hoverDownloadIcon)
@@ -277,160 +310,151 @@ var Y = /* @__PURE__ */ function(e) {
 			]
 		})
 	] });
-	return ie ? /* @__PURE__ */ q("div", {
-		style: P,
-		className: G,
-		onClick: W,
-		onKeyDown: ce,
+	return oe ? /* @__PURE__ */ q("div", {
+		style: I,
+		className: de,
+		onClick: G,
+		onKeyDown: ue,
 		tabIndex: 0,
 		role: "button",
-		"aria-label": V ? S : void 0,
+		"aria-label": U ? E : void 0,
 		children: Z
 	}) : /* @__PURE__ */ q("div", {
-		style: P,
-		className: G,
+		style: I,
+		className: de,
 		children: Z
 	});
-}, ge = ({ attachments: e, onRemove: t, onRetry: n, onExpand: r, ariaLabel: i = "Attached files", removeLabel: a, retryLabel: o, onAttachmentClick: c, clickLabel: l, className: u }) => e.length === 0 ? null : /* @__PURE__ */ q("div", {
-	role: "list",
-	"aria-label": i,
-	className: s("flex w-full min-w-0 gap-2 overflow-x-auto", u),
-	children: e.map((e) => /* @__PURE__ */ q("div", {
-		role: "listitem",
-		children: /* @__PURE__ */ q(he, {
-			attachment: e,
-			onRemove: t,
-			onRetry: n,
-			onExpand: r,
-			removeLabel: a,
-			retryLabel: o,
-			onClick: c ? () => c(e) : void 0,
-			clickLabel: l
-		})
-	}, e.id))
-}), _e = /* @__PURE__ */ function(e) {
-	return e.None = "none", e.AllVisible = "all-visible", e.Collapsed = "collapsed", e;
-}({}), ve = 5, ye = 4, be = (e, t) => e <= 0 ? {
-	layout: "none",
-	visibleCount: 0,
-	hiddenCount: 0
-} : e < 5 || t ? {
-	layout: "all-visible",
-	visibleCount: e,
-	hiddenCount: 0
-} : {
-	layout: "collapsed",
-	visibleCount: 4,
-	hiddenCount: e - 4
+}, we = ({ attachments: e, onRemove: t, onRetry: n, onExpand: r, onAttachmentClick: i, labels: a, className: o }) => {
+	let { ariaLabel: c = "Attached files", removeLabel: l, retryLabel: u, clickLabel: d } = a ?? {};
+	return e.length === 0 ? null : /* @__PURE__ */ q("div", {
+		role: "list",
+		"aria-label": c,
+		className: s("flex w-full min-w-0 gap-2 overflow-x-auto", o),
+		children: e.map((e) => /* @__PURE__ */ q("div", {
+			role: "listitem",
+			children: /* @__PURE__ */ q(Ce, {
+				attachment: e,
+				onRemove: t,
+				onRetry: n,
+				onExpand: r,
+				labels: {
+					removeLabel: l,
+					retryLabel: u,
+					clickLabel: d
+				},
+				onClick: i ? () => i(e) : void 0
+			})
+		}, e.id))
+	});
 }, Q = {
-	tile: "_tile_1x7ag_2",
-	tileLight: "_tileLight_1x7ag_27",
-	tileError: "_tileError_1x7ag_31",
-	nameText: "_nameText_1x7ag_38",
-	typeText: "_typeText_1x7ag_39",
-	retryIcon: "_retryIcon_1x7ag_51",
-	hoverIcon: "_hoverIcon_1x7ag_55",
-	track: "_track_1x7ag_60",
-	indeterminateFill: "_indeterminateFill_1x7ag_64",
-	"attachment-tile-indeterminate": "_attachment-tile-indeterminate_1x7ag_1"
-}, xe = {
+	tile: "_tile_488nu_1",
+	tileLight: "_tileLight_488nu_12",
+	tileError: "_tileError_488nu_16",
+	nameText: "_nameText_488nu_23",
+	typeText: "_typeText_488nu_24",
+	retryIcon: "_retryIcon_488nu_36",
+	hoverIcon: "_hoverIcon_488nu_40",
+	track: "_track_488nu_45",
+	indeterminateFill: "_indeterminateFill_488nu_49",
+	"attachment-tile-indeterminate": "_attachment-tile-indeterminate_488nu_1"
+}, Te = {
 	[e.Network]: "Upload failed · network error",
 	[e.UnsupportedType]: "Upload failed · unsupported file type"
-}, Se = ({ attachment: t, onClick: r, onRetry: i, clickLabel: o = "Download attachment", retryLabel: u = "Retry upload", theme: d = n.Dark, className: f }) => {
-	let { id: m, name: h, status: _, errorReason: v } = t, y = _ === a.Loading, b = _ === a.Error, x = b && (v && xe[v] || "Upload failed"), { BottomIcon: S, typeLabel: C } = pe(t, !1, !1), w = !b && !y && r !== void 0, T = b && !!i && v !== e.UnsupportedType, E = w || T ? "pe-5" : void 0, D = () => {
-		w && r?.(t);
-	}, O = (e) => {
-		(e.key === "Enter" || e.key === " ") && w && (e.preventDefault(), D());
-	}, k = s("group relative flex size-[84px] flex-col justify-between gap-1 overflow-hidden rounded-xl border p-1.5", Q.tile, !b && d === n.Light && Q.tileLight, b && Q.tileError), A = /* @__PURE__ */ q("div", {
-		title: h,
-		className: s("dial-caption-text line-clamp-2 min-w-0 break-words", Q.nameText, !b && E),
-		children: h
-	}), j = /* @__PURE__ */ J("div", {
-		className: s("flex items-center gap-1 overflow-hidden", b && E),
-		children: [/* @__PURE__ */ q(S, {
+}, Ee = ({ attachment: t, onClick: r, onRetry: i, labels: o, styles: u, theme: d = n.Dark, className: f }) => {
+	let { clickLabel: m = "Download attachment", retryLabel: h = "Retry upload", sizeLabel: _ } = o ?? {}, { nameClassName: v = "dial-caption-text", metaClassName: y = "dial-caption-text" } = u ?? {}, { id: b, name: x, status: S, errorReason: C } = t, w = S === a.Loading, T = S === a.Error, E = T && (C && Te[C] || "Upload failed"), { BottomIcon: D, typeLabel: O } = xe(t, !1, !1), k = !T && !w && r !== void 0, A = T && !!i && C !== e.UnsupportedType, j = k || A ? "pe-5" : void 0, M = () => {
+		k && r?.(t);
+	}, N = (e) => {
+		(e.key === "Enter" || e.key === " ") && k && (e.preventDefault(), M());
+	}, P = s("group relative flex size-[84px] flex-col justify-between gap-1 overflow-hidden rounded-xl border p-1.5", Q.tile, !T && d === n.Light && Q.tileLight, T && Q.tileError), F = /* @__PURE__ */ q("div", {
+		title: x,
+		className: s(v, "line-clamp-2 min-w-0 break-words", Q.nameText, !T && j),
+		children: x
+	}), I = /* @__PURE__ */ J("div", {
+		className: s("flex items-center gap-1 overflow-hidden", T && j),
+		children: [/* @__PURE__ */ q(D, {
 			size: 16,
 			className: Q.typeText,
 			"aria-hidden": !0
 		}), /* @__PURE__ */ q("span", {
-			className: s("dial-caption-text truncate", Q.typeText),
-			children: C
+			className: s(y, "truncate", Q.typeText),
+			children: _ ? `${O} · ${_}` : O
 		})]
-	}), M = /* @__PURE__ */ J(K, { children: [
-		b ? /* @__PURE__ */ J(K, { children: [j, A] }) : /* @__PURE__ */ J(K, { children: [A, j] }),
-		y && /* @__PURE__ */ q("div", {
+	}), L = /* @__PURE__ */ J(K, { children: [
+		T ? /* @__PURE__ */ J(K, { children: [I, F] }) : /* @__PURE__ */ J(K, { children: [F, I] }),
+		w && /* @__PURE__ */ q("div", {
 			role: "progressbar",
 			"aria-label": "Uploading",
 			className: s("absolute inset-x-2 bottom-2 h-[3px] overflow-hidden rounded-full", Q.track),
 			children: /* @__PURE__ */ q("div", { className: s("h-full w-1/3 rounded-full", Q.indeterminateFill) })
 		}),
-		w && /* @__PURE__ */ q(g, {
+		k && /* @__PURE__ */ q(g, {
 			size: c.SM,
 			"aria-hidden": !0,
 			className: s("absolute end-1 top-1 h-6 w-6 rounded-lg p-1 opacity-0 transition-opacity group-hover:opacity-100 mobile:opacity-100", Q.hoverIcon)
 		}),
-		T && /* @__PURE__ */ q(l, {
-			icon: /* @__PURE__ */ q(re, {
+		A && /* @__PURE__ */ q(l, {
+			icon: /* @__PURE__ */ q(ie, {
 				size: c.SM,
 				"aria-hidden": !0
 			}),
 			size: p.Small,
 			className: s("absolute end-1 top-1 h-6 w-6 rounded-lg", Q.retryIcon),
-			"aria-label": u,
+			"aria-label": h,
 			onClick: (e) => {
-				e.stopPropagation(), i(m);
+				e.stopPropagation(), i(b);
 			}
 		})
 	] });
 	return /* @__PURE__ */ q("div", {
 		className: s("inline-flex", f),
-		children: w ? /* @__PURE__ */ q("div", {
+		children: k ? /* @__PURE__ */ q("div", {
 			role: "button",
 			tabIndex: 0,
-			"aria-label": o,
-			onClick: D,
-			onKeyDown: O,
-			className: s(k, "cursor-pointer focus-within:outline focus-within:outline-1 focus-within:outline-offset-1"),
-			children: M
+			"aria-label": m,
+			onClick: M,
+			onKeyDown: N,
+			className: s(P, "cursor-pointer focus-within:outline focus-within:outline-1 focus-within:outline-offset-1"),
+			children: L
 		}) : /* @__PURE__ */ q("div", {
-			className: k,
-			title: x || void 0,
-			children: M
+			className: P,
+			title: E || void 0,
+			children: L
 		})
 	});
-}, Ce = { tile: "_tile_kvom5_1" }, we = ({ count: e, onClick: t, ariaLabel: n, children: r, className: i }) => /* @__PURE__ */ q("button", {
+}, De = { tile: "_tile_1s4d7_1" }, Oe = ({ count: e, onClick: t, ariaLabel: n, children: r, fontClassName: i = "dial-small-semi-text", className: a }) => /* @__PURE__ */ q("button", {
 	type: "button",
 	onClick: t,
 	"aria-label": n ?? `Show ${e} more attachments`,
-	className: s("dial-small-semi-text flex size-[84px] items-center justify-center rounded-xl border", Ce.tile, i),
+	className: s("flex size-[84px] items-center justify-center rounded-xl border", i, De.tile, a),
 	children: r ?? /* @__PURE__ */ q("bdi", {
 		dir: "ltr",
 		children: `+${e}`
 	})
 }), $ = {
-	container: "_container_4zxg9_1",
-	headerIcon: "_headerIcon_4zxg9_6",
-	headerLabel: "_headerLabel_4zxg9_7",
-	downloadAllButton: "_downloadAllButton_4zxg9_8",
-	imageTile: "_imageTile_4zxg9_12"
-}, Te = (e, t) => `${e} ${t}${e === 1 ? "" : "s"}`, Ee = ({ attachments: e, onAttachmentClick: n, onDownloadAll: r, onRetry: i, getSizeLabel: o, ariaLabel: u = "Attachments", clickLabel: d = "Download attachment", retryLabel: f = "Retry upload", showLessLabel: p = "Show less", downloadAllLabel: h = "Download all", theme: v, className: y }) => {
-	let [b, x] = G(!1), S = se(() => be(e.length, b), [e.length, b]);
+	container: "_container_7fktb_1",
+	headerIcon: "_headerIcon_7fktb_6",
+	headerLabel: "_headerLabel_7fktb_7",
+	downloadAllButton: "_downloadAllButton_7fktb_8",
+	imageTile: "_imageTile_7fktb_12"
+}, ke = (e, t) => `${e} ${t}${e === 1 ? "" : "s"}`, Ae = ({ attachments: e, onAttachmentClick: n, onDownloadAll: r, onRetry: i, getSizeLabel: o, labels: u, styles: d, theme: f, className: p }) => {
+	let { ariaLabel: h = "Attachments", clickLabel: v = "Download attachment", retryLabel: y = "Retry upload", showLessLabel: b = "Show less", downloadAllLabel: x = "Download all" } = u ?? {}, { headerLabelClassName: S = "dial-tiny-semi-text" } = d ?? {}, [C, w] = G(!1), T = ce(() => Se(e.length, C), [e.length, C]);
 	if (e.length === 0) return null;
-	let C = e.some((e) => e.type === t.Image), w = e.some((e) => e.type !== t.Image), T = C && w, E = e.length >= 5, D = T ? V : C ? H : _, O = Te(e.length, "attachment"), k = e.slice(0, S.visibleCount);
+	let E = e.some((e) => e.type === t.Image), D = e.some((e) => e.type !== t.Image), O = E && D, k = e.length >= 5, A = O ? re : E ? V : _, j = ke(e.length, "attachment"), M = e.slice(0, T.visibleCount);
 	return /* @__PURE__ */ J("div", {
 		role: "group",
-		"aria-label": u,
-		className: s("rounded-2xl border p-3", E ? "w-full min-w-0 max-w-[492px]" : "max-w-[420px]", $.container, y),
+		"aria-label": h,
+		className: s("rounded-2xl border p-3", k ? "w-full min-w-0 max-w-[492px]" : "max-w-[420px]", $.container, p),
 		children: [/* @__PURE__ */ J("div", {
 			className: "mb-3 flex min-h-6 items-center gap-2",
 			children: [
-				/* @__PURE__ */ q(D, {
+				/* @__PURE__ */ q(A, {
 					size: c.SM,
 					className: s("shrink-0", $.headerIcon),
 					"aria-hidden": !0
 				}),
 				/* @__PURE__ */ q("span", {
-					className: s("dial-tiny-semi-text", $.headerLabel),
-					children: O
+					className: s(S, $.headerLabel),
+					children: j
 				}),
 				e.length >= 2 && (r || n) && /* @__PURE__ */ q(l, {
 					icon: /* @__PURE__ */ q(g, {
@@ -438,7 +462,7 @@ var Y = /* @__PURE__ */ function(e) {
 						"aria-hidden": !0
 					}),
 					className: s("ms-auto h-6 w-6 rounded-lg", $.downloadAllButton),
-					"aria-label": h,
+					"aria-label": x,
 					onClick: () => {
 						let t = e.filter((e) => e.status === a.Idle);
 						r ? r(t) : t.forEach((e) => n?.(e));
@@ -447,43 +471,47 @@ var Y = /* @__PURE__ */ function(e) {
 			]
 		}), /* @__PURE__ */ J("div", {
 			role: "list",
-			"aria-label": O,
-			className: s("gap-3", E ? "grid grid-cols-[repeat(5,84px)] overflow-x-auto" : "flex flex-wrap"),
+			"aria-label": j,
+			className: s("gap-3", k ? "grid grid-cols-[repeat(5,84px)] overflow-x-auto" : "flex flex-wrap"),
 			children: [
-				k.map((e) => /* @__PURE__ */ q("div", {
+				M.map((e) => /* @__PURE__ */ q("div", {
 					role: "listitem",
-					children: e.type === t.Image ? /* @__PURE__ */ q(he, {
+					children: e.type === t.Image ? /* @__PURE__ */ q(Ce, {
 						attachment: e,
 						onClick: n ? () => n(e) : void 0,
 						onRetry: i,
-						clickLabel: d,
-						retryLabel: f,
-						roundedClassName: "rounded-xl",
+						labels: {
+							clickLabel: v,
+							retryLabel: y
+						},
+						styles: { roundedClassName: "rounded-xl" },
 						showHoverDownloadIcon: !0,
 						className: s("size-[84px]", $.imageTile)
-					}) : /* @__PURE__ */ q(Se, {
+					}) : /* @__PURE__ */ q(Ee, {
 						attachment: e,
-						sizeLabel: o?.(e),
 						onClick: n,
 						onRetry: i,
-						clickLabel: d,
-						retryLabel: f,
-						theme: v
+						labels: {
+							clickLabel: v,
+							retryLabel: y,
+							sizeLabel: o?.(e)
+						},
+						theme: f
 					})
 				}, e.id)),
-				S.layout === _e.Collapsed && /* @__PURE__ */ q("div", {
+				T.layout === Z.Collapsed && /* @__PURE__ */ q("div", {
 					role: "listitem",
-					children: /* @__PURE__ */ q(we, {
-						count: S.hiddenCount,
-						onClick: () => x(!0)
+					children: /* @__PURE__ */ q(Oe, {
+						count: T.hiddenCount,
+						onClick: () => w(!0)
 					})
 				}),
-				E && b && /* @__PURE__ */ q("div", {
+				k && C && /* @__PURE__ */ q("div", {
 					role: "listitem",
-					children: /* @__PURE__ */ q(we, {
+					children: /* @__PURE__ */ q(Oe, {
 						count: 0,
-						onClick: () => x(!1),
-						ariaLabel: p,
+						onClick: () => w(!1),
+						ariaLabel: b,
 						children: /* @__PURE__ */ q(m, {
 							size: c.MD,
 							"aria-hidden": !0
@@ -493,34 +521,44 @@ var Y = /* @__PURE__ */ function(e) {
 			]
 		})]
 	});
-}, De = ({ isVisible: e, isAttachmentsAllowed: t = !0, title: n, subtitle: r, iconClassName: i = "text-accent-primary", deniedIconClassName: a = "text-error", titleClassName: o = "heading-3 font-semibold", subtitleClassName: c = "dial-small-text" }) => {
+}, je = {
+	overlay: "_overlay_wr7ez_1",
+	icon: "_icon_wr7ez_5",
+	deniedIcon: "_deniedIcon_wr7ez_9"
+}, Me = ({ isVisible: e, isAttachmentsAllowed: t = !0, title: n, subtitle: r, styles: i }) => {
+	let { colors: a, typography: c } = i ?? {}, { titleClassName: l = "heading-3 font-semibold", subtitleClassName: u = "dial-small-text" } = c ?? {};
 	if (!e) return null;
-	let l = n ?? (t ? "Attach files" : "No attachments allowed"), u = r ?? (t ? "Drop files here to attach them to message" : "Attachments can't be added to message"), d = t ? i : a, f = (e) => {
+	let d = o({
+		"--fd-bg": a?.background,
+		"--fd-icon": a?.icon,
+		"--fd-denied-icon": a?.deniedIcon
+	}), f = n ?? (t ? "Attach files" : "No attachments allowed"), p = r ?? (t ? "Drop files here to attach them to message" : "Attachments can't be added to message"), m = t ? je.icon : je.deniedIcon, h = (e) => {
 		e.preventDefault();
-	}, p = t ? v : z;
+	}, g = t ? v : ne;
 	return /* @__PURE__ */ q("div", {
-		className: s("fixed inset-0 z-[9999] flex items-center justify-center bg-blackout backdrop-blur-sm", t ? "pointer-events-none" : "pointer-events-auto cursor-not-allowed"),
-		onDragOver: t ? void 0 : f,
-		onDrop: t ? void 0 : f,
+		className: s("fixed inset-0 z-[9999] flex items-center justify-center backdrop-blur-sm", je.overlay, t ? "pointer-events-none" : "pointer-events-auto cursor-not-allowed"),
+		onDragOver: t ? void 0 : h,
+		onDrop: t ? void 0 : h,
+		style: d,
 		children: /* @__PURE__ */ J("div", {
 			className: "flex flex-col items-center text-center",
 			children: [
-				/* @__PURE__ */ q(p, {
+				/* @__PURE__ */ q(g, {
 					size: 100,
-					className: d
+					className: m
 				}),
 				/* @__PURE__ */ q("span", {
-					className: s("mt-5", o),
-					children: l
+					className: s("mt-5", l),
+					children: f
 				}),
 				/* @__PURE__ */ q("span", {
-					className: s("mt-4", c),
-					children: u
+					className: s("mt-4", u),
+					children: p
 				})
 			]
 		})
 	});
-}, Oe = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, ke = (e, n) => ({ handlePaste: U((r) => {
+}, Ne = (e, n) => ({ handlePaste: oe((r) => {
 	if (!r.clipboardData) return;
 	let i = Array.from(r.clipboardData.items).filter((e) => e.kind === "file" && e.type.startsWith("image/")), o = r.clipboardData.getData("text/plain").length > 0;
 	if (i.length > 0 && !o) {
@@ -529,7 +567,7 @@ var Y = /* @__PURE__ */ function(e) {
 			let r = e.getAsFile();
 			if (!r) continue;
 			let i = new File([r], "Screenshot.png", { type: r.type }), o = {
-				id: Oe(),
+				id: fe(),
 				name: "Screenshot.png",
 				contentType: r.type,
 				file: i,
@@ -545,7 +583,7 @@ var Y = /* @__PURE__ */ function(e) {
 	let s = r.clipboardData.getData("text/plain");
 	if (s.length > n) {
 		let n = s.trim(), i = (n.length > 80 ? `${n.slice(0, 80).trimEnd()}…` : n) || "Pasted text", o = new File([s], i, { type: "text/plain" }), c = {
-			id: Oe(),
+			id: fe(),
 			name: i,
 			contentType: "text/plain",
 			file: o,
@@ -554,25 +592,6 @@ var Y = /* @__PURE__ */ function(e) {
 		};
 		r.preventDefault(), e([c]);
 	}
-}, [e, n]) }), Ae = {
-	image: "Image files",
-	audio: "Audio files",
-	video: "Video files",
-	text: "Text files"
-}, je = (e) => e.map((e) => {
-	if (e.endsWith("/*")) {
-		let t = e.slice(0, -2);
-		return Ae[t] ?? `${t} files`;
-	}
-	let t = e.split("/")[1];
-	return t == null ? e.toUpperCase() : t.toUpperCase();
-}).join(", "), Me = (e, t) => t.length === 0 ? !1 : t.some((t) => {
-	if (t === "*" || t === "*/*") return !0;
-	if (t.endsWith("/*")) {
-		let n = t.slice(0, -2);
-		return e.startsWith(`${n}/`);
-	}
-	return e === t;
-}), Ne = 100;
+}, [e, n]) }), Pe = 100;
 //#endregion
-export { ye as ATTACHMENT_COLLAPSED_VISIBLE_COUNT, ve as ATTACHMENT_COLLAPSE_THRESHOLD, he as AttachmentCard, Se as AttachmentFileRow, Ee as AttachmentGroup, we as AttachmentMoreTile, _e as AttachmentTilesLayout, ge as AttachmentTray, De as FileDndOverlay, Y as LazyImageLoadStatus, Ne as MAX_UPLOADS_PER_MINUTE, Oe as generateAttachmentId, pe as getAttachmentCardState, Z as getAttachmentIcon, be as getAttachmentTilesPlan, de as getExtFromContentType, me as getNameWithoutExtension, Me as isMimeTypeAllowed, je as mimeTypesToExtensionLabels, ke as useClipboardPaste, le as useLazyImageLoad };
+export { de as ATTACHMENT_COLLAPSED_VISIBLE_COUNT, ue as ATTACHMENT_COLLAPSE_THRESHOLD, Ce as AttachmentCard, Ee as AttachmentFileRow, Ae as AttachmentGroup, Oe as AttachmentMoreTile, Z as AttachmentTilesLayout, we as AttachmentTray, Me as FileDndOverlay, Y as LazyImageLoadStatus, Pe as MAX_UPLOADS_PER_MINUTE, fe as generateAttachmentId, xe as getAttachmentCardState, _e as getAttachmentIcon, Se as getAttachmentTilesPlan, ye as getExtFromContentType, pe as getNameWithoutExtension, ge as isMimeTypeAllowed, he as mimeTypesToExtensionLabels, Ne as useClipboardPaste, le as useLazyImageLoad };