@team-monolith/cds 0.3.0 → 0.3.2

package/dist/CodleDesignSystemProvider.d.ts

@@ -0,0 +1,69 @@
+/// <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

@@ -0,0 +1,96 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,38 @@
+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

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

package/dist/components/AlertDialog/index.js

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

package/dist/components/Banner.d.ts

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,65 @@
+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

@@ -0,0 +1,31 @@
+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;
+}
+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;

package/dist/components/Button.js

@@ -0,0 +1,72 @@
+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 { HOVER } from "../utils/hover";
+var COLOR_TO_BUTTON_STYLE = function (theme, color) {
+    return ({
+        primary: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background: ", ";\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: ", ";\n      }\n    "], ["\n      background: ", ";\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: ", ";\n      }\n    "])), theme.color.background.primary, theme.color.foreground.neutralAlt, HOVER(css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        background: ", ";\n      "], ["\n        background: ", ";\n      "])), theme.color.background.primaryActive)), theme.color.background.primaryDisabled),
+        secondary: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      background: ", ";\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: ", ";\n        color: ", ";\n      }\n    "], ["\n      background: ", ";\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: ", ";\n        color: ", ";\n      }\n    "])), theme.color.background.neutralAlt, theme.color.foreground.neutralBase, HOVER(css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        background: ", ";\n        color: ", ";\n      "], ["\n        background: ", ";\n        color: ", ";\n      "])), theme.color.background.neutralAltActive, theme.color.foreground.neutralBase)), theme.color.background.neutralAlt, theme.color.foreground.neutralBaseDisabled),
+        danger: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      background: ", ";\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: ", ";\n      }\n    "], ["\n      background: ", ";\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: ", ";\n      }\n    "])), theme.color.background.danger, theme.color.foreground.neutralAlt, HOVER(css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        background: ", ";\n      "], ["\n        background: ", ";\n      "])), theme.color.background.dangerActive)), theme.color.background.dangerDisabled),
+        textNeutral: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      background: none;\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: none;\n        color: ", ";\n      }\n    "], ["\n      background: none;\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: none;\n        color: ", ";\n      }\n    "])), theme.color.foreground.neutralBase, HOVER(css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        background: ", ";\n        color: ", ";\n      "], ["\n        background: ", ";\n        color: ", ";\n      "])), theme.color.background.neutralAltActive, theme.color.foreground.neutralBase)), theme.color.foreground.neutralBaseDisabled),
+        textDanger: css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      background: none;\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: none;\n        color: ", ";\n      }\n    "], ["\n      background: none;\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: none;\n        color: ", ";\n      }\n    "])), theme.color.foreground.danger, HOVER(css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        background: ", ";\n        color: ", ";\n      "], ["\n        background: ", ";\n        color: ", ";\n      "])), theme.color.background.neutralAltActive, theme.color.foreground.danger)), theme.color.foreground.dangerDisabled),
+        textPrimary: css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      background: none;\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: none;\n        color: ", ";\n      }\n    "], ["\n      background: none;\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: none;\n        color: ", ";\n      }\n    "])), theme.color.foreground.primary, HOVER(css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n        background: ", ";\n        color: ", ";\n      "], ["\n        background: ", ";\n        color: ", ";\n      "])), theme.color.background.neutralAltActive, theme.color.foreground.primary)), theme.color.foreground.primaryDisabled),
+    }[color]);
+};
+var SIZE_TO_BUTTON_STYLE = {
+    large: css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    padding: 16px 20px;\n    gap: 10px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  "], ["\n    padding: 16px 20px;\n    gap: 10px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  "]))),
+    medium: css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    padding: 14px 16px;\n    gap: 8px;\n\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  "], ["\n    padding: 14px 16px;\n    gap: 8px;\n\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  "]))),
+    small: css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    padding: 10px 12px;\n    gap: 8px;\n\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  "], ["\n    padding: 10px 12px;\n    gap: 8px;\n\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  "]))),
+    xsmall: css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    padding: 6px 8px;\n    gap: 4px;\n\n    svg {\n      width: 12px;\n      height: 12px;\n    }\n  "], ["\n    padding: 6px 8px;\n    gap: 4px;\n\n    svg {\n      width: 12px;\n      height: 12px;\n    }\n  "]))),
+};
+var SIZE_TO_LABEL_STYLE = {
+    large: css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    font-size: 20px;\n    line-height: 24px;\n  "], ["\n    font-size: 20px;\n    line-height: 24px;\n  "]))),
+    medium: css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n    font-size: 18px;\n    line-height: 20px;\n  "], ["\n    font-size: 18px;\n    line-height: 20px;\n  "]))),
+    small: css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n    font-size: 14px;\n    line-height: 16px;\n  "], ["\n    font-size: 14px;\n    line-height: 16px;\n  "]))),
+    xsmall: css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n    font-size: 14px;\n    line-height: 16px;\n  "], ["\n    font-size: 14px;\n    line-height: 16px;\n  "]))),
+};
+/**
+ * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=20-173&t=cXcCv3QijbX7MkoC-0)
+ */
+var Button = React.forwardRef(function Button(props, ref) {
+    var className = props.className, _a = props.component, Component = _a === void 0 ? "button" : _a, disabled = props.disabled, color = props.color, size = props.size, startIcon = props.startIcon, endIcon = props.endIcon, label = props.label, other = __rest(props, ["className", "component", "disabled", "color", "size", "startIcon", "endIcon", "label"]);
+    var theme = useTheme();
+    return (_jsxs(Component, __assign({}, other, { className: className, ref: ref, css: [
+            css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n          display: inline-flex;\n          align-items: center;\n          gap: 8px;\n\n          border: none;\n          border-radius: 8px;\n\n          cursor: pointer;\n          &:disabled {\n            cursor: default;\n            pointer-events: none;\n          }\n\n          font: inherit;\n          text-decoration: none;\n        "], ["\n          display: inline-flex;\n          align-items: center;\n          gap: 8px;\n\n          border: none;\n          border-radius: 8px;\n\n          cursor: pointer;\n          &:disabled {\n            cursor: default;\n            pointer-events: none;\n          }\n\n          font: inherit;\n          text-decoration: none;\n        "]))),
+            COLOR_TO_BUTTON_STYLE(theme, color),
+            SIZE_TO_BUTTON_STYLE[size],
+        ], disabled: disabled }, { children: [startIcon, _jsx(Label, __assign({ size: size }, { children: label })), endIcon] })));
+});
+var Label = styled.span(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  font-weight: 400;\n  white-space: nowrap;\n  ", "\n"], ["\n  font-weight: 400;\n  white-space: nowrap;\n  ", "\n"])), function (_a) {
+    var size = _a.size;
+    return SIZE_TO_LABEL_STYLE[size];
+});
+export default Button;
+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, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22;

package/dist/components/CheckboxInput.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { InputHTMLAttributes } from "react";
+export type CheckboxInputType = "default" | "checked" | "partial";
+export interface CheckboxInputProps {
+    className?: string;
+    /** 체크박스의 체크 여부(Controlled) */
+    checked: boolean;
+    /** 체크박스의 라벨 */
+    label?: string;
+    /** 체크박스의 하단 마진(8px) 여부 */
+    spacer?: boolean;
+    /** 체크박스의 비활성화 여부 */
+    disabled?: boolean;
+    /** 체크박스의 partial 여부. 체크여부가 우선합니다. */
+    partial?: boolean;
+    /** 체크박스 값 변경시 호출되는 함수 */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** 체크박스 클릭시 호출되는 함수 */
+    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
+    /** HTML input 태그에 전달될 props */
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
+}
+/**
+ * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=36-907&t=G4t39O7uXZvsGQ9u-0)
+ */
+declare const CheckboxInput: React.ForwardRefExoticComponent<CheckboxInputProps & React.RefAttributes<any>>;
+export default CheckboxInput;