@stll/folio-react 0.25.2 → 0.26.0

package/dist/{dialogs-Dzu4hqRp.js → dialogs-De-oslzU.js}

@@ -1,44 +1,41 @@
-import { r as useFolioUI } from "./folio-ui-DO95voaI.js";
+import { r as useFolioUI } from "./folio-ui-rCHqCEG6.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 { useId, useState } from "react";
 import { useTranslations } from "use-intl";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { isAllowedExternalWatermarkImageUrl } from "@stll/folio-core/watermark";
 //#region src/components/dialogs/HyperlinkDialog.tsx
-function HyperlinkDialog({ isOpen, onClose, onSubmit, onRemove, currentData, selectedText, bookmarks = [] }) {
+function HyperlinkDialog(props) {
+	const $ = c(6);
+	if (!props.isOpen) return null;
+	let t0;
+	if ($[0] !== props.currentData || $[1] !== props.selectedText) {
+		t0 = JSON.stringify([props.currentData, props.selectedText]);
+		$[0] = props.currentData;
+		$[1] = props.selectedText;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== props || $[4] !== t0) {
+		t1 = /* @__PURE__ */ jsx(HyperlinkDialogForm, { ...props }, t0);
+		$[3] = props;
+		$[4] = t0;
+		$[5] = t1;
+	} else t1 = $[5];
+	return t1;
+}
+function HyperlinkDialogForm({ 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 t = useTranslations("folio");
 	const id = useId();
-	const [targetType, setTargetType] = useState("url");
-	const [url, setUrl] = useState("");
-	const [bookmark, setBookmark] = useState("");
-	const [displayText, setDisplayText] = useState("");
-	const [tooltip, setTooltip] = useState("");
+	const [targetType, setTargetType] = useState(currentData?.href?.startsWith("#") ? "bookmark" : "url");
+	const [url, setUrl] = useState(currentData?.href?.startsWith("#") ? "" : currentData?.href ?? "");
+	const [bookmark, setBookmark] = useState(currentData?.href?.startsWith("#") ? currentData.href.slice(1) : "");
+	const [displayText, setDisplayText] = useState(currentData?.displayText ?? selectedText ?? "");
+	const [tooltip, setTooltip] = useState(currentData?.tooltip ?? "");
 	const [touched, setTouched] = useState(false);
-	useEffect(() => {
-		if (!isOpen) {
-			setTouched(false);
-			return;
-		}
-		const href = currentData?.href ?? "";
-		if (href.startsWith("#")) {
-			setTargetType("bookmark");
-			setBookmark(href.slice(1));
-			setUrl("");
-		} else {
-			setTargetType("url");
-			setUrl(href);
-			setBookmark("");
-		}
-		setDisplayText(currentData?.displayText ?? selectedText ?? "");
-		setTooltip(currentData?.tooltip ?? "");
-	}, [
-		isOpen,
-		currentData,
-		selectedText
-	]);
 	const urlError = targetType === "url" ? getUrlError(url) : "";
 	const canSubmit = targetType === "bookmark" ? bookmark.trim().length > 0 : url.trim().length > 0 && urlError.length === 0;
 	const isEditing = Boolean(currentData?.href);
@@ -52,10 +49,10 @@ function HyperlinkDialog({ isOpen, onClose, onSubmit, onRemove, currentData, sel
 	const handleSubmit = () => {
 		setTouched(true);
 		if (!canSubmit) return;
-		const href_0 = targetType === "bookmark" ? `#${bookmark.trim()}` : normalizeUrl(url);
+		const href = targetType === "bookmark" ? `#${bookmark.trim()}` : normalizeUrl(url);
 		onSubmit({
-			href: href_0,
-			displayText: displayText.trim() || href_0,
+			href,
+			displayText: displayText.trim() || href,
 			...tooltip.trim() ? { tooltip: tooltip.trim() } : {}
 		});
 		onClose();
@@ -216,7 +213,18 @@ function normalizeUrl(value) {
 }
 //#endregion
 //#region src/components/dialogs/InsertImageDialog.tsx
-function InsertImageDialog({ isOpen, onClose, onInsert, accept = "image/png,image/jpeg,image/gif,image/webp" }) {
+function InsertImageDialog(props) {
+	const $ = c(2);
+	if (!props.isOpen) return null;
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(InsertImageDialogForm, { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+function InsertImageDialogForm({ 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 t = useTranslations("folio");
@@ -225,13 +233,6 @@ function InsertImageDialog({ isOpen, onClose, onInsert, accept = "image/png,imag
 	const [alt, setAlt] = useState("");
 	const [width, setWidth] = useState("");
 	const [height, setHeight] = useState("");
-	useEffect(() => {
-		if (!isOpen) return;
-		setFile(null);
-		setAlt("");
-		setWidth("");
-		setHeight("");
-	}, [isOpen]);
 	const fieldIds = {
 		file: `${id}-insert-image-file`,
 		alt: `${id}-insert-image-alt`,
@@ -370,7 +371,26 @@ const DEFAULT_STYLE_OPTIONS = [
 		name: "Grid Table Light"
 	}
 ];
-function InsertTableDialog({ isOpen, onClose, onInsert, defaultRows = 3, defaultColumns = 3, styleOptions = DEFAULT_STYLE_OPTIONS }) {
+function InsertTableDialog(props) {
+	const $ = c(6);
+	if (!props.isOpen) return null;
+	let t0;
+	if ($[0] !== props.defaultColumns || $[1] !== props.defaultRows) {
+		t0 = JSON.stringify([props.defaultRows, props.defaultColumns]);
+		$[0] = props.defaultColumns;
+		$[1] = props.defaultRows;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== props || $[4] !== t0) {
+		t1 = /* @__PURE__ */ jsx(InsertTableDialogForm, { ...props }, t0);
+		$[3] = props;
+		$[4] = t0;
+		$[5] = t1;
+	} else t1 = $[5];
+	return t1;
+}
+function InsertTableDialogForm({ 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 t = useTranslations("folio");
@@ -381,19 +401,6 @@ function InsertTableDialog({ isOpen, onClose, onInsert, defaultRows = 3, default
 	const [hoverColumns, setHoverColumns] = useState(0);
 	const [autofit, setAutofit] = useState(false);
 	const [styleId, setStyleId] = useState("");
-	useEffect(() => {
-		if (!isOpen) return;
-		setRows(defaultRows);
-		setColumns(defaultColumns);
-		setHoverRows(0);
-		setHoverColumns(0);
-		setAutofit(false);
-		setStyleId("");
-	}, [
-		isOpen,
-		defaultRows,
-		defaultColumns
-	]);
 	const normalizedRows = clampInteger$1(rows, MIN_ROWS, MAX_ROWS);
 	const normalizedColumns = clampInteger$1(columns, MIN_COLUMNS, MAX_COLUMNS);
 	const canInsert = Number.isFinite(rows) && Number.isFinite(columns);
@@ -563,15 +570,30 @@ const PASTE_MODES = [
 		description: "Paste text only and use the destination formatting."
 	}
 ];
-function PasteSpecialDialog({ isOpen, onClose, onPaste, defaultMode = "plainText" }) {
+function PasteSpecialDialog(props) {
+	const $ = c(5);
+	if (!props.isOpen) return null;
+	let t0;
+	if ($[0] !== props.defaultMode) {
+		t0 = JSON.stringify(props.defaultMode);
+		$[0] = props.defaultMode;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(PasteSpecialDialogForm, { ...props }, t0);
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+function PasteSpecialDialogForm({ 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 t = useTranslations("folio");
 	const id = useId();
 	const [mode, setMode] = useState(defaultMode);
-	useEffect(() => {
-		if (isOpen) setMode(defaultMode);
-	}, [isOpen, defaultMode]);
 	const handlePaste = () => {
 		onPaste(mode);
 		onClose();
@@ -637,7 +659,26 @@ function PasteSpecialDialog({ isOpen, onClose, onPaste, defaultMode = "plainText
 //#region src/components/dialogs/SplitCellDialog.tsx
 const MIN_PARTS = 1;
 const MAX_PARTS = 63;
-function SplitCellDialog({ isOpen, onClose, onSplit, defaultRows = 1, defaultColumns = 2 }) {
+function SplitCellDialog(props) {
+	const $ = c(6);
+	if (!props.isOpen) return null;
+	let t0;
+	if ($[0] !== props.defaultColumns || $[1] !== props.defaultRows) {
+		t0 = JSON.stringify([props.defaultRows, props.defaultColumns]);
+		$[0] = props.defaultColumns;
+		$[1] = props.defaultRows;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== props || $[4] !== t0) {
+		t1 = /* @__PURE__ */ jsx(SplitCellDialogForm, { ...props }, t0);
+		$[3] = props;
+		$[4] = t0;
+		$[5] = t1;
+	} else t1 = $[5];
+	return t1;
+}
+function SplitCellDialogForm({ 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 t = useTranslations("folio");
@@ -645,16 +686,6 @@ function SplitCellDialog({ isOpen, onClose, onSplit, defaultRows = 1, defaultCol
 	const [rows, setRows] = useState(defaultRows);
 	const [columns, setColumns] = useState(defaultColumns);
 	const [mergeBeforeSplit, setMergeBeforeSplit] = useState(false);
-	useEffect(() => {
-		if (!isOpen) return;
-		setRows(defaultRows);
-		setColumns(defaultColumns);
-		setMergeBeforeSplit(false);
-	}, [
-		isOpen,
-		defaultRows,
-		defaultColumns
-	]);
 	const normalizedRows = clampInteger(rows);
 	const normalizedColumns = clampInteger(columns);
 	const canSplit = normalizedRows > 1 || normalizedColumns > 1;
@@ -754,130 +785,122 @@ function clampInteger(value) {
 //#endregion
 //#region src/components/dialogs/WatermarkDialog.tsx
 const DEFAULT_TEXT_COLOR = "#C0C0C0";
-function WatermarkDialog(t0) {
-	const $ = c(133);
+function WatermarkDialog(props) {
+	const $ = c(5);
+	if (!props.isOpen) return null;
+	let t0;
+	if ($[0] !== props.currentWatermark) {
+		t0 = JSON.stringify(props.currentWatermark);
+		$[0] = props.currentWatermark;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(WatermarkDialogForm, { ...props }, t0);
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+function WatermarkDialogForm(t0) {
+	const $ = c(135);
 	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 t = useTranslations("folio");
 	const id = useId();
-	const [mode, setMode] = useState("text");
-	const [text, setText] = useState("CONFIDENTIAL");
-	const [font, setFont] = useState("Calibri");
-	const [color, setColor] = useState(DEFAULT_TEXT_COLOR);
-	const [diagonal, setDiagonal] = useState(true);
-	const [opacityPercent, setOpacityPercent] = useState(50);
-	const [imageRId, setImageRId] = useState("");
-	const [imageTarget, setImageTarget] = useState("");
-	const [imageTargetExternal, setImageTargetExternal] = useState(false);
-	const [scalePercent, setScalePercent] = useState(100);
-	const [washout, setWashout] = useState(true);
+	const [mode, setMode] = useState(currentWatermark?.kind ?? "text");
+	const [text, setText] = useState(currentWatermark?.kind === "text" ? currentWatermark.text : "CONFIDENTIAL");
+	const [font, setFont] = useState(currentWatermark?.kind === "text" ? currentWatermark.font ?? "Calibri" : "Calibri");
 	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];
+	if ($[0] !== currentWatermark) {
+		t1 = currentWatermark?.kind === "text" ? toColorInputValue(currentWatermark.color) : DEFAULT_TEXT_COLOR;
 		$[0] = currentWatermark;
-		$[1] = isOpen;
-		$[2] = t1;
+		$[1] = t1;
+	} else t1 = $[1];
+	const [color, setColor] = useState(t1);
+	const [diagonal, setDiagonal] = useState(currentWatermark?.kind === "text" ? currentWatermark.diagonal ?? true : true);
+	let t2;
+	if ($[2] !== currentWatermark) {
+		t2 = currentWatermark?.kind === "text" ? Math.round((currentWatermark.opacity ?? .5) * 100) : 50;
+		$[2] = currentWatermark;
 		$[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;
+	} else t2 = $[3];
+	const [opacityPercent, setOpacityPercent] = useState(t2);
+	const [imageRId, setImageRId] = useState(currentWatermark?.kind === "picture" ? currentWatermark.imageRId ?? "" : "");
+	const [imageTarget, setImageTarget] = useState(currentWatermark?.kind === "picture" ? currentWatermark.imageTarget ?? "" : "");
+	const [imageTargetExternal, setImageTargetExternal] = useState(currentWatermark?.kind === "picture" ? currentWatermark.imageTargetExternal ?? false : false);
+	let t3;
+	if ($[4] !== currentWatermark) {
+		t3 = currentWatermark?.kind === "picture" ? Math.round((currentWatermark.scale ?? 1) * 100) : 100;
+		$[4] = currentWatermark;
+		$[5] = t3;
+	} else t3 = $[5];
+	const [scalePercent, setScalePercent] = useState(t3);
+	const [washout, setWashout] = useState(currentWatermark?.kind === "picture" ? currentWatermark.washout ?? true : true);
+	const t4 = `${id}-watermark-mode`;
+	const t5 = `${id}-watermark-text`;
+	const t6 = `${id}-watermark-font`;
+	const t7 = `${id}-watermark-color`;
+	const t8 = `${id}-watermark-diagonal`;
+	const t9 = `${id}-watermark-opacity`;
+	const t10 = `${id}-watermark-image-rid`;
+	const t11 = `${id}-watermark-image-target`;
+	const t12 = `${id}-watermark-image-external`;
+	const t13 = `${id}-watermark-scale`;
+	const t14 = `${id}-watermark-washout`;
 	let t15;
-	if ($[16] !== imageTarget || $[17] !== imageTargetExternal || $[18] !== mode) {
-		t15 = mode === "picture" && imageTargetExternal && imageTarget.trim().length > 0 ? getExternalImageTargetError(imageTarget.trim()) : "";
-		$[16] = imageTarget;
-		$[17] = imageTargetExternal;
-		$[18] = mode;
-		$[19] = t15;
-	} else t15 = $[19];
-	const imageTargetError = t15;
+	if ($[6] !== t10 || $[7] !== t11 || $[8] !== t12 || $[9] !== t13 || $[10] !== t14 || $[11] !== t4 || $[12] !== t5 || $[13] !== t6 || $[14] !== t7 || $[15] !== t8 || $[16] !== t9) {
+		t15 = {
+			mode: t4,
+			text: t5,
+			font: t6,
+			color: t7,
+			diagonal: t8,
+			opacity: t9,
+			imageRId: t10,
+			imageTarget: t11,
+			imageTargetExternal: t12,
+			scale: t13,
+			washout: t14
+		};
+		$[6] = t10;
+		$[7] = t11;
+		$[8] = t12;
+		$[9] = t13;
+		$[10] = t14;
+		$[11] = t4;
+		$[12] = t5;
+		$[13] = t6;
+		$[14] = t7;
+		$[15] = t8;
+		$[16] = t9;
+		$[17] = t15;
+	} else t15 = $[17];
+	const fieldIds = t15;
 	let t16;
-	if ($[20] !== imageRId || $[21] !== imageTargetError || $[22] !== mode || $[23] !== text) {
-		t16 = mode === "none" || mode === "text" && text.trim().length > 0 || mode === "picture" && imageRId.trim().length > 0 && imageTargetError.length === 0;
-		$[20] = imageRId;
-		$[21] = imageTargetError;
-		$[22] = mode;
-		$[23] = text;
-		$[24] = t16;
-	} else t16 = $[24];
-	const canApply = t16;
+	if ($[18] !== imageTarget || $[19] !== imageTargetExternal || $[20] !== mode) {
+		t16 = mode === "picture" && imageTargetExternal && imageTarget.trim().length > 0 ? getExternalImageTargetError(imageTarget.trim()) : "";
+		$[18] = imageTarget;
+		$[19] = imageTargetExternal;
+		$[20] = mode;
+		$[21] = t16;
+	} else t16 = $[21];
+	const imageTargetError = t16;
 	let t17;
-	if ($[25] !== canApply || $[26] !== color || $[27] !== diagonal || $[28] !== font || $[29] !== imageRId || $[30] !== imageTarget || $[31] !== imageTargetExternal || $[32] !== mode || $[33] !== onApply || $[34] !== onClose || $[35] !== opacityPercent || $[36] !== scalePercent || $[37] !== text || $[38] !== washout) {
-		t17 = () => {
+	if ($[22] !== imageRId || $[23] !== imageTargetError || $[24] !== mode || $[25] !== text) {
+		t17 = mode === "none" || mode === "text" && text.trim().length > 0 || mode === "picture" && imageRId.trim().length > 0 && imageTargetError.length === 0;
+		$[22] = imageRId;
+		$[23] = imageTargetError;
+		$[24] = mode;
+		$[25] = text;
+		$[26] = t17;
+	} else t17 = $[26];
+	const canApply = t17;
+	let t18;
+	if ($[27] !== canApply || $[28] !== color || $[29] !== diagonal || $[30] !== font || $[31] !== imageRId || $[32] !== imageTarget || $[33] !== imageTargetExternal || $[34] !== mode || $[35] !== onApply || $[36] !== onClose || $[37] !== opacityPercent || $[38] !== scalePercent || $[39] !== text || $[40] !== washout) {
+		t18 = () => {
 			if (!canApply) return;
 			if (mode === "none") {
 				onApply(void 0);
@@ -906,147 +929,147 @@ function WatermarkDialog(t0) {
 			});
 			onClose();
 		};
-		$[25] = canApply;
-		$[26] = color;
-		$[27] = diagonal;
-		$[28] = font;
-		$[29] = imageRId;
-		$[30] = imageTarget;
-		$[31] = imageTargetExternal;
-		$[32] = mode;
-		$[33] = onApply;
-		$[34] = onClose;
-		$[35] = opacityPercent;
-		$[36] = scalePercent;
-		$[37] = text;
-		$[38] = washout;
-		$[39] = t17;
-	} else t17 = $[39];
-	const handleApply = t17;
-	let t18;
-	if ($[40] !== DialogBackdrop) {
-		t18 = /* @__PURE__ */ jsx(DialogBackdrop, { className: DIALOG_BACKDROP_CLASS });
-		$[40] = DialogBackdrop;
+		$[27] = canApply;
+		$[28] = color;
+		$[29] = diagonal;
+		$[30] = font;
+		$[31] = imageRId;
+		$[32] = imageTarget;
+		$[33] = imageTargetExternal;
+		$[34] = mode;
+		$[35] = onApply;
+		$[36] = onClose;
+		$[37] = opacityPercent;
+		$[38] = scalePercent;
+		$[39] = text;
+		$[40] = washout;
 		$[41] = t18;
 	} else t18 = $[41];
+	const handleApply = t18;
 	let t19;
-	if ($[42] !== t) {
-		t19 = t("dialogs.watermark.title");
-		$[42] = t;
+	if ($[42] !== DialogBackdrop) {
+		t19 = /* @__PURE__ */ jsx(DialogBackdrop, { className: DIALOG_BACKDROP_CLASS });
+		$[42] = DialogBackdrop;
 		$[43] = t19;
 	} else t19 = $[43];
 	let t20;
-	if ($[44] !== DialogTitle || $[45] !== t19) {
-		t20 = /* @__PURE__ */ jsx(DialogTitle, {
+	if ($[44] !== t) {
+		t20 = t("dialogs.watermark.title");
+		$[44] = t;
+		$[45] = t20;
+	} else t20 = $[45];
+	let t21;
+	if ($[46] !== DialogTitle || $[47] !== t20) {
+		t21 = /* @__PURE__ */ jsx(DialogTitle, {
 			className: DIALOG_TITLE_CLASS,
-			children: t19
+			children: t20
 		});
-		$[44] = DialogTitle;
-		$[45] = t19;
-		$[46] = t20;
-	} else t20 = $[46];
-	const t21 = fieldIds.mode;
-	let t22;
-	if ($[47] !== t) {
-		t22 = t("dialogs.watermark.type");
-		$[47] = t;
-		$[48] = t22;
-	} else t22 = $[48];
+		$[46] = DialogTitle;
+		$[47] = t20;
+		$[48] = t21;
+	} else t21 = $[48];
+	const t22 = fieldIds.mode;
 	let t23;
-	if ($[49] !== t22) {
-		t23 = /* @__PURE__ */ jsx("span", {
-			className: DIALOG_LABEL_CLASS,
-			children: t22
-		});
-		$[49] = t22;
+	if ($[49] !== t) {
+		t23 = t("dialogs.watermark.type");
+		$[49] = t;
 		$[50] = t23;
 	} else t23 = $[50];
-	const t24 = fieldIds.mode;
-	let t25;
-	if ($[51] === Symbol.for("react.memo_cache_sentinel")) {
-		t25 = (e) => setMode(toWatermarkMode(e.target.value));
-		$[51] = t25;
-	} else t25 = $[51];
+	let t24;
+	if ($[51] !== t23) {
+		t24 = /* @__PURE__ */ jsx("span", {
+			className: DIALOG_LABEL_CLASS,
+			children: t23
+		});
+		$[51] = t23;
+		$[52] = t24;
+	} else t24 = $[52];
+	const t25 = fieldIds.mode;
 	let t26;
-	if ($[52] !== t) {
-		t26 = t("dialogs.watermark.textWatermark");
-		$[52] = t;
+	if ($[53] === Symbol.for("react.memo_cache_sentinel")) {
+		t26 = (e) => setMode(toWatermarkMode(e.target.value));
 		$[53] = t26;
 	} else t26 = $[53];
 	let t27;
-	if ($[54] !== t26) {
-		t27 = /* @__PURE__ */ jsx("option", {
-			value: "text",
-			children: t26
-		});
-		$[54] = t26;
+	if ($[54] !== t) {
+		t27 = t("dialogs.watermark.textWatermark");
+		$[54] = t;
 		$[55] = t27;
 	} else t27 = $[55];
 	let t28;
-	if ($[56] !== t) {
-		t28 = t("dialogs.watermark.pictureWatermark");
-		$[56] = t;
+	if ($[56] !== t27) {
+		t28 = /* @__PURE__ */ jsx("option", {
+			value: "text",
+			children: t27
+		});
+		$[56] = t27;
 		$[57] = t28;
 	} else t28 = $[57];
 	let t29;
-	if ($[58] !== t28) {
-		t29 = /* @__PURE__ */ jsx("option", {
-			value: "picture",
-			children: t28
-		});
-		$[58] = t28;
+	if ($[58] !== t) {
+		t29 = t("dialogs.watermark.pictureWatermark");
+		$[58] = t;
 		$[59] = t29;
 	} else t29 = $[59];
 	let t30;
-	if ($[60] !== t) {
-		t30 = t("dialogs.watermark.noWatermark");
-		$[60] = t;
+	if ($[60] !== t29) {
+		t30 = /* @__PURE__ */ jsx("option", {
+			value: "picture",
+			children: t29
+		});
+		$[60] = t29;
 		$[61] = t30;
 	} else t30 = $[61];
 	let t31;
-	if ($[62] !== t30) {
-		t31 = /* @__PURE__ */ jsx("option", {
-			value: "none",
-			children: t30
-		});
-		$[62] = t30;
+	if ($[62] !== t) {
+		t31 = t("dialogs.watermark.noWatermark");
+		$[62] = t;
 		$[63] = t31;
 	} else t31 = $[63];
 	let t32;
-	if ($[64] !== fieldIds.mode || $[65] !== mode || $[66] !== t27 || $[67] !== t29 || $[68] !== t31) {
-		t32 = /* @__PURE__ */ jsxs("select", {
+	if ($[64] !== t31) {
+		t32 = /* @__PURE__ */ jsx("option", {
+			value: "none",
+			children: t31
+		});
+		$[64] = t31;
+		$[65] = t32;
+	} else t32 = $[65];
+	let t33;
+	if ($[66] !== fieldIds.mode || $[67] !== mode || $[68] !== t28 || $[69] !== t30 || $[70] !== t32) {
+		t33 = /* @__PURE__ */ jsxs("select", {
 			className: DIALOG_INPUT_CLASS,
-			id: t24,
-			onChange: t25,
+			id: t25,
+			onChange: t26,
 			value: mode,
 			children: [
-				t27,
-				t29,
-				t31
+				t28,
+				t30,
+				t32
 			]
 		});
-		$[64] = fieldIds.mode;
-		$[65] = mode;
-		$[66] = t27;
-		$[67] = t29;
-		$[68] = t31;
-		$[69] = t32;
-	} else t32 = $[69];
-	let t33;
-	if ($[70] !== fieldIds.mode || $[71] !== t23 || $[72] !== t32) {
-		t33 = /* @__PURE__ */ jsxs("label", {
+		$[66] = fieldIds.mode;
+		$[67] = mode;
+		$[68] = t28;
+		$[69] = t30;
+		$[70] = t32;
+		$[71] = t33;
+	} else t33 = $[71];
+	let t34;
+	if ($[72] !== fieldIds.mode || $[73] !== t24 || $[74] !== t33) {
+		t34 = /* @__PURE__ */ jsxs("label", {
 			className: "flex flex-col gap-1",
-			htmlFor: t21,
-			children: [t23, t32]
+			htmlFor: t22,
+			children: [t24, t33]
 		});
-		$[70] = fieldIds.mode;
-		$[71] = t23;
-		$[72] = t32;
-		$[73] = t33;
-	} else t33 = $[73];
-	let t34;
-	if ($[74] !== color || $[75] !== diagonal || $[76] !== fieldIds.color || $[77] !== fieldIds.diagonal || $[78] !== fieldIds.font || $[79] !== fieldIds.opacity || $[80] !== fieldIds.text || $[81] !== font || $[82] !== mode || $[83] !== opacityPercent || $[84] !== t || $[85] !== text) {
-		t34 = mode === "text" && /* @__PURE__ */ jsxs("div", {
+		$[72] = fieldIds.mode;
+		$[73] = t24;
+		$[74] = t33;
+		$[75] = t34;
+	} else t34 = $[75];
+	let t35;
+	if ($[76] !== color || $[77] !== diagonal || $[78] !== fieldIds.color || $[79] !== fieldIds.diagonal || $[80] !== fieldIds.font || $[81] !== fieldIds.opacity || $[82] !== fieldIds.text || $[83] !== font || $[84] !== mode || $[85] !== opacityPercent || $[86] !== t || $[87] !== text) {
+		t35 = mode === "text" && /* @__PURE__ */ jsxs("div", {
 			className: "grid grid-cols-2 gap-3",
 			children: [
 				/* @__PURE__ */ jsxs("label", {
@@ -1120,23 +1143,23 @@ function WatermarkDialog(t0) {
 				})
 			]
 		});
-		$[74] = color;
-		$[75] = diagonal;
-		$[76] = fieldIds.color;
-		$[77] = fieldIds.diagonal;
-		$[78] = fieldIds.font;
-		$[79] = fieldIds.opacity;
-		$[80] = fieldIds.text;
-		$[81] = font;
-		$[82] = mode;
-		$[83] = opacityPercent;
-		$[84] = t;
-		$[85] = text;
-		$[86] = t34;
-	} else t34 = $[86];
-	let t35;
-	if ($[87] !== fieldIds.imageRId || $[88] !== fieldIds.imageTarget || $[89] !== fieldIds.imageTargetExternal || $[90] !== fieldIds.scale || $[91] !== fieldIds.washout || $[92] !== imageRId || $[93] !== imageTarget || $[94] !== imageTargetError || $[95] !== imageTargetExternal || $[96] !== mode || $[97] !== scalePercent || $[98] !== t || $[99] !== washout) {
-		t35 = mode === "picture" && /* @__PURE__ */ jsxs("div", {
+		$[76] = color;
+		$[77] = diagonal;
+		$[78] = fieldIds.color;
+		$[79] = fieldIds.diagonal;
+		$[80] = fieldIds.font;
+		$[81] = fieldIds.opacity;
+		$[82] = fieldIds.text;
+		$[83] = font;
+		$[84] = mode;
+		$[85] = opacityPercent;
+		$[86] = t;
+		$[87] = text;
+		$[88] = t35;
+	} else t35 = $[88];
+	let t36;
+	if ($[89] !== fieldIds.imageRId || $[90] !== fieldIds.imageTarget || $[91] !== fieldIds.imageTargetExternal || $[92] !== fieldIds.scale || $[93] !== fieldIds.washout || $[94] !== imageRId || $[95] !== imageTarget || $[96] !== imageTargetError || $[97] !== imageTargetExternal || $[98] !== mode || $[99] !== scalePercent || $[100] !== t || $[101] !== washout) {
+		t36 = mode === "picture" && /* @__PURE__ */ jsxs("div", {
 			className: "grid grid-cols-2 gap-3",
 			children: [
 				/* @__PURE__ */ jsxs("label", {
@@ -1219,121 +1242,121 @@ function WatermarkDialog(t0) {
 				})
 			]
 		});
-		$[87] = fieldIds.imageRId;
-		$[88] = fieldIds.imageTarget;
-		$[89] = fieldIds.imageTargetExternal;
-		$[90] = fieldIds.scale;
-		$[91] = fieldIds.washout;
-		$[92] = imageRId;
-		$[93] = imageTarget;
-		$[94] = imageTargetError;
-		$[95] = imageTargetExternal;
-		$[96] = mode;
-		$[97] = scalePercent;
-		$[98] = t;
-		$[99] = washout;
-		$[100] = t35;
-	} else t35 = $[100];
-	let t36;
-	if ($[101] !== t33 || $[102] !== t34 || $[103] !== t35) {
-		t36 = /* @__PURE__ */ jsxs("div", {
+		$[89] = fieldIds.imageRId;
+		$[90] = fieldIds.imageTarget;
+		$[91] = fieldIds.imageTargetExternal;
+		$[92] = fieldIds.scale;
+		$[93] = fieldIds.washout;
+		$[94] = imageRId;
+		$[95] = imageTarget;
+		$[96] = imageTargetError;
+		$[97] = imageTargetExternal;
+		$[98] = mode;
+		$[99] = scalePercent;
+		$[100] = t;
+		$[101] = washout;
+		$[102] = t36;
+	} else t36 = $[102];
+	let t37;
+	if ($[103] !== t34 || $[104] !== t35 || $[105] !== t36) {
+		t37 = /* @__PURE__ */ jsxs("div", {
 			className: DIALOG_BODY_CLASS,
 			children: [
-				t33,
 				t34,
-				t35
+				t35,
+				t36
 			]
 		});
-		$[101] = t33;
-		$[102] = t34;
-		$[103] = t35;
-		$[104] = t36;
-	} else t36 = $[104];
-	let t37;
-	if ($[105] !== t) {
-		t37 = t("common.cancel");
-		$[105] = t;
+		$[103] = t34;
+		$[104] = t35;
+		$[105] = t36;
 		$[106] = t37;
 	} else t37 = $[106];
 	let t38;
-	if ($[107] !== DialogClose || $[108] !== t37) {
-		t38 = /* @__PURE__ */ jsx(DialogClose, {
+	if ($[107] !== t) {
+		t38 = t("common.cancel");
+		$[107] = t;
+		$[108] = t38;
+	} else t38 = $[108];
+	let t39;
+	if ($[109] !== DialogClose || $[110] !== t38) {
+		t39 = /* @__PURE__ */ jsx(DialogClose, {
 			className: DIALOG_SECONDARY_BUTTON_CLASS,
-			children: t37
+			children: t38
 		});
-		$[107] = DialogClose;
-		$[108] = t37;
-		$[109] = t38;
-	} else t38 = $[109];
-	const t39 = !canApply;
-	let t40;
-	if ($[110] !== t) {
-		t40 = t("common.apply");
-		$[110] = t;
-		$[111] = t40;
-	} else t40 = $[111];
+		$[109] = DialogClose;
+		$[110] = t38;
+		$[111] = t39;
+	} else t39 = $[111];
+	const t40 = !canApply;
 	let t41;
-	if ($[112] !== handleApply || $[113] !== t39 || $[114] !== t40) {
-		t41 = /* @__PURE__ */ jsx("button", {
+	if ($[112] !== t) {
+		t41 = t("common.apply");
+		$[112] = t;
+		$[113] = t41;
+	} else t41 = $[113];
+	let t42;
+	if ($[114] !== handleApply || $[115] !== t40 || $[116] !== t41) {
+		t42 = /* @__PURE__ */ jsx("button", {
 			className: DIALOG_PRIMARY_BUTTON_CLASS,
-			disabled: t39,
+			disabled: t40,
 			onClick: handleApply,
 			type: "button",
-			children: t40
+			children: t41
 		});
-		$[112] = handleApply;
-		$[113] = t39;
-		$[114] = t40;
-		$[115] = t41;
-	} else t41 = $[115];
-	let t42;
-	if ($[116] !== t38 || $[117] !== t41) {
-		t42 = /* @__PURE__ */ jsxs("div", {
+		$[114] = handleApply;
+		$[115] = t40;
+		$[116] = t41;
+		$[117] = t42;
+	} else t42 = $[117];
+	let t43;
+	if ($[118] !== t39 || $[119] !== t42) {
+		t43 = /* @__PURE__ */ jsxs("div", {
 			className: DIALOG_FOOTER_CLASS,
-			children: [t38, t41]
+			children: [t39, t42]
 		});
-		$[116] = t38;
-		$[117] = t41;
-		$[118] = t42;
-	} else t42 = $[118];
-	let t43;
-	if ($[119] !== DialogPopup || $[120] !== t20 || $[121] !== t36 || $[122] !== t42) {
-		t43 = /* @__PURE__ */ jsxs(DialogPopup, {
+		$[118] = t39;
+		$[119] = t42;
+		$[120] = t43;
+	} else t43 = $[120];
+	let t44;
+	if ($[121] !== DialogPopup || $[122] !== t21 || $[123] !== t37 || $[124] !== t43) {
+		t44 = /* @__PURE__ */ jsxs(DialogPopup, {
 			className: DIALOG_POPUP_CLASS,
 			children: [
-				t20,
-				t36,
-				t42
+				t21,
+				t37,
+				t43
 			]
 		});
-		$[119] = DialogPopup;
-		$[120] = t20;
-		$[121] = t36;
-		$[122] = t42;
-		$[123] = t43;
-	} else t43 = $[123];
-	let t44;
-	if ($[124] !== DialogPortal || $[125] !== t18 || $[126] !== t43) {
-		t44 = /* @__PURE__ */ jsxs(DialogPortal, { children: [t18, t43] });
-		$[124] = DialogPortal;
-		$[125] = t18;
-		$[126] = t43;
-		$[127] = t44;
-	} else t44 = $[127];
+		$[121] = DialogPopup;
+		$[122] = t21;
+		$[123] = t37;
+		$[124] = t43;
+		$[125] = t44;
+	} else t44 = $[125];
 	let t45;
-	if ($[128] !== Dialog || $[129] !== handleOpenChange || $[130] !== isOpen || $[131] !== t44) {
-		t45 = /* @__PURE__ */ jsx(Dialog, {
+	if ($[126] !== DialogPortal || $[127] !== t19 || $[128] !== t44) {
+		t45 = /* @__PURE__ */ jsxs(DialogPortal, { children: [t19, t44] });
+		$[126] = DialogPortal;
+		$[127] = t19;
+		$[128] = t44;
+		$[129] = t45;
+	} else t45 = $[129];
+	let t46;
+	if ($[130] !== Dialog || $[131] !== handleOpenChange || $[132] !== isOpen || $[133] !== t45) {
+		t46 = /* @__PURE__ */ jsx(Dialog, {
 			open: isOpen,
 			onOpenChange: handleOpenChange,
-			children: t44
+			children: t45
 		});
-		$[128] = Dialog;
-		$[129] = handleOpenChange;
-		$[130] = isOpen;
-		$[131] = t44;
-		$[132] = t45;
-	} else t45 = $[132];
-	return t45;
+		$[130] = Dialog;
+		$[131] = handleOpenChange;
+		$[132] = isOpen;
+		$[133] = t45;
+		$[134] = t46;
+	} else t46 = $[134];
+	return t46;
 }
 function toWatermarkMode(value) {
 	if (value === "none" || value === "picture" || value === "text") return value;