@team-monolith/cds 1.129.2-alpha.2 → 1.129.3-alpha

package/dist/patterns/LexicalEditor/components/InsertImageDialog/ImagePreview.js

@@ -1,17 +1,17 @@
-import { useState as e } from "react";
-import t from "@emotion/styled";
-import { useTranslation as n } from "react-i18next";
+import { useTranslation as e } from "../../../../node_modules/.pnpm/react-i18next@15.7.3_i18next@25.5.2_typescript@5.5.4__react-dom@18.2.0_react@18.2.0__react@18.2.0_typescript@5.5.4/node_modules/react-i18next/dist/es/useTranslation.js";
+import { useState as t } from "react";
+import n from "@emotion/styled";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/cds/patterns/LexicalEditor/components/InsertImageDialog/ImagePreview.tsx
-function a(t) {
-	let { src: a, alt: s, fallback: c } = t, [l, u] = e(null), { t: d } = n();
+function a(n) {
+	let { src: a, alt: s, fallback: c } = n, [l, u] = t(null), { t: d } = e();
 	return /* @__PURE__ */ i(o, { children: [d("이미지 미리보기"), l === a ? c : /* @__PURE__ */ r("img", {
 		src: a,
 		alt: s,
 		onError: () => u(a)
 	})] });
 }
-var o = t.div`
+var o = n.div`
   display: flex;
   flex-direction: column;
   gap: 8px;

package/dist/patterns/LexicalEditor/components/InsertImageDialog/InsertImageDialog.js

@@ -1,32 +1,32 @@
 import { AlertDialog as e } from "../../../../components/AlertDialog/AlertDialog.js";
 import { stdin_default as t } from "../../../../node_modules/.pnpm/remixicon@4.3.0/node_modules/remixicon/icons/Editor/link.js";
 import { stdin_default as n } from "../../../../node_modules/.pnpm/remixicon@4.3.0/node_modules/remixicon/icons/Media/image-fill.js";
-import { AlertDialogTitle as r } from "../../../../components/AlertDialog/AlertDialogTitle.js";
-import { AlertDialogContent as i } from "../../../../components/AlertDialog/AlertDialogContent.js";
-import { AlertDialogActions as a } from "../../../../components/AlertDialog/AlertDialogActions.js";
-import { Button as o } from "../../../../components/Button.js";
-import { FileSelectInput as s } from "../FileSelectInput.js";
-import { FormInput as c } from "../../nodes/Form/FormInput.js";
-import { ImagePreview as l } from "./ImagePreview.js";
-import { ImageNotAvailable as u } from "../../nodes/ImageNode/ImageNotAvailable.js";
-import { css as d, useTheme as f } from "@emotion/react";
-import { useEffect as p, useMemo as m, useState as h } from "react";
-import g from "@emotion/styled";
-import { jsx as _, jsxs as v } from "@emotion/react/jsx-runtime";
-import { useTranslation as y } from "react-i18next";
+import { useTranslation as r } from "../../../../node_modules/.pnpm/react-i18next@15.7.3_i18next@25.5.2_typescript@5.5.4__react-dom@18.2.0_react@18.2.0__react@18.2.0_typescript@5.5.4/node_modules/react-i18next/dist/es/useTranslation.js";
+import { AlertDialogTitle as i } from "../../../../components/AlertDialog/AlertDialogTitle.js";
+import { AlertDialogContent as a } from "../../../../components/AlertDialog/AlertDialogContent.js";
+import { AlertDialogActions as o } from "../../../../components/AlertDialog/AlertDialogActions.js";
+import { Button as s } from "../../../../components/Button.js";
+import { FileSelectInput as c } from "../FileSelectInput.js";
+import { FormInput as l } from "../../nodes/Form/FormInput.js";
+import { ImagePreview as u } from "./ImagePreview.js";
+import { ImageNotAvailable as d } from "../../nodes/ImageNode/ImageNotAvailable.js";
+import { css as f, useTheme as p } from "@emotion/react";
+import { useEffect as m, useMemo as h, useState as g } from "react";
+import _ from "@emotion/styled";
+import { jsx as v, jsxs as y } from "@emotion/react/jsx-runtime";
 import { useForm as b } from "react-hook-form";
 import { debounce as x } from "lodash";
 //#region src/cds/patterns/LexicalEditor/components/InsertImageDialog/InsertImageDialog.tsx
 function S(e) {
-	let { title: r, open: d, onClose: g, imageProps: S, onChange: E, onDelete: D, shouldReset: O } = e, k = f(), { t: A } = y(), { control: j, setValue: M, watch: N, reset: P, handleSubmit: F, subscribe: I } = b({ defaultValues: S ?? {
+	let { title: i, open: f, onClose: _, imageProps: S, onChange: E, onDelete: D, shouldReset: O } = e, k = p(), { t: A } = r(), { control: j, setValue: M, watch: N, reset: P, handleSubmit: F, subscribe: I } = b({ defaultValues: S ?? {
 		src: "",
 		altText: ""
 	} }), L = () => {
-		O && P(), g();
+		O && P(), _();
 	}, R = (e) => {
 		E(e), L();
-	}, [z, B] = h(N("src")), V = N("src") === "", H = m(() => x((e) => B(e), 500), []);
-	return p(() => {
+	}, [z, B] = g(N("src")), V = N("src") === "", H = h(() => x((e) => B(e), 500), []);
+	return m(() => {
 		let e = I({
 			name: "src",
 			formState: { values: !0 },
@@ -35,42 +35,42 @@ function S(e) {
 			}
 		});
 		return () => e();
-	}, [H, I]), /* @__PURE__ */ v(C, {
+	}, [H, I]), /* @__PURE__ */ y(C, {
 		component: "form",
-		icon: /* @__PURE__ */ _(n, { color: k.color.background.primary }),
-		open: d,
+		icon: /* @__PURE__ */ v(n, { color: k.color.background.primary }),
+		open: f,
 		onClose: L,
 		onSubmit: (e) => {
 			e.stopPropagation(), F(R)();
 		},
 		disableIconPadding: !0,
 		children: [
-			/* @__PURE__ */ _(w, {
+			/* @__PURE__ */ v(w, {
 				onClose: L,
-				children: r
+				children: i
 			}),
-			/* @__PURE__ */ _(i, { children: /* @__PURE__ */ v(T, { children: [
-				/* @__PURE__ */ _(s, {
+			/* @__PURE__ */ v(a, { children: /* @__PURE__ */ y(T, { children: [
+				/* @__PURE__ */ v(c, {
 					onChange: (e) => {
 						M("src", e);
 					},
 					fileType: "image"
 				}),
-				/* @__PURE__ */ _(c, {
+				/* @__PURE__ */ v(l, {
 					name: "src",
 					control: j,
 					placeholder: "https://www.pexels.com/photo/n-2848492",
 					size: "medium",
 					label: "URL",
 					fullWidth: !0,
-					startIcon: /* @__PURE__ */ _(t, {})
+					startIcon: /* @__PURE__ */ v(t, {})
 				}),
-				z && /* @__PURE__ */ _(l, {
+				z && /* @__PURE__ */ v(u, {
 					src: z,
 					alt: N("altText"),
-					fallback: /* @__PURE__ */ _(u, {})
+					fallback: /* @__PURE__ */ v(d, {})
 				}),
-				/* @__PURE__ */ _(c, {
+				/* @__PURE__ */ v(l, {
 					name: "altText",
 					control: j,
 					placeholder: A("삽입하는 이미지에 관한 설명"),
@@ -79,14 +79,14 @@ function S(e) {
 					fullWidth: !0
 				})
 			] }) }),
-			/* @__PURE__ */ v(a, { children: [/* @__PURE__ */ _(o, {
+			/* @__PURE__ */ y(o, { children: [/* @__PURE__ */ v(s, {
 				type: "submit",
 				fullWidth: !0,
 				label: A("삽입하기"),
 				size: "medium",
 				color: "primary",
 				disabled: V
-			}), D && /* @__PURE__ */ _(o, {
+			}), D && /* @__PURE__ */ v(s, {
 				color: "danger",
 				size: "medium",
 				fullWidth: !0,
@@ -96,9 +96,9 @@ function S(e) {
 		]
 	});
 }
-var C = g(e)`
+var C = _(e)`
   gap: 16px;
-`, w = g(r)(({ theme: e }) => d`
+`, w = _(i)(({ theme: e }) => f`
     color: ${e.color.foreground.neutralBase};
     text-align: center;
     font-family: ${e.fontFamily.ui};
@@ -107,7 +107,7 @@ var C = g(e)`
     font-weight: 700;
     line-height: 28px;
     letter-spacing: 0.25px;
-  `), T = g.div`
+  `), T = _.div`
   display: flex;
   flex-direction: column;
   gap: 16px;

package/dist/patterns/LexicalEditor/components/UploadFileDialog/UploadFileDialog.js

@@ -1,27 +1,27 @@
-import { CdsContext as e } from "../../../../CdsProvider.js";
-import { getTexts as t } from "../../../../texts.js";
-import { useContext as n, useEffect as r, useRef as i } from "react";
-import a from "@emotion/styled";
-import { jsx as o } from "@emotion/react/jsx-runtime";
-import { useTranslation as s } from "react-i18next";
+import { useTranslation as e } from "../../../../node_modules/.pnpm/react-i18next@15.7.3_i18next@25.5.2_typescript@5.5.4__react-dom@18.2.0_react@18.2.0__react@18.2.0_typescript@5.5.4/node_modules/react-i18next/dist/es/useTranslation.js";
+import { CdsContext as t } from "../../../../CdsProvider.js";
+import { getTexts as n } from "../../../../texts.js";
+import { useContext as r, useEffect as i, useRef as a } from "react";
+import o from "@emotion/styled";
+import { jsx as s } from "@emotion/react/jsx-runtime";
 import c from "moment";
 //#region src/cds/patterns/LexicalEditor/components/UploadFileDialog/UploadFileDialog.tsx
-function l({ open: a, onClose: l, onChange: d }) {
-	let f = i(null), p = n(e), { t: m } = s();
-	return r(() => {
-		a && f.current && (f.current.value = "", f.current.click());
-	}, [a]), /* @__PURE__ */ o(u, {
+function l({ open: o, onClose: l, onChange: d }) {
+	let f = a(null), p = r(t), { t: m } = e();
+	return i(() => {
+		o && f.current && (f.current.value = "", f.current.click());
+	}, [o]), /* @__PURE__ */ s(u, {
 		ref: f,
 		type: "file",
 		accept: "*",
 		onChange: async (e) => {
-			let n = p.lexical?.showFileError, r = e.target.files?.[0];
+			let t = p.lexical?.showFileError, r = e.target.files?.[0];
 			if (!r) {
 				l();
 				return;
 			}
 			if (r.size >= 1 * 1024 * 1024 * 1024) {
-				n?.("upload", t(m, "errorFileTooLarge")), e.target.value = "", l();
+				t?.("upload", n(m, "errorFileTooLarge")), e.target.value = "", l();
 				return;
 			}
 			let i = p.lexical?.uploadByFile;
@@ -34,7 +34,7 @@ function l({ open: a, onClose: l, onChange: d }) {
 		}
 	});
 }
-var u = a.input`
+var u = o.input`
   display: none;
 `;
 //#endregion

package/dist/patterns/LexicalEditor/nodes/FileNode/FileDownloadButton.js

@@ -1,24 +1,24 @@
 import { HOVER as e } from "../../../../utils/hover.js";
-import { OverflowTooltip as t } from "../../../../components/OverflowTooltip.js";
-import { CdsContext as n } from "../../../../CdsProvider.js";
-import { FileSize as r, IconContainer as i, getFileIcon as a } from "./FileComponent.js";
-import { css as o, useTheme as s } from "@emotion/react";
-import { useContext as c } from "react";
-import l from "@emotion/styled";
-import { useTranslation as u } from "react-i18next";
+import { useTranslation as t } from "../../../../node_modules/.pnpm/react-i18next@15.7.3_i18next@25.5.2_typescript@5.5.4__react-dom@18.2.0_react@18.2.0__react@18.2.0_typescript@5.5.4/node_modules/react-i18next/dist/es/useTranslation.js";
+import { OverflowTooltip as n } from "../../../../components/OverflowTooltip.js";
+import { CdsContext as r } from "../../../../CdsProvider.js";
+import { FileSize as i, IconContainer as a, getFileIcon as o } from "./FileComponent.js";
+import { css as s, useTheme as c } from "@emotion/react";
+import { useContext as l } from "react";
+import u from "@emotion/styled";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/cds/patterns/LexicalEditor/nodes/FileNode/FileDownloadButton.tsx
-function p({ fileName: e, fileSize: o, fileUrl: l }) {
-	let p = c(n), g = s(), { t: _ } = u();
+function p({ fileName: e, fileSize: s, fileUrl: u }) {
+	let p = l(r), g = c(), { t: _ } = t();
 	return /* @__PURE__ */ f(m, {
 		onClick: async () => {
 			let t = p.lexical?.showFileError;
 			try {
-				if (!l) {
+				if (!u) {
 					t?.("download", _("다운로드 중 오류가 발생했어요"));
 					return;
 				}
-				let n = await fetch(l, { method: "GET" });
+				let n = await fetch(u, { method: "GET" });
 				if (!n.ok) {
 					t?.("download", _("파일이 삭제되어 다운로드할 수 없어요."));
 					return;
@@ -31,13 +31,13 @@ function p({ fileName: e, fileSize: o, fileUrl: l }) {
 		},
 		theme: g,
 		children: [
-			/* @__PURE__ */ d(i, { children: a(e) }),
-			/* @__PURE__ */ d(h, { children: /* @__PURE__ */ d(t, { text: e }) }),
-			/* @__PURE__ */ f(r, { children: [(o / (1024 * 1024)).toFixed(1), " MB"] })
+			/* @__PURE__ */ d(a, { children: o(e) }),
+			/* @__PURE__ */ d(h, { children: /* @__PURE__ */ d(n, { text: e }) }),
+			/* @__PURE__ */ f(i, { children: [(s / (1024 * 1024)).toFixed(1), " MB"] })
 		]
 	});
 }
-var m = l.button(({ theme: t }) => o`
+var m = u.button(({ theme: t }) => s`
     display: flex;
     align-items: center;
     gap: 8px;
@@ -56,11 +56,11 @@ var m = l.button(({ theme: t }) => o`
     text-align: left;
     overflow: hidden;
 
-    ${e(o`
+    ${e(s`
       background: ${t.color.background.neutralAltActive};
       color: ${t.color.foreground.neutralBaseActive};
     `)}
-  `), h = l.div`
+  `), h = u.div`
   max-width: 152px;
 `;
 //#endregion

package/dist/patterns/LexicalEditor/nodes/ImageNode/ImageComponent.js

@@ -1,38 +1,38 @@
 import { SquareButton as e } from "../../../../components/SquareButton.js";
 import { stdin_default as t } from "../../../../node_modules/.pnpm/remixicon@4.3.0/node_modules/remixicon/icons/System/settings-3-fill.js";
-import { RESET_BUTTON as n } from "../../../../utils/reset.js";
-import { VISUALLY_HIDDEN as r } from "../../../../utils/visuallyHidden.js";
-import { $isImageNode as i } from "./ImageNode.js";
-import { ImageNotAvailable as a } from "./ImageNotAvailable.js";
-import { InsertImageDialog as o } from "../../components/InsertImageDialog/InsertImageDialog.js";
-import { ImageResizer as s } from "./ImageResizer.js";
+import { useTranslation as n } from "../../../../node_modules/.pnpm/react-i18next@15.7.3_i18next@25.5.2_typescript@5.5.4__react-dom@18.2.0_react@18.2.0__react@18.2.0_typescript@5.5.4/node_modules/react-i18next/dist/es/useTranslation.js";
+import { RESET_BUTTON as r } from "../../../../utils/reset.js";
+import { VISUALLY_HIDDEN as i } from "../../../../utils/visuallyHidden.js";
+import { $isImageNode as a } from "./ImageNode.js";
+import { ImageNotAvailable as o } from "./ImageNotAvailable.js";
+import { InsertImageDialog as s } from "../../components/InsertImageDialog/InsertImageDialog.js";
+import { ImageResizer as ee } from "./ImageResizer.js";
 import { css as c } from "@emotion/react";
 import { Suspense as l, useCallback as u, useEffect as d, useRef as f, useState as p } from "react";
 import m from "@emotion/styled";
 import { Fragment as h, jsx as g, jsxs as _ } from "@emotion/react/jsx-runtime";
-import { useTranslation as ee } from "react-i18next";
-import { $getNodeByKey as v, $getSelection as y, $isNodeSelection as b, $isRangeSelection as x, $setSelection as te, CLICK_COMMAND as ne, COMMAND_PRIORITY_LOW as S, DRAGSTART_COMMAND as C, KEY_BACKSPACE_COMMAND as w, KEY_DELETE_COMMAND as re, KEY_ENTER_COMMAND as ie, KEY_ESCAPE_COMMAND as ae, SELECTION_CHANGE_COMMAND as T, createCommand as E } from "lexical";
-import { mergeRegister as oe } from "@lexical/utils";
-import { useLexicalComposerContext as se } from "@lexical/react/LexicalComposerContext";
-import { useLexicalNodeSelection as ce } from "@lexical/react/useLexicalNodeSelection";
-import { useLexicalEditable as D } from "@lexical/react/useLexicalEditable";
+import { $getNodeByKey as v, $getSelection as y, $isNodeSelection as b, $isRangeSelection as te, $setSelection as ne, CLICK_COMMAND as re, COMMAND_PRIORITY_LOW as x, DRAGSTART_COMMAND as ie, KEY_BACKSPACE_COMMAND as S, KEY_DELETE_COMMAND as C, KEY_ENTER_COMMAND as w, KEY_ESCAPE_COMMAND as ae, SELECTION_CHANGE_COMMAND as oe, createCommand as T } from "lexical";
+import { mergeRegister as se } from "@lexical/utils";
+import { useLexicalComposerContext as ce } from "@lexical/react/LexicalComposerContext";
+import { useLexicalNodeSelection as le } from "@lexical/react/useLexicalNodeSelection";
+import { useLexicalEditable as E } from "@lexical/react/useLexicalEditable";
 //#region src/cds/patterns/LexicalEditor/nodes/ImageNode/ImageComponent.tsx
-var O = /* @__PURE__ */ new Set(), k = E("RIGHT_CLICK_IMAGE_COMMAND");
-function A(e) {
-	if (!O.has(e)) throw new Promise((t) => {
+var D = /* @__PURE__ */ new Set(), O = T("RIGHT_CLICK_IMAGE_COMMAND");
+function k(e) {
+	if (!D.has(e)) throw new Promise((t) => {
 		let n = new Image();
 		n.src = e, n.onload = () => {
-			O.add(e), t(null);
+			D.add(e), t(null);
 		}, n.onerror = () => {
-			O.add(e);
+			D.add(e);
 		};
 	});
 }
-function j(e) {
-	let { altText: t, className: r, imageRef: i, src: a, width: o, height: s, maxWidth: c, onError: l, title: u, buttonProps: d, addtionalInfoLabel: f } = e;
-	A(a);
-	let p = /* @__PURE__ */ g("img", {
-		className: r || void 0,
+function A(e) {
+	let { altText: t, className: n, imageRef: i, src: a, width: o, height: s, maxWidth: ee, onError: c, title: l, buttonProps: u, addtionalInfoLabel: d } = e;
+	k(a);
+	let f = /* @__PURE__ */ g("img", {
+		className: n || void 0,
 		src: a,
 		alt: t,
 		ref: i,
@@ -41,29 +41,29 @@ function j(e) {
 			maxWidth: "100%",
 			width: o
 		},
-		title: u,
-		onError: l,
+		title: l,
+		onError: c,
 		draggable: "false"
 	});
-	return d ? /* @__PURE__ */ _("button", {
+	return u ? /* @__PURE__ */ _("button", {
 		type: "button",
-		css: n,
-		...d,
-		children: [p, f]
-	}) : p;
+		css: r,
+		...u,
+		children: [f, d]
+	}) : f;
 }
-function M({ src: n, altText: m, nodeKey: E, width: O, height: A, maxWidth: M, resizable: ue }) {
-	let N = f(null), P = f(null), [F, I, L] = ce(E), [R, z] = p(!1), [B] = se(), [V, H] = p(null), de = f(null), [U, W] = p(!1), { t: G } = ee(), K = u((e) => {
+function j({ src: r, altText: m, nodeKey: T, width: D, height: k, maxWidth: j, resizable: ue }) {
+	let N = f(null), P = f(null), [F, I, L] = le(T), [R, z] = p(!1), [B] = ce(), [V, H] = p(null), de = f(null), [U, W] = p(!1), { t: G } = n(), K = u((e) => {
 		let t = y();
 		return F && b(t) && (e.preventDefault(), B.update(() => {
 			t.getNodes().forEach((e) => {
-				i(e) && e.remove();
+				a(e) && e.remove();
 			});
 		})), !1;
 	}, [B, F]), q = u((e) => {
 		let t = y(), n = P.current;
 		return F && b(t) && t.getNodes().length === 1 && n !== null && n !== document.activeElement ? (e.preventDefault(), n.focus(), !0) : !1;
-	}, [F]), J = u((e) => P.current === e.target ? (te(null), B.update(() => {
+	}, [F]), J = u((e) => P.current === e.target ? (ne(null), B.update(() => {
 		I(!0);
 		let e = B.getRootElement();
 		e !== null && e.focus();
@@ -78,13 +78,13 @@ function M({ src: n, altText: m, nodeKey: E, width: O, height: A, maxWidth: M, r
 	]), X = u((e) => {
 		B.getEditorState().read(() => {
 			let t = y();
-			e.target.tagName === "IMG" && x(t) && t.getNodes().length === 1 && B.dispatchCommand(k, e);
+			e.target.tagName === "IMG" && te(t) && t.getNodes().length === 1 && B.dispatchCommand(O, e);
 		});
 	}, [B]);
 	d(() => {
-		let e = !0, t = B.getRootElement(), n = oe(B.registerUpdateListener(({ editorState: t }) => {
+		let e = !0, t = B.getRootElement(), n = se(B.registerUpdateListener(({ editorState: t }) => {
 			e && H(t.read(() => y()));
-		}), B.registerCommand(T, (e, t) => (de.current = t, !1), S), B.registerCommand(ne, Y, S), B.registerCommand(k, Y, S), B.registerCommand(C, (e) => e.target === N.current ? (e.preventDefault(), !0) : !1, S), B.registerCommand(re, K, S), B.registerCommand(w, K, S), B.registerCommand(ie, q, S), B.registerCommand(ae, J, S));
+		}), B.registerCommand(oe, (e, t) => (de.current = t, !1), x), B.registerCommand(re, Y, x), B.registerCommand(O, Y, x), B.registerCommand(ie, (e) => e.target === N.current ? (e.preventDefault(), !0) : !1, x), B.registerCommand(C, K, x), B.registerCommand(S, K, x), B.registerCommand(w, q, x), B.registerCommand(ae, J, x));
 		return t?.addEventListener("contextmenu", X), () => {
 			e = !1, n(), t?.removeEventListener("contextmenu", X);
 		};
@@ -93,7 +93,7 @@ function M({ src: n, altText: m, nodeKey: E, width: O, height: A, maxWidth: M, r
 		B,
 		R,
 		F,
-		E,
+		T,
 		K,
 		q,
 		J,
@@ -105,13 +105,13 @@ function M({ src: n, altText: m, nodeKey: E, width: O, height: A, maxWidth: M, r
 		setTimeout(() => {
 			z(!1);
 		}, 200), B.update(() => {
-			let n = v(E);
-			i(n) && n.setWidthAndHeight(e, t);
+			let n = v(T);
+			a(n) && n.setWidthAndHeight(e, t);
 		});
 	}, pe = () => {
 		z(!0);
 	}, Z = F && b(V) && !R, Q = F || R, [me, $] = p(!1);
-	return D() ? /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ _(le, { children: [/* @__PURE__ */ g(l, {
+	return E() ? /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ _(M, { children: [/* @__PURE__ */ g(l, {
 		fallback: null,
 		children: /* @__PURE__ */ g("div", {
 			draggable: Z,
@@ -119,16 +119,16 @@ function M({ src: n, altText: m, nodeKey: E, width: O, height: A, maxWidth: M, r
               // ImageResizer를 위한 relative 설정입니다.
               position: relative;
             `,
-			children: U ? /* @__PURE__ */ g(a, {}) : /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(j, {
+			children: U ? /* @__PURE__ */ g(o, {}) : /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(A, {
 				className: Q ? `focused ${b(V) ? "draggable" : ""}` : null,
-				src: n,
+				src: r,
 				altText: m,
 				imageRef: N,
-				width: O,
-				height: A,
-				maxWidth: M,
+				width: D,
+				height: k,
+				maxWidth: j,
 				onError: () => W(!0)
-			}), ue && b(V) && Q && /* @__PURE__ */ g(s, {
+			}), ue && b(V) && Q && /* @__PURE__ */ g(ee, {
 				showCaption: !1,
 				setShowCaption: () => {},
 				editor: B,
@@ -147,55 +147,55 @@ function M({ src: n, altText: m, nodeKey: E, width: O, height: A, maxWidth: M, r
 			$(!0);
 		},
 		"aria-label": G("이미지 수정하기", { context: "스퀘어버튼, 렉시컬 이미지 도구" })
-	})] }), /* @__PURE__ */ g(o, {
+	})] }), /* @__PURE__ */ g(s, {
 		open: me,
 		title: G("이미지 수정하기", { context: "제목, 이미지 수정 다이얼로그" }),
 		onClose: () => $(!1),
 		imageProps: {
-			src: n,
+			src: r,
 			altText: m
 		},
 		onChange: (e) => {
 			B.update(() => {
-				let t = v(E);
-				i(t) && (t.setSrc(e.src), t.setAltText(e.altText));
+				let t = v(T);
+				a(t) && (t.setSrc(e.src), t.setAltText(e.altText));
 			});
 		},
 		onDelete: () => {
 			B.update(() => {
-				let e = v(E);
-				i(e) && e.remove();
+				let e = v(T);
+				a(e) && e.remove();
 			});
 		}
-	}, n)] }) : /* @__PURE__ */ g(l, {
+	}, r)] }) : /* @__PURE__ */ g(l, {
 		fallback: null,
 		children: /* @__PURE__ */ g("div", {
 			draggable: Z,
-			children: U ? /* @__PURE__ */ g(a, {}) : /* @__PURE__ */ g(j, {
+			children: U ? /* @__PURE__ */ g(o, {}) : /* @__PURE__ */ g(A, {
 				className: Q ? `focused ${b(V) ? "draggable" : ""}` : null,
 				css: c`
                 cursor: pointer;
               `,
-				src: n,
+				src: r,
 				altText: m,
 				imageRef: N,
-				width: O,
-				height: A,
-				maxWidth: M,
+				width: D,
+				height: k,
+				maxWidth: j,
 				onError: () => W(!0),
-				buttonProps: { onClick: () => window.open(n, "_blank") },
+				buttonProps: { onClick: () => window.open(r, "_blank") },
 				title: G("클릭해서 원본 이미지 보기."),
 				addtionalInfoLabel: /* @__PURE__ */ g("span", {
-					css: r,
+					css: i,
 					children: G("(새 창)", { context: "렉시컬 이미지 도구" })
 				})
 			})
 		})
 	});
 }
-var le = m.div`
+var M = m.div`
   display: flex;
   gap: 4px;
 `;
 //#endregion
-export { M as ImageComponent };
+export { j as ImageComponent };

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/InputComponent.js

@@ -1,61 +1,61 @@
 import { SquareButton as e } from "../../../../components/SquareButton.js";
 import { stdin_default as t } from "../../../../node_modules/.pnpm/remixicon@4.3.0/node_modules/remixicon/icons/System/settings-3-fill.js";
-import { getTexts as n } from "../../../../texts.js";
-import { SettingForm as r } from "./SettingForm/SettingForm.js";
-import { LexicalCustomConfigContext as i } from "../../LexicalCustomConfigContext.js";
-import { TextInput as a } from "./TextInput.js";
-import { SegmentedInput as o } from "./SegmentedInput.js";
-import { $isProblemInputNode as s } from "./ProblemInputNode.js";
-import { css as c } from "@emotion/react";
-import { useContext as l, useState as u } from "react";
-import d from "@emotion/styled";
-import { Fragment as f, jsx as p, jsxs as m } from "@emotion/react/jsx-runtime";
-import { useTranslation as h } from "react-i18next";
+import { useTranslation as n } from "../../../../node_modules/.pnpm/react-i18next@15.7.3_i18next@25.5.2_typescript@5.5.4__react-dom@18.2.0_react@18.2.0__react@18.2.0_typescript@5.5.4/node_modules/react-i18next/dist/es/useTranslation.js";
+import { getTexts as r } from "../../../../texts.js";
+import { SettingForm as i } from "./SettingForm/SettingForm.js";
+import { LexicalCustomConfigContext as a } from "../../LexicalCustomConfigContext.js";
+import { TextInput as o } from "./TextInput.js";
+import { SegmentedInput as s } from "./SegmentedInput.js";
+import { $isProblemInputNode as c } from "./ProblemInputNode.js";
+import { css as l } from "@emotion/react";
+import { useContext as u, useState as d } from "react";
+import f from "@emotion/styled";
+import { Fragment as p, jsx as m, jsxs as h } from "@emotion/react/jsx-runtime";
 import { $getNodeByKey as g } from "lexical";
 import { useLexicalComposerContext as _ } from "@lexical/react/LexicalComposerContext";
 import { useLexicalEditable as v } from "@lexical/react/useLexicalEditable";
 //#region src/cds/patterns/LexicalEditor/nodes/ProblemInputNode/InputComponent.tsx
-function y(d) {
-	let { answer: y, isCorrect: x, ...S } = d, { solutions: C, showCharacterNumber: w, placeholder: T, nodeKey: E } = S, [D] = _(), { t: O } = h(), [k, A] = u(!1), j = v(), [M, N] = u(y), { freezeProblemNode: P } = l(i), F = C[0].value, I = (e) => {
+function y(f) {
+	let { answer: y, isCorrect: x, ...S } = f, { solutions: C, showCharacterNumber: w, placeholder: T, nodeKey: E } = S, [D] = _(), { t: O } = n(), [k, A] = d(!1), j = v(), [M, N] = d(y), { freezeProblemNode: P } = u(a), F = C[0].value, I = (e) => {
 		N(e), D.update(() => {
 			let t = g(E);
-			s(t) && t.setAnswer(e);
+			c(t) && t.setAnswer(e);
 		});
 	};
-	return j ? /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ m("div", {
-		css: c`
+	return j ? /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ h("div", {
+		css: l`
           display: flex;
           align-items: center;
           gap: 4px;
         `,
-		children: [/* @__PURE__ */ p(b, {
+		children: [/* @__PURE__ */ m(b, {
 			onClick: () => A(!0),
 			children: O("주관식 입력 칸", { context: "렉시컬 주관식 입력 도구" })
-		}), /* @__PURE__ */ p(e, {
+		}), /* @__PURE__ */ m(e, {
 			size: "small",
 			color: "icon",
-			icon: /* @__PURE__ */ p(t, {}),
+			icon: /* @__PURE__ */ m(t, {}),
 			onClick: () => {
 				A(!0);
 			},
 			"aria-label": O("입력 칸 설정", { context: "렉시컬 주관식 입력 도구" })
 		})]
-	}), k && /* @__PURE__ */ p(r, {
+	}), k && /* @__PURE__ */ m(i, {
 		...S,
 		onClose: () => A(!1)
-	})] }) : w ? /* @__PURE__ */ p(o, {
+	})] }) : w ? /* @__PURE__ */ m(s, {
 		readOnly: P,
 		isCorrect: x,
 		answerFormat: F,
-		placeholder: T || n(O, "placeholderEnterHere"),
+		placeholder: T || r(O, "placeholderEnterHere"),
 		value: M,
 		onChange: I
-	}) : /* @__PURE__ */ p(a, {
+	}) : /* @__PURE__ */ m(o, {
 		readOnly: P,
 		isCorrect: x,
 		size: "small",
 		color: "default",
-		placeholder: T || n(O, "placeholderEnterHere"),
+		placeholder: T || r(O, "placeholderEnterHere"),
 		value: M,
 		onChange: (e) => {
 			I(e.target.value);
@@ -63,7 +63,7 @@ function y(d) {
 		fullWidth: !0
 	});
 }
-var b = d.div(({ theme: e }) => c`
+var b = f.div(({ theme: e }) => l`
     box-sizing: border-box;
     height: 36px;
     width: 300px;