@team-monolith/cds 1.112.1 → 1.113.0

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/SettingForm.js

@@ -38,9 +38,9 @@ export function SettingForm(props) {
         });
         onClose();
     };
-    return (_jsxs(Form, { className: className, onSubmit: handleSubmit(onSubmit), children: [_jsxs(Title, { children: [_jsx(EmojiStickerLineIcon, { css: css `
-            width: 12px;
-            height: 12px;
+    return (_jsxs(Form, { className: className, onSubmit: handleSubmit(onSubmit), children: [_jsxs(Title, { children: [_jsx(EmojiStickerLineIcon, { css: css `
+            width: 12px;
+            height: 12px;
           ` }), "3\uB2E8\uACC4 \uD3C9\uAC00"] }), _jsxs(Content, { children: [_jsxs(Left, { children: [_jsx(Label, { children: "\uD3C9\uAC00 \uD56D\uBAA9" }), fields.map((field, index) => (_jsx(FormQuestion, { index: index, control: control, onDelete: index !== 0
                                     ? () => {
                                         remove(index);
@@ -52,59 +52,59 @@ export function SettingForm(props) {
                                     });
                                 } })] }), _jsxs(Right, { children: [_jsx(Label, { children: "\uC544\uC774\uCF58, \uB808\uC774\uBE14" }), _jsx(FormIconAndLabel, { control: control, labelsLength: labels.length })] })] }), _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "xsmall", label: "\uB2EB\uAE30", onClick: onClose }), _jsx(Button, { color: "primary", size: "xsmall", label: "\uC774\uB300\uB85C \uB123\uAE30", bold: true, type: "submit" })] })] }));
 }
-const Form = styled.form(({ theme }) => css `
-    display: flex;
-    flex-direction: column;
-    border-radius: 6px;
-    border: 1px solid ${theme.color.background.neutralAltActive};
-    background: ${theme.color.background.neutralBase};
-    box-shadow: ${shadows.shadow08};
+const Form = styled.form(({ theme }) => css `
+    display: flex;
+    flex-direction: column;
+    border-radius: 6px;
+    border: 1px solid ${theme.color.background.neutralAltActive};
+    background: ${theme.color.background.neutralBase};
+    box-shadow: ${shadows.shadow08};
   `);
-const Title = styled.div(({ theme }) => css `
-    display: flex;
-    padding: 8px 12px;
-    gap: 4px;
-    align-items: center;
-    color: ${theme.color.foreground.neutralBase};
-    /* Default/Label/12px-Md */
-    font-family: ${theme.fontFamily.ui};
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 16px; /* 133.333% */
+const Title = styled.div(({ theme }) => css `
+    display: flex;
+    padding: 8px 12px;
+    gap: 4px;
+    align-items: center;
+    color: ${theme.color.foreground.neutralBase};
+    /* Default/Label/12px-Md */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; /* 133.333% */
   `);
-const Content = styled.div(({ theme }) => css `
-    display: flex;
-    border-top: 1px solid ${theme.color.background.neutralAltActive};
-    border-bottom: 1px solid ${theme.color.background.neutralAltActive};
+const Content = styled.div(({ theme }) => css `
+    display: flex;
+    border-top: 1px solid ${theme.color.background.neutralAltActive};
+    border-bottom: 1px solid ${theme.color.background.neutralAltActive};
   `);
-const Left = styled.div `
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 12px;
+const Left = styled.div `
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
 `;
-const Right = styled.div `
-  width: 240px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 12px;
+const Right = styled.div `
+  width: 240px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
 `;
-const Label = styled.div(({ theme }) => css `
-    color: ${theme.color.foreground.neutralBaseDisabled};
-    /* Default/Label/12px-Md */
-    font-family: ${theme.fontFamily.ui};
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 16px; /* 133.333% */
+const Label = styled.div(({ theme }) => css `
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    /* Default/Label/12px-Md */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; /* 133.333% */
   `);
-const Buttons = styled.div `
-  display: flex;
-  padding: 12px;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 8px;
+const Buttons = styled.div `
+  display: flex;
+  padding: 12px;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
 `;

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/EvaluationComponent.js

@@ -44,14 +44,14 @@ export function EvaluationComponent(props) {
                 } }));
     }
     // edit
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { css: css `
-          display: flex;
-          gap: 4px;
-        `, children: [_jsx(Evaluation, { css: css `
-            width: ${EVALUATION_EDIT_WIDTH}px;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { css: css `
+          display: flex;
+          gap: 4px;
+        `, children: [_jsx(Evaluation, { css: css `
+            width: ${EVALUATION_EDIT_WIDTH}px;
           `, data: data, evaluations: evaluations, onClick: () => setSettingOpen((open) => !open) }), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
                             setSettingOpen((open) => !open);
-                        }, "aria-label": "\uD3C9\uAC00 \uCE78 \uC124\uC815" })] }), settingOpen && (_jsx(SettingForm, { css: css `
-            width: ${EVALUATION_EDIT_WIDTH}px;
+                        }, "aria-label": "\uD3C9\uAC00 \uCE78 \uC124\uC815" })] }), settingOpen && (_jsx(SettingForm, { css: css `
+            width: ${EVALUATION_EDIT_WIDTH}px;
           `, iconType: iconType, labels: labels, evaluations: evaluations, nodeKey: nodeKey, onClose: () => setSettingOpen(false) }))] }));
 }

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

@@ -37,10 +37,10 @@ export function InputComponent(props) {
     };
     // view
     if (!isEditable) {
-        return (_jsx(Input, { multiline: multiline, disableAutosize: true, css: css `
-          textarea {
-            height: ${TEXTAREA_HEIGHT}px;
-          }
+        return (_jsx(Input, { multiline: multiline, disableAutosize: true, css: css `
+          textarea {
+            height: ${TEXTAREA_HEIGHT}px;
+          }
         `, inputProps: freezeProblemNode
                 ? { readOnly: true }
                 : {
@@ -51,28 +51,28 @@ export function InputComponent(props) {
             }, fullWidth: true }));
     }
     // edit
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { css: css `
-          display: flex;
-          align-items: center;
-          gap: 4px;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { css: css `
+          display: flex;
+          align-items: center;
+          gap: 4px;
         `, children: [_jsx(VirtualInput, { onClick: () => setSettingOpen((open) => !open), css: multiline &&
-                            css `
-              height: ${TEXTAREA_HEIGHT + 2 * INPUT_VERTICAL_PADDING}px;
+                            css `
+              height: ${TEXTAREA_HEIGHT + 2 * INPUT_VERTICAL_PADDING}px;
             `, children: multiline ? "서술형 입력 칸" : "단답형 입력 칸" }), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => setSettingOpen((open) => !open), "aria-label": "\uC785\uB825 \uCE78 \uC124\uC815" })] }), settingOpen && (_jsx(SettingForm, { multiline: multiline, placeholder: placeholder, nodeKey: nodeKey, onClose: () => setSettingOpen(false) }))] }));
 }
-const VirtualInput = styled.div(({ theme }) => css `
-    box-sizing: border-box;
-    height: 36px;
-    width: 400px;
-    padding: ${INPUT_VERTICAL_PADDING}px 16px;
-    align-items: center;
-    border-radius: 8px;
-    background: ${theme.color.background.neutralAlt};
-    cursor: pointer;
-    color: ${theme.color.foreground.neutralBaseDisabled};
-    font-family: ${theme.fontFamily.ui};
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px; /* 142.857% */
+const VirtualInput = styled.div(({ theme }) => css `
+    box-sizing: border-box;
+    height: 36px;
+    width: 400px;
+    padding: ${INPUT_VERTICAL_PADDING}px 16px;
+    align-items: center;
+    border-radius: 8px;
+    background: ${theme.color.background.neutralAlt};
+    cursor: pointer;
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    font-family: ${theme.fontFamily.ui};
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px; /* 142.857% */
   `);

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

@@ -28,64 +28,64 @@ export function SettingForm(props) {
         });
         onClose();
     };
-    return (_jsxs(Form, { onSubmit: handleSubmit(onSettingSubmit), children: [_jsxs(Title, { children: [_jsx(InputMethodLineIcon, { css: css `
-            width: 12px;
-            height: 12px;
-          ` }), multiline ? "서술형 입력 칸" : "단답형 입력 칸"] }), _jsx(Content, { children: _jsxs(FormArea, { children: [_jsxs(Label, { children: ["\uC790\uB9AC \uD45C\uC2DC\uC790", _jsx(Tooltip, { text: _jsx("span", { children: "\uC785\uB825 \uCE78\uC5D0 \uAE30\uBCF8\uC73C\uB85C \uB178\uCD9C\uB418\uB294 \uD14D\uC2A4\uD2B8\uC785\uB2C8\uB2E4." }), placement: "top", children: _jsx(QuestionFillIcon, { css: css `
-                  width: 12px;
-                  height: 12px;
+    return (_jsxs(Form, { onSubmit: handleSubmit(onSettingSubmit), children: [_jsxs(Title, { children: [_jsx(InputMethodLineIcon, { css: css `
+            width: 12px;
+            height: 12px;
+          ` }), multiline ? "서술형 입력 칸" : "단답형 입력 칸"] }), _jsx(Content, { children: _jsxs(FormArea, { children: [_jsxs(Label, { children: ["\uC790\uB9AC \uD45C\uC2DC\uC790", _jsx(Tooltip, { text: _jsx("span", { children: "\uC785\uB825 \uCE78\uC5D0 \uAE30\uBCF8\uC73C\uB85C \uB178\uCD9C\uB418\uB294 \uD14D\uC2A4\uD2B8\uC785\uB2C8\uB2E4." }), placement: "top", children: _jsx(QuestionFillIcon, { css: css `
+                  width: 12px;
+                  height: 12px;
                 ` }) })] }), _jsx(Controller, { name: "placeholder", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { size: "small", color: "default", value: value, onChange: onChange, placeholder: "\uC608) \uC5EC\uAE30\uC5D0 \uC785\uB825\uD558\uC138\uC694." })) })] }) }), _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "xsmall", label: "\uB2EB\uAE30", onClick: onClose }), _jsx(Button, { color: "primary", size: "xsmall", label: "\uC774\uB300\uB85C \uB123\uAE30", bold: true, type: "submit" })] })] }));
 }
-const Form = styled.form(({ theme }) => css `
-    display: flex;
-    width: 620px;
-    flex-direction: column;
-    border-radius: 6px;
-    border: 1px solid ${theme.color.background.neutralAltActive};
-    background: ${theme.color.background.neutralBase};
-    box-shadow: ${shadows.shadow08};
+const Form = styled.form(({ theme }) => css `
+    display: flex;
+    width: 620px;
+    flex-direction: column;
+    border-radius: 6px;
+    border: 1px solid ${theme.color.background.neutralAltActive};
+    background: ${theme.color.background.neutralBase};
+    box-shadow: ${shadows.shadow08};
   `);
-const Title = styled.div(({ theme }) => css `
-    display: flex;
-    padding: 8px 12px;
-    gap: 4px;
-    align-items: center;
-    color: ${theme.color.foreground.neutralBase};
-    /* Default/Label/12px-Md */
-    font-family: ${theme.fontFamily.ui};
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 16px; /* 133.333% */
+const Title = styled.div(({ theme }) => css `
+    display: flex;
+    padding: 8px 12px;
+    gap: 4px;
+    align-items: center;
+    color: ${theme.color.foreground.neutralBase};
+    /* Default/Label/12px-Md */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; /* 133.333% */
   `);
-const Content = styled.div(({ theme }) => css `
-    display: flex;
-    border-top: 1px solid ${theme.color.background.neutralAltActive};
-    border-bottom: 1px solid ${theme.color.background.neutralAltActive};
+const Content = styled.div(({ theme }) => css `
+    display: flex;
+    border-top: 1px solid ${theme.color.background.neutralAltActive};
+    border-bottom: 1px solid ${theme.color.background.neutralAltActive};
   `);
-const FormArea = styled.div `
-  width: 240px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 12px;
+const FormArea = styled.div `
+  width: 240px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
 `;
-const Label = styled.div(({ theme }) => css `
-    display: flex;
-    gap: 4px;
-    align-items: center;
-    color: ${theme.color.foreground.neutralBaseDisabled};
-    /* Default/Label/12px-Md */
-    font-family: ${theme.fontFamily.ui};
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 16px; /* 133.333% */
+const Label = styled.div(({ theme }) => css `
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    /* Default/Label/12px-Md */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; /* 133.333% */
   `);
-const Buttons = styled.div `
-  display: flex;
-  padding: 12px;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 8px;
+const Buttons = styled.div `
+  display: flex;
+  padding: 12px;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
 `;

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

@@ -20,73 +20,73 @@ export const selectBoxClasses = {
     content: "SheetSelectNode-SelectBox-content",
 };
 const TYPE_TO_CONTAINER_STYLE = (theme, type) => ({
-    primary: css `
-      background: ${theme.color.container.blueContainer};
-      border: 1px solid ${theme.color.foreground.primary};
-      color: ${theme.color.container.blueOnContainer};
+    primary: css `
+      background: ${theme.color.container.blueContainer};
+      border: 1px solid ${theme.color.foreground.primary};
+      color: ${theme.color.container.blueOnContainer};
     `,
-    normal: css `
-      background: ${theme.color.background.neutralAlt};
-      border: 1px solid transparent;
-      color: ${theme.color.foreground.neutralBase};
+    normal: css `
+      background: ${theme.color.background.neutralAlt};
+      border: 1px solid transparent;
+      color: ${theme.color.foreground.neutralBase};
     `,
 })[type];
 const TYPE_TO_INDEX_STYLE = (theme, type) => ({
-    primary: css `
-      background: ${theme.color.background.primary};
-      border: 1px solid ${theme.color.background.primary};
-      color: ${theme.color.foreground.neutralAlt};
+    primary: css `
+      background: ${theme.color.background.primary};
+      border: 1px solid ${theme.color.background.primary};
+      color: ${theme.color.foreground.neutralAlt};
     `,
-    normal: css `
-      background: ${theme.color.background.neutralBase};
-      border: 1px solid ${theme.color.background.neutralAltActive};
-      color: ${theme.color.foreground.neutralBaseDisabled};
+    normal: css `
+      background: ${theme.color.background.neutralBase};
+      border: 1px solid ${theme.color.background.neutralAltActive};
+      color: ${theme.color.foreground.neutralBaseDisabled};
     `,
 })[type];
 /** 비지니스 로직과 무관한 SelectBox를 그리는 공통 컴포넌트입니다. */
 export const SelectBoxComponent = forwardRef(function SelectBoxComponent(props, ref) {
     const { className, type, index, image, text, onClick } = props, restProps = __rest(props, ["className", "type", "index", "image", "text", "onClick"]);
     const theme = useTheme();
-    return (_jsxs(Container, Object.assign({ className: `${className} ${selectBoxClasses.container}`, ref: ref }, restProps, { css: TYPE_TO_CONTAINER_STYLE(theme, type), onClick: onClick, children: [_jsx(Index, { className: selectBoxClasses.index, "aria-hidden": "true", css: TYPE_TO_INDEX_STYLE(theme, type), children: index }), _jsxs(Content, { className: selectBoxClasses.content, "aria-hidden": "true", children: [image && (_jsx("img", { "aria-hidden": "true", src: image.src, alt: image.altText, css: css `
-              height: auto;
-              // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
-              max-width: 100%;
-              width: fit-content;
-              border-radius: 6px;
+    return (_jsxs(Container, Object.assign({ className: `${className} ${selectBoxClasses.container}`, ref: ref }, restProps, { css: TYPE_TO_CONTAINER_STYLE(theme, type), onClick: onClick, children: [_jsx(Index, { className: selectBoxClasses.index, "aria-hidden": "true", css: TYPE_TO_INDEX_STYLE(theme, type), children: index }), _jsxs(Content, { className: selectBoxClasses.content, "aria-hidden": "true", children: [image && (_jsx("img", { "aria-hidden": "true", src: image.src, alt: image.altText, css: css `
+              height: auto;
+              // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
+              max-width: 100%;
+              width: fit-content;
+              border-radius: 6px;
             ` })), text] })] })));
 });
-const Container = styled.div(({ onClick }) => css `
-    ${onClick && "cursor: pointer;"}
-    display: flex;
-    width: 400px;
-    padding: 12px;
-    gap: 12px;
-    border-radius: 8px;
+const Container = styled.div(({ onClick }) => css `
+    ${onClick && "cursor: pointer;"}
+    display: flex;
+    width: 400px;
+    padding: 12px;
+    gap: 12px;
+    border-radius: 8px;
   `);
-const Index = styled.div(({ theme }) => css `
-    display: flex;
-    box-sizing: border-box;
-    width: 20px;
-    height: 20px;
-    padding: 4px;
-
-    user-select: none; /* Standard syntax */
-
-    justify-content: center;
-    align-items: center;
-    border-radius: 4px;
-    font-family: ${theme.fontFamily.ui};
-    font-size: 14px;
-    font-weight: 800;
-    line-height: 16px;
+const Index = styled.div(({ theme }) => css `
+    display: flex;
+    box-sizing: border-box;
+    width: 20px;
+    height: 20px;
+    padding: 4px;
+
+    user-select: none; /* Standard syntax */
+
+    justify-content: center;
+    align-items: center;
+    border-radius: 4px;
+    font-family: ${theme.fontFamily.ui};
+    font-size: 14px;
+    font-weight: 800;
+    line-height: 16px;
   `);
-const Content = styled.div(({ theme }) => css `
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    flex: 1;
-    font-family: ${theme.fontFamily.ui};
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 20px;
+const Content = styled.div(({ theme }) => css `
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    flex: 1;
+    font-family: ${theme.fontFamily.ui};
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 20px;
   `);

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

@@ -7,9 +7,9 @@ import { useRef } from "react";
 import { useEventListener } from "usehooks-ts";
 function getIndexIcon(type, index) {
     return {
-        primary: (_jsx(CheckFillIcon, { css: css `
-          width: 12px;
-          height: 12px;
+        primary: (_jsx(CheckFillIcon, { css: css `
+          width: 12px;
+          height: 12px;
         ` })),
         normal: index,
     }[type];
@@ -37,7 +37,7 @@ export function SelectBoxView(props) {
     useEventListener("keydown", handleKeyDown);
     // text가 있으면 text, 없으면 image의 altText, 없으면 index를 aria-label로 사용
     const ariaText = text || (image && image.altText) || index.toString() + "번 선택지";
-    return (_jsx(SelectBoxComponent, { css: css `
-        width: 100%;
+    return (_jsx(SelectBoxComponent, { css: css `
+        width: 100%;
       `, ref: boxRef, role: onClick ? "checkbox" : undefined, "aria-checked": isSelected, "aria-label": onClick ? ariaText + (isSelected ? " 선택됨" : " 선택하기") : ariaText, tabIndex: onClick ? 0 : -1, type: selectBoxType, index: getIndexIcon(selectBoxType, index), image: image, text: text, onClick: onClick }));
 }

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

@@ -20,9 +20,9 @@ export function SelectComponent(props) {
     const { freezeProblemNode } = useContext(LexicalCustomConfigContext);
     // view
     if (!isEditable) {
-        return (_jsxs(_Fragment, { children: [allowMultipleAnswers && (_jsxs(Alert, { children: [_jsx(AlarmWarningFillIcon, { css: css `
-                width: 14px;
-                height: 14px;
+        return (_jsxs(_Fragment, { children: [allowMultipleAnswers && (_jsxs(Alert, { children: [_jsx(AlarmWarningFillIcon, { css: css `
+                width: 14px;
+                height: 14px;
               ` }), "\uC9C8\uBB38\uC5D0 \uD574\uB2F9\uD558\uB294 \uB2F5\uC744 \uBAA8\uB450 \uACE0\uB974\uB294 \uBB38\uD56D\uC785\uB2C8\uB2E4."] })), selections.map((selection, index) => (_jsx(SelectBoxView, { index: index + 1, isSelected: selected.includes(selection.value), image: selection.show.image, text: selection.show.text, onClick: freezeProblemNode
                         ? undefined
                         : () => {
@@ -53,13 +53,13 @@ export function SelectComponent(props) {
                         } }, index)))] }));
     }
     // edit
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { css: css `
-          display: flex;
-          gap: 4px;
-        `, children: [_jsx("div", { css: css `
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { css: css `
+          display: flex;
+          gap: 4px;
+        `, children: [_jsx("div", { css: css `
+            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}번 선택지`
                                 : selection.show.text, onClick: () => setSettingOpen((open) => !open) }, index))) }), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
@@ -69,15 +69,15 @@ export function SelectComponent(props) {
                     allowMultipleAnswers,
                 }, nodeKey: nodeKey, onClose: () => setSettingOpen(false) }))] }));
 }
-const Alert = styled.div(({ theme }) => css `
-    display: flex;
-    gap: 4px;
-    margin-bottom: 12px;
-    color: ${theme.color.foreground.neutralBaseDisabled};
-    /* Default/Label/12px-Md */
-    font-family: ${theme.fontFamily.ui};
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 16px; /* 133.333% */
+const Alert = styled.div(({ theme }) => css `
+    display: flex;
+    gap: 4px;
+    margin-bottom: 12px;
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    /* Default/Label/12px-Md */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; /* 133.333% */
   `);

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

@@ -17,21 +17,21 @@ export function FormSelection(props) {
         name: `selections.${index}.show`,
         rules,
     });
-    return (_jsxs(Container, { children: [_jsx(Index, { children: index + 1 }), _jsxs("div", { css: css `
-          display: flex;
-          flex: 1;
-          flex-direction: column;
-          gap: 4px;
+    return (_jsxs(Container, { children: [_jsx(Index, { children: index + 1 }), _jsxs("div", { css: css `
+          display: flex;
+          flex: 1;
+          flex-direction: column;
+          gap: 4px;
         `, children: [_jsx(InsertImageDialog, { title: value.image ? "이미지 바꾸기" : "이미지 삽입하기", open: imageOpen, imageProps: (_a = value.image) !== null && _a !== void 0 ? _a : undefined, onClose: () => setImageOpen(false), onChange: (props) => onChange(Object.assign(Object.assign({}, value), { image: props })), onDelete: value.image
                             ? () => {
                                 onChange(Object.assign(Object.assign({}, value), { image: null }));
                             }
-                            : undefined }), 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;
+                            : undefined }), 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
@@ -43,40 +43,40 @@ export function FormSelection(props) {
                             onBlur: () => {
                                 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", { css: css `
-          display: flex;
-          // 이미지가 들어가서 container height가 커져도 높이가 유지되도록 설정
-          height: 36px;
-          gap: 8px;
-          align-items: center;
+                        }, 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", { css: css `
+          display: flex;
+          // 이미지가 들어가서 container height가 커져도 높이가 유지되도록 설정
+          height: 36px;
+          gap: 8px;
+          align-items: center;
         `, children: [_jsx(SquareButton, { color: "icon", size: "xsmall", icon: value.image ? _jsx(ImageEditFillIcon, {}) : _jsx(ImageAddFillIcon, {}), onClick: () => {
                             setImageOpen(true);
                         }, "aria-label": value.image ? "이미지 바꾸기" : "이미지 삽입하기" }), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete, "aria-label": "\uC0AD\uC81C" }))] })] }));
 }
-const Container = styled.div(({ theme }) => css `
-    display: flex;
-    padding: 4px 12px;
-    gap: 8px;
-    border-radius: 8px;
-    background: ${theme.color.background.neutralAlt};
+const Container = styled.div(({ theme }) => css `
+    display: flex;
+    padding: 4px 12px;
+    gap: 8px;
+    border-radius: 8px;
+    background: ${theme.color.background.neutralAlt};
   `);
-const Index = styled.div(({ theme }) => css `
-    display: flex;
-    box-sizing: border-box;
-    width: 20px;
-    height: 20px;
-    padding: 4px;
-    margin-top: 8px;
-    justify-content: center;
-    align-items: center;
-    border-radius: 4px;
-    border: 1px solid ${theme.color.background.neutralAltActive};
-    background: ${theme.color.background.neutralBase};
-    color: ${theme.color.foreground.neutralBaseDisabled};
-    font-family: ${theme.fontFamily.ui};
-    font-size: 14px;
-    font-weight: 800;
-    line-height: 16px;
+const Index = styled.div(({ theme }) => css `
+    display: flex;
+    box-sizing: border-box;
+    width: 20px;
+    height: 20px;
+    padding: 4px;
+    margin-top: 8px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 4px;
+    border: 1px solid ${theme.color.background.neutralAltActive};
+    background: ${theme.color.background.neutralBase};
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    font-family: ${theme.fontFamily.ui};
+    font-size: 14px;
+    font-weight: 800;
+    line-height: 16px;
   `);