maru_design2 2.0.1 → 2.2.0

package/dist/components/atoms/icon/Icon.d.ts

@@ -10,7 +10,7 @@ export interface IconProps {
      */
     color?: string;
     /**
-     * [14, 16, 18, 20, 24, 40, 48]. (@v1 width, height)
+     * [14, 16, 18, 20, 24, 32, 40, 48]. (@v1 width, height)
      */
     size?: TIconSize;
 }

package/dist/components/atoms/icon/iconmap.d.ts

@@ -111,6 +111,7 @@ export declare const ICONS: {
     readonly FileQuestion02: "FileQuestion02";
     readonly FileSearch02: "FileSearch02";
     readonly FileX02Thin: "FileX02Thin";
+    readonly FileX02: "FileX02";
     readonly FilterLinesThin: "FilterLinesThin";
     readonly FilterLines: "FilterLines";
     readonly FolderUploadThin: "FolderUploadThin";

package/dist/components/molecules/table/Colgroup.d.ts

@@ -0,0 +1,9 @@
+import { IColumnFormats } from './types';
+interface Props {
+    hasCheckbox?: boolean;
+    formats: IColumnFormats[];
+    hasKebabMenu: boolean;
+    kebabMenuWidth?: string;
+}
+declare function Colgroup({ hasCheckbox, formats, hasKebabMenu, kebabMenuWidth, }: Props): import("react/jsx-runtime").JSX.Element;
+export default Colgroup;

package/dist/components/molecules/table/Table.d.ts

@@ -0,0 +1,3 @@
+import { TableProps } from './types';
+import './table.scss';
+export declare function Table({ rowIdKey, data, formats, sort, onSort, checkedIds, onCheck, kebabMenu, className, id, tableMaxHeight, noData, loading, }: TableProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/table/body/CheckboxTd.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    rowId: string;
+    checked: boolean;
+    onCheck: (rowId: string, checked: boolean) => void;
+}
+declare function CheckboxTd({ rowId, checked, onCheck }: Props): import("react/jsx-runtime").JSX.Element;
+export default CheckboxTd;

package/dist/components/molecules/table/body/ExpandingRow.d.ts

@@ -0,0 +1,9 @@
+import { IExpandingColumnFormats } from '../types';
+interface Props {
+    rowId: string;
+    expandingData: any;
+    expandingRowIdKey?: string;
+    expandingFormat?: IExpandingColumnFormats[];
+}
+declare function ExpandingRow({ rowId, expandingData, expandingRowIdKey, expandingFormat, }: Props): import("react/jsx-runtime").JSX.Element | null;
+export default ExpandingRow;

package/dist/components/molecules/table/body/KebabMenuTd.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface Props {
+    rowId: string;
+    kebabContent?: (rowId: string, onClose: () => void) => React.ReactNode;
+}
+declare function KebabMenuTd({ rowId, kebabContent }: Props): import("react/jsx-runtime").JSX.Element | null;
+export default KebabMenuTd;

package/dist/components/molecules/table/body/TBody.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { IColumnFormats } from '../types';
+interface Props {
+    rowIdKey: string;
+    data: Record<string, any>[];
+    formats: IColumnFormats[];
+    checkedIds?: string[];
+    onCheck?: (ids: string[]) => void;
+    hasKebabMenu: boolean;
+    kebabContent?: (rowId: string, onClose: () => void) => React.ReactNode;
+    noData?: {
+        isNoData: boolean;
+        message: string;
+    };
+    loading?: {
+        isLoading: boolean;
+        content?: React.ReactNode;
+    };
+}
+declare function TBody({ rowIdKey, formats, data, checkedIds, onCheck, hasKebabMenu, kebabContent, noData, loading, }: Props): import("react/jsx-runtime").JSX.Element;
+export default TBody;

package/dist/components/molecules/table/body/TBodyEmptyContent.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface Props {
+    status: string;
+    noData?: {
+        isNoData: boolean;
+        message: string;
+    };
+    loading?: {
+        isLoading: boolean;
+        content?: React.ReactNode;
+    };
+}
+declare function TBodyEmptyContent({ status, noData, loading }: Props): import("react/jsx-runtime").JSX.Element;
+export default TBodyEmptyContent;

package/dist/components/molecules/table/header/THead.d.ts

@@ -0,0 +1,12 @@
+import { IColumnFormats, ISort } from '../types';
+interface Props {
+    formats: IColumnFormats[];
+    currentSort?: ISort;
+    onSortClick: (columnName: string, sortable: boolean) => () => void;
+    hasCheckbox?: boolean;
+    allCheckbox: boolean;
+    onAllCheck: (checked: boolean) => void;
+    hasKebabMenu: boolean;
+}
+declare function THead({ formats, currentSort, onSortClick, hasCheckbox, allCheckbox, onAllCheck, hasKebabMenu, }: Props): import("react/jsx-runtime").JSX.Element;
+export default THead;

package/dist/components/molecules/table/index.d.ts

@@ -0,0 +1 @@
+export * from './Table';

package/dist/components/molecules/table/types.d.ts

@@ -0,0 +1,73 @@
+/// <reference types="react" />
+export interface ISort {
+    columnName: string;
+    desc: boolean;
+}
+export interface IColumnFormats {
+    columnIdKey: string;
+    columnName?: string;
+    customHeader?: (content: any, colId: string) => React.ReactNode;
+    customColumn?: (content: any, rowId: string) => React.ReactNode;
+    width?: string;
+    sortable?: boolean;
+    isHide?: boolean;
+}
+export interface IExpandingColumnFormats {
+    columnIdKeys: string[];
+    colSpan?: number;
+    customColumn?: (contents: any, rowId1: string, rowId2: string) => React.ReactNode;
+}
+export interface TableProps {
+    data: Record<string, any>[];
+    /**
+     * 행 아이디로 쓸 키
+     */
+    rowIdKey: string;
+    /**
+     * { columnIdKey, columnName, customHeader, customColumn, width, sortable, isHide }
+     */
+    formats: IColumnFormats[];
+    /**
+     * { columnName, desc }. (@v1 currentSort)
+     */
+    sort?: ISort;
+    /**
+     * (@v1 setCurrentSort)
+     */
+    onSort?: (sort: ISort) => void;
+    /**
+     * 체크된 아이디들(@v1 hasCheckbox, checkedArray)
+     */
+    checkedIds?: string[];
+    /**
+     * (@v1 setCheckedArray)
+     */
+    onCheck?: (ids: string[]) => void;
+    /**
+     * 더보기 메뉴. { content, width } (@v1 hamberger)
+     */
+    kebabMenu?: {
+        content: (rowId: string, onClose: () => void) => React.ReactNode;
+        width?: string;
+    };
+    className?: string;
+    id?: string;
+    /**
+     * 최대 높이
+     */
+    tableMaxHeight?: number;
+    /**
+     * 데이터가 없을때의 조건과 문구
+     */
+    noData?: {
+        isNoData: boolean;
+        message: string;
+    };
+    /**
+     * 로딩일때의 조건과 노드
+     */
+    loading?: {
+        isLoading: boolean;
+        content?: React.ReactNode;
+    };
+}

package/dist/enums/color.d.ts

@@ -1,10 +1,11 @@
-export type TTheme = 'blue';
+export type TTheme = 'blue' | 'green';
 declare const DColor: {
     readonly primary: "var(--p)";
     readonly secondary: "#8c8c8c";
     readonly positive: "#58c5a6";
     readonly warning: "#ffb020";
     readonly danger: "#e53e3e";
+    readonly success: "#308acc";
 };
 export declare const COLORS: string[];
 export type TColor = (typeof COLORS)[number];

package/dist/enums/size.d.ts

@@ -4,7 +4,7 @@ export declare const CHECKBOX_SIZES: readonly [16, 18, 24];
 export type TCheckboxSize = (typeof CHECKBOX_SIZES)[number];
 export declare const CHIP_SIZES: readonly ["small", "normal"];
 export type TChipSize = (typeof CHIP_SIZES)[number];
-export declare const ICON_SIZES: readonly [14, 16, 18, 20, 24, 40, 48];
+export declare const ICON_SIZES: readonly [14, 16, 18, 20, 24, 32, 40, 48];
 export type TIconSize = (typeof ICON_SIZES)[number];
 export declare const MODAL_SIZES: readonly ["xs", "s", "m", "l", "xl"];
 export type TModalSize = (typeof MODAL_SIZES)[number];

package/dist/hooks/useColor.d.ts

@@ -1,4 +1,4 @@
 declare const useColor: (color?: string) => {
-    keyColor: "var(--p)" | "#8c8c8c" | "#58c5a6" | "#ffb020" | "#e53e3e";
+    keyColor: "var(--p)" | "#8c8c8c" | "#58c5a6" | "#ffb020" | "#e53e3e" | "#308acc";
 };
 export default useColor;

package/dist/index.d.ts

@@ -11,3 +11,4 @@ export * from './components/atoms/tooltip';
 export * from './components/molecules/dropdown';
 export * from './components/molecules/modal';
 export * from './components/molecules/pagination';
+export * from './components/molecules/table';

package/dist/index.js

@@ -1,5 +1,5 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useMemo, forwardRef, useRef, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { useState, useMemo, forwardRef, useRef, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 
 /******************************************************************************
@@ -82,11 +82,11 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$c = "* {\n  /* HTML5 display-role reset for older browsers */\n}\n* html,\n* body,\n* div,\n* span,\n* applet,\n* object,\n* iframe,\n* h1,\n* h2,\n* h3,\n* h4,\n* h5,\n* h6,\n* p,\n* blockquote,\n* pre,\n* a,\n* abbr,\n* acronym,\n* address,\n* big,\n* cite,\n* code,\n* del,\n* dfn,\n* em,\n* img,\n* ins,\n* kbd,\n* q,\n* s,\n* samp,\n* small,\n* strike,\n* strong,\n* sub,\n* sup,\n* tt,\n* var,\n* b,\n* u,\n* i,\n* center,\n* dl,\n* dt,\n* dd,\n* ol,\n* ul,\n* li,\n* fieldset,\n* form,\n* label,\n* legend,\n* table,\n* caption,\n* tbody,\n* tfoot,\n* thead,\n* tr,\n* th,\n* td,\n* article,\n* aside,\n* canvas,\n* details,\n* embed,\n* figure,\n* figcaption,\n* footer,\n* header,\n* hgroup,\n* menu,\n* nav,\n* output,\n* ruby,\n* section,\n* summary,\n* time,\n* mark,\n* audio,\n* video {\n  padding: 0;\n  border: 0;\n  margin: 0;\n  font: inherit;\n  font-size: 100%;\n  vertical-align: baseline;\n}\n* article,\n* aside,\n* details,\n* figcaption,\n* figure,\n* footer,\n* header,\n* hgroup,\n* menu,\n* nav,\n* section {\n  display: block;\n}\n* ol,\n* ul {\n  list-style: none;\n}\n* blockquote,\n* q {\n  quotes: none;\n}\n* blockquote::before,\n* blockquote::after,\n* q::before,\n* q::after {\n  content: \"\";\n  content: none;\n}\n* table {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n* html {\n  box-sizing: border-box;\n}\n* *,\n* *::before,\n* *::after {\n  box-sizing: inherit;\n}";
-styleInject(css_248z$c);
+var css_248z$d = "* {\n  /* HTML5 display-role reset for older browsers */\n}\n* html,\n* body,\n* div,\n* span,\n* applet,\n* object,\n* iframe,\n* h1,\n* h2,\n* h3,\n* h4,\n* h5,\n* h6,\n* p,\n* blockquote,\n* pre,\n* a,\n* abbr,\n* acronym,\n* address,\n* big,\n* cite,\n* code,\n* del,\n* dfn,\n* em,\n* img,\n* ins,\n* kbd,\n* q,\n* s,\n* samp,\n* small,\n* strike,\n* strong,\n* sub,\n* sup,\n* tt,\n* var,\n* b,\n* u,\n* i,\n* center,\n* dl,\n* dt,\n* dd,\n* ol,\n* ul,\n* li,\n* fieldset,\n* form,\n* label,\n* legend,\n* table,\n* caption,\n* tbody,\n* tfoot,\n* thead,\n* tr,\n* th,\n* td,\n* article,\n* aside,\n* canvas,\n* details,\n* embed,\n* figure,\n* figcaption,\n* footer,\n* header,\n* hgroup,\n* menu,\n* nav,\n* output,\n* ruby,\n* section,\n* summary,\n* time,\n* mark,\n* audio,\n* video {\n  padding: 0;\n  border: 0;\n  margin: 0;\n  font: inherit;\n  font-size: 100%;\n  vertical-align: baseline;\n}\n* article,\n* aside,\n* details,\n* figcaption,\n* figure,\n* footer,\n* header,\n* hgroup,\n* menu,\n* nav,\n* section {\n  display: block;\n}\n* ol,\n* ul {\n  list-style: none;\n}\n* blockquote,\n* q {\n  quotes: none;\n}\n* blockquote::before,\n* blockquote::after,\n* q::before,\n* q::after {\n  content: \"\";\n  content: none;\n}\n* table {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n* html {\n  box-sizing: border-box;\n}\n* *,\n* *::before,\n* *::after {\n  box-sizing: inherit;\n}";
+styleInject(css_248z$d);
 
-var css_248z$b = ":root {\n  --primary: var(--p);\n  --primary-50-per: var(--p-50-per);\n  --primary-50: var(--p-50);\n  --primary-20-per: var(--p-20-per);\n  --primary-20: var(--p-20);\n  --primary-10-per: var(--p-10-per);\n  --primary-10: var(--p-10);\n}\n\n[data-theme=blue] {\n  --p: #308acc;\n  --p-50-per: #308acc80;\n  --p-50: #97c4e5;\n  --p-20-per: #308acc33;\n  --p-20: #d6e8f5;\n  --p-10-per: #308acc1a;\n  --p-10: #eaf3fa;\n}";
-styleInject(css_248z$b);
+var css_248z$c = ":root {\n  --primary: var(--p);\n  --primary-50-per: var(--p-50-per);\n  --primary-50: var(--p-50);\n  --primary-20-per: var(--p-20-per);\n  --primary-20: var(--p-20);\n  --primary-10-per: var(--p-10-per);\n  --primary-10: var(--p-10);\n}\n\n[data-theme=blue] {\n  --p: #308acc;\n  --p-50-per: #308acc80;\n  --p-50: #97c4e5;\n  --p-20-per: #308acc33;\n  --p-20: #d6e8f5;\n  --p-10-per: #308acc1a;\n  --p-10: #eaf3fa;\n}\n\n[data-theme=green] {\n  --p: #096412;\n  --p-50-per: #09641280;\n  --p-50: #84b188;\n  --p-20-per: #09641233;\n  --p-20: #cee0d0;\n  --p-10-per: #0964121a;\n  --p-10: #e6ede6;\n}";
+styleInject(css_248z$c);
 
 function StyleProvider(_a) {
   var children = _a.children,
@@ -198,7 +198,8 @@ var DColor = {
   secondary: '#8c8c8c',
   positive: '#58c5a6',
   warning: '#ffb020',
-  danger: '#e53e3e' // $point-red,
+  danger: '#e53e3e',
+  success: '#308acc' // $success
 };
 
 var useColor = function useColor(color) {
@@ -1561,6 +1562,20 @@ var iconmap = {
     }],
     "circles": []
   },
+  "FileX02": {
+    "width": "32",
+    "height": "32",
+    "viewBox": "0 0 32 32",
+    "fill": "none",
+    "paths": [{
+      "d": "M18.6667 14.6667H10.6667M13.3334 20.0001H10.6667M21.3334 9.33341H10.6667M26.6667 16.0001V9.06675C26.6667 6.82654 26.6667 5.70643 26.2307 4.85079C25.8472 4.09814 25.2353 3.48622 24.4827 3.10272C23.627 2.66675 22.5069 2.66675 20.2667 2.66675H11.7334C9.49316 2.66675 8.37306 2.66675 7.51741 3.10272C6.76476 3.48622 6.15284 4.09814 5.76935 4.85079C5.33337 5.70643 5.33337 6.82654 5.33337 9.06675V22.9334C5.33337 25.1736 5.33337 26.2937 5.76935 27.1494C6.15284 27.902 6.76476 28.5139 7.51741 28.8974C8.37306 29.3334 9.49316 29.3334 11.7334 29.3334H16M21.3334 21.3334L28 28.0001M28 21.3334L21.3334 28.0001",
+      "stroke": "#BDBDBD",
+      "strokeWidth": "2",
+      "strokeLinecap": "round",
+      "strokeLinejoin": "round"
+    }],
+    "circles": []
+  },
   "FilterLinesThin": {
     "width": "18",
     "height": "18",
@@ -2750,6 +2765,7 @@ var ICONS = {
   "FileQuestion02": "FileQuestion02",
   "FileSearch02": "FileSearch02",
   "FileX02Thin": "FileX02Thin",
+  "FileX02": "FileX02",
   "FilterLinesThin": "FilterLinesThin",
   "FilterLines": "FilterLines",
   "FolderUploadThin": "FolderUploadThin",
@@ -2868,8 +2884,8 @@ function Icon(_a) {
   }));
 }
 
-var css_248z$a = ".size-small {\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 600;\n}\n\n.size-normal {\n  padding: 8px 10px;\n  border-radius: 8px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 600;\n}\n\n.size-large {\n  padding: 4px 12px;\n  border-radius: 8px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 600;\n}\n\n.maru-button {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  border: 0;\n  cursor: pointer;\n  gap: 8px;\n}\n.maru-button:focus-within {\n  outline: none;\n}\n.maru-button:disabled {\n  cursor: default;\n  opacity: 0.5;\n  pointer-events: none;\n}\n.maru-button-primary-default {\n  background-color: var(--p);\n  color: white;\n}\n.maru-button-primary-default:hover {\n  box-shadow: 0 0 6px var(--p);\n}\n.maru-button-primary-default:focus-visible, .maru-button-primary-default:active {\n  box-shadow: none;\n  background-color: var(--p-10);\n  color: var(--p);\n}\n.maru-button-primary-default-light {\n  background-color: var(--p-10);\n  color: var(--p);\n}\n.maru-button-primary-default-light:hover {\n  box-shadow: 0 0 6px var(--p-50-per);\n}\n.maru-button-primary-default-light:focus-visible, .maru-button-primary-default-light:active {\n  box-shadow: none;\n  background-color: var(--p);\n  color: white;\n}\n.maru-button-primary-outline {\n  background-color: white;\n  color: var(--p);\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-outline:hover {\n  box-shadow: 0 0 6px var(--p-20);\n}\n.maru-button-primary-outline:focus-visible, .maru-button-primary-outline:active {\n  box-shadow: none;\n  background-color: var(--p-20);\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-outline:hover {\n  box-shadow: 0 0 6px var(--p-50-per);\n}\n.maru-button-primary-outline:focus-visible, .maru-button-primary-outline:active {\n  box-shadow: none;\n  background-color: var(--p-10);\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-text {\n  background-color: white;\n  color: var(--p);\n}\n.maru-button-primary-color-on-focus {\n  background-color: white;\n  color: #bdbdbd;\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n  padding: 5px 8px !important;\n  gap: 4px;\n}\n.maru-button-primary-color-on-focus:hover {\n  box-shadow: 0px 0px 6px 0px #e4e4e4;\n}\n.maru-button-primary-color-on-focus:focus-visible, .maru-button-primary-color-on-focus:active {\n  background-color: var(--p-10);\n  color: var(--p);\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-secondary-default {\n  background-color: #8c8c8c;\n  color: white;\n  background-color: #e4e4e4;\n  color: #8c8c8c;\n}\n.maru-button-secondary-default:hover {\n  box-shadow: 0 0 6px #8c8c8c;\n}\n.maru-button-secondary-default:focus-visible, .maru-button-secondary-default:active {\n  box-shadow: none;\n  background-color: #fafafa;\n  color: #8c8c8c;\n}\n.maru-button-secondary-default:hover {\n  box-shadow: 0 0 6px #e4e4e4;\n}\n.maru-button-secondary-default:focus-visible, .maru-button-secondary-default:active {\n  box-shadow: none;\n  background-color: #8c8c8c;\n  color: white;\n}\n.maru-button-secondary-default-light {\n  background-color: #fafafa;\n  color: #8c8c8c;\n}\n.maru-button-secondary-default-light:hover {\n  box-shadow: 0 0 6px;\n}\n.maru-button-secondary-default-light:focus-visible, .maru-button-secondary-default-light:active {\n  box-shadow: none;\n  background-color: #8c8c8c;\n  color: white;\n}\n.maru-button-secondary-outline {\n  background-color: white;\n  color: #8c8c8c;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-button-secondary-outline:hover {\n  box-shadow: 0 0 6px #e4e4e4;\n}\n.maru-button-secondary-outline:focus-visible, .maru-button-secondary-outline:active {\n  box-shadow: none;\n  background-color: #e4e4e4;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-button-secondary-text {\n  background-color: white;\n  color: #8c8c8c;\n}\n.maru-button-secondary-color-on-focus {\n  background-color: white;\n  color: #bdbdbd;\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n  padding: 5px 8px !important;\n  gap: 4px;\n}\n.maru-button-secondary-color-on-focus:hover {\n  box-shadow: 0px 0px 6px 0px #e4e4e4;\n}\n.maru-button-secondary-color-on-focus:focus-visible, .maru-button-secondary-color-on-focus:active {\n  background-color: #e4e4e4;\n  color: #5c5c5c;\n  box-shadow: 0 0 0 1px #5c5c5c inset;\n}\n.maru-button-positive-default {\n  background-color: #58c5a6;\n  color: white;\n}\n.maru-button-positive-default:hover {\n  box-shadow: 0 0 6px #58c5a6;\n}\n.maru-button-positive-default:focus-visible, .maru-button-positive-default:active {\n  box-shadow: none;\n  color: #58c5a6;\n}\n.maru-button-positive-default-light {\n  color: #58c5a6;\n}\n.maru-button-positive-default-light:hover {\n  box-shadow: 0 0 6px rgba(88, 196, 166, 0.5019607843);\n}\n.maru-button-positive-default-light:focus-visible, .maru-button-positive-default-light:active {\n  box-shadow: none;\n  background-color: #58c5a6;\n  color: white;\n}\n.maru-button-positive-outline {\n  background-color: white;\n  color: #58c5a6;\n  box-shadow: 0 0 0 1px #58c5a6 inset;\n}\n.maru-button-positive-outline:hover {\n  box-shadow: 0 0 6px #def3ed;\n}\n.maru-button-positive-outline:focus-visible, .maru-button-positive-outline:active {\n  box-shadow: none;\n  background-color: #def3ed;\n  box-shadow: 0 0 0 1px #58c5a6 inset;\n}\n.maru-button-positive-text {\n  background-color: white;\n  color: #58c5a6;\n}\n.maru-button-positive-color-on-focus {\n  background-color: white;\n  color: #bdbdbd;\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n  padding: 5px 8px !important;\n  gap: 4px;\n}\n.maru-button-positive-color-on-focus:hover {\n  box-shadow: 0px 0px 6px 0px #e4e4e4;\n}\n.maru-button-positive-color-on-focus:focus-visible, .maru-button-positive-color-on-focus:active {\n  color: #58c5a6;\n  box-shadow: 0 0 0 1px #58c5a6 inset;\n}\n.maru-button-warning-default {\n  background-color: #ffb020;\n  color: white;\n}\n.maru-button-warning-default:hover {\n  box-shadow: 0 0 6px #ffb020;\n}\n.maru-button-warning-default:focus-visible, .maru-button-warning-default:active {\n  box-shadow: none;\n  background-color: #ffefd2;\n  color: #ffb020;\n}\n.maru-button-warning-default-light {\n  background-color: #fff7e9;\n  color: #ffb020;\n}\n.maru-button-warning-default-light:hover {\n  box-shadow: 0 0 6px rgba(255, 177, 32, 0.5019607843);\n}\n.maru-button-warning-default-light:focus-visible, .maru-button-warning-default-light:active {\n  box-shadow: none;\n  background-color: #ffb020;\n  color: white;\n}\n.maru-button-warning-outline {\n  background-color: white;\n  color: #ffb020;\n  box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-button-warning-outline:hover {\n  box-shadow: 0 0 6px #ffefd2;\n}\n.maru-button-warning-outline:focus-visible, .maru-button-warning-outline:active {\n  box-shadow: none;\n  background-color: #ffefd2;\n  box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-button-warning-text {\n  background-color: white;\n  color: #ffb020;\n}\n.maru-button-warning-color-on-focus {\n  background-color: white;\n  color: #bdbdbd;\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n  padding: 5px 8px !important;\n  gap: 4px;\n}\n.maru-button-warning-color-on-focus:hover {\n  box-shadow: 0px 0px 6px 0px #e4e4e4;\n}\n.maru-button-warning-color-on-focus:focus-visible, .maru-button-warning-color-on-focus:active {\n  background-color: #ffefd2;\n  color: #ffb020;\n  box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-button-danger-default {\n  background-color: #e53e3e;\n  color: white;\n}\n.maru-button-danger-default:hover {\n  box-shadow: 0 0 6px #e53e3e;\n}\n.maru-button-danger-default:focus-visible, .maru-button-danger-default:active {\n  box-shadow: none;\n  background-color: #fcecec;\n  color: #e53e3e;\n}\n.maru-button-danger-default-light {\n  background-color: #fcecec;\n  color: #e53e3e;\n}\n.maru-button-danger-default-light:hover {\n  box-shadow: 0 0 6px rgba(229, 62, 62, 0.5019607843);\n}\n.maru-button-danger-default-light:focus-visible, .maru-button-danger-default-light:active {\n  box-shadow: none;\n  background-color: #e53e3e;\n  color: white;\n}\n.maru-button-danger-outline {\n  background-color: white;\n  color: #e53e3e;\n  box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-button-danger-outline:hover {\n  box-shadow: 0 0 6px #fad8d8;\n}\n.maru-button-danger-outline:focus-visible, .maru-button-danger-outline:active {\n  box-shadow: none;\n  background-color: #fad8d8;\n  box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-button-danger-text {\n  background-color: white;\n  color: #e53e3e;\n}\n.maru-button-danger-color-on-focus {\n  background-color: white;\n  color: #bdbdbd;\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n  padding: 5px 8px !important;\n  gap: 4px;\n}\n.maru-button-danger-color-on-focus:hover {\n  box-shadow: 0px 0px 6px 0px #e4e4e4;\n}\n.maru-button-danger-color-on-focus:focus-visible, .maru-button-danger-color-on-focus:active {\n  background-color: #fcecec;\n  color: #e53e3e;\n  box-shadow: 0 0 0 1px #e53e3e inset;\n}\n\n.maru-button-with-start-icon.size-normal,\n.maru-button-with-end-icon.size-normal {\n  padding: 8px 14px;\n}\n.maru-button-with-start-icon.size-small,\n.maru-button-with-end-icon.size-small {\n  padding: 6px 12px;\n}\n.maru-button-with-start-icon.maru-button-primary-text:hover, .maru-button-with-start-icon.maru-button-primary-text:focus-visible, .maru-button-with-start-icon.maru-button-primary-text:active,\n.maru-button-with-end-icon.maru-button-primary-text:hover,\n.maru-button-with-end-icon.maru-button-primary-text:focus-visible,\n.maru-button-with-end-icon.maru-button-primary-text:active {\n  background-color: var(--p-10);\n  color: var(--p);\n}\n.maru-button-with-start-icon.maru-button-secondary-default-light:hover, .maru-button-with-start-icon.maru-button-secondary-default-light:focus-visible, .maru-button-with-start-icon.maru-button-secondary-default-light:active,\n.maru-button-with-end-icon.maru-button-secondary-default-light:hover,\n.maru-button-with-end-icon.maru-button-secondary-default-light:focus-visible,\n.maru-button-with-end-icon.maru-button-secondary-default-light:active {\n  box-shadow: none;\n  background-color: #fafafa;\n  color: #8c8c8c;\n}\n\n.maru-button-only-icon {\n  padding: 0;\n  justify-content: center;\n  background-color: transparent;\n}\n.maru-button-only-icon:hover, .maru-button-only-icon:focus-visible, .maru-button-only-icon:active {\n  box-shadow: none;\n  background-color: transparent;\n}";
-styleInject(css_248z$a);
+var css_248z$b = ".size-small {\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 600;\n}\n\n.size-normal {\n  padding: 8px 10px;\n  border-radius: 8px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 600;\n}\n\n.size-large {\n  padding: 4px 12px;\n  border-radius: 8px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 600;\n}\n\n.maru-button {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  border: 0;\n  cursor: pointer;\n  gap: 8px;\n}\n.maru-button:focus-within {\n  outline: none;\n}\n.maru-button:disabled {\n  cursor: default;\n  opacity: 0.5;\n  pointer-events: none;\n}\n.maru-button-primary-default {\n  background-color: var(--p);\n  color: white;\n}\n.maru-button-primary-default:hover {\n  box-shadow: 0 0 6px var(--p);\n}\n.maru-button-primary-default:focus-visible, .maru-button-primary-default:active {\n  box-shadow: none;\n  background-color: var(--p-10);\n  color: var(--p);\n}\n.maru-button-primary-default-light {\n  background-color: var(--p-10);\n  color: var(--p);\n}\n.maru-button-primary-default-light:hover {\n  box-shadow: 0 0 6px var(--p-50-per);\n}\n.maru-button-primary-default-light:focus-visible, .maru-button-primary-default-light:active {\n  box-shadow: none;\n  background-color: var(--p);\n  color: white;\n}\n.maru-button-primary-outline {\n  background-color: white;\n  color: var(--p);\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-outline:hover {\n  box-shadow: 0 0 6px var(--p-20);\n}\n.maru-button-primary-outline:focus-visible, .maru-button-primary-outline:active {\n  box-shadow: none;\n  background-color: var(--p-20);\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-outline:hover {\n  box-shadow: 0 0 6px var(--p-50-per);\n}\n.maru-button-primary-outline:focus-visible, .maru-button-primary-outline:active {\n  box-shadow: none;\n  background-color: var(--p-10);\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-text {\n  background-color: white;\n  color: var(--p);\n}\n.maru-button-primary-color-on-focus {\n  background-color: white;\n  color: #bdbdbd;\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n  padding: 5px 8px !important;\n  gap: 4px;\n}\n.maru-button-primary-color-on-focus:hover {\n  box-shadow: 0px 0px 6px 0px #e4e4e4;\n}\n.maru-button-primary-color-on-focus:focus-visible, .maru-button-primary-color-on-focus:active {\n  background-color: var(--p-10);\n  color: var(--p);\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-secondary-default {\n  background-color: #8c8c8c;\n  color: white;\n  background-color: #e4e4e4;\n  color: #8c8c8c;\n}\n.maru-button-secondary-default:hover {\n  box-shadow: 0 0 6px #8c8c8c;\n}\n.maru-button-secondary-default:focus-visible, .maru-button-secondary-default:active {\n  box-shadow: none;\n  background-color: #fafafa;\n  color: #8c8c8c;\n}\n.maru-button-secondary-default:hover {\n  box-shadow: 0 0 6px #e4e4e4;\n}\n.maru-button-secondary-default:focus-visible, .maru-button-secondary-default:active {\n  box-shadow: none;\n  background-color: #8c8c8c;\n  color: white;\n}\n.maru-button-secondary-default-light {\n  background-color: #fafafa;\n  color: #8c8c8c;\n}\n.maru-button-secondary-default-light:hover {\n  box-shadow: 0 0 6px;\n}\n.maru-button-secondary-default-light:focus-visible, .maru-button-secondary-default-light:active {\n  box-shadow: none;\n  background-color: #8c8c8c;\n  color: white;\n}\n.maru-button-secondary-outline {\n  background-color: white;\n  color: #8c8c8c;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-button-secondary-outline:hover {\n  box-shadow: 0 0 6px #e4e4e4;\n}\n.maru-button-secondary-outline:focus-visible, .maru-button-secondary-outline:active {\n  box-shadow: none;\n  background-color: #e4e4e4;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-button-secondary-text {\n  background-color: white;\n  color: #8c8c8c;\n}\n.maru-button-secondary-color-on-focus {\n  background-color: white;\n  color: #bdbdbd;\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n  padding: 5px 8px !important;\n  gap: 4px;\n}\n.maru-button-secondary-color-on-focus:hover {\n  box-shadow: 0px 0px 6px 0px #e4e4e4;\n}\n.maru-button-secondary-color-on-focus:focus-visible, .maru-button-secondary-color-on-focus:active {\n  background-color: #e4e4e4;\n  color: #5c5c5c;\n  box-shadow: 0 0 0 1px #5c5c5c inset;\n}\n.maru-button-positive-default {\n  background-color: #58c5a6;\n  color: white;\n}\n.maru-button-positive-default:hover {\n  box-shadow: 0 0 6px #58c5a6;\n}\n.maru-button-positive-default:focus-visible, .maru-button-positive-default:active {\n  box-shadow: none;\n  background-color: #eef9f6;\n  color: #58c5a6;\n}\n.maru-button-positive-default-light {\n  background-color: #eef9f6;\n  color: #58c5a6;\n}\n.maru-button-positive-default-light:hover {\n  box-shadow: 0 0 6px rgba(88, 196, 166, 0.5019607843);\n}\n.maru-button-positive-default-light:focus-visible, .maru-button-positive-default-light:active {\n  box-shadow: none;\n  background-color: #58c5a6;\n  color: white;\n}\n.maru-button-positive-outline {\n  background-color: white;\n  color: #58c5a6;\n  box-shadow: 0 0 0 1px #58c5a6 inset;\n}\n.maru-button-positive-outline:hover {\n  box-shadow: 0 0 6px #def3ed;\n}\n.maru-button-positive-outline:focus-visible, .maru-button-positive-outline:active {\n  box-shadow: none;\n  background-color: #def3ed;\n  box-shadow: 0 0 0 1px #58c5a6 inset;\n}\n.maru-button-positive-text {\n  background-color: white;\n  color: #58c5a6;\n}\n.maru-button-positive-color-on-focus {\n  background-color: white;\n  color: #bdbdbd;\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n  padding: 5px 8px !important;\n  gap: 4px;\n}\n.maru-button-positive-color-on-focus:hover {\n  box-shadow: 0px 0px 6px 0px #e4e4e4;\n}\n.maru-button-positive-color-on-focus:focus-visible, .maru-button-positive-color-on-focus:active {\n  background-color: #eef9f6;\n  color: #58c5a6;\n  box-shadow: 0 0 0 1px #58c5a6 inset;\n}\n.maru-button-warning-default {\n  background-color: #ffb020;\n  color: white;\n}\n.maru-button-warning-default:hover {\n  box-shadow: 0 0 6px #ffb020;\n}\n.maru-button-warning-default:focus-visible, .maru-button-warning-default:active {\n  box-shadow: none;\n  background-color: #ffefd2;\n  color: #ffb020;\n}\n.maru-button-warning-default-light {\n  background-color: #fff7e9;\n  color: #ffb020;\n}\n.maru-button-warning-default-light:hover {\n  box-shadow: 0 0 6px rgba(255, 177, 32, 0.5019607843);\n}\n.maru-button-warning-default-light:focus-visible, .maru-button-warning-default-light:active {\n  box-shadow: none;\n  background-color: #ffb020;\n  color: white;\n}\n.maru-button-warning-outline {\n  background-color: white;\n  color: #ffb020;\n  box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-button-warning-outline:hover {\n  box-shadow: 0 0 6px #ffefd2;\n}\n.maru-button-warning-outline:focus-visible, .maru-button-warning-outline:active {\n  box-shadow: none;\n  background-color: #ffefd2;\n  box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-button-warning-text {\n  background-color: white;\n  color: #ffb020;\n}\n.maru-button-warning-color-on-focus {\n  background-color: white;\n  color: #bdbdbd;\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n  padding: 5px 8px !important;\n  gap: 4px;\n}\n.maru-button-warning-color-on-focus:hover {\n  box-shadow: 0px 0px 6px 0px #e4e4e4;\n}\n.maru-button-warning-color-on-focus:focus-visible, .maru-button-warning-color-on-focus:active {\n  background-color: #ffefd2;\n  color: #ffb020;\n  box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-button-danger-default {\n  background-color: #e53e3e;\n  color: white;\n}\n.maru-button-danger-default:hover {\n  box-shadow: 0 0 6px #e53e3e;\n}\n.maru-button-danger-default:focus-visible, .maru-button-danger-default:active {\n  box-shadow: none;\n  background-color: #fcecec;\n  color: #e53e3e;\n}\n.maru-button-danger-default-light {\n  background-color: #fcecec;\n  color: #e53e3e;\n}\n.maru-button-danger-default-light:hover {\n  box-shadow: 0 0 6px rgba(229, 62, 62, 0.5019607843);\n}\n.maru-button-danger-default-light:focus-visible, .maru-button-danger-default-light:active {\n  box-shadow: none;\n  background-color: #e53e3e;\n  color: white;\n}\n.maru-button-danger-outline {\n  background-color: white;\n  color: #e53e3e;\n  box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-button-danger-outline:hover {\n  box-shadow: 0 0 6px #fad8d8;\n}\n.maru-button-danger-outline:focus-visible, .maru-button-danger-outline:active {\n  box-shadow: none;\n  background-color: #fad8d8;\n  box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-button-danger-text {\n  background-color: white;\n  color: #e53e3e;\n}\n.maru-button-danger-color-on-focus {\n  background-color: white;\n  color: #bdbdbd;\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n  padding: 5px 8px !important;\n  gap: 4px;\n}\n.maru-button-danger-color-on-focus:hover {\n  box-shadow: 0px 0px 6px 0px #e4e4e4;\n}\n.maru-button-danger-color-on-focus:focus-visible, .maru-button-danger-color-on-focus:active {\n  background-color: #fcecec;\n  color: #e53e3e;\n  box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-button-success-default {\n  background-color: #308acc;\n  color: white;\n}\n.maru-button-success-default:hover {\n  box-shadow: 0 0 6px #308acc;\n}\n.maru-button-success-default:focus-visible, .maru-button-success-default:active {\n  box-shadow: none;\n  background-color: #eaf3fa;\n  color: #308acc;\n}\n.maru-button-success-default-light {\n  background-color: #eaf3fa;\n  color: #308acc;\n}\n.maru-button-success-default-light:hover {\n  box-shadow: 0 0 6px rgba(48, 138, 204, 0.5019607843);\n}\n.maru-button-success-default-light:focus-visible, .maru-button-success-default-light:active {\n  box-shadow: none;\n  background-color: #308acc;\n  color: white;\n}\n.maru-button-success-outline {\n  background-color: white;\n  color: #308acc;\n  box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-button-success-outline:hover {\n  box-shadow: 0 0 6px #d6e8f5;\n}\n.maru-button-success-outline:focus-visible, .maru-button-success-outline:active {\n  box-shadow: none;\n  background-color: #d6e8f5;\n  box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-button-success-text {\n  background-color: white;\n  color: #308acc;\n}\n.maru-button-success-color-on-focus {\n  background-color: white;\n  color: #bdbdbd;\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n  padding: 5px 8px !important;\n  gap: 4px;\n}\n.maru-button-success-color-on-focus:hover {\n  box-shadow: 0px 0px 6px 0px #e4e4e4;\n}\n.maru-button-success-color-on-focus:focus-visible, .maru-button-success-color-on-focus:active {\n  background-color: #eaf3fa;\n  color: #308acc;\n  box-shadow: 0 0 0 1px #308acc inset;\n}\n\n.maru-button-with-start-icon.size-normal,\n.maru-button-with-end-icon.size-normal {\n  padding: 8px 14px;\n}\n.maru-button-with-start-icon.size-small,\n.maru-button-with-end-icon.size-small {\n  padding: 6px 12px;\n}\n.maru-button-with-start-icon.maru-button-primary-text:hover, .maru-button-with-start-icon.maru-button-primary-text:focus-visible, .maru-button-with-start-icon.maru-button-primary-text:active,\n.maru-button-with-end-icon.maru-button-primary-text:hover,\n.maru-button-with-end-icon.maru-button-primary-text:focus-visible,\n.maru-button-with-end-icon.maru-button-primary-text:active {\n  background-color: var(--p-10);\n  color: var(--p);\n}\n.maru-button-with-start-icon.maru-button-secondary-default-light:hover, .maru-button-with-start-icon.maru-button-secondary-default-light:focus-visible, .maru-button-with-start-icon.maru-button-secondary-default-light:active,\n.maru-button-with-end-icon.maru-button-secondary-default-light:hover,\n.maru-button-with-end-icon.maru-button-secondary-default-light:focus-visible,\n.maru-button-with-end-icon.maru-button-secondary-default-light:active {\n  box-shadow: none;\n  background-color: #fafafa;\n  color: #8c8c8c;\n}\n\n.maru-button-only-icon {\n  padding: 0;\n  justify-content: center;\n  background-color: transparent;\n}\n.maru-button-only-icon:hover, .maru-button-only-icon:focus-visible, .maru-button-only-icon:active {\n  box-shadow: none;\n  background-color: transparent;\n}";
+styleInject(css_248z$b);
 
 var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
@@ -3003,8 +3019,8 @@ function uuidv4(length) {
   }
 }
 
-var css_248z$9 = ".maru-checkbox-wrapper-4px {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  gap: 4px;\n}\n\n.maru-checkbox-wrapper-8px {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  gap: 8px;\n}\n\n.maru-checkbox-inner-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  position: relative;\n}\n\n.maru-checkbox {\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.maru-checkbox-label {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n  color: #5c5c5c;\n  cursor: pointer;\n}\n.maru-checkbox-label.label-disabled {\n  color: #8c8c8c;\n}\n\n.maru-checkbox:disabled,\n.label-disabled {\n  cursor: default;\n}";
-styleInject(css_248z$9);
+var css_248z$a = ".maru-checkbox-wrapper-4px {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  gap: 4px;\n}\n\n.maru-checkbox-wrapper-8px {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  gap: 8px;\n}\n\n.maru-checkbox-inner-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  position: relative;\n}\n\n.maru-checkbox {\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.maru-checkbox-label {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n  color: #5c5c5c;\n  cursor: pointer;\n}\n.maru-checkbox-label.label-disabled {\n  color: #8c8c8c;\n}\n\n.maru-checkbox:disabled,\n.label-disabled {\n  cursor: default;\n}";
+styleInject(css_248z$a);
 
 var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
   var checked = _a.checked,
@@ -3055,8 +3071,8 @@ Checkbox.defaultProps = {
 };
 Checkbox.displayName = 'Checkbox';
 
-var css_248z$8 = ".maru-chip {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  border-radius: 10px;\n}\n.maru-chip-primary-default {\n  background-color: var(--p-10);\n  color: var(--p);\n}\n.maru-chip-primary-default.maru-chip-warning-default, .maru-chip-primary-default.maru-chip-positive-default {\n  background-color: var(--p-20);\n}\n.maru-chip-primary-outline {\n  background-color: var(--p-10);\n  border: 1px solid var(--p);\n  color: var(--p);\n}\n.maru-chip-primary-outline.maru-chip-warning-default, .maru-chip-primary-outline.maru-chip-positive-default {\n  background-color: var(--p-20);\n}\n.maru-chip-primary-dot {\n  color: var(--p);\n}\n.maru-chip-secondary-default {\n  background-color: #fafafa;\n  color: #8c8c8c;\n}\n.maru-chip-secondary-default.maru-chip-warning-default, .maru-chip-secondary-default.maru-chip-positive-default {\n  background-color: #e4e4e4;\n}\n.maru-chip-secondary-outline {\n  background-color: #fafafa;\n  border: 1px solid #8c8c8c;\n  color: #8c8c8c;\n}\n.maru-chip-secondary-outline.maru-chip-warning-default, .maru-chip-secondary-outline.maru-chip-positive-default {\n  background-color: #e4e4e4;\n}\n.maru-chip-secondary-dot {\n  color: #8c8c8c;\n}\n.maru-chip-positive-default {\n  color: #58c5a6;\n}\n.maru-chip-positive-default.maru-chip-warning-default, .maru-chip-positive-default.maru-chip-positive-default {\n  background-color: #def3ed;\n}\n.maru-chip-positive-outline {\n  border: 1px solid #58c5a6;\n  color: #58c5a6;\n}\n.maru-chip-positive-outline.maru-chip-warning-default, .maru-chip-positive-outline.maru-chip-positive-default {\n  background-color: #def3ed;\n}\n.maru-chip-positive-dot {\n  color: #58c5a6;\n}\n.maru-chip-warning-default {\n  background-color: #fff7e9;\n  color: #ffb020;\n}\n.maru-chip-warning-default.maru-chip-warning-default, .maru-chip-warning-default.maru-chip-positive-default {\n  background-color: #ffefd2;\n}\n.maru-chip-warning-outline {\n  background-color: #fff7e9;\n  border: 1px solid #ffb020;\n  color: #ffb020;\n}\n.maru-chip-warning-outline.maru-chip-warning-default, .maru-chip-warning-outline.maru-chip-positive-default {\n  background-color: #ffefd2;\n}\n.maru-chip-warning-dot {\n  color: #ffb020;\n}\n.maru-chip-danger-default {\n  background-color: #fcecec;\n  color: #e53e3e;\n}\n.maru-chip-danger-default.maru-chip-warning-default, .maru-chip-danger-default.maru-chip-positive-default {\n  background-color: #fad8d8;\n}\n.maru-chip-danger-outline {\n  background-color: #fcecec;\n  border: 1px solid #e53e3e;\n  color: #e53e3e;\n}\n.maru-chip-danger-outline.maru-chip-warning-default, .maru-chip-danger-outline.maru-chip-positive-default {\n  background-color: #fad8d8;\n}\n.maru-chip-danger-dot {\n  color: #e53e3e;\n}\n.maru-chip-size-small {\n  padding: 1.5px 8px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 500;\n}\n.maru-chip-size-normal {\n  padding: 2px 10px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n}";
-styleInject(css_248z$8);
+var css_248z$9 = ".maru-chip {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  border-radius: 10px;\n}\n.maru-chip-primary-default {\n  background-color: var(--p-10);\n  color: var(--p);\n}\n.maru-chip-primary-default.maru-chip-warning-default, .maru-chip-primary-default.maru-chip-positive-default {\n  background-color: var(--p-20);\n}\n.maru-chip-primary-outline {\n  background-color: var(--p-10);\n  border: 1px solid var(--p);\n  color: var(--p);\n}\n.maru-chip-primary-outline.maru-chip-warning-default, .maru-chip-primary-outline.maru-chip-positive-default {\n  background-color: var(--p-20);\n}\n.maru-chip-primary-dot {\n  color: var(--p);\n}\n.maru-chip-secondary-default {\n  background-color: #fafafa;\n  color: #8c8c8c;\n}\n.maru-chip-secondary-default.maru-chip-warning-default, .maru-chip-secondary-default.maru-chip-positive-default {\n  background-color: #e4e4e4;\n}\n.maru-chip-secondary-outline {\n  background-color: #fafafa;\n  border: 1px solid #8c8c8c;\n  color: #8c8c8c;\n}\n.maru-chip-secondary-outline.maru-chip-warning-default, .maru-chip-secondary-outline.maru-chip-positive-default {\n  background-color: #e4e4e4;\n}\n.maru-chip-secondary-dot {\n  color: #8c8c8c;\n}\n.maru-chip-positive-default {\n  background-color: #eef9f6;\n  color: #58c5a6;\n}\n.maru-chip-positive-default.maru-chip-warning-default, .maru-chip-positive-default.maru-chip-positive-default {\n  background-color: #def3ed;\n}\n.maru-chip-positive-outline {\n  background-color: #eef9f6;\n  border: 1px solid #58c5a6;\n  color: #58c5a6;\n}\n.maru-chip-positive-outline.maru-chip-warning-default, .maru-chip-positive-outline.maru-chip-positive-default {\n  background-color: #def3ed;\n}\n.maru-chip-positive-dot {\n  color: #58c5a6;\n}\n.maru-chip-warning-default {\n  background-color: #fff7e9;\n  color: #ffb020;\n}\n.maru-chip-warning-default.maru-chip-warning-default, .maru-chip-warning-default.maru-chip-positive-default {\n  background-color: #ffefd2;\n}\n.maru-chip-warning-outline {\n  background-color: #fff7e9;\n  border: 1px solid #ffb020;\n  color: #ffb020;\n}\n.maru-chip-warning-outline.maru-chip-warning-default, .maru-chip-warning-outline.maru-chip-positive-default {\n  background-color: #ffefd2;\n}\n.maru-chip-warning-dot {\n  color: #ffb020;\n}\n.maru-chip-danger-default {\n  background-color: #fcecec;\n  color: #e53e3e;\n}\n.maru-chip-danger-default.maru-chip-warning-default, .maru-chip-danger-default.maru-chip-positive-default {\n  background-color: #fad8d8;\n}\n.maru-chip-danger-outline {\n  background-color: #fcecec;\n  border: 1px solid #e53e3e;\n  color: #e53e3e;\n}\n.maru-chip-danger-outline.maru-chip-warning-default, .maru-chip-danger-outline.maru-chip-positive-default {\n  background-color: #fad8d8;\n}\n.maru-chip-danger-dot {\n  color: #e53e3e;\n}\n.maru-chip-success-default {\n  background-color: #eaf3fa;\n  color: #308acc;\n}\n.maru-chip-success-default.maru-chip-warning-default, .maru-chip-success-default.maru-chip-positive-default {\n  background-color: #d6e8f5;\n}\n.maru-chip-success-outline {\n  background-color: #eaf3fa;\n  border: 1px solid #308acc;\n  color: #308acc;\n}\n.maru-chip-success-outline.maru-chip-warning-default, .maru-chip-success-outline.maru-chip-positive-default {\n  background-color: #d6e8f5;\n}\n.maru-chip-success-dot {\n  color: #308acc;\n}\n.maru-chip-size-small {\n  padding: 1.5px 8px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 500;\n}\n.maru-chip-size-normal {\n  padding: 2px 10px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n}";
+styleInject(css_248z$9);
 
 function Chip(_a) {
   var content = _a.content,
@@ -3080,8 +3096,8 @@ function Chip(_a) {
   }));
 }
 
-var css_248z$7 = ".maru-input-wrapper.disabled input {\n  opacity: 0.5;\n  pointer-events: none;\n}\n.maru-input-wrapper.disabled .maru-input-default:hover,\n.maru-input-wrapper.disabled .maru-input-default:focus-within,\n.maru-input-wrapper.disabled .maru-input-underline:hover,\n.maru-input-wrapper.disabled .maru-input-underline:focus-within {\n  border-color: transparent;\n  outline: transparent;\n}\n.maru-input-wrapper .maru-input-label {\n  margin-bottom: 8px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 600;\n}\n.maru-input-wrapper .maru-input {\n  border: 1px solid #e4e4e4;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  height: 37px;\n  padding: 8px 10px 8px 14px;\n  border-radius: 8px;\n}\n.maru-input-wrapper .maru-input:focus-visible, .maru-input-wrapper .maru-input:focus-within {\n  border: 2px solid #e4e4e4;\n  background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input.errored {\n  border: 2px solid #e53e3e;\n}\n.maru-input-wrapper .maru-input.errored:focus-visible, .maru-input-wrapper .maru-input.errored:focus-within {\n  border: 2px solid #e4e4e4;\n  background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input:hover {\n  border: 2px solid #e4e4e4;\n  background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input > input {\n  width: 100%;\n  border: unset;\n  outline: unset;\n  background-color: transparent;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n  color: #5c5c5c;\n}\n.maru-input-wrapper .maru-input > input::-webkit-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input > input::-moz-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input > input:-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input > input::-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input > input::placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input-start-node {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  margin-right: 10px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper > button {\n  padding: unset;\n  margin: unset;\n  border: unset;\n  background-color: unset;\n  cursor: pointer;\n  width: 16px;\n  height: 16px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper > button:last-of-type {\n  margin-left: 10px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper .maru-input-end-node {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  margin-left: 10px;\n}\n.maru-input-wrapper .maru-input-footer {\n  display: block;\n  margin-top: 4px;\n}\n.maru-input-wrapper .maru-input-footer > span {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 500;\n  color: #e53e3e;\n}";
-styleInject(css_248z$7);
+var css_248z$8 = ".maru-input-wrapper.disabled input {\n  opacity: 0.5;\n  pointer-events: none;\n}\n.maru-input-wrapper.disabled .maru-input-default:hover,\n.maru-input-wrapper.disabled .maru-input-default:focus-within,\n.maru-input-wrapper.disabled .maru-input-underline:hover,\n.maru-input-wrapper.disabled .maru-input-underline:focus-within {\n  border-color: transparent;\n  outline: transparent;\n}\n.maru-input-wrapper .maru-input-label {\n  margin-bottom: 8px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 600;\n}\n.maru-input-wrapper .maru-input {\n  border: 1px solid #e4e4e4;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  height: 37px;\n  padding: 8px 10px 8px 14px;\n  border-radius: 8px;\n}\n.maru-input-wrapper .maru-input:focus-visible, .maru-input-wrapper .maru-input:focus-within {\n  border: 2px solid #e4e4e4;\n  background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input.errored {\n  border: 2px solid #e53e3e;\n}\n.maru-input-wrapper .maru-input.errored:focus-visible, .maru-input-wrapper .maru-input.errored:focus-within {\n  border: 2px solid #e4e4e4;\n  background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input:hover {\n  border: 2px solid #e4e4e4;\n  background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input > input {\n  width: 100%;\n  border: unset;\n  outline: unset;\n  background-color: transparent;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n  color: #5c5c5c;\n}\n.maru-input-wrapper .maru-input > input::-webkit-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input > input::-moz-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input > input:-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input > input::-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input > input::placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input-start-node {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  margin-right: 10px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper > button {\n  padding: unset;\n  margin: unset;\n  border: unset;\n  background-color: unset;\n  cursor: pointer;\n  width: 16px;\n  height: 16px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper > button:last-of-type {\n  margin-left: 10px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper .maru-input-end-node {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  margin-left: 10px;\n}\n.maru-input-wrapper .maru-input-footer {\n  display: block;\n  margin-top: 4px;\n}\n.maru-input-wrapper .maru-input-footer > span {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 500;\n  color: #e53e3e;\n}";
+styleInject(css_248z$8);
 
 var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
   var onClear = _a.onClear,
@@ -5027,8 +5043,8 @@ var CreatePortal = function CreatePortal(_a) {
   return /*#__PURE__*/ReactDOM.createPortal(children, container.current);
 };
 
-var css_248z$6 = ".maru-popover-background {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  z-index: 1611;\n}\n\n.maru-popover {\n  border-radius: 8px;\n  background-color: white;\n  outline: none;\n  box-shadow: 0px 0px 6px #e4e4e4;\n}";
-styleInject(css_248z$6);
+var css_248z$7 = ".maru-popover-background {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  z-index: 1611;\n}\n\n.maru-popover {\n  border-radius: 8px;\n  background-color: white;\n  outline: none;\n  box-shadow: 0px 0px 6px #e4e4e4;\n}";
+styleInject(css_248z$7);
 
 function Popover(_a) {
   var anchorEl = _a.anchorEl,
@@ -5122,8 +5138,8 @@ function Popover(_a) {
   })) : PopoverBody;
 }
 
-var css_248z$5 = ".maru-radio-wrapper-8px {\n  display: flex;\n  gap: 8px;\n}\n\n.maru-radio-wrapper-4px {\n  display: flex;\n  gap: 4px;\n}\n\n.maru-radio {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  border: 2px solid #5c5c5c;\n  position: relative;\n  display: inline-block;\n  cursor: pointer;\n}\n.maru-radio:hover::before, .maru-radio:checked::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background-color: #5c5c5c;\n}\n\n.maru-radio-label {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n  color: #5c5c5c;\n  cursor: pointer;\n}\n\n.maru-radio:disabled,\n.label-disabled {\n  cursor: default;\n  opacity: 0.5;\n}";
-styleInject(css_248z$5);
+var css_248z$6 = ".maru-radio-wrapper-8px {\n  display: flex;\n  gap: 8px;\n}\n\n.maru-radio-wrapper-4px {\n  display: flex;\n  gap: 4px;\n}\n\n.maru-radio {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  border: 2px solid #5c5c5c;\n  position: relative;\n  display: inline-block;\n  cursor: pointer;\n}\n.maru-radio:hover::before, .maru-radio:checked::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background-color: #5c5c5c;\n}\n\n.maru-radio-label {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n  color: #5c5c5c;\n  cursor: pointer;\n}\n\n.maru-radio:disabled,\n.label-disabled {\n  cursor: default;\n  opacity: 0.5;\n}";
+styleInject(css_248z$6);
 
 var Radio = /*#__PURE__*/forwardRef(function (_a, ref) {
   var checked = _a.checked,
@@ -5159,8 +5175,8 @@ Radio.defaultProps = {
 };
 Radio.displayName = 'Radio';
 
-var css_248z$4 = ".maru-toggle-wrapper {\n  display: inline-block;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper {\n  position: relative;\n  width: 30.67px;\n  height: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  z-index: 11;\n  cursor: pointer;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle:not(:checked) ~ .maru-toggle-rail {\n  background-color: #bdbdbd;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail {\n  position: absolute;\n  width: 30.67px;\n  height: 18px;\n  border-radius: 17.5px;\n  background-color: var(--p);\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-primary {\n  background-color: var(--p);\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-secondary {\n  background-color: #8c8c8c;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-positive {\n  background-color: #58c5a6;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-warning {\n  background-color: #ffb020;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-danger {\n  background-color: #e53e3e;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-thumb {\n  position: absolute;\n  width: 15.33px;\n  height: 15.33px;\n  border-radius: 50%;\n  transition: all 0.2s ease-in-out;\n  background-color: white;\n  top: 1.33px;\n  right: 14px;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle:checked ~ .maru-toggle-thumb {\n  transform: translateX(12.67px);\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle {\n  cursor: default;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle-rail {\n  background-color: #e4e4e4 !important;\n}\n\n.maru-toggle-text {\n  position: relative;\n  width: 66px;\n  height: 23px;\n  background-color: white;\n  border-radius: 62px;\n  overflow: hidden;\n}\n.maru-toggle-text-primary {\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-toggle-text-primary .maru-toggle-text-thumb {\n  background-color: var(--p);\n}\n.maru-toggle-text-primary .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px var(--p-20);\n}\n.maru-toggle-text-primary .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px var(--p-20);\n}\n.maru-toggle-text-primary .maru-toggle-text-button {\n  color: var(--p);\n}\n.maru-toggle-text-primary .toggle-active {\n  color: white;\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled {\n  box-shadow: 0 0 0 1px var(--p-50) inset;\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .maru-toggle-text-thumb {\n  background-color: var(--p-50);\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px var(--p-10);\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px var(--p-10);\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .maru-toggle-text-button {\n  color: var(--p-50);\n  cursor: default;\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .toggle-active {\n  color: white;\n}\n.maru-toggle-text-secondary {\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-toggle-text-secondary .maru-toggle-text-thumb {\n  background-color: #8c8c8c;\n}\n.maru-toggle-text-secondary .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #e4e4e4;\n}\n.maru-toggle-text-secondary .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #e4e4e4;\n}\n.maru-toggle-text-secondary .maru-toggle-text-button {\n  color: #8c8c8c;\n}\n.maru-toggle-text-secondary .toggle-active {\n  color: white;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled {\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .maru-toggle-text-thumb {\n  background-color: #bdbdbd;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #fafafa;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #fafafa;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .maru-toggle-text-button {\n  color: #bdbdbd;\n  cursor: default;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .toggle-active {\n  color: white;\n}\n.maru-toggle-text-positive {\n  box-shadow: 0 0 0 1px #58c5a6 inset;\n}\n.maru-toggle-text-positive .maru-toggle-text-thumb {\n  background-color: #58c5a6;\n}\n.maru-toggle-text-positive .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #def3ed;\n}\n.maru-toggle-text-positive .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #def3ed;\n}\n.maru-toggle-text-positive .maru-toggle-text-button {\n  color: #58c5a6;\n}\n.maru-toggle-text-positive .toggle-active {\n  color: white;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled {\n  box-shadow: 0 0 0 1px #abe1d2 inset;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-thumb {\n  background-color: #abe1d2;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-button {\n  color: #abe1d2;\n  cursor: default;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .toggle-active {\n  color: white;\n}\n.maru-toggle-text-warning {\n  box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-toggle-text-warning .maru-toggle-text-thumb {\n  background-color: #ffb020;\n}\n.maru-toggle-text-warning .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #ffefd2;\n}\n.maru-toggle-text-warning .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #ffefd2;\n}\n.maru-toggle-text-warning .maru-toggle-text-button {\n  color: #ffb020;\n}\n.maru-toggle-text-warning .toggle-active {\n  color: white;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled {\n  box-shadow: 0 0 0 1px #ffd78f inset;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .maru-toggle-text-thumb {\n  background-color: #ffd78f;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #fff7e9;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #fff7e9;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .maru-toggle-text-button {\n  color: #ffd78f;\n  cursor: default;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .toggle-active {\n  color: white;\n}\n.maru-toggle-text-danger {\n  box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-toggle-text-danger .maru-toggle-text-thumb {\n  background-color: #e53e3e;\n}\n.maru-toggle-text-danger .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #fad8d8;\n}\n.maru-toggle-text-danger .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #fad8d8;\n}\n.maru-toggle-text-danger .maru-toggle-text-button {\n  color: #e53e3e;\n}\n.maru-toggle-text-danger .toggle-active {\n  color: white;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled {\n  box-shadow: 0 0 0 1px #f29e9e inset;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .maru-toggle-text-thumb {\n  background-color: #f29e9e;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #fcecec;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #fcecec;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .maru-toggle-text-button {\n  color: #f29e9e;\n  cursor: default;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .toggle-active {\n  color: white;\n}\n.maru-toggle-text .maru-toggle-text-thumb {\n  top: 0;\n  left: 0;\n  position: absolute;\n  width: 33px;\n  height: 23px;\n  border-radius: 62px;\n  transition: all 0.2s ease-in-out;\n  z-index: 1;\n}\n\n.slide-after {\n  transform: translateX(33px);\n}\n\n.maru-toggle-text-button-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n\n.maru-toggle-text-button {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 10px;\n  letter-spacing: -0.4px;\n  font-weight: 700;\n  position: relative;\n  width: 33px;\n  height: 23px;\n  cursor: pointer;\n  z-index: 2;\n  background-color: transparent;\n  border: 0;\n  transition: color 0.4s ease;\n}";
-styleInject(css_248z$4);
+var css_248z$5 = ".maru-toggle-wrapper {\n  display: inline-block;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper {\n  position: relative;\n  width: 30.67px;\n  height: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  z-index: 11;\n  cursor: pointer;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle:not(:checked) ~ .maru-toggle-rail {\n  background-color: #bdbdbd;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail {\n  position: absolute;\n  width: 30.67px;\n  height: 18px;\n  border-radius: 17.5px;\n  background-color: var(--p);\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-primary {\n  background-color: var(--p);\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-secondary {\n  background-color: #8c8c8c;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-positive {\n  background-color: #58c5a6;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-warning {\n  background-color: #ffb020;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-danger {\n  background-color: #e53e3e;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail-success {\n  background-color: #308acc;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-thumb {\n  position: absolute;\n  width: 15.33px;\n  height: 15.33px;\n  border-radius: 50%;\n  transition: all 0.2s ease-in-out;\n  background-color: white;\n  top: 1.33px;\n  right: 14px;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle:checked ~ .maru-toggle-thumb {\n  transform: translateX(12.67px);\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle {\n  cursor: default;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle-rail {\n  background-color: #e4e4e4 !important;\n}\n\n.maru-toggle-text {\n  position: relative;\n  width: 66px;\n  height: 23px;\n  background-color: white;\n  border-radius: 62px;\n  overflow: hidden;\n}\n.maru-toggle-text-primary {\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-toggle-text-primary .maru-toggle-text-thumb {\n  background-color: var(--p);\n}\n.maru-toggle-text-primary .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px var(--p-20);\n}\n.maru-toggle-text-primary .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px var(--p-20);\n}\n.maru-toggle-text-primary .maru-toggle-text-button {\n  color: var(--p);\n}\n.maru-toggle-text-primary .toggle-active {\n  color: white;\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled {\n  box-shadow: 0 0 0 1px var(--p-50) inset;\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .maru-toggle-text-thumb {\n  background-color: var(--p-50);\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px var(--p-10);\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px var(--p-10);\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .maru-toggle-text-button {\n  color: var(--p-50);\n  cursor: default;\n}\n.maru-toggle-text-primary.maru-toggle-text-disabled .toggle-active {\n  color: white;\n}\n.maru-toggle-text-secondary {\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-toggle-text-secondary .maru-toggle-text-thumb {\n  background-color: #8c8c8c;\n}\n.maru-toggle-text-secondary .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #e4e4e4;\n}\n.maru-toggle-text-secondary .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #e4e4e4;\n}\n.maru-toggle-text-secondary .maru-toggle-text-button {\n  color: #8c8c8c;\n}\n.maru-toggle-text-secondary .toggle-active {\n  color: white;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled {\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .maru-toggle-text-thumb {\n  background-color: #bdbdbd;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #fafafa;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #fafafa;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .maru-toggle-text-button {\n  color: #bdbdbd;\n  cursor: default;\n}\n.maru-toggle-text-secondary.maru-toggle-text-disabled .toggle-active {\n  color: white;\n}\n.maru-toggle-text-positive {\n  box-shadow: 0 0 0 1px #58c5a6 inset;\n}\n.maru-toggle-text-positive .maru-toggle-text-thumb {\n  background-color: #58c5a6;\n}\n.maru-toggle-text-positive .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #def3ed;\n}\n.maru-toggle-text-positive .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #def3ed;\n}\n.maru-toggle-text-positive .maru-toggle-text-button {\n  color: #58c5a6;\n}\n.maru-toggle-text-positive .toggle-active {\n  color: white;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled {\n  box-shadow: 0 0 0 1px #abe1d2 inset;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-thumb {\n  background-color: #abe1d2;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #eef9f6;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #eef9f6;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-button {\n  color: #abe1d2;\n  cursor: default;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .toggle-active {\n  color: white;\n}\n.maru-toggle-text-warning {\n  box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-toggle-text-warning .maru-toggle-text-thumb {\n  background-color: #ffb020;\n}\n.maru-toggle-text-warning .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #ffefd2;\n}\n.maru-toggle-text-warning .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #ffefd2;\n}\n.maru-toggle-text-warning .maru-toggle-text-button {\n  color: #ffb020;\n}\n.maru-toggle-text-warning .toggle-active {\n  color: white;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled {\n  box-shadow: 0 0 0 1px #ffd78f inset;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .maru-toggle-text-thumb {\n  background-color: #ffd78f;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #fff7e9;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #fff7e9;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .maru-toggle-text-button {\n  color: #ffd78f;\n  cursor: default;\n}\n.maru-toggle-text-warning.maru-toggle-text-disabled .toggle-active {\n  color: white;\n}\n.maru-toggle-text-danger {\n  box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-toggle-text-danger .maru-toggle-text-thumb {\n  background-color: #e53e3e;\n}\n.maru-toggle-text-danger .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #fad8d8;\n}\n.maru-toggle-text-danger .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #fad8d8;\n}\n.maru-toggle-text-danger .maru-toggle-text-button {\n  color: #e53e3e;\n}\n.maru-toggle-text-danger .toggle-active {\n  color: white;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled {\n  box-shadow: 0 0 0 1px #f29e9e inset;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .maru-toggle-text-thumb {\n  background-color: #f29e9e;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #fcecec;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #fcecec;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .maru-toggle-text-button {\n  color: #f29e9e;\n  cursor: default;\n}\n.maru-toggle-text-danger.maru-toggle-text-disabled .toggle-active {\n  color: white;\n}\n.maru-toggle-text-success {\n  box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-toggle-text-success .maru-toggle-text-thumb {\n  background-color: #308acc;\n}\n.maru-toggle-text-success .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #d6e8f5;\n}\n.maru-toggle-text-success .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #d6e8f5;\n}\n.maru-toggle-text-success .maru-toggle-text-button {\n  color: #308acc;\n}\n.maru-toggle-text-success .toggle-active {\n  color: white;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled {\n  box-shadow: 0 0 0 1px #97c4e5 inset;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .maru-toggle-text-thumb {\n  background-color: #97c4e5;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #eaf3fa;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #eaf3fa;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .maru-toggle-text-button {\n  color: #97c4e5;\n  cursor: default;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .toggle-active {\n  color: white;\n}\n.maru-toggle-text .maru-toggle-text-thumb {\n  top: 0;\n  left: 0;\n  position: absolute;\n  width: 33px;\n  height: 23px;\n  border-radius: 62px;\n  transition: all 0.2s ease-in-out;\n  z-index: 1;\n}\n\n.slide-after {\n  transform: translateX(33px);\n}\n\n.maru-toggle-text-button-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n\n.maru-toggle-text-button {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 10px;\n  letter-spacing: -0.4px;\n  font-weight: 700;\n  position: relative;\n  width: 33px;\n  height: 23px;\n  cursor: pointer;\n  z-index: 2;\n  background-color: transparent;\n  border: 0;\n  transition: color 0.4s ease;\n}";
+styleInject(css_248z$5);
 
 function Toggle(_a) {
   var checked = _a.checked,
@@ -5246,8 +5262,8 @@ function Toggle(_a) {
   });
 }
 
-var css_248z$3 = ".maru-tooltip-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n\n.maru-tooltip {\n  z-index: 1612;\n  border-radius: 5px;\n  padding: 2px 4px;\n  display: none;\n}\n.maru-tooltip[data-open=true] {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-tooltip[data-open=false] {\n  display: none;\n}\n.maru-tooltip.maru-tooltip-default {\n  background-color: rgba(92, 92, 92, 0.5019607843);\n}\n.maru-tooltip.maru-tooltip-default,\n.maru-tooltip.maru-tooltip-default span,\n.maru-tooltip.maru-tooltip-default p,\n.maru-tooltip.maru-tooltip-default pre {\n  color: white;\n  white-space: pre-wrap;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n}\n.maru-tooltip.maru-tooltip-error {\n  background-color: rgba(229, 62, 62, 0.1019607843);\n}\n.maru-tooltip.maru-tooltip-error .maru-tooltip-error-icon-wrapper {\n  width: 16px;\n  height: 16px;\n  margin-right: 4px;\n  transform: translateY(-1px);\n}\n.maru-tooltip.maru-tooltip-error,\n.maru-tooltip.maru-tooltip-error span,\n.maru-tooltip.maru-tooltip-error p,\n.maru-tooltip.maru-tooltip-error pre {\n  color: #e53e3e;\n  white-space: pre-wrap;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n}";
-styleInject(css_248z$3);
+var css_248z$4 = ".maru-tooltip-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n\n.maru-tooltip {\n  z-index: 1612;\n  border-radius: 5px;\n  padding: 2px 4px;\n  display: none;\n}\n.maru-tooltip[data-open=true] {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-tooltip[data-open=false] {\n  display: none;\n}\n.maru-tooltip.maru-tooltip-default {\n  background-color: rgba(92, 92, 92, 0.5019607843);\n}\n.maru-tooltip.maru-tooltip-default,\n.maru-tooltip.maru-tooltip-default span,\n.maru-tooltip.maru-tooltip-default p,\n.maru-tooltip.maru-tooltip-default pre {\n  color: white;\n  white-space: pre-wrap;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n}\n.maru-tooltip.maru-tooltip-error {\n  background-color: rgba(229, 62, 62, 0.1019607843);\n}\n.maru-tooltip.maru-tooltip-error .maru-tooltip-error-icon-wrapper {\n  width: 16px;\n  height: 16px;\n  margin-right: 4px;\n  transform: translateY(-1px);\n}\n.maru-tooltip.maru-tooltip-error,\n.maru-tooltip.maru-tooltip-error span,\n.maru-tooltip.maru-tooltip-error p,\n.maru-tooltip.maru-tooltip-error pre {\n  color: #e53e3e;\n  white-space: pre-wrap;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n}";
+styleInject(css_248z$4);
 
 function Tooltip(_a) {
   var children = _a.children,
@@ -5725,8 +5741,8 @@ function DropdownMenu(_a) {
   }));
 }
 
-var css_248z$2 = ".maru-dropdown .maru-dropdown-label {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 600;\n  color: #5c5c5c;\n  display: block;\n  margin-bottom: 4px;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper {\n  width: 100%;\n  border-radius: 8px;\n  border: 1px solid #e4e4e4;\n  cursor: pointer;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover {\n  border: 1px solid var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-input > input {\n  color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within {\n  border: 1px solid var(--p);\n  outline: none;\n  background-color: var(--p-10);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-input > input {\n  color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover {\n  border: 1px solid #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-input > input {\n  color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within {\n  border: 1px solid #8c8c8c;\n  outline: none;\n  background-color: #fafafa;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-input > input {\n  color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover {\n  border: 1px solid #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-input > input {\n  color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within {\n  border: 1px solid #58c5a6;\n  outline: none;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-input > input {\n  color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover {\n  border: 1px solid #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-input > input {\n  color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within {\n  border: 1px solid #ffb020;\n  outline: none;\n  background-color: #fff7e9;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-input > input {\n  color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover {\n  border: 1px solid #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-input > input {\n  color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within {\n  border: 1px solid #e53e3e;\n  outline: none;\n  background-color: #fcecec;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-input > input {\n  color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.inline-label-wrapper .maru-dropdown-button {\n  padding: 2px 10px 2px 14px;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .inline-label {\n  display: block;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 10px;\n  letter-spacing: -0.4px;\n  font-weight: 500;\n  color: #bdbdbd;\n  padding: 2px 10px 0 14px;\n  transform: translateY(3px);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n  width: 100%;\n  height: 37px;\n  border: unset;\n  border-radius: 8px;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 8px 10px 8px 14px;\n  color: #5c5c5c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button .maru-dropdown-button-contents {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button .maru-dropdown-button-contents.placeholder {\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n  width: 100%;\n  height: 37px;\n  border: unset;\n  border-radius: 8px;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 8px 10px 8px 14px;\n  color: #5c5c5c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input {\n  width: 100%;\n  height: 100%;\n  border: unset;\n  outline: unset;\n  background-color: unset;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input::-webkit-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input::-moz-placeholder {\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input:-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input::-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input::placeholder {\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-toggle-arrow {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.errored {\n  border: 2px solid #e53e3e;\n}\n.maru-dropdown .maru-dropdown-error-message {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 500;\n  color: #e53e3e;\n  display: block;\n  margin-top: 4px;\n}\n\n.maru-dropdown-menu-wrapper {\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  position: fixed;\n  z-index: 1600;\n  display: none;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu {\n  margin-top: 4px;\n  position: absolute;\n  z-index: 1601;\n  border-radius: 8px;\n  box-shadow: 0px 0px 6px #e4e4e4;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper {\n  overflow-y: auto;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n  width: 100%;\n  background-color: white;\n  border: unset;\n  cursor: pointer;\n  height: 37px;\n  padding: 8px 14px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n  color: #5c5c5c;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item-selected, .maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item:hover {\n  background-color: #fafafa;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item-span {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex: 1;\n  text-align: start;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item-span em {\n  font-style: unset;\n  background-color: var(--p-20-per);\n}";
-styleInject(css_248z$2);
+var css_248z$3 = ".maru-dropdown .maru-dropdown-label {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 600;\n  color: #5c5c5c;\n  display: block;\n  margin-bottom: 4px;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper {\n  width: 100%;\n  border-radius: 8px;\n  border: 1px solid #e4e4e4;\n  cursor: pointer;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover {\n  border: 1px solid var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-input > input {\n  color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within {\n  border: 1px solid var(--p);\n  outline: none;\n  background-color: var(--p-10);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-input > input {\n  color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover {\n  border: 1px solid #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-input > input {\n  color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within {\n  border: 1px solid #8c8c8c;\n  outline: none;\n  background-color: #fafafa;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-input > input {\n  color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover {\n  border: 1px solid #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-input > input {\n  color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within {\n  border: 1px solid #58c5a6;\n  outline: none;\n  background-color: #eef9f6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-input > input {\n  color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover {\n  border: 1px solid #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-input > input {\n  color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within {\n  border: 1px solid #ffb020;\n  outline: none;\n  background-color: #fff7e9;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-input > input {\n  color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover {\n  border: 1px solid #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-input > input {\n  color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within {\n  border: 1px solid #e53e3e;\n  outline: none;\n  background-color: #fcecec;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-input > input {\n  color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover {\n  border: 1px solid #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-input > input {\n  color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within {\n  border: 1px solid #308acc;\n  outline: none;\n  background-color: #eaf3fa;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within .maru-dropdown-input > input {\n  color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.inline-label-wrapper .maru-dropdown-button {\n  padding: 2px 10px 2px 14px;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .inline-label {\n  display: block;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 10px;\n  letter-spacing: -0.4px;\n  font-weight: 500;\n  color: #bdbdbd;\n  padding: 2px 10px 0 14px;\n  transform: translateY(3px);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n  width: 100%;\n  height: 37px;\n  border: unset;\n  border-radius: 8px;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 8px 10px 8px 14px;\n  color: #5c5c5c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button .maru-dropdown-button-contents {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button .maru-dropdown-button-contents.placeholder {\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n  width: 100%;\n  height: 37px;\n  border: unset;\n  border-radius: 8px;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 8px 10px 8px 14px;\n  color: #5c5c5c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input {\n  width: 100%;\n  height: 100%;\n  border: unset;\n  outline: unset;\n  background-color: unset;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input::-webkit-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input::-moz-placeholder {\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input:-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input::-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input::placeholder {\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-toggle-arrow {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.errored {\n  border: 2px solid #e53e3e;\n}\n.maru-dropdown .maru-dropdown-error-message {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 500;\n  color: #e53e3e;\n  display: block;\n  margin-top: 4px;\n}\n\n.maru-dropdown-menu-wrapper {\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  position: fixed;\n  z-index: 1600;\n  display: none;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu {\n  margin-top: 4px;\n  position: absolute;\n  z-index: 1601;\n  border-radius: 8px;\n  box-shadow: 0px 0px 6px #e4e4e4;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper {\n  overflow-y: auto;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n  width: 100%;\n  background-color: white;\n  border: unset;\n  cursor: pointer;\n  height: 37px;\n  padding: 8px 14px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n  color: #5c5c5c;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item-selected, .maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item:hover {\n  background-color: #fafafa;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item-span {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex: 1;\n  text-align: start;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item-span em {\n  font-style: unset;\n  background-color: var(--p-20-per);\n}";
+styleInject(css_248z$3);
 
 // eslint-disable-next-line import/prefer-default-export
 function Dropdown(_a) {
@@ -5933,8 +5949,8 @@ function Dropdown(_a) {
   }));
 }
 
-var css_248z$1 = ".maru-modal-wrapper {\n  width: 100vw;\n  height: 100vh;\n  position: fixed;\n  top: 0;\n  left: 0;\n  background-color: rgba(92, 92, 92, 0.5019607843);\n  z-index: 6006;\n  display: block;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-modal-wrapper .maru-modal {\n  background-color: white;\n  padding: 40px;\n  border-radius: 20px;\n  box-shadow: 0px 5px 20px 5px #8c8c8c;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-xs {\n  width: 300px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-s {\n  width: 400px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-m {\n  width: 550px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-m .maru-modal-header {\n  padding-bottom: 8px;\n  border-bottom: 1px solid #e4e4e4;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-l {\n  width: 860px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-l .maru-modal-header {\n  padding-bottom: 8px;\n  border-bottom: 1px solid #e4e4e4;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-xl {\n  width: 1160px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-xl .maru-modal-header {\n  padding-bottom: 8px;\n  border-bottom: 1px solid #e4e4e4;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n  margin-bottom: 24px;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header > h1 {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 16px;\n  letter-spacing: -0.64px;\n  font-weight: 700;\n  color: #5c5c5c;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-footer {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  flex-direction: row;\n  margin-top: 24px;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-footer button {\n  margin: 0 0 0 8px;\n}";
-styleInject(css_248z$1);
+var css_248z$2 = ".maru-modal-wrapper {\n  width: 100vw;\n  height: 100vh;\n  position: fixed;\n  top: 0;\n  left: 0;\n  background-color: rgba(92, 92, 92, 0.5019607843);\n  z-index: 6006;\n  display: block;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-modal-wrapper .maru-modal {\n  background-color: white;\n  padding: 40px;\n  border-radius: 20px;\n  box-shadow: 0px 5px 20px 5px #8c8c8c;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-xs {\n  width: 300px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-s {\n  width: 400px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-m {\n  width: 550px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-m .maru-modal-header {\n  padding-bottom: 8px;\n  border-bottom: 1px solid #e4e4e4;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-l {\n  width: 860px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-l .maru-modal-header {\n  padding-bottom: 8px;\n  border-bottom: 1px solid #e4e4e4;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-xl {\n  width: 1160px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-xl .maru-modal-header {\n  padding-bottom: 8px;\n  border-bottom: 1px solid #e4e4e4;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n  margin-bottom: 24px;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header > h1 {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 16px;\n  letter-spacing: -0.64px;\n  font-weight: 700;\n  color: #5c5c5c;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-footer {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  flex-direction: row;\n  margin-top: 24px;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-footer button {\n  margin: 0 0 0 8px;\n}";
+styleInject(css_248z$2);
 
 function Modal(_a) {
   var children = _a.children,
@@ -6053,8 +6069,8 @@ function Modal(_a) {
   }));
 }
 
-var css_248z = ".maru-pagination-wrapper .maru-pagination {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-pagination-wrapper .maru-pagination button {\n  cursor: pointer;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 500;\n  color: #8c8c8c;\n  padding: unset;\n  margin: unset;\n  background-color: unset;\n  border: unset;\n  min-width: 30px;\n  min-height: 30px;\n  border-radius: 6px;\n}\n.maru-pagination-wrapper .maru-pagination button > span {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-pagination-wrapper .maru-pagination button:hover {\n  background-color: #e4e4e4;\n  font-weight: 700;\n}\n.maru-pagination-wrapper .maru-pagination button:disabled {\n  cursor: default;\n}\n.maru-pagination-wrapper .maru-pagination .maru-pagination-default-wrapper {\n  display: flex;\n  justify-content: space-evenly;\n  align-items: center;\n  flex-direction: row;\n  flex: 1;\n}\n.maru-pagination-wrapper .maru-pagination .maru-pagination-default-wrapper .maru-pagination-page-button {\n  line-height: 140%;\n  padding: 6px 12px;\n}\n.maru-pagination-wrapper .maru-pagination .maru-pagination-default-wrapper .maru-pagination-page-button.selected {\n  font-weight: 700;\n  color: white;\n  background-color: #bdbdbd;\n}\n.maru-pagination-wrapper .maru-pagination .maru-pagination-input-wrapper .maru-pagination-input {\n  border: 1px solid #e4e4e4;\n  border-radius: 6px;\n  padding: 2px 20px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 700;\n  margin: 0 8px;\n  color: #5c5c5c;\n  text-align: center;\n}\n.maru-pagination-wrapper .maru-pagination .maru-pagination-input-wrapper .maru-pagination-input::-webkit-outer-spin-button, .maru-pagination-wrapper .maru-pagination .maru-pagination-input-wrapper .maru-pagination-input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.maru-pagination-wrapper .maru-pagination .maru-pagination-input-wrapper .maru-pagination-input:disabled {\n  pointer-events: none;\n  border: none;\n  background-color: transparent;\n  width: auto;\n  margin-right: 0;\n  padding: 0;\n}\n.maru-pagination-wrapper .maru-pagination .maru-pagination-input-wrapper > span {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 500;\n  color: #8c8c8c;\n}";
-styleInject(css_248z);
+var css_248z$1 = ".maru-pagination-wrapper .maru-pagination {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-pagination-wrapper .maru-pagination button {\n  cursor: pointer;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 500;\n  color: #8c8c8c;\n  padding: unset;\n  margin: unset;\n  background-color: unset;\n  border: unset;\n  min-width: 30px;\n  min-height: 30px;\n  border-radius: 6px;\n}\n.maru-pagination-wrapper .maru-pagination button > span {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-pagination-wrapper .maru-pagination button:hover {\n  background-color: #e4e4e4;\n  font-weight: 700;\n}\n.maru-pagination-wrapper .maru-pagination button:disabled {\n  cursor: default;\n}\n.maru-pagination-wrapper .maru-pagination .maru-pagination-default-wrapper {\n  display: flex;\n  justify-content: space-evenly;\n  align-items: center;\n  flex-direction: row;\n  flex: 1;\n}\n.maru-pagination-wrapper .maru-pagination .maru-pagination-default-wrapper .maru-pagination-page-button {\n  line-height: 140%;\n  padding: 6px 12px;\n}\n.maru-pagination-wrapper .maru-pagination .maru-pagination-default-wrapper .maru-pagination-page-button.selected {\n  font-weight: 700;\n  color: white;\n  background-color: #bdbdbd;\n}\n.maru-pagination-wrapper .maru-pagination .maru-pagination-input-wrapper .maru-pagination-input {\n  border: 1px solid #e4e4e4;\n  border-radius: 6px;\n  padding: 2px 20px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 700;\n  margin: 0 8px;\n  color: #5c5c5c;\n  text-align: center;\n}\n.maru-pagination-wrapper .maru-pagination .maru-pagination-input-wrapper .maru-pagination-input::-webkit-outer-spin-button, .maru-pagination-wrapper .maru-pagination .maru-pagination-input-wrapper .maru-pagination-input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.maru-pagination-wrapper .maru-pagination .maru-pagination-input-wrapper .maru-pagination-input:disabled {\n  pointer-events: none;\n  border: none;\n  background-color: transparent;\n  width: auto;\n  margin-right: 0;\n  padding: 0;\n}\n.maru-pagination-wrapper .maru-pagination .maru-pagination-input-wrapper > span {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 500;\n  color: #8c8c8c;\n}";
+styleInject(css_248z$1);
 
 function Pagination(_a) {
   var page = _a.page,
@@ -6274,4 +6290,470 @@ function Pagination(_a) {
   }));
 }
 
-export { Button, Checkbox, Chip, Dropdown, ICONS, Icon, Input, Modal, Pagination, Popover, Radio, StyleProvider, Toggle, Tooltip };
+function CheckboxTd(_a) {
+  var rowId = _a.rowId,
+    checked = _a.checked,
+    onCheck = _a.onCheck;
+  var handleCheck = function handleCheck(e) {
+    e.stopPropagation();
+    onCheck(rowId, e.currentTarget.checked);
+  };
+  return (
+    // eslint-disable-next-line jsx-a11y/control-has-associated-label
+    jsx("td", {
+      children: jsx(Checkbox, {
+        checked: checked,
+        onChange: handleCheck,
+        color: "#5C5C5C"
+      })
+    })
+  );
+}
+
+function KebabMenuTd(_a) {
+  var rowId = _a.rowId,
+    kebabContent = _a.kebabContent;
+  var _b = useState(false),
+    open = _b[0],
+    setOpen = _b[1];
+  var btnRef = useRef(null);
+  var handleOpen = function handleOpen() {
+    return setOpen(true);
+  };
+  var handleClose = function handleClose() {
+    return setOpen(false);
+  };
+  return (kebabContent === null || kebabContent === void 0 ? void 0 : kebabContent(rowId, handleClose)) != null ? jsxs("td", __assign({
+    className: "maru-table-body-kebab-wrapper"
+  }, {
+    children: [jsx(Button, {
+      ref: btnRef,
+      className: "maru-table-body-kebab",
+      startIcon: {
+        name: ICONS.DotsVerticalThin,
+        size: 18,
+        color: '#5c5c5c'
+      },
+      variant: "text",
+      color: "secondary",
+      onClick: handleOpen
+    }), btnRef.current && jsx(Popover, __assign({
+      className: "maru-table-body-kebab-popover",
+      direction: "left-start",
+      open: open,
+      anchorEl: btnRef.current,
+      onClose: handleClose,
+      portal: true
+    }, {
+      children: kebabContent === null || kebabContent === void 0 ? void 0 : kebabContent(rowId, handleClose)
+    }))]
+  })) : null;
+}
+
+function TBodyEmptyContent(_a) {
+  var status = _a.status,
+    noData = _a.noData,
+    loading = _a.loading;
+  return jsx("tr", __assign({
+    className: "maru-table-body-empty-tr"
+  }, {
+    children: jsx("td", {
+      children: status === 'no-data' ? jsxs(Fragment, {
+        children: [jsx(Icon, {
+          name: ICONS.FileX02,
+          color: "#bdbdbd",
+          size: 32
+        }), jsx("p", {
+          children: noData === null || noData === void 0 ? void 0 : noData.message
+        })]
+      }) : (loading === null || loading === void 0 ? void 0 : loading.content) || jsx(Icon, {
+        name: ICONS.Loading02,
+        color: "#bdbdbd",
+        size: 24
+      })
+    })
+  }));
+}
+
+function TBody(_a) {
+  var rowIdKey = _a.rowIdKey,
+    formats = _a.formats,
+    data = _a.data,
+    checkedIds = _a.checkedIds,
+    onCheck = _a.onCheck,
+    hasKebabMenu = _a.hasKebabMenu,
+    kebabContent = _a.kebabContent,
+    // expandable,
+    // expandingIdKey,
+    // expandingRowIdKey,
+    // expandingFormat,
+    // onRowClick,
+    // onRowMouseOver,
+    // onRowMouseLeave,
+    // focusedRowInfo,
+    noData = _a.noData,
+    loading = _a.loading;
+  var _b = useState([]);
+    _b[0];
+    _b[1];
+  var tableBodyStatus = useMemo(function () {
+    if (loading === null || loading === void 0 ? void 0 : loading.isLoading) return 'loading';
+    if (noData === null || noData === void 0 ? void 0 : noData.isNoData) return 'no-data';
+    return 'enable';
+  }, [noData, loading]);
+  // const hasRowEvent = useMemo(
+  //   () =>
+  //     (onRowClick && onRowClick.name !== 'mockConstructor') ||
+  //     (onRowMouseOver && onRowMouseOver.name !== 'mockConstructor'),
+  //   [onRowClick, onRowMouseOver],
+  // );
+  var handleCheck = function handleCheck(rowId, checked) {
+    if (checked) {
+      var newCheckedArray = checkedIds ? __spreadArray([], checkedIds, true) : [];
+      newCheckedArray.push(rowId);
+      onCheck === null || onCheck === void 0 ? void 0 : onCheck(__spreadArray([], newCheckedArray, true));
+    } else {
+      var newCheckedArray = checkedIds ? checkedIds.filter(function (el) {
+        return el !== rowId;
+      }) : [];
+      onCheck === null || onCheck === void 0 ? void 0 : onCheck(__spreadArray([], newCheckedArray, true));
+    }
+  };
+  // const handleRowClick = (rowId: string) => () => {
+  //   if (hasRowEvent) {
+  //     onRowClick?.(rowId);
+  //   }
+  // };
+  // const handleRowEnter = (rowId: string) => () => {
+  //   if (hasRowEvent) {
+  //     onRowMouseOver?.(rowId);
+  //   }
+  // };
+  // const handleRowLeave = (rowId: string) => () => {
+  //   if (hasRowEvent) {
+  //     onRowMouseLeave?.(rowId);
+  //   }
+  // };
+  // const handleExpandClick = (rowId: string) => () => {
+  //   let newExpand = [...expand];
+  //   if (newExpand.includes(rowId)) {
+  //     newExpand = newExpand.filter((i) => i !== rowId);
+  //   } else {
+  //     newExpand = newExpand.concat(rowId);
+  //   }
+  //   setExpand(newExpand);
+  // };
+  return jsx("tbody", __assign({
+    className: "maru-table-body"
+  }, {
+    children: tableBodyStatus !== 'enable' ? jsx(TBodyEmptyContent, {
+      status: tableBodyStatus,
+      noData: noData,
+      loading: loading
+    }) : data.map(function (row) {
+      return jsx(React.Fragment, {
+        children: jsxs("tr", __assign({
+          // onClick={handleRowClick(row[rowIdKey])}
+          // onMouseEnter={handleRowEnter(row[rowIdKey])}
+          // onMouseLeave={handleRowLeave(row[rowIdKey])}
+          // aria-hidden={hasRowEvent}
+          className: classNames()
+        }, {
+          children: [checkedIds != null && jsx(CheckboxTd, {
+            rowId: row[rowIdKey],
+            checked: !!(checkedIds === null || checkedIds === void 0 ? void 0 : checkedIds.includes(row[rowIdKey])),
+            onCheck: handleCheck
+          }), formats.map(function (format) {
+            if (format.isHide) {
+              return null;
+            }
+            var cellHashId = uuidv4(4);
+            return jsx("td", {
+              children: format.customColumn ? format.customColumn(row[format.columnIdKey], row[rowIdKey]) : row[format.columnIdKey]
+            }, "cell-".concat(row[format.columnIdKey], "-").concat(cellHashId));
+          }), hasKebabMenu && jsx(KebabMenuTd, {
+            rowId: row[rowIdKey],
+            kebabContent: kebabContent
+          })]
+        }))
+      }, "table-row-".concat(row[rowIdKey]));
+    })
+  }));
+}
+
+function THead(_a) {
+  var formats = _a.formats,
+    currentSort = _a.currentSort,
+    onSortClick = _a.onSortClick,
+    hasCheckbox = _a.hasCheckbox,
+    allCheckbox = _a.allCheckbox,
+    onAllCheck = _a.onAllCheck,
+    hasKebabMenu = _a.hasKebabMenu;
+  var handleChange = function handleChange(e) {
+    e.stopPropagation();
+    onAllCheck(e.currentTarget.checked);
+  };
+  return jsx("thead", __assign({
+    className: "maru-table-header"
+  }, {
+    children: jsxs("tr", {
+      children: [hasCheckbox &&
+      // eslint-disable-next-line jsx-a11y/control-has-associated-label
+      jsx("th", {
+        children: jsx(Checkbox, {
+          checked: allCheckbox,
+          onChange: handleChange,
+          color: "#5C5C5C"
+        })
+      }), formats === null || formats === void 0 ? void 0 : formats.map(function (format) {
+        if (format.isHide) {
+          return null;
+        }
+        // eslint-disable-next-line max-len
+        // eslint-disable-next-line react/no-unstable-nested-components, react/function-component-definition
+        var Header = function Header() {
+          return !format.sortable ? format.columnName : jsx(Button, __assign({
+            onClick: onSortClick(format.columnIdKey, format.sortable),
+            variant: "text",
+            endIcon: {
+              name: ICONS.SortOutline,
+              size: 18,
+              color: (currentSort === null || currentSort === void 0 ? void 0 : currentSort.columnName) === format.columnIdKey ? 'primary' : '#8c8c8c'
+            },
+            color: "secondary",
+            className: "maru-table-header-sortable"
+          }, {
+            children: format.columnName
+          }));
+        };
+        return jsx("th", {
+          children: format.customHeader ? format.customHeader(Header(), format.columnIdKey) : Header()
+        }, "header-".concat(format.columnIdKey));
+      }), hasKebabMenu ?
+      // kebabMenuHeader ? (
+      //   <th>{kebabMenuHeader()}</th>
+      // ) : (
+      jsx("th", {
+        children: jsx("div", {
+          style: {
+            width: '20px'
+          }
+        })
+      }) :
+      // )
+      null]
+    })
+  }));
+}
+
+function Colgroup(_a) {
+  var hasCheckbox = _a.hasCheckbox,
+    formats = _a.formats,
+    hasKebabMenu = _a.hasKebabMenu,
+    kebabMenuWidth = _a.kebabMenuWidth;
+  return jsxs("colgroup", {
+    children: [hasCheckbox ? jsx("col", {
+      width: "5%"
+    }) : null, formats === null || formats === void 0 ? void 0 : formats.map(function (format) {
+      if (format.isHide) {
+        return null;
+      }
+      return jsx("col", {
+        width: format.width || "".concat(90 / formats.length, "%")
+      }, "col-".concat(format.columnIdKey));
+    }), hasKebabMenu ? kebabMenuWidth ? jsx("col", {
+      width: kebabMenuWidth
+    }) : jsx("col", {
+      width: "5%"
+    }) : null]
+  });
+}
+
+var css_248z = ".maru-table-wrapper {\n  width: 100%;\n  background-color: white;\n  box-shadow: 0px 0px 6px #e4e4e4;\n  border-radius: 15px;\n}\n.maru-table-wrapper .maru-table-header-wrapper,\n.maru-table-wrapper .maru-table-body-wrapper {\n  width: 100%;\n}\n.maru-table-wrapper tr {\n  height: 54px;\n}\n.maru-table-wrapper th,\n.maru-table-wrapper td {\n  text-align: start;\n  vertical-align: middle;\n  padding: 16.5px 15px;\n  word-break: break-word;\n}\n.maru-table-wrapper .maru-table-header tr {\n  border-bottom: 1px solid #e4e4e4;\n}\n.maru-table-wrapper .maru-table-header tr th {\n  color: #5c5c5c;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 700;\n}\n.maru-table-wrapper .maru-table-header .maru-table-header-sortable {\n  padding: unset;\n  margin: unset;\n  color: #5c5c5c;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 700;\n}\n.maru-table-wrapper .maru-table-body-scroll-wrapper {\n  overflow-y: auto;\n}\n.maru-table-wrapper .maru-table-body-scroll-wrapper .maru-table-scroll {\n  overflow-y: auto;\n}\n.maru-table-wrapper .maru-table-body tr:not(:last-of-type) {\n  border-bottom: 1px solid #fafafa;\n}\n.maru-table-wrapper .maru-table-body tr:hover,\n.maru-table-wrapper .maru-table-body .row-clickable:hover {\n  background-color: var(--p-10) !important;\n}\n.maru-table-wrapper .maru-table-body td {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n}\n.maru-table-wrapper .maru-table-body tr:last-of-type td:first-of-type {\n  border-bottom-left-radius: 15px;\n}\n.maru-table-wrapper .maru-table-body tr:last-of-type td:last-of-type {\n  border-bottom-right-radius: 15px;\n}\n.maru-table-wrapper .maru-table-body .row-clickable {\n  cursor: pointer;\n}\n.maru-table-wrapper .maru-table-body .expanding {\n  border-bottom: unset !important;\n}\n.maru-table-wrapper .maru-checkbox {\n  border-color: #bdbdbd;\n}\n.maru-table-wrapper .maru-table-body-kebab-wrapper {\n  text-align: center;\n}\n.maru-table-wrapper .maru-table-body-kebab {\n  margin: unset;\n  padding: unset;\n  height: auto;\n}\n.maru-table-wrapper .maru-table-body-empty-tr > td {\n  width: 100%;\n  vertical-align: middle;\n  text-align: center;\n  padding: 61px 0;\n}\n.maru-table-wrapper .maru-table-body-empty-tr > td p {\n  margin-top: 10px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n  color: #bdbdbd;\n}\n.maru-table-wrapper .maru-table-body-expandable-button {\n  width: 24px;\n  height: 24px;\n  padding: 0.2rem;\n}\n.maru-table-wrapper .maru-table-body-expanding-row {\n  border: unset !important;\n}\n.maru-table-wrapper .maru-table-body-expanding-row.empty-last-expanding-row {\n  border-bottom: 1px solid #bdbdbd !important;\n  height: 12px !important;\n}";
+styleInject(css_248z);
+
+// eslint-disable-next-line import/prefer-default-export
+function Table(_a) {
+  var rowIdKey = _a.rowIdKey,
+    data = _a.data,
+    formats = _a.formats,
+    sort = _a.sort,
+    onSort = _a.onSort,
+    checkedIds = _a.checkedIds,
+    onCheck = _a.onCheck,
+    kebabMenu = _a.kebabMenu,
+    // expandable,
+    // expandingIdKey,
+    // expandingRowIdKey,
+    // expandingFormat,
+    // onTableMouseEnter,
+    // onTableMouseLeave,
+    // onRowClick,
+    // onRowMouseOver,
+    // onRowMouseLeave,
+    className = _a.className,
+    id = _a.id,
+    // focusedRowInfo,
+    tableMaxHeight = _a.tableMaxHeight,
+    noData = _a.noData,
+    loading = _a.loading;
+  var tableWrapperRef = useRef(null);
+  var tableHeaderWrapperRef = useRef(null);
+  var tableBodyWrapperRef = useRef(null);
+  var _b = useState(false),
+    allChecked = _b[0],
+    setAllCheck = _b[1];
+  /**
+   * setting table size
+   */
+  useEffect(function () {
+    if (tableMaxHeight && tableWrapperRef.current && tableBodyWrapperRef.current && tableHeaderWrapperRef.current) {
+      var tableWrapper = tableWrapperRef.current;
+      var tableHeaderWrapper = tableHeaderWrapperRef.current;
+      var tableBodyWrapper = tableBodyWrapperRef.current;
+      tableWrapper.style.maxHeight = "".concat(tableMaxHeight, "px");
+      tableBodyWrapper.style.maxHeight = "calc(".concat(tableMaxHeight, "px - 2em - ").concat(tableHeaderWrapper.offsetHeight, "px)");
+      if (tableBodyWrapper.scrollHeight > tableBodyWrapper.offsetHeight) {
+        tableHeaderWrapper.style.width = 'calc(100% - 16px)';
+      } else {
+        tableHeaderWrapper.style.width = '100%';
+      }
+    }
+  }, [tableMaxHeight]);
+  /**
+   * setting all checkbox
+   */
+  useEffect(function () {
+    if (checkedIds != null) {
+      if (!data.length) {
+        setAllCheck(false);
+      } else {
+        // eslint-disable-next-line no-lonely-if
+        if (!(checkedIds === null || checkedIds === void 0 ? void 0 : checkedIds.length)) {
+          setAllCheck(false);
+        } else {
+          var checkCount_1 = 0;
+          checkedIds.forEach(function (checkedId) {
+            if (data.find(function (item) {
+              return item[rowIdKey] === checkedId;
+            })) {
+              checkCount_1 += 1;
+            }
+          });
+          setAllCheck(checkCount_1 === data.length);
+        }
+      }
+    }
+  }, [data, checkedIds]);
+  var handleTableMouseEnter = function handleTableMouseEnter() {
+    // onTableMouseEnter?.();
+  };
+  var handleTableMouseLeave = function handleTableMouseLeave() {
+    // onTableMouseLeave?.();
+  };
+  var handleSortClick = function handleSortClick(columnName, sortable) {
+    if (sortable === void 0) {
+      sortable = false;
+    }
+    return function () {
+      var desc = function desc() {
+        if ((sort === null || sort === void 0 ? void 0 : sort.columnName) !== columnName) return true;
+        return !sort.desc;
+      };
+      if (sortable) {
+        onSort === null || onSort === void 0 ? void 0 : onSort({
+          columnName: columnName,
+          desc: desc()
+        });
+      }
+    };
+  };
+  var handleAllCheckboxChange = function handleAllCheckboxChange(checked) {
+    var dataIdArray = data.map(function (el) {
+      return el[rowIdKey];
+    });
+    setAllCheck(checked);
+    if (checked) {
+      var newCheckedArray = __spreadArray([], dataIdArray, true);
+      if (checkedIds === null || checkedIds === void 0 ? void 0 : checkedIds.length) {
+        newCheckedArray = dataIdArray.reduce(function (acc, curr) {
+          if (!checkedIds.includes(curr)) {
+            acc.push(curr);
+          }
+          return acc;
+        }, []);
+        newCheckedArray.push.apply(newCheckedArray, checkedIds);
+      }
+      onCheck === null || onCheck === void 0 ? void 0 : onCheck(__spreadArray([], newCheckedArray, true));
+    } else {
+      var leftChecked = !(checkedIds === null || checkedIds === void 0 ? void 0 : checkedIds.length) ? [] : checkedIds.reduce(function (acc, curr) {
+        if (!dataIdArray.includes(curr)) {
+          acc.push(curr);
+        }
+        return acc;
+      }, []);
+      onCheck === null || onCheck === void 0 ? void 0 : onCheck(__spreadArray([], leftChecked, true));
+    }
+  };
+  return jsxs("div", __assign({
+    ref: tableWrapperRef,
+    id: id,
+    className: classNames('maru-table-wrapper', className),
+    onMouseEnter: handleTableMouseEnter,
+    onMouseLeave: handleTableMouseLeave
+  }, {
+    children: [jsxs("table", __assign({
+      ref: tableHeaderWrapperRef,
+      className: "maru-table-header-wrapper"
+    }, {
+      children: [jsx(Colgroup, {
+        hasCheckbox: checkedIds != null,
+        formats: formats,
+        hasKebabMenu: kebabMenu != null,
+        kebabMenuWidth: kebabMenu === null || kebabMenu === void 0 ? void 0 : kebabMenu.width
+      }), jsx(THead, {
+        formats: formats,
+        currentSort: sort,
+        onSortClick: handleSortClick,
+        hasCheckbox: checkedIds != null,
+        allCheckbox: allChecked,
+        onAllCheck: handleAllCheckboxChange,
+        hasKebabMenu: kebabMenu != null
+      })]
+    })), jsx("div", __assign({
+      ref: tableBodyWrapperRef,
+      className: "maru-table-body-scroll-wrapper"
+    }, {
+      children: jsxs("table", __assign({
+        className: "maru-table-body-wrapper"
+      }, {
+        children: [jsx(Colgroup, {
+          hasCheckbox: checkedIds != null,
+          formats: formats,
+          hasKebabMenu: kebabMenu != null,
+          kebabMenuWidth: kebabMenu === null || kebabMenu === void 0 ? void 0 : kebabMenu.width
+        }), jsx(TBody, {
+          rowIdKey: rowIdKey,
+          formats: formats,
+          data: data,
+          checkedIds: checkedIds,
+          onCheck: onCheck,
+          hasKebabMenu: kebabMenu != null,
+          kebabContent: kebabMenu === null || kebabMenu === void 0 ? void 0 : kebabMenu.content,
+          // expandable={expandable}
+          // expandingIdKey={expandingIdKey}
+          // expandingRowIdKey={expandingRowIdKey}
+          // expandingFormat={expandingFormat}
+          // onRowClick={onRowClick}
+          // onRowMouseOver={onRowMouseOver}
+          // onRowMouseLeave={onRowMouseLeave}
+          // focusedRowInfo={focusedRowInfo}
+          noData: noData,
+          loading: loading
+        })]
+      }))
+    }))]
+  }));
+}
+
+export { Button, Checkbox, Chip, Dropdown, ICONS, Icon, Input, Modal, Pagination, Popover, Radio, StyleProvider, Table, Toggle, Tooltip };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "maru_design2",
-  "version": "2.0.1",
+  "version": "2.2.0",
   "main": "./dist/index.js",
   "author": "zena-42maru",
   "license": "MIT",