@team-monolith/cds 0.12.9 → 0.13.0

package/dist/index.d.ts

@@ -25,16 +25,6 @@ export * from "./components/Tooltip";
 export { default as color } from "./foundation/color";
 export { default as shadows } from "./foundation/shadows";
 export * from "./foundation/breakpoints";
-export { default as Dropdown } from "./patterns/Dropdown/Dropdown";
-export * from "./patterns/Dropdown";
-export { default as DropdownItem } from "./patterns/Dropdown/DropdownItem";
-export * from "./patterns/Dropdown/DropdownItem";
-export { default as DropdownMenu } from "./patterns/Dropdown/DropdownMenu";
-export * from "./patterns/Dropdown/DropdownMenu";
-export { default as EmptyState } from "./patterns/EmptyState";
-export * from "./patterns/EmptyState";
-export * from "./patterns/SegmentedControl";
-export * from "./patterns/Table";
 export { default as CodleDesignSystemProvider } from "./CodleDesignSystemProvider";
 export { light } from "./CodleDesignSystemProvider";
 export * from "./icons";

package/dist/index.js

@@ -25,16 +25,6 @@ export * from "./components/Tooltip";
 export { default as color } from "./foundation/color";
 export { default as shadows } from "./foundation/shadows";
 export * from "./foundation/breakpoints";
-export { default as Dropdown } from "./patterns/Dropdown/Dropdown";
-export * from "./patterns/Dropdown";
-export { default as DropdownItem } from "./patterns/Dropdown/DropdownItem";
-export * from "./patterns/Dropdown/DropdownItem";
-export { default as DropdownMenu } from "./patterns/Dropdown/DropdownMenu";
-export * from "./patterns/Dropdown/DropdownMenu";
-export { default as EmptyState } from "./patterns/EmptyState";
-export * from "./patterns/EmptyState";
-export * from "./patterns/SegmentedControl";
-export * from "./patterns/Table";
 export { default as CodleDesignSystemProvider } from "./CodleDesignSystemProvider";
 export { light } from "./CodleDesignSystemProvider";
 export * from "./icons";

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@team-monolith/cds",
-  "version": "0.12.9",
+  "version": "0.13.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "sideEffects": false,
   "dependencies": {
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",

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

@@ -1,39 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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    \n    /* Alt/Heading/20px-Hv */\n    font-family: NanumSquare Neo OTF;\n    font-size: 20px;\n    font-style: normal;\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    \n    /* Alt/Heading/20px-Hv */\n    font-family: NanumSquare Neo OTF;\n    font-size: 20px;\n    font-style: normal;\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/class-icon.svg

@@ -1,28 +0,0 @@
-<svg
-    width="32"
-    height="32"
-    viewBox="0 0 32 32"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <rect x="2" y="2" width="28" height="28" rx="10" fill="#FFFAE6" />
-    <g clipPath="url(#clip0_125_11773)">
-      <path
-        d="M15.7321 16.0674C15.4626 15.5284 14.8164 15.3404 14.2782 15.6099L12.2854 16.6329C12.2854 16.6329 11.1817 15.8519 10.8315 15.6099C10.6161 15.4485 9.94322 14.9096 9.29618 14.6942C8.59588 14.4521 6.76442 14.29 6.2529 15.5018C5.71396 16.7677 5.79543 20.0256 5.82207 22.3686C5.82207 22.584 5.9568 22.7187 6.17222 22.7187H10.0231C10.2652 22.7187 10.3466 22.584 10.3733 22.3952C10.3999 22.2871 10.6153 19.6214 10.5887 18.4636V18.0594L11.6117 18.7597C11.8005 18.8944 11.9885 18.9485 12.2039 18.9485C12.3653 18.9485 12.5275 18.9219 12.6888 18.8404L15.2739 17.4938C15.8128 17.2244 16.0008 16.5781 15.7313 16.0666L15.7321 16.0674Z"
-        fill="#FF9100"
-      />
-      <path
-        d="M25.5528 9.4967H13.2724C12.9222 9.4967 12.6261 9.79281 12.6261 10.143V14.4224L13.1133 14.1725C13.5113 13.9735 13.9374 13.8724 14.3604 13.8724C15.3748 13.8724 16.2866 14.431 16.7433 15.3302C17.0692 15.9585 17.1319 16.7034 16.9149 17.3763C16.6948 18.0618 16.2169 18.6171 15.5707 18.9399L13.0092 20.2739C12.8838 20.3366 12.7553 20.3859 12.6269 20.4274V21.991C12.6269 22.3411 12.923 22.6372 13.2731 22.6372H25.5528C25.9029 22.6372 26.199 22.3411 26.199 21.991V10.143C26.199 9.79281 25.9029 9.4967 25.5528 9.4967Z"
-        fill="#FFE98A"
-      />
-      <path
-        d="M8.48775 13.9672C9.78174 13.9672 10.8307 12.9182 10.8307 11.6242C10.8307 10.3302 9.78174 9.28125 8.48775 9.28125C7.19376 9.28125 6.14478 10.3302 6.14478 11.6242C6.14478 12.9182 7.19376 13.9672 8.48775 13.9672Z"
-        fill="#FF9100"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_125_11773">
-        <rect width="24" height="24" fill="white" transform="translate(4 4)" />
-      </clipPath>
-    </defs>
-  </svg>

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

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

package/dist/patterns/Card/index.js

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

package/dist/patterns/Card/material-icon.svg

@@ -1,25 +0,0 @@
-<svg
-    width="32"
-    height="32"
-    viewBox="0 0 32 32"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <rect x="2" y="2" width="28" height="28" rx="10" fill="#ECF3FF" />
-    <path
-      d="M22.8152 7H9.68479C9.30659 7 9 7.29859 9 7.66693V25.3331C9 25.7014 9.30659 26 9.68479 26H22.8152C23.1934 26 23.5 25.7014 23.5 25.3331V7.66693C23.5 7.29859 23.1934 7 22.8152 7Z"
-      fill="#C5DBFF"
-    />
-    <path
-      d="M20.255 9.5H12.245C11.2813 9.5 10.5 10.2833 10.5 11.2496V11.2504C10.5 12.2167 11.2813 13 12.245 13H20.255C21.2187 13 22 12.2167 22 11.2504V11.2496C22 10.2833 21.2187 9.5 20.255 9.5Z"
-      fill="#82ACE8"
-    />
-    <path
-      d="M21.0614 15H11.4386C11.1963 15 11 15.2239 11 15.5C11 15.7761 11.1963 16 11.4386 16H21.0614C21.3037 16 21.5 15.7761 21.5 15.5C21.5 15.2239 21.3037 15 21.0614 15Z"
-      fill="#82ACE8"
-    />
-    <path
-      d="M15.8574 18.4383L11.643 16.5636C11.5494 16.5215 11.4462 16.5 11.3413 16.5H7.68565C7.30697 16.5 7 16.7791 7 17.1233V25.3767C7 25.7209 7.30697 26 7.68565 26H24.3144C24.693 26 25 25.7209 25 25.3767V19.1252C25 18.781 24.693 18.5019 24.3144 18.5019H16.1592C16.0551 18.5019 15.9519 18.4805 15.8574 18.4383Z"
-      fill="#5599FF"
-    />
-  </svg>

package/dist/patterns/Card/problem-icon.svg

@@ -1,25 +0,0 @@
-<svg
-    width="32"
-    height="32"
-    viewBox="0 0 32 32"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <rect x="2" y="2" width="28" height="28" rx="10" fill="#F4FAE8" />
-    <path
-      d="M23.5624 11.3143V25.204C23.5624 25.6434 23.2068 26 22.7687 26H9.7818C9.34374 26 8.98816 25.6434 8.98816 25.204V7.12958C8.98816 6.69024 9.34374 6.33362 9.7818 6.33362H18.5961C18.8069 6.33362 19.0085 6.41726 19.1579 6.56707L23.3296 10.7509C23.478 10.8998 23.5624 11.1029 23.5624 11.3143Z"
-      fill="#B3ECCD"
-    />
-    <path
-      d="M18.6548 6.59832V11.0496C18.6548 11.1957 18.773 11.3134 18.9178 11.3134H23.2975C23.5312 11.3134 23.6494 11.0303 23.4854 10.8639L19.1057 6.41265C18.9398 6.24446 18.6548 6.3621 18.6548 6.59832Z"
-      fill="#43C422"
-    />
-    <path
-      d="M11.6596 17.558C11.8383 17.478 11.9657 17.353 12.0427 17.1839C12.1197 17.0148 12.1581 16.7896 12.1581 16.5093V15.6086C12.1581 14.9808 12.2699 14.5047 12.4936 14.1793C12.7172 13.854 13.015 13.637 13.3862 13.5286C13.7573 13.4201 14.2614 13.3668 14.8974 13.3668V14.6242C14.5885 14.6242 14.3521 14.6646 14.189 14.7446C14.0259 14.8245 13.9131 14.9468 13.8517 15.1113C13.7903 15.2758 13.7601 15.4964 13.7601 15.774V16.9597C13.7601 17.2639 13.6831 17.5249 13.5301 17.7427C13.377 17.9606 13.0929 18.137 12.6778 18.2712C12.2626 18.4063 11.6825 18.4734 10.9365 18.4734V17.6802C11.2399 17.6802 11.4809 17.6398 11.6596 17.5598V17.558ZM10.9365 17.6784H12.346V19.1922H10.9365V17.6784ZM13.3862 23.3494C13.015 23.2428 12.7172 23.0258 12.4936 22.7005C12.2699 22.3751 12.1581 21.8981 12.1581 21.2712V20.3659C12.1581 20.0856 12.1197 19.8604 12.0427 19.6894C11.9657 19.5185 11.8374 19.3935 11.6596 19.3126C11.4809 19.2326 11.2399 19.1922 10.9365 19.1922V18.4036C11.6816 18.4036 12.2626 18.4698 12.6778 18.6021C13.0929 18.7345 13.377 18.9109 13.5301 19.1306C13.6831 19.3512 13.7601 19.6132 13.7601 19.9174V21.103C13.7601 21.3806 13.7903 21.6012 13.8517 21.7657C13.9131 21.9303 14.0249 22.0525 14.189 22.1325C14.353 22.2124 14.5885 22.2529 14.8974 22.2529V23.5102C14.2614 23.5102 13.7573 23.4569 13.3862 23.3503V23.3494Z"
-      fill="#1FBB26"
-    />
-    <path
-      d="M19.1643 13.5256C19.5354 13.6322 19.8333 13.8482 20.0569 14.1745C20.2805 14.4999 20.3923 14.9769 20.3923 15.6037V16.5091C20.3923 16.7894 20.4308 17.0155 20.5078 17.1855C20.5848 17.3565 20.7131 17.4815 20.8909 17.5624C21.0687 17.6432 21.3106 17.6828 21.6139 17.6828V18.4714C20.8689 18.4714 20.2878 18.4052 19.8727 18.2728C19.4576 18.1405 19.1735 17.964 19.0204 17.7443C18.8674 17.5238 18.7913 17.2618 18.7913 16.9576V15.7719C18.7913 15.4943 18.7611 15.2738 18.6997 15.1092C18.6383 14.9447 18.5255 14.8225 18.3624 14.7425C18.1993 14.6625 17.9628 14.6221 17.654 14.6221V13.3647C18.29 13.3647 18.794 13.4181 19.1652 13.5247L19.1643 13.5256ZM20.8909 19.316C20.7122 19.396 20.5848 19.521 20.5078 19.6901C20.4308 19.8602 20.3923 20.0844 20.3923 20.3648V21.2655C20.3923 21.8932 20.2805 22.3694 20.0569 22.6947C19.8333 23.0201 19.5354 23.237 19.1643 23.3455C18.7931 23.4539 18.2891 23.5072 17.6531 23.5072V22.2499C17.9619 22.2499 18.1984 22.2094 18.3615 22.1295C18.5246 22.0495 18.6373 21.9273 18.6987 21.7627C18.7601 21.5982 18.7904 21.3776 18.7904 21.1V19.9144C18.7904 19.6102 18.8664 19.3491 19.0195 19.1313C19.1725 18.9135 19.4566 18.7379 19.8718 18.6028C20.2869 18.4677 20.867 18.4006 21.613 18.4006V19.1938C21.3097 19.1938 21.0687 19.2342 20.89 19.3142L20.8909 19.316ZM21.6139 19.1956H20.2045V17.6818H21.6139V19.1956Z"
-      fill="#1FBB26"
-    />
-  </svg>

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

@@ -1,12 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,12 +0,0 @@
-/// <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

@@ -1,25 +0,0 @@
-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

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

package/dist/patterns/Dialog/DialogNavigationContext.js

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

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

@@ -1,10 +0,0 @@
-/// <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

@@ -1,25 +0,0 @@
-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

@@ -1,10 +0,0 @@
-/// <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

@@ -1,31 +0,0 @@
-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

@@ -1,13 +0,0 @@
-/// <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

@@ -1,17 +0,0 @@
-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

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

package/dist/patterns/Dialog/DialogPanelsContext.js

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

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

@@ -1,13 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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";
-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

@@ -1,7 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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;