@team-monolith/cds 1.10.3 → 1.10.5

package/dist/icons/Custom.js

@@ -100,5 +100,5 @@ export const CustomPdfColorIcon = forwardRef((props, ref) => {
 import customPdfSvgImport from "./custom/pdf.svg";
 export const customPdfSvg = customPdfSvgImport;
 export const CustomPdfIcon = forwardRef((props, ref) => {
-    return (_jsx("svg", Object.assign({}, props, { ref: ref, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { fill: "currentColor", "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M21 20.8V6.5L15.375 1H5.25C4.65285 1 4.08118 1.23216 3.65931 1.64466C3.23743 2.05716 3 2.61612 3 3.2V20.8C3 21.3829 3.23743 21.9428 3.65931 22.3553C4.08118 22.7678 4.65285 23 5.25 23H18.75C19.3461 23 19.9188 22.7678 20.3407 22.3553C20.7626 21.9428 21 21.3839 21 20.8ZM10.6651 6.80746H12.7437V6.80832C12.8585 6.80832 12.9554 6.89616 12.9599 7.00922C13.0719 9.94434 15.6166 13.0343 18.8043 14.1579C18.9084 14.1944 18.9698 14.3005 18.944 14.4066L18.461 16.4086C18.4352 16.5138 18.332 16.5825 18.2217 16.5695C14.415 16.1077 10.4935 17.6731 6.93308 19.9646C6.83613 20.0272 6.70717 20.0046 6.63868 19.9133L5.40326 18.2618C5.33655 18.1723 5.35078 18.047 5.43706 17.9757C6.74186 16.8982 7.98528 15.1502 8.91562 13.1195C9.84597 11.0932 10.409 8.90248 10.4481 7.01704C10.4508 6.90051 10.546 6.80746 10.6651 6.80746ZM10.8733 14.8066C10.787 14.9788 10.9586 15.1649 11.1428 15.0989C12.0108 14.7884 12.8985 14.5336 13.8013 14.3518C13.9729 14.317 14.0334 14.1083 13.9053 13.9909C13.321 13.4526 12.7927 12.8577 12.3293 12.2168C12.227 12.075 12.0046 12.1055 11.9477 12.269C11.728 12.8986 11.4781 13.5195 11.2024 14.1222C11.0965 14.3527 10.9871 14.5805 10.8733 14.8066Z" }) })));
+    return (_jsx("svg", Object.assign({}, props, { ref: ref, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd", d: "M21 20.8V6.5L15.375 1H5.25C4.65285 1 4.08118 1.23216 3.65931 1.64466C3.23743 2.05716 3 2.61612 3 3.2V20.8C3 21.3829 3.23743 21.9428 3.65931 22.3553C4.08118 22.7678 4.65285 23 5.25 23H18.75C19.3461 23 19.9188 22.7678 20.3407 22.3553C20.7626 21.9428 21 21.3839 21 20.8ZM10.6651 6.80746H12.7437V6.80832C12.8585 6.80832 12.9554 6.89616 12.9599 7.00922C13.0719 9.94434 15.6166 13.0343 18.8043 14.1579C18.9084 14.1944 18.9698 14.3005 18.944 14.4066L18.461 16.4086C18.4352 16.5138 18.332 16.5825 18.2217 16.5695C14.415 16.1077 10.4935 17.6731 6.93308 19.9646C6.83613 20.0272 6.70717 20.0046 6.63868 19.9133L5.40326 18.2618C5.33655 18.1723 5.35078 18.047 5.43706 17.9757C6.74186 16.8982 7.98528 15.1502 8.91562 13.1195C9.84597 11.0932 10.409 8.90248 10.4481 7.01704C10.4508 6.90051 10.546 6.80746 10.6651 6.80746ZM10.8733 14.8066C10.787 14.9788 10.9586 15.1649 11.1428 15.0989C12.0108 14.7884 12.8985 14.5336 13.8013 14.3518C13.9729 14.317 14.0334 14.1083 13.9053 13.9909C13.321 13.4526 12.7927 12.8577 12.3293 12.2168C12.227 12.075 12.0046 12.1055 11.9477 12.269C11.728 12.8986 11.4781 13.5195 11.2024 14.1222C11.0965 14.3527 10.9871 14.5805 10.8733 14.8066Z" }) })));
 });

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SettingForm/FormSelection.js

@@ -10,7 +10,7 @@ import Switch from "../../../../../components/Switch";
 import { useState } from "react";
 import { InsertImageDialog } from "./InsertImageDialog";
 export function FormSelection(props) {
-    const { index, control, rules, watch, onDelete } = props;
+    const { index, control, watch, rules, onDelete } = props;
     const [imageOpen, setImageOpen] = useState(false);
     const [inputFocused, setInputFocused] = useState(false);
     return (_jsxs(Container, { children: [_jsx(Index, { children: index + 1 }), _jsxs("div", Object.assign({ css: css `
@@ -18,9 +18,7 @@ export function FormSelection(props) {
           flex: 1;
           flex-direction: column;
           gap: 4px;
-        ` }, { children: [_jsx(Controller, { name: `selections.${index}.show.image`, control: control, render: ({ field: { value, onChange } }) => (_jsxs(_Fragment, { children: [_jsx(InsertImageDialog, { title: value ? "이미지 바꾸기" : "이미지 삽입하기", open: imageOpen, onClose: () => setImageOpen(false), updateImg: (props) => {
-                                        onChange(props);
-                                    }, deleteButton: value !== null }), value && value.src && (_jsx("img", { src: value.src, alt: value.altText, css: css `
+        ` }, { children: [_jsx(Controller, { name: `selections.${index}.show.image`, control: control, render: ({ field: { value, onChange } }) => (_jsxs(_Fragment, { children: [_jsx(InsertImageDialog, { title: value ? "이미지 바꾸기" : "이미지 삽입하기", open: imageOpen, onClose: () => setImageOpen(false), updateImg: (props) => onChange(props), deleteButton: Boolean(value) }), value && value.src && (_jsx("img", { src: value.src, alt: value.altText, css: css `
                     height: auto;
                     // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
                     max-width: min(400px, 100%);

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SettingForm/InsertImageDialog.js

@@ -25,19 +25,23 @@ export function InsertImageDialog(props) {
     const [mode, setMode] = useState(null);
     const inputRef = useRef(null);
     const cdsContext = useContext(CodleDesignSystemContext);
-    const { control, setValue, watch, reset } = useForm({
+    const { control, setValue, watch, reset, handleSubmit } = useForm({
         defaultValues: { src: "", altText: "" },
     });
-    const onClick = (props) => {
-        updateImg(props);
-        handleOnClose();
-    };
     const handleOnClose = () => {
         setMode(null);
         reset();
         onClose();
     };
-    return (_jsxs(StyledAlertDialog, Object.assign({ icon: _jsx(ImageFillIcon, { color: theme.color.background.primary }), open: open, onClose: handleOnClose, disableIconPadding: true }, { children: [_jsx(StyledAlertDialogTitle, Object.assign({ onClose: handleOnClose }, { children: title })), !mode && (_jsx(AlertDialogContent, { children: _jsxs("div", Object.assign({ css: css `
+    const onSubmit = (data) => {
+        updateImg(data);
+        handleOnClose();
+    };
+    return (_jsxs(StyledAlertDialog, Object.assign({ component: "form", icon: _jsx(ImageFillIcon, { color: theme.color.background.primary }), open: open, onClose: handleOnClose, onSubmit: (e) => {
+            // nested form 구조라서 submit이벤트 전파를 막습니다.
+            e.stopPropagation();
+            handleSubmit(onSubmit)();
+        }, disableIconPadding: true }, { children: [_jsx(StyledAlertDialogTitle, Object.assign({ onClose: handleOnClose }, { children: title })), !mode && (_jsx(AlertDialogContent, { children: _jsxs("div", Object.assign({ css: css `
               display: flex;
               flex-direction: column;
               gap: 16px;
@@ -57,8 +61,9 @@ export function InsertImageDialog(props) {
                                                     setMode("file");
                                                 }
                                             }) })] })] }), deleteButton && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(Button, { color: "textDanger", size: "medium", fullWidth: true, label: "\uC774\uBBF8\uC9C0 \uC0AD\uC81C\uD558\uAE30", onClick: () => {
-                                        onClick(null);
-                                    } })] }))] })) })), mode === "url" && (_jsx(InsertImageUriDialogBody, { control: control, watch: watch, onClick: onClick })), mode === "file" && (_jsx(InsertImageUploadedDialogBody, { control: control, watch: watch, setValue: setValue, onClick: onClick }))] })));
+                                        updateImg(null);
+                                        handleOnClose();
+                                    } })] }))] })) })), mode === "url" && (_jsx(InsertImageUriDialogBody, { control: control, watch: watch })), mode === "file" && (_jsx(InsertImageUploadedDialogBody, { control: control, watch: watch, setValue: setValue }))] })));
 }
 const StyledAlertDialog = styled(AlertDialog) `
   gap: 16px;

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SettingForm/InsertImageUploadedDialogBody.d.ts

@@ -4,6 +4,5 @@ export interface InsertImageUploadedDialogBodyProps {
     control: Control<ImageProps, any>;
     watch: UseFormWatch<ImageProps>;
     setValue: UseFormSetValue<ImageProps>;
-    onClick: (props: ImageProps) => void;
 }
 export declare function InsertImageUploadedDialogBody(props: InsertImageUploadedDialogBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SettingForm/InsertImageUploadedDialogBody.js

@@ -17,7 +17,7 @@ import { RefreshLineIcon } from "../../../../../icons";
 import Input from "../../../../../components/Input";
 import { Controller, } from "react-hook-form";
 export function InsertImageUploadedDialogBody(props) {
-    const { control, watch, setValue, onClick } = props;
+    const { control, watch, setValue } = props;
     const inputRef = useRef(null);
     const cdsContext = useContext(CodleDesignSystemContext);
     const isDisabled = watch("src") === "";
@@ -33,7 +33,7 @@ export function InsertImageUploadedDialogBody(props) {
                                 if (uploadByFile) {
                                     setValue("src", yield uploadByFile(file));
                                 }
-                            }) }), _jsxs(ImagePreview, { children: ["\uC774\uBBF8\uC9C0 \uBBF8\uB9AC\uBCF4\uAE30", _jsx("img", { src: watch("src"), alt: watch("altText") })] }), _jsx(Controller, { name: "altText", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: onChange, value: value })) })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled, onClick: () => onClick({ altText: watch("altText"), src: watch("src") }) }) })] }));
+                            }) }), _jsxs(ImagePreview, { children: ["\uC774\uBBF8\uC9C0 \uBBF8\uB9AC\uBCF4\uAE30", _jsx("img", { src: watch("src"), alt: watch("altText") })] }), _jsx(Controller, { name: "altText", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: onChange, value: value })) })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { type: "submit", fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled }) })] }));
 }
 const Inputs = styled.div `
   display: flex;

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SettingForm/InsertImageUriDialogBody.d.ts

@@ -3,6 +3,5 @@ import { Control, UseFormWatch } from "react-hook-form";
 export interface InsertImageUriDialogBodyProps {
     control: Control<ImageProps, any>;
     watch: UseFormWatch<ImageProps>;
-    onClick: (props: ImageProps) => void;
 }
 export declare function InsertImageUriDialogBody(props: InsertImageUriDialogBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SettingForm/InsertImageUriDialogBody.js

@@ -6,9 +6,9 @@ import { LinkIcon } from "../../../../../icons";
 import Button from "../../../../../components/Button";
 import { Controller } from "react-hook-form";
 export function InsertImageUriDialogBody(props) {
-    const { control, watch, onClick } = props;
+    const { control, watch } = props;
     const isDisabled = watch("src") === "";
-    return (_jsxs(_Fragment, { children: [" ", _jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(Controller, { name: "src", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "URL", placeholder: "https://www.pexels.com/photo/n-2848492/", color: "default", size: "medium", onChange: onChange, value: value, startIcon: _jsx(LinkIcon, {}) })) }), _jsx(Controller, { name: "altText", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: onChange, value: value })) })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled, onClick: () => onClick({ altText: watch("altText"), src: watch("src") }) }) })] }));
+    return (_jsxs(_Fragment, { children: [" ", _jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(Controller, { name: "src", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "URL", placeholder: "https://www.pexels.com/photo/n-2848492/", color: "default", size: "medium", onChange: onChange, value: value, startIcon: _jsx(LinkIcon, {}) })) }), _jsx(Controller, { name: "altText", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: onChange, value: value })) })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { type: "submit", fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled }) })] }));
 }
 const Inputs = styled.div `
   display: flex;

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SettingForm/SettingForm.js

@@ -46,12 +46,13 @@ export default function SettingForm(props) {
         });
         onClose();
     };
-    function validateDuplicatedSelection(fields, index) {
+    function validateDuplicatedSelection(index) {
+        const selections = watch("selections");
         if (index === 0)
             return true;
-        const duplicatedIndex = fields
+        const duplicatedIndex = selections
             .slice(0, index)
-            .findIndex((prevField) => prevField.show.text === fields[index].show.text);
+            .findIndex((selection) => selection.show.text === selections[index].show.text);
         if (duplicatedIndex < 0)
             return true;
         return `${duplicatedIndex + 1}번 선택지와 같은 내용입니다.`;
@@ -64,7 +65,7 @@ export default function SettingForm(props) {
             height: 12px;
           ` }), "\uAC1D\uAD00\uC2DD \uC785\uB825 \uCE78"] }), _jsxs(Content, { children: [_jsxs(FormArea, { children: [_jsx(Label, { children: "\uB2F5\uC548" }), fields.map((field, index) => (_jsx(FormSelection, { index: index, control: control, watch: watch, rules: {
                                     required: "필수 입력 항목입니다.",
-                                    validate: () => validateDuplicatedSelection(fields, index),
+                                    validate: () => validateDuplicatedSelection(index),
                                 }, onDelete: index !== 0
                                     ? () => {
                                         remove(index);

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageDialog.js

@@ -26,9 +26,13 @@ export function InsertImageDialog(props) {
     const hasModifier = useRef(false);
     const inputRef = useRef(null);
     const cdsContext = useContext(CodleDesignSystemContext);
-    const { control, setValue, watch, reset } = useForm({
+    const { control, setValue, watch, reset, handleSubmit } = useForm({
         defaultValues: { src: "", altText: "" },
     });
+    const onSubmit = (data) => {
+        activeEditor.dispatchCommand(INSERT_IMAGE_COMMAND, data);
+        handleOnClose();
+    };
     useEffect(() => {
         hasModifier.current = false;
         const handler = (e) => {
@@ -39,16 +43,12 @@ export function InsertImageDialog(props) {
             document.removeEventListener("keydown", handler);
         };
     }, [activeEditor]);
-    const onClick = (payload) => {
-        activeEditor.dispatchCommand(INSERT_IMAGE_COMMAND, payload);
-        handleOnClose();
-    };
     const handleOnClose = () => {
         setMode(null);
         reset();
         onClose();
     };
-    return (_jsxs(StyledAlertDialog, Object.assign({ icon: _jsx(ImageFillIcon, { color: theme.color.background.primary }), open: open, onClose: handleOnClose, disableIconPadding: true }, { children: [_jsx(StyledAlertDialogTitle, Object.assign({ onClose: handleOnClose }, { children: "\uC774\uBBF8\uC9C0 \uC0BD\uC785\uD558\uAE30" })), !mode && (_jsx(AlertDialogContent, { children: _jsxs(Buttons, { children: [_jsxs(ButtonAndDescription, { children: [_jsx(Description, { children: "\uC774\uBBF8\uC9C0 URL\uC744 \uC54C\uACE0 \uC788\uB2E4\uBA74" }), _jsx(Button, { color: "grey", size: "medium", fullWidth: true, label: "URL\uB85C \uC0BD\uC785\uD558\uAE30", startIcon: _jsx(LinkIcon, {}), onClick: () => setMode("url") })] }), _jsxs(ButtonAndDescription, { children: [_jsx(Description, { children: "\uAC16\uACE0 \uC788\uB294 \uC774\uBBF8\uC9C0\uB97C \uC0BD\uC785\uD558\uACE0 \uC2F6\uB2E4\uBA74" }), _jsx(Button, { color: "grey", size: "medium", fullWidth: true, label: "\uD30C\uC77C \uC120\uD0DD\uD558\uAE30", startIcon: _jsx(UploadLineIcon, {}), onClick: () => {
+    return (_jsxs(StyledAlertDialog, Object.assign({ component: "form", icon: _jsx(ImageFillIcon, { color: theme.color.background.primary }), open: open, onClose: handleOnClose, onSubmit: handleSubmit(onSubmit), disableIconPadding: true }, { children: [_jsx(StyledAlertDialogTitle, Object.assign({ onClose: handleOnClose }, { children: "\uC774\uBBF8\uC9C0 \uC0BD\uC785\uD558\uAE30" })), !mode && (_jsx(AlertDialogContent, { children: _jsxs(Buttons, { children: [_jsxs(ButtonAndDescription, { children: [_jsx(Description, { children: "\uC774\uBBF8\uC9C0 URL\uC744 \uC54C\uACE0 \uC788\uB2E4\uBA74" }), _jsx(Button, { color: "grey", size: "medium", fullWidth: true, label: "URL\uB85C \uC0BD\uC785\uD558\uAE30", startIcon: _jsx(LinkIcon, {}), onClick: () => setMode("url") })] }), _jsxs(ButtonAndDescription, { children: [_jsx(Description, { children: "\uAC16\uACE0 \uC788\uB294 \uC774\uBBF8\uC9C0\uB97C \uC0BD\uC785\uD558\uACE0 \uC2F6\uB2E4\uBA74" }), _jsx(Button, { color: "grey", size: "medium", fullWidth: true, label: "\uD30C\uC77C \uC120\uD0DD\uD558\uAE30", startIcon: _jsx(UploadLineIcon, {}), onClick: () => {
                                         var _a;
                                         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
                                     } }), _jsx(HiddenInput, { ref: inputRef, type: "file", accept: "image/*", onChange: (event) => __awaiter(this, void 0, void 0, function* () {
@@ -61,7 +61,7 @@ export function InsertImageDialog(props) {
                                             setValue("src", yield uploadByFile(file));
                                             setMode("file");
                                         }
-                                    }) })] })] }) })), mode === "url" && (_jsx(InsertImageUriDialogBody, { control: control, watch: watch, onClick: onClick })), mode === "file" && (_jsx(InsertImageUploadedDialogBody, { control: control, watch: watch, setValue: setValue, onClick: onClick }))] })));
+                                    }) })] })] }) })), mode === "url" && (_jsx(InsertImageUriDialogBody, { control: control, watch: watch })), mode === "file" && (_jsx(InsertImageUploadedDialogBody, { control: control, watch: watch, setValue: setValue }))] })));
 }
 const StyledAlertDialog = styled(AlertDialog) `
   gap: 16px;

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageUploadedDialogBody.d.ts

@@ -1,4 +1,3 @@
-import { InsertImagePayload } from ".";
 import { Control, UseFormSetValue, UseFormWatch } from "react-hook-form";
 export interface InsertImageUploadedDialogBodyProps {
     control: Control<{
@@ -13,6 +12,5 @@ export interface InsertImageUploadedDialogBodyProps {
         src: string;
         altText: string;
     }>;
-    onClick: (payload: InsertImagePayload) => void;
 }
 export declare function InsertImageUploadedDialogBody(props: InsertImageUploadedDialogBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageUploadedDialogBody.js

@@ -17,7 +17,7 @@ import Input from "../../../../components/Input";
 import { RefreshLineIcon } from "../../../../icons";
 import { Controller, } from "react-hook-form";
 export function InsertImageUploadedDialogBody(props) {
-    const { control, watch, setValue, onClick } = props;
+    const { control, watch, setValue } = props;
     const inputRef = useRef(null);
     const cdsContext = useContext(CodleDesignSystemContext);
     const isDisabled = watch("src") === "";
@@ -33,7 +33,7 @@ export function InsertImageUploadedDialogBody(props) {
                                 if (uploadByFile) {
                                     setValue("src", yield uploadByFile(file));
                                 }
-                            }) }), _jsxs(ImagePreview, { children: ["\uC774\uBBF8\uC9C0 \uBBF8\uB9AC\uBCF4\uAE30", _jsx("img", { src: watch("src"), alt: watch("altText") })] }), _jsx(Controller, { name: "altText", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: onChange, value: value })) })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled, onClick: () => onClick({ altText: watch("altText"), src: watch("src") }) }) })] }));
+                            }) }), _jsxs(ImagePreview, { children: ["\uC774\uBBF8\uC9C0 \uBBF8\uB9AC\uBCF4\uAE30", _jsx("img", { src: watch("src"), alt: watch("altText") })] }), _jsx(Controller, { name: "altText", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: onChange, value: value })) })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { type: "submit", fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled }) })] }));
 }
 const Inputs = styled.div `
   display: flex;

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageUriDialogBody.d.ts

@@ -1,4 +1,3 @@
-import { InsertImagePayload } from ".";
 import { Control, UseFormWatch } from "react-hook-form";
 export interface InsertImageUriDialogBodyProps {
     control: Control<{
@@ -9,6 +8,5 @@ export interface InsertImageUriDialogBodyProps {
         src: string;
         altText: string;
     }>;
-    onClick: (payload: InsertImagePayload) => void;
 }
 export declare function InsertImageUriDialogBody(props: InsertImageUriDialogBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageUriDialogBody.js

@@ -6,9 +6,9 @@ import { LinkIcon } from "../../../../icons";
 import Button from "../../../../components/Button";
 import { Controller } from "react-hook-form";
 export function InsertImageUriDialogBody(props) {
-    const { control, watch, onClick } = props;
+    const { control, watch } = props;
     const isDisabled = watch("src") === "";
-    return (_jsxs(_Fragment, { children: [" ", _jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(Controller, { name: "src", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "URL", placeholder: "https://www.pexels.com/photo/n-2848492/", color: "default", size: "medium", onChange: onChange, value: value, startIcon: _jsx(LinkIcon, {}) })) }), _jsx(Controller, { name: "altText", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: onChange, value: value })) })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled, onClick: () => onClick({ altText: watch("altText"), src: watch("src") }) }) })] }));
+    return (_jsxs(_Fragment, { children: [" ", _jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(Controller, { name: "src", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "URL", placeholder: "https://www.pexels.com/photo/n-2848492/", color: "default", size: "medium", onChange: onChange, value: value, startIcon: _jsx(LinkIcon, {}) })) }), _jsx(Controller, { name: "altText", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: onChange, value: value })) })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { type: "submit", fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled }) })] }));
 }
 const Inputs = styled.div `
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.10.3",
+  "version": "1.10.5",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,