@team-monolith/cds 0.1.0

package/README.md

@@ -0,0 +1,46 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).

package/dist/CodleDesignSystemProvider.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+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";
+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, Fragment as _Fragment } 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(_Fragment, { children: _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,26 @@
+import React from "react";
+export type ButtonColor = "primary" | "secondary" | "danger" | "textNeutral" | "textDanger" | "textPrimary";
+export type ButtonSize = "large" | "medium" | "small" | "xsmall";
+export interface ButtonProps {
+    className?: string;
+    component?: React.ElementType;
+    /** 비활성화 여부 */
+    disabled?: boolean;
+    /** 컴포넌트 색상 */
+    color: ButtonColor;
+    /** 컴포넌트 크기 */
+    size: ButtonSize;
+    /** 컴포넌트 좌측에 표기될 아이콘 */
+    startIcon?: React.ReactNode;
+    /** 컴포넌트 우측에 표기될 아이콘 */
+    endIcon?: React.ReactNode;
+    /** 컴포넌트 내 표기될 문자열 */
+    label: string;
+    /** 버튼 클릭 시 호출될 콜백 함수 */
+    onClick?: () => void;
+}
+/**
+ * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=20-173&t=cXcCv3QijbX7MkoC-0)
+ */
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<any>>;
+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 (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, onClick = props.onClick, other = __rest(props, ["className", "component", "disabled", "color", "size", "startIcon", "endIcon", "label", "onClick"]);
+    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          "], ["\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          "]))),
+            COLOR_TO_BUTTON_STYLE(theme, color),
+            SIZE_TO_BUTTON_STYLE[size],
+        ], disabled: disabled, onClick: onClick }, { children: [startIcon, _jsx(Label, __assign({ size: size }, { children: label })), endIcon] })));
+});
+var Label = styled.span(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  font-weight: 400;\n  ", "\n"], ["\n  font-weight: 400;\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;