@stll/folio-react 0.6.0 → 0.8.0

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

@@ -1,20 +1,14 @@
-import { o as useFolioUI } from "./useFindReplace-BPBpMWS9.js";
+import { r as useFolioUI } from "./folio-ui-BgDDRsUX.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 { useTranslations } from "use-intl";
 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 t = useTranslations("folio");
 	const id = useId();
 	const [targetType, setTargetType] = useState("url");
 	const [url, setUrl] = useState("");
@@ -57,10 +51,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 +65,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: [
@@ -89,7 +81,7 @@ function HyperlinkDialog({ isOpen, onClose, onSubmit, onRemove, currentData, sel
 							htmlFor: fieldIds.targetType,
 							children: [/* @__PURE__ */ jsx("span", {
 								className: "text-muted-foreground text-[13px]",
-								children: "Link to"
+								children: t("dialogs.hyperlink.linkTo")
 							}), /* @__PURE__ */ jsxs("select", {
 								className: "border-input bg-background text-foreground rounded border px-2 py-1.5 text-[13px] outline-none",
 								id: fieldIds.targetType,
@@ -97,10 +89,10 @@ function HyperlinkDialog({ isOpen, onClose, onSubmit, onRemove, currentData, sel
 								value: targetType,
 								children: [/* @__PURE__ */ jsx("option", {
 									value: "url",
-									children: "Web address"
+									children: t("dialogs.hyperlink.tabWebAddress")
 								}), /* @__PURE__ */ jsx("option", {
 									value: "bookmark",
-									children: "Bookmark"
+									children: t("dialogs.hyperlink.tabBookmark")
 								})]
 							})]
 						}),
@@ -110,14 +102,14 @@ function HyperlinkDialog({ isOpen, onClose, onSubmit, onRemove, currentData, sel
 							children: [
 								/* @__PURE__ */ jsx("span", {
 									className: "text-muted-foreground text-[13px]",
-									children: "Address"
+									children: t("dialogs.hyperlink.addressLabel")
 								}),
 								/* @__PURE__ */ jsx("input", {
 									"aria-invalid": touched && urlError.length > 0,
 									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
 								}),
@@ -132,15 +124,15 @@ function HyperlinkDialog({ isOpen, onClose, onSubmit, onRemove, currentData, sel
 							htmlFor: fieldIds.bookmark,
 							children: [/* @__PURE__ */ jsx("span", {
 								className: "text-muted-foreground text-[13px]",
-								children: "Bookmark"
+								children: t("dialogs.hyperlink.bookmarkLabel")
 							}), /* @__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: "",
-									children: "Select a bookmark"
+									children: t("dialogs.hyperlink.bookmarkPlaceholder")
 								}), bookmarks.map((option) => /* @__PURE__ */ jsx("option", {
 									value: option.name,
 									children: option.label ?? option.name
@@ -152,11 +144,11 @@ function HyperlinkDialog({ isOpen, onClose, onSubmit, onRemove, currentData, sel
 							htmlFor: fieldIds.displayText,
 							children: [/* @__PURE__ */ jsx("span", {
 								className: DIALOG_LABEL_CLASS,
-								children: "Text to display"
+								children: t("dialogs.hyperlink.displayTextPlaceholder")
 							}), /* @__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
 							})]
 						}),
@@ -165,11 +157,11 @@ function HyperlinkDialog({ isOpen, onClose, onSubmit, onRemove, currentData, sel
 							htmlFor: fieldIds.tooltip,
 							children: [/* @__PURE__ */ jsx("span", {
 								className: DIALOG_LABEL_CLASS,
-								children: "Screen tip"
+								children: t("dialogs.hyperlink.screenTipLabel")
 							}), /* @__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
 							})]
 						})
@@ -182,18 +174,18 @@ function HyperlinkDialog({ isOpen, onClose, onSubmit, onRemove, currentData, sel
 							className: "text-destructive me-auto rounded px-4 py-1.5 text-[13px]",
 							onClick: handleRemove,
 							type: "button",
-							children: "Remove"
+							children: t("common.remove")
 						}),
 						/* @__PURE__ */ jsx(DialogClose, {
 							className: DIALOG_SECONDARY_BUTTON_CLASS,
-							children: "Cancel"
+							children: t("common.cancel")
 						}),
 						/* @__PURE__ */ jsx("button", {
 							className: DIALOG_PRIMARY_BUTTON_CLASS,
 							disabled: !canSubmit,
 							onClick: handleSubmit,
 							type: "button",
-							children: isEditing ? "Update" : "Insert"
+							children: isEditing ? t("common.update") : t("common.insert")
 						})
 					]
 				})
@@ -225,6 +217,8 @@ 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 t = useTranslations("folio");
 	const id = useId();
 	const [file, setFile] = useState(null);
 	const [alt, setAlt] = useState("");
@@ -257,15 +251,13 @@ 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: [
 				/* @__PURE__ */ jsx(DialogTitle, {
 					className: DIALOG_TITLE_CLASS,
-					children: "Insert Image"
+					children: t("dialogs.insertImage.title")
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: DIALOG_BODY_CLASS,
@@ -275,7 +267,7 @@ function InsertImageDialog({ isOpen, onClose, onInsert, accept = "image/png,imag
 							htmlFor: fieldIds.file,
 							children: [/* @__PURE__ */ jsx("span", {
 								className: DIALOG_LABEL_CLASS,
-								children: "Image file"
+								children: t("dialogs.insertImage.imageFile")
 							}), /* @__PURE__ */ jsx("input", {
 								accept,
 								className: DIALOG_INPUT_CLASS,
@@ -289,11 +281,11 @@ function InsertImageDialog({ isOpen, onClose, onInsert, accept = "image/png,imag
 							htmlFor: fieldIds.alt,
 							children: [/* @__PURE__ */ jsx("span", {
 								className: DIALOG_LABEL_CLASS,
-								children: "Alt text"
+								children: t("dialogs.insertImage.altText")
 							}), /* @__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
 							})]
@@ -305,12 +297,12 @@ function InsertImageDialog({ isOpen, onClose, onInsert, accept = "image/png,imag
 								htmlFor: fieldIds.width,
 								children: [/* @__PURE__ */ jsx("span", {
 									className: DIALOG_LABEL_CLASS,
-									children: "Width"
+									children: t("dialogs.imageProperties.widthLabel")
 								}), /* @__PURE__ */ jsx("input", {
 									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
@@ -320,12 +312,12 @@ function InsertImageDialog({ isOpen, onClose, onInsert, accept = "image/png,imag
 								htmlFor: fieldIds.height,
 								children: [/* @__PURE__ */ jsx("span", {
 									className: DIALOG_LABEL_CLASS,
-									children: "Height"
+									children: t("dialogs.imageProperties.heightLabel")
 								}), /* @__PURE__ */ jsx("input", {
 									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
@@ -338,13 +330,13 @@ function InsertImageDialog({ isOpen, onClose, onInsert, accept = "image/png,imag
 					className: DIALOG_FOOTER_CLASS,
 					children: [/* @__PURE__ */ jsx(DialogClose, {
 						className: DIALOG_SECONDARY_BUTTON_CLASS,
-						children: "Cancel"
+						children: t("common.cancel")
 					}), /* @__PURE__ */ jsx("button", {
 						className: DIALOG_PRIMARY_BUTTON_CLASS,
 						disabled: !file,
 						onClick: handleInsert,
 						type: "button",
-						children: "Insert"
+						children: t("common.insert")
 					})]
 				})
 			]
@@ -379,6 +371,8 @@ 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 t = useTranslations("folio");
 	const id = useId();
 	const [rows, setRows] = useState(defaultRows);
 	const [columns, setColumns] = useState(defaultColumns);
@@ -420,15 +414,13 @@ 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: [
 				/* @__PURE__ */ jsx(DialogTitle, {
 					className: DIALOG_TITLE_CLASS,
-					children: "Insert Table"
+					children: t("dialogs.insertTable.title")
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: DIALOG_BODY_CLASS,
@@ -469,7 +461,7 @@ function InsertTableDialog({ isOpen, onClose, onInsert, defaultRows = 3, default
 								htmlFor: fieldIds.rows,
 								children: [/* @__PURE__ */ jsx("span", {
 									className: DIALOG_LABEL_CLASS,
-									children: "Rows"
+									children: t("dialogs.insertTable.rowsLabel")
 								}), /* @__PURE__ */ jsx("input", {
 									className: DIALOG_INPUT_CLASS,
 									id: fieldIds.rows,
@@ -484,13 +476,13 @@ function InsertTableDialog({ isOpen, onClose, onInsert, defaultRows = 3, default
 								htmlFor: fieldIds.columns,
 								children: [/* @__PURE__ */ jsx("span", {
 									className: DIALOG_LABEL_CLASS,
-									children: "Columns"
+									children: t("dialogs.insertTable.columnsLabel")
 								}), /* @__PURE__ */ jsx("input", {
 									className: DIALOG_INPUT_CLASS,
 									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,11 +494,11 @@ 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,
-								children: "Autofit to contents"
+								children: t("dialogs.insertTable.autofit")
 							})]
 						}),
 						styleOptions.length > 0 && /* @__PURE__ */ jsxs("label", {
@@ -514,15 +506,15 @@ function InsertTableDialog({ isOpen, onClose, onInsert, defaultRows = 3, default
 							htmlFor: fieldIds.style,
 							children: [/* @__PURE__ */ jsx("span", {
 								className: "text-muted-foreground text-[13px]",
-								children: "Style"
+								children: t("dialogs.insertTable.style")
 							}), /* @__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: "",
-									children: "Plain table"
+									children: t("dialogs.insertTable.plainTable")
 								}), styleOptions.map((style) => /* @__PURE__ */ jsx("option", {
 									value: style.id,
 									children: style.name
@@ -535,13 +527,13 @@ function InsertTableDialog({ isOpen, onClose, onInsert, defaultRows = 3, default
 					className: DIALOG_FOOTER_CLASS,
 					children: [/* @__PURE__ */ jsx(DialogClose, {
 						className: DIALOG_SECONDARY_BUTTON_CLASS,
-						children: "Cancel"
+						children: t("common.cancel")
 					}), /* @__PURE__ */ jsx("button", {
 						className: DIALOG_PRIMARY_BUTTON_CLASS,
 						disabled: !canInsert,
 						onClick: handleInsert,
 						type: "button",
-						children: "Insert"
+						children: t("common.insert")
 					})]
 				})
 			]
@@ -572,6 +564,8 @@ 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 t = useTranslations("folio");
 	const id = useId();
 	const [mode, setMode] = useState(defaultMode);
 	useEffect(() => {
@@ -583,15 +577,13 @@ 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: [
 				/* @__PURE__ */ jsx(DialogTitle, {
 					className: DIALOG_TITLE_CLASS,
-					children: "Paste Special"
+					children: t("dialogs.pasteSpecial.title")
 				}),
 				/* @__PURE__ */ jsx("div", {
 					className: DIALOG_BODY_CLASS,
@@ -599,7 +591,7 @@ function PasteSpecialDialog({ isOpen, onClose, onPaste, defaultMode = "plainText
 						className: "flex flex-col gap-3",
 						children: [/* @__PURE__ */ jsx("legend", {
 							className: DIALOG_LABEL_CLASS,
-							children: "Paste mode"
+							children: t("dialogs.pasteSpecial.pasteMode")
 						}), PASTE_MODES.map((option) => {
 							const optionId = `${id}-paste-special-${option.value}`;
 							return /* @__PURE__ */ jsxs("label", {
@@ -628,12 +620,12 @@ function PasteSpecialDialog({ isOpen, onClose, onPaste, defaultMode = "plainText
 					className: DIALOG_FOOTER_CLASS,
 					children: [/* @__PURE__ */ jsx(DialogClose, {
 						className: DIALOG_SECONDARY_BUTTON_CLASS,
-						children: "Cancel"
+						children: t("common.cancel")
 					}), /* @__PURE__ */ jsx("button", {
 						className: DIALOG_PRIMARY_BUTTON_CLASS,
 						onClick: handlePaste,
 						type: "button",
-						children: "Paste"
+						children: t("paste")
 					})]
 				})
 			]
@@ -646,6 +638,8 @@ 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 t = useTranslations("folio");
 	const id = useId();
 	const [rows, setRows] = useState(defaultRows);
 	const [columns, setColumns] = useState(defaultColumns);
@@ -679,15 +673,13 @@ 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: [
 				/* @__PURE__ */ jsx(DialogTitle, {
 					className: DIALOG_TITLE_CLASS,
-					children: "Split Cell"
+					children: t("dialogs.splitCell.title")
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: DIALOG_BODY_CLASS,
@@ -698,7 +690,7 @@ function SplitCellDialog({ isOpen, onClose, onSplit, defaultRows = 1, defaultCol
 							htmlFor: fieldIds.columns,
 							children: [/* @__PURE__ */ jsx("span", {
 								className: DIALOG_LABEL_CLASS,
-								children: "Columns"
+								children: t("dialogs.insertTable.columnsLabel")
 							}), /* @__PURE__ */ jsx("input", {
 								className: DIALOG_INPUT_CLASS,
 								id: fieldIds.columns,
@@ -713,13 +705,13 @@ function SplitCellDialog({ isOpen, onClose, onSplit, defaultRows = 1, defaultCol
 							htmlFor: fieldIds.rows,
 							children: [/* @__PURE__ */ jsx("span", {
 								className: DIALOG_LABEL_CLASS,
-								children: "Rows"
+								children: t("dialogs.insertTable.rowsLabel")
 							}), /* @__PURE__ */ jsx("input", {
 								className: DIALOG_INPUT_CLASS,
 								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,11 +722,11 @@ 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,
-							children: "Merge selected cells before splitting"
+							children: t("dialogs.splitCell.mergeBeforeSplit")
 						})]
 					})]
 				}),
@@ -742,13 +734,13 @@ function SplitCellDialog({ isOpen, onClose, onSplit, defaultRows = 1, defaultCol
 					className: DIALOG_FOOTER_CLASS,
 					children: [/* @__PURE__ */ jsx(DialogClose, {
 						className: DIALOG_SECONDARY_BUTTON_CLASS,
-						children: "Cancel"
+						children: t("common.cancel")
 					}), /* @__PURE__ */ jsx("button", {
 						className: DIALOG_PRIMARY_BUTTON_CLASS,
 						disabled: !canSplit,
 						onClick: handleSplit,
 						type: "button",
-						children: "Split"
+						children: t("dialogs.splitCell.splitButton")
 					})]
 				})
 			]
@@ -761,8 +753,12 @@ 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(127);
+	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");
@@ -775,289 +771,549 @@ 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] !== t) {
+		t18 = t("dialogs.watermark.title");
+		$[37] = t;
+		$[38] = t18;
+	} else t18 = $[38];
+	let t19;
+	if ($[39] !== DialogTitle || $[40] !== t18) {
+		t19 = /* @__PURE__ */ jsx(DialogTitle, {
+			className: DIALOG_TITLE_CLASS,
+			children: t18
 		});
-		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,
+		$[39] = DialogTitle;
+		$[40] = t18;
+		$[41] = t19;
+	} else t19 = $[41];
+	const t20 = fieldIds.mode;
+	let t21;
+	if ($[42] !== t) {
+		t21 = t("dialogs.watermark.type");
+		$[42] = t;
+		$[43] = t21;
+	} else t21 = $[43];
+	let t22;
+	if ($[44] !== t21) {
+		t22 = /* @__PURE__ */ jsx("span", {
+			className: DIALOG_LABEL_CLASS,
+			children: t21
+		});
+		$[44] = t21;
+		$[45] = t22;
+	} else t22 = $[45];
+	const t23 = fieldIds.mode;
+	let t24;
+	if ($[46] === Symbol.for("react.memo_cache_sentinel")) {
+		t24 = (e) => setMode(toWatermarkMode(e.target.value));
+		$[46] = t24;
+	} else t24 = $[46];
+	let t25;
+	if ($[47] !== t) {
+		t25 = t("dialogs.watermark.textWatermark");
+		$[47] = t;
+		$[48] = t25;
+	} else t25 = $[48];
+	let t26;
+	if ($[49] !== t25) {
+		t26 = /* @__PURE__ */ jsx("option", {
+			value: "text",
+			children: t25
+		});
+		$[49] = t25;
+		$[50] = t26;
+	} else t26 = $[50];
+	let t27;
+	if ($[51] !== t) {
+		t27 = t("dialogs.watermark.pictureWatermark");
+		$[51] = t;
+		$[52] = t27;
+	} else t27 = $[52];
+	let t28;
+	if ($[53] !== t27) {
+		t28 = /* @__PURE__ */ jsx("option", {
+			value: "picture",
+			children: t27
+		});
+		$[53] = t27;
+		$[54] = t28;
+	} else t28 = $[54];
+	let t29;
+	if ($[55] !== t) {
+		t29 = t("dialogs.watermark.noWatermark");
+		$[55] = t;
+		$[56] = t29;
+	} else t29 = $[56];
+	let t30;
+	if ($[57] !== t29) {
+		t30 = /* @__PURE__ */ jsx("option", {
+			value: "none",
+			children: t29
+		});
+		$[57] = t29;
+		$[58] = t30;
+	} else t30 = $[58];
+	let t31;
+	if ($[59] !== fieldIds.mode || $[60] !== mode || $[61] !== t26 || $[62] !== t28 || $[63] !== t30) {
+		t31 = /* @__PURE__ */ jsxs("select", {
+			className: DIALOG_INPUT_CLASS,
+			id: t23,
+			onChange: t24,
+			value: mode,
 			children: [
-				/* @__PURE__ */ jsx(DialogTitle, {
-					className: DIALOG_TITLE_CLASS,
-					children: "Watermark"
+				t26,
+				t28,
+				t30
+			]
+		});
+		$[59] = fieldIds.mode;
+		$[60] = mode;
+		$[61] = t26;
+		$[62] = t28;
+		$[63] = t30;
+		$[64] = t31;
+	} else t31 = $[64];
+	let t32;
+	if ($[65] !== fieldIds.mode || $[66] !== t22 || $[67] !== t31) {
+		t32 = /* @__PURE__ */ jsxs("label", {
+			className: "flex flex-col gap-1",
+			htmlFor: t20,
+			children: [t22, t31]
+		});
+		$[65] = fieldIds.mode;
+		$[66] = t22;
+		$[67] = t31;
+		$[68] = t32;
+	} else t32 = $[68];
+	let t33;
+	if ($[69] !== color || $[70] !== diagonal || $[71] !== fieldIds.color || $[72] !== fieldIds.diagonal || $[73] !== fieldIds.font || $[74] !== fieldIds.opacity || $[75] !== fieldIds.text || $[76] !== font || $[77] !== mode || $[78] !== opacityPercent || $[79] !== t || $[80] !== text) {
+		t33 = 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: t("dialogs.watermark.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: t("dialogs.watermark.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: t("dialogs.watermark.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: t("dialogs.watermark.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: t("dialogs.watermark.diagonal")
 					})]
 				})
 			]
-		})] })
-	});
+		});
+		$[69] = color;
+		$[70] = diagonal;
+		$[71] = fieldIds.color;
+		$[72] = fieldIds.diagonal;
+		$[73] = fieldIds.font;
+		$[74] = fieldIds.opacity;
+		$[75] = fieldIds.text;
+		$[76] = font;
+		$[77] = mode;
+		$[78] = opacityPercent;
+		$[79] = t;
+		$[80] = text;
+		$[81] = t33;
+	} else t33 = $[81];
+	let t34;
+	if ($[82] !== fieldIds.imageRId || $[83] !== fieldIds.imageTarget || $[84] !== fieldIds.imageTargetExternal || $[85] !== fieldIds.scale || $[86] !== fieldIds.washout || $[87] !== imageRId || $[88] !== imageTarget || $[89] !== imageTargetExternal || $[90] !== mode || $[91] !== scalePercent || $[92] !== t || $[93] !== washout) {
+		t34 = 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: t("dialogs.watermark.imageRelationshipId")
+					}), /* @__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: t("dialogs.watermark.imageTarget")
+					}), /* @__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: t("dialogs.watermark.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: t("dialogs.watermark.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: t("dialogs.watermark.targetIsExternalUrl")
+					})]
+				})
+			]
+		});
+		$[82] = fieldIds.imageRId;
+		$[83] = fieldIds.imageTarget;
+		$[84] = fieldIds.imageTargetExternal;
+		$[85] = fieldIds.scale;
+		$[86] = fieldIds.washout;
+		$[87] = imageRId;
+		$[88] = imageTarget;
+		$[89] = imageTargetExternal;
+		$[90] = mode;
+		$[91] = scalePercent;
+		$[92] = t;
+		$[93] = washout;
+		$[94] = t34;
+	} else t34 = $[94];
+	let t35;
+	if ($[95] !== t32 || $[96] !== t33 || $[97] !== t34) {
+		t35 = /* @__PURE__ */ jsxs("div", {
+			className: DIALOG_BODY_CLASS,
+			children: [
+				t32,
+				t33,
+				t34
+			]
+		});
+		$[95] = t32;
+		$[96] = t33;
+		$[97] = t34;
+		$[98] = t35;
+	} else t35 = $[98];
+	let t36;
+	if ($[99] !== t) {
+		t36 = t("common.cancel");
+		$[99] = t;
+		$[100] = t36;
+	} else t36 = $[100];
+	let t37;
+	if ($[101] !== DialogClose || $[102] !== t36) {
+		t37 = /* @__PURE__ */ jsx(DialogClose, {
+			className: DIALOG_SECONDARY_BUTTON_CLASS,
+			children: t36
+		});
+		$[101] = DialogClose;
+		$[102] = t36;
+		$[103] = t37;
+	} else t37 = $[103];
+	const t38 = !canApply;
+	let t39;
+	if ($[104] !== t) {
+		t39 = t("common.apply");
+		$[104] = t;
+		$[105] = t39;
+	} else t39 = $[105];
+	let t40;
+	if ($[106] !== handleApply || $[107] !== t38 || $[108] !== t39) {
+		t40 = /* @__PURE__ */ jsx("button", {
+			className: DIALOG_PRIMARY_BUTTON_CLASS,
+			disabled: t38,
+			onClick: handleApply,
+			type: "button",
+			children: t39
+		});
+		$[106] = handleApply;
+		$[107] = t38;
+		$[108] = t39;
+		$[109] = t40;
+	} else t40 = $[109];
+	let t41;
+	if ($[110] !== t37 || $[111] !== t40) {
+		t41 = /* @__PURE__ */ jsxs("div", {
+			className: DIALOG_FOOTER_CLASS,
+			children: [t37, t40]
+		});
+		$[110] = t37;
+		$[111] = t40;
+		$[112] = t41;
+	} else t41 = $[112];
+	let t42;
+	if ($[113] !== DialogPopup || $[114] !== t19 || $[115] !== t35 || $[116] !== t41) {
+		t42 = /* @__PURE__ */ jsxs(DialogPopup, {
+			className: DIALOG_POPUP_CLASS,
+			children: [
+				t19,
+				t35,
+				t41
+			]
+		});
+		$[113] = DialogPopup;
+		$[114] = t19;
+		$[115] = t35;
+		$[116] = t41;
+		$[117] = t42;
+	} else t42 = $[117];
+	let t43;
+	if ($[118] !== DialogPortal || $[119] !== t17 || $[120] !== t42) {
+		t43 = /* @__PURE__ */ jsxs(DialogPortal, { children: [t17, t42] });
+		$[118] = DialogPortal;
+		$[119] = t17;
+		$[120] = t42;
+		$[121] = t43;
+	} else t43 = $[121];
+	let t44;
+	if ($[122] !== Dialog || $[123] !== handleOpenChange || $[124] !== isOpen || $[125] !== t43) {
+		t44 = /* @__PURE__ */ jsx(Dialog, {
+			open: isOpen,
+			onOpenChange: handleOpenChange,
+			children: t43
+		});
+		$[122] = Dialog;
+		$[123] = handleOpenChange;
+		$[124] = isOpen;
+		$[125] = t43;
+		$[126] = t44;
+	} else t44 = $[126];
+	return t44;
 }
 function toWatermarkMode(value) {
 	if (value === "none" || value === "picture" || value === "text") return value;