@team-monolith/cds 1.38.3 → 1.38.5

package/dist/patterns/Dropdown/Dropdown.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { forwardRef, useRef, useState } from "react";
@@ -7,7 +18,7 @@ import { DropdownMenu } from "./DropdownMenu";
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=203-95329&t=FwczLZ1IVvskUVbT-0)
  */
 const Dropdown = forwardRef((props, ref) => {
-    const { className, component: Component = "div", disabled, color = "primary", size = "medium", bold, startIcon, endIcon = _jsx(ArrowDropDownFillIcon, {}), buttonCss, label, onClick, menuProps = {}, children, closeOnItemClick, } = props;
+    const { className, component: Component = "div", disabled, color = "primary", size = "medium", bold, startIcon, endIcon = _jsx(ArrowDropDownFillIcon, {}), buttonCss, label, onClick, menuProps = {}, children, closeOnItemClick } = props, other = __rest(props, ["className", "component", "disabled", "color", "size", "bold", "startIcon", "endIcon", "buttonCss", "label", "onClick", "menuProps", "children", "closeOnItemClick"]);
     const buttonProps = {
         disabled,
         color,
@@ -16,16 +27,19 @@ const Dropdown = forwardRef((props, ref) => {
         endIcon,
     };
     const menuRef = useRef(null);
+    const isControlled = menuProps.open !== undefined;
     const [open, setOpen] = useState(false);
     const [itemState, setItemState] = useState(new Map());
     const handleClick = (e) => {
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
-        setOpen(true);
+        if (!isControlled)
+            setOpen(true);
     };
     const handleClose = (e) => {
         var _a;
         e.stopPropagation();
-        setOpen(false);
+        if (!isControlled)
+            setOpen(false);
         setItemState((prevState) => {
             const newState = new Map(prevState);
             newState.forEach((value, key) => {
@@ -38,6 +52,6 @@ const Dropdown = forwardRef((props, ref) => {
         });
         (_a = menuProps === null || menuProps === void 0 ? void 0 : menuProps.onClose) === null || _a === void 0 ? void 0 : _a.call(menuProps, e);
     };
-    return (_jsxs(Component, Object.assign({ className: className, ref: ref }, { children: [_jsx(Button, Object.assign({ css: buttonCss, ref: menuRef }, buttonProps, { label: label, bold: bold, onClick: handleClick, fullWidth: true })), _jsx(DropdownMenu, Object.assign({}, menuProps, { open: open, onClose: handleClose, anchorEl: menuRef.current, closeOnItemClick: closeOnItemClick, itemState: itemState, setItemState: setItemState }, { children: children }))] })));
+    return (_jsxs(Component, Object.assign({ className: className }, other, { ref: ref }, { children: [_jsx(Button, Object.assign({ css: buttonCss, ref: menuRef }, buttonProps, { label: label, bold: bold, onClick: handleClick, fullWidth: true })), _jsx(DropdownMenu, Object.assign({}, menuProps, { open: isControlled ? menuProps.open : open, onClose: handleClose, anchorEl: menuRef.current, closeOnItemClick: closeOnItemClick, itemState: itemState, setItemState: setItemState }, { children: children }))] })));
 });
 export { Dropdown };

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/InputComponent.d.ts

@@ -5,5 +5,6 @@ export declare function InputComponent(props: {
     showCharacterNumber: boolean;
     placeholder: string;
     answer: string;
+    isCorrect?: boolean;
     nodeKey: NodeKey;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -25,7 +25,7 @@ import { LexicalCustomConfigContext } from "../../LexicalCustomConfigContext";
 import TextInput from "./TextInput";
 import SegmentedInput from "./SegmentedInput";
 export function InputComponent(props) {
-    const { answer } = props, settingFormProps = __rest(props, ["answer"]);
+    const { answer, isCorrect } = props, settingFormProps = __rest(props, ["answer", "isCorrect"]);
     const { solutions, showCharacterNumber, placeholder, nodeKey } = settingFormProps;
     const [editor] = useLexicalComposerContext();
     const [settingOpen, setSettingOpen] = useState(false);
@@ -51,9 +51,9 @@ export function InputComponent(props) {
     // 학생 view
     if (!isEditable) {
         if (showCharacterNumber) {
-            return (_jsx(SegmentedInput, { readOnly: lexicalCustomConfig.freezeProblemNode, answerFormat: answerFormat, placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: handleChange }));
+            return (_jsx(SegmentedInput, { readOnly: lexicalCustomConfig.freezeProblemNode, isCorrect: isCorrect, answerFormat: answerFormat, placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: handleChange }));
         }
-        return (_jsx(TextInput, { readOnly: lexicalCustomConfig.freezeProblemNode, size: "small", color: "default", placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: (e) => {
+        return (_jsx(TextInput, { readOnly: lexicalCustomConfig.freezeProblemNode, isCorrect: isCorrect, size: "small", color: "default", placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: (e) => {
                 handleChange(e.target.value);
             }, fullWidth: true }));
     }

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/ProblemInputNode.d.ts

@@ -11,6 +11,8 @@ export interface ProblemInputPayload {
      * (ex: "코들 입니다" => "** ***") */
     solutions: Solution[];
     answer: string;
+    /** FE에서만 사용하는 값. 문제의 정오답 여부를 주입하여 스타일을 변경합니다. */
+    isCorrect?: boolean;
     key?: NodeKey;
 }
 export type SerializedProblemInputNode = Spread<ProblemInputPayload, SerializedLexicalNode>;
@@ -23,6 +25,7 @@ export declare class ProblemInputNode extends DecoratorNode<ReactNode> {
     __showCharacterNumber: boolean;
     __placeholder: string;
     __answer: string;
+    __isCorrect?: boolean;
     isInline(): boolean;
     static getType(): string;
     getSolutions(): Solution[];
@@ -34,12 +37,12 @@ export declare class ProblemInputNode extends DecoratorNode<ReactNode> {
     setPlaceholder(placeholder: string): void;
     setAnswer(answer: string): void;
     static clone(node: ProblemInputNode): ProblemInputNode;
-    constructor(showCharacterNumber: boolean, placeholder: string, solutions: Solution[], answer: string, key?: NodeKey);
+    constructor(showCharacterNumber: boolean, placeholder: string, solutions: Solution[], answer: string, isCorrect?: boolean, key?: NodeKey);
     createDOM(config: EditorConfig): HTMLElement;
     updateDOM(): boolean;
     static importJSON(serializedNode: SerializedProblemInputNode): ProblemInputNode;
     exportJSON(): SerializedProblemInputNode;
     decorate(): ReactNode;
 }
-export declare function $createProblemInputNode({ showCharacterNumber, placeholder, solutions, answer, key, }: ProblemInputPayload): ProblemInputNode;
+export declare function $createProblemInputNode({ showCharacterNumber, placeholder, solutions, answer, isCorrect, key, }: ProblemInputPayload): ProblemInputNode;
 export declare function $isProblemInputNode(node: LexicalNode | null | undefined): node is ProblemInputNode;

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

@@ -42,14 +42,15 @@ export class ProblemInputNode extends DecoratorNode {
         self.__answer = answer;
     }
     static clone(node) {
-        return new ProblemInputNode(node.__showCharacterNumber, node.__placeholder, node.__solutions, node.__answer, node.__key);
+        return new ProblemInputNode(node.__showCharacterNumber, node.__placeholder, node.__solutions, node.__answer, node.__isCorrect, node.__key);
     }
-    constructor(showCharacterNumber, placeholder, solutions, answer, key) {
+    constructor(showCharacterNumber, placeholder, solutions, answer, isCorrect, key) {
         super(key);
         this.__showCharacterNumber = showCharacterNumber;
         this.__placeholder = placeholder;
         this.__solutions = solutions;
         this.__answer = answer;
+        this.__isCorrect = isCorrect;
     }
     createDOM(config) {
         // Define the DOM element here
@@ -67,6 +68,7 @@ export class ProblemInputNode extends DecoratorNode {
             showCharacterNumber: serializedNode.showCharacterNumber,
             placeholder: serializedNode.placeholder,
             answer: serializedNode.answer,
+            isCorrect: serializedNode.isCorrect,
         });
         return node;
     }
@@ -77,15 +79,16 @@ export class ProblemInputNode extends DecoratorNode {
             showCharacterNumber: this.__showCharacterNumber,
             placeholder: this.__placeholder,
             solutions: this.__solutions,
+            isCorrect: this.__isCorrect,
             answer: this.__answer,
         };
     }
     decorate() {
-        return (_jsx(InputComponent, { solutions: this.__solutions, showCharacterNumber: this.__showCharacterNumber, placeholder: this.__placeholder, answer: this.__answer, nodeKey: this.getKey() }));
+        return (_jsx(InputComponent, { solutions: this.__solutions, showCharacterNumber: this.__showCharacterNumber, placeholder: this.__placeholder, answer: this.__answer, isCorrect: this.__isCorrect, nodeKey: this.getKey() }));
     }
 }
-export function $createProblemInputNode({ showCharacterNumber, placeholder, solutions, answer, key, }) {
-    return $applyNodeReplacement(new ProblemInputNode(showCharacterNumber, placeholder, solutions, answer, key));
+export function $createProblemInputNode({ showCharacterNumber, placeholder, solutions, answer, isCorrect, key, }) {
+    return $applyNodeReplacement(new ProblemInputNode(showCharacterNumber, placeholder, solutions, answer, isCorrect, key));
 }
 export function $isProblemInputNode(node) {
     return node instanceof ProblemInputNode;

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/SegmentedInput.d.ts

@@ -1,5 +1,6 @@
 export interface SegmentedInputProps {
     readOnly: boolean;
+    isCorrect?: boolean;
     answerFormat: string;
     placeholder: string;
     value: string;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
-import { css } from "@emotion/react";
+import { css, useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
 import { InputBase } from "../../../../components/InputBase";
 import { useRef, useState } from "react";
@@ -9,7 +9,8 @@ import { useRef, useState } from "react";
  *  그리고 그 value는 split되어 segmented input에 표시됩니다.
  */
 export default function SegmentedInput(props) {
-    const { readOnly, answerFormat, placeholder, value, onChange } = props;
+    const { readOnly, isCorrect, answerFormat, placeholder, value, onChange } = props;
+    const theme = useTheme();
     // "** ***" => ["*", "*", " ", "*", "*", "*"]
     const splitedFormat = answerFormat.split("");
     // ["*", "*", " ", "*", "*", "*", " ", "*", "*"] => [2, 5]
@@ -58,7 +59,13 @@ export default function SegmentedInput(props) {
             display: flex;
             align-items: center;
             gap: 4px;
-          ` }, { children: despacedFormat.map((_format, i) => (_jsx(SquareInput, { leftSpaced: leftSpacedIndexs.includes(i), size: "small", color: focusedIndex === i ? "activePrimary" : "default", inputProps: {
+          ` }, { children: despacedFormat.map((_format, i) => (_jsx(SquareInput, { leftSpaced: leftSpacedIndexs.includes(i), size: "small", color: isCorrect === true
+                                ? "activeSuccess"
+                                : isCorrect === false
+                                    ? "activeDanger"
+                                    : focusedIndex === i
+                                        ? "activePrimary"
+                                        : "default", inputProps: {
                                 readOnly,
                                 onFocus: () => {
                                     var _a, _b;
@@ -68,6 +75,9 @@ export default function SegmentedInput(props) {
                                     (_a = hiddenRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                                     (_b = hiddenRef.current) === null || _b === void 0 ? void 0 : _b.setSelectionRange(i, i);
                                 },
+                                color: isCorrect === false
+                                    ? theme.color.foreground.danger
+                                    : undefined,
                             }, value: splitedValues[i] || "", onChange: () => { } }, i))) })), _jsx(InputMarker, {})] }), _jsx(Text, { children: placeholder })] }));
 }
 const Container = styled.div `

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/TextInput.d.ts

@@ -1,6 +1,7 @@
 import { InputProps } from "../../../../components/Input";
 export type TextInputProps = InputProps & {
     readOnly: boolean;
+    isCorrect?: boolean;
 };
 /** 읽기모드/편집모드가 가능한 input 컴포넌트 */
 export default function TextInput(props: TextInputProps): import("react/jsx-runtime").JSX.Element;

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

@@ -12,16 +12,33 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import Input from "../../../../components/Input";
+import { css as cssToClassName } from "@emotion/css";
+import { useTheme } from "@emotion/react";
 /** 읽기모드/편집모드가 가능한 input 컴포넌트 */
 export default function TextInput(props) {
-    const { readOnly } = props, InputOriginalProps = __rest(props, ["readOnly"]);
+    const { readOnly, isCorrect } = props, inputOriginalProps = __rest(props, ["readOnly", "isCorrect"]);
     const [focus, setFocus] = useState(false);
+    const theme = useTheme();
     if (readOnly) {
-        return (_jsx(Input, Object.assign({}, InputOriginalProps, { inputProps: {
+        return (_jsx(Input, Object.assign({}, inputOriginalProps, { color: isCorrect === true
+                ? "activeSuccess"
+                : isCorrect === false
+                    ? "activeDanger"
+                    : 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;
+                  }
+                `
+                    : undefined,
             } })));
     }
-    return (_jsx(Input, Object.assign({}, InputOriginalProps, { color: focus ? "activePrimary" : "default", inputProps: {
+    return (_jsx(Input, Object.assign({}, inputOriginalProps, { color: focus ? "activePrimary" : inputOriginalProps.color, inputProps: {
             onFocus: () => setFocus(true),
             onBlur: () => setFocus(false),
         } })));

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

@@ -1,10 +1,13 @@
 import React from "react";
 import { ImageProps } from "../ProblemSelectNode";
+export type SelectBoxType = "primary" | "success" | "danger";
 /** 비지니스 로직과 무관한 SelectBox를 그리는 공통 컴포넌트입니다. */
 export declare function SelectBoxComponent(props: {
     className?: string;
     indexClassName?: string;
     contentClassName?: string;
+    /** SelectBox의 스타일 타입. 전달하지 않으면 기본 스타일이 적용됩니다. */
+    type?: SelectBoxType;
     /** 문제 번호 박스 내부를 그립니다. */
     index: React.ReactNode;
     image?: ImageProps | null;

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectBox/SelectBoxComponent.js

@@ -1,11 +1,46 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
-import { css } from "@emotion/react";
+import { css, useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
+const TYPE_TO_CONTAINER_STYLE = (theme, type) => ({
+    primary: css `
+      background: ${theme.color.container.primaryContainer};
+      border: 1px solid ${theme.color.foreground.primary};
+      color: ${theme.color.container.primaryOnContainer};
+    `,
+    success: css `
+      background: ${theme.color.container.successContainer};
+      border: 1px solid ${theme.color.background.successActive};
+      color: ${theme.color.container.successOnContainer};
+    `,
+    danger: css `
+      background: ${theme.color.container.dangerContainer};
+      border: 1px solid ${theme.color.background.dangerActive};
+      color: ${theme.color.container.dangerOnContainer};
+    `,
+})[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};
+    `,
+    success: css `
+      background: ${theme.color.background.successActive};
+      border: 1px solid ${theme.color.background.successActive};
+      color: ${theme.color.foreground.neutralAlt};
+    `,
+    danger: css `
+      background: ${theme.color.background.dangerActive};
+      border: 1px solid ${theme.color.background.dangerActive};
+      color: ${theme.color.foreground.neutralAlt};
+    `,
+})[type];
 /** 비지니스 로직과 무관한 SelectBox를 그리는 공통 컴포넌트입니다. */
 export function SelectBoxComponent(props) {
-    const { className, indexClassName, contentClassName, index, image, text, endIcon, onClick, } = props;
-    return (_jsxs(Container, Object.assign({ className: className, onClick: onClick }, { children: [_jsx(Index, Object.assign({ className: indexClassName }, { children: index })), _jsxs(Content, Object.assign({ className: contentClassName }, { children: [image && (_jsx("img", { src: image.src, alt: image.altText, css: css `
+    const { className, indexClassName, contentClassName, type, index, image, text, endIcon, onClick, } = props;
+    const theme = useTheme();
+    return (_jsxs(Container, Object.assign({ className: className, css: type ? TYPE_TO_CONTAINER_STYLE(theme, type) : undefined, onClick: onClick }, { children: [_jsx(Index, Object.assign({ className: indexClassName, css: type ? TYPE_TO_INDEX_STYLE(theme, type) : undefined }, { children: index })), _jsxs(Content, Object.assign({ className: contentClassName }, { children: [image && (_jsx("img", { src: image.src, alt: image.altText, css: css `
               height: auto;
               // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
               max-width: 100%;

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectBox/SelectBoxView.js

@@ -1,97 +1,35 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
-import { css, useTheme } from "@emotion/react";
-import { css as cssToClassName } from "@emotion/css";
+import { css } from "@emotion/react";
 import { CheckboxCircleFillIcon, CheckFillIcon, CloseCircleFillIcon, } from "../../../../../icons";
 import { SelectBoxComponent } from "./SelectBoxComponent";
 import Tag from "../../../../../components/Tag";
-const getBoxStyle = (theme, isSelected, isAnswer) => {
-    if (isSelected) {
-        // 선택 박스
-        if (isAnswer === undefined) {
-            return css `
-        background: ${theme.color.container.primaryContainer};
-        border: 1px solid ${theme.color.foreground.primary};
-        color: ${theme.color.container.primaryOnContainer};
-      `;
-        }
-        // 정답 박스
-        if (isAnswer) {
-            return css `
-        background: ${theme.color.container.successContainer};
-        border: 1px solid ${theme.color.background.successActive};
-        color: ${theme.color.container.successOnContainer};
-      `;
-        }
-        // 오답 박스
-        return css `
-      background: ${theme.color.container.dangerContainer};
-      border: 1px solid ${theme.color.background.dangerActive};
-      color: ${theme.color.container.dangerOnContainer};
-    `;
-    }
-    return undefined;
-};
-const getIndexClassName = (theme, isSelected, isAnswer) => {
-    if (isSelected) {
-        // 선택 박스
-        if (isAnswer === undefined) {
-            return cssToClassName `
-        background: ${theme.color.background.primary};
-        border: 1px solid ${theme.color.background.primary};
-        color: ${theme.color.foreground.neutralAlt};
-      `;
-        }
-        // 정답 박스
-        if (isAnswer) {
-            return cssToClassName `
-        background: ${theme.color.background.successActive};
-        border: 1px solid ${theme.color.background.successActive};
-        color: ${theme.color.foreground.neutralAlt};
-      `;
-        }
-        // 오답 박스
-        return cssToClassName `
-      background: ${theme.color.background.dangerActive};
-      border: 1px solid ${theme.color.background.dangerActive};
-      color: ${theme.color.foreground.neutralAlt};
-    `;
-    }
-    return undefined;
-};
-const getIndexComponent = (index, isSelected, isAnswer) => {
-    if (isSelected) {
-        // 선택 박스
-        if (isAnswer === undefined) {
-            return (_jsx(CheckFillIcon, { css: css `
-            width: 12px;
-            height: 12px;
-          ` }));
-        }
-        // 정답 박스
-        if (isAnswer) {
-            return (_jsx(CheckboxCircleFillIcon, { css: css `
-            width: 12px;
-            height: 12px;
-          ` }));
-        }
-        // 오답 박스
-        return (_jsx(CloseCircleFillIcon, { css: css `
+const TYPE_TO_INDEX_ICON = (type) => ({
+    primary: (_jsx(CheckFillIcon, { css: css `
           width: 12px;
           height: 12px;
-        ` }));
-    }
-    return index;
-};
+        ` })),
+    success: (_jsx(CheckboxCircleFillIcon, { css: css `
+          width: 12px;
+          height: 12px;
+        ` })),
+    danger: (_jsx(CloseCircleFillIcon, { css: css `
+          width: 12px;
+          height: 12px;
+        ` })),
+})[type];
 export function SelectBoxView(props) {
     const { index, isSelected, isAnswer, image, text, onClick } = props;
-    const theme = useTheme();
-    return (_jsx(SelectBoxComponent, { css: [
-            css `
-          width: 100%;
-        `,
-            getBoxStyle(theme, isSelected, isAnswer),
-        ], indexClassName: getIndexClassName(theme, isSelected, isAnswer), index: getIndexComponent(index, isSelected, isAnswer), image: image, text: text, 
+    const selectBoxType = isSelected
+        ? isAnswer === undefined
+            ? "primary"
+            : isAnswer
+                ? "success"
+                : "danger"
+        : undefined;
+    return (_jsx(SelectBoxComponent, { css: css `
+        width: 100%;
+      `, type: selectBoxType, index: selectBoxType ? TYPE_TO_INDEX_ICON(selectBoxType) : index, image: image, text: text, 
         // isAnswer가 존재하면 채점 후의 상태이므로 unclickable을 위해 onClick을 전달하지 않음
         onClick: isAnswer === undefined ? onClick : undefined, 
         // 선택되지 않았으나 정답일 때 정답 태그를 표시

package/package.json

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