@team-monolith/cds 0.3.0 → 0.3.2

package/dist/patterns/Dialog/DialogNavigation.js

@@ -0,0 +1,25 @@
+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 "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { NavigationVertical } from "../Navigation";
+import { DialogNavigationContext } from "./DialogNavigationContext";
+export function DialogNavigation(props) {
+    var value = props.value, onChange = props.onChange;
+    return (_jsx(DialogNavigationContext.Provider, __assign({ value: { value: value, onChange: onChange } }, { children: _jsx(StyledNavigationVertical, __assign({}, props, { size: "small" })) })));
+}
+var StyledNavigationVertical = styled(NavigationVertical)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 160px;\n"], ["\n  width: 160px;\n"])));
+var templateObject_1;

package/dist/patterns/Dialog/DialogNavigationContext.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare const DialogNavigationContext: React.Context<{
+    value: string;
+    onChange: (newValue: string) => void;
+}>;

package/dist/patterns/Dialog/DialogNavigationContext.js

@@ -0,0 +1,5 @@
+import React from "react";
+export var DialogNavigationContext = React.createContext({
+    value: "",
+    onChange: function () { },
+});

package/dist/patterns/Dialog/DialogNavigationItem.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export interface DialogNavigationItemProps {
+    className?: string;
+    component?: React.ElementType;
+    /** 표기될 문구 */
+    label: string;
+    /** 이 아이템이 대표하는 값 */
+    value: string;
+}
+export declare function DialogNavigationItem(props: DialogNavigationItemProps): JSX.Element;

package/dist/patterns/Dialog/DialogNavigationItem.js

@@ -0,0 +1,25 @@
+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 { useContext } from "react";
+import { NavigationItem } from "../Navigation";
+import { DialogNavigationContext } from "./DialogNavigationContext";
+export function DialogNavigationItem(props) {
+    return (_jsx(NavigationItem, { component: NavigationItemComponent, to: props.value, label: props.label }));
+}
+function NavigationItemComponent(props) {
+    var to = props.to;
+    var _a = useContext(DialogNavigationContext), value = _a.value, onChange = _a.onChange;
+    return (_jsx("span", __assign({ onClick: function () {
+            onChange(to);
+        } }, { children: props.children({ isActive: value === to }) })));
+}

package/dist/patterns/Dialog/DialogPanel.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export interface DialogPanelProps {
+    className?: string;
+    component?: React.ElementType;
+    /** Content 내용으로 표기될 값 */
+    children: React.ReactNode;
+    /** 이 패널이 활성화 될 값 */
+    value: string;
+}
+export declare function DialogPanel(props: DialogPanelProps): React.ReactElement;

package/dist/patterns/Dialog/DialogPanel.js

@@ -0,0 +1,31 @@
+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, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import { useContext } from "react";
+import { DialogPanelsContext } from "./DialogPanelsContext";
+export function DialogPanel(props) {
+    var className = props.className, _a = props.component, Component = _a === void 0 ? "div" : _a, children = props.children, value = props.value;
+    var _b = useContext(DialogPanelsContext), selectedValue = _b.value, renderStrategy = _b.renderStrategy;
+    if (renderStrategy === "hidden") {
+        return (_jsx(Component, __assign({ className: className, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          display: ", ";\n          width: 100%;\n        "], ["\n          display: ", ";\n          width: 100%;\n        "])), value === selectedValue ? "block" : "none") }, { children: children })));
+    }
+    else {
+        return value === selectedValue ? (_jsx(Component, __assign({ className: className }, { children: children }))) : (_jsx(_Fragment, {}));
+    }
+}
+var templateObject_1;

package/dist/patterns/Dialog/DialogPanels.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export interface DialogPanelsProps {
+    /** Content 내용으로 표기될 값 */
+    children: React.ReactNode;
+    /** 현재 선택된 값 */
+    value: string;
+    /** 활성화되지 않은 패널을 처리하는 전략
+     * hidden: display: none으로 가립니다.
+     * unmount: 컴포넌트를 unmount합니다.
+     */
+    renderStrategy: "hidden" | "unmount";
+}
+export declare function DialogPanels(props: DialogPanelsProps): React.ReactElement;

package/dist/patterns/Dialog/DialogPanels.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";
+import { DialogPanelsContext } from "./DialogPanelsContext";
+export function DialogPanels(props) {
+    var children = props.children, value = props.value, renderStrategy = props.renderStrategy;
+    return (_jsx(DialogPanelsContext.Provider, __assign({ value: { value: value, renderStrategy: renderStrategy } }, { children: children })));
+}

package/dist/patterns/Dialog/DialogPanelsContext.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare const DialogPanelsContext: React.Context<{
+    value: string;
+    renderStrategy: "hidden" | "unmount";
+}>;

package/dist/patterns/Dialog/DialogPanelsContext.js

@@ -0,0 +1,5 @@
+import React from "react";
+export var DialogPanelsContext = React.createContext({
+    value: "",
+    renderStrategy: "unmount",
+});

package/dist/patterns/Dialog/DialogTitle.d.ts

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

package/dist/patterns/Dialog/DialogTitle.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, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css, useTheme } from "@emotion/react";
+import SquareButton from "../../components/SquareButton";
+import { CloseFillIcon } from "../../icons/system";
+export function DialogTitle(props) {
+    var className = props.className, _a = props.component, Component = _a === void 0 ? "div" : _a, onClose = props.onClose, children = props.children;
+    var theme = useTheme();
+    return (_jsx(_Fragment, { children: _jsxs(Component, __assign({ className: className, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          display: flex;\n          padding: 0px 16px 0px 24px;\n          justify-content: space-between;\n          align-items: center;\n\n          text-align: center;\n          /* Alt/Paragraph/16px-Eb */\n          font-size: 16px;\n          font-family: NanumSquareNeo;\n          font-weight: 800;\n          line-height: 24px;\n          color: ", ";\n        "], ["\n          display: flex;\n          padding: 0px 16px 0px 24px;\n          justify-content: space-between;\n          align-items: center;\n\n          text-align: center;\n          /* Alt/Paragraph/16px-Eb */\n          font-size: 16px;\n          font-family: NanumSquareNeo;\n          font-weight: 800;\n          line-height: 24px;\n          color: ", ";\n        "])), theme.color.foreground.neutralBase) }, { children: [children, onClose && (_jsx(SquareButton, { color: "icon", size: "small", icon: _jsx(CloseFillIcon, {}), onClick: onClose }))] })) }));
+}
+var templateObject_1;

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

@@ -0,0 +1,7 @@
+export * from "./Dialog";
+export * from "./DialogTitle";
+export * from "./DialogContent";
+export * from "./DialogNavigation";
+export * from "./DialogNavigationItem";
+export * from "./DialogPanels";
+export * from "./DialogPanel";

package/dist/patterns/Dialog/index.js

@@ -0,0 +1,7 @@
+export * from "./Dialog";
+export * from "./DialogTitle";
+export * from "./DialogContent";
+export * from "./DialogNavigation";
+export * from "./DialogNavigationItem";
+export * from "./DialogPanels";
+export * from "./DialogPanel";

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;