@team-monolith/cds 1.125.1 → 1.127.0

package/dist/components/Badge.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+export declare const badgeClasses: {
+    readonly root: "Badge";
+    readonly icon: "Badge-icon";
+    readonly label: "Badge-label";
+};
+export interface BadgeProps {
+    className?: string;
+    component?: React.ElementType;
+    /** 컴포넌트 내 표기될 문자열 */
+    label: React.ReactNode;
+    /** 컴포넌트 좌측에 표기될 아이콘 */
+    icon?: React.ReactNode;
+}
+/**
+ * Badge 컴포넌트
+ * [피그마](https://www.figma.com/design/UD08wln8CwDoCMGFBIGTiZ/CDS?node-id=6586-3001)
+ */
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLElement>>;

package/dist/components/Badge.js

@@ -0,0 +1,55 @@
+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 { css, useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import React from "react";
+export const badgeClasses = {
+    root: "Badge",
+    icon: "Badge-icon",
+    label: "Badge-label",
+};
+/**
+ * Badge 컴포넌트
+ * [피그마](https://www.figma.com/design/UD08wln8CwDoCMGFBIGTiZ/CDS?node-id=6586-3001)
+ */
+export const Badge = React.forwardRef(function Badge(props, ref) {
+    const { className, component: Component = "span", label, icon } = props, other = __rest(props, ["className", "component", "label", "icon"]);
+    const theme = useTheme();
+    return (_jsxs(Component, Object.assign({}, other, { ref: ref, className: [badgeClasses.root, className].filter(Boolean).join(" "), css: css `
+        width: fit-content;
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+        padding: 2px 8px 2px 6px;
+        border-radius: 22px;
+        font-family: ${theme.fontFamily.ui};
+      `, children: [icon && _jsx(IconWrapper, { className: badgeClasses.icon, children: icon }), _jsx(Label, { className: badgeClasses.label, children: label })] })));
+});
+const IconWrapper = styled.span `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+`;
+const Label = styled.span `
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 18px;
+`;

package/dist/components/Button.d.ts

@@ -21,8 +21,6 @@ export interface ButtonOwnProps<RootComponentType extends React.ElementType> {
     endIcon?: React.ReactNode;
     /** 컴포넌트 내 표기될 문자열 */
     label: React.ReactNode;
-    /** 버튼 텍스트 굵음 여부 */
-    bold?: boolean;
     /** 로딩 여부 */
     loading?: boolean;
     /** 전체 너비 유무 */

package/dist/components/Button.js

@@ -214,7 +214,7 @@ const SIZE_TO_LABEL_STYLE = {
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=20-173&t=cXcCv3QijbX7MkoC-0)
  */
 export const Button = React.forwardRef(function Button(props, ref) {
-    const { className, component: Component = "button", disabled, color, size, startIcon, endIcon, label, fullWidth, bold = false, loading = false } = props, other = __rest(props, ["className", "component", "disabled", "color", "size", "startIcon", "endIcon", "label", "fullWidth", "bold", "loading"]);
+    const { className, component: Component = "button", disabled, color, size, startIcon, endIcon, label, fullWidth, loading = false } = props, other = __rest(props, ["className", "component", "disabled", "color", "size", "startIcon", "endIcon", "label", "fullWidth", "loading"]);
     const theme = useTheme();
     return (_jsxs(Component, Object.assign({ type: Component === "button" || Component === "input" ? "button" : undefined }, other, { className: [buttonClasses.root, className].filter(Boolean).join(" "), ref: ref, css: [
             css `
@@ -247,10 +247,10 @@ export const Button = React.forwardRef(function Button(props, ref) {
         `,
             COLOR_TO_BUTTON_STYLE(theme, color, Boolean(disabled || loading)),
             SIZE_TO_BUTTON_STYLE[size],
-        ], disabled: disabled || loading, children: [loading ? _jsx(Spinner, {}) : startIcon, label && (_jsx(Label, { className: buttonClasses.label, size: size, bold: bold, children: label })), endIcon] })));
+        ], disabled: disabled || loading, children: [loading ? _jsx(Spinner, {}) : startIcon, label && (_jsx(Label, { className: buttonClasses.label, size: size, children: label })), endIcon] })));
 });
 const Label = styled.span `
-  font-weight: ${({ bold }) => (bold ? 700 : 400)};
+  font-weight: 700;
   white-space: nowrap;
   ${({ size }) => SIZE_TO_LABEL_STYLE[size]}
 `;

package/dist/components/FileTypeAlertDialog.js

@@ -21,8 +21,8 @@ export function FileTypeAlertDialog(props) {
             color: ${theme.color.background.danger};
           ` }), children: [_jsx(AlertDialogTitle, { className: fileTypeAlertDialogClasses.title, css: css `
           font-weight: 700;
-        `, onClose: onClose, children: t("파일 형식을 확인해주세요.") }), _jsx(AlertDialogContent, { className: fileTypeAlertDialogClasses.content, children: content }), _jsxs(AlertDialogActions, { className: fileTypeAlertDialogClasses.actions, children: [_jsx(Button, { color: "grey", label: t("닫기", { context: "다이얼로그" }), size: "medium", onClick: onClose, bold: true }), _jsx(Button, { color: "primary", label: t("다시 업로드"), size: "medium", onClick: () => {
+        `, onClose: onClose, children: t("파일 형식을 확인해주세요.") }), _jsx(AlertDialogContent, { className: fileTypeAlertDialogClasses.content, children: content }), _jsxs(AlertDialogActions, { className: fileTypeAlertDialogClasses.actions, children: [_jsx(Button, { color: "grey", label: t("닫기", { context: "다이얼로그" }), size: "medium", onClick: onClose }), _jsx(Button, { color: "primary", label: t("다시 업로드"), size: "medium", onClick: () => {
                             onClose();
                             openFileBrowser();
-                        }, bold: true })] })] }));
+                        } })] })] }));
 }

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 /// <reference path="../@types/emotion.d.ts" preserve="true" />
 export * from "./components/AlertDialog";
+export * from "./components/Badge";
 export * from "./components/DecoratedNumber";
 export * from "./components/Banner";
 export * from "./components/Book";

package/dist/index.js

@@ -1,5 +1,6 @@
 /// <reference path="../../@types/emotion.d.ts" preserve="true"/>
 export * from "./components/AlertDialog";
+export * from "./components/Badge";
 export * from "./components/DecoratedNumber";
 export * from "./components/Banner";
 export * from "./components/Book";

package/dist/patterns/Dropdown/Dropdown.d.ts

@@ -12,8 +12,6 @@ export interface DropdownProps {
     color?: ButtonColor;
     /** 버튼 컴포넌트 크기 */
     size?: ButtonSize;
-    /** 버튼 컴포넌트 텍스트 굵음 여부 */
-    bold?: boolean;
     /** 버튼 컴포넌트 내 좌측에 표기될 아이콘 */
     startIcon?: React.ReactNode;
     /** 버튼 컴포넌트 내 우측에 표기될 아이콘.

package/dist/patterns/Dropdown/Dropdown.js

@@ -19,14 +19,13 @@ import { DropdownMenu } from "./DropdownMenu";
  */
 const Dropdown = forwardRef(function Dropdown(props, ref) {
     var _a;
-    const { className, component: Component = "div", disabled, color = "primary", size = "medium", bold, startIcon, endIcon = _jsx(ArrowDownSFillIcon, {}), 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 { className, component: Component = "div", disabled, color = "primary", size = "medium", startIcon, endIcon = _jsx(ArrowDownSFillIcon, {}), buttonCss, label, onClick, menuProps = {}, children, closeOnItemClick } = props, other = __rest(props, ["className", "component", "disabled", "color", "size", "startIcon", "endIcon", "buttonCss", "label", "onClick", "menuProps", "children", "closeOnItemClick"]);
     const buttonProps = Object.assign(Object.assign({}, props.buttonProps), { disabled,
         color,
         size,
         startIcon,
         endIcon,
-        label,
-        bold });
+        label });
     const menuRef = useRef(null);
     const isControlled = menuProps.open !== undefined;
     const [open, setOpen] = useState(false);

package/dist/patterns/LexicalEditor/components/FileSelectInput.d.ts

@@ -10,7 +10,6 @@ interface FileSelectInputProps {
         size: number;
         uploadDate: string;
     }) => void;
-    bold?: boolean;
 }
 /**
  * 파일 탐색기를 열어 특정 파일을 업로드 한 후, 그 경로를 onChange로 전달합니다.

package/dist/patterns/LexicalEditor/components/FileSelectInput.js

@@ -38,7 +38,7 @@ const MAX_FILE_SIZE = 1 * 1024 * 1024 * 1024; // 1GB
  * @returns
  */
 export function FileSelectInput(props) {
-    const { onChange, fileType, onFileSubmit, bold = false } = props;
+    const { onChange, fileType, onFileSubmit } = props;
     const [errorMessage, setErrorMessage] = useState(null);
     const inputRef = useRef(null);
     const { t } = useTranslation();
@@ -82,7 +82,7 @@ export function FileSelectInput(props) {
     return (_jsxs(_Fragment, { children: [_jsxs(Container, { children: [_jsx(Button, { fullWidth: true, color: "grey", size: "medium", label: t("파일 선택하기"), onClick: () => {
                             var _a;
                             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
-                        }, startIcon: _jsx(UploadLineIcon, {}), bold: bold }), _jsx(IconAndErrorMessage, { children: errorMessage && (_jsxs(_Fragment, { children: [_jsx(FileWarningLineIcon, { css: css `
+                        }, startIcon: _jsx(UploadLineIcon, {}) }), _jsx(IconAndErrorMessage, { children: errorMessage && (_jsxs(_Fragment, { children: [_jsx(FileWarningLineIcon, { css: css `
                   padding: 0 4px;
                   width: 24px;
                   height: 24px;

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

@@ -14,7 +14,7 @@ export function FormIconAndLabel(props) {
     const { t } = useTranslation();
     return (_jsx(Controller, { control: control, name: "iconType", render: ({ field: { value, onChange } }) => {
             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: {
+            return (_jsxs(_Fragment, { children: [_jsx(Dropdown, { label: t("아이콘: {{title}}", { title }), size: "small", color: "grey", closeOnItemClick: true, startIcon: startIcon, endIcon: _jsx(ArrowDownSFillIcon, {}), menuProps: {
                             menuCss: css `
                   width: 216px;
                 `,

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

@@ -53,7 +53,7 @@ export function SettingForm(props) {
                                         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" })] })] }));
+                                } })] }), _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: "렉시컬 도구 설정창" }), type: "submit" })] })] }));
 }
 const Form = styled.form(({ theme }) => css `
     display: flex;

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

@@ -39,7 +39,7 @@ export function SettingForm(props) {
                         : t("단답형 입력 칸", { context: "렉시컬 단답형/서술형 도구" })] }), _jsx(Content, { children: _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(Controller, { name: "placeholder", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { size: "small", color: "default", value: value, onChange: onChange, placeholder: getTexts(t, "exampleEnterHere") })) })] }) }), _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" })] })] }));
+                ` }) })] }), _jsx(Controller, { name: "placeholder", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { size: "small", color: "default", value: value, onChange: onChange, placeholder: getTexts(t, "exampleEnterHere") })) })] }) }), _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;

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

@@ -86,7 +86,7 @@ export function SettingForm(props) {
                   min-width: 14px;
                   width: 14px;
                   height: 14px;
-                ` }), t("다중 선택을 허용한 문제에는 여러 선택지를 고를 수 있다는 안내가 제공됩니다.")] }))] })] }), _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" })] })] }));
+                ` }), 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;

package/package.json

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