themelia-react-ui 1.0.0 → 1.0.2

package/dist/features/email-composer.js

@@ -1,25 +1,25 @@
 "use client";
 import { useStrings as e } from "../lib/strings.js";
-import { t } from "../utils-C2EKeIw3.js";
-import { n } from "../buttons-Co6GavvM.js";
-import { a as r } from "../typography-Cv8MT-82.js";
-import { i, t as a } from "../structure-BvW4vG4H.js";
-import { _ as o, f as s, m as c, t as l } from "../smart-card-B5FcKODh.js";
-import { n as u, t as d } from "../feedback-a9j9J-9A.js";
-import { n as f, t as p } from "../action-menu-Cx3SdfbN.js";
-import { n as m, r as h, t as g } from "../overlays-DBqV0J_V.js";
+import { t } from "../utils-BvH9PSmq.js";
+import { a as n } from "../typography-BxQgiZyw.js";
+import { t as r } from "../button-BZDasD04.js";
+import { i, t as a } from "../structure-CRdqVawd.js";
+import { h as o, p as s, t as c, v as l } from "../smart-card-DjGVV2xr.js";
+import { n as u, t as d } from "../feedback-CJkUAapr.js";
+import { n as f, t as p } from "../action-menu-Drxw_vJk.js";
+import { n as m, r as h, t as g } from "../overlays-DUbs1KEi.js";
 import { n as _ } from "../content-typography-CnwgMJ37.js";
-import { t as v } from "../accordion-BRWh3BM1.js";
-import { t as y } from "../input-DMorJiTI.js";
-import { a as b, c as x, d as S, o as C, s as w } from "../text-inputs-BhOcedTo.js";
-import { t as T } from "../scroll-area-BheMQ270.js";
-import { t as E } from "../form-field-C6W-y2hR.js";
-import { l as D } from "../choice-inputs-CavA-SGV.js";
-import { i as O, n as k, r as ee, t as te } from "../tabs-DY09eoZg.js";
-import { t as ne } from "../popover-menu-BzqXqE72.js";
-import { n as A, t as j } from "../rich-text-editor.recipes-DxvOE0Lp.js";
+import { t as v } from "../accordion-BRTcsp8J.js";
+import { t as y } from "../input-SX9V0AL3.js";
+import { a as b, c as x, d as S, o as C, s as w } from "../text-inputs-DsR56TR-.js";
+import { c as T } from "../choice-inputs-Mk3iWbhr.js";
+import { t as ee } from "../scroll-area-D-pIhEKl.js";
+import { t as E } from "../form-field-CZwrkP7m.js";
+import { i as D, n as O, r as te, t as ne } from "../tabs-BNgu7g0u.js";
+import { t as k } from "../popover-menu-B4PoWhRl.js";
+import { n as A, t as j } from "../rich-text-editor.recipes-B72Nfuze.js";
 import { t as M } from "../rich-text-editor.strings-BpnIQgMl.js";
-import { a as N, c as P, i as F, l as I, n as L, o as R, r as z, s as B, t as V, u as H } from "../http-CLTVJc5I.js";
+import { a as N, c as P, i as F, l as I, n as L, o as R, r as z, s as B, t as V, u as H } from "../http-CdEIHyQf.js";
 import { useEffect as U, useId as W, useImperativeHandle as G, useMemo as re, useRef as K, useState as q } from "react";
 import { Fragment as J, jsx as Y, jsxs as X } from "react/jsx-runtime";
 import { Bold as ie, Italic as ae, Link as oe, List as se, ListOrdered as ce, Plus as Z, Redo2 as le, Send as ue, Undo2 as de, X as fe } from "lucide-react";
@@ -80,11 +80,11 @@ function be(t) {
 		return e;
 	}, [t.placeholders?.sets, n]), C = re(() => [...t.templates?.items ?? [], ...y], [t.templates?.items, y]), w = K(C);
 	if (w.current = C, new Set(C.map((e) => e.id)).size !== C.length) throw Error(n.duplicateTemplate);
-	let T = () => s.current.props.value ?? c.current, E = (e) => C.find((t) => t.id === e.templateId), D = K(null), O = (e = T()) => {
-		let t = s.current.props.context, n = E(e), r = s.current.strings, i = D.current;
+	let T = () => s.current.props.value ?? c.current, ee = (e) => C.find((t) => t.id === e.templateId), E = K(null), D = (e = T()) => {
+		let t = s.current.props.context, n = ee(e), r = s.current.strings, i = E.current;
 		if (i && i.draft === e && i.context === t && i.definitions === S && i.template === n && i.strings === r) return i.result;
 		let a = L(e, t, S, n, r);
-		return D.current = {
+		return E.current = {
 			draft: e,
 			context: t,
 			definitions: S,
@@ -92,7 +92,7 @@ function be(t) {
 			strings: r,
 			result: a
 		}, a;
-	}, k = () => {
+	}, O = () => {
 		let { props: e, strings: t } = s.current, n = [];
 		for (let r of [
 			"to",
@@ -106,13 +106,13 @@ function be(t) {
 			field: "placeholders",
 			message: t.dataUnavailable
 		}), n;
-	}, ee = k().length > 0, te = (e = T()) => structuredClone([...k(), ...O(e).issues]), ne = () => {
-		let e = T(), t = [...O(e).rendered?.unresolved ?? []];
+	}, te = O().length > 0, ne = (e = T()) => structuredClone([...O(), ...D(e).issues]), k = () => {
+		let e = T(), t = [...D(e).rendered?.unresolved ?? []];
 		return {
 			draft: structuredClone(e),
 			dirty: JSON.stringify(e) !== JSON.stringify(r.current),
 			busy: u.current !== null,
-			issues: te(e),
+			issues: ne(e),
 			unresolvedPlaceholders: t
 		};
 	}, A = (e) => {
@@ -181,8 +181,8 @@ function be(t) {
 		discard: () => R.current.discard()
 	};
 	let B = z.current, V = async () => {
-		if (k().length) throw Error(s.current.strings.dataUnavailable);
-		let e = O();
+		if (O().length) throw Error(s.current.strings.dataUnavailable);
+		let e = D();
 		if (e.issues.length || !e.rendered) throw Error(e.issues.map((e) => e.message).join(" "));
 		return structuredClone(e.rendered.email);
 	}, W = (e = !1) => N("send", async () => {
@@ -200,7 +200,7 @@ function be(t) {
 		await e.onDiscard?.(B), x.current && T() === t && (j(() => r.current, "api", !0), v(!1), g(n.discarded), e.onClose?.());
 	}, e);
 	R.current = {
-		getState: ne,
+		getState: k,
 		update: (e) => j(e),
 		setSubject: (e) => j((t) => ({
 			...t,
@@ -253,7 +253,7 @@ function be(t) {
 			if (!r) throw Error(n.unknownTemplate(e));
 			F(r, t);
 		},
-		validate: () => te(),
+		validate: () => ne(),
 		prepare: V,
 		send: () => W(),
 		discard: () => J()
@@ -269,13 +269,13 @@ function be(t) {
 			if (w.current.some((e) => e.id === t.id)) throw Error(n.duplicateTemplate);
 			b((e) => [...e, structuredClone(t)]), T() === e && F(t, {}, !0);
 		}
-	}), { rendered: ie, renderError: ae } = O(o);
+	}), { rendered: ie, renderError: ae } = D(o);
 	return {
 		api: B,
 		draft: o,
 		strings: n,
 		busy: d,
-		dataPending: ee,
+		dataPending: te,
 		error: p,
 		notice: h,
 		attempted: _,
@@ -285,7 +285,7 @@ function be(t) {
 		templates: C,
 		values: ie?.email.resolvedPlaceholders ?? {},
 		editorRef: l,
-		state: ne(),
+		state: k(),
 		report: A,
 		runAction: Y,
 		importTemplate: X,
@@ -356,18 +356,16 @@ function xe({ recipient: e, field: t, index: n, options: r, busy: i, strings: a,
 	});
 }
 function Se({ field: e, value: t, options: n = {}, busy: r, strings: i, onChange: o, error: s, actions: c, report: l }) {
-	let [u, d] = q(!1), [f, p] = q(""), m = W(), h = s ? `${m}-error` : void 0, g = K(null), _ = K(t);
-	_.current = t;
-	let v = n.mode !== "disabled" && n.allowAdd !== !1 && (n.mode !== "readonly" || n.allowAdd === !0), y = u || t.length === 0, S = Q(n), T = () => {
-		if (r || !v || !y || S) return;
+	let [u, d] = q(!1), [f, p] = q(""), m = W(), h = s ? `${m}-error` : void 0, g = K(null), _ = n.mode !== "disabled" && n.allowAdd !== !1 && (n.mode !== "readonly" || n.allowAdd === !0), v = u || t.length === 0, y = Q(n), S = () => {
+		if (r || !_ || !v || y) return;
 		let e = z(f);
-		f.trim() && !_.current.some((t) => t.email.toLowerCase() === e.email.toLowerCase()) && o([..._.current, e]), p(""), d(!1);
+		f.trim() && !t.some((t) => t.email.toLowerCase() === e.email.toLowerCase()) && o([...t, e]), p(""), d(!1);
 	};
 	U(() => {
 		u && g.current?.focus();
 	}, [u]);
-	let D = () => {
-		y && T(), d(!0), g.current?.focus();
+	let T = () => {
+		v && S(), d(!0), g.current?.focus();
 	};
 	return /* @__PURE__ */ Y(E, {
 		label: i[e],
@@ -378,7 +376,7 @@ function Se({ field: e, value: t, options: n = {}, busy: r, strings: i, onChange
 		children: /* @__PURE__ */ X(a, {
 			id: `${m}-group`,
 			gap: "sm",
-			children: [S ? /* @__PURE__ */ Y(ye, {
+			children: [y ? /* @__PURE__ */ Y(ye, {
 				state: n,
 				label: i.loadingRecipients(i[e]),
 				retryLabel: i.retry,
@@ -394,8 +392,8 @@ function Se({ field: e, value: t, options: n = {}, busy: r, strings: i, onChange
 				strings: i,
 				change: (e) => o(t.map((t, n) => n === s ? e : t)),
 				remove: () => o(t.filter((e, t) => t !== s)),
-				add: v && !y && s === t.length - 1 ? D : void 0
-			}, a.id ?? s)), y && /* @__PURE__ */ X(b, {
+				add: _ && !v && s === t.length - 1 ? T : void 0
+			}, a.id ?? s)), v && /* @__PURE__ */ X(b, {
 				className: "min-w-0 w-full",
 				children: [/* @__PURE__ */ Y(x, {
 					id: `${m}-new`,
@@ -407,13 +405,13 @@ function Se({ field: e, value: t, options: n = {}, busy: r, strings: i, onChange
 					placeholder: i.recipientPlaceholder,
 					value: f,
 					disabled: r || n.mode === "disabled",
-					readOnly: !v,
+					readOnly: !_,
 					onChange: (e) => p(e.target.value),
-					onBlur: T,
+					onBlur: S,
 					onKeyDown: (e) => {
-						e.key === "Enter" && (e.preventDefault(), T()), e.key === "Escape" && (e.preventDefault(), p(""), d(!1));
+						e.key === "Enter" && (e.preventDefault(), S()), e.key === "Escape" && (e.preventDefault(), p(""), d(!1));
 					}
-				}), v && /* @__PURE__ */ Y(C, {
+				}), _ && /* @__PURE__ */ Y(C, {
 					align: "inline-end",
 					children: /* @__PURE__ */ Y(w, {
 						type: "button",
@@ -423,7 +421,7 @@ function Se({ field: e, value: t, options: n = {}, busy: r, strings: i, onChange
 						"aria-label": i.addRecipient(i[e]),
 						title: i.addRecipient(i[e]),
 						onMouseDown: (e) => e.preventDefault(),
-						onClick: D,
+						onClick: T,
 						children: /* @__PURE__ */ Y(Z, { className: "size-icon" })
 					})
 				})]
@@ -438,13 +436,13 @@ function Se({ field: e, value: t, options: n = {}, busy: r, strings: i, onChange
 }
 //#endregion
 //#region src/components/features/email-composer/partials/variables.tsx
-function Ce({ definitions: e, values: t, draft: r, api: o, strings: s, busy: c, editable: l }) {
+function Ce({ definitions: e, values: t, draft: n, api: o, strings: s, busy: c, editable: l }) {
 	let u = W();
 	return /* @__PURE__ */ Y(i, {
 		minColumnWidth: "sm",
 		gap: "md",
 		children: Object.keys(e).map((i) => {
-			let d = e[i], f = Object.hasOwn(r.placeholderOverrides, i), p = `${u}-email-variable-${i}`, m = {
+			let d = e[i], f = Object.hasOwn(n.placeholderOverrides, i), p = `${u}-email-variable-${i}`, m = {
 				id: p,
 				value: String(t[i] ?? ""),
 				disabled: c,
@@ -452,7 +450,7 @@ function Ce({ definitions: e, values: t, draft: r, api: o, strings: s, busy: c,
 			}, h = d.input === "textarea" ? /* @__PURE__ */ Y(S, {
 				...m,
 				onChange: (e) => o.setPlaceholder(i, e.target.value)
-			}) : d.input === "select" ? /* @__PURE__ */ Y(D, {
+			}) : d.input === "select" ? /* @__PURE__ */ Y(T, {
 				...m,
 				placeholder: s.choose,
 				options: [...d.options ?? []],
@@ -478,7 +476,7 @@ function Ce({ definitions: e, values: t, draft: r, api: o, strings: s, busy: c,
 							className: "min-w-0 flex-1",
 							children: h
 						}),
-						/* @__PURE__ */ Y(n, {
+						/* @__PURE__ */ Y(r, {
 							type: "button",
 							iconOnly: !0,
 							size: "sm",
@@ -489,7 +487,7 @@ function Ce({ definitions: e, values: t, draft: r, api: o, strings: s, busy: c,
 							onClick: () => o.insertPlaceholder(i),
 							children: /* @__PURE__ */ Y(Z, { className: "size-icon" })
 						}),
-						f && /* @__PURE__ */ Y(n, {
+						f && /* @__PURE__ */ Y(r, {
 							type: "button",
 							size: "sm",
 							buttonStyle: "ghost",
@@ -527,7 +525,7 @@ var we = me.create({
 	],
 	renderText: ({ node: e }) => `{{${e.attrs.key}}}`
 }), $ = [ve.configure({ link: { openOnClick: !1 } }), we];
-function Te({ body: n, disabled: r, onChange: i, adapterRef: o, strings: l }) {
+function Te({ body: n, disabled: r, onChange: i, adapterRef: c, strings: l }) {
 	let u = K(i);
 	u.current = i;
 	let d = K(!1), [f, p] = q(!1), [m, g] = q(""), [v, b] = q(""), x = K({
@@ -568,7 +566,7 @@ function Te({ body: n, disabled: r, onChange: i, adapterRef: o, strings: l }) {
 		n.kind
 	]), U(() => {
 		(r || n.kind === "html") && p(!1);
-	}, [r, n.kind]), G(o, () => {
+	}, [r, n.kind]), G(c, () => {
 		let e = (e) => {
 			if (!C) throw Error(l.editorNotReady);
 			d.current = !0;
@@ -725,7 +723,7 @@ function Te({ body: n, disabled: r, onChange: i, adapterRef: o, strings: l }) {
 						})
 					}), v && /* @__PURE__ */ Y(s, {
 						tone: "destructive",
-						children: /* @__PURE__ */ Y(c, { children: v })
+						children: /* @__PURE__ */ Y(o, { children: v })
 					})]
 				})
 			})
@@ -734,22 +732,22 @@ function Te({ body: n, disabled: r, onChange: i, adapterRef: o, strings: l }) {
 }
 //#endregion
 //#region src/components/features/email-composer/partials/html-preview.tsx
-function Ee({ html: e, subject: t, strings: n }) {
+function Ee({ html: e, subject: t, strings: r }) {
 	return /* @__PURE__ */ X(a, {
 		gap: "normal",
 		className: "min-w-0",
-		children: [/* @__PURE__ */ X(r, {
+		children: [/* @__PURE__ */ X(n, {
 			type: "secondary",
 			children: [
-				n.subject,
+				r.subject,
 				": ",
 				t
 			]
-		}), /* @__PURE__ */ Y(l, {
+		}), /* @__PURE__ */ Y(c, {
 			surface: "card",
 			padding: "none",
 			children: /* @__PURE__ */ Y("iframe", {
-				title: n.previewLabel,
+				title: r.previewLabel,
 				sandbox: "",
 				referrerPolicy: "no-referrer",
 				className: "h-80 w-full border-0",
@@ -761,13 +759,13 @@ function Ee({ html: e, subject: t, strings: n }) {
 //#endregion
 //#region src/components/features/email-composer/email-composer.tsx
 function De(e) {
-	let r = be(e), { api: i, draft: u, strings: d, busy: _, state: b } = r, [x, S] = q("editor"), [C, w] = q(e.placeholders?.showEditor ?? !1), [D, A] = q(!1), [j, M] = q(!1), [N, P] = q(!1), F = W(), I = x === "preview" || u.body.kind === "html", L = (t) => (e.actions ?? []).filter((e) => (e.position ?? "toolbar") === t && (e.visible?.(b) ?? !0)).map((e) => ({
+	let n = be(e), { api: i, draft: u, strings: d, busy: _, state: b } = n, [x, S] = q("editor"), [C, w] = q(e.placeholders?.showEditor ?? !1), [T, A] = q(!1), [j, M] = q(!1), [N, P] = q(!1), F = W(), I = x === "preview" || u.body.kind === "html", L = (t) => (e.actions ?? []).filter((e) => (e.position ?? "toolbar") === t && (e.visible?.(b) ?? !0)).map((e) => ({
 		id: e.id,
 		label: e.label,
 		icon: e.icon,
 		disabled: _ || e.disabled?.(b),
 		onClick: () => {
-			r.runAction(e);
+			n.runAction(e);
 		},
 		buttonStyle: "ghost",
 		tone: "secondary"
@@ -786,7 +784,7 @@ function De(e) {
 		children: [/* @__PURE__ */ X(a, {
 			direction: "horizontal",
 			gap: "sm",
-			children: [e.buttons?.discard !== !1 && /* @__PURE__ */ Y(n, {
+			children: [e.buttons?.discard !== !1 && /* @__PURE__ */ Y(r, {
 				type: "button",
 				tone: "secondary",
 				buttonStyle: "ghost",
@@ -807,10 +805,10 @@ function De(e) {
 					srText: d.more,
 					buttonProps: { disabled: _ }
 				}),
-				e.buttons?.send !== !1 && /* @__PURE__ */ X(n, {
+				e.buttons?.send !== !1 && /* @__PURE__ */ X(r, {
 					type: "button",
 					tone: "primary",
-					disabled: _ || r.dataPending,
+					disabled: _ || n.dataPending,
 					loading: _,
 					strings: { loading: d.working },
 					onClick: () => {
@@ -820,7 +818,7 @@ function De(e) {
 				})
 			]
 		})]
-	}), z = (e) => r.attempted ? b.issues.find((t) => t.field === e)?.message : void 0, B = /* @__PURE__ */ X(a, {
+	}), z = (e) => n.attempted ? b.issues.find((t) => t.field === e)?.message : void 0, B = /* @__PURE__ */ X(a, {
 		gap: "lg",
 		className: "email-composer--body min-w-0",
 		children: [
@@ -833,16 +831,16 @@ function De(e) {
 						"to",
 						"cc",
 						"bcc"
-					].filter((t) => t === "to" || t === "cc" && (D || u.cc.length || Q(e.recipients?.cc)) || t === "bcc" && (j || u.bcc.length || Q(e.recipients?.bcc))).map((t) => /* @__PURE__ */ Y(Se, {
+					].filter((t) => t === "to" || t === "cc" && (T || u.cc.length || Q(e.recipients?.cc)) || t === "bcc" && (j || u.bcc.length || Q(e.recipients?.bcc))).map((t) => /* @__PURE__ */ Y(Se, {
 						field: t,
 						value: u[t],
 						options: e.recipients?.[t],
 						strings: d,
 						busy: _,
-						report: r.report,
+						report: n.report,
 						error: z(t),
-						onChange: (e) => r.changeRecipients(t, e),
-						actions: t === "to" ? /* @__PURE__ */ X(J, { children: [!D && !u.cc.length && /* @__PURE__ */ Y(n, {
+						onChange: (e) => n.changeRecipients(t, e),
+						actions: t === "to" ? /* @__PURE__ */ X(J, { children: [!T && !u.cc.length && /* @__PURE__ */ Y(r, {
 							type: "button",
 							size: "sm",
 							buttonStyle: "ghost",
@@ -850,7 +848,7 @@ function De(e) {
 							disabled: _,
 							onClick: () => A(!0),
 							children: d.cc
-						}), !j && !u.bcc.length && /* @__PURE__ */ Y(n, {
+						}), !j && !u.bcc.length && /* @__PURE__ */ Y(r, {
 							type: "button",
 							size: "sm",
 							buttonStyle: "ghost",
@@ -873,37 +871,37 @@ function De(e) {
 						disabled: _,
 						invalid: !!z("subject"),
 						"aria-describedby": z("subject") ? `${F}-subject-error` : void 0,
-						onChange: (e) => r.changeSubject(e.target.value)
+						onChange: (e) => n.changeSubject(e.target.value)
 					})
 				})]
 			}),
-			/* @__PURE__ */ Y(te, {
+			/* @__PURE__ */ Y(ne, {
 				value: I ? "preview" : "editor",
 				onValueChange: (e) => {
 					e && S(e);
 				},
-				children: /* @__PURE__ */ X(l, {
+				children: /* @__PURE__ */ X(c, {
 					surface: "flat",
 					padding: "none",
 					contentGap: "md",
 					title: d.body,
-					headerAction: /* @__PURE__ */ X(ee, { children: [/* @__PURE__ */ Y(O, {
+					headerAction: /* @__PURE__ */ X(te, { children: [/* @__PURE__ */ Y(D, {
 						value: "editor",
 						disabled: u.body.kind === "html",
 						children: d.editor
-					}), /* @__PURE__ */ Y(O, {
+					}), /* @__PURE__ */ Y(D, {
 						value: "preview",
 						children: d.preview
 					})] }),
 					children: [
-						(!!e.templates || !!r.templates.length || L("toolbar").length > 0) && /* @__PURE__ */ X(a, {
+						(!!e.templates || !!n.templates.length || L("toolbar").length > 0) && /* @__PURE__ */ X(a, {
 							direction: "horizontal",
 							gap: "sm",
 							align: "center",
 							className: "email-composer--message-actions",
 							children: [
-								(e.templates || !!r.templates.length) && /* @__PURE__ */ Y(ne, {
-									trigger: /* @__PURE__ */ Y(n, {
+								(e.templates || !!n.templates.length) && /* @__PURE__ */ Y(k, {
+									trigger: /* @__PURE__ */ Y(r, {
 										type: "button",
 										tone: "secondary",
 										buttonStyle: "outline",
@@ -911,7 +909,7 @@ function De(e) {
 										disabled: _,
 										children: d.templates
 									}),
-									items: r.templates.map((e) => ({
+									items: n.templates.map((e) => ({
 										value: e.id,
 										label: e.name,
 										description: e.description ?? e.category,
@@ -921,13 +919,13 @@ function De(e) {
 										try {
 											i.applyTemplate(e.value);
 										} catch (e) {
-											r.report(e);
+											n.report(e);
 										}
 									},
 									loading: e.templates?.loading,
 									error: e.templates?.error,
 									onRetry: e.templates?.onRetry ? () => {
-										Promise.resolve().then(e.templates.onRetry).catch(r.report);
+										Promise.resolve().then(e.templates.onRetry).catch(n.report);
 									} : void 0,
 									onOpenChange: e.templates?.onOpenChange,
 									strings: {
@@ -937,14 +935,14 @@ function De(e) {
 										retry: d.retry
 									}
 								}),
-								e.templates?.allowImport && e.templates.onImport && /* @__PURE__ */ Y(n, {
+								e.templates?.allowImport && e.templates.onImport && /* @__PURE__ */ Y(r, {
 									type: "button",
 									tone: "secondary",
 									buttonStyle: "ghost",
 									size: "sm",
 									disabled: _,
 									onClick: () => {
-										r.importTemplate();
+										n.importTemplate();
 									},
 									children: d.importTemplate
 								}),
@@ -954,29 +952,29 @@ function De(e) {
 								})
 							]
 						}),
-						/* @__PURE__ */ Y(k, {
+						/* @__PURE__ */ Y(O, {
 							value: "editor",
 							keepMounted: !0,
 							children: /* @__PURE__ */ Y(Te, {
 								body: u.body,
 								disabled: _ || I,
-								onChange: r.changeBody,
-								adapterRef: r.editorRef,
+								onChange: n.changeBody,
+								adapterRef: n.editorRef,
 								strings: d
 							})
 						}),
-						/* @__PURE__ */ Y(k, {
+						/* @__PURE__ */ Y(O, {
 							value: "preview",
-							children: r.rendered && /* @__PURE__ */ Y(Ee, {
-								html: r.rendered.email.html,
-								subject: r.rendered.email.subject,
+							children: n.rendered && /* @__PURE__ */ Y(Ee, {
+								html: n.rendered.email.html,
+								subject: n.rendered.email.subject,
 								strings: d
 							})
 						})
 					]
 				})
 			}),
-			(!!Object.keys(r.definitions).length || Q(e.placeholders)) && /* @__PURE__ */ Y(v, {
+			(!!Object.keys(n.definitions).length || Q(e.placeholders)) && /* @__PURE__ */ Y(v, {
 				value: C ? ["variables"] : [],
 				onValueChange: (e) => w(e.includes("variables")),
 				items: [{
@@ -987,10 +985,10 @@ function De(e) {
 						state: e.placeholders,
 						label: d.loadingVariables,
 						retryLabel: d.retry,
-						report: r.report
+						report: n.report
 					}) : /* @__PURE__ */ Y(Ce, {
-						definitions: r.definitions,
-						values: r.values,
+						definitions: n.definitions,
+						values: n.values,
 						draft: u,
 						api: i,
 						strings: d,
@@ -999,7 +997,7 @@ function De(e) {
 					})
 				}]
 			}),
-			u.body.kind === "html" && /* @__PURE__ */ Y(n, {
+			u.body.kind === "html" && /* @__PURE__ */ Y(r, {
 				type: "button",
 				tone: "secondary",
 				buttonStyle: "outline",
@@ -1007,18 +1005,18 @@ function De(e) {
 				onClick: () => P(!0),
 				children: d.convert
 			}),
-			(r.error || !r.dataPending && r.renderError) && /* @__PURE__ */ X(s, {
+			(n.error || !n.dataPending && n.renderError) && /* @__PURE__ */ X(s, {
 				tone: "destructive",
-				children: [/* @__PURE__ */ Y(o, { children: d.errorTitle }), /* @__PURE__ */ Y(c, { children: r.error || r.renderError })]
+				children: [/* @__PURE__ */ Y(l, { children: d.errorTitle }), /* @__PURE__ */ Y(o, { children: n.error || n.renderError })]
 			}),
-			r.notice && /* @__PURE__ */ Y(s, {
+			n.notice && /* @__PURE__ */ Y(s, {
 				tone: "success",
 				role: "status",
-				children: /* @__PURE__ */ Y(c, { children: r.notice })
+				children: /* @__PURE__ */ Y(o, { children: n.notice })
 			}),
 			e.children?.(i)
 		]
-	}), V = e.title ?? d.title, H = e.onClose ? /* @__PURE__ */ Y(n, {
+	}), V = e.title ?? d.title, H = e.onClose ? /* @__PURE__ */ Y(r, {
 		type: "button",
 		iconOnly: !0,
 		tone: "secondary",
@@ -1058,12 +1056,13 @@ function De(e) {
 			children: B
 		});
 	} else {
-		let t = /* @__PURE__ */ Y(l, {
+		let t = /* @__PURE__ */ Y(c, {
 			className: G,
 			surface: "card",
 			title: V,
 			description: e.description,
 			headerAction: H,
+			headerClassName: e.position === "floating" && H ? "flex-nowrap [&>.card--header-start]:basis-0 [&>.card--header-end]:shrink-0" : void 0,
 			headerDivider: !0,
 			footerDivider: !0,
 			footerSlot: R,
@@ -1071,7 +1070,7 @@ function De(e) {
 		});
 		U = e.position === "floating" ? /* @__PURE__ */ Y("div", {
 			className: "fixed bottom-space-md end-space-md z-40 w-[min(42rem,calc(100vw-2rem))]",
-			children: /* @__PURE__ */ Y(T, {
+			children: /* @__PURE__ */ Y(ee, {
 				className: "max-h-[calc(100dvh-2rem)]",
 				viewportClassName: "max-h-[calc(100dvh-2rem)]",
 				children: t
@@ -1089,7 +1088,7 @@ function De(e) {
 			close: d.closeConversion
 		},
 		onConfirm: () => {
-			!_ && r.editorRef.current && (i.setBody(r.editorRef.current.convert(u.body)), S("editor"));
+			!_ && n.editorRef.current && (i.setBody(n.editorRef.current.convert(u.body)), S("editor"));
 		}
 	})] });
 }