@team-monolith/cds 1.52.1 → 1.53.0

package/@types/emotion.d.ts

@@ -102,6 +102,8 @@ interface CodleColors {
     videoAlt: string;
     worksheet: string;
     worksheetAlt: string;
+    ebook: string;
+    ebookAlt: string;
   };
   blanket: {
     neutral: string;

package/dist/CodleDesignSystemProvider.d.ts

@@ -1,231 +1,7 @@
 /// <reference types="react" />
 import { Theme } from "@emotion/react";
-export declare const light: {
-    fontFamily: {
-        ui: string;
-        title: string;
-    };
-    color: {
-        background: {
-            neutralBase: string;
-            neutralBaseActive: string;
-            neutralBaseDisabled: string;
-            neutralAlt: string;
-            neutralAltActive: string;
-            neutralAltDisabled: string;
-            primary: string;
-            primaryActive: string;
-            primaryDisabled: string;
-            secondary: string;
-            secondaryActive: string;
-            secondaryDisabled: string;
-            danger: string;
-            dangerActive: string;
-            dangerDisabled: string;
-            success: string;
-            successActive: string;
-            successDisabled: string;
-            info: string;
-            infoActive: string;
-            infoDisabled: string;
-            warning: string;
-            warningActive: string;
-            warningDisabled: string;
-            inverse: string;
-            inverseActive: string;
-            inverseDisabled: string;
-        };
-        foreground: {
-            neutralBase: string;
-            neutralBaseActive: string;
-            neutralBaseDisabled: string;
-            neutralAlt: string;
-            neutralAltActive: string;
-            neutralAltDisabled: string;
-            primary: string;
-            primaryActive: string;
-            primaryDisabled: string;
-            secondary: string;
-            secondaryActive: string;
-            secondaryDisabled: string;
-            danger: string;
-            dangerActive: string;
-            dangerDisabled: string;
-            success: string;
-            successActive: string;
-            successDisabled: string;
-            info: string;
-            infoActive: string;
-            infoDisabled: string;
-            warning: string;
-            warningActive: string;
-            warningDisabled: string;
-        };
-        container: {
-            blueContainer: string;
-            blueOnContainer: string;
-            orangeContainer: string;
-            orangeOnContainer: string;
-            redContainer: string;
-            redOnContainer: string;
-            greenContainer: string;
-            greenOnContainer: string;
-            tealContainer: string;
-            tealOnContainer: string;
-            yellowContainer: string;
-            yellowOnContainer: string;
-            obsidianContainer: string;
-            obsidianOnContainer: string;
-            marbleContainer: string;
-            marbleOnContainer: string;
-        };
-        brand: {
-            brandOriginal: string;
-            brandAlt: string;
-            brandAccent: string;
-            brandFaded: string;
-            pdf: string;
-            pdfAlt: string;
-            quiz: string;
-            quizAlt: string;
-            python: string;
-            pythonAlt: string;
-            embedded: string;
-            embeddedAlt: string;
-            board: string;
-            boardAlt: string;
-            scratch: string;
-            scratchAlt: string;
-            entry: string;
-            entryAlt: string;
-            video: string;
-            videoAlt: string;
-            worksheet: string;
-            worksheetAlt: string;
-        };
-        blanket: {
-            neutral: string;
-            neutralLight: string;
-            neutralHeavy: string;
-            inverse: string;
-            inverseLight: string;
-            inverseHeavy: string;
-        };
-    };
-};
-export declare const dark: {
-    fontFamily: {
-        ui: string;
-        title: string;
-    };
-    color: {
-        background: {
-            neutralBase: string;
-            neutralBaseActive: string;
-            neutralBaseDisabled: string;
-            neutralAlt: string;
-            neutralAltActive: string;
-            neutralAltDisabled: string;
-            primary: string;
-            primaryActive: string;
-            primaryDisabled: string;
-            secondary: string;
-            secondaryActive: string;
-            secondaryDisabled: string;
-            danger: string;
-            dangerActive: string;
-            dangerDisabled: string;
-            success: string;
-            successActive: string;
-            successDisabled: string;
-            info: string;
-            infoActive: string;
-            infoDisabled: string;
-            warning: string;
-            warningActive: string;
-            warningDisabled: string;
-            inverse: string;
-            inverseActive: string;
-            inverseDisabled: string;
-        };
-        foreground: {
-            neutralBase: string;
-            neutralBaseActive: string;
-            neutralBaseDisabled: string;
-            neutralAlt: string;
-            neutralAltActive: string;
-            neutralAltDisabled: string;
-            primary: string;
-            primaryActive: string;
-            primaryDisabled: string;
-            secondary: string;
-            secondaryActive: string;
-            secondaryDisabled: string;
-            danger: string;
-            dangerActive: string;
-            dangerDisabled: string;
-            success: string;
-            successActive: string;
-            successDisabled: string;
-            info: string;
-            infoActive: string;
-            infoDisabled: string;
-            warning: string;
-            warningActive: string;
-            warningDisabled: string;
-        };
-        container: {
-            blueContainer: string;
-            blueOnContainer: string;
-            orangeContainer: string;
-            orangeOnContainer: string;
-            redContainer: string;
-            redOnContainer: string;
-            greenContainer: string;
-            greenOnContainer: string;
-            tealContainer: string;
-            tealOnContainer: string;
-            yellowContainer: string;
-            yellowOnContainer: string;
-            obsidianContainer: string;
-            obsidianOnContainer: string;
-            marbleContainer: string;
-            marbleOnContainer: string;
-        };
-        brand: {
-            brandOriginal: string;
-            brandAlt: string;
-            brandAccent: string;
-            brandFaded: string;
-            pdf: string;
-            pdfAlt: string;
-            quiz: string;
-            quizAlt: string;
-            python: string;
-            pythonAlt: string;
-            embedded: string;
-            embeddedAlt: string;
-            board: string;
-            boardAlt: string;
-            scratch: string;
-            scratchAlt: string;
-            entry: string;
-            entryAlt: string;
-            video: string;
-            videoAlt: string;
-            worksheet: string;
-            worksheetAlt: string;
-        };
-        blanket: {
-            neutral: string;
-            neutralLight: string;
-            neutralHeavy: string;
-            inverse: string;
-            inverseLight: string;
-            inverseHeavy: string;
-        };
-    };
-};
+export declare const light: Theme;
+export declare const dark: Theme;
 interface CodleDesignSystemContext {
     theme?: Theme;
     lexical?: {

package/dist/CodleDesignSystemProvider.js

@@ -107,6 +107,8 @@ export const light = {
             videoAlt: "#CEC8DE",
             worksheet: "#874BFF",
             worksheetAlt: "#EEE5FF",
+            ebook: "#0094FF",
+            ebookAlt: "#E0F2FF",
         },
         blanket: {
             neutral: COLOR.alpha030,
@@ -220,6 +222,8 @@ export const dark = {
             videoAlt: "#2D2640",
             worksheet: "#874BFF",
             worksheetAlt: "#5F5C66",
+            ebook: "#0094FF",
+            ebookAlt: "#475966",
         },
         blanket: {
             neutral: COLOR.alphaf20,

package/dist/components/InputBase.d.ts

@@ -45,6 +45,8 @@ interface InputBaseInputProps {
 }
 interface InputBaseTextAreaProps {
     multiline: true;
+    /** MUI TextareaAutosize 사용 여부. 전달하지 않으면 사용합니다. */
+    disableAutosize?: boolean;
     /** HTML input 태그에 전달될 ref */
     inputRef?: ForwardedRef<HTMLTextAreaElement>;
     /** HTML input 태그에 전달될 props */

package/dist/components/InputBase.js

@@ -62,7 +62,7 @@ const SIZE_TO_STYLES = (size, fullWidth) => ({
       padding-bottom: 12px;
       ${!fullWidth && "max-width: 375px"};
     `,
-}[size]);
+})[size];
 function InputComponent(props) {
     const { placeholder, disabled = false, defaultValue, value } = props;
     const theme = useTheme();
@@ -86,6 +86,9 @@ function InputComponent(props) {
   `;
     // Type Safety 때문에 코드의 중복을 허용합니다.
     if (props.multiline) {
+        if (props.disableAutosize) {
+            return (_jsx("textarea", Object.assign({ css: style }, props.inputProps, { ref: props.inputRef, onChange: props.onChange, placeholder: placeholder, disabled: disabled, defaultValue: defaultValue, value: value })));
+        }
         return (_jsx(TextareaAutosize, Object.assign({ css: style }, props.inputProps, { ref: props.inputRef, onChange: props.onChange, placeholder: placeholder, disabled: disabled, defaultValue: defaultValue, value: value })));
     }
     else {

package/dist/icons/Custom.d.ts

@@ -271,3 +271,12 @@ export declare const customeWorksheetColorSvg: string;
 export declare const CustomWorksheetColorIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
 } & React.RefAttributes<any>>;
+export declare const customEbookSvg: string;
+export declare const CustomEbookIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    color?: string | undefined;
+} & React.RefAttributes<any>>;
+export declare const customEbookColorSvg: string;
+export declare const CustomEbookColorIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+} & React.RefAttributes<any>>;

package/dist/icons/Custom.js

@@ -300,3 +300,13 @@ export const customeWorksheetColorSvg = customeWorksheetColorSvgImport;
 export const CustomWorksheetColorIcon = forwardRef((props, ref) => {
     return (_jsxs("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", { d: "M19 3H5C3.9 3 3 3.9 3 5V15C3 16.1 3.9 17 5 17H19C20.1 17 21 16.1 21 15V5C21 3.9 20.1 3 19 3Z", fill: "#874BFF" }), _jsx("path", { d: "M3 19.5C3 18.6716 3.67157 18 4.5 18H19.5C20.3284 18 21 18.6716 21 19.5C21 20.3284 20.3284 21 19.5 21H4.5C3.67157 21 3 20.3284 3 19.5Z", fill: "#EEE6FF" }), _jsx("path", { d: "M8.13137 14.5L5.5 5.5H8.20107L9.42091 11.0371H9.49062L10.937 5.5H13.063L14.5094 11.0547H14.5791L15.7989 5.5H18.5L15.8686 14.5H13.5509L12.0349 9.47266H11.9651L10.4491 14.5H8.13137Z", fill: "#EEE5FF" })] })));
 });
+import customEbookSvgImport from "./custom/ebook.svg";
+export const customEbookSvg = customEbookSvgImport;
+export const CustomEbookIcon = 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", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 4.36014C11.4873 3.84225 10.5729 3.5 9.41304 3.5C7.58696 3.5 6.97826 3.97368 6.36957 4.44737C5.76087 4.92105 5.15217 5.39474 3.93478 5.39474C2.71739 5.39474 1.5 6.24304 1.5 7.28947V17.7105C1.5 18.757 2.71739 19.6053 3.93478 19.6053C3.99279 19.6053 4.04941 19.6042 4.10472 19.6021C4.14925 19.6042 4.19407 19.6053 4.23913 19.6053H8.80435C8.94542 19.6053 9.08649 19.6907 9.28145 19.8088C9.71739 20.0728 10.4228 20.5 12 20.5C13.5772 20.5 14.2826 20.0728 14.7185 19.8088C14.9135 19.6907 15.0546 19.6053 15.1957 19.6053H19.7609C19.8059 19.6053 19.8507 19.6042 19.8953 19.6021C19.9506 19.6042 20.0072 19.6053 20.0652 19.6053C21.2826 19.6053 22.5 18.757 22.5 17.7105V7.28947C22.5 6.24304 21.2826 5.39474 20.0652 5.39474C18.8478 5.39474 18.2391 4.92105 17.6304 4.44737C17.0217 3.97368 16.413 3.5 14.587 3.5C13.4271 3.5 12.5127 3.84225 12 4.36014ZM11.5435 6.76316C11.5435 5.94926 10.6304 5.28947 9.26087 5.28947C7.8913 5.28947 7.43478 5.65789 6.97826 6.02632C6.52174 6.39474 6.06522 6.76316 5.15217 6.76316C4.23913 6.76316 3.32609 7.42295 3.32609 8.23684V16.3421C3.32609 17.156 4.23913 17.8158 5.15217 17.8158C6.06522 17.8158 6.52174 17.4474 6.97826 17.0789C7.43478 16.7105 7.8913 16.3421 8.80435 16.3421C9.67525 16.3421 9.90653 16.5711 10.1028 16.7653C10.2474 16.9085 10.3731 17.0329 10.7217 17.0329C11.5435 17.0329 11.5435 16.3421 11.5435 16.3421V6.76316ZM14.7391 5.28947C13.3696 5.28947 12.4565 5.94926 12.4565 6.76316V16.3421C12.4565 16.3421 12.4565 17.0329 13.2783 17.0329C13.6269 17.0329 13.7526 16.9085 13.8972 16.7653C14.0935 16.5711 14.3247 16.3421 15.1957 16.3421C16.1087 16.3421 16.5652 16.7105 17.0217 17.0789C17.4783 17.4474 17.9348 17.8158 18.8478 17.8158C19.7609 17.8158 20.6739 17.156 20.6739 16.3421V8.23684C20.6739 7.42295 19.7609 6.76316 18.8478 6.76316C17.9348 6.76316 17.4783 6.39474 17.0217 6.02632C16.5652 5.65789 16.1087 5.28947 14.7391 5.28947Z", fill: "currentColor" }) })));
+});
+import customEbookColorSvgImport from "./custom/ebook-color.svg";
+export const customEbookColorSvg = customEbookColorSvgImport;
+export const CustomEbookColorIcon = forwardRef((props, ref) => {
+    return (_jsxs("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", { d: "M4.23913 6C2.72634 6 1.5 7.25919 1.5 8.8125V16.25C1.5 17.8033 2.72634 19.0625 4.23913 19.0625H8.80435C8.94545 19.0625 9.08655 19.152 9.28149 19.2757C9.71739 19.5524 10.4228 20 12 20C13.5772 20 14.2826 19.5524 14.7185 19.2757C14.9134 19.152 15.0545 19.0625 15.1957 19.0625H19.7609C21.2737 19.0625 22.5 17.8033 22.5 16.25V8.8125C22.5 7.25919 21.2737 6 19.7609 6H4.23913Z", fill: "#0094FF" }), _jsx("path", { d: "M12 5.86667C12 5.01767 13 4 14.5 4C16 4 16.5 4.54902 17 4.93333C17.5 5.31765 18 5.86667 19 5.86667C20 5.86667 21 6.88433 21 7.73334V16.1333C21 17.0667 20 18 19 18C18 18 17.5 17.9177 17 17.5333C16.5 17.149 16 16.4627 15 16.4627C14 16.4627 14 17.0667 13 17.0667C12 17.0667 12 16.1333 12 16.1333V5.86667Z", fill: "#C2E6FF" }), _jsx("path", { d: "M12 5.86667C12 5.01767 11 4 9.5 4C8 4 7.5 4.54902 7 4.93333C6.5 5.31765 6 5.86667 5 5.86667C4 5.86667 3 6.88433 3 7.73334V16.1333C3 17.0667 4 18 5 18C6 18 6.5 17.9177 7 17.5333C7.5 17.149 8 16.4627 9 16.4627C10 16.4627 10 17.0667 11 17.0667C12 17.0667 12 16.1333 12 16.1333V5.86667Z", fill: "#E0F2FF" })] })));
+});

package/dist/icons/custom/ebook-color.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.23913 6C2.72634 6 1.5 7.25919 1.5 8.8125V16.25C1.5 17.8033 2.72634 19.0625 4.23913 19.0625H8.80435C8.94545 19.0625 9.08655 19.152 9.28149 19.2757C9.71739 19.5524 10.4228 20 12 20C13.5772 20 14.2826 19.5524 14.7185 19.2757C14.9134 19.152 15.0545 19.0625 15.1957 19.0625H19.7609C21.2737 19.0625 22.5 17.8033 22.5 16.25V8.8125C22.5 7.25919 21.2737 6 19.7609 6H4.23913Z" fill="#0094FF"/>
+<path d="M12 5.86667C12 5.01767 13 4 14.5 4C16 4 16.5 4.54902 17 4.93333C17.5 5.31765 18 5.86667 19 5.86667C20 5.86667 21 6.88433 21 7.73334V16.1333C21 17.0667 20 18 19 18C18 18 17.5 17.9177 17 17.5333C16.5 17.149 16 16.4627 15 16.4627C14 16.4627 14 17.0667 13 17.0667C12 17.0667 12 16.1333 12 16.1333V5.86667Z" fill="#C2E6FF"/>
+<path d="M12 5.86667C12 5.01767 11 4 9.5 4C8 4 7.5 4.54902 7 4.93333C6.5 5.31765 6 5.86667 5 5.86667C4 5.86667 3 6.88433 3 7.73334V16.1333C3 17.0667 4 18 5 18C6 18 6.5 17.9177 7 17.5333C7.5 17.149 8 16.4627 9 16.4627C10 16.4627 10 17.0667 11 17.0667C12 17.0667 12 16.1333 12 16.1333V5.86667Z" fill="#E0F2FF"/>
+</svg>

package/dist/icons/custom/ebook.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4.36014C11.4873 3.84225 10.5729 3.5 9.41304 3.5C7.58696 3.5 6.97826 3.97368 6.36957 4.44737C5.76087 4.92105 5.15217 5.39474 3.93478 5.39474C2.71739 5.39474 1.5 6.24304 1.5 7.28947V17.7105C1.5 18.757 2.71739 19.6053 3.93478 19.6053C3.99279 19.6053 4.04941 19.6042 4.10472 19.6021C4.14925 19.6042 4.19407 19.6053 4.23913 19.6053H8.80435C8.94542 19.6053 9.08649 19.6907 9.28145 19.8088C9.71739 20.0728 10.4228 20.5 12 20.5C13.5772 20.5 14.2826 20.0728 14.7185 19.8088C14.9135 19.6907 15.0546 19.6053 15.1957 19.6053H19.7609C19.8059 19.6053 19.8507 19.6042 19.8953 19.6021C19.9506 19.6042 20.0072 19.6053 20.0652 19.6053C21.2826 19.6053 22.5 18.757 22.5 17.7105V7.28947C22.5 6.24304 21.2826 5.39474 20.0652 5.39474C18.8478 5.39474 18.2391 4.92105 17.6304 4.44737C17.0217 3.97368 16.413 3.5 14.587 3.5C13.4271 3.5 12.5127 3.84225 12 4.36014ZM11.5435 6.76316C11.5435 5.94926 10.6304 5.28947 9.26087 5.28947C7.8913 5.28947 7.43478 5.65789 6.97826 6.02632C6.52174 6.39474 6.06522 6.76316 5.15217 6.76316C4.23913 6.76316 3.32609 7.42295 3.32609 8.23684V16.3421C3.32609 17.156 4.23913 17.8158 5.15217 17.8158C6.06522 17.8158 6.52174 17.4474 6.97826 17.0789C7.43478 16.7105 7.8913 16.3421 8.80435 16.3421C9.67525 16.3421 9.90653 16.5711 10.1028 16.7653C10.2474 16.9085 10.3731 17.0329 10.7217 17.0329C11.5435 17.0329 11.5435 16.3421 11.5435 16.3421V6.76316ZM14.7391 5.28947C13.3696 5.28947 12.4565 5.94926 12.4565 6.76316V16.3421C12.4565 16.3421 12.4565 17.0329 13.2783 17.0329C13.6269 17.0329 13.7526 16.9085 13.8972 16.7653C14.0935 16.5711 14.3247 16.3421 15.1957 16.3421C16.1087 16.3421 16.5652 16.7105 17.0217 17.0789C17.4783 17.4474 17.9348 17.8158 18.8478 17.8158C19.7609 17.8158 20.6739 17.156 20.6739 16.3421V8.23684C20.6739 7.42295 19.7609 6.76316 18.8478 6.76316C17.9348 6.76316 17.4783 6.39474 17.0217 6.02632C16.5652 5.65789 16.1087 5.28947 14.7391 5.28947Z" fill="#363636"/>
+</svg>

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectBox/SelectBoxEdit.d.ts

@@ -1,10 +1,9 @@
 import { ImageProps } from "../../insertImageDialog";
-import React from "react";
 export interface SelectBoxEditProps {
     index: number;
     isAnswer: boolean;
     image?: ImageProps | null;
-    text: React.ReactNode;
+    text: string;
     onClick: () => void;
 }
 export declare function SelectBoxEdit(props: SelectBoxEditProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -65,8 +65,9 @@ export function SelectComponent(props) {
             display: flex;
             flex-direction: column;
             gap: 4px;
-          ` }, { children: selections.map((selection, index) => (_jsx(SelectBoxEdit, { index: index + 1, isAnswer: "isAnswer" in selection && selection.isAnswer, image: selection.show.image, text: selection.show.text ||
-                                (selection.show.image ? null : `${index + 1}번 선택지`), onClick: () => setSettingOpen(true) }, index))) })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
+          ` }, { children: selections.map((selection, index) => (_jsx(SelectBoxEdit, { index: index + 1, isAnswer: "isAnswer" in selection && selection.isAnswer, image: selection.show.image, text: selection.show.text === "" && selection.show.image === null
+                                ? `${index + 1}번 선택지`
+                                : selection.show.text, onClick: () => setSettingOpen(true) }, index))) })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
                             setSettingOpen(true);
                         } })] })), settingOpen && (_jsx(SettingForm, { selections: selections, nodeKey: nodeKey, onClose: () => setSettingOpen(false) }))] }));
 }

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

@@ -1,14 +1,9 @@
-import { Selection } from "../ProblemSelectNode";
-import { Control, UseFormWatch } from "react-hook-form";
+import { Control, RegisterOptions } from "react-hook-form";
+import { SettingFormData } from "./SettingForm";
 export interface FormSelectionProps {
     index: number;
-    control: Control<{
-        selections: Selection[];
-    }, any>;
-    watch: UseFormWatch<{
-        selections: Selection[];
-    }>;
-    rules?: any;
+    control: Control<SettingFormData, any>;
+    rules?: Omit<RegisterOptions<SettingFormData, `selections.${number}`>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs">;
     onDelete?: () => void;
 }
 export declare function FormSelection(props: FormSelectionProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import styled from "@emotion/styled";
-import { Controller } from "react-hook-form";
+import { useController } from "react-hook-form";
 import { css } from "@emotion/react";
 import Input from "../../../../../components/Input";
 import { DeleteBinLineIcon, ErrorWarningFillIcon, ImageAddFillIcon, ImageEditFillIcon, } from "../../../../../icons";
@@ -10,43 +10,48 @@ import Switch from "../../../../../components/Switch";
 import { useState } from "react";
 import { InsertImageDialog } from "../../insertImageDialog";
 export function FormSelection(props) {
-    const { index, control, watch, rules, onDelete } = props;
+    const { index, control, rules, onDelete } = props;
     const [imageOpen, setImageOpen] = useState(false);
     const [inputFocused, setInputFocused] = useState(false);
-    return (_jsxs(Container, { children: [_jsx(Index, { children: index + 1 }), _jsx(Controller, { name: `selections.${index}.show`, control: control, rules: rules, render: ({ field: { value, onChange }, fieldState: { invalid, error }, }) => (_jsxs("div", Object.assign({ css: css `
-              display: flex;
-              flex: 1;
-              flex-direction: column;
-              gap: 4px;
-            ` }, { children: [_jsx(InsertImageDialog, { title: value.image ? "이미지 바꾸기" : "이미지 삽입하기", open: imageOpen, onClose: () => setImageOpen(false), updateImg: (props) => onChange(Object.assign(Object.assign({}, value), { image: props })), deleteButton: Boolean(value.image) }), value.image && (_jsx("img", { src: value.image.src, alt: value.image.altText, css: css `
-                  height: auto;
-                  // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
-                  max-width: min(400px, 100%);
-                  width: fit-content;
-                  border-radius: 6px;
-                `, draggable: "false" })), _jsx(Input, { size: "small", color: invalid
-                                ? "activeDanger"
-                                : inputFocused
-                                    ? "activePrimary"
-                                    : "default", value: value.text, onChange: (e) => onChange(Object.assign(Object.assign({}, value), { text: e.target.value })), inputProps: {
-                                onFocus: (_e) => {
-                                    setInputFocused(true);
-                                },
-                                onBlur: (_e) => {
-                                    setInputFocused(false);
-                                },
-                            }, placeholder: `${index + 1}번 선택지`, hintIcon: invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: error === null || error === void 0 ? void 0 : error.message, multiline: true, fullWidth: true, css: css `
-                flex: 1;
-              ` })] }))) }), _jsxs("div", Object.assign({ css: css `
+    const { field: { value, onChange }, fieldState: { invalid, error }, } = useController({
+        control,
+        name: `selections.${index}`,
+        rules,
+    });
+    return (_jsxs(Container, { children: [_jsx(Index, { children: index + 1 }), _jsxs("div", Object.assign({ css: css `
+          display: flex;
+          flex: 1;
+          flex-direction: column;
+          gap: 4px;
+        ` }, { children: [_jsx(InsertImageDialog, { title: value.show.image ? "이미지 바꾸기" : "이미지 삽입하기", open: imageOpen, onClose: () => setImageOpen(false), updateImg: (props) => onChange(Object.assign(Object.assign({}, value), { show: Object.assign(Object.assign({}, value.show), { image: props }) })), deleteButton: Boolean(value.show.image) }), value.show.image && (_jsx("img", { src: value.show.image.src, alt: value.show.image.altText, css: css `
+              height: auto;
+              // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
+              max-width: min(400px, 100%);
+              width: fit-content;
+              border-radius: 6px;
+            `, draggable: "false" })), _jsx(Input, { size: "small", color: invalid
+                            ? "activeDanger"
+                            : inputFocused
+                                ? "activePrimary"
+                                : "default", value: value.show.text, onChange: (e) => onChange(Object.assign(Object.assign({}, value), { show: Object.assign(Object.assign({}, value.show), { text: e.target.value }) })), inputProps: {
+                            onFocus: (_e) => {
+                                setInputFocused(true);
+                            },
+                            onBlur: (_e) => {
+                                setInputFocused(false);
+                            },
+                        }, placeholder: `${index + 1}번 선택지`, hintIcon: invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: error === null || error === void 0 ? void 0 : error.message, multiline: true, fullWidth: true, css: css `
+            flex: 1;
+          ` })] })), _jsxs("div", Object.assign({ css: css `
           display: flex;
           height: 36px;
           gap: 8px;
           align-items: center;
-        ` }, { children: [_jsx(SquareButton, { color: "icon", size: "xsmall", icon: watch(`selections.${index}.show.image`) ? (_jsx(ImageEditFillIcon, {})) : (_jsx(ImageAddFillIcon, {})), onClick: () => {
+        ` }, { children: [_jsx(SquareButton, { color: "icon", size: "xsmall", icon: value.show.image ? _jsx(ImageEditFillIcon, {}) : _jsx(ImageAddFillIcon, {}), onClick: () => {
                             setImageOpen(true);
-                        } }), _jsx(Controller, { name: `selections.${index}.isAnswer`, control: control, render: ({ field: { value, onChange } }) => (_jsxs(Answer, Object.assign({ onClick: () => {
-                                onChange(!value);
-                            } }, { children: ["\uC815\uB2F5", _jsx(Switch, { checked: Boolean(value), size: "small" })] }))) }), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete }))] }))] }));
+                        } }), _jsxs(Answer, Object.assign({ onClick: () => {
+                            onChange(Object.assign(Object.assign({}, value), { isAnswer: !value.isAnswer }));
+                        } }, { children: ["\uC815\uB2F5", _jsx(Switch, { checked: Boolean(value.isAnswer), size: "small" })] })), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete }))] }))] }));
 }
 const Container = styled.div(({ theme }) => css `
     display: flex;

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

@@ -5,4 +5,7 @@ export interface SettingFormProps {
     nodeKey: NodeKey;
     onClose: () => void;
 }
+export interface SettingFormData {
+    selections: Selection[];
+}
 export default function SettingForm(props: SettingFormProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -38,33 +38,25 @@ export default function SettingForm(props) {
         });
         onClose();
     };
-    function validateRequiredSelection(index) {
-        const selections = watch("selections");
-        const selection = selections[index];
-        if (selection.show.image || selection.show.text)
+    function validateRequired(value) {
+        if (value.show.image || value.show.text)
             return true;
         return "필수 입력 항목입니다.";
     }
-    function validateDuplicatedSelection(index) {
-        const selections = watch("selections");
-        if (index === 0)
-            return true;
-        const image = selections[index].show.image;
-        const text = selections[index].show.text;
-        const duplicatedIndex = selections
-            .slice(0, index)
-            .findIndex((selection) => {
-            var _a;
-            // text를 비교하고, text가 같은 경우 image도 비교합니다.
-            if (selection.show.text !== text)
-                return false;
-            if (((_a = selection.show.image) === null || _a === void 0 ? void 0 : _a.src) !== (image === null || image === void 0 ? void 0 : image.src))
-                return false;
-            return true;
+    function validateDuplicated(value, formValues) {
+        const shows = formValues.selections.map((selection) => selection.show);
+        const duplicatedIndexes = shows.flatMap((show, i) => {
+            var _a, _b;
+            if (show.text === value.show.text &&
+                ((_a = show.image) === null || _a === void 0 ? void 0 : _a.src) === ((_b = value.show.image) === null || _b === void 0 ? void 0 : _b.src))
+                return [i];
+            return [];
         });
-        if (duplicatedIndex < 0)
+        if (duplicatedIndexes.length < 2)
             return true;
-        return `${duplicatedIndex + 1}번 선택지와 같은 내용입니다.`;
+        return `${duplicatedIndexes
+            .map((i) => i + 1)
+            .join(",")}번 선택지가 같은 내용입니다.`;
     }
     const answersCount = watch("selections").filter((selection) => selection.isAnswer).length;
     const hasMultipleAnswers = answersCount > 1;
@@ -72,13 +64,10 @@ export default function SettingForm(props) {
     return (_jsxs(Form, Object.assign({ onSubmit: handleSubmit(onSettingSubmit) }, { children: [_jsxs(Title, { children: [_jsx(ListRadioIcon, { css: css `
             width: 12px;
             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: {
-                                    validate: () => {
-                                        const required = validateRequiredSelection(index);
-                                        if (required !== true) {
-                                            return required;
-                                        }
-                                        return validateDuplicatedSelection(index);
+          ` }), "\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, rules: {
+                                    validate: {
+                                        validateRequired,
+                                        validateDuplicated,
                                     },
                                 }, onDelete: index !== 0
                                     ? () => {

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

@@ -37,15 +37,9 @@ export function InputComponent(props) {
     };
     // view
     if (!isEditable) {
-        return (_jsx(Input, { multiline: multiline, css: css `
+        return (_jsx(Input, { multiline: multiline, disableAutosize: true, css: css `
           textarea {
-            // textarea의 height를 고정시키기 위해 max-height와 min-height를 설정합니다.
-            max-height: ${TEXTAREA_HEIGHT}px;
-            min-height: ${TEXTAREA_HEIGHT}px;
-            // https://github.com/mui/material-ui/blob/next/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx
-            // MUI TextareaAutoSize는 overflow를 hidden으로 설정하는 로직이 있습니다.
-            // 그래서 부득이하게 !important를 사용합니다.
-            overflow: auto !important;
+            height: ${TEXTAREA_HEIGHT}px;
           }
         `, inputProps: freezeProblemNode
                 ? { readOnly: true }

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SelectBox/SelectBoxEdit.d.ts

@@ -1,9 +1,8 @@
-import React from "react";
 import { ImageProps } from "../../../insertImageDialog";
 /** SheetSelectNode의 하나의 선택지 edit모드 컴포넌트입니다. */
 export declare function SelectBoxEdit(props: {
     index: number;
     image?: ImageProps | null;
-    text: React.ReactNode;
+    text: string;
     onClick: () => void;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SelectComponent.js

@@ -60,8 +60,9 @@ export function SelectComponent(props) {
             display: flex;
             flex-direction: column;
             gap: 4px;
-          ` }, { children: selections.map((selection, index) => (_jsx(SelectBoxEdit, { index: index + 1, image: selection.show.image, text: selection.show.text ||
-                                (selection.show.image ? null : `${index + 1}번 선택지`), onClick: () => setSettingOpen((open) => !open) }, index))) })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
+          ` }, { children: selections.map((selection, index) => (_jsx(SelectBoxEdit, { index: index + 1, image: selection.show.image, text: selection.show.text === "" && selection.show.image === null
+                                ? `${index + 1}번 선택지`
+                                : selection.show.text, onClick: () => setSettingOpen((open) => !open) }, index))) })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
                             setSettingOpen((open) => !open);
                         } })] })), settingOpen && (_jsx(SettingForm, { data: {
                     selections,

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SettingForm/FormSelection.d.ts

@@ -1,11 +1,10 @@
 /** @jsxImportSource @emotion/react */
-import { Control, UseFormWatch } from "react-hook-form";
+import { Control, RegisterOptions } from "react-hook-form";
 import { SettingFormData } from "./SettingForm";
 /** SheetSelectNode SettingForm의 단일 선택지 폼입니다. */
 export default function FormSelection(props: {
     index: number;
     control: Control<SettingFormData, any>;
-    watch: UseFormWatch<SettingFormData>;
-    rules?: any;
+    rules?: Omit<RegisterOptions<SettingFormData, `selections.${number}.show`>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs">;
     onDelete?: () => void;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SettingForm/FormSelection.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
-import { Controller } from "react-hook-form";
+import { useController } from "react-hook-form";
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 import { useState } from "react";
@@ -8,40 +8,45 @@ import { InsertImageDialog } from "../../../insertImageDialog";
 import { DeleteBinLineIcon, ErrorWarningFillIcon, ImageAddFillIcon, ImageEditFillIcon, Input, SquareButton, } from "../../../../../..";
 /** SheetSelectNode SettingForm의 단일 선택지 폼입니다. */
 export default function FormSelection(props) {
-    const { index, control, watch, rules, onDelete } = props;
+    const { index, control, rules, onDelete } = props;
     const [imageOpen, setImageOpen] = useState(false);
     const [inputFocused, setInputFocused] = useState(false);
-    return (_jsxs(Container, { children: [_jsx(Index, { children: index + 1 }), _jsx(Controller, { name: `selections.${index}.show`, control: control, rules: rules, render: ({ field: { value, onChange }, fieldState: { invalid, error }, }) => (_jsxs("div", Object.assign({ css: css `
-              display: flex;
-              flex: 1;
-              flex-direction: column;
-              gap: 4px;
-            ` }, { children: [_jsx(InsertImageDialog, { title: value.image ? "이미지 바꾸기" : "이미지 삽입하기", open: imageOpen, onClose: () => setImageOpen(false), updateImg: (props) => onChange(Object.assign(Object.assign({}, value), { image: props })), deleteButton: Boolean(value.image) }), value.image && (_jsx("img", { src: value.image.src, alt: value.image.altText, css: css `
-                  height: auto;
-                  // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
-                  max-width: min(400px, 100%);
-                  width: fit-content;
-                  border-radius: 6px;
-                `, draggable: "false" })), _jsx(Input, { size: "small", color: invalid
-                                ? "activeDanger"
-                                : inputFocused
-                                    ? "activePrimary"
-                                    : "default", value: value.text, onChange: (e) => onChange(Object.assign(Object.assign({}, value), { text: e.target.value })), inputProps: {
-                                onFocus: (_e) => {
-                                    setInputFocused(true);
-                                },
-                                onBlur: (_e) => {
-                                    setInputFocused(false);
-                                },
-                            }, placeholder: `${index + 1}번 선택지`, hintIcon: invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: error === null || error === void 0 ? void 0 : error.message, multiline: true, fullWidth: true, css: css `
-                flex: 1;
-              ` })] }))) }), _jsxs("div", Object.assign({ css: css `
+    const { field: { value, onChange }, fieldState: { invalid, error }, } = useController({
+        control,
+        name: `selections.${index}.show`,
+        rules,
+    });
+    return (_jsxs(Container, { children: [_jsx(Index, { children: index + 1 }), _jsxs("div", Object.assign({ css: css `
+          display: flex;
+          flex: 1;
+          flex-direction: column;
+          gap: 4px;
+        ` }, { children: [_jsx(InsertImageDialog, { title: value.image ? "이미지 바꾸기" : "이미지 삽입하기", open: imageOpen, onClose: () => setImageOpen(false), updateImg: (props) => onChange(Object.assign(Object.assign({}, value), { image: props })), deleteButton: Boolean(value.image) }), value.image && (_jsx("img", { src: value.image.src, alt: value.image.altText, css: css `
+              height: auto;
+              // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
+              max-width: min(400px, 100%);
+              width: fit-content;
+              border-radius: 6px;
+            `, draggable: "false" })), _jsx(Input, { size: "small", color: invalid
+                            ? "activeDanger"
+                            : inputFocused
+                                ? "activePrimary"
+                                : "default", value: value.text, onChange: (e) => onChange(Object.assign(Object.assign({}, value), { text: e.target.value })), inputProps: {
+                            onFocus: (_e) => {
+                                setInputFocused(true);
+                            },
+                            onBlur: (_e) => {
+                                setInputFocused(false);
+                            },
+                        }, placeholder: `${index + 1}번 선택지`, hintIcon: invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: error === null || error === void 0 ? void 0 : error.message, multiline: true, fullWidth: true, css: css `
+            flex: 1;
+          ` })] })), _jsxs("div", Object.assign({ css: css `
           display: flex;
           // 이미지가 들어가서 container height가 커져도 높이가 유지되도록 설정
           height: 36px;
           gap: 8px;
           align-items: center;
-        ` }, { children: [_jsx(SquareButton, { color: "icon", size: "xsmall", icon: watch(`selections.${index}.show.image`) ? (_jsx(ImageEditFillIcon, {})) : (_jsx(ImageAddFillIcon, {})), onClick: () => {
+        ` }, { children: [_jsx(SquareButton, { color: "icon", size: "xsmall", icon: value.image ? _jsx(ImageEditFillIcon, {}) : _jsx(ImageAddFillIcon, {}), onClick: () => {
                             setImageOpen(true);
                         } }), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete }))] }))] }));
 }
@@ -70,17 +75,3 @@ const Index = styled.div(({ theme }) => css `
     font-weight: 800;
     line-height: 16px;
   `);
-const Answer = styled.div(({ theme }) => css `
-    display: flex;
-    align-items: center;
-    padding-right: 4px;
-    gap: 8px;
-    color: ${theme.color.foreground.neutralBase};
-    cursor: pointer;
-    /* Default/Label/14px-Md */
-    font-family: ${theme.fontFamily.ui};
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 16px; /* 114.286% */
-  `);

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SettingForm/SettingForm.js

@@ -38,44 +38,32 @@ export function SettingForm(props) {
         });
         onClose();
     };
-    function validateRequiredSelection(index) {
-        const selections = watch("selections");
-        const selection = selections[index];
-        if (selection.show.image || selection.show.text)
+    function validateRequired(value) {
+        if (value.image || value.text)
             return true;
         return "필수 입력 항목입니다.";
     }
-    function validateDuplicatedSelection(index) {
-        const selections = watch("selections");
-        if (index === 0)
-            return true;
-        const image = selections[index].show.image;
-        const text = selections[index].show.text;
-        const duplicatedIndex = selections
-            .slice(0, index)
-            .findIndex((selection) => {
-            var _a;
-            // text를 비교하고, text가 같은 경우 image도 비교합니다.
-            if (selection.show.text !== text)
-                return false;
-            if (((_a = selection.show.image) === null || _a === void 0 ? void 0 : _a.src) !== (image === null || image === void 0 ? void 0 : image.src))
-                return false;
-            return true;
+    function validateDuplicated(value, formValues) {
+        const shows = formValues.selections.map((selection) => selection.show);
+        const duplicatedIndexes = shows.flatMap((show, i) => {
+            var _a, _b;
+            if (show.text === value.text && ((_a = show.image) === null || _a === void 0 ? void 0 : _a.src) === ((_b = value.image) === null || _b === void 0 ? void 0 : _b.src))
+                return [i];
+            return [];
         });
-        if (duplicatedIndex < 0)
+        if (duplicatedIndexes.length < 2)
             return true;
-        return `${duplicatedIndex + 1}번 선택지와 같은 내용입니다.`;
+        return `${duplicatedIndexes
+            .map((i) => i + 1)
+            .join(",")}번 선택지가 같은 내용입니다.`;
     }
     return (_jsxs(Form, Object.assign({ onSubmit: handleSubmit(onSettingSubmit) }, { children: [_jsxs(Title, { children: [_jsx(ListRadioIcon, { css: css `
             width: 12px;
             height: 12px;
-          ` }), "\uC120\uD0DD\uD615 \uC785\uB825 \uCE78"] }), _jsxs(Content, { children: [_jsxs(Left, { children: [_jsxs(FormArea, { children: [_jsx(Label, { children: "\uC120\uD0DD\uC9C0" }), fields.map((field, index) => (_jsx(FormSelection, { index: index, control: control, watch: watch, rules: {
-                                            validate: () => {
-                                                const required = validateRequiredSelection(index);
-                                                if (required !== true) {
-                                                    return required;
-                                                }
-                                                return validateDuplicatedSelection(index);
+          ` }), "\uC120\uD0DD\uD615 \uC785\uB825 \uCE78"] }), _jsxs(Content, { children: [_jsxs(Left, { children: [_jsxs(FormArea, { children: [_jsx(Label, { children: "\uC120\uD0DD\uC9C0" }), fields.map((field, index) => (_jsx(FormSelection, { index: index, control: control, rules: {
+                                            validate: {
+                                                validateRequired,
+                                                validateDuplicated,
                                             },
                                         }, onDelete: index !== 0
                                             ? () => {

package/package.json

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