@team-monolith/cds 0.2.11 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "0.2.11",
+  "version": "0.3.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {

package/src/cds/components/Button.tsx

@@ -172,9 +172,6 @@ export interface ButtonOwnProps<RootComponentType extends React.ElementType> {
 
   /** 컴포넌트 내 표기될 문자열 */
   label: string;
-
-  /** 버튼 클릭 시 호출될 콜백 함수 */
-  onClick?: () => void;
 }
 
 export type ButtonProps<
@@ -210,7 +207,6 @@ const Button: ButtonComponent = React.forwardRef(function Button<
     startIcon,
     endIcon,
     label,
-    onClick,
     ...other
   } = props;
   const theme = useTheme();
@@ -242,7 +238,6 @@ const Button: ButtonComponent = React.forwardRef(function Button<
         SIZE_TO_BUTTON_STYLE[size],
       ]}
       disabled={disabled}
-      onClick={onClick}
     >
       {startIcon}
       <Label size={size}>{label}</Label>

package/src/cds/components/Input.tsx

@@ -104,6 +104,11 @@ const Input = React.forwardRef<any, InputProps>(
       ...other
     } = props;
 
+    const {
+      className: _className,
+      ...inputBaseProps
+    } = props;
+
     return (
       <InputWrapper
         className={props.className}
@@ -114,10 +119,10 @@ const Input = React.forwardRef<any, InputProps>(
       >
         {label ? (
           <Label disabled={props.disabled}>
-            {label} <InputBase {...props} />
+            {label} <InputBase {...inputBaseProps} />
           </Label>
         ) : (
-          <InputBase {...props} />
+          <InputBase {...inputBaseProps} />
         )}
         {hintText && (
           <Hint color={props.color} disabled={props.disabled}>

package/src/cds/foundation/shadows.ts

@@ -14,4 +14,4 @@ const shadows = {
     "0px 4.8px 14.4px rgba(0, 0, 0, 0.18), 0px 25.6px 57.6px rgba(0, 0, 0, 0.22)",
 };
 
-export default shadows;
+export default shadows;

package/src/cds/index.ts

@@ -61,4 +61,4 @@ export * from "./patterns/SegmentedControl";
 export * from "./patterns/Table";
 
 export { default as CodleDesignSystemProvider } from "./CodleDesignSystemProvider";
-export * from "./CodleDesignSystemProvider";
+export { light } from "./CodleDesignSystemProvider";

package/dist/CodleDesignSystemProvider.d.ts

@@ -1,69 +0,0 @@
-/// <reference types="react" />
-export declare const light: {
-    color: {
-        background: {
-            neutralBase: 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;
-        };
-        foreground: {
-            neutralBase: string;
-            neutralBaseDisabled: string;
-            neutralAlt: string;
-            neutralAltDisabled: string;
-            primary: string;
-            primaryDisabled: string;
-            secondary: string;
-            secondaryDisabled: string;
-            danger: string;
-            dangerDisabled: string;
-            success: string;
-            successDisabled: string;
-            info: string;
-            infoDisabled: string;
-            warning: string;
-            warningDisabled: string;
-        };
-        container: {
-            primaryContainer: string;
-            primaryOnContainer: string;
-            secondaryContainer: string;
-            secondaryOnContainer: string;
-            dangerContainer: string;
-            dangerOnContainer: string;
-            successContainer: string;
-            successOnContainer: string;
-            infoContainer: string;
-            infoOnContainer: string;
-            warningContainer: string;
-            warningOnContainer: string;
-            obsidianContainer: string;
-            obsidianOnContainer: string;
-            marbleContainer: string;
-            marbleOnContainer: string;
-        };
-    };
-};
-export default function (props: {
-    children: React.ReactNode;
-    fontFamily?: string;
-}): React.ReactElement;

package/dist/CodleDesignSystemProvider.js

@@ -1,96 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ThemeProvider } from "@emotion/react";
-import { ThemeProvider as MuiThemeProvider } from "@mui/material";
-import COLOR from "./foundation/color";
-import { createTheme } from "@mui/material";
-export var light = {
-    color: {
-        background: {
-            neutralBase: COLOR.white,
-            neutralAlt: COLOR.grey03,
-            neutralAltActive: COLOR.grey04,
-            neutralAltDisabled: COLOR.grey03,
-            primary: COLOR.blue06,
-            primaryActive: COLOR.blue07,
-            primaryDisabled: COLOR.blue03,
-            secondary: COLOR.orange06,
-            secondaryActive: COLOR.orange07,
-            secondaryDisabled: COLOR.orange03,
-            danger: COLOR.red06,
-            dangerActive: COLOR.red07,
-            dangerDisabled: COLOR.red03,
-            success: COLOR.green06,
-            successActive: COLOR.green07,
-            successDisabled: COLOR.green03,
-            info: COLOR.teal06,
-            infoActive: COLOR.teal07,
-            infoDisabled: COLOR.teal03,
-            warning: COLOR.yellow06,
-            warningActive: COLOR.yellow07,
-            warningDisabled: COLOR.yellow03,
-        },
-        foreground: {
-            neutralBase: COLOR.black,
-            neutralBaseDisabled: COLOR.grey06,
-            neutralAlt: COLOR.white,
-            neutralAltDisabled: COLOR.white,
-            primary: COLOR.blue06,
-            primaryDisabled: COLOR.blue02,
-            secondary: COLOR.orange06,
-            secondaryDisabled: COLOR.orange02,
-            danger: COLOR.red06,
-            dangerDisabled: COLOR.red02,
-            success: COLOR.green06,
-            successDisabled: COLOR.green02,
-            info: COLOR.teal06,
-            infoDisabled: COLOR.teal02,
-            warning: COLOR.yellow06,
-            warningDisabled: COLOR.yellow02,
-        },
-        container: {
-            primaryContainer: COLOR.blue01,
-            primaryOnContainer: COLOR.blue08,
-            secondaryContainer: COLOR.orange01,
-            secondaryOnContainer: COLOR.orange08,
-            dangerContainer: COLOR.red01,
-            dangerOnContainer: COLOR.red08,
-            successContainer: COLOR.green01,
-            successOnContainer: COLOR.green08,
-            infoContainer: COLOR.teal01,
-            infoOnContainer: COLOR.teal08,
-            warningContainer: COLOR.yellow01,
-            warningOnContainer: COLOR.yellow08,
-            obsidianContainer: COLOR.black,
-            obsidianOnContainer: COLOR.grey03,
-            marbleContainer: COLOR.grey03,
-            marbleOnContainer: COLOR.grey07,
-        },
-    },
-};
-// eslint-disable-next-line import/no-anonymous-default-export
-export default function (props) {
-    var muiTheme = createTheme({
-        typography: {
-            fontFamily: props.fontFamily,
-        },
-        components: {
-            MuiButtonBase: {
-                defaultProps: {
-                    disableRipple: true, // No more ripple, on the whole application 💣!
-                },
-            },
-        },
-    });
-    return (_jsx(MuiThemeProvider, __assign({ theme: muiTheme }, { children: _jsx(ThemeProvider, __assign({ theme: light }, { children: props.children })) })));
-}

package/dist/components/AlertDialog/AlertDialog.d.ts

@@ -1,14 +0,0 @@
-import React from "react";
-export interface AlertDialogProps {
-    className?: string;
-    component?: React.ElementType;
-    /** `true` 값일때 모달이 노출됩니다. */
-    open: boolean;
-    /** 모달이 닫힐 때 호출되는 callback */
-    onClose?: () => void;
-    /** 모달의 내용으로 표기될 값 */
-    children: React.ReactNode;
-    /** 모달 좌측에 표기될 아이콘 */
-    icon?: React.ReactNode;
-}
-export declare const AlertDialog: React.ForwardRefExoticComponent<AlertDialogProps & React.RefAttributes<any>>;

package/dist/components/AlertDialog/AlertDialog.js

@@ -1,45 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-/** @jsxImportSource @emotion/react */
-import { Modal as MuiModal } from "@mui/material";
-import { css, useTheme } from "@emotion/react";
-import React from "react";
-import shadows from "../../foundation/shadows";
-import styled from "@emotion/styled";
-export var AlertDialog = React.forwardRef(function (props, ref) {
-    var className = props.className, _a = props.component, Component = _a === void 0 ? "div" : _a, open = props.open, onClose = props.onClose, children = props.children, icon = props.icon, other = __rest(props, ["className", "component", "open", "onClose", "children", "icon"]);
-    var theme = useTheme();
-    return (_jsx(MuiModal, __assign({ open: open, onClose: onClose, ref: ref }, other, { children: _jsxs(Component, __assign({ className: className, css: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n            width: 480px;\n            background: ", ";\n            box-shadow: ", ";\n            border-radius: 16px;\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            padding: 24px;\n            box-sizing: border-box;\n\n            display: grid;\n            ", "\n\n            gap: 8px 16px;\n          "], ["\n            width: 480px;\n            background: ", ";\n            box-shadow: ", ";\n            border-radius: 16px;\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            padding: 24px;\n            box-sizing: border-box;\n\n            display: grid;\n            ", "\n\n            gap: 8px 16px;\n          "])), theme.color.background.neutralBase, shadows.shadow04, icon
-                ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                  grid-template-areas:\n                    \"icon title\"\n                    \"iconPadding content\"\n                    \"actions actions\";\n                "], ["\n                  grid-template-areas:\n                    \"icon title\"\n                    \"iconPadding content\"\n                    \"actions actions\";\n                "]))) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                  grid-template-areas:\n                    \"title\"\n                    \"content\"\n                    \"actions\";\n                "], ["\n                  grid-template-areas:\n                    \"title\"\n                    \"content\"\n                    \"actions\";\n                "])))) }, { children: [icon && (_jsxs(_Fragment, { children: [_jsx(IconDiv, { children: icon }), _jsx(IconPadding, {})] })), children] })) })));
-});
-var IconDiv = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  grid-area: icon;\n  ", "\n  svg {\n    width: 32px;\n    height: 32px;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  grid-area: icon;\n  ", "\n  svg {\n    width: 32px;\n    height: 32px;\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), theme.color.background.infoActive);
-});
-var IconPadding = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  grid-area: iconPadding;\n"], ["\n  grid-area: iconPadding;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/components/AlertDialog/AlertDialogActions.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-export interface AlertDialogActionsProps {
-    className?: string;
-    component?: React.ElementType;
-    /** Content 내용으로 표기될 값 */
-    children: React.ReactNode;
-}
-export declare const AlertDialogActions: React.ForwardRefExoticComponent<AlertDialogActionsProps & React.RefAttributes<any>>;

package/dist/components/AlertDialog/AlertDialogActions.js

@@ -1,35 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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 } from "@emotion/react/jsx-runtime";
-/** @jsxImportSource @emotion/react */
-import { css } from "@emotion/react";
-import React from "react";
-export var AlertDialogActions = React.forwardRef(function (props, ref) {
-    var className = props.className, _a = props.component, Component = _a === void 0 ? "div" : _a, children = props.children, other = __rest(props, ["className", "component", "children"]);
-    return (_jsx(Component, __assign({}, other, { ref: ref, className: className, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        grid-area: actions;\n\n        margin-top: 8px;\n        display: flex;\n        gap: 16px;\n        justify-content: flex-end;\n      "], ["\n        grid-area: actions;\n\n        margin-top: 8px;\n        display: flex;\n        gap: 16px;\n        justify-content: flex-end;\n      "]))) }, { children: children })));
-});
-var templateObject_1;

package/dist/components/AlertDialog/AlertDialogContent.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-export interface AlertDialogContentProps {
-    className?: string;
-    component?: React.ElementType;
-    /** Content 내용으로 표기될 값 */
-    children: React.ReactNode;
-}
-export declare const AlertDialogContent: React.ForwardRefExoticComponent<AlertDialogContentProps & React.RefAttributes<any>>;

package/dist/components/AlertDialog/AlertDialogContent.js

@@ -1,36 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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 } from "@emotion/react/jsx-runtime";
-/** @jsxImportSource @emotion/react */
-import { css, useTheme } from "@emotion/react";
-import React from "react";
-export var AlertDialogContent = React.forwardRef(function (props, ref) {
-    var className = props.className, _a = props.component, Component = _a === void 0 ? "div" : _a, children = props.children, other = __rest(props, ["className", "component", "children"]);
-    var theme = useTheme();
-    return (_jsx(Component, __assign({}, other, { ref: ref, className: className, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        grid-area: content;\n\n        font-style: normal;\n        font-size: 18px;\n        line-height: 28px;\n        color: ", ";\n      "], ["\n        grid-area: content;\n\n        font-style: normal;\n        font-size: 18px;\n        line-height: 28px;\n        color: ", ";\n      "])), theme.color.foreground.neutralBase) }, { children: children })));
-});
-var templateObject_1;

package/dist/components/AlertDialog/AlertDialogTitle.d.ts

@@ -1,13 +0,0 @@
-import React from "react";
-export interface AlertDialogTitleProps {
-    className?: string;
-    component?: React.ElementType;
-    /**
-     * 제목의 X 버튼을 누르를 때 호출되는 callback.
-     * 이 속성이 전달되면 X 버튼을 Title 영역에 그립니다.
-     */
-    onClose?: () => void;
-    /** Content 내용으로 표기될 값 */
-    children: React.ReactNode;
-}
-export declare const AlertDialogTitle: React.ForwardRefExoticComponent<AlertDialogTitleProps & React.RefAttributes<any>>;

package/dist/components/AlertDialog/AlertDialogTitle.js

@@ -1,38 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-/** @jsxImportSource @emotion/react */
-import { css, useTheme } from "@emotion/react";
-import React from "react";
-import SquareButton from "../SquareButton";
-import { CloseFillIcon } from "../../icons/system";
-export var AlertDialogTitle = React.forwardRef(function (props, ref) {
-    var className = props.className, _a = props.component, Component = _a === void 0 ? "div" : _a, onClose = props.onClose, children = props.children, other = __rest(props, ["className", "component", "onClose", "children"]);
-    var theme = useTheme();
-    return (_jsx(_Fragment, { children: _jsxs(Component, __assign({}, other, { ref: ref, className: className, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            grid-area: title;\n            font-family: \"Pretendard\";\n            font-style: normal;\n            font-weight: 500;\n            font-size: 20px;\n            line-height: 36px;\n            color: ", ";\n\n            display: flex;\n            justify-content: space-between;\n          "], ["\n            grid-area: title;\n            font-family: \"Pretendard\";\n            font-style: normal;\n            font-weight: 500;\n            font-size: 20px;\n            line-height: 36px;\n            color: ", ";\n\n            display: flex;\n            justify-content: space-between;\n          "])), theme.color.foreground.neutralBase) }, { children: [children, onClose && (_jsx(SquareButton, { color: "icon", size: "small", icon: _jsx(CloseFillIcon, {}), onClick: onClose }))] })) }));
-});
-var templateObject_1;

package/dist/components/AlertDialog/index.d.ts

@@ -1,4 +0,0 @@
-export * from "./AlertDialog";
-export * from "./AlertDialogTitle";
-export * from "./AlertDialogContent";
-export * from "./AlertDialogActions";

package/dist/components/AlertDialog/index.js

@@ -1,4 +0,0 @@
-export * from "./AlertDialog";
-export * from "./AlertDialogTitle";
-export * from "./AlertDialogContent";
-export * from "./AlertDialogActions";

package/dist/components/Banner.d.ts

@@ -1,29 +0,0 @@
-import React from "react";
-export type BannerColor = "red" | "blue" | "green" | "yellow";
-export interface BannerProps {
-    className?: string;
-    component?: React.ElementType;
-    /** 컴포넌트 내 헤드라인으로 표기될 문자열 */
-    headline?: string;
-    /** 컴포넌트 내용으로 표기될 값 */
-    content: React.ReactNode;
-    /** 컴포넌트 좌측에 표기될 아이콘 */
-    icon?: React.ReactNode;
-    /** 컴포넌트의 색상 */
-    color: BannerColor;
-    /** 컴포넌트 우측에 표기될 버튼의 라벨 */
-    buttonLabel?: string;
-    /** 컴포넌트 우측 버튼 클릭 시 호출될 콜백 함수 */
-    onButtonClick?: () => void;
-    /** 컴포넌트 우측에 표기될 닫기 버튼 유무 */
-    close?: boolean;
-    /** 닫기 버튼 클릭 시 호출될 콜백 함수 */
-    onClose?: () => void;
-    /** 전체 너비 유무 */
-    fullWidth?: boolean;
-}
-/**
- * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=44-2847&t=bhnL1ombbddld3RQ-0)
- */
-declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<any>>;
-export default Banner;

package/dist/components/Banner.js

@@ -1,65 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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";
-import COLOR from "../foundation/color";
-import { CloseFillIcon } from "../icons/system";
-import { RESET_BUTTON } from "../utils/reset";
-var COLOR_TO_STYLE = function (theme, color) {
-    return ({
-        red: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background: ", ";\n      color: ", ";\n    "], ["\n      background: ", ";\n      color: ", ";\n    "])), theme.color.container.dangerContainer, theme.color.container.dangerOnContainer),
-        blue: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background: ", ";\n      color: ", ";\n    "], ["\n      background: ", ";\n      color: ", ";\n    "])), theme.color.container.primaryContainer, theme.color.container.primaryOnContainer),
-        green: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      background: ", ";\n      color: ", ";\n    "], ["\n      background: ", ";\n      color: ", ";\n    "])), theme.color.container.successContainer, theme.color.container.successOnContainer),
-        yellow: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      background: ", ";\n      color: ", ";\n    "], ["\n      background: ", ";\n      color: ", ";\n    "])), theme.color.container.warningContainer, theme.color.container.warningOnContainer),
-    }[color]);
-};
-/**
- * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=44-2847&t=bhnL1ombbddld3RQ-0)
- */
-var Banner = React.forwardRef(function (props, ref) {
-    var className = props.className, _a = props.component, Component = _a === void 0 ? "div" : _a, headline = props.headline, content = props.content, icon = props.icon, color = props.color, buttonLabel = props.buttonLabel, onButtonClick = props.onButtonClick, close = props.close, onClose = props.onClose, fullWidth = props.fullWidth, other = __rest(props, ["className", "component", "headline", "content", "icon", "color", "buttonLabel", "onButtonClick", "close", "onClose", "fullWidth"]);
-    var theme = useTheme();
-    return (_jsxs(Component, __assign({}, other, { ref: ref, className: className, css: [
-            css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n            box-sizing: border-box;\n            display: flex;\n            align-items: center;\n            color: ", ";\n            line-height: 125%;\n          "], ["\n            box-sizing: border-box;\n            display: flex;\n            align-items: center;\n            color: ", ";\n            line-height: 125%;\n          "])), COLOR.white),
-            COLOR_TO_STYLE(theme, color),
-            fullWidth
-                ? css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                width: 100%;\n              "], ["\n                width: 100%;\n              "]))) : css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n                border-radius: 12px;\n                width: fit-content;\n                min-width: 343px;\n              "], ["\n                border-radius: 12px;\n                width: fit-content;\n                min-width: 343px;\n              "]))),
-        ] }, { children: [icon && _jsx(IconDiv, { children: icon }), _jsxs(TextContainer, __assign({ setPaddingRight: !close && !buttonLabel }, { children: [headline && _jsx(HeadlineDiv, { children: headline }), _jsx("div", { children: content })] })), buttonLabel && (_jsx(BannerButton, __assign({ onClick: onButtonClick }, { children: buttonLabel }))), close && (_jsx(CloseButton, __assign({ onClick: onClose }, { children: _jsx(StyledCloseFillIcon, {}) })))] })));
-});
-var StyledCloseFillIcon = styled(CloseFillIcon)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: block;\n  padding: 14px;\n  width: 20px;\n  height: 20px;\n\n  color: currentColor;\n"], ["\n  display: block;\n  padding: 14px;\n  width: 20px;\n  height: 20px;\n\n  color: currentColor;\n"])));
-var IconDiv = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 16px 0px 16px 16px;\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 16px 0px 16px 16px;\n"])));
-var HeadlineDiv = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  font-weight: 700;\n"], ["\n  font-weight: 700;\n"])));
-var TextContainer = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  flex: 1;\n\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 16px 0px 16px 16px;\n  gap: 4px;\n  ", ";\n"], ["\n  flex: 1;\n\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 16px 0px 16px 16px;\n  gap: 4px;\n  ", ";\n"])), function (props) {
-    return props.setPaddingRight && css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      padding-right: 16px;\n    "], ["\n      padding-right: 16px;\n    "])));
-});
-var BannerButton = styled.button(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 10px 12px;\n  cursor: pointer;\n  color: currentColor;\n"], ["\n  ", "\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 10px 12px;\n  cursor: pointer;\n  color: currentColor;\n"])), RESET_BUTTON);
-var CloseButton = styled.button(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", "\n  cursor: pointer;\n  color: currentColor;\n"], ["\n  ", "\n  cursor: pointer;\n  color: currentColor;\n"])), RESET_BUTTON);
-export default Banner;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;

package/dist/components/Button.d.ts

@@ -1,33 +0,0 @@
-import React from "react";
-import { PolymorphicProps } from "@mui/base";
-export type ButtonColor = "primary" | "secondary" | "danger" | "textNeutral" | "textDanger" | "textPrimary";
-export type ButtonSize = "large" | "medium" | "small" | "xsmall";
-export interface ButtonOwnProps<RootComponentType extends React.ElementType> {
-    className?: string;
-    component?: RootComponentType;
-    /** 비활성화 여부 */
-    disabled?: boolean;
-    /** 컴포넌트 색상 */
-    color: ButtonColor;
-    /** 컴포넌트 크기 */
-    size: ButtonSize;
-    /** 컴포넌트 좌측에 표기될 아이콘 */
-    startIcon?: React.ReactNode;
-    /** 컴포넌트 우측에 표기될 아이콘 */
-    endIcon?: React.ReactNode;
-    /** 컴포넌트 내 표기될 문자열 */
-    label: string;
-    /** 버튼 클릭 시 호출될 콜백 함수 */
-    onClick?: () => void;
-}
-export type ButtonProps<RootComponentType extends React.ElementType = ButtonTypeMap["defaultComponent"]> = PolymorphicProps<ButtonTypeMap<RootComponentType>, RootComponentType>;
-export interface ButtonTypeMap<RootComponentType extends React.ElementType = "button"> {
-    props: ButtonOwnProps<RootComponentType>;
-    defaultComponent: RootComponentType;
-}
-type ButtonComponent = <RootComponentType extends React.ElementType = "button">(props: ButtonProps<RootComponentType>) => React.ReactElement | null;
-/**
- * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=20-173&t=cXcCv3QijbX7MkoC-0)
- */
-declare const Button: ButtonComponent;
-export default Button;