@team-monolith/cds 0.1.0

package/dist/patterns/Table/TableCell.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export interface TableCellProps {
+    className?: string;
+    component?: React.ElementType;
+    colSpan?: number;
+    sort?: "asc" | "desc" | "none";
+    isFilterActive?: boolean;
+    onClick?: () => void;
+    onSortClick?: React.MouseEventHandler<HTMLButtonElement>;
+    onFilterClick?: React.MouseEventHandler<HTMLButtonElement>;
+    filterButttonRef?: React.MutableRefObject<HTMLButtonElement | null>;
+    /** Cell의 내용입니다. */
+    children?: React.ReactNode;
+}
+export default function TableCell(props: TableCellProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/Table/TableCell.js

@@ -0,0 +1,78 @@
+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);
+};
+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, { useContext } from "react";
+import TableVariantContext from "./TableVariantContext";
+import TableSizeContext from "./TableSizeContext";
+import { ArrowDownFillIcon, ArrowUpFillIcon, ExpandUpDownIcon, } from "../../icons/arrows";
+import styled from "@emotion/styled";
+import { RESET_BUTTON } from "../../utils/reset";
+import { FilterFillIcon } from "../../icons/system";
+var SIZE_TO_STYLES = function (size) {
+    return ({
+        small: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding: 8px 8px;\n    "], ["\n      padding: 8px 8px;\n    "]))),
+        medium: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding: 12px 8px;\n    "], ["\n      padding: 12px 8px;\n    "]))),
+        large: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      padding: 16px 8px;\n    "], ["\n      padding: 16px 8px;\n    "]))),
+    }[size]);
+};
+export default function TableCell(props) {
+    var className = props.className, Component = props.component, children = props.children, sort = props.sort, colSpan = props.colSpan, isFilterActive = props.isFilterActive, onFilterClick = props.onFilterClick, onClick = props.onClick, onSortClick = props.onSortClick, filterButttonRef = props.filterButttonRef;
+    // variant 값에 따라 th 태그로 그릴지, td 태그로 그릴지를 결정합니다.
+    var variant = useContext(TableVariantContext).variant;
+    var Element = (Component !== null && Component !== void 0 ? Component : variant === "head") ? "th" : "td";
+    var size = useContext(TableSizeContext).size;
+    var theme = useTheme();
+    if (variant === "body") {
+        return (_jsx(Element, __assign({ colSpan: colSpan, className: className, onClick: onClick, css: [
+                SIZE_TO_STYLES(size !== null && size !== void 0 ? size : "medium"),
+                css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            font-style: normal;\n            font-weight: 400;\n            font-size: 16px;\n            line-height: 24px;\n          "], ["\n            font-style: normal;\n            font-weight: 400;\n            font-size: 16px;\n            line-height: 24px;\n          "]))),
+                css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n            display: table-cell;\n            text-align: initial;\n\n            &:first-of-type {\n              padding-left: 16px;\n            }\n\n            &:last-of-type {\n              padding-right: 16px;\n            }\n          "], ["\n            display: table-cell;\n            text-align: initial;\n\n            &:first-of-type {\n              padding-left: 16px;\n            }\n\n            &:last-of-type {\n              padding-right: 16px;\n            }\n          "]))),
+            ] }, { children: children })));
+    }
+    return (_jsx(Element, __assign({ colSpan: colSpan, className: className, onClick: onClick, css: [
+            SIZE_TO_STYLES(size !== null && size !== void 0 ? size : "medium"),
+            Element === "th"
+                ? css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n              background: ", ";\n              font-style: normal;\n              font-weight: 500;\n              font-size: 14px;\n              line-height: 16px;\n            "], ["\n              background: ", ";\n              font-style: normal;\n              font-weight: 500;\n              font-size: 14px;\n              line-height: 16px;\n            "])), theme.color.background.neutralAlt) : css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n              font-style: normal;\n              font-weight: 400;\n              font-size: 16px;\n              line-height: 24px;\n            "], ["\n              font-style: normal;\n              font-weight: 400;\n              font-size: 16px;\n              line-height: 24px;\n            "]))),
+            css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n          display: table-cell;\n          text-align: initial;\n\n          &:first-of-type {\n            padding-left: 16px;\n          }\n\n          &:last-of-type {\n            padding-right: 16px;\n          }\n        "], ["\n          display: table-cell;\n          text-align: initial;\n\n          &:first-of-type {\n            padding-left: 16px;\n          }\n\n          &:last-of-type {\n            padding-right: 16px;\n          }\n        "]))),
+        ] }, { children: _jsxs(Cell, { children: [children, _jsxs(Buttons, { children: [sort && _jsx(SortButton, { sort: sort, onSortClick: onSortClick }), isFilterActive !== undefined && (_jsx(FilterButton, { isFilterActive: isFilterActive !== null && isFilterActive !== void 0 ? isFilterActive : false, onFilterClick: onFilterClick, ref: filterButttonRef }))] })] }) })));
+}
+var Cell = styled.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
+var Buttons = styled.span(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  gap: 4px;\n"], ["\n  display: flex;\n  gap: 4px;\n"])));
+var SortButton = function (props) {
+    var sortIcon = _jsx(_Fragment, {});
+    switch (props.sort) {
+        case "asc":
+            sortIcon = _jsx(ArrowDownFillIcon, {});
+            break;
+        case "desc":
+            sortIcon = _jsx(ArrowUpFillIcon, {});
+            break;
+        case "none":
+            sortIcon = _jsx(ExpandUpDownIcon, {});
+            break;
+    }
+    return (_jsx("button", __assign({ onClick: props.onSortClick, css: css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n        ", "\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        padding: 6px;\n\n        cursor: pointer;\n\n        svg {\n          width: 12px;\n          height: 12px;\n        }\n      "], ["\n        ", "\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        padding: 6px;\n\n        cursor: pointer;\n\n        svg {\n          width: 12px;\n          height: 12px;\n        }\n      "])), RESET_BUTTON) }, { children: sortIcon })));
+};
+var FilterButton = React.forwardRef(function (props, ref) {
+    var theme = useTheme();
+    return (_jsx("button", __assign({ ref: ref, onClick: props.onFilterClick, css: [
+            css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n          ", "\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          padding: 6px;\n\n          cursor: pointer;\n\n          svg {\n            width: 12px;\n            height: 12px;\n          }\n        "], ["\n          ", "\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          padding: 6px;\n\n          cursor: pointer;\n\n          svg {\n            width: 12px;\n            height: 12px;\n          }\n        "])), RESET_BUTTON),
+            props.isFilterActive && css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n            color: ", ";\n          "], ["\n            color: ", ";\n          "])), theme.color.foreground.primary),
+        ] }, { children: _jsx(FilterFillIcon, {}) })));
+});
+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;

package/dist/patterns/Table/TableHead.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface TableHeadProps {
+    className?: string;
+    component?: React.ElementType;
+    /** Table의 내용입니다. 일반적으로 TableRow로 구성됩니다. */
+    children?: React.ReactNode;
+}
+export default function TableHead(props: TableHeadProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/Table/TableHead.js

@@ -0,0 +1,26 @@
+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);
+};
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import TableVariantContext from "./TableVariantContext";
+export default function TableHead(props) {
+    var className = props.className, _a = props.component, Component = _a === void 0 ? "thead" : _a, children = props.children;
+    return (_jsx(Component, __assign({ className: className, css: [
+            css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          display: table-header-group;\n        "], ["\n          display: table-header-group;\n        "]))),
+        ] }, { children: _jsx(TableVariantContext.Provider, __assign({ value: { variant: "head" } }, { children: children })) })));
+}
+var templateObject_1;

package/dist/patterns/Table/TableRow.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface TableRowProps {
+    className?: string;
+    component?: React.ElementType;
+    /** Table의 내용입니다. 일반적으로 TableCell로 구성됩니다. */
+    children?: React.ReactNode;
+    /** `true`일 때 기본적으로 적용되는 hover 배경색이 비활성화됩니다.  */
+    disableHover?: boolean;
+    /** 이 행이 선택되었음을 결정하는 속성. `true`일때 배경색이 활성화됩니다. */
+    isSelected?: boolean;
+}
+export default function TableRow(props: TableRowProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/Table/TableRow.js

@@ -0,0 +1,29 @@
+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);
+};
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css, useTheme } from "@emotion/react";
+import { HOVER } from "../../utils/hover";
+export default function TableRow(props) {
+    var className = props.className, _a = props.component, Component = _a === void 0 ? "tr" : _a, isSelected = props.isSelected, disableHover = props.disableHover, children = props.children;
+    var theme = useTheme();
+    return (_jsx(Component, __assign({ className: className, css: [
+            css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          display: table-row;\n          &:not(:first-of-type) {\n            td {\n              border-top: 1px solid ", ";\n            }\n          }\n        "], ["\n          display: table-row;\n          &:not(:first-of-type) {\n            td {\n              border-top: 1px solid ", ";\n            }\n          }\n        "])), theme.color.background.neutralAlt),
+            isSelected && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            background: ", ";\n          "], ["\n            background: ", ";\n          "])), theme.color.container.primaryContainer),
+            !disableHover && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            ", "\n          "], ["\n            ", "\n          "])), HOVER(css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n              background: ", ";\n            "], ["\n              background: ", ";\n            "])), theme.color.container.primaryContainer))),
+        ] }, { children: children })));
+}
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/patterns/Table/TableSizeContext.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { TableSize } from "./Table";
+interface TableSizeContextProps {
+    size?: TableSize;
+}
+declare const TableSizeContext: React.Context<TableSizeContextProps>;
+export default TableSizeContext;

package/dist/patterns/Table/TableSizeContext.js

@@ -0,0 +1,3 @@
+import * as React from "react";
+var TableSizeContext = React.createContext({});
+export default TableSizeContext;

package/dist/patterns/Table/TableVariantContext.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+interface TableVariantContextProps {
+    variant?: "head" | "body";
+}
+declare const TableVariantContext: React.Context<TableVariantContextProps>;
+export default TableVariantContext;

package/dist/patterns/Table/TableVariantContext.js

@@ -0,0 +1,3 @@
+import * as React from "react";
+var TableVariantContext = React.createContext({});
+export default TableVariantContext;

package/dist/patterns/Table/index.d.ts

@@ -0,0 +1,7 @@
+import Table, { TableSize, TableProps } from "./Table";
+import TableHead, { TableHeadProps } from "./TableHead";
+import TableBody, { TableBodyProps } from "./TableBody";
+import TableRow, { TableRowProps } from "./TableRow";
+import TableCell, { TableCellProps } from "./TableCell";
+export { Table, TableHead, TableBody, TableRow, TableCell };
+export type { TableSize, TableProps, TableHeadProps, TableBodyProps, TableRowProps, TableCellProps, };

package/dist/patterns/Table/index.js

@@ -0,0 +1,6 @@
+import Table from "./Table";
+import TableHead from "./TableHead";
+import TableBody from "./TableBody";
+import TableRow from "./TableRow";
+import TableCell from "./TableCell";
+export { Table, TableHead, TableBody, TableRow, TableCell };

package/dist/utils/hover.d.ts

@@ -0,0 +1,3 @@
+import { CSSInterpolation } from "@emotion/serialize";
+export declare function HOVER(style: CSSInterpolation): import("@emotion/utils").SerializedStyles;
+export declare function FOCUS(style: CSSInterpolation): import("@emotion/utils").SerializedStyles;

package/dist/utils/hover.js

@@ -0,0 +1,14 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { css } from "@emotion/react";
+// https://choi-jinwoo.github.io/post/development/css-media-hover/
+export function HOVER(style) {
+    // -ms-high-contrast: none is for IE11 support.
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    @media (hover: hover), (-ms-high-contrast: none) {\n      &:hover {\n        ", "\n      }\n    }\n  "], ["\n    @media (hover: hover), (-ms-high-contrast: none) {\n      &:hover {\n        ", "\n      }\n    }\n  "])), style);
+}
+export function FOCUS(style) {
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    @media (hover: hover), (-ms-high-contrast: none) {\n      &:focus {\n        ", "\n      }\n    }\n  "], ["\n    @media (hover: hover), (-ms-high-contrast: none) {\n      &:focus {\n        ", "\n      }\n    }\n  "])), style);
+}
+var templateObject_1, templateObject_2;

package/dist/utils/reset.d.ts

@@ -0,0 +1,2 @@
+export declare const RESET_BUTTON: import("@emotion/utils").SerializedStyles;
+export declare const RESET_TABLE: import("@emotion/utils").SerializedStyles;

package/dist/utils/reset.js

@@ -0,0 +1,8 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { css } from "@emotion/react";
+export var RESET_BUTTON = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  border: none;\n  background: none;\n  font: inherit;\n  text-align: inherit;\n"], ["\n  display: inline-block;\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  border: none;\n  background: none;\n  font: inherit;\n  text-align: inherit;\n"])));
+export var RESET_TABLE = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 0;\n  border: 0;\n  border-spacing: 0px;\n  border-collapse: collapse;\n"], ["\n  padding: 0;\n  border: 0;\n  border-spacing: 0px;\n  border-collapse: collapse;\n"])));
+var templateObject_1, templateObject_2;

package/dist/utils/zIndex.d.ts

@@ -0,0 +1,3 @@
+export declare const ZINDEX: {
+    inputBase: number;
+};

package/dist/utils/zIndex.js

@@ -0,0 +1,3 @@
+export var ZINDEX = {
+    inputBase: 1, // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/internal/SwitchBase.js#L35
+};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@team-monolith/cds",
+  "version": "0.1.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.3.1",
+    "@tanstack/react-table": "^8.9.3",
+    "@types/node": "^16.11.26",
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.11",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "5.0.0",
+    "typescript": "^4.5.5"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-script build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "clean": "rimraf dist",
+    "compile": "npm run clean && mkdir dist && tsc"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.22.5",
+    "@babel/preset-env": "^7.22.5",
+    "@babel/preset-react": "^7.22.5",
+    "cross-env": "^7.0.3"
+  }
+}

package/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

package/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

package/src/App.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+function App() {
+  return <div className="App">CDS</div>;
+}
+
+export default App;

package/src/cds/CodleDesignSystemProvider.tsx

@@ -0,0 +1,93 @@
+import { ThemeProvider } from "@emotion/react";
+import { ThemeProvider as MuiThemeProvider } from "@mui/material";
+import COLOR from "./foundation/color";
+import { createTheme } from "@mui/material";
+
+const 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: {
+  children: React.ReactNode;
+  fontFamily?: string;
+}): React.ReactElement {
+  const muiTheme = createTheme({
+    typography: {
+      fontFamily: props.fontFamily,
+    },
+    components: {
+      MuiButtonBase: {
+        defaultProps: {
+          disableRipple: true, // No more ripple, on the whole application 💣!
+        },
+      },
+    },
+  });
+  return (
+    <MuiThemeProvider theme={muiTheme}>
+      <ThemeProvider theme={light}>{props.children}</ThemeProvider>
+    </MuiThemeProvider>
+  );
+}

package/src/cds/README.md

@@ -0,0 +1,23 @@
+# Codle Design System
+
+코들 디자인 시스템을 구현합니다. 이 폴더는 앞으로 독립적인 패키지로 구현될 수 있습니다.
+
+### /components
+
+컴포넌트를 구현합니다.
+컴포넌트는 반드시 `className`과 `component` 인자를 가집니다.
+컴포넌트는 모두 스토리북에 등록해야 합니다.
+
+### /foundation
+
+색상, 그림자 등을 제공합니다.
+
+### /icons
+
+아이콘을 제공합니다.
+
+아이콘은 [피그마](https://www.figma.com/file/wefLB6cN0oM2VZjwYmBA6B/Codle-PD-Kit---Foundation?type=design&node-id=1-23307&t=ASkFT82aJsgxrxvr-0)에 정의된대로 24px X 24px 크기의 svg로 정의됩니다. 색상이나 크기를 변경하기 위해 Styled Component를 활용할 수 있으므로 `className` 인자를 받아야합니다.
+
+svg는 피그마에서 받을 수도 있고 [iconify](https://iconify.design/)에서 받을 수도 있습니다.
+
+아이콘은 `System/add-box-fill`과 같은 이름을 가지는데, 이 경우 `icons/system.tsx` 파일에 `AddBoxFillIcon` 컴포넌트로 정의합니다.

package/src/cds/components/AlertDialog/AlertDialog.tsx

@@ -0,0 +1,101 @@
+/** @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 interface AlertDialogProps {
+  className?: string;
+  component?: React.ElementType;
+
+  /** `true` 값일때 모달이 노출됩니다. */
+  open: boolean;
+
+  /** 모달이 닫힐 때 호출되는 callback */
+  onClose?: () => void;
+
+  /** 모달의 내용으로 표기될 값 */
+  children: React.ReactNode;
+
+  /** 모달 좌측에 표기될 아이콘 */
+  icon?: React.ReactNode;
+}
+
+export const AlertDialog = React.forwardRef<any, AlertDialogProps>(
+  (props, ref) => {
+    const {
+      className,
+      component: Component = "div",
+      open,
+      onClose,
+      children,
+      icon,
+      ...other
+    } = props;
+    const theme = useTheme();
+    return (
+      <MuiModal open={open} onClose={onClose} ref={ref} {...other}>
+        <Component
+          className={className}
+          css={css`
+            width: 480px;
+            background: ${theme.color.background.neutralBase};
+            box-shadow: ${shadows.shadow04};
+            border-radius: 16px;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            padding: 24px;
+            box-sizing: border-box;
+
+            display: grid;
+            ${icon
+              ? css`
+                  grid-template-areas:
+                    "icon title"
+                    "iconPadding content"
+                    "actions actions";
+                `
+              : css`
+                  grid-template-areas:
+                    "title"
+                    "content"
+                    "actions";
+                `}
+
+            gap: 8px 16px;
+          `}
+        >
+          {icon && (
+            <>
+              <IconDiv>{icon}</IconDiv>
+              <IconPadding />
+            </>
+          )}
+          {children}
+        </Component>
+      </MuiModal>
+    );
+  }
+);
+
+const IconDiv = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  grid-area: icon;
+  ${({ theme }) =>
+    css`
+      color: ${theme.color.background.infoActive};
+    `}
+  svg {
+    width: 32px;
+    height: 32px;
+  }
+`;
+
+const IconPadding = styled.div`
+  grid-area: iconPadding;
+`;