@team-monolith/cds 1.42.1 → 1.43.1

package/dist/CodleDesignSystemProvider.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { Theme } from "@emotion/react";
 export declare const light: {
     fontFamily: {
         ui: string;
@@ -110,7 +111,119 @@ export declare const light: {
         };
     };
 };
+export declare const dark: {
+    fontFamily: {
+        ui: string;
+        title: string;
+    };
+    color: {
+        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;
+        };
+        blanket: {
+            neutral: string;
+            neutralLight: string;
+            neutralHeavy: string;
+            inverse: string;
+            inverseLight: string;
+            inverseHeavy: string;
+        };
+    };
+};
 interface CodleDesignSystemContext {
+    theme?: Theme;
     lexical?: {
         uploadByFile: (file: File) => Promise<string>;
     };

package/dist/CodleDesignSystemProvider.js

@@ -116,6 +116,117 @@ export const light = {
         },
     },
 };
+export const dark = {
+    fontFamily: {
+        ui: FONT.pretendard,
+        title: FONT.naumSquareNeo,
+    },
+    color: {
+        background: {
+            neutralBase: COLOR.black,
+            neutralBaseActive: COLOR.grey08,
+            neutralBaseDisabled: COLOR.grey09,
+            neutralAlt: COLOR.grey08,
+            neutralAltActive: COLOR.grey07,
+            neutralAltDisabled: COLOR.grey09,
+            primary: COLOR.blue04,
+            primaryActive: COLOR.blue03,
+            primaryDisabled: COLOR.blue07,
+            secondary: COLOR.orange04,
+            secondaryActive: COLOR.orange03,
+            secondaryDisabled: COLOR.orange08,
+            danger: COLOR.red03,
+            dangerActive: COLOR.red02,
+            dangerDisabled: COLOR.red09,
+            success: COLOR.green04,
+            successActive: COLOR.green03,
+            successDisabled: COLOR.green08,
+            info: COLOR.teal03,
+            infoActive: COLOR.teal02,
+            infoDisabled: COLOR.teal09,
+            warning: COLOR.yellow03,
+            warningActive: COLOR.yellow02,
+            warningDisabled: COLOR.yellow09,
+            inverse: COLOR.white,
+            inverseActive: COLOR.grey03,
+            inverseDisabled: COLOR.grey07,
+        },
+        foreground: {
+            neutralBase: COLOR.white,
+            neutralBaseActive: COLOR.grey02,
+            neutralBaseDisabled: COLOR.grey04,
+            neutralAlt: COLOR.black,
+            neutralAltActive: COLOR.grey08,
+            neutralAltDisabled: COLOR.grey02,
+            primary: COLOR.blue04,
+            primaryActive: COLOR.blue03,
+            primaryDisabled: COLOR.blue07,
+            secondary: COLOR.orange04,
+            secondaryActive: COLOR.orange03,
+            secondaryDisabled: COLOR.orange07,
+            danger: COLOR.red03,
+            dangerActive: COLOR.red02,
+            dangerDisabled: COLOR.red07,
+            success: COLOR.green04,
+            successActive: COLOR.green03,
+            successDisabled: COLOR.green07,
+            info: COLOR.teal03,
+            infoActive: COLOR.teal02,
+            infoDisabled: COLOR.teal07,
+            warning: COLOR.yellow03,
+            warningActive: COLOR.yellow02,
+            warningDisabled: COLOR.yellow07,
+        },
+        container: {
+            blueContainer: COLOR.blue09,
+            blueOnContainer: COLOR.blue02,
+            orangeContainer: COLOR.orange09,
+            orangeOnContainer: COLOR.orange02,
+            redContainer: COLOR.red09,
+            redOnContainer: COLOR.red02,
+            greenContainer: COLOR.green09,
+            greenOnContainer: COLOR.green02,
+            tealContainer: COLOR.teal09,
+            tealOnContainer: COLOR.teal02,
+            yellowContainer: COLOR.yellow08,
+            yellowOnContainer: COLOR.yellow02,
+            obsidianContainer: COLOR.grey07,
+            obsidianOnContainer: COLOR.grey03,
+            marbleContainer: COLOR.grey03,
+            marbleOnContainer: COLOR.grey07,
+        },
+        brand: {
+            brandOriginal: COLOR.blue06,
+            brandAlt: COLOR.blue04,
+            brandAccent: COLOR.blue03,
+            brandFaded: COLOR.blue07,
+            pdf: "#FF5850",
+            pdfAlt: "#800700",
+            quiz: "#F889AA",
+            quizAlt: "#760A27",
+            python: "#3E88FF",
+            pythonAlt: "#002666",
+            embedded: "#7C8597",
+            embeddedAlt: "#434956",
+            board: "#42DB88",
+            boardAlt: "#11552D",
+            scratch: "#FF9D3E",
+            scratchAlt: "#663000",
+            entry: "#32D27D",
+            entryAlt: "#135330",
+            video: "#5F32DE",
+            videoAlt: "#2D2640",
+        },
+        blanket: {
+            neutral: COLOR.alphaf20,
+            neutralLight: COLOR.alphaf10,
+            neutralHeavy: COLOR.alphaf50,
+            inverse: COLOR.alpha030,
+            inverseLight: COLOR.alpha015,
+            inverseHeavy: COLOR.alpha065,
+        },
+    },
+};
 export const CodleDesignSystemContext = createContext({});
 // eslint-disable-next-line import/no-anonymous-default-export
 export default function (props) {
@@ -131,9 +242,10 @@ export default function (props) {
             },
         },
     });
+    const { theme = light } = props;
     return (_jsxs(_Fragment, { children: [_jsx(Global, { styles: css `
           body {
             font-family: ${FONT.pretendard};
           }
-        ` }), _jsx(MuiThemeProvider, Object.assign({ theme: muiTheme }, { children: _jsx(ThemeProvider, Object.assign({ theme: light }, { children: _jsx(CodleDesignSystemContext.Provider, Object.assign({ value: props }, { children: props.children })) })) }))] }));
+        ` }), _jsx(MuiThemeProvider, Object.assign({ theme: muiTheme }, { children: _jsx(ThemeProvider, Object.assign({ theme: theme }, { children: _jsx(CodleDesignSystemContext.Provider, Object.assign({ value: props }, { children: props.children })) })) }))] }));
 }

package/dist/components/Banner.js

@@ -52,9 +52,9 @@ const Banner = React.forwardRef((props, ref) => {
     const theme = useTheme();
     return (_jsxs(Component, Object.assign({}, other, { ref: ref, className: className, css: [
             css `
-            box-sizing: border-box;
             display: flex;
             align-items: center;
+            padding: 0px 12px;
             line-height: 125%;
             background: ${COLOR_PALETTE(theme, color).background};
           `,
@@ -67,6 +67,7 @@ const Banner = React.forwardRef((props, ref) => {
                 width: fit-content;
               `,
         ] }, { children: [icon && (_jsx(IconDiv, Object.assign({ css: css `
+              align-self: ${headline && content ? "flex-start" : "center"};
               color: ${COLOR_PALETTE(theme, color).headline};
             ` }, { children: icon }))), _jsxs(TextContainer, { children: [headline && (_jsx(HeadlineDiv, Object.assign({ css: css `
                 color: ${COLOR_PALETTE(theme, color).headline};
@@ -78,12 +79,17 @@ const Banner = React.forwardRef((props, ref) => {
               > button {
                 color: ${COLOR_PALETTE(theme, color).content};
               }
-            `, color: "icon", size: "medium", icon: _jsx(CloseFillIcon, {}), onClick: onClose }))] })));
+            `, color: "icon", size: "small", icon: _jsx(CloseFillIcon, {}), onClick: onClose }))] })));
 });
 const IconDiv = styled.div `
   display: flex;
-  align-items: center;
-  padding: 16px 0px 16px 16px;
+  align-items: flex-start;
+  padding: 12px 0px;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
 `;
 const HeadlineDiv = styled.div(({ theme }) => css `
     font-family: ${theme.fontFamily.ui};
@@ -105,7 +111,7 @@ const TextContainer = styled.div `
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding: 16px;
+  padding: 12px;
   gap: 4px;
 `;
 export default Banner;

package/dist/components/Button.d.ts

@@ -19,6 +19,8 @@ export interface ButtonOwnProps<RootComponentType extends React.ElementType> {
     label: React.ReactNode;
     /** 버튼 텍스트 굵음 여부 */
     bold?: boolean;
+    /** 로딩 여부 */
+    loading?: boolean;
     /** 전체 너비 유무 */
     fullWidth?: boolean;
 }

package/dist/components/Button.js

@@ -15,18 +15,19 @@ import { css, useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
 import React from "react";
 import { HOVER } from "../utils/hover";
+import { Spinner } from "..";
 const COLOR_TO_BUTTON_STYLE = (theme, color, disabled) => ({
     primary: css `
       ${disabled
         ? css `
-            color: ${theme.color.foreground.neutralAlt};
+            color: ${theme.color.foreground.neutralAltDisabled};
             background: ${theme.color.background.primaryDisabled};
           `
         : css `
             color: ${theme.color.foreground.neutralAlt};
             background: ${theme.color.background.primary};
             ${HOVER(css `
-              color: ${theme.color.foreground.neutralAlt};
+              color: ${theme.color.foreground.neutralAltActive};
               background: ${theme.color.background.primaryActive};
             `)}
           `}
@@ -34,7 +35,7 @@ const COLOR_TO_BUTTON_STYLE = (theme, color, disabled) => ({
     grey: css `
       ${disabled
         ? css `
-            background: ${theme.color.background.neutralAlt};
+            background: ${theme.color.background.neutralAltDisabled};
             color: ${theme.color.foreground.neutralBaseDisabled};
           `
         : css `
@@ -42,21 +43,21 @@ const COLOR_TO_BUTTON_STYLE = (theme, color, disabled) => ({
             color: ${theme.color.foreground.neutralBase};
             ${HOVER(css `
               background: ${theme.color.background.neutralAltActive};
-              color: ${theme.color.foreground.neutralBase};
+              color: ${theme.color.foreground.neutralBaseActive};
             `)}
           `}
     `,
     danger: css `
       ${disabled
         ? css `
-            color: ${theme.color.foreground.neutralAlt};
+            color: ${theme.color.foreground.neutralAltDisabled};
             background: ${theme.color.background.dangerDisabled};
           `
         : css `
             color: ${theme.color.foreground.neutralAlt};
             background: ${theme.color.background.danger};
             ${HOVER(css `
-              color: ${theme.color.foreground.neutralAlt};
+              color: ${theme.color.foreground.neutralAltActive};
               background: ${theme.color.background.dangerActive};
             `)}
           `}
@@ -71,8 +72,8 @@ const COLOR_TO_BUTTON_STYLE = (theme, color, disabled) => ({
             background: none;
             color: ${theme.color.foreground.neutralBase};
             ${HOVER(css `
-              background: ${theme.color.background.neutralAltActive};
-              color: ${theme.color.foreground.neutralBase};
+              background: ${theme.color.blanket.neutralLight};
+              color: ${theme.color.foreground.neutralBaseActive};
             `)}
           `}
     `,
@@ -86,8 +87,8 @@ const COLOR_TO_BUTTON_STYLE = (theme, color, disabled) => ({
             background: none;
             color: ${theme.color.foreground.danger};
             ${HOVER(css `
-              background: ${theme.color.background.neutralAltActive};
-              color: ${theme.color.foreground.danger};
+              background: ${theme.color.blanket.neutralLight};
+              color: ${theme.color.foreground.dangerActive};
             `)}
           `}
     `,
@@ -101,8 +102,8 @@ const COLOR_TO_BUTTON_STYLE = (theme, color, disabled) => ({
             background: none;
             color: ${theme.color.foreground.primary};
             ${HOVER(css `
-              background: ${theme.color.background.neutralAltActive};
-              color: ${theme.color.foreground.primary};
+              background: ${theme.color.blanket.neutralLight};
+              color: ${theme.color.foreground.primaryActive};
             `)}
           `}
     `,
@@ -117,7 +118,7 @@ const COLOR_TO_BUTTON_STYLE = (theme, color, disabled) => ({
             color: ${theme.color.foreground.neutralAlt};
             ${HOVER(css `
               background: ${theme.color.background.inverseActive};
-              color: ${theme.color.foreground.neutralAlt};
+              color: ${theme.color.foreground.neutralAltActive};
             `)}
           `}
     `,
@@ -132,7 +133,7 @@ const COLOR_TO_BUTTON_STYLE = (theme, color, disabled) => ({
             color: ${theme.color.foreground.neutralBase};
             ${HOVER(css `
               background: ${theme.color.background.neutralAltActive};
-              color: ${theme.color.foreground.neutralBase};
+              color: ${theme.color.foreground.neutralBaseActive};
             `)}
           `}
     `,
@@ -143,6 +144,7 @@ const SIZE_TO_BUTTON_STYLE = {
     height: 56px;
     padding: 0 20px;
     gap: 10px;
+    border-radius: 12px;
 
     svg {
       width: 24px;
@@ -154,6 +156,7 @@ const SIZE_TO_BUTTON_STYLE = {
     height: 48px;
     padding: 0 16px;
     gap: 8px;
+    border-radius: 10px;
 
     svg {
       width: 20px;
@@ -165,6 +168,7 @@ const SIZE_TO_BUTTON_STYLE = {
     height: 36px;
     padding: 0 12px;
     gap: 8px;
+    border-radius: 8px;
 
     svg {
       width: 16px;
@@ -176,6 +180,7 @@ const SIZE_TO_BUTTON_STYLE = {
     height: 28px;
     padding: 0 8px;
     gap: 4px;
+    border-radius: 6px;
 
     svg {
       width: 12px;
@@ -205,7 +210,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)
  */
 const Button = React.forwardRef(function Button(props, ref) {
-    const { className, component: Component = "button", disabled, color, size, startIcon, endIcon, label, fullWidth, bold = false } = props, other = __rest(props, ["className", "component", "disabled", "color", "size", "startIcon", "endIcon", "label", "fullWidth", "bold"]);
+    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 theme = useTheme();
     return (_jsxs(Component, Object.assign({ type: "button" }, other, { className: className, ref: ref, css: [
             css `
@@ -215,9 +220,8 @@ const Button = React.forwardRef(function Button(props, ref) {
           gap: 8px;
 
           border: none;
-          border-radius: 8px;
 
-          ${disabled
+          ${disabled || loading
                 ? css `
                 cursor: default;
                 pointer-events: none;
@@ -237,9 +241,9 @@ const Button = React.forwardRef(function Button(props, ref) {
                 flex-shrink: 0;
               `};
         `,
-            COLOR_TO_BUTTON_STYLE(theme, color, Boolean(disabled)),
+            COLOR_TO_BUTTON_STYLE(theme, color, Boolean(disabled || loading)),
             SIZE_TO_BUTTON_STYLE[size],
-        ], disabled: disabled }, { children: [startIcon, label && (_jsx(Label, Object.assign({ size: size, bold: bold }, { children: label }))), endIcon] })));
+        ], disabled: disabled || loading }, { children: [loading ? _jsx(Spinner, {}) : startIcon, label && (_jsx(Label, Object.assign({ size: size, bold: bold }, { children: label }))), endIcon] })));
 });
 const Label = styled.span `
   font-weight: ${({ bold }) => (bold ? 700 : 400)};

package/dist/components/CheckboxInput.js

@@ -25,8 +25,8 @@ const CHECKBOX_ICON_STYLE = (theme, type, disabled) => {
       ${disabled
             ? css `
             rect {
-              fill: ${theme.color.background.neutralAlt};
-              stroke: ${theme.color.background.neutralAltActive};
+              fill: ${theme.color.background.neutralBaseDisabled};
+              stroke: ${theme.color.foreground.neutralBaseDisabled};
             }
           `
             : css `
@@ -48,7 +48,7 @@ const CHECKBOX_ICON_STYLE = (theme, type, disabled) => {
       ${disabled
             ? css `
             rect {
-              fill: ${theme.color.background.neutralAlt};
+              fill: ${theme.color.background.neutralBaseDisabled};
               stroke: ${theme.color.background.primaryDisabled};
             }
             path {
@@ -76,7 +76,7 @@ const CHECKBOX_ICON_STYLE = (theme, type, disabled) => {
       ${disabled
             ? css `
             rect {
-              fill: ${theme.color.background.neutralAlt};
+              fill: ${theme.color.background.neutralBaseDisabled};
               stroke: ${theme.color.background.primaryDisabled};
             }
             rect + rect {
@@ -114,7 +114,7 @@ const CheckboxInput = React.forwardRef((props, ref) => {
         onChange,
         inputProps,
     };
-    return (_jsxs(Label, Object.assign({ className: className, ref: ref }, other, { children: [_jsx(Checkbox, Object.assign({}, checkboxProps)), _jsx("span", Object.assign({ css: css `
+    return (_jsxs(Label, Object.assign({ className: className, ref: ref, disabled: disabled !== null && disabled !== void 0 ? disabled : false }, other, { children: [_jsx(Checkbox, Object.assign({}, checkboxProps)), _jsx("span", Object.assign({ css: css `
             margin-left: 8px;
           ` }, { children: label }))] })));
 });
@@ -155,7 +155,9 @@ const Label = styled.label `
   font-size: 14px;
   font-weight: 500;
   line-height: 16px;
-  color: ${({ theme }) => theme.color.foreground.neutralBase};
+  color: ${({ theme, disabled }) => disabled
+    ? theme.color.foreground.neutralBaseDisabled
+    : theme.color.foreground.neutralBase};
   align-self: center;
 `;
 const CheckboxIcon = (props) => {

package/dist/components/RadioInput.js

@@ -24,10 +24,9 @@ const TYPE_TO_ICON_STYLE = (theme, type, disabled) => {
       }
       ${disabled
             ? css `
-            cursor: default;
             path {
-              stroke: ${theme.color.background.primaryDisabled};
-              fill: ${theme.color.background.neutralAlt};
+              stroke: ${theme.color.foreground.neutralBaseDisabled};
+              fill: ${theme.color.background.neutralBaseDisabled};
             }
           `
             : css `
@@ -48,10 +47,9 @@ const TYPE_TO_ICON_STYLE = (theme, type, disabled) => {
       }
       ${disabled
             ? css `
-            cursor: default;
             path {
               stroke: ${theme.color.background.primaryDisabled};
-              fill: ${theme.color.background.neutralAlt};
+              fill: ${theme.color.background.neutralBaseDisabled};
             }
             rect {
               fill: ${theme.color.background.primaryDisabled};
@@ -85,14 +83,14 @@ const RadioInput = React.forwardRef((props, ref) => {
         onChange,
         inputProps,
     };
-    return (_jsxs(Label, Object.assign({ className: className, ref: ref }, other, { children: [_jsx(RadioButton, Object.assign({}, radioProps)), _jsx("span", Object.assign({ css: css `
+    return (_jsxs(Label, Object.assign({ className: className, ref: ref, disabled: disabled !== null && disabled !== void 0 ? disabled : false }, other, { children: [_jsx(RadioButton, Object.assign({}, radioProps)), _jsx("span", Object.assign({ css: css `
           margin-left: 8px;
         ` }, { children: label }))] })));
 });
 const RadioButton = React.forwardRef((props, ref) => {
     const { className, checked, label, spacer = false, disabled = false, onChange, inputProps } = props, other = __rest(props, ["className", "checked", "label", "spacer", "disabled", "onChange", "inputProps"]);
     const type = props.checked ? "selected" : "default";
-    return (_jsxs(RadioButtonContainer, Object.assign({ className: className, spacer: spacer, ref: ref }, other, { children: [_jsx(StyledInput, Object.assign({ type: "radio" }, inputProps, { checked: checked, disabled: disabled, onChange: onChange })), _jsx(RadioButtonIcon, { type: type, disabled: disabled })] })));
+    return (_jsxs(RadioButtonContainer, Object.assign({ className: className, spacer: spacer, disabled: disabled, ref: ref }, other, { children: [_jsx(StyledInput, Object.assign({ type: "radio" }, inputProps, { checked: checked, disabled: disabled, onChange: onChange })), _jsx(RadioButtonIcon, { type: type, disabled: disabled })] })));
 });
 const Label = styled.label `
   display: flex;
@@ -101,15 +99,17 @@ const Label = styled.label `
   font-size: 14px;
   font-weight: 500;
   line-height: 16px;
-  color: ${({ theme }) => theme.color.foreground.neutralBase};
+  color: ${({ theme, disabled }) => disabled
+    ? theme.color.foreground.neutralBaseDisabled
+    : theme.color.foreground.neutralBase};
   align-self: center;
 `;
-const RadioButtonContainer = styled.span(({ spacer }) => css `
+const RadioButtonContainer = styled.span(({ spacer, disabled }) => css `
     display: inline-flex;
     position: relative;
     width: 16px;
     height: 16px;
-    cursor: pointer;
+    cursor: ${disabled ? "default" : "pointer"};
     margin-bottom: ${spacer ? "8px" : "0"};
   `);
 const StyledInput = styled.input `

package/dist/components/Spinner.d.ts

@@ -0,0 +1,2 @@
+/** @jsxImportSource @emotion/react */
+export declare function Spinner(): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Spinner.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+export function Spinner() {
+    return (_jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, { children: [_jsx("path", { d: "M15.6025 10.4904C16.095 8.98682 16.1307 7.37089 15.7048 5.84702C15.279 4.32314 14.4109 2.95976 13.2102 1.92928C12.0095 0.898795 10.5303 0.247495 8.95942 0.0577392C7.38859 -0.132017 5.79677 0.148294 4.38525 0.863224C2.97373 1.57815 1.80591 2.69559 1.02946 4.07424C0.253021 5.45288 -0.0971706 7.0308 0.0231732 8.60847C0.143517 10.1861 0.728991 11.6927 1.70556 12.9376C2.68213 14.1825 4.00592 15.1099 5.50955 15.6025L6.50573 12.5615C5.60355 12.2659 4.80928 11.7095 4.22333 10.9626C3.63739 10.2156 3.28611 9.31168 3.2139 8.36508C3.1417 7.41848 3.35181 6.47173 3.81768 5.64454C4.28354 4.81736 4.98424 4.14689 5.83115 3.71793C6.67806 3.28898 7.63316 3.12079 8.57565 3.23464C9.51815 3.3485 10.4057 3.73928 11.1261 4.35757C11.8465 4.97586 12.3674 5.79389 12.6229 6.70821C12.8784 7.62254 12.857 8.59209 12.5615 9.49427L15.6025 10.4904Z", fill: "currentColor" }), _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", dur: "1s", from: "0 0 0", to: "360 0 0", repeatCount: "indefinite" })] })));
+}

package/dist/components/SquareButton.d.ts

@@ -19,6 +19,8 @@ export interface SquareButtonOwnProps<RootComponentType extends React.ElementTyp
     label?: string;
     /** 전체 너비 유무 */
     fullWidth?: boolean;
+    /** 로딩 여부 */
+    loading?: boolean;
     /** 버튼 클릭 시 호출될 콜백 함수 */
     onClick?: () => void;
 }

package/dist/components/SquareButton.js

@@ -15,6 +15,7 @@ import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import React from "react";
 import { HOVER } from "../utils/hover";
+import { Spinner } from "./Spinner";
 const COLOR_TO_BUTTON_STYLE = (theme, color) => ({
     danger: css `
       border: none;
@@ -23,9 +24,11 @@ const COLOR_TO_BUTTON_STYLE = (theme, color) => ({
 
       ${HOVER(css `
         background: ${theme.color.background.dangerActive};
+        color: ${theme.color.foreground.neutralAltActive};
       `)}
       &:disabled {
         background: ${theme.color.background.dangerDisabled};
+        color: ${theme.color.foreground.neutralAltDisabled};
       }
     `,
     grey: css `
@@ -35,10 +38,10 @@ const COLOR_TO_BUTTON_STYLE = (theme, color) => ({
 
       ${HOVER(css `
         background: ${theme.color.background.neutralAltActive};
-        color: ${theme.color.foreground.neutralBase};
+        color: ${theme.color.foreground.neutralBaseActive};
       `)}
       &:disabled {
-        background: ${theme.color.background.neutralAlt};
+        background: ${theme.color.background.neutralAltDisabled};
         color: ${theme.color.foreground.neutralBaseDisabled};
       }
     `,
@@ -49,9 +52,11 @@ const COLOR_TO_BUTTON_STYLE = (theme, color) => ({
 
       ${HOVER(css `
         background: ${theme.color.background.primaryActive};
+        color: ${theme.color.foreground.neutralAltActive};
       `)}
       &:disabled {
         background: ${theme.color.background.primaryDisabled};
+        color: ${theme.color.foreground.neutralAltDisabled};
       }
     `,
     icon: css `
@@ -60,8 +65,8 @@ const COLOR_TO_BUTTON_STYLE = (theme, color) => ({
       color: ${theme.color.foreground.neutralBase};
 
       ${HOVER(css `
-        background: ${theme.color.background.neutralAltActive};
-        color: ${theme.color.foreground.neutralBase};
+        background: ${theme.color.blanket.neutralLight};
+        color: ${theme.color.foreground.neutralBaseActive};
       `)}
       &:disabled {
         background: none;
@@ -74,7 +79,7 @@ const COLOR_TO_BUTTON_STYLE = (theme, color) => ({
       color: ${theme.color.foreground.neutralAlt};
       ${HOVER(css `
         background: ${theme.color.background.inverseActive};
-        color: ${theme.color.foreground.neutralAlt};
+        color: ${theme.color.foreground.neutralAltActive};
       `)}
       &:disabled {
         background: ${theme.color.background.inverseDisabled};
@@ -87,7 +92,7 @@ const COLOR_TO_BUTTON_STYLE = (theme, color) => ({
       color: ${theme.color.foreground.neutralBase};
       ${HOVER(css `
         background: ${theme.color.background.neutralAltActive};
-        color: ${theme.color.foreground.neutralBase};
+        color: ${theme.color.foreground.neutralBaseActive};
       `)}
       &:disabled {
         background: ${theme.color.background.neutralAltDisabled};
@@ -99,41 +104,45 @@ const SIZE_TO_BUTTON_STYLE = {
     large: css `
     width: 56px;
     height: 56px;
-    padding: 16px;
+    padding: 12px;
+    border-radius: 8px;
 
     svg {
-      width: 24px;
-      height: 24px;
+      width: 32px;
+      height: 32px;
     }
   `,
     medium: css `
     width: 48px;
     height: 48px;
-    padding: 14px;
+    padding: 10px;
+    border-radius: 8px;
 
     svg {
-      width: 20px;
-      height: 20px;
+      width: 28px;
+      height: 28px;
     }
   `,
     small: css `
     width: 36px;
     height: 36px;
-    padding: 10px;
+    padding: 8px;
+    border-radius: 8px;
 
     svg {
-      width: 16px;
-      height: 16px;
+      width: 20px;
+      height: 20px;
     }
   `,
     xsmall: css `
     width: 28px;
     height: 28px;
-    padding: 8px;
+    padding: 6px;
+    border-radius: 4px;
 
     svg {
-      width: 12px;
-      height: 12px;
+      width: 16px;
+      height: 16px;
     }
   `,
 };
@@ -159,7 +168,7 @@ const SIZE_TO_LABEL_STYLE = {
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=22-374&t=kTLv3t86qtGalHSS-0)
  */
 const SquareButton = React.forwardRef(function SquareButton(props, ref) {
-    const { className, component: Component = "span", disabled, type = "button", color, size, icon, label, fullWidth, onClick } = props, other = __rest(props, ["className", "component", "disabled", "type", "color", "size", "icon", "label", "fullWidth", "onClick"]);
+    const { className, component: Component = "span", disabled, type = "button", color, size, icon, label, fullWidth, onClick, loading = false } = props, other = __rest(props, ["className", "component", "disabled", "type", "color", "size", "icon", "label", "fullWidth", "onClick", "loading"]);
     return (_jsxs(Component, Object.assign({}, other, { ref: ref, className: className, css: css `
           display: flex;
           flex-direction: column;
@@ -167,10 +176,9 @@ const SquareButton = React.forwardRef(function SquareButton(props, ref) {
           gap: 8px;
 
           width: ${fullWidth ? "100%" : "fit-content"};
-        ` }, { children: [_jsx(Button, Object.assign({ type: type, color: color, size: size, disabled: disabled, fullWidth: fullWidth, onClick: onClick }, { children: icon })), label && (_jsx(Label, Object.assign({ disabled: disabled, size: size }, { children: label })))] })));
+        ` }, { children: [_jsx(Button, Object.assign({ type: type, color: color, size: size, disabled: disabled || loading, fullWidth: fullWidth, onClick: onClick }, { children: loading ? _jsx(Spinner, {}) : icon })), label && (_jsx(Label, Object.assign({ disabled: disabled || loading, size: size }, { children: label })))] })));
 });
 const Button = styled.button `
-  border-radius: 8px;
   cursor: pointer;
   &:disabled {
     cursor: default;

package/dist/components/Switch.js

@@ -39,50 +39,73 @@ const SIZE_TO_SWTICH_SIZE = {
 const StyledSwitch = styled(MuiSwitch, {
     shouldForwardProp: (prop) => prop !== "switchSize",
 })(({ theme, switchSize }) => css `
-    width: ${SIZE_TO_SWTICH_SIZE[switchSize].width};
-    height: ${SIZE_TO_SWTICH_SIZE[switchSize].height};
-    padding: 0; // 기존 Mui padding 속성 override
-    & .MuiSwitch-switchBase {
-      padding: 2px;
-      &.Mui-checked {
-        transform: translateX(${SIZE_TO_SWTICH_SIZE[switchSize].translateX});
-        color: ${theme.color.foreground.neutralAlt};
+    // Specificity를 높이기 위해 최상위에 &.MuiSwitch-root를 추가
+    &.MuiSwitch-root {
+      width: ${SIZE_TO_SWTICH_SIZE[switchSize].width};
+      height: ${SIZE_TO_SWTICH_SIZE[switchSize].height};
+      padding: 0; // 기존 Mui padding 속성 override
+      .MuiSwitch-switchBase {
+        padding: 2px;
+        &.Mui-checked {
+          transform: translateX(${SIZE_TO_SWTICH_SIZE[switchSize].translateX});
+        }
+      }
+
+      .MuiSwitch-thumb {
+        box-shadow: none;
+        filter: drop-shadow(0px 2px 4px rgba(0, 35, 11, 0.2));
+        width: ${SIZE_TO_SWTICH_SIZE[switchSize].thumbSize};
+        height: ${SIZE_TO_SWTICH_SIZE[switchSize].thumbSize};
+        border-radius: 77px;
+        transition: color 0.3s ease;
+
+        color: ${theme.color.foreground.primary};
+      }
+
+      .MuiSwitch-track {
+        border-radius: 16px;
+        opacity: 1;
+        box-sizing: border-box;
+
+        background: none;
+        border: 1px solid ${theme.color.background.primary};
+      }
+
+      .Mui-disabled {
         & + .MuiSwitch-track {
           opacity: 1;
+          border-color: ${theme.color.background.primaryDisabled};
+        }
+
+        .MuiSwitch-thumb {
+          filter: none;
+          color: ${theme.color.foreground.primaryDisabled};
+        }
+      }
+
+      .Mui-checked {
+        & + .MuiSwitch-track {
+          opacity: 1;
+          border-color: ${theme.color.background.primary};
           background-color: ${theme.color.background.primary};
         }
-        &.Mui-disabled + .MuiSwitch-track {
+
+        .MuiSwitch-thumb {
+          color: ${theme.color.background.neutralBase};
+        }
+      }
+
+      .Mui-checked.Mui-disabled {
+        & + .MuiSwitch-track {
           opacity: 1;
+          border-color: ${theme.color.background.primaryDisabled};
           background-color: ${theme.color.background.primaryDisabled};
         }
-      }
-      &.Mui-disabled + .MuiSwitch-track {
-        opacity: 1;
-        background-color: ${theme.color.background.neutralAltDisabled};
-      }
-      &:hover {
-        background-color: inherit; // 기존 Mui hover 속성 override
-      }
-    }
-    .Mui-disabled .MuiSwitch-thumb {
-      filter: none;
-      box-shadow: none;
-      background-color: ${theme.color.foreground.neutralAltDisabled};
-    }
 
-    .MuiSwitch-thumb {
-      box-shadow: none;
-      filter: drop-shadow(0px 2px 4px rgba(0, 35, 11, 0.2));
-      width: ${SIZE_TO_SWTICH_SIZE[switchSize].thumbSize};
-      height: ${SIZE_TO_SWTICH_SIZE[switchSize].thumbSize};
-      border-radius: 77px;
-      transition: width 300ms;
-    }
-    .MuiSwitch-track {
-      border-radius: 16px;
-      opacity: 1;
-      background-color: ${theme.color.background.neutralAltActive};
-      box-sizing: border-box;
+        .MuiSwitch-thumb {
+          color: ${theme.color.background.neutralBaseDisabled};
+        }
+      }
     }
   `);
 export default Switch;

package/dist/index.d.ts

@@ -17,6 +17,7 @@ export { default as Popover } from "./components/Popover";
 export * from "./components/Popover";
 export { default as RadioInput } from "./components/RadioInput";
 export * from "./components/RadioInput";
+export * from "./components/Spinner";
 export { default as SquareButton } from "./components/SquareButton";
 export * from "./components/SquareButton";
 export { default as Switch } from "./components/Switch";
@@ -31,7 +32,7 @@ export { default as color } from "./foundation/color";
 export { default as shadows } from "./foundation/shadows";
 export * from "./foundation/breakpoints";
 export { default as CodleDesignSystemProvider } from "./CodleDesignSystemProvider";
-export { light } from "./CodleDesignSystemProvider";
+export * from "./CodleDesignSystemProvider";
 export * from "./icons";
 export * from "./icons/Custom";
 export * from "./utils/hover";

package/dist/index.js

@@ -17,6 +17,7 @@ export { default as Popover } from "./components/Popover";
 export * from "./components/Popover";
 export { default as RadioInput } from "./components/RadioInput";
 export * from "./components/RadioInput";
+export * from "./components/Spinner";
 export { default as SquareButton } from "./components/SquareButton";
 export * from "./components/SquareButton";
 export { default as Switch } from "./components/Switch";
@@ -31,7 +32,7 @@ export { default as color } from "./foundation/color";
 export { default as shadows } from "./foundation/shadows";
 export * from "./foundation/breakpoints";
 export { default as CodleDesignSystemProvider } from "./CodleDesignSystemProvider";
-export { light } from "./CodleDesignSystemProvider";
+export * from "./CodleDesignSystemProvider";
 export * from "./icons";
 export * from "./icons/Custom";
 export * from "./utils/hover";

package/package.json

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