@team-monolith/cds 1.125.0 → 1.126.0

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

@@ -174,64 +174,64 @@ export function ImageResizer({ onResizeStart, onResizeEnd, buttonRef, imageRef,
                     handlePointerDown(event, Direction.north | Direction.west);
                 } })] }));
 }
-const Container = styled.div `
-  &.image-control-wrapper--resizing {
-    touch-action: none;
-  }
-  .image-resizer {
-    display: block;
-    width: 7px;
-    height: 7px;
-    position: absolute;
-    background-color: rgb(60, 132, 244);
-    border: 1px solid #fff;
-  }
-
-  .image-resizer.image-resizer-n {
-    top: -6px;
-    left: 48%;
-    cursor: n-resize;
-  }
-
-  .image-resizer.image-resizer-ne {
-    top: -6px;
-    right: -6px;
-    cursor: ne-resize;
-  }
-
-  .image-resizer.image-resizer-e {
-    bottom: 48%;
-    right: -6px;
-    cursor: e-resize;
-  }
-
-  .image-resizer.image-resizer-se {
-    bottom: -2px;
-    right: -6px;
-    cursor: nwse-resize;
-  }
-
-  .image-resizer.image-resizer-s {
-    bottom: -2px;
-    left: 48%;
-    cursor: s-resize;
-  }
-
-  .image-resizer.image-resizer-sw {
-    bottom: -2px;
-    left: -6px;
-    cursor: sw-resize;
-  }
-
-  .image-resizer.image-resizer-w {
-    bottom: 48%;
-    left: -6px;
-    cursor: w-resize;
-  }
-
-  .image-resizer.image-resizer-nw {
-    top: -6px;
-    left: -6px;
-    cursor: nw-resize;
-  }
+const Container = styled.div `
+  &.image-control-wrapper--resizing {
+    touch-action: none;
+  }
+  .image-resizer {
+    display: block;
+    width: 7px;
+    height: 7px;
+    position: absolute;
+    background-color: rgb(60, 132, 244);
+    border: 1px solid #fff;
+  }
+
+  .image-resizer.image-resizer-n {
+    top: -6px;
+    left: 48%;
+    cursor: n-resize;
+  }
+
+  .image-resizer.image-resizer-ne {
+    top: -6px;
+    right: -6px;
+    cursor: ne-resize;
+  }
+
+  .image-resizer.image-resizer-e {
+    bottom: 48%;
+    right: -6px;
+    cursor: e-resize;
+  }
+
+  .image-resizer.image-resizer-se {
+    bottom: -2px;
+    right: -6px;
+    cursor: nwse-resize;
+  }
+
+  .image-resizer.image-resizer-s {
+    bottom: -2px;
+    left: 48%;
+    cursor: s-resize;
+  }
+
+  .image-resizer.image-resizer-sw {
+    bottom: -2px;
+    left: -6px;
+    cursor: sw-resize;
+  }
+
+  .image-resizer.image-resizer-w {
+    bottom: 48%;
+    left: -6px;
+    cursor: w-resize;
+  }
+
+  .image-resizer.image-resizer-nw {
+    top: -6px;
+    left: -6px;
+    cursor: nw-resize;
+  }
 `;

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

@@ -61,27 +61,27 @@ export function InputComponent(props) {
             }, fullWidth: true }));
     }
     // 교사 edit view
-    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(true), children: t("주관식 입력 칸", { context: "렉시컬 주관식 입력 도구" }) }), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
                             setSettingOpen(true);
                         }, "aria-label": t("입력 칸 설정", { context: "렉시컬 주관식 입력 도구" }) })] }), settingOpen && (_jsx(SettingForm, Object.assign({}, settingFormProps, { onClose: () => setSettingOpen(false) })))] }));
 }
-const VirtualInput = styled.div(({ theme }) => css `
-    box-sizing: border-box;
-    height: 36px;
-    width: 300px;
-    padding: 8px 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: 300px;
+    padding: 8px 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/ProblemInputNode/SegmentedInput.js

@@ -91,13 +91,13 @@ export function SegmentedInput(props) {
                     setIsHiddenInputFocused(false);
                     onChange(getFormattedValue(e.target.value).slice(0, answerFormat.length));
                     setIsComposing(false);
-                }, css: css `
-          opacity: 0;
-          height: 0;
-        ` }), _jsxs(InputWrapper, { children: [_jsx("div", { css: css `
-            display: flex;
-            align-items: center;
-            gap: 4px;
+                }, css: css `
+          opacity: 0;
+          height: 0;
+        ` }), _jsxs(InputWrapper, { children: [_jsx("div", { css: css `
+            display: flex;
+            align-items: center;
+            gap: 4px;
           `, children: despacedFormat.map((_format, i) => (_jsx(SquareInput, { leftSpaced: leftSpacedIndexs.includes(i), size: "small", color: isCorrect === true
                                 ? "activeSuccess"
                                 : isCorrect === false
@@ -105,10 +105,10 @@ export function SegmentedInput(props) {
                                     : isHiddenInputFocused && isSelectedSquareInputIndex(i)
                                         ? "activePrimary"
                                         : "default", css: isCorrect === false &&
-                                css `
-                  input {
-                    color: ${theme.color.foreground.danger};
-                  }
+                                css `
+                  input {
+                    color: ${theme.color.foreground.danger};
+                  }
                 `, inputProps: {
                                 readOnly,
                                 tabIndex: -1,
@@ -124,47 +124,47 @@ export function SegmentedInput(props) {
                                 },
                             }, value: splitedValues[i] || "", onChange: () => { } }, i))) }), _jsx(InputMarker, {})] }), _jsx(Text, { children: placeholder })] }));
 }
-const Container = styled.div `
-  display: flex;
-  width: fit-content;
-  flex-direction: column;
-  justify-content: center;
-  gap: 8px;
+const Container = styled.div `
+  display: flex;
+  width: fit-content;
+  flex-direction: column;
+  justify-content: center;
+  gap: 8px;
 `;
-const InputWrapper = styled.div `
-  display: flex;
-  width: fit-content;
-  flex-direction: column;
-  gap: 8px;
-  margin: auto;
+const InputWrapper = styled.div `
+  display: flex;
+  width: fit-content;
+  flex-direction: column;
+  gap: 8px;
+  margin: auto;
 `;
-const SquareInput = styled(InputBase)(({ leftSpaced }) => css `
-    width: 36px;
-    height: 36px;
-    padding-left: 0;
-    padding-right: 0;
-    input {
-      text-align: center;
-    }
+const SquareInput = styled(InputBase)(({ leftSpaced }) => css `
+    width: 36px;
+    height: 36px;
+    padding-left: 0;
+    padding-right: 0;
+    input {
+      text-align: center;
+    }
     ${leftSpaced &&
-    css `
-      margin-left: 8px;
-    `}
+    css `
+      margin-left: 8px;
+    `}
   `);
-const InputMarker = styled.div(({ theme }) => css `
-    height: 8px;
-    border: 1px solid ${theme.color.background.neutralAltActive};
-    border-top: none;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
+const InputMarker = styled.div(({ theme }) => css `
+    height: 8px;
+    border: 1px solid ${theme.color.background.neutralAltActive};
+    border-top: none;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
   `);
-const Text = styled.span(({ theme }) => css `
-    color: ${theme.color.foreground.neutralBaseDisabled};
-    text-align: center;
-    /* Default/Label/12px-Md */
-    font-family: ${theme.fontFamily.ui};
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 16px; /* 133.333% */
+const Text = styled.span(({ theme }) => css `
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    text-align: center;
+    /* 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/ProblemInputNode/SettingForm/FormSolution.js

@@ -14,13 +14,13 @@ export function FormSolution(props) {
     const { t } = useTranslation();
     return (_jsx(Controller, { name: `solutions.${index}.value`, control: control, rules: rules, render: ({ field: { value, onChange }, fieldState: { invalid, error }, }) => {
             const disabled = (error === null || error === void 0 ? void 0 : error.type) === "enabled";
-            return (_jsx(Input, { size: "small", color: invalid ? "activeDanger" : "default", onChange: onChange, disabled: disabled, value: value, hintIcon: !disabled && invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: !disabled ? error === null || error === void 0 ? void 0 : error.message : undefined, placeholder: t("안녕하세요"), fullWidth: true, css: css `
-              > div {
-                padding: 4px 12px;
-              }
-            `, startIcon: _jsx(TextTypeDropdown, { index: index, control: control, disabled: disabled }), endIcon: _jsxs("div", { css: css `
-                  display: flex;
-                  gap: 4px;
+            return (_jsx(Input, { size: "small", color: invalid ? "activeDanger" : "default", onChange: onChange, disabled: disabled, value: value, hintIcon: !disabled && invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: !disabled ? error === null || error === void 0 ? void 0 : error.message : undefined, placeholder: t("안녕하세요"), fullWidth: true, css: css `
+              > div {
+                padding: 4px 12px;
+              }
+            `, startIcon: _jsx(TextTypeDropdown, { index: index, control: control, disabled: disabled }), endIcon: _jsxs("div", { css: css `
+                  display: flex;
+                  gap: 4px;
                 `, children: [onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete, "aria-label": t("삭제", {
                                 context: "스퀘어버튼, 렉시컬 주관식 설정창",
                             }) })), disabled && (_jsx(Tooltip, { text: _jsx("span", { children: _jsx(Trans, { i18nKey: "\uC785\uB825 \uCE78 \uC124\uC815\uC774 '\uAE00\uC790 \uC218\uB300\uB85C'\uC778 \uACBD\uC6B0<br/>\uC815\uB2F5\uC744 \uD558\uB098\uB9CC \uB4F1\uB85D\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4." }) }), children: _jsx(SquareButton, { color: "danger", size: "xsmall", icon: _jsx(AlertFillIcon, { color: theme.color.foreground.neutralAlt }), disabled: true, "aria-label": t("정답 등록 불가") }) }))] }) }));

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

@@ -51,9 +51,9 @@ export function SettingForm(props) {
         onClose();
     };
     const multipleSolutionsDisabled = watch("showCharacterNumber");
-    return (_jsxs(Form, { onSubmit: handleSubmit(onSettingSubmit), children: [_jsxs(Title, { children: [_jsx(InputMethodLineIcon, { css: css `
-            width: 12px;
-            height: 12px;
+    return (_jsxs(Form, { onSubmit: handleSubmit(onSettingSubmit), children: [_jsxs(Title, { children: [_jsx(InputMethodLineIcon, { css: css `
+            width: 12px;
+            height: 12px;
           ` }), t("주관식 입력 칸", { context: "렉시컬 주관식 설정창" })] }), _jsxs(Content, { children: [_jsxs(Left, { children: [_jsxs(FormArea, { children: [_jsx(Label, { children: t("정답", { context: "소제목, 렉시컬 주관식 설정창" }) }), fields.map((field, index) => (_jsx(FormSolution, { index: index, control: control, rules: {
                                             validate: {
                                                 // required 옵션보다 먼저 검증되어야 하는데 priority 옵션이 없어서 validate에서 통합해서 검증합니다.
@@ -71,21 +71,21 @@ export function SettingForm(props) {
                                         textType: "normal",
                                         value: "",
                                     });
-                                } }), _jsxs("div", { css: css `
-              display: flex;
-              gap: 4px;
-            `, children: [_jsx(AlarmWarningFillIcon, { color: theme.color.foreground.neutralBaseDisabled, css: css `
-                width: 14px;
-                height: 14px;
-              ` }), _jsx(Label, { children: t("가능한 정답을 모두 추가해야 원활하게 자동 채점할 수 있어요.") })] })] }), _jsxs(Right, { children: [_jsxs(FormArea, { children: [_jsxs(Label, { children: [t("입력 칸"), _jsx(Tooltip, { text: _jsx("span", { children: _jsx(Trans, { i18nKey: "\uC608\uB97C \uB4E4\uC5B4 \uC815\uB2F5\uC774 '\uAE00\uC790 \uC218'\uC774\uACE0<br /><strong>{{numCharOptionStr}}</strong> \uC635\uC158\uC744 \uC120\uD0DD\uD588\uB2E4\uBA74<br />\uC785\uB825 \uCE78\uC774 '\u2610\u2610 \u2610' \uCC98\uB7FC \uD45C\uC2DC\uB429\uB2C8\uB2E4.", values: { numCharOptionStr } }) }), placement: "top", children: _jsx(QuestionFillIcon, { css: css `
-                    width: 12px;
-                    height: 12px;
+                                } }), _jsxs("div", { css: css `
+              display: flex;
+              gap: 4px;
+            `, children: [_jsx(AlarmWarningFillIcon, { color: theme.color.foreground.neutralBaseDisabled, css: css `
+                width: 14px;
+                height: 14px;
+              ` }), _jsx(Label, { children: t("가능한 정답을 모두 추가해야 원활하게 자동 채점할 수 있어요.") })] })] }), _jsxs(Right, { children: [_jsxs(FormArea, { children: [_jsxs(Label, { children: [t("입력 칸"), _jsx(Tooltip, { text: _jsx("span", { children: _jsx(Trans, { i18nKey: "\uC608\uB97C \uB4E4\uC5B4 \uC815\uB2F5\uC774 '\uAE00\uC790 \uC218'\uC774\uACE0<br /><strong>{{numCharOptionStr}}</strong> \uC635\uC158\uC744 \uC120\uD0DD\uD588\uB2E4\uBA74<br />\uC785\uB825 \uCE78\uC774 '\u2610\u2610 \u2610' \uCC98\uB7FC \uD45C\uC2DC\uB429\uB2C8\uB2E4.", values: { numCharOptionStr } }) }), placement: "top", children: _jsx(QuestionFillIcon, { css: css `
+                    width: 12px;
+                    height: 12px;
                   ` }) })] }), _jsx(FormSegmentedControl, { control: control, trigger: trigger, name: "showCharacterNumber", items: [
                                             { value: false, label: t("한 칸으로") },
                                             { value: true, label: numCharOptionStr },
-                                        ] })] }), _jsxs(FormArea, { children: [_jsxs(Label, { children: [t("자리 표시자", { context: "렉시컬 주관식 설정창" }), _jsx(Tooltip, { text: getTexts(t, "descriptionDefaultInputText"), placement: "top", children: _jsx(QuestionFillIcon, { css: css `
-                    width: 12px;
-                    height: 12px;
+                                        ] })] }), _jsxs(FormArea, { children: [_jsxs(Label, { children: [t("자리 표시자", { context: "렉시컬 주관식 설정창" }), _jsx(Tooltip, { text: getTexts(t, "descriptionDefaultInputText"), placement: "top", children: _jsx(QuestionFillIcon, { css: css `
+                    width: 12px;
+                    height: 12px;
                   ` }) })] }), _jsx(FormPlaceholder, { control: control })] }), _jsxs(FormArea, { children: [_jsx(Label, { children: t("띄어쓰기") }), _jsx(FormSegmentedControl, { control: control, trigger: trigger, name: "ignoreWhitespace", items: [
                                             { value: true, label: t("무시하기") },
                                             { value: false, label: t("포함하기") },
@@ -94,69 +94,69 @@ export function SettingForm(props) {
                                             { value: true, label: t("포함하기") },
                                         ] })] })] })] }), _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "xsmall", label: t("닫기", { context: "렉시컬 도구 설정창" }), onClick: onClose }), _jsx(Button, { color: "primary", size: "xsmall", label: t("이대로 넣기", { context: "렉시컬 도구 설정창" }), 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 Left = styled.div `
-  display: flex;
-  flex-direction: column;
-  padding: 12px;
-  gap: 12px;
-  flex: 1;
+const Left = styled.div `
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  gap: 12px;
+  flex: 1;
 `;
-const FormArea = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+const FormArea = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 `;
-const Right = styled.div `
-  display: flex;
-  box-sizing: border-box;
-  width: 240px;
-  flex-direction: column;
-  padding: 12px;
-  gap: 12px;
+const Right = styled.div `
+  display: flex;
+  box-sizing: border-box;
+  width: 240px;
+  flex-direction: column;
+  padding: 12px;
+  gap: 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/ProblemInputNode/SettingForm/TextTypeDropdown.js

@@ -9,11 +9,11 @@ export function TextTypeDropdown(props) {
     const { t } = useTranslation();
     const normalLabel = t("일반 텍스트");
     const codeLabel = t("코드 텍스트");
-    return (_jsx(Controller, { name: `solutions.${index}.textType`, control: control, render: ({ field: { value, onChange } }) => (_jsx(Dropdown, { label: value === "normal" ? normalLabel : codeLabel, size: "xsmall", color: "textNeutral", closeOnItemClick: true, disabled: disabled, buttonCss: css `
-            ${disabled && `color: ${theme.color.foreground.neutralAlt};`}
-            > span {
-              font-weight: 700;
-            }
+    return (_jsx(Controller, { name: `solutions.${index}.textType`, control: control, render: ({ field: { value, onChange } }) => (_jsx(Dropdown, { label: value === "normal" ? normalLabel : codeLabel, size: "xsmall", color: "textNeutral", closeOnItemClick: true, disabled: disabled, buttonCss: css `
+            ${disabled && `color: ${theme.color.foreground.neutralAlt};`}
+            > span {
+              font-weight: 700;
+            }
           `, menuProps: {
                 anchorOrigin: {
                     vertical: "bottom",

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

@@ -27,13 +27,13 @@ export function TextInput(props) {
                     : inputOriginalProps.color, inputProps: {
                 readOnly: true,
                 className: isCorrect === false
-                    ? cssToClassName `
-                  color: ${theme.color.foreground.danger};
-                  &::placeholder {
-                    // inputComponent의 placeholder 스타일을 덮어쓰기 위해 부득이하게 !important 사용
-                    // TODO: static classname을 사용하여 !important 제거
-                    color: ${theme.color.foreground.dangerDisabled} !important;
-                  }
+                    ? cssToClassName `
+                  color: ${theme.color.foreground.danger};
+                  &::placeholder {
+                    // inputComponent의 placeholder 스타일을 덮어쓰기 위해 부득이하게 !important 사용
+                    // TODO: static classname을 사용하여 !important 제거
+                    color: ${theme.color.foreground.dangerDisabled} !important;
+                  }
                 `
                     : undefined,
             } })));