@team-monolith/cds 1.119.2 → 1.119.3

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

@@ -18,86 +18,86 @@ export function Evaluation(props) {
                                 onChange(newEvaluations);
                             } })] }, index)))] }));
 }
-const Container = styled.div(({ onClick }) => css `
-    ${onClick && "cursor: pointer;"}
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    align-self: stretch;
+const Container = styled.div(({ onClick }) => css `
+    ${onClick && "cursor: pointer;"}
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    align-self: stretch;
   `);
-const Header = styled.div(({ theme }) => css `
-    border-bottom: 1px solid ${theme.color.background.neutralAltActive};
-    display: flex;
-    padding: 8px 0px;
-    justify-content: flex-end;
-    align-items: center;
-    gap: 8px;
-    align-self: stretch;
+const Header = styled.div(({ theme }) => css `
+    border-bottom: 1px solid ${theme.color.background.neutralAltActive};
+    display: flex;
+    padding: 8px 0px;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
   `);
-const LabelArea = styled.div `
-  display: flex;
-  width: ${TOGGLE_BUTTON_GROUP_WIDTH}px;
-  justify-content: space-between;
-  align-items: flex-start;
+const LabelArea = styled.div `
+  display: flex;
+  width: ${TOGGLE_BUTTON_GROUP_WIDTH}px;
+  justify-content: space-between;
+  align-items: flex-start;
 `;
-const Label = styled.span(({ theme }) => css `
-    color: ${theme.color.foreground.neutralBaseDisabled};
-    text-align: center;
-    /* Default/Label/12px-Md */
-    font-family: Pretendard;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 16px; /* 133.333% */
+const Label = styled.span(({ theme }) => css `
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    text-align: center;
+    /* Default/Label/12px-Md */
+    font-family: Pretendard;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; /* 133.333% */
   `);
-const Item = styled.div(({ theme }) => css `
-    display: flex;
-    padding: 4px 0px;
-    align-items: center;
-    gap: 8px;
-    align-self: stretch;
-    border-bottom: 1px solid ${theme.color.background.neutralAltActive};
+const Item = styled.div(({ theme }) => css `
+    display: flex;
+    padding: 4px 0px;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+    border-bottom: 1px solid ${theme.color.background.neutralAltActive};
   `);
-const Index = styled.div(({ theme }) => css `
-    display: flex;
-    width: 20px;
-    height: 20px;
-    padding: 4px;
-
-    user-select: none; /* Standard syntax */
-
-    border-radius: 4px;
-    background: ${theme.color.background.neutralBase};
-    border: 1px solid ${theme.color.background.neutralAltActive};
-
-    justify-content: center;
-    align-items: center;
-
-    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;
+    width: 20px;
+    height: 20px;
+    padding: 4px;
+
+    user-select: none; /* Standard syntax */
+
+    border-radius: 4px;
+    background: ${theme.color.background.neutralBase};
+    border: 1px solid ${theme.color.background.neutralAltActive};
+
+    justify-content: center;
+    align-items: center;
+
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    font-family: ${theme.fontFamily.ui};
+    font-size: 14px;
+    font-weight: 800;
+    line-height: 16px;
   `);
-const Question = styled.div(({ theme }) => css `
-    display: flex;
-    padding: 4px 8px;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    gap: 8px;
-    flex: 1 0 0;
-    align-self: stretch;
-
-    color: ${theme.color.foreground.neutralBase};
-    /* Default/Paragraph/16px-Rg */
-    font-family: ${theme.fontFamily.ui};
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 24px; /* 150% */
+const Question = styled.div(({ theme }) => css `
+    display: flex;
+    padding: 4px 8px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 8px;
+    flex: 1 0 0;
+    align-self: stretch;
+
+    color: ${theme.color.foreground.neutralBase};
+    /* Default/Paragraph/16px-Rg */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; /* 150% */
   `);
-const StyledToggleButtonGroup = styled(ToggleButtonGroup) `
-  flex: none;
-  width: ${TOGGLE_BUTTON_GROUP_WIDTH}px;
+const StyledToggleButtonGroup = styled(ToggleButtonGroup) `
+  flex: none;
+  width: ${TOGGLE_BUTTON_GROUP_WIDTH}px;
 `;

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

@@ -13,10 +13,10 @@ export function FormIconAndLabel(props) {
     const theme = useTheme();
     const { t } = useTranslation();
     return (_jsx(Controller, { control: control, name: "iconType", render: ({ field: { value, onChange } }) => {
-            const { startIcon, title, icons } = getIconData(value, theme);
+            const { startIcon, title, icons } = getIconData(value, theme, t);
             return (_jsxs(_Fragment, { children: [_jsx(Dropdown, { label: t("아이콘: {{title}}", { title }), size: "small", color: "grey", closeOnItemClick: true, bold: true, startIcon: startIcon, endIcon: _jsx(ArrowDownSFillIcon, {}), menuProps: {
-                            menuCss: css `
-                  width: 216px;
+                            menuCss: css `
+                  width: 216px;
                 `,
                             anchorOrigin: {
                                 vertical: "bottom",
@@ -27,27 +27,27 @@ export function FormIconAndLabel(props) {
                                 horizontal: "center",
                             },
                         }, children: ICON_TYPES.map((type, index) => {
-                            const { title, startIcon } = getIconData(type, theme);
+                            const { title, startIcon } = getIconData(type, theme, t);
                             return (_jsx(DropdownItem, { index: index, label: title, preserveIconColor: true, startIcon: startIcon, onClick: () => {
                                     onChange(type);
                                 } }, index));
                         }) }), Array.from({ length: labelsLength }).map((_, index) => (_jsxs(LabelLine, { children: [_jsx(Icon, { children: icons[index].onIcon }), _jsx(FormLabel, { control: control, index: index })] }, index)))] }));
         } }));
 }
-const LabelLine = styled.div `
-  display: flex;
-  align-items: flex-start;
-  gap: 4px;
-  align-self: stretch;
+const LabelLine = styled.div `
+  display: flex;
+  align-items: flex-start;
+  gap: 4px;
+  align-self: stretch;
 `;
-const Icon = styled.div(({ theme }) => css `
-    display: flex;
-    min-width: 36px;
-    min-height: 36px;
-    justify-content: center;
-    align-items: center;
-    gap: 10px;
-
-    border-radius: 8px;
-    border: 0.5px solid ${theme.color.background.neutralAltActive};
+const Icon = styled.div(({ theme }) => css `
+    display: flex;
+    min-width: 36px;
+    min-height: 36px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+
+    border-radius: 8px;
+    border: 0.5px solid ${theme.color.background.neutralAltActive};
   `);

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

@@ -4,14 +4,16 @@ import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 import { FormInput } from "../../../../../Form";
 import { getTexts } from "../../../../../../../../texts";
-const getLabelRules = () => ({
-    required: getTexts("errorRequiredField"),
+import { useTranslation } from "react-i18next";
+const getLabelRules = (t) => ({
+    required: getTexts(t, "errorRequiredField"),
     maxLength: 12,
 });
 /** 레이블을 설정하는 Form입니다. */
 export function FormLabel(props) {
     const { control, index } = props;
-    const labelRules = getLabelRules();
+    const { t } = useTranslation();
+    const labelRules = getLabelRules(t);
     // endIcon에 들어갈 value, error를 사용하기 위해 useController를 사용합니다.
     const { field: { value }, fieldState: { error }, } = useController({
         control,
@@ -20,13 +22,13 @@ export function FormLabel(props) {
     });
     return (_jsx(FormInput, { control: control, name: `labels.${index}`, rules: labelRules, size: "small", endIcon: _jsx(Counter, { error: Boolean(error), children: value.length + "/" + labelRules.maxLength }), fullWidth: true }));
 }
-const Counter = styled.span(({ theme, error }) => css `
+const Counter = styled.span(({ theme, error }) => css `
     color: ${error
     ? theme.color.foreground.dangerActive
-    : theme.color.foreground.neutralBase};
-    font-family: ${theme.fontFamily.ui};
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 20px; /* 142.857% */
+    : theme.color.foreground.neutralBase};
+    font-family: ${theme.fontFamily.ui};
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 20px; /* 142.857% */
   `);

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

@@ -10,38 +10,38 @@ export function FormQuestion(props) {
     const { control, index, onDelete } = props;
     const { t } = useTranslation();
     return (_jsxs(Item, { children: [_jsx(Index, { children: index + 1 }), _jsx(FormInput, { control: control, name: `evaluations.${index}.question.text`, rules: {
-                    required: getTexts("errorRequiredField"),
+                    required: getTexts(t, "errorRequiredField"),
                 }, size: "small", placeholder: t("{{index}}번 평가 항목", { index: index + 1 }), multiline: true, fullWidth: true }), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete, "aria-label": t("삭제", {
                     context: "스퀘어버튼, 렉시컬 3단계 평가 입력칸 도구 설정창",
                 }) }))] }));
 }
-const Item = styled.div(({ theme }) => css `
-    display: flex;
-    padding: 4px 12px;
-    align-items: center;
-    gap: 4px;
-    align-self: stretch;
-    border-radius: 8px;
-    background: ${theme.color.background.neutralAlt};
+const Item = styled.div(({ theme }) => css `
+    display: flex;
+    padding: 4px 12px;
+    align-items: center;
+    gap: 4px;
+    align-self: stretch;
+    border-radius: 8px;
+    background: ${theme.color.background.neutralAlt};
   `);
-const Index = styled.div(({ theme }) => css `
-    display: flex;
-    width: 20px;
-    height: 20px;
-    padding: 4px;
-
-    user-select: none; /* Standard syntax */
-
-    border-radius: 4px;
-    background: ${theme.color.background.neutralBase};
-    border: 1px solid ${theme.color.background.neutralAltActive};
-
-    justify-content: center;
-    align-items: center;
-
-    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;
+    width: 20px;
+    height: 20px;
+    padding: 4px;
+
+    user-select: none; /* Standard syntax */
+
+    border-radius: 4px;
+    background: ${theme.color.background.neutralBase};
+    border: 1px solid ${theme.color.background.neutralAltActive};
+
+    justify-content: center;
+    align-items: center;
+
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    font-family: ${theme.fontFamily.ui};
+    font-size: 14px;
+    font-weight: 800;
+    line-height: 16px;
   `);

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

@@ -41,73 +41,73 @@ 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;
           ` }), t("3단계 평가")] }), _jsxs(Content, { children: [_jsxs(Left, { children: [_jsx(Label, { children: t("평가 항목") }), fields.map((field, index) => (_jsx(FormQuestion, { index: index, control: control, onDelete: index !== 0
                                     ? () => {
                                         remove(index);
                                     }
                                     : undefined }, field.uid))), _jsx(Button, { color: "grey", size: "small", startIcon: _jsx(AddFillIcon, {}), label: t("평가 항목 추가"), onClick: () => {
                                     append({
-                                        question: { text: getTexts("placeholderEvaluationItem") },
+                                        question: { text: getTexts(t, "placeholderEvaluationItem") },
                                         selectedLabelIndex: null,
                                     });
                                 } })] }), _jsxs(Right, { children: [_jsx(Label, { children: t("아이콘, 레이블") }), _jsx(FormIconAndLabel, { control: control, labelsLength: labels.length })] })] }), _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "xsmall", label: t("닫기", { context: "렉시컬 도구 설정창" }), onClick: onClose }), _jsx(Button, { color: "primary", size: "xsmall", label: t("이대로 넣기", { context: "렉시컬 도구 설정창" }), 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

@@ -23,7 +23,7 @@ export function EvaluationComponent(props) {
     const { freezeProblemNode } = useContext(LexicalCustomConfigContext);
     const { t } = useTranslation();
     const [settingOpen, setSettingOpen] = useState(false);
-    const { icons } = getIconData(iconType, theme);
+    const { icons } = getIconData(iconType, theme, t);
     // label과 icons를 매핑하여 ToggelButtonData로 변환합니다.
     // 만약 둘의 길이가 같지 않다면 짧은 길이에 맞춰집니다.
     const data = _.zipWith(labels, icons, (label, { onIcon, offIcon }) => ({
@@ -46,14 +46,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": t("평가 칸 설정") })] }), settingOpen && (_jsx(SettingForm, { css: css `
-            width: ${EVALUATION_EDIT_WIDTH}px;
+                        }, "aria-label": t("평가 칸 설정") })] }), 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/SelfEvaluationNode/iconData.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { IconType } from "./SelfEvaluationNode";
 import { Theme } from "@emotion/react";
+import { TFunction } from "i18next";
 interface IconData {
     startIcon: React.ReactNode;
     title: string;
@@ -10,5 +11,5 @@ interface IconData {
     }[];
 }
 export declare const ICON_TYPES: IconType[];
-export declare const getIconData: (iconType: IconType, theme: Theme) => IconData;
+export declare const getIconData: (iconType: IconType, theme: Theme, t: TFunction) => IconData;
 export {};

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

@@ -2,16 +2,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { CustomEmoGoodIcon, CustomEmoGreatIcon, CustomEmoNeutralIcon, } from "../../../../icons/custom/default";
 import { CustomEmoGoodColorIcon, CustomEmoGreatColorIcon, CustomEmoNeutralColorIcon, } from "../../../../icons/custom/colored";
 import { Number1Icon, Number2Icon, Number3Icon } from "../../../../icons";
-import { i18n } from "../../../../i18n/i18n";
 export const ICON_TYPES = [
     "emoji",
     "ascendingNumber",
     "descendingNumber",
 ];
-export const getIconData = (iconType, theme) => ({
+export const getIconData = (iconType, theme, t) => ({
     emoji: {
         startIcon: _jsx(CustomEmoGreatColorIcon, {}),
-        title: i18n.t("이모지"),
+        title: t("이모지"),
         icons: [
             {
                 onIcon: _jsx(CustomEmoGreatColorIcon, {}),
@@ -26,7 +25,7 @@ export const getIconData = (iconType, theme) => ({
     },
     ascendingNumber: {
         startIcon: _jsx(Number1Icon, {}),
-        title: i18n.t("숫자, 1-2-3"),
+        title: t("숫자, 1-2-3"),
         icons: [
             {
                 onIcon: _jsx(Number1Icon, { color: theme.color.background.primary }),
@@ -44,7 +43,7 @@ export const getIconData = (iconType, theme) => ({
     },
     descendingNumber: {
         startIcon: _jsx(Number3Icon, {}),
-        title: i18n.t("숫자, 3-2-1"),
+        title: t("숫자, 3-2-1"),
         icons: [
             {
                 onIcon: _jsx(Number3Icon, { color: theme.color.background.primary }),

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

@@ -40,46 +40,46 @@ 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 }
                 : {
                     onFocus: () => setFocus(true),
                     onBlur: () => setFocus(false),
-                }, size: "small", color: focus ? "activePrimary" : "default", placeholder: placeholder || getTexts("placeholderEnterHere"), value: valueInput, onChange: (e) => {
+                }, size: "small", color: focus ? "activePrimary" : "default", placeholder: placeholder || getTexts(t, "placeholderEnterHere"), value: valueInput, onChange: (e) => {
                 handleChange(e.target.value);
             }, 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
                             ? t("서술형 입력 칸", { context: "렉시컬 단답형/서술형 도구" })
                             : t("단답형 입력 칸", { context: "렉시컬 단답형/서술형 도구" }) }), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => setSettingOpen((open) => !open), "aria-label": t("입력 칸 설정", {
                             context: "렉시컬 단답형/서술형 도구",
                         }) })] }), 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% */
   `);