@epam/ai-dial-attachment-input 1.0.0-dev.514 → 1.0.0-dev.515

package/index.js

@@ -1,41 +1,12 @@
-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 ee, IconFileTypeDocx as S, IconFileTypeHtml as C, IconFileTypeJpg as w, IconFileTypeJs as te, IconFileTypeJsx as T, IconFileTypePdf as E, IconFileTypePhp as D, IconFileTypePng as O, IconFileTypePpt as k, IconFileTypeRs as A, IconFileTypeSql as j, IconFileTypeSvg as M, IconFileTypeTs as N, IconFileTypeTsx as P, IconFileTypeTxt as F, IconFileTypeVue as I, IconFileTypeXls as L, IconFileTypeXml as R, IconFileTypeZip as z, IconFileX as B, IconMusic as ne, IconPaperclip as V, IconPhoto as re, IconReload as ie, IconTerminal2 as ae, IconVideo as H, IconX as oe } from "@tabler/icons-react";
-import { useCallback as se, useEffect as U, useId as W, useMemo as ce, useRef as le, useState as ue } from "react";
-import { Fragment as G, jsx as K, jsxs as q } from "react/jsx-runtime";
-//#region src/hooks/useLazyImageLoad.ts
-var J = /* @__PURE__ */ function(e) {
-	return e.Idle = "idle", e.Loading = "loading", e.Loaded = "loaded", e.Error = "error", e;
-}({}), de = ({ enabled: e, src: t }) => {
-	let n = le(null), [r, i] = ue("idle");
-	return U(() => {
-		i(e && t ? "loading" : "idle");
-	}, [e, t]), U(() => {
-		let r = n.current;
-		if (!r || !e || !t) return;
-		let a = () => i("loaded"), o = () => i("error");
-		return r.addEventListener("load", a), r.addEventListener("error", o), r.complete && i(r.naturalWidth > 0 ? "loaded" : "error"), () => {
-			r.removeEventListener("load", a), r.removeEventListener("error", o);
-		};
-	}, [e, t]), {
-		imageRef: n,
-		imageLoadStatus: r
-	};
-}, Y = {
-	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"
-}, fe = 5, pe = 4, X = /* @__PURE__ */ function(e) {
+import { AttachmentErrorReason as e, AttachmentType as t, Highlight as n, MIME_TYPE_EXT_MAP as r, RequestStatus as i, buildCssVars as a, mergeClasses as o } from "@epam/ai-dial-chat-shared";
+import { useCallback as s, useEffect as c, useId as l, useMemo as u, useRef as d, useState as f } from "react";
+import { IconChevronUp as p, IconClipboard as m, IconDownload as h, IconExternalLink 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 B, IconFileTypeZip as V, IconFileX as ee, IconMusic as te, IconPaperclip as ne, IconPhoto as H, IconReload as re, IconTerminal2 as ie, IconVideo as ae, IconX as oe } from "@tabler/icons-react";
+import { DIAL_ICON_SIZE as U, DialGhostIconButton as se, DialSkeleton as ce, DialSkeletonVariant as le, ElementSize as ue } from "@epam/ai-dial-ui-kit";
+import { Fragment as W, jsx as G, jsxs as K } from "react/jsx-runtime";
+//#region src/constants/attachment-group.ts
+var de = 5, fe = 4, q = "flex size-[84px] items-center justify-center rounded-xl border", J = /* @__PURE__ */ function(e) {
 	return e.None = "none", e.AllVisible = "all-visible", e.Collapsed = "collapsed", e;
-}({}), Z = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, me = (e) => {
+}({}), pe = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, me = (e) => {
 	let t = e.lastIndexOf(".");
 	return t > 0 ? e.slice(0, t) : e;
 }, he = {
@@ -61,59 +32,59 @@ var J = /* @__PURE__ */ function(e) {
 	if (!e) return _;
 	if (e.startsWith("image/")) switch (e) {
 		case "image/jpeg":
-		case "image/jpg": return w;
-		case "image/png": return O;
-		case "image/svg+xml": return M;
+		case "image/jpg": return T;
+		case "image/png": return A;
+		case "image/svg+xml": return P;
 		case "image/bmp": return y;
-		default: return re;
+		default: return H;
 	}
-	if (e.startsWith("video/")) return H;
-	if (e.startsWith("audio/")) return ne;
+	if (e.startsWith("video/")) return ae;
+	if (e.startsWith("audio/")) return te;
 	switch (e) {
-		case "application/pdf": return E;
+		case "application/pdf": return O;
 		case "application/msword":
-		case "application/vnd.ms-word": return ee;
-		case "application/vnd.openxmlformats-officedocument.wordprocessingml.document": return S;
-		case "application/vnd.ms-powerpoint": return k;
-		case "application/vnd.openxmlformats-officedocument.presentationml.presentation": return k;
-		case "application/vnd.ms-excel": return L;
-		case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": return L;
+		case "application/vnd.ms-word": return S;
+		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 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 z;
+		case "application/x-tar": return V;
 		case "text/csv": return x;
-		case "text/plain": return F;
+		case "text/plain": return L;
 		case "text/html":
-		case "application/xhtml+xml": return C;
+		case "application/xhtml+xml": return w;
 		case "text/xml":
-		case "application/xml": return R;
+		case "application/xml": return B;
 		case "application/sql":
-		case "text/x-sql": return j;
+		case "text/x-sql": return N;
 		case "text/javascript":
-		case "application/javascript": return te;
-		case "text/jsx": return T;
+		case "application/javascript": return E;
+		case "text/jsx": return D;
 		case "application/typescript":
-		case "text/typescript": return N;
-		case "text/tsx": return P;
+		case "text/typescript": return F;
+		case "text/tsx": return I;
 		case "text/css": return b;
 		case "text/x-php":
-		case "application/x-php": return D;
+		case "application/x-php": return k;
 		case "text/x-rustsrc":
-		case "application/x-rust": return A;
-		case "text/x-vue": return I;
+		case "application/x-rust": return M;
+		case "text/x-vue": return R;
 		default: return _;
 	}
 }, ye = (e) => {
 	let { type: n, contentType: r } = e;
-	return n === t.Prompt ? ae : n === t.Pasted ? h : n === t.Image ? re : ve(r ?? "");
+	return n === t.Prompt ? ie : n === t.Pasted ? m : n === t.Image ? H : ve(r ?? "");
 }, be = (e) => {
-	let t = e.toLowerCase().split(";")[0].trim(), n = i[t];
+	let t = e.toLowerCase().split(";")[0].trim(), n = r[t];
 	if (n) return n;
-	let r = t.split("/")[1];
-	if (r && !r.startsWith("vnd.") && !r.includes("+")) return r;
+	let i = t.split("/")[1];
+	if (i && !i.startsWith("vnd.") && !i.includes("+")) return i;
 }, xe = (e, n) => {
 	let { type: r, name: i, contentType: a } = e;
 	if (r === t.Prompt) return n.promptLabel ?? "Prompt";
@@ -125,234 +96,307 @@ var J = /* @__PURE__ */ function(e) {
 	}
 	let o = i.lastIndexOf(".");
 	return o > 0 && o < i.length - 1 ? `.${i.slice(o + 1).toLowerCase()}` : i;
-}, Se = (e, n, r, i = {}) => {
-	let { type: o, status: c, previewUrl: l, url: u } = e, d = c === a.Loading, f = c === a.Error, p = o === t.Image && !!(l ?? u) && !f, m = o === t.Audio && !f, h = s(Y.card, f && Y.cardError, n && Y.cardSelected, !f && !n && o === t.Prompt && Y.cardPrompt, !f && !n && o === t.Pasted && Y.cardPasted);
+}, Y = (e, n = {}) => {
+	let { type: r, status: a, previewUrl: o, url: s } = e, c = a === i.Loading, l = a === i.Error, u = r === t.Image && !!(o ?? s) && !l, d = r === t.Audio && !l, f = r === t.Link && !l;
 	return {
-		isLoading: d,
-		isError: f,
-		isImage: p,
-		isAudio: m,
-		areActionsVisible: f || r,
-		BottomIcon: ye(e),
-		typeLabel: xe(e, i),
-		cardColorClass: h,
-		removeBtnClass: p ? Y.removeBtnImage : Y.actionBtn
+		isLoading: c,
+		isError: l,
+		isImage: u,
+		isAudio: d,
+		isLink: f,
+		BottomIcon: f ? null : ye(e),
+		typeLabel: f ? null : xe(e, n)
 	};
-}, Ce = (e, t) => e <= 0 ? {
-	layout: X.None,
+}, Se = (e, t) => e <= 0 ? {
+	layout: J.None,
 	visibleCount: 0,
 	hiddenCount: 0
 } : e < 5 || t ? {
-	layout: X.AllVisible,
+	layout: J.AllVisible,
 	visibleCount: e,
 	hiddenCount: 0
 } : {
-	layout: X.Collapsed,
+	layout: J.Collapsed,
 	visibleCount: 4,
 	hiddenCount: e - 4
-}, we = ({ attachment: n, searchQuery: i = "", onRemove: a, onRetry: m, onExpand: h, onClick: _, isSelected: v, shouldAlwaysShowActions: y, labels: b, styles: x, showHoverDownloadIcon: ee = !1 }) => {
-	let { removeLabel: S = "Remove attachment", retryLabel: C = "Retry upload", clickLabel: w = "Open attachment", expandLabel: te = "Expand pasted text", loadingLabel: T = "Loading attachment", uploadFailedStatusLabel: E = "Upload failed" } = b ?? {}, { colors: D, typography: O, roundedClassName: k = "rounded-xl", className: A } = x ?? {}, { id: j, name: M } = n, N = n.previewUrl ?? n.url, P = n.type === t.Pasted, F = P && h !== void 0, I = ce(() => P ? M : me(M), [P, M]), L = o({
-		"--ci-card-border": D?.border,
-		"--ci-card-bg": D?.background,
-		"--ci-card-name": D?.nameText,
-		"--ci-card-meta": D?.metaText,
-		"--ci-card-border-error": D?.borderError,
-		"--ci-card-bg-selected": D?.backgroundSelected,
-		"--ci-card-border-selected": D?.borderSelected,
-		"--ci-card-bg-hover": D?.backgroundHover,
-		"--ci-loading-overlay-bg": D?.loadingOverlayBackground,
-		"--ci-card-action-color": D?.actionColor,
-		"--ci-card-remove-bg-hover": D?.actionBackgroundHover,
-		"--ci-card-focus-outline": D?.focusOutline,
-		"--ci-card-remove-bg": D?.removeBackground,
-		"--ci-card-remove-color": D?.removeColor,
-		"--ci-card-hover-icon-bg": D?.hoverIconBackground,
-		"--ci-card-hover-icon-color": D?.hoverIconColor
-	}), { isLoading: R, isError: z, isImage: B, isAudio: ne, areActionsVisible: V, BottomIcon: ae, typeLabel: H, cardColorClass: se, removeBtnClass: U } = ce(() => Se(n, v ?? !1, y ?? !1, b), [
-		n,
-		v,
-		y,
-		b
-	]), W = _ !== void 0 && !F && !R && !z, le = F || W, { imageRef: ue, imageLoadStatus: fe } = de({
-		enabled: B,
-		src: N
-	}), pe = () => {
-		F && h ? h(j) : W && _ && _(j);
-	}, X = (e) => {
-		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), pe());
-	};
-	if (ne) return /* @__PURE__ */ q("div", {
-		style: L,
-		className: s("group flex w-full min-w-[280px] max-w-[300px] flex-col gap-2 border p-3", k, se, A),
-		children: [/* @__PURE__ */ q("div", {
+}, X = {
+	tile: "_tile_3x6ks_1",
+	tileLight: "_tileLight_3x6ks_12",
+	tileError: "_tileError_3x6ks_16",
+	nameText: "_nameText_3x6ks_23",
+	typeText: "_typeText_3x6ks_24",
+	retryIcon: "_retryIcon_3x6ks_36",
+	hoverIcon: "_hoverIcon_3x6ks_40",
+	track: "_track_3x6ks_48",
+	indeterminateFill: "_indeterminateFill_3x6ks_52",
+	"attachment-tile-indeterminate": "_attachment-tile-indeterminate_3x6ks_1"
+}, Z = ({ ariaLabel: e, errorTitle: t, errorDescId: n, onClick: r, id: i, icon: a, className: s }) => /* @__PURE__ */ G(se, {
+	icon: a,
+	size: ue.Small,
+	className: o("absolute end-1 top-1 h-6 w-6 rounded-lg", s ?? X.hoverIcon),
+	"aria-label": e,
+	"aria-describedby": t ? n : void 0,
+	onClick: (e) => {
+		e.stopPropagation(), r(i);
+	}
+}), Ce = ({ ...e }) => /* @__PURE__ */ G(Z, {
+	icon: /* @__PURE__ */ G(re, {
+		size: U.SM,
+		"aria-hidden": !0
+	}),
+	className: X.retryIcon,
+	...e
+}), we = ({ ...e }) => /* @__PURE__ */ G(Z, {
+	icon: /* @__PURE__ */ G(h, {
+		size: U.SM,
+		"aria-hidden": !0
+	}),
+	...e
+}), Te = ({ ...e }) => /* @__PURE__ */ G(Z, {
+	icon: /* @__PURE__ */ G(g, {
+		size: U.SM,
+		"aria-hidden": !0
+	}),
+	...e
+}), Ee = ({ ...e }) => /* @__PURE__ */ G(Z, {
+	icon: /* @__PURE__ */ G(oe, {
+		size: U.SM,
+		"aria-hidden": !0
+	}),
+	className: X.hoverIcon,
+	...e
+}), De = ({ attachment: e, searchQuery: t = "", onClick: r, labels: i, styles: a, cssVars: s }) => {
+	let { clickLabel: c = "Open attachment" } = i ?? {}, { typography: l, className: u } = a ?? {};
+	return /* @__PURE__ */ K("div", {
+		style: s,
+		className: o("group flex w-full min-w-[280px] max-w-[300px] flex-col gap-2 rounded-xl border p-3", u),
+		children: [/* @__PURE__ */ K("div", {
 			className: "flex items-center justify-between gap-2",
-			children: [/* @__PURE__ */ K("span", {
-				title: n.name,
-				className: s(O?.fontClassName ?? "dial-tiny-text", "min-w-0 truncate", Y.name),
-				children: i ? /* @__PURE__ */ K(r, {
-					text: n.name,
-					query: i,
+			children: [/* @__PURE__ */ G("span", {
+				title: e.name,
+				className: o(l?.fontClassName ?? "dial-tiny-text", "min-w-0 truncate", X.nameText),
+				children: t ? /* @__PURE__ */ G(n, {
+					text: e.name,
+					query: t,
 					maxLines: 1
-				}) : n.name
-			}), _ && /* @__PURE__ */ K(l, {
-				icon: /* @__PURE__ */ K(g, {
-					size: c.SM,
-					"aria-hidden": !0
-				}),
-				size: p.Small,
-				className: s("h-6 w-6 shrink-0 rounded", U),
-				"aria-label": w,
-				onClick: (e) => {
-					e.stopPropagation(), _(j);
-				}
+				}) : e.name
+			}), r && /* @__PURE__ */ G(we, {
+				ariaLabel: c,
+				onClick: r,
+				id: e.id
 			})]
-		}), n.playUrl && /* @__PURE__ */ K("audio", {
+		}), e.playUrl && /* @__PURE__ */ G("audio", {
 			controls: !0,
-			src: n.playUrl,
-			"aria-label": n.name,
+			src: e.playUrl,
+			"aria-label": e.name,
 			className: "w-full",
 			preload: "metadata"
 		})]
 	});
-	let Z = 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, se, !B && "flex-col gap-3 p-3", le && "cursor-pointer", A), he = /* @__PURE__ */ q(G, { children: [
-		B ? /* @__PURE__ */ q("div", {
-			className: "relative h-full w-full overflow-hidden",
-			children: [fe !== J.Loaded && /* @__PURE__ */ K(u, {
-				variant: d.Rectangular,
-				width: "100%",
-				height: "100%",
-				active: fe === J.Loading,
-				overlay: /* @__PURE__ */ K(re, {
-					size: c.LG,
-					className: O?.placeholderIconClassName ?? "text-secondary",
-					"aria-hidden": !0
-				}),
-				className: s("absolute inset-0", k)
-			}), /* @__PURE__ */ K("img", {
-				ref: ue,
-				src: N,
-				alt: M,
-				loading: "lazy",
-				decoding: "async",
-				className: s("h-full w-full object-cover transition-opacity duration-200", fe === J.Loaded ? "opacity-100" : "opacity-0", k)
-			})]
-		}) : z ? /* @__PURE__ */ q(G, { children: [/* @__PURE__ */ q("div", {
-			className: "flex flex-row items-center gap-1 overflow-hidden",
-			children: [/* @__PURE__ */ K(ae, {
-				size: c.SM,
-				className: s("shrink-0", Y.meta),
-				"aria-hidden": !0
-			}), /* @__PURE__ */ K("span", {
-				title: H,
-				className: s(O?.metaClassName ?? "dial-tiny-text", "min-w-0 truncate", Y.meta),
-				children: H
-			})]
-		}), /* @__PURE__ */ K("div", {
-			className: "min-w-0 flex-1",
-			children: /* @__PURE__ */ K("div", {
-				title: I,
-				className: s(O?.fontClassName ?? "dial-tiny-text", "line-clamp-3 break-words", Y.name),
-				children: i ? /* @__PURE__ */ K(r, {
-					text: I,
-					query: i,
-					maxLines: 3
-				}) : I
-			})
-		})] }) : /* @__PURE__ */ q(G, { children: [/* @__PURE__ */ K("div", {
-			className: "min-w-0 flex-1",
-			children: /* @__PURE__ */ K("div", {
-				title: I,
-				className: s(O?.fontClassName ?? "dial-tiny-text", "line-clamp-3 break-words", Y.name),
-				children: i ? /* @__PURE__ */ K(r, {
-					text: I,
-					query: i,
-					maxLines: 3
-				}) : I
-			})
-		}), /* @__PURE__ */ q("div", {
-			className: "flex flex-row items-center gap-1 overflow-hidden",
-			children: [/* @__PURE__ */ K(ae, {
-				size: c.SM,
-				className: s("shrink-0", Y.meta),
-				"aria-hidden": !0
-			}), /* @__PURE__ */ K("span", {
-				title: H,
-				className: s(O?.metaClassName ?? "dial-tiny-text", "min-w-0 truncate", Y.meta),
-				children: H
-			})]
-		})] }),
-		R && /* @__PURE__ */ K("span", {
-			className: s("absolute inset-0 flex items-center justify-center", k, Y.loadingOverlay),
-			children: /* @__PURE__ */ K(f, {
-				size: 40,
-				ariaLabel: T,
-				className: "z-50"
-			})
+}, Oe = {
+	[e.Network]: "Upload failed · network error",
+	[e.UnsupportedType]: "Upload failed · unsupported file type"
+}, ke = ({ attachment: t, onClick: n, onRetry: r, labels: a, styles: c, onDownload: d, isPasted: f, isLink: p, cssVars: m, onExpand: h, isExpandable: g, onRemove: _ }) => {
+	let { clickLabel: v = "Download attachment", retryLabel: y = "Retry upload", sizeLabel: b, uploadingLabel: x = "Uploading", errorReasonLabels: S, genericErrorLabel: C = "Upload failed" } = a ?? {}, { typography: { nameClassName: w = "dial-caption-text", metaClassName: T = "dial-caption-text" } = {}, className: E } = c ?? {}, { id: D, name: O, status: k, errorReason: A } = t, j = k === i.Loading, M = k === i.Error, N = l(), P = M ? A && (S?.[A] ?? Oe[A]) || C : "", { BottomIcon: F, typeLabel: I } = Y(t), L = !M && !j && d && !p, R = M && !!r && A !== e.UnsupportedType, z = L || R ? "pe-5" : void 0, B = (e) => {
+		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), n?.(t.id));
+	}, V = u(() => f ? O : me(O), [f, O]), ee = s(() => {
+		window.open(t.referenceUrl, "_blank", "noopener,noreferrer");
+	}, [t]), te = o(q, "group relative flex-col justify-between items-start gap-1 overflow-hidden p-1.5", X.tile, !M && X.tileLight, M && X.tileError), ne = /* @__PURE__ */ G("div", {
+		title: V,
+		className: o(w, "line-clamp-2 min-w-0 break-all", X.nameText, !M && z),
+		children: V
+	}), H = F && /* @__PURE__ */ K("div", {
+		className: o("flex items-center gap-1 overflow-hidden", M && z),
+		children: [/* @__PURE__ */ G(F, {
+			size: 16,
+			className: X.typeText,
+			"aria-hidden": !0
+		}), /* @__PURE__ */ G("span", {
+			className: o(T, "truncate", X.typeText),
+			children: b ? `${I} · ${b}` : I
+		})]
+	}), re = () => {
+		g && h ? h(D) : n && n(D);
+	}, ie = /* @__PURE__ */ K(W, { children: [
+		M ? /* @__PURE__ */ K(W, { children: [H, ne] }) : /* @__PURE__ */ K(W, { children: [ne, H] }),
+		j && /* @__PURE__ */ G("div", {
+			role: "progressbar",
+			"aria-label": x,
+			className: o("absolute inset-x-2 bottom-2 h-[3px] overflow-hidden rounded-full", X.track),
+			children: /* @__PURE__ */ G("div", { className: o("h-full w-1/3 rounded-full", X.indeterminateFill) })
+		}),
+		L && /* @__PURE__ */ G(we, {
+			ariaLabel: v,
+			errorTitle: P,
+			errorDescId: N,
+			onClick: d,
+			id: D
+		}),
+		R && /* @__PURE__ */ G(Ce, {
+			ariaLabel: y,
+			errorTitle: P,
+			errorDescId: N,
+			onClick: r,
+			id: D
+		}),
+		p && /* @__PURE__ */ G(Te, {
+			ariaLabel: y,
+			errorTitle: P,
+			errorDescId: N,
+			onClick: ee
 		}),
-		/* @__PURE__ */ K("span", {
+		_ && /* @__PURE__ */ G(Ee, {
+			ariaLabel: y,
+			errorTitle: P,
+			errorDescId: N,
+			onClick: _,
+			id: D
+		}),
+		M && /* @__PURE__ */ G("span", {
+			id: N,
 			role: "status",
 			"aria-live": "polite",
 			className: "sr-only",
-			children: z ? E : ""
-		}),
-		!R && /* @__PURE__ */ q("div", {
-			className: s("absolute end-1 top-1 flex gap-1 transition-opacity", V ? "opacity-100" : "opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 mobile:opacity-100"),
+			children: P
+		})
+	] });
+	return /* @__PURE__ */ G("div", {
+		style: m,
+		className: o("inline-flex", E),
+		children: /* @__PURE__ */ G("div", {
+			role: "button",
+			tabIndex: 0,
+			"aria-label": v,
+			onClick: re,
+			onKeyDown: B,
+			style: m,
+			className: o(te, "cursor-pointer focus-within:outline focus-within:outline-1 focus-within:outline-offset-1"),
+			children: ie
+		})
+	});
+}, Q = /* @__PURE__ */ function(e) {
+	return e.Idle = "idle", e.Loading = "loading", e.Loaded = "loaded", e.Error = "error", e;
+}({}), Ae = ({ enabled: e, src: t }) => {
+	let n = d(null), [r, i] = f("idle");
+	return c(() => {
+		i(e && t ? "loading" : "idle");
+	}, [e, t]), c(() => {
+		let r = n.current;
+		if (!r || !e || !t) return;
+		let a = () => i("loaded"), o = () => i("error");
+		return r.addEventListener("load", a), r.addEventListener("error", o), r.complete && i(r.naturalWidth > 0 ? "loaded" : "error"), () => {
+			r.removeEventListener("load", a), r.removeEventListener("error", o);
+		};
+	}, [e, t]), {
+		imageRef: n,
+		imageLoadStatus: r
+	};
+}, je = ({ attachment: e, onExpand: n, onClick: r, labels: i, onRemove: a, cssVars: s, onDownload: c, styles: l }) => {
+	let { clickLabel: d = "Open attachment", expandLabel: f = "Expand pasted text" } = i ?? {}, { typography: p, className: m } = l ?? {}, { id: h, name: g } = e, _ = e.previewUrl ?? e.url, v = e.type === t.Pasted && n !== void 0, { isLoading: y, isError: b, isImage: x } = u(() => Y(e), [e]), S = r !== void 0 && !v && !y && !b, { imageRef: C, imageLoadStatus: w } = Ae({
+		enabled: x,
+		src: _
+	}), T = () => {
+		v && n ? n(h) : S && r && r(h);
+	};
+	return /* @__PURE__ */ G("div", {
+		className: o(q, S && "cursor-pointer", X.tile, m),
+		onClick: T,
+		onKeyDown: (e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), T());
+		},
+		tabIndex: 0,
+		role: "button",
+		style: s,
+		"aria-label": S ? d : v ? f : void 0,
+		children: /* @__PURE__ */ K("div", {
+			className: "relative h-full w-full overflow-hidden",
 			children: [
-				z && m && n.errorReason !== e.UnsupportedType && /* @__PURE__ */ K(l, {
-					icon: /* @__PURE__ */ K(ie, {
-						size: c.SM,
-						"aria-hidden": !0
-					}),
-					size: p.Small,
-					className: s("h-6 w-6 rounded", U),
-					"aria-label": C,
-					onClick: (e) => {
-						e.stopPropagation(), m(j);
-					}
+				a && /* @__PURE__ */ G(Ee, {
+					onClick: a,
+					id: h
+				}),
+				c && /* @__PURE__ */ G(we, {
+					onClick: c,
+					id: h
 				}),
-				a && /* @__PURE__ */ K(l, {
-					icon: /* @__PURE__ */ K(oe, {
-						size: c.SM,
+				w !== Q.Loaded && /* @__PURE__ */ G(ce, {
+					variant: le.Rectangular,
+					width: "100%",
+					height: "100%",
+					active: w === Q.Loading,
+					overlay: /* @__PURE__ */ G(H, {
+						size: U.LG,
+						className: p?.placeholderIconClassName ?? "text-secondary",
 						"aria-hidden": !0
 					}),
-					size: p.Small,
-					className: s("h-6 w-6 rounded", U),
-					"aria-label": S,
-					onClick: (e) => {
-						e.stopPropagation(), a?.(j);
-					}
+					className: "absolute inset-0 rounded-xl"
 				}),
-				ee && !a && !z && /* @__PURE__ */ K(g, {
-					size: c.SM,
-					"aria-hidden": !0,
-					className: s("h-6 w-6 rounded-lg p-1", Y.hoverDownloadIcon)
+				/* @__PURE__ */ G("img", {
+					ref: C,
+					src: _,
+					alt: g,
+					loading: "lazy",
+					decoding: "async",
+					className: o("h-full w-full rounded-xl object-cover transition-opacity duration-200", w === Q.Loaded ? "opacity-100" : "opacity-0")
 				})
 			]
 		})
-	] });
-	return le ? /* @__PURE__ */ K("div", {
-		style: L,
-		className: Z,
-		onClick: pe,
-		onKeyDown: X,
-		tabIndex: 0,
-		role: "button",
-		"aria-label": W ? w : F ? te : void 0,
-		children: he
-	}) : /* @__PURE__ */ K("div", {
-		style: L,
-		className: Z,
-		children: he
 	});
-}, Te = ({ attachments: e, onRemove: t, onRetry: n, onExpand: r, onAttachmentClick: i, labels: a, styles: o }) => {
-	let { ariaLabel: c = "Attached files", removeLabel: l, retryLabel: u, clickLabel: d } = a ?? {}, { className: f } = o ?? {};
-	return e.length === 0 ? null : /* @__PURE__ */ K("div", {
+}, Me = ({ attachment: e, searchQuery: n = "", onRemove: r, onRetry: i, onExpand: o, onClick: s, onDownload: c, labels: l, styles: d }) => {
+	let { colors: f } = d ?? {}, p = e.type === t.Pasted, m = p && o !== void 0, h = a({
+		"--ci-tile-bg": f?.background,
+		"--ci-tile-border": f?.border,
+		"--ci-tile-border-hover": f?.borderHover,
+		"--ci-tile-focus-outline": f?.focusOutline,
+		"--ci-tile-bg-error": f?.backgroundError,
+		"--ci-tile-border-error": f?.borderError,
+		"--ci-tile-error-text": f?.errorText,
+		"--ci-tile-name-text": f?.nameText,
+		"--ci-tile-type-text": f?.typeText,
+		"--ci-tile-hover-icon-bg": f?.hoverIconBackground,
+		"--ci-tile-hover-icon-color": f?.hoverIconColor,
+		"--ci-tile-track-bg": f?.trackBackground,
+		"--ci-tile-fill-bg": f?.fillBackground
+	}), { isImage: g, isAudio: _, isLink: v } = u(() => Y(e), [e]);
+	return _ ? /* @__PURE__ */ G(De, {
+		attachment: e,
+		labels: l,
+		onClick: s,
+		searchQuery: n,
+		styles: d,
+		cssVars: h
+	}) : g ? /* @__PURE__ */ G(je, {
+		attachment: e,
+		labels: l,
+		onClick: s,
+		onExpand: o,
+		styles: d,
+		onRemove: r,
+		cssVars: h,
+		onDownload: c
+	}) : /* @__PURE__ */ G(ke, {
+		attachment: e,
+		onClick: s,
+		onRetry: i,
+		onRemove: r,
+		onDownload: c,
+		isLink: v,
+		isPasted: p,
+		styles: d,
+		labels: l,
+		onExpand: o,
+		cssVars: h,
+		isExpandable: m
+	});
+}, Ne = ({ attachments: e, onRemove: t, onRetry: n, onExpand: r, onAttachmentClick: i, labels: a, styles: s }) => {
+	let { ariaLabel: c = "Attached files", removeLabel: l, retryLabel: u, clickLabel: d } = a ?? {}, { className: f } = s ?? {};
+	return e.length === 0 ? null : /* @__PURE__ */ G("div", {
 		role: "list",
 		"aria-label": c,
-		className: s("flex w-full min-w-0 gap-2 overflow-x-auto", f),
-		children: e.map((e) => /* @__PURE__ */ K("div", {
+		className: o("flex w-full min-w-0 gap-2 overflow-x-auto", f),
+		children: e.map((e) => /* @__PURE__ */ G("div", {
 			role: "listitem",
-			children: /* @__PURE__ */ K(we, {
+			children: /* @__PURE__ */ G(Me, {
 				attachment: e,
 				onRemove: t,
 				onRetry: n,
@@ -362,114 +406,12 @@ var J = /* @__PURE__ */ function(e) {
 					retryLabel: u,
 					clickLabel: d
 				},
-				onClick: i ? () => i(e) : void 0
+				onClick: i
 			})
 		}, e.id))
 	});
-}, Q = {
-	tile: "_tile_1l1lz_1",
-	tileLight: "_tileLight_1l1lz_12",
-	tileError: "_tileError_1l1lz_16",
-	nameText: "_nameText_1l1lz_23",
-	typeText: "_typeText_1l1lz_24",
-	retryIcon: "_retryIcon_1l1lz_36",
-	hoverIcon: "_hoverIcon_1l1lz_40",
-	track: "_track_1l1lz_45",
-	indeterminateFill: "_indeterminateFill_1l1lz_49",
-	"attachment-tile-indeterminate": "_attachment-tile-indeterminate_1l1lz_1"
-}, Ee = {
-	[e.Network]: "Upload failed · network error",
-	[e.UnsupportedType]: "Upload failed · unsupported file type"
-}, De = ({ attachment: t, onClick: r, onRetry: i, labels: u, styles: d, theme: f = n.Dark }) => {
-	let { clickLabel: m = "Download attachment", retryLabel: h = "Retry upload", sizeLabel: _, uploadingLabel: v = "Uploading", errorReasonLabels: y, genericErrorLabel: b = "Upload failed" } = u ?? {}, { typography: { nameClassName: x = "dial-caption-text", metaClassName: ee = "dial-caption-text" } = {}, colors: S, className: C } = d ?? {}, w = o({
-		"--ci-tile-bg": S?.background,
-		"--ci-tile-border": S?.border,
-		"--ci-tile-border-hover": S?.borderHover,
-		"--ci-tile-focus-outline": S?.focusOutline,
-		"--ci-tile-bg-error": S?.backgroundError,
-		"--ci-tile-border-error": S?.borderError,
-		"--ci-tile-error-text": S?.errorText,
-		"--ci-tile-name-text": S?.nameText,
-		"--ci-tile-type-text": S?.typeText,
-		"--ci-tile-hover-icon-bg": S?.hoverIconBackground,
-		"--ci-tile-hover-icon-color": S?.hoverIconColor,
-		"--ci-tile-track-bg": S?.trackBackground,
-		"--ci-tile-fill-bg": S?.fillBackground
-	}), { id: te, name: T, status: E, errorReason: D } = t, O = E === a.Loading, k = E === a.Error, A = W(), j = k && (D && (y?.[D] ?? Ee[D]) || b), { BottomIcon: M, typeLabel: N } = Se(t, !1, !1, u), P = !k && !O && r !== void 0, F = k && !!i && D !== e.UnsupportedType, I = P || F ? "pe-5" : void 0, L = () => {
-		P && r?.(t);
-	}, R = (e) => {
-		(e.key === "Enter" || e.key === " ") && P && (e.preventDefault(), L());
-	}, z = s("group relative flex size-[84px] flex-col justify-between gap-1 overflow-hidden rounded-xl border p-1.5", Q.tile, !k && f === n.Light && Q.tileLight, k && Q.tileError), B = /* @__PURE__ */ K("div", {
-		title: T,
-		className: s(x, "line-clamp-2 min-w-0 break-words", Q.nameText, !k && I),
-		children: T
-	}), ne = /* @__PURE__ */ q("div", {
-		className: s("flex items-center gap-1 overflow-hidden", k && I),
-		children: [/* @__PURE__ */ K(M, {
-			size: 16,
-			className: Q.typeText,
-			"aria-hidden": !0
-		}), /* @__PURE__ */ K("span", {
-			className: s(ee, "truncate", Q.typeText),
-			children: _ ? `${N} · ${_}` : N
-		})]
-	}), V = /* @__PURE__ */ q(G, { children: [
-		k ? /* @__PURE__ */ q(G, { children: [ne, B] }) : /* @__PURE__ */ q(G, { children: [B, ne] }),
-		O && /* @__PURE__ */ K("div", {
-			role: "progressbar",
-			"aria-label": v,
-			className: s("absolute inset-x-2 bottom-2 h-[3px] overflow-hidden rounded-full", Q.track),
-			children: /* @__PURE__ */ K("div", { className: s("h-full w-1/3 rounded-full", Q.indeterminateFill) })
-		}),
-		P && /* @__PURE__ */ K(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)
-		}),
-		F && /* @__PURE__ */ K(l, {
-			icon: /* @__PURE__ */ K(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": h,
-			"aria-describedby": j ? A : void 0,
-			onClick: (e) => {
-				e.stopPropagation(), i(te);
-			}
-		}),
-		k && /* @__PURE__ */ K("span", {
-			id: A,
-			role: "status",
-			"aria-live": "polite",
-			className: "sr-only",
-			children: j
-		})
-	] });
-	return /* @__PURE__ */ K("div", {
-		className: s("inline-flex", C),
-		children: P ? /* @__PURE__ */ K("div", {
-			role: "button",
-			tabIndex: 0,
-			"aria-label": m,
-			onClick: L,
-			onKeyDown: R,
-			style: w,
-			className: s(z, "cursor-pointer focus-within:outline focus-within:outline-1 focus-within:outline-offset-1"),
-			children: V
-		}) : /* @__PURE__ */ K("div", {
-			className: z,
-			title: j || void 0,
-			role: k ? "group" : void 0,
-			"aria-describedby": k ? A : void 0,
-			tabIndex: k ? 0 : void 0,
-			style: w,
-			children: V
-		})
-	});
-}, Oe = { tile: "_tile_1s4d7_1" }, ke = ({ count: e, onClick: t, labels: n, children: r, styles: i }) => {
-	let { ariaLabel: a } = n ?? {}, { typography: { fontClassName: c = "dial-small-semi-text" } = {}, className: l, colors: u } = i ?? {}, d = o({
+}, Pe = { tile: "_tile_1s4d7_1" }, Fe = ({ count: e, onClick: t, labels: n, children: r, styles: i }) => {
+	let { ariaLabel: s } = n ?? {}, { typography: { fontClassName: c = "dial-small-semi-text" } = {}, className: l, colors: u } = i ?? {}, d = a({
 		"--ci-more-tile-bg": u?.background,
 		"--ci-more-tile-border": u?.border,
 		"--ci-more-tile-color": u?.color,
@@ -478,13 +420,13 @@ var J = /* @__PURE__ */ function(e) {
 		"--ci-more-tile-border-hover": u?.borderHover,
 		"--ci-more-tile-focus-outline": u?.focusOutline
 	});
-	return /* @__PURE__ */ K("button", {
+	return /* @__PURE__ */ G("button", {
 		type: "button",
 		onClick: t,
-		"aria-label": a ?? `Show ${e} more attachments`,
+		"aria-label": s ?? `Show ${e} more attachments`,
 		style: d,
-		className: s("flex size-[84px] items-center justify-center rounded-xl border", c, Oe.tile, l),
-		children: r ?? /* @__PURE__ */ K("bdi", {
+		className: o(q, c, Pe.tile, l),
+		children: r ?? /* @__PURE__ */ G("bdi", {
 			dir: "ltr",
 			children: `+${e}`
 		})
@@ -495,97 +437,84 @@ var J = /* @__PURE__ */ function(e) {
 	headerLabel: "_headerLabel_7fktb_7",
 	downloadAllButton: "_downloadAllButton_7fktb_8",
 	imageTile: "_imageTile_7fktb_12"
-}, Ae = (e, t) => `${e} ${t}${e === 1 ? "" : "s"}`, je = ({ attachments: e, onAttachmentClick: n, onDownloadAll: r, onRetry: i, getSizeLabel: u, labels: d, styles: f, theme: p }) => {
-	let { ariaLabel: h = "Attachments", clickLabel: v = "Download attachment", retryLabel: y = "Retry upload", showLessLabel: b = "Show less", downloadAllLabel: x = "Download all", getHeaderLabel: ee = (e) => Ae(e, "attachment"), promptLabel: S, pastedLabel: C, imageLabel: w } = d ?? {}, { typography: { headerLabelClassName: te = "dial-tiny-semi-text" } = {}, colors: T, className: E } = f ?? {}, D = o({
-		"--ci-group-bg": T?.background,
-		"--ci-group-border": T?.border,
-		"--ci-group-text": T?.text
-	}), [O, k] = ue(!1), A = ce(() => Ce(e.length, O), [e.length, O]);
+}, Ie = (e, t) => `${e} ${t}${e === 1 ? "" : "s"}`, Le = ({ attachments: e, onAttachmentClick: n, onDownloadAll: r, onRetry: s, labels: c, styles: l }) => {
+	let { ariaLabel: d = "Attachments", clickLabel: m = "Download attachment", retryLabel: g = "Retry upload", showLessLabel: v = "Show less", downloadAllLabel: y = "Download all", openInNewTabLabel: b, getHeaderLabel: x = (e) => Ie(e, "attachment"), promptLabel: S, pastedLabel: C, imageLabel: w } = c ?? {}, { typography: { headerLabelClassName: T = "dial-tiny-semi-text" } = {}, colors: E, className: D } = l ?? {}, O = a({
+		"--ci-group-bg": E?.background,
+		"--ci-group-border": E?.border,
+		"--ci-group-text": E?.text
+	}), [k, A] = f(!1), j = u(() => Se(e.length, k), [e.length, k]);
 	if (e.length === 0) return null;
-	let j = e.some((e) => e.type === t.Image), M = e.some((e) => e.type !== t.Image), N = j && M, P = e.length >= 5, F = N ? V : j ? re : _, I = ee(e.length), L = e.slice(0, A.visibleCount);
-	return /* @__PURE__ */ q("div", {
+	let M = e.some((e) => e.type === t.Image), N = e.some((e) => e.type !== t.Image), P = M && N, F = e.length >= 5, I = P ? ne : M ? H : _, L = x(e.length), R = e.slice(0, j.visibleCount), z = () => {
+		let t = e.filter((e) => e.status === i.Idle);
+		r ? r(t) : t.forEach((e) => n?.(e.id));
+	}, B = (t) => {
+		let n = e.find((e) => e.id === t);
+		n && r?.([n]);
+	};
+	return /* @__PURE__ */ K("div", {
 		role: "group",
-		"aria-label": h,
-		style: D,
-		className: s("rounded-2xl border p-3", P ? "w-full min-w-0 max-w-[492px]" : "max-w-[420px]", $.container, E),
-		children: [/* @__PURE__ */ q("div", {
+		"aria-label": d,
+		style: O,
+		className: o("rounded-2xl border p-3", F ? "w-full min-w-0 max-w-[492px]" : "max-w-[420px]", $.container, D),
+		children: [/* @__PURE__ */ K("div", {
 			className: "mb-3 flex min-h-6 items-center gap-2",
 			children: [
-				/* @__PURE__ */ K(F, {
-					size: c.SM,
-					className: s("shrink-0", $.headerIcon),
+				/* @__PURE__ */ G(I, {
+					size: U.SM,
+					className: o("shrink-0", $.headerIcon),
 					"aria-hidden": !0
 				}),
-				/* @__PURE__ */ K("span", {
-					className: s(te, $.headerLabel),
-					children: I
+				/* @__PURE__ */ G("span", {
+					className: o(T, $.headerLabel),
+					children: L
 				}),
-				e.length >= 2 && (r || n) && /* @__PURE__ */ K(l, {
-					icon: /* @__PURE__ */ K(g, {
-						size: c.SM,
+				e.length >= 2 && (r || n) && /* @__PURE__ */ G(se, {
+					icon: /* @__PURE__ */ G(h, {
+						size: U.SM,
 						"aria-hidden": !0
 					}),
-					className: s("ms-auto h-6 w-6 rounded-lg", $.downloadAllButton),
-					"aria-label": x,
-					onClick: () => {
-						let t = e.filter((e) => e.status === a.Idle);
-						r ? r(t) : t.forEach((e) => n?.(e));
-					}
+					className: o("ms-auto h-6 w-6 rounded-lg", $.downloadAllButton),
+					"aria-label": y,
+					onClick: z
 				})
 			]
-		}), /* @__PURE__ */ q("div", {
+		}), /* @__PURE__ */ K("div", {
 			role: "list",
-			"aria-label": I,
-			className: s("gap-3", P ? "grid grid-cols-[repeat(5,84px)] overflow-x-auto" : "flex flex-wrap"),
+			"aria-label": L,
+			className: o("gap-3", F ? "grid grid-cols-[repeat(5,83px)] overflow-x-auto" : "flex flex-wrap"),
 			children: [
-				L.map((e) => /* @__PURE__ */ K("div", {
+				R.map((e) => /* @__PURE__ */ G("div", {
 					role: "listitem",
-					children: e.type === t.Image ? /* @__PURE__ */ K(we, {
-						attachment: e,
-						onClick: n ? () => n(e) : void 0,
-						onRetry: i,
-						labels: {
-							clickLabel: v,
-							retryLabel: y,
-							promptLabel: S,
-							pastedLabel: C,
-							imageLabel: w
-						},
-						styles: {
-							roundedClassName: "rounded-xl",
-							className: s("size-[84px]", $.imageTile)
-						},
-						showHoverDownloadIcon: !0
-					}) : /* @__PURE__ */ K(De, {
+					children: /* @__PURE__ */ G(Me, {
 						attachment: e,
 						onClick: n,
-						onRetry: i,
+						onDownload: B,
+						onRetry: s,
 						labels: {
-							clickLabel: v,
-							retryLabel: y,
-							sizeLabel: u?.(e),
+							clickLabel: m,
+							retryLabel: g,
 							promptLabel: S,
 							pastedLabel: C,
-							imageLabel: w
-						},
-						theme: p
+							imageLabel: w,
+							openInNewTabLabel: b
+						}
 					})
 				}, e.id)),
-				A.layout === X.Collapsed && /* @__PURE__ */ K("div", {
+				j.layout === J.Collapsed && /* @__PURE__ */ G("div", {
 					role: "listitem",
-					children: /* @__PURE__ */ K(ke, {
-						count: A.hiddenCount,
-						onClick: () => k(!0)
+					children: /* @__PURE__ */ G(Fe, {
+						count: j.hiddenCount,
+						onClick: () => A(!0)
 					})
 				}),
-				P && O && /* @__PURE__ */ K("div", {
+				F && k && /* @__PURE__ */ G("div", {
 					role: "listitem",
-					children: /* @__PURE__ */ K(ke, {
+					children: /* @__PURE__ */ G(Fe, {
 						count: 0,
-						onClick: () => k(!1),
-						labels: { ariaLabel: b },
-						children: /* @__PURE__ */ K(m, {
-							size: c.MD,
+						onClick: () => A(!1),
+						labels: { ariaLabel: v },
+						children: /* @__PURE__ */ G(p, {
+							size: U.MD,
 							"aria-hidden": !0
 						})
 					})
@@ -593,49 +522,49 @@ var J = /* @__PURE__ */ function(e) {
 			]
 		})]
 	});
-}, Me = {
+}, Re = {
 	overlay: "_overlay_wr7ez_1",
 	icon: "_icon_wr7ez_5",
 	deniedIcon: "_deniedIcon_wr7ez_9"
-}, Ne = ({ isVisible: e, isAttachmentsAllowed: t = !0, labels: n, styles: r }) => {
-	let { title: i, subtitle: a } = n ?? {}, { colors: c, typography: l } = r ?? {}, { titleClassName: u = "heading-3 font-semibold", subtitleClassName: d = "dial-small-text" } = l ?? {};
+}, ze = ({ isVisible: e, isAttachmentsAllowed: t = !0, labels: n, styles: r }) => {
+	let { title: i, subtitle: s } = n ?? {}, { colors: c, typography: l } = r ?? {}, { titleClassName: u = "heading-3 font-semibold", subtitleClassName: d = "dial-small-text" } = l ?? {};
 	if (!e) return null;
-	let f = o({
+	let f = a({
 		"--fd-bg": c?.background,
 		"--fd-icon": c?.icon,
 		"--fd-denied-icon": c?.deniedIcon
-	}), p = i ?? (t ? "Attach files" : "No attachments allowed"), m = a ?? (t ? "Drop files here to attach them to message" : "Attachments can't be added to message"), h = t ? Me.icon : Me.deniedIcon, g = (e) => {
+	}), p = i ?? (t ? "Attach files" : "No attachments allowed"), m = s ?? (t ? "Drop files here to attach them to message" : "Attachments can't be added to message"), h = t ? Re.icon : Re.deniedIcon, g = (e) => {
 		e.preventDefault();
-	}, _ = t ? v : B;
-	return /* @__PURE__ */ K("div", {
+	}, _ = t ? v : ee;
+	return /* @__PURE__ */ G("div", {
 		role: "status",
 		"aria-live": "polite",
-		className: s("fixed inset-0 z-[9999] flex items-center justify-center backdrop-blur-sm", Me.overlay, t ? "pointer-events-none" : "pointer-events-auto cursor-not-allowed"),
+		className: o("fixed inset-0 z-[9999] flex items-center justify-center backdrop-blur-sm", Re.overlay, t ? "pointer-events-none" : "pointer-events-auto cursor-not-allowed"),
 		onDragOver: t ? void 0 : g,
 		onDrop: t ? void 0 : g,
 		style: f,
-		children: /* @__PURE__ */ q("div", {
+		children: /* @__PURE__ */ K("div", {
 			className: "flex flex-col items-center text-center",
 			children: [
-				/* @__PURE__ */ K(_, {
+				/* @__PURE__ */ G(_, {
 					size: 100,
 					className: h,
 					"aria-hidden": !0
 				}),
-				/* @__PURE__ */ K("span", {
-					className: s("mt-5", u),
+				/* @__PURE__ */ G("span", {
+					className: o("mt-5", u),
 					children: p
 				}),
-				/* @__PURE__ */ K("span", {
-					className: s("mt-4", d),
+				/* @__PURE__ */ G("span", {
+					className: o("mt-4", d),
 					children: m
 				})
 			]
 		})
 	});
-}, Pe = (e, n, r = {}) => {
-	let { screenshotName: i = "Screenshot.png", pastedTextName: o = "Pasted text" } = r;
-	return { handlePaste: se((r) => {
+}, Be = (e, n, r = {}) => {
+	let { screenshotName: a = "Screenshot.png", pastedTextName: o = "Pasted text" } = r;
+	return { handlePaste: s((r) => {
 		if (!r.clipboardData) return;
 		let s = Array.from(r.clipboardData.items).filter((e) => e.kind === "file" && e.type.startsWith("image/")), c = r.clipboardData.getData("text/plain").length > 0;
 		if (s.length > 0 && !c) {
@@ -643,13 +572,13 @@ var J = /* @__PURE__ */ function(e) {
 			for (let e of s) {
 				let r = e.getAsFile();
 				if (!r) continue;
-				let o = new File([r], i, { type: r.type }), s = {
-					id: Z(),
-					name: i,
+				let o = new File([r], a, { type: r.type }), s = {
+					id: pe(),
+					name: a,
 					contentType: r.type,
 					file: o,
 					type: t.Image,
-					status: a.Idle,
+					status: i.Idle,
 					previewUrl: URL.createObjectURL(o)
 				};
 				n.push(s);
@@ -659,22 +588,22 @@ var J = /* @__PURE__ */ function(e) {
 		}
 		let l = r.clipboardData.getData("text/plain");
 		if (l.length > n) {
-			let n = l.trim(), i = (n.length > 80 ? `${n.slice(0, 80).trimEnd()}…` : n) || o, s = new File([l], i, { type: "text/plain" }), c = {
-				id: Z(),
-				name: i,
+			let n = l.trim(), a = (n.length > 80 ? `${n.slice(0, 80).trimEnd()}…` : n) || o, s = new File([l], a, { type: "text/plain" }), c = {
+				id: pe(),
+				name: a,
 				contentType: "text/plain",
 				file: s,
 				type: t.Pasted,
-				status: a.Idle
+				status: i.Idle
 			};
 			r.preventDefault(), e([c]);
 		}
 	}, [
 		e,
 		n,
-		i,
+		a,
 		o
 	]) };
-}, Fe = 100;
+}, Ve = 100;
 //#endregion
-export { pe as ATTACHMENT_COLLAPSED_VISIBLE_COUNT, fe as ATTACHMENT_COLLAPSE_THRESHOLD, we as AttachmentCard, De as AttachmentFileRow, je as AttachmentGroup, ke as AttachmentMoreTile, X as AttachmentTilesLayout, Te as AttachmentTray, Ne as FileDndOverlay, J as LazyImageLoadStatus, Fe as MAX_UPLOADS_PER_MINUTE, Z as generateAttachmentId, Se as getAttachmentCardState, ve as getAttachmentIcon, Ce as getAttachmentTilesPlan, be as getExtFromContentType, me as getNameWithoutExtension, _e as isMimeTypeAllowed, ge as mimeTypesToExtensionLabels, Pe as useClipboardPaste, de as useLazyImageLoad };
+export { fe as ATTACHMENT_COLLAPSED_VISIBLE_COUNT, de as ATTACHMENT_COLLAPSE_THRESHOLD, Me as AttachmentCard, Le as AttachmentGroup, Fe as AttachmentMoreTile, J as AttachmentTilesLayout, Ne as AttachmentTray, ze as FileDndOverlay, Q as LazyImageLoadStatus, Ve as MAX_UPLOADS_PER_MINUTE, pe as generateAttachmentId, Y as getAttachmentCardState, ve as getAttachmentIcon, Se as getAttachmentTilesPlan, be as getExtFromContentType, me as getNameWithoutExtension, _e as isMimeTypeAllowed, ge as mimeTypesToExtensionLabels, Be as useClipboardPaste, Ae as useLazyImageLoad };