@stll/folio-react 0.6.0 → 0.7.0

package/dist/{dialogs-CzvXYJyG.js → dialogs-DsHnfN0g.js}

@@ -1,20 +1,12 @@
-import { o as useFolioUI } from "./useFindReplace-BPBpMWS9.js";
+import { r as useFolioUI } from "./folio-ui-C-85DSuK.js";
+import { a as DIALOG_LABEL_CLASS, c as DIALOG_SECONDARY_BUTTON_CLASS, i as DIALOG_INPUT_CLASS, l as DIALOG_TITLE_CLASS, n as DIALOG_BODY_CLASS, o as DIALOG_POPUP_CLASS, r as DIALOG_FOOTER_CLASS, s as DIALOG_PRIMARY_BUTTON_CLASS, t as DIALOG_BACKDROP_CLASS, u as useCloseOnDialogOpenChange } from "./dialogChrome-BoGYPgeu.js";
+import { c } from "react-compiler-runtime";
 import { useEffect, useId, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/dialogs/dialogChrome.ts
-const DIALOG_BACKDROP_CLASS = "fixed inset-0 z-[10000] bg-black/50";
-const DIALOG_POPUP_CLASS = "bg-popover fixed start-1/2 top-1/2 z-[10001] w-full max-w-[520px] min-w-[360px] -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-xl";
-const DIALOG_TITLE_CLASS = "border-b px-5 py-3 text-base font-semibold";
-const DIALOG_BODY_CLASS = "flex flex-col gap-4 px-5 py-4";
-const DIALOG_FOOTER_CLASS = "flex justify-end gap-2 border-t px-5 py-3";
-const DIALOG_LABEL_CLASS = "text-muted-foreground text-[13px]";
-const DIALOG_INPUT_CLASS = "border-input bg-background text-foreground rounded border px-2 py-1.5 text-[13px] outline-none";
-const DIALOG_SECONDARY_BUTTON_CLASS = "border-input rounded border px-4 py-1.5 text-[13px]";
-const DIALOG_PRIMARY_BUTTON_CLASS = "bg-primary text-primary-foreground rounded px-4 py-1.5 text-[13px] font-medium disabled:cursor-not-allowed disabled:opacity-50";
-//#endregion
 //#region src/components/dialogs/HyperlinkDialog.tsx
 function HyperlinkDialog({ isOpen, onClose, onSubmit, onRemove, currentData, selectedText, bookmarks = [] }) {
 	const { Root: Dialog, Portal: DialogPortal, Backdrop: DialogBackdrop, Popup: DialogPopup, Title: DialogTitle, Close: DialogClose } = useFolioUI().Dialog;
+	const handleOpenChange = useCloseOnDialogOpenChange(onClose);
 	const id = useId();
 	const [targetType, setTargetType] = useState("url");
 	const [url, setUrl] = useState("");
@@ -57,10 +49,10 @@ function HyperlinkDialog({ isOpen, onClose, onSubmit, onRemove, currentData, sel
 	const handleSubmit = () => {
 		setTouched(true);
 		if (!canSubmit) return;
-		const href = targetType === "bookmark" ? `#${bookmark.trim()}` : normalizeUrl(url);
+		const href_0 = targetType === "bookmark" ? `#${bookmark.trim()}` : normalizeUrl(url);
 		onSubmit({
-			href,
-			displayText: displayText.trim() || href,
+			href: href_0,
+			displayText: displayText.trim() || href_0,
 			...tooltip.trim() ? { tooltip: tooltip.trim() } : {}
 		});
 		onClose();
@@ -71,9 +63,7 @@ function HyperlinkDialog({ isOpen, onClose, onSubmit, onRemove, currentData, sel
 	};
 	return /* @__PURE__ */ jsx(Dialog, {
 		open: isOpen,
-		onOpenChange: (open) => {
-			if (!open) onClose();
-		},
+		onOpenChange: handleOpenChange,
 		children: /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, { className: DIALOG_BACKDROP_CLASS }), /* @__PURE__ */ jsxs(DialogPopup, {
 			className: DIALOG_POPUP_CLASS,
 			children: [
@@ -117,7 +107,7 @@ function HyperlinkDialog({ isOpen, onClose, onSubmit, onRemove, currentData, sel
 									className: "border-input bg-background text-foreground rounded border px-2 py-1.5 text-[13px] outline-none",
 									id: fieldIds.url,
 									onBlur: () => setTouched(true),
-									onChange: (e) => setUrl(e.target.value),
+									onChange: (e_0) => setUrl(e_0.target.value),
 									placeholder: "https://example.com",
 									value: url
 								}),
@@ -136,7 +126,7 @@ function HyperlinkDialog({ isOpen, onClose, onSubmit, onRemove, currentData, sel
 							}), /* @__PURE__ */ jsxs("select", {
 								className: "border-input bg-background text-foreground rounded border px-2 py-1.5 text-[13px] outline-none",
 								id: fieldIds.bookmark,
-								onChange: (e) => setBookmark(e.target.value),
+								onChange: (e_1) => setBookmark(e_1.target.value),
 								value: bookmark,
 								children: [/* @__PURE__ */ jsx("option", {
 									value: "",
@@ -156,7 +146,7 @@ function HyperlinkDialog({ isOpen, onClose, onSubmit, onRemove, currentData, sel
 							}), /* @__PURE__ */ jsx("input", {
 								className: DIALOG_INPUT_CLASS,
 								id: fieldIds.displayText,
-								onChange: (e) => setDisplayText(e.target.value),
+								onChange: (e_2) => setDisplayText(e_2.target.value),
 								value: displayText
 							})]
 						}),
@@ -169,7 +159,7 @@ function HyperlinkDialog({ isOpen, onClose, onSubmit, onRemove, currentData, sel
 							}), /* @__PURE__ */ jsx("input", {
 								className: DIALOG_INPUT_CLASS,
 								id: fieldIds.tooltip,
-								onChange: (e) => setTooltip(e.target.value),
+								onChange: (e_3) => setTooltip(e_3.target.value),
 								value: tooltip
 							})]
 						})
@@ -225,6 +215,7 @@ function normalizeUrl(value) {
 //#region src/components/dialogs/InsertImageDialog.tsx
 function InsertImageDialog({ isOpen, onClose, onInsert, accept = "image/png,image/jpeg,image/gif,image/webp" }) {
 	const { Root: Dialog, Portal: DialogPortal, Backdrop: DialogBackdrop, Popup: DialogPopup, Title: DialogTitle, Close: DialogClose } = useFolioUI().Dialog;
+	const handleOpenChange = useCloseOnDialogOpenChange(onClose);
 	const id = useId();
 	const [file, setFile] = useState(null);
 	const [alt, setAlt] = useState("");
@@ -257,9 +248,7 @@ function InsertImageDialog({ isOpen, onClose, onInsert, accept = "image/png,imag
 	};
 	return /* @__PURE__ */ jsx(Dialog, {
 		open: isOpen,
-		onOpenChange: (open) => {
-			if (!open) onClose();
-		},
+		onOpenChange: handleOpenChange,
 		children: /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, { className: DIALOG_BACKDROP_CLASS }), /* @__PURE__ */ jsxs(DialogPopup, {
 			className: DIALOG_POPUP_CLASS,
 			children: [
@@ -293,7 +282,7 @@ function InsertImageDialog({ isOpen, onClose, onInsert, accept = "image/png,imag
 							}), /* @__PURE__ */ jsx("input", {
 								className: DIALOG_INPUT_CLASS,
 								id: fieldIds.alt,
-								onChange: (e) => setAlt(e.target.value),
+								onChange: (e_0) => setAlt(e_0.target.value),
 								placeholder: file?.name ?? "",
 								value: alt
 							})]
@@ -310,7 +299,7 @@ function InsertImageDialog({ isOpen, onClose, onInsert, accept = "image/png,imag
 									className: DIALOG_INPUT_CLASS,
 									id: fieldIds.width,
 									min: 1,
-									onChange: (e) => setWidth(e.target.value),
+									onChange: (e_1) => setWidth(e_1.target.value),
 									placeholder: "Auto",
 									type: "number",
 									value: width
@@ -325,7 +314,7 @@ function InsertImageDialog({ isOpen, onClose, onInsert, accept = "image/png,imag
 									className: DIALOG_INPUT_CLASS,
 									id: fieldIds.height,
 									min: 1,
-									onChange: (e) => setHeight(e.target.value),
+									onChange: (e_2) => setHeight(e_2.target.value),
 									placeholder: "Auto",
 									type: "number",
 									value: height
@@ -379,6 +368,7 @@ const DEFAULT_STYLE_OPTIONS = [
 ];
 function InsertTableDialog({ isOpen, onClose, onInsert, defaultRows = 3, defaultColumns = 3, styleOptions = DEFAULT_STYLE_OPTIONS }) {
 	const { Root: Dialog, Portal: DialogPortal, Backdrop: DialogBackdrop, Popup: DialogPopup, Title: DialogTitle, Close: DialogClose } = useFolioUI().Dialog;
+	const handleOpenChange = useCloseOnDialogOpenChange(onClose);
 	const id = useId();
 	const [rows, setRows] = useState(defaultRows);
 	const [columns, setColumns] = useState(defaultColumns);
@@ -420,9 +410,7 @@ function InsertTableDialog({ isOpen, onClose, onInsert, defaultRows = 3, default
 	};
 	return /* @__PURE__ */ jsx(Dialog, {
 		open: isOpen,
-		onOpenChange: (open) => {
-			if (!open) onClose();
-		},
+		onOpenChange: handleOpenChange,
 		children: /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, { className: DIALOG_BACKDROP_CLASS }), /* @__PURE__ */ jsxs(DialogPopup, {
 			className: DIALOG_POPUP_CLASS,
 			children: [
@@ -490,7 +478,7 @@ function InsertTableDialog({ isOpen, onClose, onInsert, defaultRows = 3, default
 									id: fieldIds.columns,
 									max: MAX_COLUMNS,
 									min: MIN_COLUMNS,
-									onChange: (e) => setColumns(Number(e.target.value) || MIN_COLUMNS),
+									onChange: (e_0) => setColumns(Number(e_0.target.value) || MIN_COLUMNS),
 									type: "number",
 									value: columns
 								})]
@@ -502,7 +490,7 @@ function InsertTableDialog({ isOpen, onClose, onInsert, defaultRows = 3, default
 							children: [/* @__PURE__ */ jsx("input", {
 								checked: autofit,
 								id: fieldIds.autofit,
-								onChange: (e) => setAutofit(e.target.checked),
+								onChange: (e_1) => setAutofit(e_1.target.checked),
 								type: "checkbox"
 							}), /* @__PURE__ */ jsx("span", {
 								className: DIALOG_LABEL_CLASS,
@@ -518,7 +506,7 @@ function InsertTableDialog({ isOpen, onClose, onInsert, defaultRows = 3, default
 							}), /* @__PURE__ */ jsxs("select", {
 								className: "border-input bg-background text-foreground rounded border px-2 py-1.5 text-[13px] outline-none",
 								id: fieldIds.style,
-								onChange: (e) => setStyleId(e.target.value),
+								onChange: (e_2) => setStyleId(e_2.target.value),
 								value: styleId,
 								children: [/* @__PURE__ */ jsx("option", {
 									value: "",
@@ -572,6 +560,7 @@ const PASTE_MODES = [
 ];
 function PasteSpecialDialog({ isOpen, onClose, onPaste, defaultMode = "plainText" }) {
 	const { Root: Dialog, Portal: DialogPortal, Backdrop: DialogBackdrop, Popup: DialogPopup, Title: DialogTitle, Close: DialogClose } = useFolioUI().Dialog;
+	const handleOpenChange = useCloseOnDialogOpenChange(onClose);
 	const id = useId();
 	const [mode, setMode] = useState(defaultMode);
 	useEffect(() => {
@@ -583,9 +572,7 @@ function PasteSpecialDialog({ isOpen, onClose, onPaste, defaultMode = "plainText
 	};
 	return /* @__PURE__ */ jsx(Dialog, {
 		open: isOpen,
-		onOpenChange: (open) => {
-			if (!open) onClose();
-		},
+		onOpenChange: handleOpenChange,
 		children: /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, { className: DIALOG_BACKDROP_CLASS }), /* @__PURE__ */ jsxs(DialogPopup, {
 			className: DIALOG_POPUP_CLASS,
 			children: [
@@ -646,6 +633,7 @@ const MIN_PARTS = 1;
 const MAX_PARTS = 63;
 function SplitCellDialog({ isOpen, onClose, onSplit, defaultRows = 1, defaultColumns = 2 }) {
 	const { Root: Dialog, Portal: DialogPortal, Backdrop: DialogBackdrop, Popup: DialogPopup, Title: DialogTitle, Close: DialogClose } = useFolioUI().Dialog;
+	const handleOpenChange = useCloseOnDialogOpenChange(onClose);
 	const id = useId();
 	const [rows, setRows] = useState(defaultRows);
 	const [columns, setColumns] = useState(defaultColumns);
@@ -679,9 +667,7 @@ function SplitCellDialog({ isOpen, onClose, onSplit, defaultRows = 1, defaultCol
 	};
 	return /* @__PURE__ */ jsx(Dialog, {
 		open: isOpen,
-		onOpenChange: (open) => {
-			if (!open) onClose();
-		},
+		onOpenChange: handleOpenChange,
 		children: /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, { className: DIALOG_BACKDROP_CLASS }), /* @__PURE__ */ jsxs(DialogPopup, {
 			className: DIALOG_POPUP_CLASS,
 			children: [
@@ -719,7 +705,7 @@ function SplitCellDialog({ isOpen, onClose, onSplit, defaultRows = 1, defaultCol
 								id: fieldIds.rows,
 								max: MAX_PARTS,
 								min: MIN_PARTS,
-								onChange: (e) => setRows(Number(e.target.value) || MIN_PARTS),
+								onChange: (e_0) => setRows(Number(e_0.target.value) || MIN_PARTS),
 								type: "number",
 								value: rows
 							})]
@@ -730,7 +716,7 @@ function SplitCellDialog({ isOpen, onClose, onSplit, defaultRows = 1, defaultCol
 						children: [/* @__PURE__ */ jsx("input", {
 							checked: mergeBeforeSplit,
 							id: fieldIds.mergeBeforeSplit,
-							onChange: (e) => setMergeBeforeSplit(e.target.checked),
+							onChange: (e_1) => setMergeBeforeSplit(e_1.target.checked),
 							type: "checkbox"
 						}), /* @__PURE__ */ jsx("span", {
 							className: DIALOG_LABEL_CLASS,
@@ -761,8 +747,11 @@ function clampInteger(value) {
 //#endregion
 //#region src/components/dialogs/WatermarkDialog.tsx
 const DEFAULT_TEXT_COLOR = "#C0C0C0";
-function WatermarkDialog({ isOpen, onClose, onApply, currentWatermark }) {
+function WatermarkDialog(t0) {
+	const $ = c(100);
+	const { isOpen, onClose, onApply, currentWatermark } = t0;
 	const { Root: Dialog, Portal: DialogPortal, Backdrop: DialogBackdrop, Popup: DialogPopup, Title: DialogTitle, Close: DialogClose } = useFolioUI().Dialog;
+	const handleOpenChange = useCloseOnDialogOpenChange(onClose);
 	const id = useId();
 	const [mode, setMode] = useState("text");
 	const [text, setText] = useState("CONFIDENTIAL");
@@ -775,289 +764,492 @@ function WatermarkDialog({ isOpen, onClose, onApply, currentWatermark }) {
 	const [imageTargetExternal, setImageTargetExternal] = useState(false);
 	const [scalePercent, setScalePercent] = useState(100);
 	const [washout, setWashout] = useState(true);
-	useEffect(() => {
-		if (!isOpen) return;
-		if (!currentWatermark) {
-			setMode("text");
-			setText("CONFIDENTIAL");
-			setFont("Calibri");
-			setColor(DEFAULT_TEXT_COLOR);
-			setDiagonal(true);
-			setOpacityPercent(50);
-			setImageRId("");
-			setImageTarget("");
-			setImageTargetExternal(false);
-			setScalePercent(100);
-			setWashout(true);
-			return;
-		}
-		setMode(currentWatermark.kind);
-		if (currentWatermark.kind === "text") {
-			setText(currentWatermark.text);
-			setFont(currentWatermark.font ?? "Calibri");
-			setColor(toColorInputValue(currentWatermark.color));
-			setDiagonal(currentWatermark.diagonal ?? true);
-			setOpacityPercent(Math.round((currentWatermark.opacity ?? .5) * 100));
-			return;
-		}
-		setImageRId(currentWatermark.imageRId);
-		setImageTarget(currentWatermark.imageTarget ?? "");
-		setImageTargetExternal(currentWatermark.imageTargetExternal ?? false);
-		setScalePercent(Math.round((currentWatermark.scale ?? 1) * 100));
-		setWashout(currentWatermark.washout ?? true);
-	}, [isOpen, currentWatermark]);
-	const fieldIds = {
-		mode: `${id}-watermark-mode`,
-		text: `${id}-watermark-text`,
-		font: `${id}-watermark-font`,
-		color: `${id}-watermark-color`,
-		diagonal: `${id}-watermark-diagonal`,
-		opacity: `${id}-watermark-opacity`,
-		imageRId: `${id}-watermark-image-rid`,
-		imageTarget: `${id}-watermark-image-target`,
-		imageTargetExternal: `${id}-watermark-image-external`,
-		scale: `${id}-watermark-scale`,
-		washout: `${id}-watermark-washout`
-	};
-	const canApply = mode === "none" || mode === "text" && text.trim().length > 0 || mode === "picture" && imageRId.trim().length > 0;
-	const handleApply = () => {
-		if (!canApply) return;
-		if (mode === "none") {
-			onApply(void 0);
-			onClose();
-			return;
-		}
-		if (mode === "text") {
+	let t1;
+	let t2;
+	if ($[0] !== currentWatermark || $[1] !== isOpen) {
+		t1 = () => {
+			if (!isOpen) return;
+			if (!currentWatermark) {
+				setMode("text");
+				setText("CONFIDENTIAL");
+				setFont("Calibri");
+				setColor(DEFAULT_TEXT_COLOR);
+				setDiagonal(true);
+				setOpacityPercent(50);
+				setImageRId("");
+				setImageTarget("");
+				setImageTargetExternal(false);
+				setScalePercent(100);
+				setWashout(true);
+				return;
+			}
+			setMode(currentWatermark.kind);
+			if (currentWatermark.kind === "text") {
+				setText(currentWatermark.text);
+				setFont(currentWatermark.font ?? "Calibri");
+				setColor(toColorInputValue(currentWatermark.color));
+				setDiagonal(currentWatermark.diagonal ?? true);
+				setOpacityPercent(Math.round((currentWatermark.opacity ?? .5) * 100));
+				return;
+			}
+			setImageRId(currentWatermark.imageRId);
+			setImageTarget(currentWatermark.imageTarget ?? "");
+			setImageTargetExternal(currentWatermark.imageTargetExternal ?? false);
+			setScalePercent(Math.round((currentWatermark.scale ?? 1) * 100));
+			setWashout(currentWatermark.washout ?? true);
+		};
+		t2 = [isOpen, currentWatermark];
+		$[0] = currentWatermark;
+		$[1] = isOpen;
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+	}
+	useEffect(t1, t2);
+	const t3 = `${id}-watermark-mode`;
+	const t4 = `${id}-watermark-text`;
+	const t5 = `${id}-watermark-font`;
+	const t6 = `${id}-watermark-color`;
+	const t7 = `${id}-watermark-diagonal`;
+	const t8 = `${id}-watermark-opacity`;
+	const t9 = `${id}-watermark-image-rid`;
+	const t10 = `${id}-watermark-image-target`;
+	const t11 = `${id}-watermark-image-external`;
+	const t12 = `${id}-watermark-scale`;
+	const t13 = `${id}-watermark-washout`;
+	let t14;
+	if ($[4] !== t10 || $[5] !== t11 || $[6] !== t12 || $[7] !== t13 || $[8] !== t3 || $[9] !== t4 || $[10] !== t5 || $[11] !== t6 || $[12] !== t7 || $[13] !== t8 || $[14] !== t9) {
+		t14 = {
+			mode: t3,
+			text: t4,
+			font: t5,
+			color: t6,
+			diagonal: t7,
+			opacity: t8,
+			imageRId: t9,
+			imageTarget: t10,
+			imageTargetExternal: t11,
+			scale: t12,
+			washout: t13
+		};
+		$[4] = t10;
+		$[5] = t11;
+		$[6] = t12;
+		$[7] = t13;
+		$[8] = t3;
+		$[9] = t4;
+		$[10] = t5;
+		$[11] = t6;
+		$[12] = t7;
+		$[13] = t8;
+		$[14] = t9;
+		$[15] = t14;
+	} else t14 = $[15];
+	const fieldIds = t14;
+	let t15;
+	if ($[16] !== imageRId || $[17] !== mode || $[18] !== text) {
+		t15 = mode === "none" || mode === "text" && text.trim().length > 0 || mode === "picture" && imageRId.trim().length > 0;
+		$[16] = imageRId;
+		$[17] = mode;
+		$[18] = text;
+		$[19] = t15;
+	} else t15 = $[19];
+	const canApply = t15;
+	let t16;
+	if ($[20] !== canApply || $[21] !== color || $[22] !== diagonal || $[23] !== font || $[24] !== imageRId || $[25] !== imageTarget || $[26] !== imageTargetExternal || $[27] !== mode || $[28] !== onApply || $[29] !== onClose || $[30] !== opacityPercent || $[31] !== scalePercent || $[32] !== text || $[33] !== washout) {
+		t16 = () => {
+			if (!canApply) return;
+			if (mode === "none") {
+				onApply(void 0);
+				onClose();
+				return;
+			}
+			if (mode === "text") {
+				onApply({
+					kind: "text",
+					text: text.trim(),
+					...font.trim() ? { font: font.trim() } : {},
+					color: stripHash(color),
+					diagonal,
+					opacity: clampPercent(opacityPercent) / 100
+				});
+				onClose();
+				return;
+			}
 			onApply({
-				kind: "text",
-				text: text.trim(),
-				...font.trim() ? { font: font.trim() } : {},
-				color: stripHash(color),
-				diagonal,
-				opacity: clampPercent(opacityPercent) / 100
+				kind: "picture",
+				imageRId: imageRId.trim(),
+				...imageTarget.trim() ? { imageTarget: imageTarget.trim() } : {},
+				...imageTarget.trim() ? { imageTargetExternal } : {},
+				scale: clampScalePercent(scalePercent) / 100,
+				washout
 			});
 			onClose();
-			return;
-		}
-		onApply({
-			kind: "picture",
-			imageRId: imageRId.trim(),
-			...imageTarget.trim() ? { imageTarget: imageTarget.trim() } : {},
-			...imageTarget.trim() ? { imageTargetExternal } : {},
-			scale: clampScalePercent(scalePercent) / 100,
-			washout
+		};
+		$[20] = canApply;
+		$[21] = color;
+		$[22] = diagonal;
+		$[23] = font;
+		$[24] = imageRId;
+		$[25] = imageTarget;
+		$[26] = imageTargetExternal;
+		$[27] = mode;
+		$[28] = onApply;
+		$[29] = onClose;
+		$[30] = opacityPercent;
+		$[31] = scalePercent;
+		$[32] = text;
+		$[33] = washout;
+		$[34] = t16;
+	} else t16 = $[34];
+	const handleApply = t16;
+	let t17;
+	if ($[35] !== DialogBackdrop) {
+		t17 = /* @__PURE__ */ jsx(DialogBackdrop, { className: DIALOG_BACKDROP_CLASS });
+		$[35] = DialogBackdrop;
+		$[36] = t17;
+	} else t17 = $[36];
+	let t18;
+	if ($[37] !== DialogTitle) {
+		t18 = /* @__PURE__ */ jsx(DialogTitle, {
+			className: DIALOG_TITLE_CLASS,
+			children: "Watermark"
 		});
-		onClose();
-	};
-	return /* @__PURE__ */ jsx(Dialog, {
-		open: isOpen,
-		onOpenChange: (open) => {
-			if (!open) onClose();
-		},
-		children: /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, { className: DIALOG_BACKDROP_CLASS }), /* @__PURE__ */ jsxs(DialogPopup, {
-			className: DIALOG_POPUP_CLASS,
+		$[37] = DialogTitle;
+		$[38] = t18;
+	} else t18 = $[38];
+	let t19;
+	if ($[39] === Symbol.for("react.memo_cache_sentinel")) {
+		t19 = /* @__PURE__ */ jsx("span", {
+			className: DIALOG_LABEL_CLASS,
+			children: "Type"
+		});
+		$[39] = t19;
+	} else t19 = $[39];
+	let t20;
+	if ($[40] === Symbol.for("react.memo_cache_sentinel")) {
+		t20 = (e) => setMode(toWatermarkMode(e.target.value));
+		$[40] = t20;
+	} else t20 = $[40];
+	let t21;
+	let t22;
+	let t23;
+	if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
+		t21 = /* @__PURE__ */ jsx("option", {
+			value: "text",
+			children: "Text watermark"
+		});
+		t22 = /* @__PURE__ */ jsx("option", {
+			value: "picture",
+			children: "Picture watermark"
+		});
+		t23 = /* @__PURE__ */ jsx("option", {
+			value: "none",
+			children: "No watermark"
+		});
+		$[41] = t21;
+		$[42] = t22;
+		$[43] = t23;
+	} else {
+		t21 = $[41];
+		t22 = $[42];
+		t23 = $[43];
+	}
+	let t24;
+	if ($[44] !== fieldIds.mode || $[45] !== mode) {
+		t24 = /* @__PURE__ */ jsxs("select", {
+			className: DIALOG_INPUT_CLASS,
+			id: fieldIds.mode,
+			onChange: t20,
+			value: mode,
 			children: [
-				/* @__PURE__ */ jsx(DialogTitle, {
-					className: DIALOG_TITLE_CLASS,
-					children: "Watermark"
+				t21,
+				t22,
+				t23
+			]
+		});
+		$[44] = fieldIds.mode;
+		$[45] = mode;
+		$[46] = t24;
+	} else t24 = $[46];
+	let t25;
+	if ($[47] !== fieldIds.mode || $[48] !== t24) {
+		t25 = /* @__PURE__ */ jsxs("label", {
+			className: "flex flex-col gap-1",
+			htmlFor: fieldIds.mode,
+			children: [t19, t24]
+		});
+		$[47] = fieldIds.mode;
+		$[48] = t24;
+		$[49] = t25;
+	} else t25 = $[49];
+	let t26;
+	if ($[50] !== color || $[51] !== diagonal || $[52] !== fieldIds.color || $[53] !== fieldIds.diagonal || $[54] !== fieldIds.font || $[55] !== fieldIds.opacity || $[56] !== fieldIds.text || $[57] !== font || $[58] !== mode || $[59] !== opacityPercent || $[60] !== text) {
+		t26 = mode === "text" && /* @__PURE__ */ jsxs("div", {
+			className: "grid grid-cols-2 gap-3",
+			children: [
+				/* @__PURE__ */ jsxs("label", {
+					className: "col-span-2 flex flex-col gap-1",
+					htmlFor: fieldIds.text,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground text-[13px]",
+						children: "Text"
+					}), /* @__PURE__ */ jsx("input", {
+						className: "border-input bg-background text-foreground rounded border px-2 py-1.5 text-[13px] outline-none",
+						id: fieldIds.text,
+						onChange: (e_0) => setText(e_0.target.value),
+						value: text
+					})]
 				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: DIALOG_BODY_CLASS,
-					children: [
-						/* @__PURE__ */ jsxs("label", {
-							className: "flex flex-col gap-1",
-							htmlFor: fieldIds.mode,
-							children: [/* @__PURE__ */ jsx("span", {
-								className: DIALOG_LABEL_CLASS,
-								children: "Type"
-							}), /* @__PURE__ */ jsxs("select", {
-								className: DIALOG_INPUT_CLASS,
-								id: fieldIds.mode,
-								onChange: (e) => setMode(toWatermarkMode(e.target.value)),
-								value: mode,
-								children: [
-									/* @__PURE__ */ jsx("option", {
-										value: "text",
-										children: "Text watermark"
-									}),
-									/* @__PURE__ */ jsx("option", {
-										value: "picture",
-										children: "Picture watermark"
-									}),
-									/* @__PURE__ */ jsx("option", {
-										value: "none",
-										children: "No watermark"
-									})
-								]
-							})]
-						}),
-						mode === "text" && /* @__PURE__ */ jsxs("div", {
-							className: "grid grid-cols-2 gap-3",
-							children: [
-								/* @__PURE__ */ jsxs("label", {
-									className: "col-span-2 flex flex-col gap-1",
-									htmlFor: fieldIds.text,
-									children: [/* @__PURE__ */ jsx("span", {
-										className: "text-muted-foreground text-[13px]",
-										children: "Text"
-									}), /* @__PURE__ */ jsx("input", {
-										className: "border-input bg-background text-foreground rounded border px-2 py-1.5 text-[13px] outline-none",
-										id: fieldIds.text,
-										onChange: (e) => setText(e.target.value),
-										value: text
-									})]
-								}),
-								/* @__PURE__ */ jsxs("label", {
-									className: "flex flex-col gap-1",
-									htmlFor: fieldIds.font,
-									children: [/* @__PURE__ */ jsx("span", {
-										className: "text-muted-foreground text-[13px]",
-										children: "Font"
-									}), /* @__PURE__ */ jsx("input", {
-										className: "border-input bg-background text-foreground rounded border px-2 py-1.5 text-[13px] outline-none",
-										id: fieldIds.font,
-										onChange: (e) => setFont(e.target.value),
-										value: font
-									})]
-								}),
-								/* @__PURE__ */ jsxs("label", {
-									className: "flex flex-col gap-1",
-									htmlFor: fieldIds.color,
-									children: [/* @__PURE__ */ jsx("span", {
-										className: "text-muted-foreground text-[13px]",
-										children: "Color"
-									}), /* @__PURE__ */ jsx("input", {
-										className: `border-input bg-background text-foreground rounded border px-2 py-1.5 text-[13px] outline-none h-[34px]`,
-										id: fieldIds.color,
-										onChange: (e) => setColor(e.target.value),
-										type: "color",
-										value: color
-									})]
-								}),
-								/* @__PURE__ */ jsxs("label", {
-									className: "flex flex-col gap-1",
-									htmlFor: fieldIds.opacity,
-									children: [/* @__PURE__ */ jsx("span", {
-										className: "text-muted-foreground text-[13px]",
-										children: "Opacity"
-									}), /* @__PURE__ */ jsx("input", {
-										className: "border-input bg-background text-foreground rounded border px-2 py-1.5 text-[13px] outline-none",
-										id: fieldIds.opacity,
-										max: 100,
-										min: 0,
-										onChange: (e) => setOpacityPercent(Number(e.target.value) || 0),
-										type: "number",
-										value: opacityPercent
-									})]
-								}),
-								/* @__PURE__ */ jsxs("label", {
-									className: "flex items-center gap-2 pt-6",
-									htmlFor: fieldIds.diagonal,
-									children: [/* @__PURE__ */ jsx("input", {
-										checked: diagonal,
-										id: fieldIds.diagonal,
-										onChange: (e) => setDiagonal(e.target.checked),
-										type: "checkbox"
-									}), /* @__PURE__ */ jsx("span", {
-										className: "text-muted-foreground text-[13px]",
-										children: "Diagonal"
-									})]
-								})
-							]
-						}),
-						mode === "picture" && /* @__PURE__ */ jsxs("div", {
-							className: "grid grid-cols-2 gap-3",
-							children: [
-								/* @__PURE__ */ jsxs("label", {
-									className: "col-span-2 flex flex-col gap-1",
-									htmlFor: fieldIds.imageRId,
-									children: [/* @__PURE__ */ jsx("span", {
-										className: "text-muted-foreground text-[13px]",
-										children: "Header image relationship id"
-									}), /* @__PURE__ */ jsx("input", {
-										className: "border-input bg-background text-foreground rounded border px-2 py-1.5 text-[13px] outline-none",
-										id: fieldIds.imageRId,
-										onChange: (e) => setImageRId(e.target.value),
-										placeholder: "rId12",
-										value: imageRId
-									})]
-								}),
-								/* @__PURE__ */ jsxs("label", {
-									className: "col-span-2 flex flex-col gap-1",
-									htmlFor: fieldIds.imageTarget,
-									children: [/* @__PURE__ */ jsx("span", {
-										className: "text-muted-foreground text-[13px]",
-										children: "Image target"
-									}), /* @__PURE__ */ jsx("input", {
-										className: "border-input bg-background text-foreground rounded border px-2 py-1.5 text-[13px] outline-none",
-										id: fieldIds.imageTarget,
-										onChange: (e) => setImageTarget(e.target.value),
-										placeholder: "word/media/image1.png",
-										value: imageTarget
-									})]
-								}),
-								/* @__PURE__ */ jsxs("label", {
-									className: "flex flex-col gap-1",
-									htmlFor: fieldIds.scale,
-									children: [/* @__PURE__ */ jsx("span", {
-										className: "text-muted-foreground text-[13px]",
-										children: "Scale"
-									}), /* @__PURE__ */ jsx("input", {
-										className: "border-input bg-background text-foreground rounded border px-2 py-1.5 text-[13px] outline-none",
-										id: fieldIds.scale,
-										max: 300,
-										min: 1,
-										onChange: (e) => setScalePercent(Number(e.target.value) || 1),
-										type: "number",
-										value: scalePercent
-									})]
-								}),
-								/* @__PURE__ */ jsxs("label", {
-									className: "flex items-center gap-2 pt-6",
-									htmlFor: fieldIds.washout,
-									children: [/* @__PURE__ */ jsx("input", {
-										checked: washout,
-										id: fieldIds.washout,
-										onChange: (e) => setWashout(e.target.checked),
-										type: "checkbox"
-									}), /* @__PURE__ */ jsx("span", {
-										className: "text-muted-foreground text-[13px]",
-										children: "Washout"
-									})]
-								}),
-								/* @__PURE__ */ jsxs("label", {
-									className: "col-span-2 flex items-center gap-2",
-									htmlFor: fieldIds.imageTargetExternal,
-									children: [/* @__PURE__ */ jsx("input", {
-										checked: imageTargetExternal,
-										id: fieldIds.imageTargetExternal,
-										onChange: (e) => setImageTargetExternal(e.target.checked),
-										type: "checkbox"
-									}), /* @__PURE__ */ jsx("span", {
-										className: "text-muted-foreground text-[13px]",
-										children: "Target is an external URL"
-									})]
-								})
-							]
-						})
-					]
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex flex-col gap-1",
+					htmlFor: fieldIds.font,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground text-[13px]",
+						children: "Font"
+					}), /* @__PURE__ */ jsx("input", {
+						className: "border-input bg-background text-foreground rounded border px-2 py-1.5 text-[13px] outline-none",
+						id: fieldIds.font,
+						onChange: (e_1) => setFont(e_1.target.value),
+						value: font
+					})]
 				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: DIALOG_FOOTER_CLASS,
-					children: [/* @__PURE__ */ jsx(DialogClose, {
-						className: DIALOG_SECONDARY_BUTTON_CLASS,
-						children: "Cancel"
-					}), /* @__PURE__ */ jsx("button", {
-						className: DIALOG_PRIMARY_BUTTON_CLASS,
-						disabled: !canApply,
-						onClick: handleApply,
-						type: "button",
-						children: "Apply"
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex flex-col gap-1",
+					htmlFor: fieldIds.color,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground text-[13px]",
+						children: "Color"
+					}), /* @__PURE__ */ jsx("input", {
+						className: `border-input bg-background text-foreground rounded border px-2 py-1.5 text-[13px] outline-none h-[34px]`,
+						id: fieldIds.color,
+						onChange: (e_2) => setColor(e_2.target.value),
+						type: "color",
+						value: color
+					})]
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex flex-col gap-1",
+					htmlFor: fieldIds.opacity,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground text-[13px]",
+						children: "Opacity"
+					}), /* @__PURE__ */ jsx("input", {
+						className: "border-input bg-background text-foreground rounded border px-2 py-1.5 text-[13px] outline-none",
+						id: fieldIds.opacity,
+						max: 100,
+						min: 0,
+						onChange: (e_3) => setOpacityPercent(Number(e_3.target.value) || 0),
+						type: "number",
+						value: opacityPercent
+					})]
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex items-center gap-2 pt-6",
+					htmlFor: fieldIds.diagonal,
+					children: [/* @__PURE__ */ jsx("input", {
+						checked: diagonal,
+						id: fieldIds.diagonal,
+						onChange: (e_4) => setDiagonal(e_4.target.checked),
+						type: "checkbox"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground text-[13px]",
+						children: "Diagonal"
 					})]
 				})
 			]
-		})] })
-	});
+		});
+		$[50] = color;
+		$[51] = diagonal;
+		$[52] = fieldIds.color;
+		$[53] = fieldIds.diagonal;
+		$[54] = fieldIds.font;
+		$[55] = fieldIds.opacity;
+		$[56] = fieldIds.text;
+		$[57] = font;
+		$[58] = mode;
+		$[59] = opacityPercent;
+		$[60] = text;
+		$[61] = t26;
+	} else t26 = $[61];
+	let t27;
+	if ($[62] !== fieldIds.imageRId || $[63] !== fieldIds.imageTarget || $[64] !== fieldIds.imageTargetExternal || $[65] !== fieldIds.scale || $[66] !== fieldIds.washout || $[67] !== imageRId || $[68] !== imageTarget || $[69] !== imageTargetExternal || $[70] !== mode || $[71] !== scalePercent || $[72] !== washout) {
+		t27 = mode === "picture" && /* @__PURE__ */ jsxs("div", {
+			className: "grid grid-cols-2 gap-3",
+			children: [
+				/* @__PURE__ */ jsxs("label", {
+					className: "col-span-2 flex flex-col gap-1",
+					htmlFor: fieldIds.imageRId,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground text-[13px]",
+						children: "Header image relationship id"
+					}), /* @__PURE__ */ jsx("input", {
+						className: "border-input bg-background text-foreground rounded border px-2 py-1.5 text-[13px] outline-none",
+						id: fieldIds.imageRId,
+						onChange: (e_5) => setImageRId(e_5.target.value),
+						placeholder: "rId12",
+						value: imageRId
+					})]
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: "col-span-2 flex flex-col gap-1",
+					htmlFor: fieldIds.imageTarget,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground text-[13px]",
+						children: "Image target"
+					}), /* @__PURE__ */ jsx("input", {
+						className: "border-input bg-background text-foreground rounded border px-2 py-1.5 text-[13px] outline-none",
+						id: fieldIds.imageTarget,
+						onChange: (e_6) => setImageTarget(e_6.target.value),
+						placeholder: "word/media/image1.png",
+						value: imageTarget
+					})]
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex flex-col gap-1",
+					htmlFor: fieldIds.scale,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground text-[13px]",
+						children: "Scale"
+					}), /* @__PURE__ */ jsx("input", {
+						className: "border-input bg-background text-foreground rounded border px-2 py-1.5 text-[13px] outline-none",
+						id: fieldIds.scale,
+						max: 300,
+						min: 1,
+						onChange: (e_7) => setScalePercent(Number(e_7.target.value) || 1),
+						type: "number",
+						value: scalePercent
+					})]
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex items-center gap-2 pt-6",
+					htmlFor: fieldIds.washout,
+					children: [/* @__PURE__ */ jsx("input", {
+						checked: washout,
+						id: fieldIds.washout,
+						onChange: (e_8) => setWashout(e_8.target.checked),
+						type: "checkbox"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground text-[13px]",
+						children: "Washout"
+					})]
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: "col-span-2 flex items-center gap-2",
+					htmlFor: fieldIds.imageTargetExternal,
+					children: [/* @__PURE__ */ jsx("input", {
+						checked: imageTargetExternal,
+						id: fieldIds.imageTargetExternal,
+						onChange: (e_9) => setImageTargetExternal(e_9.target.checked),
+						type: "checkbox"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground text-[13px]",
+						children: "Target is an external URL"
+					})]
+				})
+			]
+		});
+		$[62] = fieldIds.imageRId;
+		$[63] = fieldIds.imageTarget;
+		$[64] = fieldIds.imageTargetExternal;
+		$[65] = fieldIds.scale;
+		$[66] = fieldIds.washout;
+		$[67] = imageRId;
+		$[68] = imageTarget;
+		$[69] = imageTargetExternal;
+		$[70] = mode;
+		$[71] = scalePercent;
+		$[72] = washout;
+		$[73] = t27;
+	} else t27 = $[73];
+	let t28;
+	if ($[74] !== t25 || $[75] !== t26 || $[76] !== t27) {
+		t28 = /* @__PURE__ */ jsxs("div", {
+			className: DIALOG_BODY_CLASS,
+			children: [
+				t25,
+				t26,
+				t27
+			]
+		});
+		$[74] = t25;
+		$[75] = t26;
+		$[76] = t27;
+		$[77] = t28;
+	} else t28 = $[77];
+	let t29;
+	if ($[78] !== DialogClose) {
+		t29 = /* @__PURE__ */ jsx(DialogClose, {
+			className: DIALOG_SECONDARY_BUTTON_CLASS,
+			children: "Cancel"
+		});
+		$[78] = DialogClose;
+		$[79] = t29;
+	} else t29 = $[79];
+	const t30 = !canApply;
+	let t31;
+	if ($[80] !== handleApply || $[81] !== t30) {
+		t31 = /* @__PURE__ */ jsx("button", {
+			className: DIALOG_PRIMARY_BUTTON_CLASS,
+			disabled: t30,
+			onClick: handleApply,
+			type: "button",
+			children: "Apply"
+		});
+		$[80] = handleApply;
+		$[81] = t30;
+		$[82] = t31;
+	} else t31 = $[82];
+	let t32;
+	if ($[83] !== t29 || $[84] !== t31) {
+		t32 = /* @__PURE__ */ jsxs("div", {
+			className: DIALOG_FOOTER_CLASS,
+			children: [t29, t31]
+		});
+		$[83] = t29;
+		$[84] = t31;
+		$[85] = t32;
+	} else t32 = $[85];
+	let t33;
+	if ($[86] !== DialogPopup || $[87] !== t18 || $[88] !== t28 || $[89] !== t32) {
+		t33 = /* @__PURE__ */ jsxs(DialogPopup, {
+			className: DIALOG_POPUP_CLASS,
+			children: [
+				t18,
+				t28,
+				t32
+			]
+		});
+		$[86] = DialogPopup;
+		$[87] = t18;
+		$[88] = t28;
+		$[89] = t32;
+		$[90] = t33;
+	} else t33 = $[90];
+	let t34;
+	if ($[91] !== DialogPortal || $[92] !== t17 || $[93] !== t33) {
+		t34 = /* @__PURE__ */ jsxs(DialogPortal, { children: [t17, t33] });
+		$[91] = DialogPortal;
+		$[92] = t17;
+		$[93] = t33;
+		$[94] = t34;
+	} else t34 = $[94];
+	let t35;
+	if ($[95] !== Dialog || $[96] !== handleOpenChange || $[97] !== isOpen || $[98] !== t34) {
+		t35 = /* @__PURE__ */ jsx(Dialog, {
+			open: isOpen,
+			onOpenChange: handleOpenChange,
+			children: t34
+		});
+		$[95] = Dialog;
+		$[96] = handleOpenChange;
+		$[97] = isOpen;
+		$[98] = t34;
+		$[99] = t35;
+	} else t35 = $[99];
+	return t35;
 }
 function toWatermarkMode(value) {
 	if (value === "none" || value === "picture" || value === "text") return value;