@team-monolith/cds 1.103.2 → 1.103.4

package/@types/emotion.d.ts

@@ -1,158 +1,158 @@
-import "@emotion/react";
-
-interface CodleFontFamilies {
-  ui: string;
-  title: string;
-}
-
-interface CodleColors {
-  background: {
-    neutralBase: string;
-    neutralBaseActive: string;
-    neutralBaseDisabled: string;
-    neutralAlt: string;
-    neutralAltActive: string;
-    neutralAltDisabled: string;
-    primary: string;
-    primaryActive: string;
-    primaryDisabled: string;
-    secondary: string;
-    secondaryActive: string;
-    secondaryDisabled: string;
-    danger: string;
-    dangerActive: string;
-    dangerDisabled: string;
-    success: string;
-    successActive: string;
-    successDisabled: string;
-    info: string;
-    infoActive: string;
-    infoDisabled: string;
-    warning: string;
-    warningActive: string;
-    warningDisabled: string;
-    inverse: string;
-    inverseActive: string;
-    inverseDisabled: string;
-  };
-  foreground: {
-    neutralBase: string;
-    neutralBaseActive: string;
-    neutralBaseDisabled: string;
-    neutralAlt: string;
-    neutralAltActive: string;
-    neutralAltDisabled: string;
-    primary: string;
-    primaryActive: string;
-    primaryDisabled: string;
-    secondary: string;
-    secondaryActive: string;
-    secondaryDisabled: string;
-    danger: string;
-    dangerActive: string;
-    dangerDisabled: string;
-    success: string;
-    successActive: string;
-    successDisabled: string;
-    info: string;
-    infoActive: string;
-    infoDisabled: string;
-    warning: string;
-    warningActive: string;
-    warningDisabled: string;
-  };
-  container: {
-    blueContainer: string;
-    blueOnContainer: string;
-    orangeContainer: string;
-    orangeOnContainer: string;
-    redContainer: string;
-    redOnContainer: string;
-    greenContainer: string;
-    greenOnContainer: string;
-    tealContainer: string;
-    tealOnContainer: string;
-    yellowContainer: string;
-    yellowOnContainer: string;
-    obsidianContainer: string;
-    obsidianOnContainer: string;
-    marbleContainer: string;
-    marbleOnContainer: string;
-  };
-  brand: {
-    brandOriginal: string;
-    brandAlt: string;
-    brandAccent: string;
-    brandFaded: string;
-    pdf: string;
-    pdfAlt: string;
-    quiz: string;
-    quizAlt: string;
-    python: string;
-    pythonAlt: string;
-    embedded: string;
-    embeddedAlt: string;
-    board: string;
-    boardAlt: string;
-    scratch: string;
-    scratchAlt: string;
-    entry: string;
-    entryAlt: string;
-    video: string;
-    videoAlt: string;
-    worksheet: string;
-    worksheetAlt: string;
-    ebook: string;
-    ebookAlt: string;
-    makecode: string;
-    makecodeAlt: string;
-    codap: string;
-    codapAlt: string;
-    aiQuiz: string;
-    aiQuizAlt: string;
-
-    decorativeRed: string;
-    decorativePink: string;
-    decorativeAmber: string;
-    decorativeGrass: string;
-    decorativeGreen: string;
-    decorativeBlue: string;
-    decorativeIndigo: string;
-    decorativePurple: string;
-    decorativeBrown: string;
-    decorativeCopper: string;
-    decorativeGold: string;
-    decorativeSilver: string;
-    decorativeGray: string;
-    decorativeBlack: string;
-    decorativeRedContainer: string;
-    decorativeRedOnContainer: string;
-    decorativeIndigoContainer: string;
-    decorativeIndigoOnContainer: string;
-    decorativeGreenContainer: string;
-    decorativeGreenOnContainer: string;
-    decorativePurpleContainer: string;
-    decorativePurpleOnContainer: string;
-    decorativeGoldContainer: string;
-    decorativeGoldOnContainer: string;
-    decorativeGrayContainer: string;
-    decorativeGrayOnContainer: string;
-    decorativeBlackContainer: string;
-    decorativeBlackOnContainer: string;
-  };
-  blanket: {
-    neutral: string;
-    neutralLight: string;
-    neutralHeavy: string;
-    inverse: string;
-    inverseLight: string;
-    inverseHeavy: string;
-  };
-}
-
-declare module "@emotion/react" {
-  export interface Theme {
-    color: CodleColors;
-    fontFamily: CodleFontFamilies;
-  }
-}
+import "@emotion/react";
+
+interface CodleFontFamilies {
+  ui: string;
+  title: string;
+}
+
+interface CodleColors {
+  background: {
+    neutralBase: string;
+    neutralBaseActive: string;
+    neutralBaseDisabled: string;
+    neutralAlt: string;
+    neutralAltActive: string;
+    neutralAltDisabled: string;
+    primary: string;
+    primaryActive: string;
+    primaryDisabled: string;
+    secondary: string;
+    secondaryActive: string;
+    secondaryDisabled: string;
+    danger: string;
+    dangerActive: string;
+    dangerDisabled: string;
+    success: string;
+    successActive: string;
+    successDisabled: string;
+    info: string;
+    infoActive: string;
+    infoDisabled: string;
+    warning: string;
+    warningActive: string;
+    warningDisabled: string;
+    inverse: string;
+    inverseActive: string;
+    inverseDisabled: string;
+  };
+  foreground: {
+    neutralBase: string;
+    neutralBaseActive: string;
+    neutralBaseDisabled: string;
+    neutralAlt: string;
+    neutralAltActive: string;
+    neutralAltDisabled: string;
+    primary: string;
+    primaryActive: string;
+    primaryDisabled: string;
+    secondary: string;
+    secondaryActive: string;
+    secondaryDisabled: string;
+    danger: string;
+    dangerActive: string;
+    dangerDisabled: string;
+    success: string;
+    successActive: string;
+    successDisabled: string;
+    info: string;
+    infoActive: string;
+    infoDisabled: string;
+    warning: string;
+    warningActive: string;
+    warningDisabled: string;
+  };
+  container: {
+    blueContainer: string;
+    blueOnContainer: string;
+    orangeContainer: string;
+    orangeOnContainer: string;
+    redContainer: string;
+    redOnContainer: string;
+    greenContainer: string;
+    greenOnContainer: string;
+    tealContainer: string;
+    tealOnContainer: string;
+    yellowContainer: string;
+    yellowOnContainer: string;
+    obsidianContainer: string;
+    obsidianOnContainer: string;
+    marbleContainer: string;
+    marbleOnContainer: string;
+  };
+  brand: {
+    brandOriginal: string;
+    brandAlt: string;
+    brandAccent: string;
+    brandFaded: string;
+    pdf: string;
+    pdfAlt: string;
+    quiz: string;
+    quizAlt: string;
+    python: string;
+    pythonAlt: string;
+    embedded: string;
+    embeddedAlt: string;
+    board: string;
+    boardAlt: string;
+    scratch: string;
+    scratchAlt: string;
+    entry: string;
+    entryAlt: string;
+    video: string;
+    videoAlt: string;
+    worksheet: string;
+    worksheetAlt: string;
+    ebook: string;
+    ebookAlt: string;
+    makecode: string;
+    makecodeAlt: string;
+    codap: string;
+    codapAlt: string;
+    aiQuiz: string;
+    aiQuizAlt: string;
+
+    decorativeRed: string;
+    decorativePink: string;
+    decorativeAmber: string;
+    decorativeGrass: string;
+    decorativeGreen: string;
+    decorativeBlue: string;
+    decorativeIndigo: string;
+    decorativePurple: string;
+    decorativeBrown: string;
+    decorativeCopper: string;
+    decorativeGold: string;
+    decorativeSilver: string;
+    decorativeGray: string;
+    decorativeBlack: string;
+    decorativeRedContainer: string;
+    decorativeRedOnContainer: string;
+    decorativeIndigoContainer: string;
+    decorativeIndigoOnContainer: string;
+    decorativeGreenContainer: string;
+    decorativeGreenOnContainer: string;
+    decorativePurpleContainer: string;
+    decorativePurpleOnContainer: string;
+    decorativeGoldContainer: string;
+    decorativeGoldOnContainer: string;
+    decorativeGrayContainer: string;
+    decorativeGrayOnContainer: string;
+    decorativeBlackContainer: string;
+    decorativeBlackOnContainer: string;
+  };
+  blanket: {
+    neutral: string;
+    neutralLight: string;
+    neutralHeavy: string;
+    inverse: string;
+    inverseLight: string;
+    inverseHeavy: string;
+  };
+}
+
+declare module "@emotion/react" {
+  export interface Theme {
+    color: CodleColors;
+    fontFamily: CodleFontFamilies;
+  }
+}

package/README.md

@@ -1,35 +1,35 @@
-# Codle Design System
-
-코들 디자인 시스템을 구현합니다.
-
-### src/cds/components
-
-컴포넌트를 구현합니다.
-컴포넌트는 반드시 `className`과 `component` 인자를 가집니다.
-컴포넌트는 모두 스토리북에 등록해야 합니다.
-
-### src/cds/foundation
-
-색상, 그림자 등을 제공합니다.
-
-### src/cds/icons
-
-아이콘을 제공합니다.
-
-아이콘은 [피그마](<[https://www.figma.com/file/wefLB6cN0oM2VZjwYmBA6B/Codle-PD-Kit---Foundation?type=design&node-id=1-23307&t=ASkFT82aJsgxrxvr-0](https://www.figma.com/design/UD08wln8CwDoCMGFBIGTiZ/CDS-24?t=szRkpuQ7CYUzU9vm-0)>)에 정의된대로 24px X 24px 크기의 svg로 정의됩니다. 색상이나 크기를 변경하기 위해 Styled Component를 활용할 수 있으므로 `className` 인자를 받아야합니다.
-
-아이콘은 컴파일 과정에서, remixicon 라이브러리의 svg 파일을 읽어와서 string 형태와 React JSX 형태로 export 되는 코드가 `src/cds/icons` 폴더 안에 자동 생성됩니다.
-생성되는 규칙은 다음과 같습니다.
-
-- 네이밍은 remixicon 라이브러리의 svg 파일 이름에서 다음과 같이 변환됩니다.
-- string 형태로 export되는 값은 다음 예시와 같이 camel case로 네이밍됩니다. (예: `arrowDownCircleFillSvg`)
-- React JSX 형태로 export되는 값은 다음 예시와 같이 pascal case로 네이밍됩니다. (예: `ArrowDownCircleFillIcon`)
-- svg 파일 이름이 숫자로 시작하는 경우, 제일 앞에 `i`를 붙입니다. (예: `4k-fill.svg` -> `i4KFillSvg`, `I4KFillIcon`)
-
-## 개발 및 배포 절차
-
-`npm run storybook` 을 실행하면 스토리북이 실행됩니다. 이곳에서 디버깅을 진행합니다.
-
-패키지 특성상 개발환경이 따로 존재하지 않으며 `npm run compile` 후 `npm publish` 를 사용하여 npm 에 배포합니다.
-
-이때 npm team-monolith 에 소속되어 있어야 합니다.
+# Codle Design System
+
+코들 디자인 시스템을 구현합니다.
+
+### src/cds/components
+
+컴포넌트를 구현합니다.
+컴포넌트는 반드시 `className`과 `component` 인자를 가집니다.
+컴포넌트는 모두 스토리북에 등록해야 합니다.
+
+### src/cds/foundation
+
+색상, 그림자 등을 제공합니다.
+
+### src/cds/icons
+
+아이콘을 제공합니다.
+
+아이콘은 [피그마](<[https://www.figma.com/file/wefLB6cN0oM2VZjwYmBA6B/Codle-PD-Kit---Foundation?type=design&node-id=1-23307&t=ASkFT82aJsgxrxvr-0](https://www.figma.com/design/UD08wln8CwDoCMGFBIGTiZ/CDS-24?t=szRkpuQ7CYUzU9vm-0)>)에 정의된대로 24px X 24px 크기의 svg로 정의됩니다. 색상이나 크기를 변경하기 위해 Styled Component를 활용할 수 있으므로 `className` 인자를 받아야합니다.
+
+아이콘은 컴파일 과정에서, remixicon 라이브러리의 svg 파일을 읽어와서 string 형태와 React JSX 형태로 export 되는 코드가 `src/cds/icons` 폴더 안에 자동 생성됩니다.
+생성되는 규칙은 다음과 같습니다.
+
+- 네이밍은 remixicon 라이브러리의 svg 파일 이름에서 다음과 같이 변환됩니다.
+- string 형태로 export되는 값은 다음 예시와 같이 camel case로 네이밍됩니다. (예: `arrowDownCircleFillSvg`)
+- React JSX 형태로 export되는 값은 다음 예시와 같이 pascal case로 네이밍됩니다. (예: `ArrowDownCircleFillIcon`)
+- svg 파일 이름이 숫자로 시작하는 경우, 제일 앞에 `i`를 붙입니다. (예: `4k-fill.svg` -> `i4KFillSvg`, `I4KFillIcon`)
+
+## 개발 및 배포 절차
+
+`npm run storybook` 을 실행하면 스토리북이 실행됩니다. 이곳에서 디버깅을 진행합니다.
+
+패키지 특성상 개발환경이 따로 존재하지 않으며 `npm run compile` 후 `npm publish` 를 사용하여 npm 에 배포합니다.
+
+이때 npm team-monolith 에 소속되어 있어야 합니다.

package/dist/CdsProvider.js

@@ -318,9 +318,9 @@ export function CdsProvider(props) {
         },
     });
     const { theme = light } = props;
-    return (_jsxs(_Fragment, { children: [_jsx(Global, { styles: css `
-          body {
-            font-family: ${FONT.pretendard};
-          }
+    return (_jsxs(_Fragment, { children: [_jsx(Global, { styles: css `
+          body {
+            font-family: ${FONT.pretendard};
+          }
         ` }), _jsx(MuiThemeProvider, { theme: muiTheme, children: _jsx(ThemeProvider, { theme: theme, children: _jsx(CdsContext.Provider, { value: props, children: props.children }) }) })] }));
 }

package/dist/components/AlertDialog/AlertDialog.js

@@ -25,62 +25,62 @@ export const AlertDialog = React.forwardRef(function AlertDialog(props, ref) {
     const paddingAreaName = disableIconPadding ? "content" : "iconPadding";
     return (_jsx(Modal, Object.assign({ open: open, onClose: onClose, ref: ref, sx: {
             zIndex: ZINDEX.ALERT,
-        } }, other, { children: _jsxs(Component, { className: className, css: css `
-            width: 480px;
-            max-height: calc(100% - 48px);
-            background: ${theme.color.background.neutralBase};
-            box-shadow: ${shadows.shadow04};
-            border-radius: 16px;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            padding: 24px;
-            box-sizing: border-box;
-
-            display: grid;
-            grid-template-rows: auto 1fr auto;
+        } }, other, { children: _jsxs(Component, { className: className, css: css `
+            width: 480px;
+            max-height: calc(100% - 48px);
+            background: ${theme.color.background.neutralBase};
+            box-shadow: ${shadows.shadow04};
+            border-radius: 16px;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            padding: 24px;
+            box-sizing: border-box;
+
+            display: grid;
+            grid-template-rows: auto 1fr auto;
             ${icon
-                ? css `
-                  grid-template-columns: 32px 1fr;
-                  grid-template-areas:
-                    "icon title"
-                    "${paddingAreaName} content"
-                    "actions actions";
+                ? css `
+                  grid-template-columns: 32px 1fr;
+                  grid-template-areas:
+                    "icon title"
+                    "${paddingAreaName} content"
+                    "actions actions";
                 `
-                : css `
-                  grid-template-areas:
-                    "title"
-                    "content"
-                    "actions";
-                `}
-
-            gap: 8px 16px;
-
-            ${MOBILE(css `
-              width: calc(100% - 24px);
-              grid-template-columns: auto;
-              grid-template-areas:
-                "title"
-                "content"
-                "actions";
-            `)}
+                : css `
+                  grid-template-areas:
+                    "title"
+                    "content"
+                    "actions";
+                `}
+
+            gap: 8px 16px;
+
+            ${MOBILE(css `
+              width: calc(100% - 24px);
+              grid-template-columns: auto;
+              grid-template-areas:
+                "title"
+                "content"
+                "actions";
+            `)}
           `, children: [icon && _jsx(IconDiv, { children: icon }), _jsx(AlertDialogContext.Provider, { value: { icon }, children: children })] }) })));
 });
-const IconDiv = styled.div `
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  grid-area: icon;
-  ${({ theme }) => css `
-    color: ${theme.color.background.infoActive};
-  `}
-  svg {
-    width: 32px;
-    height: 32px;
-  }
-
-  ${MOBILE(css `
-    display: none;
-  `)}
+const IconDiv = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  grid-area: icon;
+  ${({ theme }) => css `
+    color: ${theme.color.background.infoActive};
+  `}
+  svg {
+    width: 32px;
+    height: 32px;
+  }
+
+  ${MOBILE(css `
+    display: none;
+  `)}
 `;

package/dist/components/AlertDialog/AlertDialogActions.js

@@ -15,12 +15,12 @@ import { css } from "@emotion/react";
 import React from "react";
 export const AlertDialogActions = React.forwardRef(function AlertDialogActions(props, ref) {
     const { className, component: Component = "div", children } = props, other = __rest(props, ["className", "component", "children"]);
-    return (_jsx(Component, Object.assign({}, other, { ref: ref, className: className, css: css `
-        grid-area: actions;
-
-        margin-top: 8px;
-        display: flex;
-        gap: 8px;
-        justify-content: flex-end;
+    return (_jsx(Component, Object.assign({}, other, { ref: ref, className: className, css: css `
+        grid-area: actions;
+
+        margin-top: 8px;
+        display: flex;
+        gap: 8px;
+        justify-content: flex-end;
       `, children: children })));
 });

package/dist/components/AlertDialog/AlertDialogContent.js

@@ -16,13 +16,13 @@ import React from "react";
 export const AlertDialogContent = React.forwardRef(function AlertDialogContent(props, ref) {
     const { className, component: Component = "div", children } = props, other = __rest(props, ["className", "component", "children"]);
     const theme = useTheme();
-    return (_jsx(Component, Object.assign({}, other, { ref: ref, className: className, css: css `
-        grid-area: content;
-
-        font-style: normal;
-        font-size: 18px;
-        line-height: 28px;
-        color: ${theme.color.foreground.neutralBase};
-        overflow-y: auto;
+    return (_jsx(Component, Object.assign({}, other, { ref: ref, className: className, css: css `
+        grid-area: content;
+
+        font-style: normal;
+        font-size: 18px;
+        line-height: 28px;
+        color: ${theme.color.foreground.neutralBase};
+        overflow-y: auto;
       `, children: children })));
 });

package/dist/components/AlertDialog/AlertDialogTitle.js

@@ -21,38 +21,39 @@ export const AlertDialogTitle = React.forwardRef(function AlertDialogTitle(props
     const { className, component: Component = "div", onClose, children } = props, other = __rest(props, ["className", "component", "onClose", "children"]);
     const { icon } = React.useContext(AlertDialogContext);
     const theme = useTheme();
-    return (_jsx(_Fragment, { children: _jsxs(Component, Object.assign({}, other, { ref: ref, className: className, css: css `
-          grid-area: title;
-          font-family: ${theme.fontFamily.ui};
-          font-style: normal;
-          font-weight: 700;
-          font-size: 20px;
-          line-height: 28px; /* 140% */
-          letter-spacing: 0.25px;
-
-          color: ${theme.color.foreground.neutralBase};
-          text-align: center;
-
-          display: flex;
-          justify-content: space-between;
-        `, children: [_jsxs("div", { css: css `
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: flex-start;
-            gap: 16px;
-          `, children: [icon && (_jsx("div", { css: css `
-                display: none;
-                ${MOBILE(css `
-                  display: flex;
-                  justify-content: center;
-                  align-items: center;
-                  color: ${theme.color.background.infoActive};
-
-                  svg {
-                    width: 32px;
-                    height: 32px;
-                  }
-                `)}
+    return (_jsx(_Fragment, { children: _jsxs(Component, Object.assign({}, other, { ref: ref, className: className, css: css `
+          grid-area: title;
+          font-family: ${theme.fontFamily.ui};
+          font-style: normal;
+          font-weight: 700;
+          font-size: 20px;
+          line-height: 28px; /* 140% */
+          letter-spacing: 0.25px;
+
+          color: ${theme.color.foreground.neutralBase};
+          text-align: center;
+
+          display: flex;
+          justify-content: space-between;
+        `, children: [_jsxs("div", { css: css `
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: flex-start;
+            gap: 16px;
+            text-align: left;
+          `, children: [icon && (_jsx("div", { css: css `
+                display: none;
+                ${MOBILE(css `
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                  color: ${theme.color.background.infoActive};
+
+                  svg {
+                    width: 32px;
+                    height: 32px;
+                  }
+                `)}
               `, children: icon })), children] }), onClose && (_jsx(SquareButton, { color: "icon", size: "small", icon: _jsx(CloseFillIcon, {}), onClick: onClose, "aria-label": "\uB2EB\uAE30" }))] })) }));
 });