@stll/folio-react 0.7.0 → 0.8.1

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

@@ -1,12 +1,14 @@
-import { r as useFolioUI } from "./folio-ui-C-85DSuK.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/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("");
@@ -79,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,
@@ -87,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")
 								})]
 							})]
 						}),
@@ -100,7 +102,7 @@ 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,
@@ -122,7 +124,7 @@ 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,
@@ -130,7 +132,7 @@ function HyperlinkDialog({ isOpen, onClose, onSubmit, onRemove, currentData, sel
 								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
@@ -142,7 +144,7 @@ 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,
@@ -155,7 +157,7 @@ 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,
@@ -172,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")
 						})
 					]
 				})
@@ -216,6 +218,7 @@ function normalizeUrl(value) {
 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("");
@@ -254,7 +257,7 @@ function InsertImageDialog({ isOpen, onClose, onInsert, accept = "image/png,imag
 			children: [
 				/* @__PURE__ */ jsx(DialogTitle, {
 					className: DIALOG_TITLE_CLASS,
-					children: "Insert Image"
+					children: t("dialogs.insertImage.title")
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: DIALOG_BODY_CLASS,
@@ -264,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,
@@ -278,7 +281,7 @@ 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,
@@ -294,7 +297,7 @@ 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,
@@ -309,7 +312,7 @@ 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,
@@ -327,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")
 					})]
 				})
 			]
@@ -369,6 +372,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 t = useTranslations("folio");
 	const id = useId();
 	const [rows, setRows] = useState(defaultRows);
 	const [columns, setColumns] = useState(defaultColumns);
@@ -416,7 +420,7 @@ function InsertTableDialog({ isOpen, onClose, onInsert, defaultRows = 3, default
 			children: [
 				/* @__PURE__ */ jsx(DialogTitle, {
 					className: DIALOG_TITLE_CLASS,
-					children: "Insert Table"
+					children: t("dialogs.insertTable.title")
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: DIALOG_BODY_CLASS,
@@ -457,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,
@@ -472,7 +476,7 @@ 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,
@@ -494,7 +498,7 @@ function InsertTableDialog({ isOpen, onClose, onInsert, defaultRows = 3, default
 								type: "checkbox"
 							}), /* @__PURE__ */ jsx("span", {
 								className: DIALOG_LABEL_CLASS,
-								children: "Autofit to contents"
+								children: t("dialogs.insertTable.autofit")
 							})]
 						}),
 						styleOptions.length > 0 && /* @__PURE__ */ jsxs("label", {
@@ -502,7 +506,7 @@ 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,
@@ -510,7 +514,7 @@ function InsertTableDialog({ isOpen, onClose, onInsert, defaultRows = 3, default
 								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
@@ -523,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")
 					})]
 				})
 			]
@@ -561,6 +565,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 t = useTranslations("folio");
 	const id = useId();
 	const [mode, setMode] = useState(defaultMode);
 	useEffect(() => {
@@ -578,7 +583,7 @@ function PasteSpecialDialog({ isOpen, onClose, onPaste, defaultMode = "plainText
 			children: [
 				/* @__PURE__ */ jsx(DialogTitle, {
 					className: DIALOG_TITLE_CLASS,
-					children: "Paste Special"
+					children: t("dialogs.pasteSpecial.title")
 				}),
 				/* @__PURE__ */ jsx("div", {
 					className: DIALOG_BODY_CLASS,
@@ -586,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", {
@@ -615,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")
 					})]
 				})
 			]
@@ -634,6 +639,7 @@ 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);
@@ -673,7 +679,7 @@ function SplitCellDialog({ isOpen, onClose, onSplit, defaultRows = 1, defaultCol
 			children: [
 				/* @__PURE__ */ jsx(DialogTitle, {
 					className: DIALOG_TITLE_CLASS,
-					children: "Split Cell"
+					children: t("dialogs.splitCell.title")
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: DIALOG_BODY_CLASS,
@@ -684,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,
@@ -699,7 +705,7 @@ 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,
@@ -720,7 +726,7 @@ function SplitCellDialog({ isOpen, onClose, onSplit, defaultRows = 1, defaultCol
 							type: "checkbox"
 						}), /* @__PURE__ */ jsx("span", {
 							className: DIALOG_LABEL_CLASS,
-							children: "Merge selected cells before splitting"
+							children: t("dialogs.splitCell.mergeBeforeSplit")
 						})]
 					})]
 				}),
@@ -728,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")
 					})]
 				})
 			]
@@ -748,10 +754,11 @@ function clampInteger(value) {
 //#region src/components/dialogs/WatermarkDialog.tsx
 const DEFAULT_TEXT_COLOR = "#C0C0C0";
 function WatermarkDialog(t0) {
-	const $ = c(100);
+	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");
@@ -912,82 +919,123 @@ function WatermarkDialog(t0) {
 		$[36] = t17;
 	} else t17 = $[36];
 	let t18;
-	if ($[37] !== DialogTitle) {
-		t18 = /* @__PURE__ */ jsx(DialogTitle, {
-			className: DIALOG_TITLE_CLASS,
-			children: "Watermark"
-		});
-		$[37] = DialogTitle;
+	if ($[37] !== t) {
+		t18 = t("dialogs.watermark.title");
+		$[37] = t;
 		$[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"
+	if ($[39] !== DialogTitle || $[40] !== t18) {
+		t19 = /* @__PURE__ */ jsx(DialogTitle, {
+			className: DIALOG_TITLE_CLASS,
+			children: t18
 		});
-		$[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];
+		$[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;
-	let t23;
-	if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
-		t21 = /* @__PURE__ */ jsx("option", {
+	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: "Text watermark"
+			children: t25
 		});
-		t22 = /* @__PURE__ */ jsx("option", {
+		$[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: "Picture watermark"
+			children: t27
 		});
-		t23 = /* @__PURE__ */ jsx("option", {
+		$[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: "No watermark"
+			children: t29
 		});
-		$[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", {
+		$[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: fieldIds.mode,
-			onChange: t20,
+			id: t23,
+			onChange: t24,
 			value: mode,
 			children: [
-				t21,
-				t22,
-				t23
+				t26,
+				t28,
+				t30
 			]
 		});
-		$[44] = fieldIds.mode;
-		$[45] = mode;
-		$[46] = t24;
-	} else t24 = $[46];
-	let t25;
-	if ($[47] !== fieldIds.mode || $[48] !== t24) {
-		t25 = /* @__PURE__ */ jsxs("label", {
+		$[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: fieldIds.mode,
-			children: [t19, t24]
+			htmlFor: t20,
+			children: [t22, t31]
 		});
-		$[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", {
+		$[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", {
@@ -995,7 +1043,7 @@ function WatermarkDialog(t0) {
 					htmlFor: fieldIds.text,
 					children: [/* @__PURE__ */ jsx("span", {
 						className: "text-muted-foreground text-[13px]",
-						children: "Text"
+						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,
@@ -1008,7 +1056,7 @@ function WatermarkDialog(t0) {
 					htmlFor: fieldIds.font,
 					children: [/* @__PURE__ */ jsx("span", {
 						className: "text-muted-foreground text-[13px]",
-						children: "Font"
+						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,
@@ -1021,7 +1069,7 @@ function WatermarkDialog(t0) {
 					htmlFor: fieldIds.color,
 					children: [/* @__PURE__ */ jsx("span", {
 						className: "text-muted-foreground text-[13px]",
-						children: "Color"
+						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,
@@ -1035,7 +1083,7 @@ function WatermarkDialog(t0) {
 					htmlFor: fieldIds.opacity,
 					children: [/* @__PURE__ */ jsx("span", {
 						className: "text-muted-foreground text-[13px]",
-						children: "Opacity"
+						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,
@@ -1056,27 +1104,28 @@ function WatermarkDialog(t0) {
 						type: "checkbox"
 					}), /* @__PURE__ */ jsx("span", {
 						className: "text-muted-foreground text-[13px]",
-						children: "Diagonal"
+						children: t("dialogs.watermark.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", {
+		$[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", {
@@ -1084,7 +1133,7 @@ function WatermarkDialog(t0) {
 					htmlFor: fieldIds.imageRId,
 					children: [/* @__PURE__ */ jsx("span", {
 						className: "text-muted-foreground text-[13px]",
-						children: "Header image relationship id"
+						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,
@@ -1098,7 +1147,7 @@ function WatermarkDialog(t0) {
 					htmlFor: fieldIds.imageTarget,
 					children: [/* @__PURE__ */ jsx("span", {
 						className: "text-muted-foreground text-[13px]",
-						children: "Image target"
+						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,
@@ -1112,7 +1161,7 @@ function WatermarkDialog(t0) {
 					htmlFor: fieldIds.scale,
 					children: [/* @__PURE__ */ jsx("span", {
 						className: "text-muted-foreground text-[13px]",
-						children: "Scale"
+						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,
@@ -1133,7 +1182,7 @@ function WatermarkDialog(t0) {
 						type: "checkbox"
 					}), /* @__PURE__ */ jsx("span", {
 						className: "text-muted-foreground text-[13px]",
-						children: "Washout"
+						children: t("dialogs.watermark.washout")
 					})]
 				}),
 				/* @__PURE__ */ jsxs("label", {
@@ -1146,110 +1195,125 @@ function WatermarkDialog(t0) {
 						type: "checkbox"
 					}), /* @__PURE__ */ jsx("span", {
 						className: "text-muted-foreground text-[13px]",
-						children: "Target is an external URL"
+						children: t("dialogs.watermark.targetIsExternalUrl")
 					})]
 				})
 			]
 		});
-		$[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", {
+		$[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: [
-				t25,
-				t26,
-				t27
+				t32,
+				t33,
+				t34
 			]
 		});
-		$[74] = t25;
-		$[75] = t26;
-		$[76] = t27;
-		$[77] = t28;
-	} else t28 = $[77];
-	let t29;
-	if ($[78] !== DialogClose) {
-		t29 = /* @__PURE__ */ jsx(DialogClose, {
+		$[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: "Cancel"
+			children: t36
 		});
-		$[78] = DialogClose;
-		$[79] = t29;
-	} else t29 = $[79];
-	const t30 = !canApply;
-	let t31;
-	if ($[80] !== handleApply || $[81] !== t30) {
-		t31 = /* @__PURE__ */ jsx("button", {
+		$[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: t30,
+			disabled: t38,
 			onClick: handleApply,
 			type: "button",
-			children: "Apply"
+			children: t39
 		});
-		$[80] = handleApply;
-		$[81] = t30;
-		$[82] = t31;
-	} else t31 = $[82];
-	let t32;
-	if ($[83] !== t29 || $[84] !== t31) {
-		t32 = /* @__PURE__ */ jsxs("div", {
+		$[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: [t29, t31]
+			children: [t37, t40]
 		});
-		$[83] = t29;
-		$[84] = t31;
-		$[85] = t32;
-	} else t32 = $[85];
-	let t33;
-	if ($[86] !== DialogPopup || $[87] !== t18 || $[88] !== t28 || $[89] !== t32) {
-		t33 = /* @__PURE__ */ jsxs(DialogPopup, {
+		$[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: [
-				t18,
-				t28,
-				t32
+				t19,
+				t35,
+				t41
 			]
 		});
-		$[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, {
+		$[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: t34
+			children: t43
 		});
-		$[95] = Dialog;
-		$[96] = handleOpenChange;
-		$[97] = isOpen;
-		$[98] = t34;
-		$[99] = t35;
-	} else t35 = $[99];
-	return t35;
+		$[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;