@team-monolith/cds 0.1.0

package/dist/icons/arrows.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare const ArrowDropDownFillIcon: (props: {
+    className?: string;
+}) => JSX.Element;
+export declare const ExpandUpDownIcon: (props: {
+    className?: string;
+}) => JSX.Element;
+export declare const ArrowDownFillIcon: (props: {
+    className?: string;
+}) => JSX.Element;
+export declare const ArrowUpFillIcon: (props: {
+    className?: string;
+}) => JSX.Element;
+export declare const ArrowRightSLineIcon: (props: {
+    className?: string;
+}) => JSX.Element;

package/dist/icons/arrows.js

@@ -0,0 +1,17 @@
+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";
+export var ArrowDropDownFillIcon = function (props) { return (_jsx("svg", __assign({}, props, { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, { children: _jsx("path", { fill: "currentColor", d: "m12 14l-4-4h8l-4 4Z" }) }))); };
+export var ExpandUpDownIcon = function (props) { return (_jsx("svg", __assign({}, props, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M18 9L12 3L6 9H18ZM18 15L12 21L6 15H18Z", fill: "currentColor" }) }))); };
+export var ArrowDownFillIcon = function (props) { return (_jsx("svg", __assign({}, props, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M13 12H20L12 20L4 12H11V4H13V12Z", fill: "currentColor" }) }))); };
+export var ArrowUpFillIcon = function (props) { return (_jsx("svg", __assign({}, props, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M13 12V20H11V12H4L12 4L20 12H13Z", fill: "currentColor" }) }))); };
+export var ArrowRightSLineIcon = function (props) { return (_jsx("svg", __assign({}, props, { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, { children: _jsx("path", { d: "M13.1714 12.0007L8.22168 7.05093L9.63589 5.63672L15.9999 12.0007L9.63589 18.3646L8.22168 16.9504L13.1714 12.0007Z", fill: "currentColor" }) }))); };

package/dist/icons/brand.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const SymbolIcon: (props: {
+    className?: string;
+}) => JSX.Element;

package/dist/icons/brand.js

@@ -0,0 +1,13 @@
+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";
+export var SymbolIcon = function (props) { return (_jsx("svg", __assign({}, props, { viewBox: "-3 -2 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M8.89269 0C3.98164 0 0 3.80096 0 8.49034C0 12.0308 2.26988 15.0622 5.4957 16.336C6.05262 16.5557 6.36122 17.1512 6.19366 17.7238L5.83323 18.9592C5.66206 19.5427 6.17196 20.1009 6.76987 19.9845C8.47801 19.6495 11.564 18.7587 14.0701 16.4644C16.9898 13.7908 17.7854 10.9527 17.7854 8.49154C17.7854 3.80337 13.8037 0.00120173 8.89269 0.00120173V0Z", fill: "currentColor" }) }))); };

package/dist/icons/map.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const EarthFillIcon: (props: {
+    className?: string;
+}) => JSX.Element;

package/dist/icons/map.js

@@ -0,0 +1,13 @@
+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";
+export var EarthFillIcon = function (props) { return (_jsx("svg", __assign({}, props, { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, { children: _jsx("path", { d: "M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM16.0043 12.8777C15.6589 12.3533 15.4097 11.9746 14.4622 12.1248C12.6717 12.409 12.4732 12.7224 12.3877 13.2375L12.3636 13.3943L12.3393 13.5597C12.2416 14.2428 12.2453 14.5012 12.5589 14.8308C13.8241 16.1582 14.582 17.115 14.8116 17.6746C14.9237 17.9484 15.2119 18.7751 15.0136 19.5927C16.2372 19.1066 17.3156 18.3332 18.1653 17.3559C18.2755 16.9821 18.3551 16.5166 18.3551 15.9518V15.8472C18.3551 14.9247 18.3551 14.504 17.7031 14.1314C17.428 13.9751 17.2227 13.881 17.0582 13.8064C16.691 13.6394 16.4479 13.5297 16.1198 13.0499C16.0807 12.9928 16.0425 12.9358 16.0043 12.8777ZM12 3.83333C9.68259 3.83333 7.59062 4.79858 6.1042 6.34896C6.28116 6.47186 6.43537 6.64453 6.54129 6.88256C6.74529 7.34029 6.74529 7.8112 6.74529 8.22764C6.74488 8.55621 6.74442 8.8672 6.84992 9.09302C6.99443 9.40134 7.6164 9.53227 8.16548 9.64736C8.36166 9.68867 8.56395 9.73083 8.74797 9.78176C9.25405 9.92233 9.64554 10.3765 9.95938 10.7412C10.0896 10.8931 10.2819 11.1163 10.3783 11.1717C10.4286 11.1356 10.59 10.9608 10.6699 10.6735C10.7307 10.4547 10.7134 10.2597 10.6239 10.1543C10.0648 9.49445 10.0952 8.2232 10.268 7.75495C10.5402 7.01606 11.3905 7.07058 12.012 7.11097C12.2438 7.12589 12.4626 7.14023 12.6257 7.11976C13.2482 7.04166 13.4396 6.09538 13.575 5.91C13.8671 5.50981 14.7607 4.9071 15.3158 4.53454C14.3025 4.08382 13.1805 3.83333 12 3.83333Z", fill: "currentColor" }) }))); };

package/dist/icons/system.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+export declare const CloseFillIcon: (props: {
+    className?: string;
+}) => JSX.Element;
+export declare const CloseCircleFillIcon: (props: {
+    className?: string;
+}) => JSX.Element;
+export declare const ErrorWarningFillIcon: (props: {
+    className?: string;
+}) => JSX.Element;
+export declare const AlertFillIcon: (props: {
+    className?: string;
+}) => JSX.Element;
+export declare const CheckboxCircleFillIcon: (props: {
+    className?: string;
+}) => JSX.Element;
+export declare const EyeFillIcon: (props: {
+    className?: string;
+}) => JSX.Element;
+export declare const InformationFillIcon: (props: {
+    className?: string;
+}) => JSX.Element;
+export declare const FilterFillIcon: (props: {
+    className?: string;
+}) => JSX.Element;

package/dist/icons/system.js

@@ -0,0 +1,20 @@
+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";
+export var CloseFillIcon = function (props) { return (_jsx("svg", __assign({}, props, { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, { children: _jsx("path", { fill: "currentColor", d: "m12 10.586l4.95-4.95l1.415 1.415l-4.95 4.95l4.95 4.95l-1.415 1.414l-4.95-4.95l-4.95 4.95l-1.413-1.415l4.95-4.95l-4.95-4.95L7.05 5.638l4.95 4.95Z" }) }))); };
+export var CloseCircleFillIcon = function (props) { return (_jsx("svg", __assign({}, props, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 10.5858L9.17157 7.75736L7.75736 9.17157L10.5858 12L7.75736 14.8284L9.17157 16.2426L12 13.4142L14.8284 16.2426L16.2426 14.8284L13.4142 12L16.2426 9.17157L14.8284 7.75736L12 10.5858Z", fill: "currentColor" }) }))); };
+export var ErrorWarningFillIcon = function (props) { return (_jsx("svg", __assign({}, props, { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, { children: _jsx("path", { fill: "currentColor", d: "M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10Zm-1-7v2h2v-2h-2Zm0-8v6h2V7h-2Z" }) }))); };
+export var AlertFillIcon = function (props) { return (_jsx("svg", __assign({}, props, { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, { children: _jsx("path", { fill: "currentColor", d: "m12.865 3l9.526 16.5a1 1 0 0 1-.866 1.5H2.473a1 1 0 0 1-.866-1.5L11.133 3a1 1 0 0 1 1.732 0Zm-1.866 13v2h2v-2h-2Zm0-7v5h2V9h-2Z" }) }))); };
+export var CheckboxCircleFillIcon = function (props) { return (_jsx("svg", __assign({}, props, { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, { children: _jsx("path", { fill: "currentColor", d: "M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10Zm-.997-6l7.07-7.071l-1.413-1.414l-5.657 5.657l-2.829-2.829l-1.414 1.414L11.003 16Z" }) }))); };
+export var EyeFillIcon = function (props) { return (_jsx("svg", __assign({}, props, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12ZM12.0003 17C14.7617 17 17.0003 14.7614 17.0003 12C17.0003 9.23858 14.7617 7 12.0003 7C9.23884 7 7.00026 9.23858 7.00026 12C7.00026 14.7614 9.23884 17 12.0003 17ZM12.0003 15C10.3434 15 9.00026 13.6569 9.00026 12C9.00026 10.3431 10.3434 9 12.0003 9C13.6571 9 15.0003 10.3431 15.0003 12C15.0003 13.6569 13.6571 15 12.0003 15Z", fill: "currentColor" }) }))); };
+export var InformationFillIcon = function (props) { return (_jsx("svg", __assign({}, props, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11 11V17H13V11H11ZM11 7V9H13V7H11Z", fill: "currentColor" }) }))); };
+export var FilterFillIcon = function (props) { return (_jsx("svg", __assign({}, props, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M21 4V6H20L14 15V22H10V15L4 6H3V4H21Z", fill: "currentColor" }) }))); };

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import Button from "./components/Button";
+export { Button };

package/dist/index.js

@@ -0,0 +1,2 @@
+import Button from "./components/Button";
+export { Button };

package/dist/patterns/Dropdown/Dropdown.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import { ButtonColor, ButtonSize } from "../../components/Button";
+import { DropdownMenuProps } from "./DropdownMenu";
+export interface DropdownProps {
+    className?: string;
+    component?: React.ElementType;
+    /** 버튼 비활성화 여부 */
+    disabled?: boolean;
+    /** 버튼 컴포넌트 색상 */
+    color?: ButtonColor;
+    /** 버튼 컴포넌트 크기 */
+    size?: ButtonSize;
+    /** 버튼 컴포넌트 내 좌측에 표기될 아이콘 */
+    startIcon?: React.ReactNode;
+    /** 버튼 컴포넌트 내 우측에 표기될 아이콘 */
+    endIcon?: React.ReactNode;
+    /** 버튼 컴포넌트 내 표기될 문자열 */
+    label: string;
+    /** 버튼 클릭 시 호출될 콜백 함수 */
+    onClick?: () => void;
+    /** 드롭다운 메뉴의 props */
+    menuProps: DropdownMenuProps;
+}
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=203-95329&t=FwczLZ1IVvskUVbT-0)
+ */
+export default function Dropdown(props: DropdownProps): JSX.Element;

package/dist/patterns/Dropdown/Dropdown.js

@@ -0,0 +1,41 @@
+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 } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import Button from "../../components/Button";
+import DropdownMenu from "./DropdownMenu";
+import { ArrowDropDownFillIcon } from "../../icons/arrows";
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=203-95329&t=FwczLZ1IVvskUVbT-0)
+ */
+export default function Dropdown(props) {
+    var className = props.className, _a = props.component, Component = _a === void 0 ? "div" : _a, disabled = props.disabled, _b = props.color, color = _b === void 0 ? "primary" : _b, _c = props.size, size = _c === void 0 ? "medium" : _c, startIcon = props.startIcon, _d = props.endIcon, endIcon = _d === void 0 ? _jsx(ArrowDropDownFillIcon, {}) : _d, label = props.label, onClick = props.onClick, menuProps = props.menuProps;
+    var buttonProps = {
+        disabled: disabled,
+        color: color,
+        size: size,
+        startIcon: startIcon,
+        endIcon: endIcon,
+    };
+    var menuRef = useRef(null);
+    var _e = useState(false), open = _e[0], setOpen = _e[1];
+    var handleClick = function () {
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+        setOpen(true);
+    };
+    var handleClose = function (e) {
+        var _a;
+        (_a = menuProps.onClose) === null || _a === void 0 ? void 0 : _a.call(menuProps, e);
+        setOpen(false);
+    };
+    return (_jsxs(Component, __assign({ className: className }, { children: [_jsx(Button, __assign({ ref: menuRef }, buttonProps, { label: label, onClick: handleClick })), _jsx(DropdownMenu, __assign({}, menuProps, { open: open, onClose: handleClose, anchorEl: menuRef.current }))] })));
+}

package/dist/patterns/Dropdown/DropdownItem.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { CheckboxInputProps } from "../../components/CheckboxInput";
+import { DropdownMenuProps } from "./DropdownMenu";
+export type DropdownItemType = "default" | "danger";
+export declare const DROPDOWN_ITEM_WIDTH = 116;
+export interface DropdownItemProps {
+    className?: string;
+    component?: React.ElementType;
+    /** 드롭다운 아이템의 타입 */
+    type?: DropdownItemType;
+    /** 체크박스 노출여부 */
+    checkbox?: boolean;
+    /** 체크박스 설정 props. 초기 체크여부 및 체크박스 값 변경시 호출되는 함수 등을 지정합니다. */
+    checkboxProps?: CheckboxInputProps;
+    /** 시작 아이콘 설정 */
+    startIcon?: React.ReactNode;
+    /** 드롭다운 아이템의 라벨 */
+    label?: string;
+    /** 끝 아이콘 설정. subMenuProps가 없으면 노출되지 않습니다. */
+    endIcon?: React.ReactNode;
+    /** 비활성화 여부 */
+    disabled?: boolean;
+    /** 드롭다운 아이템의 활성화 여부. 서브 메뉴가 노출될 때 true가 됩니다. */
+    active?: boolean;
+    /** 드롭다운 아이템 마우스 호버 시 호출될 콜백 함수 */
+    onMouseEnter?: (e: React.MouseEvent<HTMLElement>) => void;
+    /** 드롭다운 아이템 마우스 아웃 시 호출될 콜백 함수 */
+    onMouseLeave?: (e: React.MouseEvent<HTMLElement>) => void;
+    /** 드롭다운 아이템 클릭 시 호출될 콜백 함수 */
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+    /** 드롭다운 아이템의 서브 메뉴가 열려야 하는지 여부 */
+    shouldSubMenuOpen?: boolean;
+    /** 아이템이 가지는 드롭다운 메뉴 props. 주어지지 않으면 서브메뉴가 없습니다. */
+    subMenuProps?: DropdownMenuProps;
+    /** 드롭다운 아이템의 서브 메뉴가 닫힐 때 실행할 콜백함수 */
+    onSubMenuClose?: (e: React.MouseEvent<HTMLElement>) => void;
+}
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=106-1900&t=FwczLZ1IVvskUVbT-0)
+ */
+declare const DropdownItem: React.ForwardRefExoticComponent<DropdownItemProps & React.RefAttributes<any>>;
+export default DropdownItem;

package/dist/patterns/Dropdown/DropdownItem.js

@@ -0,0 +1,89 @@
+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 } from "@emotion/react";
+import * as React from "react";
+import styled from "@emotion/styled";
+import { MenuItem } from "@mui/material";
+import { HOVER } from "../../utils/hover";
+import CheckboxInput from "../../components/CheckboxInput";
+import { useRef, useState } from "react";
+import DropdownMenu from "./DropdownMenu";
+import { ArrowRightSLineIcon } from "../../icons/arrows";
+export var DROPDOWN_ITEM_WIDTH = 116;
+var TYPE_TO_COLOR = function (theme, type) {
+    return {
+        default: theme.color.foreground.neutralBase,
+        danger: theme.color.foreground.danger,
+    }[type];
+};
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=106-1900&t=FwczLZ1IVvskUVbT-0)
+ */
+var DropdownItem = React.forwardRef(function (props, ref) {
+    var className = props.className, _a = props.component, Component = _a === void 0 ? "div" : _a, _b = props.type, type = _b === void 0 ? "default" : _b, checkbox = props.checkbox, _c = props.checkboxProps, checkboxProps = _c === void 0 ? { checked: false } : _c, startIcon = props.startIcon, label = props.label, _d = props.endIcon, endIcon = _d === void 0 ? _jsx(ArrowRightSLineIcon, {}) : _d, disabled = props.disabled, active = props.active, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, onClick = props.onClick, _e = props.shouldSubMenuOpen, shouldSubMenuOpen = _e === void 0 ? false : _e, _f = props.subMenuProps, subMenuProps = _f === void 0 ? {
+        itemsProps: [],
+    } : _f, onSubMenuClose = props.onSubMenuClose, other = __rest(props, ["className", "component", "type", "checkbox", "checkboxProps", "startIcon", "label", "endIcon", "disabled", "active", "onMouseEnter", "onMouseLeave", "onClick", "shouldSubMenuOpen", "subMenuProps", "onSubMenuClose"]);
+    var itemRef = useRef(null);
+    var _g = useState(false), isSubMenuOpen = _g[0], setIsSubMenuOpen = _g[1];
+    var handleClick = function (e) {
+        e.stopPropagation();
+        setIsSubMenuOpen(true);
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    };
+    var handleClose = function (e) {
+        setIsSubMenuOpen(false);
+        onSubMenuClose === null || onSubMenuClose === void 0 ? void 0 : onSubMenuClose(e);
+    };
+    var isSubMenuExist = subMenuProps.itemsProps.length > 0;
+    var isSubMenuShowed = isSubMenuExist && isSubMenuOpen && shouldSubMenuOpen;
+    return (_jsxs(Component, __assign({ className: className, ref: ref, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: handleClick }, other, { children: [_jsxs(StyledMenuItem, __assign({ ref: itemRef, disabled: disabled, selected: isSubMenuShowed || active }, { children: [_jsxs(LeftWrapper, { children: [checkbox && (_jsx(StyledCheckboxInput, __assign({}, checkboxProps, { onClick: function (e) {
+                                    var _a;
+                                    e.stopPropagation();
+                                    (_a = checkboxProps.onClick) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e);
+                                } }))), startIcon && _jsx(IconDiv, __assign({ type: type }, { children: startIcon })), _jsx(LabelDiv, __assign({ type: type }, { children: label }))] }), isSubMenuExist && _jsx(IconDiv, __assign({ type: type }, { children: endIcon }))] })), isSubMenuExist && (_jsx(DropdownMenu, __assign({}, subMenuProps, { open: isSubMenuShowed, anchorEl: itemRef.current, isNestedMenu: true, onClose: handleClose, anchorOrigin: {
+                    vertical: "top",
+                    horizontal: "right",
+                } })))] })));
+});
+var StyledCheckboxInput = styled(CheckboxInput)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 4px;\n"], ["\n  margin: 4px;\n"])));
+var IconDiv = styled.div(function (_a) {
+    var theme = _a.theme, type = _a.type;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: 14px;\n    height: 14px;\n    svg {\n      width: 14px;\n      height: 14px;\n      path {\n        fill: ", ";\n      }\n    }\n  "], ["\n    width: 14px;\n    height: 14px;\n    svg {\n      width: 14px;\n      height: 14px;\n      path {\n        fill: ", ";\n      }\n    }\n  "])), TYPE_TO_COLOR(theme, type));
+});
+var LabelDiv = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 14px;\n  color: ", ";\n"], ["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 14px;\n  color: ", ";\n"])), function (_a) {
+    var theme = _a.theme, type = _a.type;
+    return TYPE_TO_COLOR(theme, type);
+});
+var LeftWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  white-space: nowrap;\n  gap: 4px;\n"], ["\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  white-space: nowrap;\n  gap: 4px;\n"])));
+var StyledMenuItem = styled(MenuItem)(function (_a) {
+    var theme = _a.theme;
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    &.MuiMenuItem-root {\n      background-color: ", ";\n      width: ", "px;\n      height: 32px;\n      border-radius: 6px;\n      padding: 4px 8px 4px 8px;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      line-height: 14px;\n      ", "\n      &.Mui-selected {\n        background-color: ", ";\n      }\n    }\n  "], ["\n    &.MuiMenuItem-root {\n      background-color: ", ";\n      width: ", "px;\n      height: 32px;\n      border-radius: 6px;\n      padding: 4px 8px 4px 8px;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      line-height: 14px;\n      ", "\n      &.Mui-selected {\n        background-color: ", ";\n      }\n    }\n  "])), theme.color.background.neutralBase, DROPDOWN_ITEM_WIDTH, HOVER(css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        background-color: ", ";\n      "], ["\n        background-color: ", ";\n      "])), theme.color.background.neutralAlt)), theme.color.background.neutralAlt);
+});
+export default DropdownItem;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/patterns/Dropdown/DropdownMenu.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { DropdownItemProps } from "./DropdownItem";
+interface OriginProps {
+    vertical: "top" | "center" | "bottom";
+    horizontal: "left" | "center" | "right";
+}
+export declare const DROPDOWN_MENU_WIDTH = 124;
+export declare const DROPDOWN_MENU_MAX_HEIGHT = 160;
+export interface DropdownMenuProps {
+    className?: string;
+    /** 드롭다운 메뉴가 열리는지 여부 */
+    open?: boolean;
+    /** 드롭다운 메뉴의 위치참조 */
+    anchorEl?: HTMLElement | null;
+    /** 드롭다운 메뉴가 닫힐 때 실행될 콜백함수 */
+    onClose?: (e: React.MouseEvent<HTMLElement>) => void;
+    /** 현재 드롭다운 메뉴가 중첩 드롭다운인지 여부. 최상위일 경우 false입니다. */
+    isNestedMenu?: boolean;
+    /** 드롭다운 메뉴 원점이 anchor의 어디에 위치하는지 조정 */
+    anchorOrigin?: OriginProps;
+    /** 드롭다운 메뉴 원점이 메뉴 자신의 어디에 위치하는지 조정 */
+    transformOrigin?: OriginProps;
+    /** 드롭다운 메뉴가 가지는 드롭다운 아이템들의 props 배열 */
+    itemsProps: DropdownItemProps[];
+}
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=106-1921&t=FwczLZ1IVvskUVbT-0)
+ */
+declare const DropdownMenu: React.ForwardRefExoticComponent<DropdownMenuProps & React.RefAttributes<any>>;
+export default DropdownMenu;

package/dist/patterns/Dropdown/DropdownMenu.js

@@ -0,0 +1,85 @@
+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 "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+import { Menu } from "@mui/material";
+import React, { useState } from "react";
+import shadows from "../../foundation/shadows";
+import DropdownItem, { DROPDOWN_ITEM_WIDTH, } from "./DropdownItem";
+var ORIGIN_PROPS_TO_MARGIN = function (originProps) {
+    var vertical = originProps.vertical, horizontal = originProps.horizontal;
+    return {
+        top: {
+            left: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        margin-right: 12px;\n      "], ["\n        margin-right: 12px;\n      "]))),
+            center: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        margin-bottom: 8px;\n      "], ["\n        margin-bottom: 8px;\n      "]))),
+            right: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        margin-left: 12px;\n      "], ["\n        margin-left: 12px;\n      "]))),
+        },
+        center: {
+            left: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        margin-right: 12px;\n      "], ["\n        margin-right: 12px;\n      "]))),
+            center: css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        margin-bottom: 8px;\n      "], ["\n        margin-bottom: 8px;\n      "]))),
+            right: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        margin-left: 12px;\n      "], ["\n        margin-left: 12px;\n      "]))),
+        },
+        bottom: {
+            left: css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        margin-top: 8px;\n      "], ["\n        margin-top: 8px;\n      "]))),
+            center: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        margin-top: 8px;\n      "], ["\n        margin-top: 8px;\n      "]))),
+            right: css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        margin-top: 8px;\n      "], ["\n        margin-top: 8px;\n      "]))),
+        },
+    }[vertical][horizontal];
+};
+export var DROPDOWN_MENU_WIDTH = 124;
+export var DROPDOWN_MENU_MAX_HEIGHT = 160;
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=106-1921&t=FwczLZ1IVvskUVbT-0)
+ */
+var DropdownMenu = React.forwardRef(function (props, ref) {
+    var className = props.className, _a = props.open, open = _a === void 0 ? false : _a, anchorEl = props.anchorEl, onClose = props.onClose, _b = props.isNestedMenu, isNestedMenu = _b === void 0 ? false : _b, _c = props.anchorOrigin, anchorOrigin = _c === void 0 ? {
+        vertical: "bottom",
+        horizontal: "left",
+    } : _c, transformOrigin = props.transformOrigin, itemsProps = props.itemsProps, other = __rest(props, ["className", "open", "anchorEl", "onClose", "isNestedMenu", "anchorOrigin", "transformOrigin", "itemsProps"]);
+    var _d = useState(-1), selectedIndex = _d[0], setSelectedIndex = _d[1];
+    var handleClick = function (e) {
+        setSelectedIndex(-1);
+        onClose === null || onClose === void 0 ? void 0 : onClose(e);
+    };
+    // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Popover/Popover.js#L104
+    // 메뉴를 감싸는 popover의 절대위치를 이동시키기 위해 anchorEl의 위치를 가져옵니다.
+    var anchorRect = anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.getBoundingClientRect();
+    return (_jsx(StyledMenu, __assign({ ref: ref, open: open, anchorEl: anchorEl, onClick: handleClick, onClose: onClose, className: className, anchorRect: isNestedMenu ? anchorRect : undefined, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, hideBackdrop: true }, other, { children: itemsProps === null || itemsProps === void 0 ? void 0 : itemsProps.map(function (itemProps, index) { return (_jsx(DropdownItem, __assign({}, itemProps, { onClick: function (e) {
+                var _a;
+                (_a = itemProps.onClick) === null || _a === void 0 ? void 0 : _a.call(itemProps, e);
+                setSelectedIndex(index);
+            }, shouldSubMenuOpen: open && selectedIndex === index, onSubMenuClose: onClose }), index)); }) })));
+});
+var StyledMenu = styled(Menu, {
+    shouldForwardProp: function (prop) { return prop !== "anchorRect"; },
+})(function (_a) {
+    var anchorRect = _a.anchorRect, anchorOrigin = _a.anchorOrigin;
+    return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    .MuiPaper-root {\n      display: block;\n      ", "\n      width: ", "px;\n      max-height: ", "px;\n      box-shadow: ", ";\n      .MuiList-root {\n        display: inline-flex;\n        flex-direction: column;\n        padding: 4px;\n        gap: 2px;\n      }\n      ", "\n    }\n    &.MuiModal-root {\n      ", "\n    }\n  "], ["\n    .MuiPaper-root {\n      display: block;\n      ", "\n      width: ", "px;\n      max-height: ", "px;\n      box-shadow: ", ";\n      .MuiList-root {\n        display: inline-flex;\n        flex-direction: column;\n        padding: 4px;\n        gap: 2px;\n      }\n      ", "\n    }\n    &.MuiModal-root {\n      ", "\n    }\n  "])), ORIGIN_PROPS_TO_MARGIN(anchorOrigin), DROPDOWN_MENU_WIDTH, DROPDOWN_MENU_MAX_HEIGHT, shadows.shadow04, anchorRect && css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n        position: absolute;\n        top: 0px !important;\n        left: 0px !important;\n      "], ["\n        position: absolute;\n        top: 0px !important;\n        left: 0px !important;\n      "]))), anchorRect && css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n        position: absolute;\n        top: ", "px;\n        left: ", "px;\n      "], ["\n        position: absolute;\n        top: ", "px;\n        left: ", "px;\n      "])), anchorRect.top, anchorRect.left + DROPDOWN_ITEM_WIDTH));
+});
+export default DropdownMenu;
+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;

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

@@ -0,0 +1,2 @@
+export * from "./Dropdown";
+export { default } from "./Dropdown";

package/dist/patterns/Dropdown/index.js

@@ -0,0 +1,2 @@
+export * from "./Dropdown";
+export { default } from "./Dropdown";

package/dist/patterns/EmptyState/EmptyState.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { ButtonProps } from "../../components/Button";
+export interface EmptyStateProps {
+    className?: string;
+    component?: React.ElementType;
+    /** 상단에 표시되는 텍스트입니다. */
+    title: string;
+    /** title 하단에 표시되는 텍스트입니다. */
+    subtitle?: string;
+    /** 하단의 영역에 렌더링 될 Button 컴포넌트의 속성 배열입니다. */
+    buttons?: ButtonProps[];
+}
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=181-89918&t=J5yAnjojg5Dm1764-0)
+ */
+export default function EmptyState(props: EmptyStateProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/EmptyState/EmptyState.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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import Button from "../../components/Button";
+import { ReactComponent as EmptyStateIcon } from "./empty-state-icon.svg";
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=181-89918&t=J5yAnjojg5Dm1764-0)
+ */
+export default function EmptyState(props) {
+    var className = props.className, _a = props.component, Component = _a === void 0 ? "div" : _a, title = props.title, subtitle = props.subtitle, buttons = props.buttons;
+    return (_jsxs(Component, __assign({ className: className, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 10px;\n\n        padding: 120px 10px;\n      "], ["\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 10px;\n\n        padding: 120px 10px;\n      "]))) }, { children: [_jsx(EmptyStateIcon, {}), _jsxs(TextDiv, { children: [_jsx(Title, { children: title }), subtitle && _jsx(Subtitle, { children: subtitle }), (buttons === null || buttons === void 0 ? void 0 : buttons.length) !== 0 && (_jsx(Buttons, { children: buttons === null || buttons === void 0 ? void 0 : buttons.map(function (buttonProps) { return (_jsx(Button, __assign({}, buttonProps))); }) }))] })] })));
+}
+var TextDiv = styled.div(function (_a) {
+    var theme = _a.theme;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 24px 0px;\n    gap: 12px;\n\n    font-style: normal;\n    color: ", ";\n  "], ["\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 24px 0px;\n    gap: 12px;\n\n    font-style: normal;\n    color: ", ";\n  "])), theme.color.foreground.neutralBase);
+});
+var Title = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-weight: 800;\n  font-size: 36px;\n  line-height: 44px;\n"], ["\n  font-weight: 800;\n  font-size: 36px;\n  line-height: 44px;\n"])));
+var Subtitle = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-weight: 400;\n  font-size: 18px;\n  line-height: 28px;\n"], ["\n  font-weight: 400;\n  font-size: 18px;\n  line-height: 28px;\n"])));
+var Buttons = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 4px;\n  gap: 8px;\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 4px;\n  gap: 8px;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -0,0 +1,2 @@
+export * from "./EmptyState";
+export { default } from "./EmptyState";

package/dist/patterns/EmptyState/index.js

@@ -0,0 +1,2 @@
+export * from "./EmptyState";
+export { default } from "./EmptyState";

package/dist/patterns/Grid/EnhancedTableCell.d.ts

@@ -0,0 +1,9 @@
+/** @jsxImportSource @emotion/react */
+import { Header, RowData, Table as TableType } from "@tanstack/react-table";
+/**
+ * Sort, Filter, Resize 등의 기능이 추가된 Cell입니다.
+ */
+export default function EnhancedTableCell<TData extends RowData>(props: {
+    table: TableType<TData>;
+    header: Header<TData, unknown>;
+}): import("@emotion/react/jsx-runtime").JSX.Element;