@team-monolith/cds 0.3.0 → 0.3.2

package/dist/icons/Media/index.js

@@ -0,0 +1,2 @@
+export { default as playList2FillSvg } from "remixicon/icons/Media/play-list-2-fill.svg";
+export { ReactComponent as PlayList2FillIcon } from "remixicon/icons/Media/play-list-2-fill.svg";

package/dist/icons/System/index.d.ts

@@ -0,0 +1,2 @@
+export { default as refreshLineSvg } from "remixicon/icons/System/refresh-line.svg";
+export { ReactComponent as RefreshLineIcon } from "remixicon/icons/System/refresh-line.svg";

package/dist/icons/System/index.js

@@ -0,0 +1,2 @@
+export { default as refreshLineSvg } from "remixicon/icons/System/refresh-line.svg";
+export { ReactComponent as RefreshLineIcon } from "remixicon/icons/System/refresh-line.svg";

package/dist/icons/arrows.d.ts

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

@@ -0,0 +1,21 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+export var ArrowDropDownFillIcon = function (props) { return (_jsx("svg", __assign({}, props, { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, { children: _jsx("path", { fill: "currentColor", d: "m12 14l-4-4h8l-4 4Z" }) }))); };
+export var ExpandUpDownIcon = function (props) { return (_jsx("svg", __assign({}, props, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M18 9L12 3L6 9H18ZM18 15L12 21L6 15H18Z", fill: "currentColor" }) }))); };
+export var ArrowDownFillIcon = function (props) { return (_jsx("svg", __assign({}, props, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M13 12H20L12 20L4 12H11V4H13V12Z", fill: "currentColor" }) }))); };
+export var ArrowUpFillIcon = function (props) { return (_jsx("svg", __assign({}, props, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M13 12V20H11V12H4L12 4L20 12H13Z", fill: "currentColor" }) }))); };
+export var 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/brand.d.ts

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

package/dist/icons/brand.js

@@ -0,0 +1,13 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+export var SymbolIcon = function (props) { return (_jsx("svg", __assign({}, props, { viewBox: "-3 -2 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M8.89269 0C3.98164 0 0 3.80096 0 8.49034C0 12.0308 2.26988 15.0622 5.4957 16.336C6.05262 16.5557 6.36122 17.1512 6.19366 17.7238L5.83323 18.9592C5.66206 19.5427 6.17196 20.1009 6.76987 19.9845C8.47801 19.6495 11.564 18.7587 14.0701 16.4644C16.9898 13.7908 17.7854 10.9527 17.7854 8.49154C17.7854 3.80337 13.8037 0.00120173 8.89269 0.00120173V0Z", fill: "currentColor" }) }))); };

package/dist/icons/design.d.ts

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

package/dist/icons/design.js

@@ -0,0 +1,13 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+export var PencilFillIcon = 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.8995 6.85431L17.1421 11.0969L7.24264 20.9964H3V16.7538L12.8995 6.85431ZM14.3137 5.44009L16.435 3.31877C16.8256 2.92825 17.4587 2.92825 17.8492 3.31877L20.6777 6.1472C21.0682 6.53772 21.0682 7.17089 20.6777 7.56141L18.5563 9.68273L14.3137 5.44009Z", fill: "currentColor" }) }))); };

package/dist/icons/map.d.ts

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

package/dist/icons/map.js

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

package/dist/icons/system.d.ts

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

package/dist/icons/system.js

@@ -0,0 +1,22 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+export var CloseFillIcon = function (props) { return (_jsx("svg", __assign({}, props, { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, { children: _jsx("path", { fill: "currentColor", d: "m12 10.586l4.95-4.95l1.415 1.415l-4.95 4.95l4.95 4.95l-1.415 1.414l-4.95-4.95l-4.95 4.95l-1.413-1.415l4.95-4.95l-4.95-4.95L7.05 5.638l4.95 4.95Z" }) }))); };
+export var CloseCircleFillIcon = function (props) { return (_jsx("svg", __assign({}, props, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 10.5858L9.17157 7.75736L7.75736 9.17157L10.5858 12L7.75736 14.8284L9.17157 16.2426L12 13.4142L14.8284 16.2426L16.2426 14.8284L13.4142 12L16.2426 9.17157L14.8284 7.75736L12 10.5858Z", fill: "currentColor" }) }))); };
+export var ErrorWarningFillIcon = function (props) { return (_jsx("svg", __assign({}, props, { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, { children: _jsx("path", { fill: "currentColor", d: "M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10Zm-1-7v2h2v-2h-2Zm0-8v6h2V7h-2Z" }) }))); };
+export var AlertFillIcon = function (props) { return (_jsx("svg", __assign({}, props, { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, { children: _jsx("path", { fill: "currentColor", d: "m12.865 3l9.526 16.5a1 1 0 0 1-.866 1.5H2.473a1 1 0 0 1-.866-1.5L11.133 3a1 1 0 0 1 1.732 0Zm-1.866 13v2h2v-2h-2Zm0-7v5h2V9h-2Z" }) }))); };
+export var CheckboxCircleFillIcon = function (props) { return (_jsx("svg", __assign({}, props, { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, { children: _jsx("path", { fill: "currentColor", d: "M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10Zm-.997-6l7.07-7.071l-1.413-1.414l-5.657 5.657l-2.829-2.829l-1.414 1.414L11.003 16Z" }) }))); };
+export var EyeFillIcon = function (props) { return (_jsx("svg", __assign({}, props, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12ZM12.0003 17C14.7617 17 17.0003 14.7614 17.0003 12C17.0003 9.23858 14.7617 7 12.0003 7C9.23884 7 7.00026 9.23858 7.00026 12C7.00026 14.7614 9.23884 17 12.0003 17ZM12.0003 15C10.3434 15 9.00026 13.6569 9.00026 12C9.00026 10.3431 10.3434 9 12.0003 9C13.6571 9 15.0003 10.3431 15.0003 12C15.0003 13.6569 13.6571 15 12.0003 15Z", fill: "currentColor" }) }))); };
+export var InformationFillIcon = function (props) { return (_jsx("svg", __assign({}, props, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11 11V17H13V11H11ZM11 7V9H13V7H11Z", fill: "currentColor" }) }))); };
+export var FilterFillIcon = function (props) { return (_jsx("svg", __assign({}, props, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M21 4V6H20L14 15V22H10V15L4 6H3V4H21Z", fill: "currentColor" }) }))); };
+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" }) }))); };
+export var ForbidFillIcon = 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 22ZM8.52313 7.10891C8.25459 7.30029 7.99828 7.51644 7.75736 7.75736C7.51644 7.99828 7.30029 8.25459 7.10891 8.52313L15.4769 16.8911C15.7454 16.6997 16.0017 16.4836 16.2426 16.2426C16.4836 16.0017 16.6997 15.7454 16.8911 15.4769L8.52313 7.10891Z", fill: "currentColor" }) }))); };

package/dist/index.d.ts

@@ -0,0 +1,44 @@
+export * from "./components/AlertDialog";
+export { default as Banner } from "./components/Banner";
+export * from "./components/Banner";
+export { default as Button } from "./components/Button";
+export * from "./components/Button";
+export { default as CheckboxInput } from "./components/CheckboxInput";
+export * from "./components/CheckboxInput";
+export { default as Input } from "./components/Input";
+export * from "./components/Input";
+export { default as Pagination } from "./components/Pagination";
+export * from "./components/Pagination";
+export { default as PinInput } from "./components/PinInput";
+export * from "./components/PinInput";
+export { default as RadioInput } from "./components/RadioInput";
+export * from "./components/RadioInput";
+export { default as SquareButton } from "./components/SquareButton";
+export * from "./components/SquareButton";
+export { default as Switch } from "./components/Switch";
+export * from "./components/Switch";
+export { default as Tag } from "./components/Tag";
+export * from "./components/Tag";
+export { default as Tooltip } from "./components/Tooltip";
+export * from "./components/Tooltip";
+export { default as color } from "./foundation/color";
+export { default as shadows } from "./foundation/shadows";
+export * from "./icons/brand";
+export * from "./icons/map";
+export * from "./icons/system";
+export * from "./icons/design";
+export * from "./icons/Arrows";
+export * from "./icons/Media";
+export * from "./icons/System";
+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";

package/dist/index.js

@@ -0,0 +1,44 @@
+export * from "./components/AlertDialog";
+export { default as Banner } from "./components/Banner";
+export * from "./components/Banner";
+export { default as Button } from "./components/Button";
+export * from "./components/Button";
+export { default as CheckboxInput } from "./components/CheckboxInput";
+export * from "./components/CheckboxInput";
+export { default as Input } from "./components/Input";
+export * from "./components/Input";
+export { default as Pagination } from "./components/Pagination";
+export * from "./components/Pagination";
+export { default as PinInput } from "./components/PinInput";
+export * from "./components/PinInput";
+export { default as RadioInput } from "./components/RadioInput";
+export * from "./components/RadioInput";
+export { default as SquareButton } from "./components/SquareButton";
+export * from "./components/SquareButton";
+export { default as Switch } from "./components/Switch";
+export * from "./components/Switch";
+export { default as Tag } from "./components/Tag";
+export * from "./components/Tag";
+export { default as Tooltip } from "./components/Tooltip";
+export * from "./components/Tooltip";
+export { default as color } from "./foundation/color";
+export { default as shadows } from "./foundation/shadows";
+export * from "./icons/brand";
+export * from "./icons/map";
+export * from "./icons/system";
+export * from "./icons/design";
+export * from "./icons/Arrows";
+export * from "./icons/Media";
+export * from "./icons/System";
+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";

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/class-icon.svg

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

@@ -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/Card/material-icon.svg

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

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

@@ -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;