maru_design2 2.12.5 → 2.14.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # Changelog
 
+## [2.14.0](https://github.com/42maru-ai/maru-design2/compare/v2.13.0...v2.14.0) (2024-08-06)
+
+
+### Features
+
+* :sparkles: Toast - UPDATE details ([9cf90fa](https://github.com/42maru-ai/maru-design2/commit/9cf90fafcbbc2b264b7538ce2eaaacd09f157a02))
+
+
+### Bug Fixes
+
+* :adhesive_bandage: Toast - UPDATE details tag ([53e492f](https://github.com/42maru-ai/maru-design2/commit/53e492fb76f0faf010e5d0cde39da3d0480f6eee))
+* :bug: Input - UPDATE input clear default state [#244](https://github.com/42maru-ai/maru-design2/issues/244) ([09c7f55](https://github.com/42maru-ai/maru-design2/commit/09c7f55bd691ff134086bfc83ae19596ea6fb1e1))
+* :fire: Toast - REMOVE unused code ([5bec3f7](https://github.com/42maru-ai/maru-design2/commit/5bec3f71fd40676a14f532bcf57966949c32e2d9))
+* :label: Toast - UPDATE IToastDetailItem ([9b42067](https://github.com/42maru-ai/maru-design2/commit/9b4206729488745f5240b1e3663ca0e889d4fb8e))
+* :memo: TOAST - UPDATE storybook ([1456487](https://github.com/42maru-ai/maru-design2/commit/1456487adbf4fcf7b37fe3f201604223be4ac3ba))
+
+## [2.13.0](https://github.com/42maru-ai/maru-design2/compare/v2.12.5...v2.13.0) (2024-07-23)
+
+
+### Features
+
+* :label: Skeleton - ADD types ([b722d49](https://github.com/42maru-ai/maru-design2/commit/b722d49eea45c143ca33b703ea80e4c8c635c4e3))
+* :memo: Skeleton - ADD documentation ([82b3c9f](https://github.com/42maru-ai/maru-design2/commit/82b3c9f563eb2164d059493b0574348d125abd5a))
+* :sparkles: Skeleton - ADD skeleton ui ([ed14fe9](https://github.com/42maru-ai/maru-design2/commit/ed14fe9c323168bda479165ef7d8aac4cf6e4a24))
+
+
+### Bug Fixes
+
+* :adhesive_bandage: Radio - FIX code review feedback ([c24f98a](https://github.com/42maru-ai/maru-design2/commit/c24f98a83e9670f027f977e3c005c8ca98365ab8))
+* :adhesive_bandage: Skeleton - FIX code review feedback ([b920e78](https://github.com/42maru-ai/maru-design2/commit/b920e78d379e3f2bc95ca1f897097649ac353957))
+* :adhesive_bandage: Skeleton - FIX code review feedback ([3d169fa](https://github.com/42maru-ai/maru-design2/commit/3d169fa43974650d888d19abda79165328db8cff))
+* :bento: Icon - ADD annotator icons [#243](https://github.com/42maru-ai/maru-design2/issues/243) ([ac41087](https://github.com/42maru-ai/maru-design2/commit/ac410875d96448e256a6eb4349ca305653236e3f))
+* :bug: Radio - FIX input id ([b555a2d](https://github.com/42maru-ai/maru-design2/commit/b555a2d2b8dbf3e98b65e00de24da3c2176be5f1))
+* :coffin: Skeleton - REMOVE unused code ([dc2e17d](https://github.com/42maru-ai/maru-design2/commit/dc2e17d508ab5170045912d9d6b658bd27490296))
+
 ## [2.12.5](https://github.com/42maru-ai/maru-design2/compare/v2.12.4...v2.12.5) (2024-07-18)
 
 

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

@@ -138,10 +138,12 @@ export declare const ICONS: {
     readonly FileX02_s3220: "FileX02_s3220";
     readonly File_s1611: "File_s1611";
     readonly File_s2420: "File_s2420";
+    readonly File_s3020: "File_s3020";
     readonly FilterLines_s1815: "FilterLines_s1815";
     readonly FolderUpload_s1615: "FolderUpload_s1615";
     readonly FolderUpload_s2420: "FolderUpload_s2420";
     readonly Folder_s2420: "Folder_s2420";
+    readonly Folder_s2820: "Folder_s2820";
     readonly Globe01_s1615: "Globe01_s1615";
     readonly Grabber_s1612: "Grabber_s1612";
     readonly GraduationHat01_s1615: "GraduationHat01_s1615";
@@ -224,6 +226,7 @@ export declare const ICONS: {
     readonly XCircle_s1613: "XCircle_s1613";
     readonly XCircle_s2420: "XCircle_s2420";
     readonly XDiamondBg_s2415: "XDiamondBg_s2415";
+    readonly X_s14: "X_s14";
     readonly X_s1613: "X_s1613";
     readonly X_s2420: "X_s2420";
     readonly Zap_s1812: "Zap_s1812";

package/dist/components/atoms/skeleton/Contents.d.ts

@@ -0,0 +1 @@
+export default function Contents(): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/skeleton/Skeleton.d.ts

@@ -0,0 +1,6 @@
+import { TSkeletonVariant } from '../../../enums/variant';
+import './skeleton.scss';
+export interface SkeletonProps {
+    variant: TSkeletonVariant;
+}
+export declare function Skeleton({ variant }: SkeletonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/skeleton/index.d.ts

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

package/dist/components/molecules/toast/Details.d.ts

@@ -1,7 +1,6 @@
+import { IToastDetailItem } from './types';
 interface DetailsProps {
-    details: string[] | undefined;
-    isDetailsOpen: boolean;
-    handleToggleDetails: () => void;
+    details: IToastDetailItem[] | undefined;
 }
-export default function Details({ details, isDetailsOpen, handleToggleDetails, }: DetailsProps): import("react/jsx-runtime").JSX.Element | null;
+export default function Details({ details }: DetailsProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/molecules/toast/Toast.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
+import { IToastDetailItem } from './types';
 import { TToastVariant } from '../../../enums/variant';
 export interface IToast {
     variant: TToastVariant;
     content: string;
     description?: React.ReactNode;
-    details?: string[];
+    details?: IToastDetailItem[];
     disableAutoOff?: boolean;
 }
 export interface ToastProps {

package/dist/components/molecules/toast/ToastStyle.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { IToastDetailItem } from './types';
 import { TToastVariant } from '../../../enums/variant';
 import './toast.scss';
 export interface ToastStyleProps {
@@ -14,7 +15,7 @@ export interface ToastStyleProps {
     /**
      * details, summary 태그를 활용하여 노출할 내용
      */
-    details?: string[];
+    details?: IToastDetailItem[];
     onClose: () => void;
 }
 export declare function ToastStyle({ variant, content, description, details, onClose, }: ToastStyleProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,4 @@
+export interface IToastDetailItem {
+    summary: string;
+    subDetails: string[];
+}

package/dist/enums/variant.d.ts

@@ -4,3 +4,5 @@ export declare const CHIP_VARIANTS: readonly ["default", "outline", "dot"];
 export type TChipVariant = (typeof CHIP_VARIANTS)[number];
 export declare const TOAST_VARIANTS: readonly ["success", "warning", "danger"];
 export type TToastVariant = (typeof TOAST_VARIANTS)[number];
+export declare const SKELETON_VARIANTS: readonly ["frame"];
+export type TSkeletonVariant = (typeof SKELETON_VARIANTS)[number];

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export * from './components/atoms/popover';
 export * from './components/atoms/radio';
 export * from './components/atoms/toggle';
 export * from './components/atoms/tooltip';
+export * from './components/atoms/skeleton';
 export * from './components/molecules/calendar';
 export * from './components/molecules/dropdown';
 export * from './components/molecules/modal';

package/dist/index.js

@@ -84,11 +84,11 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$g = "* {\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$g);
+var css_248z$h = "* {\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$h);
 
-var css_248z$f = ".scrollbar, * {\n  scrollbar-track-color: #e4e4e4;\n  scrollbar-arrow-color: #e4e4e4;\n  scrollbar-3dlight-color: #e4e4e4;\n  scrollbar-highlight-color: #e4e4e4;\n  scrollbar-shadow-color: #e4e4e4;\n  scrollbar-face-color: #e4e4e4;\n}\n\n.scrollbar::-webkit-scrollbar, ::-webkit-scrollbar {\n  background: inherit;\n  width: 6px;\n  height: 6px;\n}\n\n.scrollbar::-webkit-scrollbar-track, ::-webkit-scrollbar-track {\n  background: none;\n}\n\n.scrollbar::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb {\n  background-color: #e4e4e4;\n  border-radius: 16px;\n}\n\n.scrollbar::-webkit-scrollbar-button, ::-webkit-scrollbar-button {\n  display: none;\n}\n\n@font-face {\n  font-family: \"Pretendard\";\n  src: url(\"../../assets/fonts/PretendardVariable.woff2\") format(\"woff2-variations\");\n}\n: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  --p-05-per: #308acc0d;\n  --p-05: #f5fafd;\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: #e6f0e7;\n  --p-05-per: #0964120d;\n  --p-05: #f3f7f3;\n}";
-styleInject(css_248z$f);
+var css_248z$g = ".scrollbar, * {\n  scrollbar-track-color: #e4e4e4;\n  scrollbar-arrow-color: #e4e4e4;\n  scrollbar-3dlight-color: #e4e4e4;\n  scrollbar-highlight-color: #e4e4e4;\n  scrollbar-shadow-color: #e4e4e4;\n  scrollbar-face-color: #e4e4e4;\n}\n\n.scrollbar::-webkit-scrollbar, ::-webkit-scrollbar {\n  background: inherit;\n  width: 6px;\n  height: 6px;\n}\n\n.scrollbar::-webkit-scrollbar-track, ::-webkit-scrollbar-track {\n  background: none;\n}\n\n.scrollbar::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb {\n  background-color: #e4e4e4;\n  border-radius: 16px;\n}\n\n.scrollbar::-webkit-scrollbar-button, ::-webkit-scrollbar-button {\n  display: none;\n}\n\n@font-face {\n  font-family: \"Pretendard\";\n  src: url(\"../../assets/fonts/PretendardVariable.woff2\") format(\"woff2-variations\");\n}\n: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  --p-05-per: #308acc0d;\n  --p-05: #f5fafd;\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: #e6f0e7;\n  --p-05-per: #0964120d;\n  --p-05: #f3f7f3;\n}";
+styleInject(css_248z$g);
 
 function StyleProvider(_a) {
   var children = _a.children,
@@ -2027,6 +2027,21 @@ var iconmap = {
     "circles": [],
     "rects": []
   },
+  "File_s3020": {
+    "width": "30",
+    "height": "30",
+    "viewBox": "0 0 30 30",
+    "fill": "none",
+    "paths": [{
+      "d": "M18.622 2.37768V8.16712C18.622 8.9521 18.622 9.34459 18.756 9.64441C18.8739 9.90814 19.062 10.1226 19.2934 10.2569C19.5564 10.4097 19.9008 10.4097 20.5894 10.4097H25.6687M26 13.1964V21.2722C26 23.6272 26 24.8046 25.5979 25.7041C25.2442 26.4953 24.6799 27.1386 23.9858 27.5417C23.1966 28 22.1636 28 20.0976 28H9.90243C7.83638 28 6.80336 28 6.01424 27.5417C5.32011 27.1386 4.75576 26.4953 4.40208 25.7041C4 24.8046 4 23.6272 4 21.2722V8.72776C4 6.37282 4 5.19536 4.40208 4.29589C4.75576 3.5047 5.32011 2.86143 6.01424 2.4583C6.80336 2 7.83638 2 9.90243 2H16.1771C17.0794 2 17.5305 2 17.9551 2.11618C18.3315 2.21919 18.6914 2.38908 19.0214 2.61963C19.3937 2.87966 19.7127 3.24328 20.3507 3.97052L24.2712 8.43919C24.9092 9.16642 25.2283 9.53004 25.4564 9.95438C25.6587 10.3306 25.8077 10.7408 25.8981 11.1698C26 11.6537 26 12.168 26 13.1964Z",
+      "stroke": "#096412",
+      "strokeWidth": "2",
+      "strokeLinecap": "round",
+      "strokeLinejoin": "round"
+    }],
+    "circles": [],
+    "rects": []
+  },
   "FilterLines_s1815": {
     "width": "18",
     "height": "18",
@@ -2098,6 +2113,20 @@ var iconmap = {
     "circles": [],
     "rects": []
   },
+  "Folder_s2820": {
+    "width": "28",
+    "height": "28",
+    "viewBox": "0 0 28 28",
+    "fill": "none",
+    "paths": [{
+      "d": "M1 3.45466V20.5453C1 21.901 2.16406 23 3.6 23H24.4C25.8359 23 27 21.901 27 20.5453V6.40026C27 5.04459 25.8359 3.9456 24.4 3.9456H13.8789C13.1893 3.9456 12.528 3.19605 12.0404 2.73571L10.9635 1.71895C10.4759 1.25862 9.81456 1 9.125 1H3.6C2.16406 1 1 2.09899 1 3.45466Z",
+      "stroke": "#BDBDBD",
+      "strokeWidth": "2",
+      "strokeLinecap": "round"
+    }],
+    "circles": [],
+    "rects": []
+  },
   "Globe01_s1615": {
     "width": "16",
     "height": "16",
@@ -3475,6 +3504,20 @@ var iconmap = {
       "fill": "#E53E3E"
     }]
   },
+  "X_s14": {
+    "width": "14",
+    "height": "14",
+    "viewBox": "0 0 14 14",
+    "fill": "none",
+    "paths": [{
+      "d": "M9.91634 4.5835L4.08301 10.4168M4.08301 4.5835L9.91634 10.4168",
+      "stroke": "#8C8C8C",
+      "strokeLinecap": "round",
+      "strokeLinejoin": "round"
+    }],
+    "circles": [],
+    "rects": []
+  },
   "X_s1613": {
     "width": "16",
     "height": "16",
@@ -3655,10 +3698,12 @@ var ICONS = {
   "FileX02_s3220": "FileX02_s3220",
   "File_s1611": "File_s1611",
   "File_s2420": "File_s2420",
+  "File_s3020": "File_s3020",
   "FilterLines_s1815": "FilterLines_s1815",
   "FolderUpload_s1615": "FolderUpload_s1615",
   "FolderUpload_s2420": "FolderUpload_s2420",
   "Folder_s2420": "Folder_s2420",
+  "Folder_s2820": "Folder_s2820",
   "Globe01_s1615": "Globe01_s1615",
   "Grabber_s1612": "Grabber_s1612",
   "GraduationHat01_s1615": "GraduationHat01_s1615",
@@ -3741,6 +3786,7 @@ var ICONS = {
   "XCircle_s1613": "XCircle_s1613",
   "XCircle_s2420": "XCircle_s2420",
   "XDiamondBg_s2415": "XDiamondBg_s2415",
+  "X_s14": "X_s14",
   "X_s1613": "X_s1613",
   "X_s2420": "X_s2420",
   "Zap_s1812": "Zap_s1812",
@@ -3814,8 +3860,8 @@ function Icon(_a) {
   }));
 }
 
-var css_248z$e = ".size-small {\n  padding: 5px 16px;\n  border-radius: 4px;\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-normal {\n  padding: 8px 16px;\n  border-radius: 6px;\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: 10px 16px;\n  border-radius: 6px;\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: 6px;\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  box-shadow: 0 0 0 1px var(--p) inset;\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 0 1px var(--p) inset, 0 0 6px var(--p);\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: transparent;\n  color: var(--p);\n}\n.maru-button-primary-color-on-focus {\n  background-color: white;\n  color: #5c5c5c;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n  padding: 5px 7px 5px 6px !important;\n  gap: 4px;\n}\n.maru-button-primary-color-on-focus:hover {\n  background-color: var(--p-10);\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}\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  box-shadow: 0 0 0 1px #8c8c8c inset;\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: #e4e4e4;\n  color: #8c8c8c;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\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: transparent;\n  color: #8c8c8c;\n}\n.maru-button-secondary-color-on-focus {\n  background-color: white;\n  color: #5c5c5c;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n  padding: 5px 7px 5px 6px !important;\n  gap: 4px;\n}\n.maru-button-secondary-color-on-focus:hover {\n  background-color: #fafafa;\n}\n.maru-button-secondary-color-on-focus:focus-visible, .maru-button-secondary-color-on-focus:active {\n  background-color: #fafafa;\n  color: #8c8c8c;\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  box-shadow: 0 0 0 1px #58c5a6 inset;\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: transparent;\n  color: #58c5a6;\n}\n.maru-button-positive-color-on-focus {\n  background-color: white;\n  color: #5c5c5c;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n  padding: 5px 7px 5px 6px !important;\n  gap: 4px;\n}\n.maru-button-positive-color-on-focus:hover {\n  background-color: #eef9f6;\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}\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: transparent;\n  color: #ffb020;\n}\n.maru-button-warning-color-on-focus {\n  background-color: white;\n  color: #5c5c5c;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n  padding: 5px 7px 5px 6px !important;\n  gap: 4px;\n}\n.maru-button-warning-color-on-focus:hover {\n  background-color: #fff7e9;\n}\n.maru-button-warning-color-on-focus:focus-visible, .maru-button-warning-color-on-focus:active {\n  background-color: #fff7e9;\n  color: #ffb020;\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  box-shadow: 0 0 0 1px #e53e3e inset;\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: transparent;\n  color: #e53e3e;\n}\n.maru-button-danger-color-on-focus {\n  background-color: white;\n  color: #5c5c5c;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n  padding: 5px 7px 5px 6px !important;\n  gap: 4px;\n}\n.maru-button-danger-color-on-focus:hover {\n  background-color: #fcecec;\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}\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  box-shadow: 0 0 0 1px #308acc inset;\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: transparent;\n  color: #308acc;\n}\n.maru-button-success-color-on-focus {\n  background-color: white;\n  color: #5c5c5c;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n  padding: 5px 7px 5px 6px !important;\n  gap: 4px;\n}\n.maru-button-success-color-on-focus:hover {\n  background-color: #eaf3fa;\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}\n\n.maru-button-with-start-icon.size-small,\n.maru-button-with-end-icon.size-small {\n  padding: 5px 12px;\n}\n.maru-button-with-start-icon.size-small.maru-button-secondary-outline,\n.maru-button-with-end-icon.size-small.maru-button-secondary-outline {\n  background-color: white;\n  color: #bdbdbd;\n  box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-button-with-start-icon.size-small.maru-button-secondary-outline:hover,\n.maru-button-with-end-icon.size-small.maru-button-secondary-outline:hover {\n  color: var(--p);\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-with-start-icon.size-small.maru-button-secondary-outline:focus-visible, .maru-button-with-start-icon.size-small.maru-button-secondary-outline:active,\n.maru-button-with-end-icon.size-small.maru-button-secondary-outline:focus-visible,\n.maru-button-with-end-icon.size-small.maru-button-secondary-outline: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-with-start-icon.size-normal,\n.maru-button-with-end-icon.size-normal {\n  padding: 8px 12px;\n}\n\n.maru-button-only-icon.size-normal {\n  padding: 0;\n  justify-content: center;\n  background-color: transparent;\n}\n.maru-button-only-icon.size-normal:hover, .maru-button-only-icon.size-normal:focus-visible, .maru-button-only-icon.size-normal:active {\n  box-shadow: none;\n  background-color: transparent;\n}";
-styleInject(css_248z$e);
+var css_248z$f = ".size-small {\n  padding: 5px 16px;\n  border-radius: 4px;\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-normal {\n  padding: 8px 16px;\n  border-radius: 6px;\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: 10px 16px;\n  border-radius: 6px;\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: 6px;\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  box-shadow: 0 0 0 1px var(--p) inset;\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 0 1px var(--p) inset, 0 0 6px var(--p);\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: transparent;\n  color: var(--p);\n}\n.maru-button-primary-color-on-focus {\n  background-color: white;\n  color: #5c5c5c;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n  padding: 5px 7px 5px 6px !important;\n  gap: 4px;\n}\n.maru-button-primary-color-on-focus:hover {\n  background-color: var(--p-10);\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}\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  box-shadow: 0 0 0 1px #8c8c8c inset;\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: #e4e4e4;\n  color: #8c8c8c;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\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: transparent;\n  color: #8c8c8c;\n}\n.maru-button-secondary-color-on-focus {\n  background-color: white;\n  color: #5c5c5c;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n  padding: 5px 7px 5px 6px !important;\n  gap: 4px;\n}\n.maru-button-secondary-color-on-focus:hover {\n  background-color: #fafafa;\n}\n.maru-button-secondary-color-on-focus:focus-visible, .maru-button-secondary-color-on-focus:active {\n  background-color: #fafafa;\n  color: #8c8c8c;\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  box-shadow: 0 0 0 1px #58c5a6 inset;\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: transparent;\n  color: #58c5a6;\n}\n.maru-button-positive-color-on-focus {\n  background-color: white;\n  color: #5c5c5c;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n  padding: 5px 7px 5px 6px !important;\n  gap: 4px;\n}\n.maru-button-positive-color-on-focus:hover {\n  background-color: #eef9f6;\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}\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: transparent;\n  color: #ffb020;\n}\n.maru-button-warning-color-on-focus {\n  background-color: white;\n  color: #5c5c5c;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n  padding: 5px 7px 5px 6px !important;\n  gap: 4px;\n}\n.maru-button-warning-color-on-focus:hover {\n  background-color: #fff7e9;\n}\n.maru-button-warning-color-on-focus:focus-visible, .maru-button-warning-color-on-focus:active {\n  background-color: #fff7e9;\n  color: #ffb020;\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  box-shadow: 0 0 0 1px #e53e3e inset;\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: transparent;\n  color: #e53e3e;\n}\n.maru-button-danger-color-on-focus {\n  background-color: white;\n  color: #5c5c5c;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n  padding: 5px 7px 5px 6px !important;\n  gap: 4px;\n}\n.maru-button-danger-color-on-focus:hover {\n  background-color: #fcecec;\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}\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  box-shadow: 0 0 0 1px #308acc inset;\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: transparent;\n  color: #308acc;\n}\n.maru-button-success-color-on-focus {\n  background-color: white;\n  color: #5c5c5c;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n  padding: 5px 7px 5px 6px !important;\n  gap: 4px;\n}\n.maru-button-success-color-on-focus:hover {\n  background-color: #eaf3fa;\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}\n\n.maru-button-with-start-icon.size-small,\n.maru-button-with-end-icon.size-small {\n  padding: 5px 12px;\n}\n.maru-button-with-start-icon.size-small.maru-button-secondary-outline,\n.maru-button-with-end-icon.size-small.maru-button-secondary-outline {\n  background-color: white;\n  color: #bdbdbd;\n  box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-button-with-start-icon.size-small.maru-button-secondary-outline:hover,\n.maru-button-with-end-icon.size-small.maru-button-secondary-outline:hover {\n  color: var(--p);\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-with-start-icon.size-small.maru-button-secondary-outline:focus-visible, .maru-button-with-start-icon.size-small.maru-button-secondary-outline:active,\n.maru-button-with-end-icon.size-small.maru-button-secondary-outline:focus-visible,\n.maru-button-with-end-icon.size-small.maru-button-secondary-outline: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-with-start-icon.size-normal,\n.maru-button-with-end-icon.size-normal {\n  padding: 8px 12px;\n}\n\n.maru-button-only-icon.size-normal {\n  padding: 0;\n  justify-content: center;\n  background-color: transparent;\n}\n.maru-button-only-icon.size-normal:hover, .maru-button-only-icon.size-normal:focus-visible, .maru-button-only-icon.size-normal:active {\n  box-shadow: none;\n  background-color: transparent;\n}";
+styleInject(css_248z$f);
 
 var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
@@ -3976,8 +4022,8 @@ function uuidv4(length) {
   }
 }
 
-var css_248z$d = ".maru-checkbox-wrapper {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  width: fit-content;\n}\n\n.maru-checkbox-wrapper-2px {\n  gap: 2px;\n}\n\n.maru-checkbox-wrapper-4px {\n  gap: 4px;\n}\n\n.maru-checkbox-wrapper-8px {\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$d);
+var css_248z$e = ".maru-checkbox-wrapper {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  width: fit-content;\n}\n\n.maru-checkbox-wrapper-2px {\n  gap: 2px;\n}\n\n.maru-checkbox-wrapper-4px {\n  gap: 4px;\n}\n\n.maru-checkbox-wrapper-8px {\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$e);
 
 var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b;
@@ -4042,8 +4088,8 @@ Checkbox.defaultProps = {
 };
 Checkbox.displayName = 'Checkbox';
 
-var css_248z$c = ".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-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}\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  gap: 2px;\n  padding: unset;\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  gap: 2px;\n  padding: unset;\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  gap: 2px;\n  padding: unset;\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  gap: 2px;\n  padding: unset;\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  gap: 2px;\n  padding: unset;\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  gap: 2px;\n  padding: unset;\n}";
-styleInject(css_248z$c);
+var css_248z$d = ".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-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}\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  gap: 2px;\n  padding: unset;\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  gap: 2px;\n  padding: unset;\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  gap: 2px;\n  padding: unset;\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  gap: 2px;\n  padding: unset;\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  gap: 2px;\n  padding: unset;\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  gap: 2px;\n  padding: unset;\n}";
+styleInject(css_248z$d);
 
 function Chip(_a) {
   var children = _a.children,
@@ -4066,8 +4112,8 @@ function Chip(_a) {
   }));
 }
 
-var css_248z$b = ".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-label label {\n  color: #5c5c5c;\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: 6px;\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$b);
+var css_248z$c = ".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-label label {\n  color: #5c5c5c;\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: 6px;\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$c);
 
 var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
   var errorMessage = _a.errorMessage,
@@ -4095,6 +4141,12 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
       setShowClearButton(false);
     };
   }, []);
+  // 초기화 버튼이 있었다가 렌더링에 의해 value에 빈값이 들어오는 경우 초기화 버튼이 그대로 있는 이슈 있었음 #244
+  useEffect(function () {
+    if (!props.value) {
+      setShowClearButton(false);
+    }
+  }, [props.value]);
   useEffect(function () {
     if (props.defaultValue) {
       setShowClearButton(!hiddenClearButton);
@@ -6017,8 +6069,8 @@ function CreatePortal(_a) {
   return (parentElement || styleRootElement) && /*#__PURE__*/ReactDOM__default.createPortal(children, parentElement ? parentElement.current : styleRootElement);
 }
 
-var css_248z$a = ".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: 4px;\n  background-color: white;\n  outline: none;\n  box-shadow: 0px 0px 4px #e4e4e4;\n}";
-styleInject(css_248z$a);
+var css_248z$b = ".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: 4px;\n  background-color: white;\n  outline: none;\n  box-shadow: 0px 0px 4px #e4e4e4;\n}";
+styleInject(css_248z$b);
 
 function Popover(_a) {
   var anchorEl = _a.anchorEl,
@@ -6106,8 +6158,8 @@ function Popover(_a) {
   }) : PopoverBody;
 }
 
-var css_248z$9 = ".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-wrapper-2px {\n  display: flex;\n  gap: 2px;\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-primary {\n  border: 2px solid var(--p);\n}\n.maru-radio-primary:hover::before, .maru-radio-primary:checked::before {\n  background-color: var(--p);\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$9);
+var css_248z$a = ".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-wrapper-2px {\n  display: flex;\n  gap: 2px;\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-primary {\n  border: 2px solid var(--p);\n}\n.maru-radio-primary:hover::before, .maru-radio-primary:checked::before {\n  background-color: var(--p);\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$a);
 
 var Radio = /*#__PURE__*/forwardRef(function (_a, ref) {
   var checked = _a.checked,
@@ -6119,19 +6171,20 @@ var Radio = /*#__PURE__*/forwardRef(function (_a, ref) {
     props = __rest(_a, ["checked", "color", "gap", "label"]);
   var hashId = uuidv4(4);
   var combineRef = useCombineRef(ref);
+  var inputId = props.id || "maru-radio-id-".concat(hashId);
   return jsxs("div", __assign({
     className: classNames("maru-radio-wrapper-".concat(gap), props.className)
   }, {
-    children: [jsx("input", __assign({
+    children: [jsx("input", __assign({}, props, {
       ref: combineRef,
-      id: "maru-radio-id-".concat(hashId),
+      id: inputId,
       type: "radio",
       checked: checked == null ? undefined : !!checked,
       className: classNames('maru-radio', {
         'maru-radio-primary': color === 'primary'
       })
-    }, props)), label && jsx("label", __assign({
-      htmlFor: "maru-radio-id-".concat(hashId),
+    })), label && jsx("label", __assign({
+      htmlFor: inputId,
       className: classNames('maru-radio-label', {
         'label-disabled': props.disabled
       })
@@ -6148,8 +6201,8 @@ Radio.defaultProps = {
 };
 Radio.displayName = 'Radio';
 
-var css_248z$8 = ".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$8);
+var css_248z$9 = ".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$9);
 
 function Toggle(_a) {
   var checked = _a.checked,
@@ -6235,8 +6288,8 @@ function Toggle(_a) {
   });
 }
 
-var css_248z$7 = ".maru-tooltip-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  padding: 6px;\n}\n\n.maru-tooltip {\n  z-index: 1612;\n  border-radius: 6px;\n  padding: 6px 10px 6px 12px;\n  display: none;\n  background-color: rgba(0, 0, 0, 0.8);\n}\n.maru-tooltip[data-show=true] {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-tooltip[data-show=false] {\n  display: none;\n}\n.maru-tooltip,\n.maru-tooltip span,\n.maru-tooltip p,\n.maru-tooltip pre {\n  color: white;\n  white-space: pre-wrap;\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  line-height: 140%;\n}";
-styleInject(css_248z$7);
+var css_248z$8 = ".maru-tooltip-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  padding: 6px;\n}\n\n.maru-tooltip {\n  z-index: 1612;\n  border-radius: 6px;\n  padding: 6px 10px 6px 12px;\n  display: none;\n  background-color: rgba(0, 0, 0, 0.8);\n}\n.maru-tooltip[data-show=true] {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-tooltip[data-show=false] {\n  display: none;\n}\n.maru-tooltip,\n.maru-tooltip span,\n.maru-tooltip p,\n.maru-tooltip pre {\n  color: white;\n  white-space: pre-wrap;\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  line-height: 140%;\n}";
+styleInject(css_248z$8);
 
 function Tooltip(_a) {
   var children = _a.children,
@@ -6318,6 +6371,75 @@ function Tooltip(_a) {
   }));
 }
 
+function Contents() {
+  return jsxs("div", __assign({
+    className: "maru-skeleton-contents"
+  }, {
+    children: [jsx("div", {
+      className: "maru-skeleton-contents-text"
+    }), jsx("div", {
+      className: "maru-skeleton-contents-description"
+    }), jsxs("div", __assign({
+      className: "maru-skeleton-contents-grid-container"
+    }, {
+      children: [jsx("div", {
+        className: "maru-skeleton-contents-grid"
+      }), jsx("div", {
+        className: "maru-skeleton-contents-grid"
+      })]
+    }))]
+  }));
+}
+
+var css_248z$7 = "@keyframes colorFade {\n  0%, 100% {\n    background-color: #f7f7f7;\n  }\n  50% {\n    background-color: #ececec;\n  }\n}\n.maru-skeleton {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  flex-direction: row;\n  background-color: #fafafa;\n}\n.maru-skeleton .maru-skeleton-side-bar {\n  width: 250px;\n  height: 100%;\n  border-radius: 0 20px 20px 0;\n  background-color: #fafafa;\n  box-shadow: 0 0 6px 0 #e4e4e4;\n  padding: 27px 24px 24px 24px;\n}\n.maru-skeleton .maru-skeleton-side-bar .maru-skeleton-logo-wrapper {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  flex-direction: row;\n  gap: 14px;\n}\n.maru-skeleton .maru-skeleton-side-bar .maru-skeleton-logo-wrapper .maru-skeleton-logo {\n  width: 38px;\n  height: 38px;\n  border-radius: 50%;\n  animation: colorFade 3s ease-in-out infinite;\n}\n.maru-skeleton .maru-skeleton-side-bar .maru-skeleton-logo-wrapper > div:last-child {\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  flex-direction: column;\n  gap: 5px;\n}\n.maru-skeleton .maru-skeleton-side-bar .maru-skeleton-logo-wrapper > div:last-child .maru-skeleton-sub-title {\n  width: 50px;\n  height: 10px;\n  border-radius: 10px;\n  animation: colorFade 3s ease-in-out infinite;\n}\n.maru-skeleton .maru-skeleton-side-bar .maru-skeleton-logo-wrapper > div:last-child .maru-skeleton-title {\n  width: 76px;\n  height: 15px;\n  border-radius: 10px;\n  animation: colorFade 3s ease-in-out infinite;\n}\n.maru-skeleton .maru-skeleton-menu-container {\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  flex-direction: column;\n  margin-top: 24px;\n}\n.maru-skeleton .maru-skeleton-menu-container .maru-skeleton-menu {\n  width: 140px;\n  height: 24px;\n  border-radius: 10px;\n  margin: 0 0 30px 11px;\n  animation: colorFade 3s ease-in-out infinite;\n}\n.maru-skeleton .maru-skeleton-menu-container .maru-skeleton-menu:first-child {\n  width: 202px;\n  height: 44px;\n  margin: 0 0 22px 0;\n}\n.maru-skeleton .maru-skeleton-right-side {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: flex-start;\n  align-items: stretch;\n  flex-direction: column;\n}\n.maru-skeleton .maru-skeleton-right-side #maru-skeleton-header {\n  width: 100%;\n  height: 90px;\n  box-shadow: 0 4px 6px -4px #e4e4e4;\n}\n.maru-skeleton .maru-skeleton-right-side #maru-skeleton-header.dense {\n  height: 60px;\n}\n.maru-skeleton .maru-skeleton-right-side .maru-skeleton-contents-container {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  flex-direction: row;\n  flex-wrap: wrap;\n}\n.maru-skeleton .maru-skeleton-right-side .maru-skeleton-contents-container .maru-skeleton-contents {\n  width: 576px;\n  height: 287px;\n  box-shadow: 0 0 6px 0 #e4e4e4;\n  margin: 77px 20px 20px 20px;\n  border-radius: 10px;\n  padding: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: flex-start;\n  flex-direction: column;\n}\n.maru-skeleton .maru-skeleton-right-side .maru-skeleton-contents-container .maru-skeleton-contents .maru-skeleton-contents-text {\n  width: 106px;\n  height: 22px;\n  border-radius: 10px;\n  animation: colorFade 3s ease-in-out infinite;\n  margin-bottom: 10px;\n}\n.maru-skeleton .maru-skeleton-right-side .maru-skeleton-contents-container .maru-skeleton-contents .maru-skeleton-contents-description {\n  width: 50px;\n  height: 18px;\n  border-radius: 10px;\n  animation: colorFade 3s ease-in-out infinite;\n}\n.maru-skeleton .maru-skeleton-right-side .maru-skeleton-contents-container .maru-skeleton-contents .maru-skeleton-contents-grid-container {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  flex-direction: row;\n  gap: 40px;\n  margin-top: 20px;\n}\n.maru-skeleton .maru-skeleton-right-side .maru-skeleton-contents-container .maru-skeleton-contents .maru-skeleton-contents-grid-container .maru-skeleton-contents-grid {\n  width: 203px;\n  height: 125px;\n  border-radius: 10px;\n  animation: colorFade 3s ease-in-out infinite;\n}";
+styleInject(css_248z$7);
+
+function Skeleton(_a) {
+  var _b = _a.variant,
+    variant = _b === void 0 ? 'frame' : _b;
+  return jsx(Fragment, {
+    children: variant === 'frame' && jsxs("div", __assign({
+      className: "maru-skeleton"
+    }, {
+      children: [jsxs("div", __assign({
+        className: "maru-skeleton-side-bar"
+      }, {
+        children: [jsxs("div", __assign({
+          className: "maru-skeleton-logo-wrapper"
+        }, {
+          children: [jsx("div", {
+            className: "maru-skeleton-logo"
+          }), jsxs("div", {
+            children: [jsx("div", {
+              className: "maru-skeleton-sub-title"
+            }), jsx("div", {
+              className: "maru-skeleton-title"
+            })]
+          })]
+        })), jsxs("div", __assign({
+          className: "maru-skeleton-menu-container"
+        }, {
+          children: [jsx("div", {
+            className: "maru-skeleton-menu"
+          }), jsx("div", {
+            className: "maru-skeleton-menu"
+          })]
+        }))]
+      })), jsxs("div", __assign({
+        className: "maru-skeleton-right-side"
+      }, {
+        children: [jsx("header", {
+          id: "maru-skeleton-header"
+        }), jsx("div", __assign({
+          className: "maru-skeleton-contents-container"
+        }, {
+          children: jsx(Contents, {})
+        }))]
+      }))]
+    }))
+  });
+}
+
 var reactIs = {exports: {}};
 
 var reactIs_production_min = {};
@@ -24546,52 +24668,54 @@ function Table(_a) {
 }
 
 function Details(_a) {
-  var details = _a.details,
-    isDetailsOpen = _a.isDetailsOpen,
-    handleToggleDetails = _a.handleToggleDetails;
-  if (!details) return null;
-  // 오류가 난 파일이 하나인 경우
-  if (details.length <= 1) {
-    return jsx("details", {
-      children: jsx("summary", {
-        children: jsx("p", {
-          children: details[0]
-        })
-      })
+  var details = _a.details;
+  var _b = useState(new Array(details === null || details === void 0 ? void 0 : details.length).fill(false)),
+    openStates = _b[0],
+    setOpenStates = _b[1];
+  var toggleDetail = function toggleDetail(index) {
+    setOpenStates(function (prev) {
+      var newState = __spreadArray([], prev, true);
+      newState[index] = !newState[index];
+      return newState;
     });
-  }
-  // 오류가 난 파일이 두 개 이상일 경우
-  return jsxs("details", {
-    children: [jsx("summary", __assign({
-      onClick: handleToggleDetails
-    }, {
-      children: jsxs("div", __assign({
-        className: "maru-toast-details-summary"
+  };
+  if (!details || details.length === 0) return null;
+  return jsx("div", __assign({
+    className: "maru-toast-details"
+  }, {
+    children: details.map(function (item, index) {
+      return jsxs("details", __assign({
+        onToggle: function onToggle() {
+          return toggleDetail(index);
+        }
       }, {
-        children: [jsx("p", {
-          children: details[0]
-        }), jsx("span", __assign({
-          className: "maru-toast-details-summary-icon"
-        }, {
-          children: jsx(Icon, {
-            name: isDetailsOpen ? ICONS.Up_s16 : ICONS.Down_s16
+        children: [jsx("summary", {
+          children: jsxs("div", __assign({
+            className: "maru-toast-details-summary"
+          }, {
+            children: [jsx("p", {
+              children: item.summary
+            }), jsx("span", __assign({
+              className: "maru-toast-details-summary-icon"
+            }, {
+              children: jsx(Icon, {
+                name: openStates[index] ? ICONS.Up_s16 : ICONS.Down_s16
+              })
+            }))]
+          }))
+        }), jsx("ul", {
+          children: item.subDetails.map(function (detail, idx) {
+            return jsx("li", {
+              children: detail
+            }, idx);
           })
-        }))]
-      }))
-    })), jsx("ul", {
-      children: details.slice(1).map(function (item, idx) {
-        return (
-          // eslint-disable-next-line react/no-array-index-key
-          jsx("li", {
-            children: item
-          }, idx)
-        );
-      })
-    })]
-  });
+        })]
+      }), index);
+    })
+  }));
 }
 
-var css_248z = ".maru-toast-style {\n  padding: 10px 10px 10px 12px;\n  border-radius: 6px;\n  background-color: #fff;\n  box-shadow: 0 0 6px 0 #bdbdbd;\n}\n.maru-toast-style div:first-child {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-toast-style .maru-toast-style-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  margin-right: 8px;\n  width: 24px;\n  height: 24px;\n}\n.maru-toast-style .maru-toast-style-content {\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  margin-right: 16px;\n}\n.maru-toast-style details {\n  background-color: #fafafa;\n  padding: 10px 10px 10px 14px;\n  margin-top: 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: 500;\n  color: #5c5c5c;\n}\n.maru-toast-style details summary {\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  flex-direction: row;\n  white-space: pre-wrap;\n}\n.maru-toast-style details summary > div:first-child {\n  position: relative;\n}\n.maru-toast-style details summary .maru-toast-details-summary {\n  cursor: pointer;\n}\n.maru-toast-style details summary .maru-toast-details-summary > p {\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-toast-style details summary .maru-toast-details-summary-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  position: absolute;\n  right: -25px;\n  bottom: 3px;\n}\n\n.maru-toast {\n  margin-top: 24px;\n  position: relative;\n  opacity: 0;\n  transform: translateY(100%);\n  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease-out;\n}\n.maru-toast.entered {\n  transform: translateY(0);\n  opacity: 1;\n}\n.maru-toast.fade-out {\n  opacity: 0;\n  transform: translateX(100%);\n}\n\n.maru-toaster {\n  position: fixed;\n  z-index: 6007;\n  right: 24px;\n  bottom: 24px;\n  transition: transform 0.5s ease-out;\n  display: flex;\n  flex-direction: column-reverse;\n  align-items: flex-end;\n}";
+var css_248z = ".maru-toast-style {\n  padding: 10px 10px 10px 12px;\n  border-radius: 6px;\n  background-color: #fff;\n  box-shadow: 0 0 6px 0 #bdbdbd;\n}\n.maru-toast-style div:first-child {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-toast-style .maru-toast-style-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  margin-right: 8px;\n  width: 24px;\n  height: 24px;\n}\n.maru-toast-style .maru-toast-style-content {\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  margin-right: 16px;\n}\n.maru-toast-style .maru-toast-details {\n  background-color: #fafafa;\n  padding: 10px 10px 10px 14px;\n  margin-top: 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: 500;\n  color: #5c5c5c;\n}\n.maru-toast-style .maru-toast-details summary {\n  margin-top: 6px;\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  flex-direction: row;\n  white-space: pre-wrap;\n}\n.maru-toast-style .maru-toast-details summary > div:first-child {\n  position: relative;\n}\n.maru-toast-style .maru-toast-details summary .maru-toast-details-summary {\n  cursor: pointer;\n}\n.maru-toast-style .maru-toast-details summary .maru-toast-details-summary > p {\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-toast-style .maru-toast-details summary .maru-toast-details-summary-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  position: absolute;\n  right: -25px;\n  bottom: 3px;\n}\n.maru-toast-style .maru-toast-details summary:first-child {\n  margin: 0;\n}\n.maru-toast-style .maru-toast-details li {\n  margin-left: 10px;\n}\n\n.maru-toast {\n  margin-top: 24px;\n  position: relative;\n  opacity: 0;\n  transform: translateY(100%);\n  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease-out;\n}\n.maru-toast.entered {\n  transform: translateY(0);\n  opacity: 1;\n}\n.maru-toast.fade-out {\n  opacity: 0;\n  transform: translateX(100%);\n}\n\n.maru-toaster {\n  position: fixed;\n  z-index: 6007;\n  right: 24px;\n  bottom: 24px;\n  transition: transform 0.5s ease-out;\n  display: flex;\n  flex-direction: column-reverse;\n  align-items: flex-end;\n}";
 styleInject(css_248z);
 
 function ToastStyle(_a) {
@@ -24601,17 +24725,11 @@ function ToastStyle(_a) {
     description = _a.description,
     details = _a.details,
     onClose = _a.onClose;
-  var _c = useState(false),
-    isDetailsOpen = _c[0],
-    setIsDetailsOpen = _c[1];
   var iconName = {
     success: ICONS.CheckCircleBg_s24,
     warning: ICONS.AlertTriangleBg_s24,
     danger: ICONS.XDiamondBg_s2415
   };
-  var handleDetailsToggle = function handleDetailsToggle() {
-    setIsDetailsOpen(!isDetailsOpen);
-  };
   var handleClose = function handleClose() {
     onClose();
   };
@@ -24641,9 +24759,7 @@ function ToastStyle(_a) {
         onClick: handleClose
       })]
     }), description, jsx(Details, {
-      details: details,
-      isDetailsOpen: isDetailsOpen,
-      handleToggleDetails: handleDetailsToggle
+      details: details
     })]
   }));
 }
@@ -24698,4 +24814,4 @@ function Toast(_a) {
   }));
 }
 
-export { Button, Calendar, Checkbox, Chip, Dropdown, ICONS, Icon, Input, Modal, Pagination, Popover, Radio, StyleProvider, Table, Toast, Toggle, Tooltip };
+export { Button, Calendar, Checkbox, Chip, Dropdown, ICONS, Icon, Input, Modal, Pagination, Popover, Radio, Skeleton, StyleProvider, Table, Toast, Toggle, Tooltip };

package/package.json

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