@team-monolith/cds 0.1.9 → 0.2.0

package/dist/components/AlertDialog/AlertDialogContent.js

@@ -24,13 +24,13 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { css, useTheme } from "@emotion/react";
 import React from "react";
 export var AlertDialogContent = React.forwardRef(function (props, ref) {
     var className = props.className, _a = props.component, Component = _a === void 0 ? "div" : _a, children = props.children, other = __rest(props, ["className", "component", "children"]);
     var theme = useTheme();
-    return (_jsx(_Fragment, { children: _jsx(Component, __assign({}, other, { ref: ref, className: className, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          grid-area: content;\n\n          font-style: normal;\n          font-size: 18px;\n          line-height: 28px;\n          color: ", ";\n        "], ["\n          grid-area: content;\n\n          font-style: normal;\n          font-size: 18px;\n          line-height: 28px;\n          color: ", ";\n        "])), theme.color.foreground.neutralBase) }, { children: children })) }));
+    return (_jsx(Component, __assign({}, other, { ref: ref, className: className, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        grid-area: content;\n\n        font-style: normal;\n        font-size: 18px;\n        line-height: 28px;\n        color: ", ";\n      "], ["\n        grid-area: content;\n\n        font-style: normal;\n        font-size: 18px;\n        line-height: 28px;\n        color: ", ";\n      "])), theme.color.foreground.neutralBase) }, { children: children })));
 });
 var templateObject_1;

package/dist/components/Button.d.ts

@@ -1,9 +1,10 @@
 import React from "react";
+import { PolymorphicProps } from "@mui/base";
 export type ButtonColor = "primary" | "secondary" | "danger" | "textNeutral" | "textDanger" | "textPrimary";
 export type ButtonSize = "large" | "medium" | "small" | "xsmall";
-export interface ButtonProps {
+export interface ButtonOwnProps<RootComponentType extends React.ElementType> {
     className?: string;
-    component?: React.ElementType;
+    component?: RootComponentType;
     /** 비활성화 여부 */
     disabled?: boolean;
     /** 컴포넌트 색상 */
@@ -19,8 +20,14 @@ export interface ButtonProps {
     /** 버튼 클릭 시 호출될 콜백 함수 */
     onClick?: () => void;
 }
+export type ButtonProps<RootComponentType extends React.ElementType = ButtonTypeMap["defaultComponent"]> = PolymorphicProps<ButtonTypeMap<RootComponentType>, RootComponentType>;
+export interface ButtonTypeMap<RootComponentType extends React.ElementType = "button"> {
+    props: ButtonOwnProps<RootComponentType>;
+    defaultComponent: RootComponentType;
+}
+type ButtonComponent = <RootComponentType extends React.ElementType = "button">(props: ButtonProps<RootComponentType>) => React.ReactElement | null;
 /**
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=20-173&t=cXcCv3QijbX7MkoC-0)
  */
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<any>>;
+declare const Button: ButtonComponent;
 export default Button;

package/dist/components/Button.js

@@ -55,16 +55,16 @@ var SIZE_TO_LABEL_STYLE = {
 /**
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=20-173&t=cXcCv3QijbX7MkoC-0)
  */
-var Button = React.forwardRef(function (props, ref) {
+var Button = React.forwardRef(function Button(props, ref) {
     var className = props.className, _a = props.component, Component = _a === void 0 ? "button" : _a, disabled = props.disabled, color = props.color, size = props.size, startIcon = props.startIcon, endIcon = props.endIcon, label = props.label, onClick = props.onClick, other = __rest(props, ["className", "component", "disabled", "color", "size", "startIcon", "endIcon", "label", "onClick"]);
     var theme = useTheme();
     return (_jsxs(Component, __assign({}, other, { className: className, ref: ref, css: [
-            css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n            display: inline-flex;\n            align-items: center;\n            gap: 8px;\n\n            border: none;\n            border-radius: 8px;\n\n            cursor: pointer;\n            &:disabled {\n              cursor: default;\n              pointer-events: none;\n            }\n\n            font: inherit;\n          "], ["\n            display: inline-flex;\n            align-items: center;\n            gap: 8px;\n\n            border: none;\n            border-radius: 8px;\n\n            cursor: pointer;\n            &:disabled {\n              cursor: default;\n              pointer-events: none;\n            }\n\n            font: inherit;\n          "]))),
+            css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n          display: inline-flex;\n          align-items: center;\n          gap: 8px;\n\n          border: none;\n          border-radius: 8px;\n\n          cursor: pointer;\n          &:disabled {\n            cursor: default;\n            pointer-events: none;\n          }\n\n          font: inherit;\n          text-decoration: none;\n        "], ["\n          display: inline-flex;\n          align-items: center;\n          gap: 8px;\n\n          border: none;\n          border-radius: 8px;\n\n          cursor: pointer;\n          &:disabled {\n            cursor: default;\n            pointer-events: none;\n          }\n\n          font: inherit;\n          text-decoration: none;\n        "]))),
             COLOR_TO_BUTTON_STYLE(theme, color),
             SIZE_TO_BUTTON_STYLE[size],
         ], disabled: disabled, onClick: onClick }, { children: [startIcon, _jsx(Label, __assign({ size: size }, { children: label })), endIcon] })));
 });
-var Label = styled.span(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  font-weight: 400;\n  ", "\n"], ["\n  font-weight: 400;\n  ", "\n"])), function (_a) {
+var Label = styled.span(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  font-weight: 400;\n  white-space: nowrap;\n  ", "\n"], ["\n  font-weight: 400;\n  white-space: nowrap;\n  ", "\n"])), function (_a) {
     var size = _a.size;
     return SIZE_TO_LABEL_STYLE[size];
 });

package/dist/icons/arrows.d.ts

@@ -11,6 +11,18 @@ export declare const ArrowDownFillIcon: (props: {
 export declare const ArrowUpFillIcon: (props: {
     className?: string;
 }) => JSX.Element;
+export declare const ArrowRightFillIcon: (props: {
+    className?: string;
+}) => JSX.Element;
+export declare const ArrowLeftFillIcon: (props: {
+    className?: string;
+}) => JSX.Element;
 export declare const ArrowRightSLineIcon: (props: {
     className?: string;
 }) => JSX.Element;
+export declare const ArrowLeftLineIcon: (props: {
+    className?: string;
+}) => JSX.Element;
+export declare const ArrowRightLineIcon: (props: {
+    className?: string;
+}) => JSX.Element;

package/dist/icons/arrows.js

@@ -14,4 +14,8 @@ export var ArrowDropDownFillIcon = function (props) { return (_jsx("svg", __assi
 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 ArrowRightFillIcon = 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 13H4V11H12V4L20 12L12 20V13Z", fill: "currentColor" }) }))); };
+export var ArrowLeftFillIcon = 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 13V20L4 12L12 4V11H20V13H12Z", 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" }) }))); };
+export var ArrowLeftLineIcon = 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: "M7.828 11H20v2H7.828l5.364 5.364l-1.414 1.414L4 12l7.778-7.778l1.414 1.414L7.828 11Z" }) }))); };
+export var ArrowRightLineIcon = 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: "m16.172 11l-5.364-5.364l1.414-1.414L20 12l-7.778 7.778l-1.414-1.414L16.172 13H4v-2h12.172Z" }) }))); };

package/dist/icons/system.d.ts

@@ -23,3 +23,6 @@ export declare const InformationFillIcon: (props: {
 export declare const FilterFillIcon: (props: {
     className?: string;
 }) => JSX.Element;
+export declare const CheckboxMultipleBlankLine: (props: {
+    className?: string;
+}) => JSX.Element;

package/dist/icons/system.js

@@ -18,3 +18,4 @@ export var CheckboxCircleFillIcon = function (props) { return (_jsx("svg", __ass
 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" }) }))); };
+export var CheckboxMultipleBlankLine = 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: "M7 7V3a1 1 0 0 1 1-1h13a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-4v3.992C17 21.55 16.551 22 15.992 22H3.008A1.006 1.006 0 0 1 2 20.992l.003-12.985C2.003 7.451 2.452 7 3.01 7H7Zm2 0h6.993C16.549 7 17 7.449 17 8.007V15h3V4H9v3ZM4.003 9L4 20h11V9H4.003Z" }) }))); };

package/dist/patterns/Card/Card.d.ts

@@ -0,0 +1,39 @@
+import React from "react";
+import { ButtonProps } from "../../components/Button";
+import { CheckboxInputProps } from "../../components/CheckboxInput";
+import { TagProps } from "../../components/Tag";
+import { TableRowProps, TableSize } from "../Table";
+export interface CardProps {
+    className?: string;
+    component?: React.ElementType;
+    /** 카드의 상위 요소의 width 전체 차지 여부 */
+    fullWidth?: boolean;
+    /** 썸네일 사진의 경로. 지정하지 않으면 썸네일이 없습니다. */
+    thumbnail?: string;
+    /** 썸네일의 높이 */
+    thumbnailHeight?: number;
+    /** 제목 아이콘 */
+    titleIcon?: React.ReactNode;
+    /** 제목. 미지정시 공간을 차지하지 않습니다. */
+    title?: string;
+    /** 부제목. 미지정시 공간을 차지하지 않습니다. */
+    subtitle?: string;
+    /** 제목 아이콘 row와 제목의 inline 여부 */
+    titleInline?: boolean;
+    /** 제목 아이콘 row에 들어가는 태그 props의 배열. 미지정시 태그가 없습니다. */
+    tagsProps?: TagProps[];
+    /** 제목 아이콘 row에 들어가는 체크박스 props. 미지정시 체크박스가 없습니다. */
+    checkboxProps?: CheckboxInputProps;
+    /** 카드 리스트 영역의 table cell size */
+    tableSize?: TableSize;
+    /** 카드 리스트 영역의 table row props의 배열. 미지정시 리스트가 노출되지 않습니다. */
+    tableRowsProps?: (Omit<TableRowProps, "children"> & {
+        rowData: React.ReactNode;
+    })[];
+    /** 카드 하단 버튼의 props 배열 */
+    buttonsProps?: ButtonProps[];
+}
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=181-93325&t=fCBWLZGGE9mwFqvg-0)
+ */
+export default function Card(props: CardProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/Card/Card.js

@@ -0,0 +1,68 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css, useTheme } from "@emotion/react";
+import shadows from "../../foundation/shadows";
+import styled from "@emotion/styled";
+import Button from "../../components/Button";
+import CheckboxInput from "../../components/CheckboxInput";
+import Tag from "../../components/Tag";
+import { Table, TableBody, TableCell, TableRow, } from "../Table";
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=181-93325&t=fCBWLZGGE9mwFqvg-0)
+ */
+export default function Card(props) {
+    var className = props.className, _a = props.component, Component = _a === void 0 ? "div" : _a, fullWidth = props.fullWidth, thumbnail = props.thumbnail, _b = props.thumbnailHeight, thumbnailHeight = _b === void 0 ? 150 : _b, titleIcon = props.titleIcon, title = props.title, subtitle = props.subtitle, titleInline = props.titleInline, tagsProps = props.tagsProps, checkboxProps = props.checkboxProps, tableSize = props.tableSize, tableRowsProps = props.tableRowsProps, buttonsProps = props.buttonsProps;
+    var theme = useTheme();
+    return (_jsxs(Component, __assign({ className: className, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        background-color: ", ";\n        border: 1px solid ", ";\n        box-shadow: ", ";\n        border-radius: 16px;\n        width: ", ";\n      "], ["\n        background-color: ", ";\n        border: 1px solid ", ";\n        box-shadow: ", ";\n        border-radius: 16px;\n        width: ", ";\n      "])), theme.color.background.neutralBase, theme.color.background.neutralAlt, shadows.shadow04, fullWidth ? "100%" : "380px") }, { children: [thumbnail && _jsx(StyledImg, { src: thumbnail, height: thumbnailHeight }), _jsxs(CardContainer, { children: [titleInline ? (_jsxs(_Fragment, { children: [(titleIcon || title || tagsProps || checkboxProps) && (_jsxs(CardHeader, { children: [_jsxs(CardHeaderLeftWrapper, { children: [titleIcon && _jsx(IconContainer, { children: titleIcon }), _jsx(TitleContainer, { children: title })] }), _jsxs(CardHeaderRightWrapper, { children: [_jsx(TagsWrapper, { children: tagsProps === null || tagsProps === void 0 ? void 0 : tagsProps.map(function (tagProps, index) { return (_jsx(Tag, __assign({}, tagProps), index)); }) }), checkboxProps && _jsx(StyledCheckboxInput, __assign({}, checkboxProps))] })] })), subtitle &&
+                                (titleIcon ? (_jsxs(SubHeader, { children: [_jsx(Spacer, {}), _jsx(SubTitleContainer, { children: subtitle })] })) : (_jsx(SubTitleContainer, __assign({ fullwidth: true }, { children: subtitle }))))] })) : (_jsxs(_Fragment, { children: [(titleIcon || tagsProps || checkboxProps) && (_jsxs(CardHeader, { children: [_jsx(CardHeaderLeftWrapper, { children: titleIcon && _jsx(IconContainer, { children: titleIcon }) }), _jsxs(CardHeaderRightWrapper, { children: [_jsx(TagsWrapper, { children: tagsProps === null || tagsProps === void 0 ? void 0 : tagsProps.map(function (tagProps, index) { return (_jsx(Tag, __assign({}, tagProps), index)); }) }), checkboxProps && _jsx(StyledCheckboxInput, __assign({}, checkboxProps))] })] })), title && _jsx(TitleContainer, { children: title }), subtitle && (_jsx(SubTitleContainer, __assign({ fullwidth: true }, { children: subtitle })))] })), tableRowsProps && (_jsx(Table, __assign({ size: tableSize !== null && tableSize !== void 0 ? tableSize : "small", css: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n              margin-top: 20px;\n              border-right: none;\n              border-left: none;\n            "], ["\n              margin-top: 20px;\n              border-right: none;\n              border-left: none;\n            "]))), fullWidth: true }, { children: _jsx(TableBody, { children: tableRowsProps.map(function (rowProps, index) {
+                                var rowData = rowProps.rowData, rowPropsWithoutRowData = __rest(rowProps, ["rowData"]);
+                                return (_jsx(TableRow, __assign({}, rowPropsWithoutRowData, { children: _jsx(TableCell, { children: rowData }) }), index));
+                            }) }) })))] }), buttonsProps && (_jsx(CardFooter, { children: _jsx(ButtonsContainer, { children: buttonsProps === null || buttonsProps === void 0 ? void 0 : buttonsProps.map(function (buttonProps, index) { return (_jsx(Button, __assign({}, buttonProps), index)); }) }) }))] })));
+}
+var TagsWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 4px;\n  gap: 8px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 4px;\n  gap: 8px;\n"])));
+var StyledCheckboxInput = styled(CheckboxInput)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 4px;\n"], ["\n  margin: 4px;\n"])));
+var CardFooter = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  justify-content: right;\n  flex-direction: row;\n  align-items: flex-start;\n  padding: 0px 12px 12px;\n"], ["\n  display: flex;\n  justify-content: right;\n  flex-direction: row;\n  align-items: flex-start;\n  padding: 0px 12px 12px;\n"])));
+var ButtonsContainer = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  padding: 4px;\n  gap: 8px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  padding: 4px;\n  gap: 8px;\n"])));
+var SubTitleContainer = styled.div(function (_a) {
+    var theme = _a.theme, fullwidth = _a.fullwidth;
+    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    width: ", ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 16px;\n    gap: 8px;\n    color: ", ";\n  "], ["\n    width: ", ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 16px;\n    gap: 8px;\n    color: ", ";\n  "])), fullwidth ? "100%" : "auto", theme.color.foreground.neutralBaseDisabled);
+});
+var SubHeader = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  height: auto;\n  gap: 8px;\n"], ["\n  display: flex;\n  width: 100%;\n  height: auto;\n  gap: 8px;\n"])));
+var TitleContainer = styled.div(function (_a) {
+    var theme = _a.theme;
+    return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    font-size: 20px;\n    font-weight: 900;\n    line-height: 28px;\n    color: ", ";\n  "], ["\n    width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    font-size: 20px;\n    font-weight: 900;\n    line-height: 28px;\n    color: ", ";\n  "])), theme.color.foreground.neutralBase);
+});
+var Spacer = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  width: 32px;\n  height: 32px;\n"], ["\n  width: 32px;\n  height: 32px;\n"])));
+var IconContainer = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  width: 32px;\n  height: 32px;\n  align-items: center;\n  justify-content: center;\n"], ["\n  width: 32px;\n  height: 32px;\n  align-items: center;\n  justify-content: center;\n"])));
+var CardHeaderLeftWrapper = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 0px;\n  gap: 8px;\n  overflow: hidden;\n  white-space: nowrap;\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 0px;\n  gap: 8px;\n  overflow: hidden;\n  white-space: nowrap;\n"])));
+var CardHeaderRightWrapper = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0px;\n  gap: 4px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0px;\n  gap: 4px;\n"])));
+var CardHeader = styled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  height: auto;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 0px;\n  gap: 10px;\n"], ["\n  display: flex;\n  width: 100%;\n  height: auto;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 0px;\n  gap: 10px;\n"])));
+var CardContainer = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 16px 24px 24px;\n  gap: 4px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 16px 24px 24px;\n  gap: 4px;\n"])));
+var StyledImg = styled.img(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  object-fit: cover;\n  width: 100%;\n  height: ", "px;\n  border-top-left-radius: 16px;\n  border-top-right-radius: 16px;\n  overflow: hidden;\n"], ["\n  object-fit: cover;\n  width: 100%;\n  height: ", "px;\n  border-top-left-radius: 16px;\n  border-top-right-radius: 16px;\n  overflow: hidden;\n"])), function (props) { return props.height; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;

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

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

package/dist/patterns/Card/index.js

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

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

@@ -0,0 +1,12 @@
+import React from "react";
+export interface DialogProps {
+    className?: string;
+    component?: React.ElementType;
+    /** `true` 값일때 모달이 노출됩니다. */
+    open: boolean;
+    /** 모달이 닫힐 때 호출되는 callback */
+    onClose?: () => void;
+    /** 모달의 내용으로 표기될 값 */
+    children: React.ReactNode;
+}
+export declare function Dialog(props: DialogProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/Dialog/Dialog.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 { Modal as MuiModal } from "@mui/material";
+import { css, useTheme } from "@emotion/react";
+import shadows from "../../foundation/shadows";
+export function Dialog(props) {
+    var className = props.className, _a = props.component, Component = _a === void 0 ? "div" : _a, open = props.open, onClose = props.onClose, children = props.children;
+    var theme = useTheme();
+    return (_jsx(MuiModal, __assign({ open: open, onClose: onClose }, { children: _jsx(Component, __assign({ className: className, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          background: ", ";\n          box-shadow: ", ";\n          border-radius: 16px;\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          transform: translate(-50%, -50%);\n          padding: 24px;\n          box-sizing: border-box;\n\n          display: flex;\n          width: 800px;\n          height: 600px;\n          padding: 16px 0px;\n          flex-direction: column;\n          gap: 12px;\n        "], ["\n          background: ", ";\n          box-shadow: ", ";\n          border-radius: 16px;\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          transform: translate(-50%, -50%);\n          padding: 24px;\n          box-sizing: border-box;\n\n          display: flex;\n          width: 800px;\n          height: 600px;\n          padding: 16px 0px;\n          flex-direction: column;\n          gap: 12px;\n        "])), theme.color.background.neutralBase, shadows.shadow04) }, { children: children })) })));
+}
+var templateObject_1;

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

@@ -0,0 +1,8 @@
+import React from "react";
+export interface DialogContentProps {
+    className?: string;
+    component?: React.ElementType;
+    /** Content 내용으로 표기될 값 */
+    children: React.ReactNode;
+}
+export declare function DialogContent(props: DialogContentProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/Dialog/DialogContent.js

@@ -0,0 +1,23 @@
+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";
+export function DialogContent(props) {
+    var className = props.className, _a = props.component, Component = _a === void 0 ? "div" : _a, children = props.children;
+    return (_jsx(Component, __assign({ className: className, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        display: flex;\n        padding: 0px 24px;\n        align-items: flex-start;\n        gap: 24px;\n      "], ["\n        display: flex;\n        padding: 0px 24px;\n        align-items: flex-start;\n        gap: 24px;\n      "]))) }, { children: children })));
+}
+var templateObject_1;

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export interface DialogNavigationProps {
+    className?: string;
+    component?: React.ElementType;
+    /** 현재 선택된 값 */
+    value: string;
+    /** DialogNavigationItem이 클릭될 때 호출되는 함수 */
+    onChange: (newValue: string) => void;
+    /** Content 내용으로 표기될 값 */
+    children: React.ReactNode;
+}
+export declare function DialogNavigation(props: DialogNavigationProps): JSX.Element;

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/Navigation/NavigationContext.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare const NavigationContext: React.Context<{
+    type: "horizontal" | "vertical";
+    size: "small" | "medium";
+}>;

package/dist/patterns/Navigation/NavigationContext.js

@@ -0,0 +1,5 @@
+import React from "react";
+export var NavigationContext = React.createContext({
+    type: "horizontal",
+    size: "medium",
+});

package/dist/patterns/Navigation/NavigationHorizontal.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface NavigationHorizontalProps {
+    className?: string;
+    component?: React.ElementType;
+    children?: React.ReactNode;
+    size: "small" | "medium";
+}
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A92757)
+ */
+export declare function NavigationHorizontal(props: NavigationHorizontalProps): React.ReactElement;