maru_design2 2.31.0 → 3.0.2

package/dist/index.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { useState, useMemo, forwardRef, useEffect, useRef, useCallback, createElement, Component, useLayoutEffect, createRef } from 'react';
+import React__default, { useMemo, useState, useEffect, forwardRef, useRef, useCallback, createElement, Component, useLayoutEffect, createRef, useId as useId$1, createContext, useContext } from 'react';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default, { findDOMNode } from 'react-dom';
 
@@ -122,13 +122,12 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$p = "* {\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$p);
+var css_248z$t = "* {\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$t);
 
-var css_248z$o = ".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* {\n  -webkit-font-smoothing: antialiased;\n}\n\n:root {\n  --primary: var(--p);\n  --primary-80: var(--p-80);\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  --primary-07: var(--p-07);\n  --primary-05-per: var(--p-05-per);\n  --primary-05: var(--p-05);\n}\n\n[data-theme=blue] {\n  --p: #308acc;\n  --p-80: #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-07: #f0f7fc;\n  --p-05-per: #308acc0d;\n  --p-05: #f5fafd;\n}\n\n[data-theme=green] {\n  --p: #096412;\n  --p-80: #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-07: #eef4ee;\n  --p-05-per: #0964120d;\n  --p-05: #f3f7f3;\n}\n\n[data-theme=navy] {\n  --p: #213a78;\n  --p-80: #213a78;\n  --p-50-per: #213a787f;\n  --p-50: #909cbb;\n  --p-20-per: #213a7833;\n  --p-20: #d3d8e4;\n  --p-10-per: #213a781a;\n  --p-10: #e9ebf1;\n  --p-07: #f0f3f9;\n  --p-05-per: #213a780d;\n  --p-05: #f4f5f8;\n}";
-styleInject(css_248z$o);
+var css_248z$s = ".scrollbar, * {\n  scrollbar-track-color: var(--maru-background-quaternary);\n  scrollbar-arrow-color: var(--maru-background-quaternary);\n  scrollbar-3dlight-color: var(--maru-background-quaternary);\n  scrollbar-highlight-color: var(--maru-background-quaternary);\n  scrollbar-shadow-color: var(--maru-background-quaternary);\n  scrollbar-face-color: var(--maru-background-quaternary);\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: var(--maru-background-quaternary);\n  border-radius: 16px;\n}\n\n.scrollbar::-webkit-scrollbar-button, ::-webkit-scrollbar-button {\n  display: none;\n}\n\n* {\n  -webkit-font-smoothing: antialiased;\n}\n\n:root {\n  --maru-white: #ffffff;\n  --maru-black-50: #fcfdfd;\n  --maru-black-100: #fafafa;\n  --maru-black-150: #f1f1f1;\n  --maru-black-200: #eaeaea;\n  --maru-black-250: #e1e1e1;\n  --maru-black-300: #cfcfcf;\n  --maru-black-350: #a9a9a9;\n  --maru-black-400: #828588;\n  --maru-black-500: #5c5c5c;\n  --maru-black-550: #3d3d3d;\n  --maru-black-600: #2c2c2c;\n  --maru-black-700: #262626;\n  --maru-black-800: #1f1f1f;\n  --maru-black-900: #0d0d0d;\n  --maru-gray-100: #f2f4f8;\n  --maru-gray-150: #d3d8dd;\n  --maru-gray-200: #c1c7cd;\n  --maru-gray-300: #a2a9b0;\n  --maru-gray-400: #878d96;\n  --maru-gray-500: #737a80;\n  --maru-gray-600: #4a4e52;\n  --maru-gray-700: #3d4145;\n  --maru-gray-800: #262626;\n  --maru-gray-900: #1f1f1f;\n  --maru-cool-gray-50: #f6f8f9;\n  --maru-cool-gray-100: #eff3f6;\n  --maru-cool-gray-200: rgba(41, 86, 152, 0.0784313725);\n  --maru-neutral-gray-100: rgba(72, 72, 72, 0.0705882353);\n  --maru-neutral-gray-200: #d5d5d5;\n  --maru-brand-50: #f0f6fb;\n  --maru-brand-100: #e7edf2;\n  --maru-brand-200: #dbe4ec;\n  --maru-brand-300: #b5c8d8;\n  --maru-brand-400: #0f4c81;\n  --maru-brand-500: #0e4474;\n  --maru-brand-600: #0c3d67;\n  --maru-brand-700: #0b3961;\n  --maru-brand-800: #092e4d;\n  --maru-brand-900: #07223a;\n  --maru-brand-1000: #051b2d;\n  --maru-blue-50: #f5f9fd;\n  --maru-blue-100: #eaf3fa;\n  --maru-blue-200: #d6e8f5;\n  --maru-blue-300: #97c5e5;\n  --maru-blue-400: #308acc;\n  --maru-blue-500: #2b7cb8;\n  --maru-blue-600: #266ea3;\n  --maru-blue-700: #246899;\n  --maru-blue-800: #1d537a;\n  --maru-blue-900: #163e5c;\n  --maru-blue-1000: #113047;\n  --maru-green-50: #ebfff7;\n  --maru-green-100: #e1fff3;\n  --maru-green-200: #bbf3e2;\n  --maru-green-300: #80d3bc;\n  --maru-green-400: #119d63;\n  --maru-green-500: #0f8d59;\n  --maru-green-600: #0e7e4f;\n  --maru-green-700: #0d764a;\n  --maru-green-800: #0a5e3b;\n  --maru-green-900: #08472d;\n  --maru-green-1000: #063723;\n  --maru-yellow-50: #fff7e9;\n  --maru-yellow-100: #fff3de;\n  --maru-yellow-200: #ffe7ba;\n  --maru-yellow-300: #ffd78f;\n  --maru-yellow-400: #ffb020;\n  --maru-yellow-500: #e69e1d;\n  --maru-yellow-600: #cc8d1a;\n  --maru-yellow-700: #bf8418;\n  --maru-yellow-800: #996a13;\n  --maru-yellow-900: #734f0e;\n  --maru-yellow-1000: #593e0b;\n  --maru-red-50: #fdf4f4;\n  --maru-red-100: #fbe8e8;\n  --maru-red-200: #f9dcdc;\n  --maru-red-300: #f3b7b7;\n  --maru-red-400: #d91616;\n  --maru-red-500: #c31414;\n  --maru-red-600: #ae1212;\n  --maru-red-700: #a31111;\n  --maru-red-800: #820d0d;\n  --maru-red-900: #620a0a;\n  --maru-red-1000: #4c0808;\n  --maru-text-primary: var(--maru-black-600);\n  --maru-text-secondary: var(--maru-black-500);\n  --maru-text-support: var(--maru-black-400);\n  --maru-text-tertiary: var(--maru-black-400);\n  --maru-text-disabled: var(--maru-black-350);\n  --maru-text-white: var(--maru-white);\n  --maru-text-success-primary: var(--maru-green-400);\n  --maru-text-warning-primary: var(--maru-yellow-400);\n  --maru-text-info-primary: var(--maru-blue-400);\n  --maru-text-positive-primary: var(--maru-green-400);\n  --maru-text-error-primary: var(--maru-red-400);\n  --maru-icon-primary: var(--maru-black-600);\n  --maru-icon-secondary: var(--maru-black-500);\n  --maru-icon-tertiary: var(--maru-black-400);\n  --maru-icon-quaternary: var(--maru-black-350);\n  --maru-icon-error-primary: var(--maru-red-400);\n  --maru-icon-error-secondary: var(--maru-red-500);\n  --maru-icon-positive-primary: var(--maru-green-400);\n  --maru-icon-warning-primary: var(--maru-yellow-400);\n  --maru-icon-white: var(--maru-white);\n  --maru-border-primary: var(--maru-black-300);\n  --maru-border-secondary: var(--maru-black-250);\n  --maru-border-success-primary: var(--maru-green-400);\n  --maru-border-error-primary: var(--maru-red-500);\n  --maru-border-error-secondary: var(--maru-red-400);\n  --maru-background-primary: var(--maru-white);\n  --maru-background-primary-hover: var(--maru-black-150);\n  --maru-background-secondary: var(--maru-black-100);\n  --maru-background-secondary-hover: var(--maru-black-150);\n  --maru-background-tertiary: var(--maru-black-150);\n  --maru-background-quaternary: var(--maru-black-200);\n  --maru-background-disabled: var(--maru-black-300);\n  --maru-background-black: var(--maru-black-900);\n  --maru-background-popup-primary: rgba(255, 255, 255, 0.5019607843);\n  --maru-background-positive-solid-primary: var(--maru-green-400);\n  --maru-background-positive-solid-primary-hover: var(--maru-green-500);\n  --maru-background-positive-primary: var(--maru-white);\n  --maru-background-positive-primary-hover: var(--maru-green-100);\n  --maru-background-info-solid-primary: var(--maru-blue-400);\n  --maru-background-info-solid-primary-hover: var(--maru-blue-500);\n  --maru-background-info-secondary: var(--maru-white);\n  --maru-background-info-secondary-hover: var(--maru-blue-100);\n  --maru-background-warning-solid-primary: var(--maru-yellow-400);\n  --maru-background-warning-solid-primary-hover: var(--maru-yellow-500);\n  --maru-background-warning-primary: var(--maru-white);\n  --maru-background-warning-primary-hover: var(--maru-yellow-100);\n  --maru-background-error-solid-primary: var(--maru-red-400);\n  --maru-background-error-solid-primary-hover: var(--maru-red-500);\n  --maru-background-error-primary: var(--maru-white);\n  --maru-background-error-primary-hover: var(--maru-red-50);\n  --maru-badge-primary: var(--maru-black-100);\n  --maru-badge-primary-hover: var(--maru-black-150);\n  --maru-badge-secondary: var(--maru-black-150);\n  --maru-badge-secondary-hover: var(--maru-black-200);\n  --maru-badge-positive-primary: var(--maru-green-50);\n  --maru-badge-error-primary: var(--maru-red-100);\n  --maru-badge-info-primary: var(--maru-blue-100);\n  --maru-component-white: var(--maru-white);\n  --maru-component-error: var(--maru-red-400);\n  --maru-feature-highlight: var(--maru-yellow-400);\n  --maru-feature-tooltip: var(--maru-black-900);\n  --maru-shadow-search-bar: rgba(78, 78, 78, 0.0509803922);\n  --maru-shadow-default: var(--maru-black-350);\n  --maru-overlay-scrim: var(--maru-background-popup-primary);\n  --maru-skeleton-base: #f7f7f7;\n  --maru-skeleton-highlight: #ececec;\n  --maru-status-learning: #c1d881;\n  --maru-status-learning-background: #f3f7e6;\n  --maru-status-distribution: #91b9dd;\n  --maru-status-distribution-background: #e9f1f8;\n  --maru-status-service: #c591dd;\n  --maru-status-service-background: #f3e9f8;\n  --maru-status-title: #2754aa;\n  --maru-info-50-per: rgba(48, 138, 204, 0.5);\n  --maru-info-20-per: rgba(48, 138, 204, 0.2);\n  --maru-info-10-per: rgba(48, 138, 204, 0.1);\n  --maru-warning-50-per: rgba(255, 176, 32, 0.5);\n  --maru-warning-20-per: rgba(255, 176, 32, 0.2);\n  --maru-warning-10-per: rgba(255, 176, 32, 0.1);\n  --maru-error-50-per: rgba(217, 22, 22, 0.5);\n  --maru-error-20-per: rgba(217, 22, 22, 0.2);\n  --maru-error-10-per: rgba(217, 22, 22, 0.1);\n  --maru-positive-50-per: rgba(17, 157, 99, 0.5);\n  --maru-positive-20-per: rgba(17, 157, 99, 0.2);\n  --maru-positive-10-per: rgba(17, 157, 99, 0.1);\n  --p: var(--maru-brand-400);\n  --p-80: var(--maru-brand-400);\n  --p-50-per: rgba(15, 76, 129, 0.5);\n  --p-50: var(--maru-brand-300);\n  --p-20-per: rgba(15, 76, 129, 0.2);\n  --p-20: var(--maru-brand-200);\n  --p-10-per: rgba(15, 76, 129, 0.1);\n  --p-10: var(--maru-brand-100);\n  --p-07: var(--maru-brand-50);\n  --p-05-per: rgba(15, 76, 129, 0.05);\n  --p-05: var(--maru-brand-50);\n  --maru-text-brand: var(--maru-brand-400);\n  --maru-text-brand-hover: var(--maru-brand-500);\n  --maru-icon-brand-primary: var(--maru-brand-400);\n  --maru-icon-brand-secondary: var(--maru-brand-500);\n  --maru-border-brand-primary: var(--maru-brand-400);\n  --maru-border-brand-secondary: var(--maru-brand-500);\n  --maru-border-brand-tertiary: var(--maru-brand-300);\n  --maru-background-brand-solid-primary: var(--maru-brand-400);\n  --maru-background-brand-solid-primary-hover: var(--maru-brand-500);\n  --maru-background-brand-solid-secondary: var(--maru-brand-600);\n  --maru-background-brand-primary: var(--maru-brand-100);\n  --maru-background-brand-tertiary-hover: var(--maru-brand-50);\n  --maru-badge-brand-primary: var(--maru-brand-50);\n  --maru-component-brand-primary: var(--maru-brand-400);\n  --maru-shadow-brand: var(--maru-brand-100);\n  --primary: var(--p);\n  --primary-80: var(--p-80);\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  --primary-07: var(--p-07);\n  --primary-05-per: var(--p-05-per);\n  --primary-05: var(--p-05);\n}\n\n[data-theme=blue] {\n  --p: var(--maru-blue-400);\n  --p-80: var(--maru-blue-400);\n  --p-50-per: rgba(48, 138, 204, 0.5);\n  --p-50: var(--maru-blue-300);\n  --p-20-per: rgba(48, 138, 204, 0.2);\n  --p-20: var(--maru-blue-200);\n  --p-10-per: rgba(48, 138, 204, 0.1);\n  --p-10: var(--maru-blue-100);\n  --p-07: var(--maru-blue-50);\n  --p-05-per: rgba(48, 138, 204, 0.05);\n  --p-05: var(--maru-blue-50);\n  --maru-text-brand: var(--maru-blue-400);\n  --maru-text-brand-hover: var(--maru-blue-500);\n  --maru-icon-brand-primary: var(--maru-blue-400);\n  --maru-icon-brand-secondary: var(--maru-blue-500);\n  --maru-border-brand-primary: var(--maru-blue-400);\n  --maru-border-brand-secondary: var(--maru-blue-500);\n  --maru-border-brand-tertiary: var(--maru-blue-300);\n  --maru-background-brand-solid-primary: var(--maru-blue-400);\n  --maru-background-brand-solid-primary-hover: var(--maru-blue-500);\n  --maru-background-brand-solid-secondary: var(--maru-blue-600);\n  --maru-background-brand-primary: var(--maru-blue-200);\n  --maru-background-brand-tertiary-hover: var(--maru-blue-50);\n  --maru-badge-brand-primary: var(--maru-blue-100);\n  --maru-component-brand-primary: var(--maru-blue-400);\n  --maru-shadow-brand: var(--maru-blue-200);\n}\n\n[data-theme=green] {\n  --p: #096412;\n  --p-80: #096412;\n  --p-50-per: rgba(9, 100, 18, 0.5019607843);\n  --p-50: #84b188;\n  --p-20-per: rgba(9, 100, 18, 0.2);\n  --p-20: #cee0d0;\n  --p-10-per: rgba(9, 100, 18, 0.1019607843);\n  --p-10: #e6f0e7;\n  --p-07: #eef4ee;\n  --p-05-per: rgba(9, 100, 18, 0.0509803922);\n  --p-05: #f3f7f3;\n  --maru-text-brand: #096412;\n  --maru-text-brand-hover: #096412;\n  --maru-icon-brand-primary: #096412;\n  --maru-icon-brand-secondary: #096412;\n  --maru-border-brand-primary: #096412;\n  --maru-border-brand-secondary: #096412;\n  --maru-border-brand-tertiary: #84b188;\n  --maru-background-brand-solid-primary: #096412;\n  --maru-background-brand-solid-primary-hover: #096412;\n  --maru-background-brand-solid-secondary: #096412;\n  --maru-background-brand-primary: #cee0d0;\n  --maru-background-brand-tertiary-hover: #f3f7f3;\n  --maru-badge-brand-primary: #e6f0e7;\n  --maru-component-brand-primary: #096412;\n  --maru-shadow-brand: #cee0d0;\n}\n\n[data-theme=navy] {\n  --p: var(--maru-brand-400);\n  --p-80: var(--maru-brand-400);\n  --p-50-per: rgba(15, 76, 129, 0.5);\n  --p-50: var(--maru-brand-300);\n  --p-20-per: rgba(15, 76, 129, 0.2);\n  --p-20: var(--maru-brand-200);\n  --p-10-per: rgba(15, 76, 129, 0.1);\n  --p-10: var(--maru-brand-100);\n  --p-07: var(--maru-brand-50);\n  --p-05-per: rgba(15, 76, 129, 0.05);\n  --p-05: var(--maru-brand-50);\n  --maru-text-brand: var(--maru-brand-400);\n  --maru-text-brand-hover: var(--maru-brand-500);\n  --maru-icon-brand-primary: var(--maru-brand-400);\n  --maru-icon-brand-secondary: var(--maru-brand-500);\n  --maru-border-brand-primary: var(--maru-brand-400);\n  --maru-border-brand-secondary: var(--maru-brand-500);\n  --maru-border-brand-tertiary: var(--maru-brand-300);\n  --maru-background-brand-solid-primary: var(--maru-brand-400);\n  --maru-background-brand-solid-primary-hover: var(--maru-brand-500);\n  --maru-background-brand-solid-secondary: var(--maru-brand-600);\n  --maru-background-brand-primary: var(--maru-brand-100);\n  --maru-background-brand-tertiary-hover: var(--maru-brand-50);\n  --maru-badge-brand-primary: var(--maru-brand-50);\n  --maru-component-brand-primary: var(--maru-brand-400);\n  --maru-shadow-brand: var(--maru-brand-100);\n}";
+styleInject(css_248z$s);
 
-// eslint-disable-next-line import/prefer-default-export
 function StyleProvider(_a) {
   var children = _a.children,
     theme = _a.theme;
@@ -140,6 +139,208 @@ function StyleProvider(_a) {
   }));
 }
 
+var PRIMITIVE_COLOR_TOKEN_VALUES = {
+  white: 'var(--maru-white)',
+  black50: 'var(--maru-black-50)',
+  black100: 'var(--maru-black-100)',
+  black150: 'var(--maru-black-150)',
+  black200: 'var(--maru-black-200)',
+  black250: 'var(--maru-black-250)',
+  black300: 'var(--maru-black-300)',
+  black350: 'var(--maru-black-350)',
+  black400: 'var(--maru-black-400)',
+  black500: 'var(--maru-black-500)',
+  black550: 'var(--maru-black-550)',
+  black600: 'var(--maru-black-600)',
+  black700: 'var(--maru-black-700)',
+  black800: 'var(--maru-black-800)',
+  black900: 'var(--maru-black-900)',
+  gray100: 'var(--maru-gray-100)',
+  gray150: 'var(--maru-gray-150)',
+  gray200: 'var(--maru-gray-200)',
+  gray300: 'var(--maru-gray-300)',
+  gray400: 'var(--maru-gray-400)',
+  gray500: 'var(--maru-gray-500)',
+  gray600: 'var(--maru-gray-600)',
+  gray700: 'var(--maru-gray-700)',
+  gray800: 'var(--maru-gray-800)',
+  gray900: 'var(--maru-gray-900)',
+  coolGray50: 'var(--maru-cool-gray-50)',
+  coolGray100: 'var(--maru-cool-gray-100)',
+  coolGray200: 'var(--maru-cool-gray-200)',
+  neutralGray100: 'var(--maru-neutral-gray-100)',
+  neutralGray200: 'var(--maru-neutral-gray-200)',
+  brand50: 'var(--maru-brand-50)',
+  brand100: 'var(--maru-brand-100)',
+  brand200: 'var(--maru-brand-200)',
+  brand300: 'var(--maru-brand-300)',
+  brand400: 'var(--maru-brand-400)',
+  brand500: 'var(--maru-brand-500)',
+  brand600: 'var(--maru-brand-600)',
+  brand700: 'var(--maru-brand-700)',
+  brand800: 'var(--maru-brand-800)',
+  brand900: 'var(--maru-brand-900)',
+  brand1000: 'var(--maru-brand-1000)',
+  blue50: 'var(--maru-blue-50)',
+  blue100: 'var(--maru-blue-100)',
+  blue200: 'var(--maru-blue-200)',
+  blue300: 'var(--maru-blue-300)',
+  blue400: 'var(--maru-blue-400)',
+  blue500: 'var(--maru-blue-500)',
+  blue600: 'var(--maru-blue-600)',
+  blue700: 'var(--maru-blue-700)',
+  blue800: 'var(--maru-blue-800)',
+  blue900: 'var(--maru-blue-900)',
+  blue1000: 'var(--maru-blue-1000)',
+  green50: 'var(--maru-green-50)',
+  green100: 'var(--maru-green-100)',
+  green200: 'var(--maru-green-200)',
+  green300: 'var(--maru-green-300)',
+  green400: 'var(--maru-green-400)',
+  green500: 'var(--maru-green-500)',
+  green600: 'var(--maru-green-600)',
+  green700: 'var(--maru-green-700)',
+  green800: 'var(--maru-green-800)',
+  green900: 'var(--maru-green-900)',
+  green1000: 'var(--maru-green-1000)',
+  yellow50: 'var(--maru-yellow-50)',
+  yellow100: 'var(--maru-yellow-100)',
+  yellow200: 'var(--maru-yellow-200)',
+  yellow300: 'var(--maru-yellow-300)',
+  yellow400: 'var(--maru-yellow-400)',
+  yellow500: 'var(--maru-yellow-500)',
+  yellow600: 'var(--maru-yellow-600)',
+  yellow700: 'var(--maru-yellow-700)',
+  yellow800: 'var(--maru-yellow-800)',
+  yellow900: 'var(--maru-yellow-900)',
+  yellow1000: 'var(--maru-yellow-1000)',
+  red50: 'var(--maru-red-50)',
+  red100: 'var(--maru-red-100)',
+  red200: 'var(--maru-red-200)',
+  red300: 'var(--maru-red-300)',
+  red400: 'var(--maru-red-400)',
+  red500: 'var(--maru-red-500)',
+  red600: 'var(--maru-red-600)',
+  red700: 'var(--maru-red-700)',
+  red800: 'var(--maru-red-800)',
+  red900: 'var(--maru-red-900)',
+  red1000: 'var(--maru-red-1000)'
+};
+var SEMANTIC_COLOR_TOKEN_VALUES = {
+  textPrimary: 'var(--maru-text-primary)',
+  textSecondary: 'var(--maru-text-secondary)',
+  textSupport: 'var(--maru-text-support)',
+  textTertiary: 'var(--maru-text-tertiary)',
+  textDisabled: 'var(--maru-text-disabled)',
+  textWhite: 'var(--maru-text-white)',
+  textBrand: 'var(--maru-text-brand)',
+  textBrandHover: 'var(--maru-text-brand-hover)',
+  textSuccessPrimary: 'var(--maru-text-success-primary)',
+  textWarningPrimary: 'var(--maru-text-warning-primary)',
+  textInfoPrimary: 'var(--maru-text-info-primary)',
+  textPositivePrimary: 'var(--maru-text-positive-primary)',
+  textErrorPrimary: 'var(--maru-text-error-primary)',
+  iconPrimary: 'var(--maru-icon-primary)',
+  iconSecondary: 'var(--maru-icon-secondary)',
+  iconTertiary: 'var(--maru-icon-tertiary)',
+  iconQuaternary: 'var(--maru-icon-quaternary)',
+  iconBrandPrimary: 'var(--maru-icon-brand-primary)',
+  iconBrandSecondary: 'var(--maru-icon-brand-secondary)',
+  iconErrorPrimary: 'var(--maru-icon-error-primary)',
+  iconErrorSecondary: 'var(--maru-icon-error-secondary)',
+  iconPositivePrimary: 'var(--maru-icon-positive-primary)',
+  iconWarningPrimary: 'var(--maru-icon-warning-primary)',
+  iconWhite: 'var(--maru-icon-white)',
+  borderPrimary: 'var(--maru-border-primary)',
+  borderSecondary: 'var(--maru-border-secondary)',
+  borderSuccessPrimary: 'var(--maru-border-success-primary)',
+  borderBrandPrimary: 'var(--maru-border-brand-primary)',
+  borderBrandSecondary: 'var(--maru-border-brand-secondary)',
+  borderBrandTertiary: 'var(--maru-border-brand-tertiary)',
+  borderErrorPrimary: 'var(--maru-border-error-primary)',
+  borderErrorSecondary: 'var(--maru-border-error-secondary)',
+  backgroundPrimary: 'var(--maru-background-primary)',
+  backgroundPrimaryHover: 'var(--maru-background-primary-hover)',
+  backgroundSecondary: 'var(--maru-background-secondary)',
+  backgroundSecondaryHover: 'var(--maru-background-secondary-hover)',
+  backgroundTertiary: 'var(--maru-background-tertiary)',
+  backgroundQuaternary: 'var(--maru-background-quaternary)',
+  backgroundDisabled: 'var(--maru-background-disabled)',
+  backgroundBlack: 'var(--maru-background-black)',
+  backgroundPopupPrimary: 'var(--maru-background-popup-primary)',
+  backgroundBrandSolidPrimary: 'var(--maru-background-brand-solid-primary)',
+  backgroundBrandSolidPrimaryHover: 'var(--maru-background-brand-solid-primary-hover)',
+  backgroundBrandSolidSecondary: 'var(--maru-background-brand-solid-secondary)',
+  backgroundBrandPrimary: 'var(--maru-background-brand-primary)',
+  backgroundBrandTertiaryHover: 'var(--maru-background-brand-tertiary-hover)',
+  backgroundPositiveSolidPrimary: 'var(--maru-background-positive-solid-primary)',
+  backgroundPositiveSolidPrimaryHover: 'var(--maru-background-positive-solid-primary-hover)',
+  backgroundPositivePrimary: 'var(--maru-background-positive-primary)',
+  backgroundPositivePrimaryHover: 'var(--maru-background-positive-primary-hover)',
+  backgroundInfoSolidPrimary: 'var(--maru-background-info-solid-primary)',
+  backgroundInfoSolidPrimaryHover: 'var(--maru-background-info-solid-primary-hover)',
+  backgroundInfoSecondary: 'var(--maru-background-info-secondary)',
+  backgroundInfoSecondaryHover: 'var(--maru-background-info-secondary-hover)',
+  backgroundWarningSolidPrimary: 'var(--maru-background-warning-solid-primary)',
+  backgroundWarningSolidPrimaryHover: 'var(--maru-background-warning-solid-primary-hover)',
+  backgroundWarningPrimary: 'var(--maru-background-warning-primary)',
+  backgroundWarningPrimaryHover: 'var(--maru-background-warning-primary-hover)',
+  backgroundErrorSolidPrimary: 'var(--maru-background-error-solid-primary)',
+  backgroundErrorSolidPrimaryHover: 'var(--maru-background-error-solid-primary-hover)',
+  backgroundErrorPrimary: 'var(--maru-background-error-primary)',
+  backgroundErrorPrimaryHover: 'var(--maru-background-error-primary-hover)',
+  badgePrimary: 'var(--maru-badge-primary)',
+  badgePrimaryHover: 'var(--maru-badge-primary-hover)',
+  badgeSecondary: 'var(--maru-badge-secondary)',
+  badgeSecondaryHover: 'var(--maru-badge-secondary-hover)',
+  badgePositivePrimary: 'var(--maru-badge-positive-primary)',
+  badgeErrorPrimary: 'var(--maru-badge-error-primary)',
+  badgeBrandPrimary: 'var(--maru-badge-brand-primary)',
+  badgeInfoPrimary: 'var(--maru-badge-info-primary)',
+  componentBrandPrimary: 'var(--maru-component-brand-primary)',
+  componentWhite: 'var(--maru-component-white)',
+  componentError: 'var(--maru-component-error)',
+  featureHighlight: 'var(--maru-feature-highlight)',
+  featureTooltip: 'var(--maru-feature-tooltip)',
+  shadowBrand: 'var(--maru-shadow-brand)',
+  shadowSearchBar: 'var(--maru-shadow-search-bar)',
+  shadowDefault: 'var(--maru-shadow-default)',
+  overlayScrim: 'var(--maru-overlay-scrim)',
+  skeletonBase: 'var(--maru-skeleton-base)',
+  skeletonHighlight: 'var(--maru-skeleton-highlight)',
+  statusLearning: 'var(--maru-status-learning)',
+  statusLearningBackground: 'var(--maru-status-learning-background)',
+  statusDistribution: 'var(--maru-status-distribution)',
+  statusDistributionBackground: 'var(--maru-status-distribution-background)',
+  statusService: 'var(--maru-status-service)',
+  statusServiceBackground: 'var(--maru-status-service-background)',
+  statusTitle: 'var(--maru-status-title)'
+};
+var COLOR_TOKEN_VALUES = __assign(__assign({}, PRIMITIVE_COLOR_TOKEN_VALUES), SEMANTIC_COLOR_TOKEN_VALUES);
+
+/**
+ * 컴포넌트 `color` prop에 사용하는 public 색상 키입니다.
+ * - `primary`: 현재 theme brand (`var(--p)`)
+ * - `secondary`: neutral 보조 (`var(--maru-icon-tertiary)`)
+ * - `positive`: info 역할 호환 (`var(--maru-background-info-solid-primary)`)
+ * - `warning`: warning 역할 (`var(--maru-background-warning-solid-primary)`)
+ * - `danger`: error 역할 (`var(--maru-background-error-solid-primary)`)
+ * - `success`: positive/success 역할 (`var(--maru-background-positive-solid-primary)`)
+ */
+var DColor = {
+  primary: 'var(--p)',
+  secondary: 'var(--maru-icon-tertiary)',
+  positive: 'var(--maru-background-info-solid-primary)',
+  warning: 'var(--maru-background-warning-solid-primary)',
+  danger: 'var(--maru-background-error-solid-primary)',
+  success: 'var(--maru-background-positive-solid-primary)'
+};
+var COLORS = Object.keys(DColor);
+/** 하위 호환을 위해 유지하는 semantic CSS 변수 상수입니다. */
+var SemanticColor = __assign(__assign({}, SEMANTIC_COLOR_TOKEN_VALUES), {
+  errorSecondary: 'var(--maru-red-500)'
+});
+
 var classnames = {exports: {}};
 
 /*!
@@ -219,37 +420,10 @@ var classnames = {exports: {}};
 
 var classNames = classnames.exports;
 
-function useButtonState() {
-  var _a = useState(false),
-    isHover = _a[0],
-    setIsHover = _a[1];
-  var _b = useState(false),
-    isActive = _b[0],
-    setIsActive = _b[1];
-  return [{
-    isHover: isHover,
-    isActive: isActive
-  }, {
-    setIsHover: setIsHover,
-    setIsActive: setIsActive
-  }];
-}
-
-var DColor = {
-  primary: 'var(--p)',
-  secondary: '#8c8c8c',
-  positive: '#308acc',
-  warning: '#ffb020',
-  danger: '#e53e3e',
-  success: '#32a483' // $success
-};
-
 var useColor = function useColor(color) {
-  // 'inherit'일 경우 currentColor 반환 (CSS에서 색상 제어)
-  // DColor에도 없고 color도 undefined면 $b400(=#8c8c8c) 리턴
   var keyColor = useMemo(function () {
     if (color === 'inherit') return 'currentColor';
-    return DColor[color] || color || '#8c8c8c';
+    return DColor[color] || COLOR_TOKEN_VALUES[color] || color || COLOR_TOKEN_VALUES.iconTertiary;
   }, [color]);
   return {
     keyColor: keyColor
@@ -396,6 +570,21 @@ var iconmap = {
     "circles": [],
     "rects": []
   },
+  "ArrowDown_s1215": {
+    "width": "12",
+    "height": "12",
+    "viewBox": "0 0 12 12",
+    "fill": "none",
+    "paths": [{
+      "d": "M6 2.5V9.5M9.5 6L6 9.5L2.5 6",
+      "stroke": "#A9A9A9",
+      "strokeWidth": "1.5",
+      "strokeLinecap": "round",
+      "strokeLinejoin": "round"
+    }],
+    "circles": [],
+    "rects": []
+  },
   "ArrowLeftIn_s1613": {
     "width": "16",
     "height": "16",
@@ -559,6 +748,21 @@ var iconmap = {
     "circles": [],
     "rects": []
   },
+  "ArrowUp_s1215": {
+    "width": "12",
+    "height": "12",
+    "viewBox": "0 0 12 12",
+    "fill": "none",
+    "paths": [{
+      "d": "M6 9.5V2.5M9.5 6L6 2.5L2.5 6",
+      "stroke": "#A9A9A9",
+      "strokeWidth": "1.5",
+      "strokeLinecap": "round",
+      "strokeLinejoin": "round"
+    }],
+    "circles": [],
+    "rects": []
+  },
   "Atom01_s1615": {
     "width": "16",
     "height": "16",
@@ -1526,6 +1730,21 @@ var iconmap = {
     "circles": [],
     "rects": []
   },
+  "ChevronSelectorVertical_s1215": {
+    "width": "12",
+    "height": "12",
+    "viewBox": "0 0 12 12",
+    "fill": "none",
+    "paths": [{
+      "d": "M8.5 4.5L6 2L3.5 4.5M8.5 7.5L6 10L3.5 7.5",
+      "stroke": "#A9A9A9",
+      "strokeWidth": "1.5",
+      "strokeLinecap": "round",
+      "strokeLinejoin": "round"
+    }],
+    "circles": [],
+    "rects": []
+  },
   "ChevronSelectorVertical_s2020": {
     "width": "20",
     "height": "20",
@@ -5475,6 +5694,18 @@ var iconmap = {
     "circles": [],
     "rects": []
   },
+  "Plus_s1210": {
+    "width": "12",
+    "height": "12",
+    "viewBox": "0 0 12 12",
+    "fill": "none",
+    "paths": [{
+      "d": "M5.5 5.5V2.5H6.5V5.5H9.5V6.5H6.5V9.5H5.5V6.5H2.5V5.5H5.5Z",
+      "fill": "#8C8C8C"
+    }],
+    "circles": [],
+    "rects": []
+  },
   "Plus_s1610": {
     "width": "16",
     "height": "16",
@@ -7056,6 +7287,7 @@ var iconmap = {
     "circles": [],
     "rects": [{
       "x": "10",
+      "y": "0",
       "width": "14",
       "height": "14",
       "rx": "2",
@@ -7217,6 +7449,7 @@ var ICONS = {
   "AlertTriangle_s1615": "AlertTriangle_s1615",
   "ArrowCross_s1613": "ArrowCross_s1613",
   "ArrowDownCircle_s1413": "ArrowDownCircle_s1413",
+  "ArrowDown_s1215": "ArrowDown_s1215",
   "ArrowLeftIn_s1613": "ArrowLeftIn_s1613",
   "ArrowLeftOut_s1810": "ArrowLeftOut_s1810",
   "ArrowLeft_s1613": "ArrowLeft_s1613",
@@ -7228,6 +7461,7 @@ var ICONS = {
   "ArrowRight_s1613": "ArrowRight_s1613",
   "ArrowRight_s1813": "ArrowRight_s1813",
   "ArrowRight_s2420": "ArrowRight_s2420",
+  "ArrowUp_s1215": "ArrowUp_s1215",
   "Atom01_s1615": "Atom01_s1615",
   "BackToLines_s1615": "BackToLines_s1615",
   "BagSetting_s2415": "BagSetting_s2415",
@@ -7290,6 +7524,7 @@ var ICONS = {
   "ChevronRight_s1615": "ChevronRight_s1615",
   "ChevronRight_s2020": "ChevronRight_s2020",
   "ChevronRight_s2420": "ChevronRight_s2420",
+  "ChevronSelectorVertical_s1215": "ChevronSelectorVertical_s1215",
   "ChevronSelectorVertical_s2020": "ChevronSelectorVertical_s2020",
   "ChevronUp_s1613": "ChevronUp_s1613",
   "ChevronUp_s1615": "ChevronUp_s1615",
@@ -7490,6 +7725,7 @@ var ICONS = {
   "PlusDownLines_s1413": "PlusDownLines_s1413",
   "PlusLines_s1210": "PlusLines_s1210",
   "PlusUpLines_s1413": "PlusUpLines_s1413",
+  "Plus_s1210": "Plus_s1210",
   "Plus_s1610": "Plus_s1610",
   "PreviewEye_s1413": "PreviewEye_s1413",
   "PreviewLine_s2013": "PreviewLine_s2013",
@@ -7698,109 +7934,187 @@ function Icon(_a) {
   }));
 }
 
-var css_248z$n = ".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: 400;\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: 400;\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: 400;\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  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));\n}\n.maru-button-primary-default:focus-visible, .maru-button-primary-default:active {\n  box-shadow: none;\n  background-image: 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  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));\n}\n.maru-button-primary-default-light:focus-visible, .maru-button-primary-default-light:active {\n  box-shadow: none;\n  background-image: 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  background-color: var(--p-07);\n  box-shadow: 0 0 0 1px var(--p) inset;\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: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-text:hover {\n  background-color: var(--p-07);\n}\n.maru-button-primary-text:focus-visible, .maru-button-primary-text:active {\n  background-color: var(--p-10);\n}\n.maru-button-primary-color-on-focus {\n  background-color: white;\n  color: #5c5c5c;\n  box-shadow: 0 0 0 1px #bdbdbd 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  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));\n}\n.maru-button-secondary-default:focus-visible, .maru-button-secondary-default:active {\n  box-shadow: none;\n  background-image: 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  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));\n}\n.maru-button-secondary-default:focus-visible, .maru-button-secondary-default:active {\n  box-shadow: none;\n  background-image: 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  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));\n}\n.maru-button-secondary-default-light:focus-visible, .maru-button-secondary-default-light:active {\n  box-shadow: none;\n  background-image: 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  background-color: #fafafa;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\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-text:hover {\n  background-color: #fafafa;\n}\n.maru-button-secondary-color-on-focus {\n  background-color: white;\n  color: #5c5c5c;\n  box-shadow: 0 0 0 1px #bdbdbd 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: #308acc;\n  color: white;\n}\n.maru-button-positive-default:hover {\n  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));\n}\n.maru-button-positive-default:focus-visible, .maru-button-positive-default:active {\n  box-shadow: none;\n  background-image: none;\n  background-color: #eaf3fa;\n  color: #308acc;\n  box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-button-positive-default-light {\n  background-color: #eaf3fa;\n  color: #308acc;\n}\n.maru-button-positive-default-light:hover {\n  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));\n}\n.maru-button-positive-default-light:focus-visible, .maru-button-positive-default-light:active {\n  box-shadow: none;\n  background-image: none;\n  background-color: #308acc;\n  color: white;\n}\n.maru-button-positive-outline {\n  background-color: white;\n  color: #308acc;\n  box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-button-positive-outline:hover {\n  background-color: #f0f3f9;\n  box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-button-positive-outline:focus-visible, .maru-button-positive-outline:active {\n  box-shadow: none;\n  background-color: #d6e8f5;\n  box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-button-positive-text {\n  background-color: transparent;\n  color: #308acc;\n}\n.maru-button-positive-text:hover {\n  background-color: #f0f3f9;\n}\n.maru-button-positive-color-on-focus {\n  background-color: white;\n  color: #5c5c5c;\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n  padding: 5px 7px 5px 6px !important;\n  gap: 4px;\n}\n.maru-button-positive-color-on-focus:hover {\n  background-color: #eaf3fa;\n}\n.maru-button-positive-color-on-focus:focus-visible, .maru-button-positive-color-on-focus:active {\n  background-color: #eaf3fa;\n  color: #308acc;\n}\n.maru-button-warning-default {\n  background-color: #ffb020;\n  color: white;\n}\n.maru-button-warning-default:hover {\n  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));\n}\n.maru-button-warning-default:focus-visible, .maru-button-warning-default:active {\n  box-shadow: none;\n  background-image: 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  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));\n}\n.maru-button-warning-default-light:focus-visible, .maru-button-warning-default-light:active {\n  box-shadow: none;\n  background-image: 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  background-color: #fff8e6;\n  box-shadow: 0 0 0 1px #ffb020 inset;\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-text:hover {\n  background-color: #fff8e6;\n}\n.maru-button-warning-color-on-focus {\n  background-color: white;\n  color: #5c5c5c;\n  box-shadow: 0 0 0 1px #bdbdbd 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  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));\n}\n.maru-button-danger-default:focus-visible, .maru-button-danger-default:active {\n  box-shadow: none;\n  background-image: 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  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));\n}\n.maru-button-danger-default-light:focus-visible, .maru-button-danger-default-light:active {\n  box-shadow: none;\n  background-image: 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  background-color: #fff5f5;\n  box-shadow: 0 0 0 1px #e53e3e inset;\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-text:hover {\n  background-color: #fff5f5;\n}\n.maru-button-danger-color-on-focus {\n  background-color: white;\n  color: #5c5c5c;\n  box-shadow: 0 0 0 1px #bdbdbd 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: #32a483;\n  color: white;\n}\n.maru-button-success-default:hover {\n  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));\n}\n.maru-button-success-default:focus-visible, .maru-button-success-default:active {\n  box-shadow: none;\n  background-image: none;\n  background-color: #eaf6f3;\n  color: #32a483;\n  box-shadow: 0 0 0 1px #32a483 inset;\n}\n.maru-button-success-default-light {\n  background-color: #eaf6f3;\n  color: #32a483;\n}\n.maru-button-success-default-light:hover {\n  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));\n}\n.maru-button-success-default-light:focus-visible, .maru-button-success-default-light:active {\n  box-shadow: none;\n  background-image: none;\n  background-color: #32a483;\n  color: white;\n}\n.maru-button-success-outline {\n  background-color: white;\n  color: #32a483;\n  box-shadow: 0 0 0 1px #32a483 inset;\n}\n.maru-button-success-outline:hover {\n  background-color: #e8f5f0;\n  box-shadow: 0 0 0 1px #32a483 inset;\n}\n.maru-button-success-outline:focus-visible, .maru-button-success-outline:active {\n  box-shadow: none;\n  background-color: #d6ede6;\n  box-shadow: 0 0 0 1px #32a483 inset;\n}\n.maru-button-success-text {\n  background-color: transparent;\n  color: #32a483;\n}\n.maru-button-success-text:hover {\n  background-color: #e8f5f0;\n}\n.maru-button-success-color-on-focus {\n  background-color: white;\n  color: #5c5c5c;\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n  padding: 5px 7px 5px 6px !important;\n  gap: 4px;\n}\n.maru-button-success-color-on-focus:hover {\n  background-color: #eaf6f3;\n}\n.maru-button-success-color-on-focus:focus-visible, .maru-button-success-color-on-focus:active {\n  background-color: #eaf6f3;\n  color: #32a483;\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  background-image: none;\n}";
-styleInject(css_248z$n);
+var css_248z$r = ".maru-badge {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 12px;\n  font-weight: 600;\n  box-sizing: border-box;\n  gap: 4px;\n  line-height: 16px;\n  white-space: nowrap;\n  border: 1px solid transparent;\n  border-radius: 6px;\n}\n.maru-badge-size-small {\n  width: fit-content;\n  height: 22px;\n  padding: 0 8px;\n}\n.maru-badge-size-normal {\n  width: fit-content;\n  height: 24px;\n  padding: 0 10px;\n}\n.maru-badge-size-large {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 500;\n  width: fit-content;\n  height: 28px;\n  padding: 0 12px;\n  line-height: 20px;\n}\n.maru-badge-primary {\n  color: var(--maru-text-brand);\n  background-color: var(--maru-badge-brand-primary);\n  border-color: var(--maru-border-brand-tertiary);\n}\n.maru-badge-secondary {\n  color: var(--maru-text-primary);\n  background-color: var(--maru-badge-primary);\n  border-color: var(--maru-border-secondary);\n}\n.maru-badge-danger {\n  color: var(--maru-text-error-primary);\n  background-color: var(--maru-badge-error-primary);\n  border-color: var(--maru-border-error-secondary);\n}\n.maru-badge-success {\n  color: var(--maru-text-positive-primary);\n  background-color: var(--maru-badge-positive-primary);\n  border-color: var(--maru-border-success-primary);\n}\n.maru-badge-positive {\n  color: var(--maru-text-info-primary);\n  background-color: var(--maru-badge-info-primary);\n  border-color: var(--maru-text-info-primary);\n}\n.maru-badge-outlined {\n  background-color: transparent;\n}\n.maru-badge.maru-badge-with-leading-icon.maru-badge-size-small {\n  padding-left: 6px;\n}\n.maru-badge.maru-badge-with-leading-icon.maru-badge-size-normal {\n  padding-left: 8px;\n}\n.maru-badge.maru-badge-with-leading-icon.maru-badge-size-large {\n  padding-left: 10px;\n}\n.maru-badge.maru-badge-with-trailing-icon.maru-badge-size-small {\n  padding-right: 6px;\n}\n.maru-badge.maru-badge-with-trailing-icon.maru-badge-size-normal {\n  padding-right: 8px;\n}\n.maru-badge.maru-badge-with-trailing-icon.maru-badge-size-large {\n  padding-right: 10px;\n}\n.maru-badge.maru-badge-with-dot {\n  gap: 6px;\n}\n.maru-badge .maru-badge-dot {\n  width: 8px;\n  height: 8px;\n  flex-shrink: 0;\n  background-color: currentColor;\n  border-radius: 50%;\n}\n.maru-badge .maru-badge-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  width: 12px;\n  height: 12px;\n  flex-shrink: 0;\n  overflow: hidden;\n  line-height: 0;\n}\n.maru-badge .maru-badge-icon svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.maru-badge.maru-badge-only-icon {\n  justify-content: center;\n  align-items: center;\n  flex-shrink: 0;\n  gap: 0;\n  padding: 0;\n  line-height: 0;\n}\n.maru-badge.maru-badge-only-icon.maru-badge-size-small {\n  width: 22px;\n  min-width: 22px;\n}\n.maru-badge.maru-badge-only-icon.maru-badge-size-normal {\n  width: 24px;\n  min-width: 24px;\n}\n.maru-badge.maru-badge-only-icon.maru-badge-size-large {\n  width: 28px;\n  min-width: 28px;\n}\n.maru-badge.maru-badge-disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n.maru-badge .maru-badge-x-icon-button {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  width: 12px;\n  height: 12px;\n  flex-shrink: 0;\n  padding: 0;\n  margin: 0;\n  color: inherit;\n  cursor: pointer;\n  background: transparent;\n  border: none;\n  line-height: 0;\n}\n.maru-badge .maru-badge-x-icon-button svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.maru-badge .maru-badge-x-icon-button:disabled {\n  cursor: default;\n}\n.maru-badge .maru-badge-x-icon-button:focus-visible {\n  outline: 1px solid currentColor;\n  outline-offset: 1px;\n  border-radius: 2px;\n}";
+styleInject(css_248z$r);
 
-var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
+function Badge(_a) {
+  var _b, _c;
   var children = _a.children,
-    _b = _a.color,
-    color = _b === void 0 ? 'primary' : _b,
-    _c = _a.size,
-    size = _c === void 0 ? 'normal' : _c,
-    _d = _a.variant,
-    variant = _d === void 0 ? 'default' : _d,
+    _d = _a.color,
+    color = _d === void 0 ? 'secondary' : _d,
+    _e = _a.variant,
+    variant = _e === void 0 ? 'default' : _e,
+    _f = _a.size,
+    size = _f === void 0 ? 'normal' : _f,
+    className = _a.className,
+    onXIconClick = _a.onXIconClick,
     startIcon = _a.startIcon,
     endIcon = _a.endIcon,
-    props = __rest(_a, ["children", "color", "size", "variant", "startIcon", "endIcon"]);
-  var _e = useButtonState(),
-    mouseState = _e[0],
-    _f = _e[1],
-    setIsHover = _f.setIsHover,
-    setIsActive = _f.setIsActive;
-  var getIconColor = function getIconColor(icon) {
-    var _a;
-    if (color === 'primary' && variant === 'default' && mouseState.isActive) {
-      return 'primary';
-    }
-    if (variant === 'default-light' && mouseState.isActive) {
-      return 'white';
+    customStartIcon = _a.customStartIcon,
+    customEndIcon = _a.customEndIcon,
+    _g = _a.showDot,
+    showDot = _g === void 0 ? false : _g,
+    _h = _a.disabled,
+    disabled = _h === void 0 ? false : _h,
+    _j = _a.closeButtonAriaLabel,
+    closeButtonAriaLabel = _j === void 0 ? '배지 닫기' : _j;
+  var hasChildren = children != null && children !== '';
+  var hasCustomStartIcon = customStartIcon != null;
+  var hasCustomEndIcon = customEndIcon != null;
+  var hasStartIcon = hasCustomStartIcon || !!startIcon;
+  var hasEndIcon = hasCustomEndIcon || !!endIcon;
+  var isOnlyIcon = !hasChildren && !showDot && (hasStartIcon && !hasEndIcon || !hasStartIcon && hasEndIcon) && !onXIconClick;
+  var startIconContent = customStartIcon;
+  if (!hasCustomStartIcon && startIcon) {
+    startIconContent = jsx(Icon, {
+      name: startIcon.name,
+      color: (_b = startIcon.color) !== null && _b !== void 0 ? _b : 'inherit',
+      hoverColor: startIcon.hoverColor
+    });
+  }
+  var endIconContent = customEndIcon;
+  if (!hasCustomEndIcon && endIcon) {
+    endIconContent = jsx(Icon, {
+      name: endIcon.name,
+      color: (_c = endIcon.color) !== null && _c !== void 0 ? _c : 'inherit',
+      hoverColor: endIcon.hoverColor
+    });
+  }
+  useEffect(function () {
+    if (process.env.NODE_ENV === 'production') {
+      return;
     }
-    if (color === 'primary' && !children) {
-      if (mouseState.isActive) {
-        return 'primary';
-      }
-      if (size === 'normal' && mouseState.isHover) {
-        return 'var(--p-50)';
-      }
+    if (hasCustomStartIcon && startIcon) {
+      console.warn('[Badge] customStartIcon과 startIcon을 함께 넘겼습니다. customStartIcon만 사용됩니다.');
     }
-    if (color === 'danger' && !children) {
-      if (mouseState.isActive) {
-        return 'danger';
-      }
-      if (size === 'normal' && mouseState.isHover) {
-        return '#F29E9E';
-      }
+    if (hasCustomEndIcon && endIcon) {
+      console.warn('[Badge] customEndIcon과 endIcon을 함께 넘겼습니다. customEndIcon만 사용됩니다.');
     }
-    if (children && variant === 'outline' && color === 'secondary' && size === 'small') {
-      if (mouseState.isHover || mouseState.isActive) {
-        return 'primary';
-      }
+    if (onXIconClick && (endIcon || hasCustomEndIcon)) {
+      console.warn('[Badge] onXIconClick이 있으면 endIcon/customEndIcon은 렌더되지 않고 X 버튼만 표시됩니다.');
     }
-    return (_a = icon === null || icon === void 0 ? void 0 : icon.color) !== null && _a !== void 0 ? _a : 'secondary';
-  };
+  }, [hasCustomStartIcon, startIcon, hasCustomEndIcon, endIcon, onXIconClick]);
+  return jsxs("div", __assign({
+    className: classNames('maru-badge', "maru-badge-".concat(color), "maru-badge-".concat(variant), "maru-badge-size-".concat(size), {
+      'maru-badge-only-icon': isOnlyIcon,
+      'maru-badge-disabled': disabled,
+      'maru-badge-with-leading-icon': hasStartIcon || showDot,
+      'maru-badge-with-trailing-icon': hasEndIcon && !onXIconClick || !!onXIconClick,
+      'maru-badge-with-dot': showDot
+    }, className),
+    "aria-disabled": disabled || undefined
+  }, {
+    children: [showDot && jsx("span", {
+      className: "maru-badge-dot",
+      "aria-hidden": true
+    }), hasStartIcon && jsx("span", __assign({
+      className: classNames('maru-badge-icon', {
+        'maru-badge-default-icon': !hasCustomStartIcon,
+        'maru-badge-custom-icon': hasCustomStartIcon
+      })
+    }, {
+      children: startIconContent
+    })), hasChildren && children, hasEndIcon && !onXIconClick && jsx("span", __assign({
+      className: classNames('maru-badge-icon', {
+        'maru-badge-default-icon': !hasCustomEndIcon,
+        'maru-badge-custom-icon': hasCustomEndIcon
+      })
+    }, {
+      children: endIconContent
+    })), onXIconClick && jsx("button", __assign({
+      type: "button",
+      className: "maru-badge-x-icon-button",
+      onClick: onXIconClick,
+      disabled: disabled,
+      "aria-label": closeButtonAriaLabel
+    }, {
+      children: jsx(Icon, {
+        name: ICONS.X_s1210,
+        color: "inherit"
+      })
+    }))]
+  }));
+}
+
+var css_248z$q = ".size-xxs {\n  padding: 2px 4px;\n  border-radius: 4px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 12px;\n  font-weight: 600;\n  min-height: 20px;\n}\n\n.size-xs {\n  padding: 4px 6px;\n  border-radius: 6px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 12px;\n  font-weight: 600;\n  min-height: 24px;\n}\n\n.size-small {\n  padding: 6px 10px;\n  border-radius: 8px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 600;\n  min-height: 32px;\n}\n\n.size-normal {\n  padding: 8px 10px;\n  border-radius: 8px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 600;\n  min-height: 36px;\n}\n\n.size-large {\n  padding: 9px 10px;\n  border-radius: 8px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 16px;\n  font-weight: 600;\n  min-height: 40px;\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.size-xxs, .maru-button.size-xs {\n  line-height: 16px;\n}\n.maru-button.size-small, .maru-button.size-normal {\n  line-height: 20px;\n}\n.maru-button.size-large {\n  line-height: 22px;\n}\n.maru-button .maru-button-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  line-height: 0;\n}\n.maru-button .maru-button-icon svg {\n  display: block;\n}\n.maru-button .maru-button-label {\n  line-height: inherit;\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: #ffffff;\n}\n.maru-button-primary-default:hover {\n  background-color: var(--maru-background-brand-solid-primary-hover);\n  background-image: none;\n}\n.maru-button-primary-default:focus-visible, .maru-button-primary-default:active {\n  box-shadow: none;\n  background-image: 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  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));\n}\n.maru-button-primary-default-light:focus-visible, .maru-button-primary-default-light:active {\n  box-shadow: none;\n  background-image: none;\n  background-color: var(--p);\n  color: #ffffff;\n}\n.maru-button-primary-outline {\n  background-color: var(--maru-background-primary);\n  color: var(--p);\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-outline:hover {\n  background-color: var(--p-07);\n  box-shadow: 0 0 0 1px var(--p) inset;\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: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-text:hover {\n  background-color: var(--p-07);\n}\n.maru-button-primary-text:focus-visible, .maru-button-primary-text:active {\n  background-color: var(--p-10);\n}\n.maru-button-primary-link {\n  background-color: var(--maru-background-primary);\n  color: var(--p);\n  border-radius: 4px;\n  padding: 0 2px;\n  min-height: 20px;\n  gap: 2px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 600;\n}\n.maru-button-primary-link:hover {\n  background-color: var(--p-07);\n}\n.maru-button-primary-link:focus-visible, .maru-button-primary-link:active {\n  background-color: var(--p-10);\n}\n.maru-button-primary-link-outline {\n  background-color: var(--maru-background-secondary);\n  color: var(--maru-text-secondary);\n  box-shadow: 0 0 0 1px var(--maru-border-primary) inset;\n  border-radius: 6px;\n  padding: 3px 4px;\n  min-height: 22px;\n  gap: 2px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 12px;\n  font-weight: 600;\n  background-color: var(--p-07);\n  color: var(--p);\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-link-outline:hover {\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-link-outline:focus-visible, .maru-button-primary-link-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-primary-round {\n  background-color: #ffffff;\n  color: var(--p);\n  border-radius: 999px;\n}\n.maru-button-primary-round:hover {\n  background-color: var(--p-07);\n}\n.maru-button-primary-round:focus-visible, .maru-button-primary-round:active {\n  background-color: var(--p-07);\n  color: var(--p);\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-color-on-focus {\n  background-color: #ffffff;\n  color: var(--maru-text-secondary);\n  box-shadow: 0 0 0 1px var(--maru-border-primary) 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: var(--maru-icon-tertiary);\n  color: #ffffff;\n  background-color: var(--maru-border-secondary);\n  color: var(--maru-icon-tertiary);\n}\n.maru-button-secondary-default:hover {\n  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));\n}\n.maru-button-secondary-default:focus-visible, .maru-button-secondary-default:active {\n  box-shadow: none;\n  background-image: none;\n  background-color: var(--maru-background-secondary);\n  color: var(--maru-icon-tertiary);\n  box-shadow: 0 0 0 1px var(--maru-icon-tertiary) inset;\n}\n.maru-button-secondary-default:hover {\n  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));\n}\n.maru-button-secondary-default:focus-visible, .maru-button-secondary-default:active {\n  box-shadow: none;\n  background-image: none;\n  background-color: var(--maru-border-secondary);\n  color: var(--maru-icon-tertiary);\n  box-shadow: 0 0 0 1px var(--maru-icon-tertiary) inset;\n}\n.maru-button-secondary-default-light {\n  background-color: var(--maru-background-secondary);\n  color: var(--maru-icon-tertiary);\n}\n.maru-button-secondary-default-light:hover {\n  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));\n}\n.maru-button-secondary-default-light:focus-visible, .maru-button-secondary-default-light:active {\n  box-shadow: none;\n  background-image: none;\n  background-color: var(--maru-icon-tertiary);\n  color: #ffffff;\n}\n.maru-button-secondary-outline {\n  background-color: var(--maru-background-primary);\n  color: var(--maru-text-primary);\n  box-shadow: 0 0 0 1px var(--maru-border-primary) inset;\n}\n.maru-button-secondary-outline:hover {\n  background-color: var(--maru-background-primary-hover);\n  color: var(--maru-text-primary);\n  box-shadow: 0 0 0 1px var(--maru-border-primary) inset;\n}\n.maru-button-secondary-outline:focus-visible, .maru-button-secondary-outline:active {\n  box-shadow: none;\n  background-color: var(--maru-border-secondary);\n  box-shadow: 0 0 0 1px var(--maru-icon-tertiary) inset;\n}\n.maru-button-secondary-text {\n  background-color: transparent;\n  color: var(--maru-icon-tertiary);\n}\n.maru-button-secondary-text:hover {\n  background-color: var(--maru-background-primary-hover);\n}\n.maru-button-secondary-link {\n  background-color: var(--maru-background-primary);\n  color: var(--maru-text-secondary);\n  border-radius: 4px;\n  padding: 0 2px;\n  min-height: 20px;\n  gap: 2px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 600;\n}\n.maru-button-secondary-link:hover {\n  background-color: var(--maru-background-primary-hover);\n}\n.maru-button-secondary-link:focus-visible, .maru-button-secondary-link:active {\n  background-color: var(--maru-background-primary-hover);\n}\n.maru-button-secondary-link-outline {\n  background-color: var(--maru-background-secondary);\n  color: var(--maru-text-secondary);\n  box-shadow: 0 0 0 1px var(--maru-border-primary) inset;\n  border-radius: 6px;\n  padding: 3px 4px;\n  min-height: 22px;\n  gap: 2px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 12px;\n  font-weight: 600;\n}\n.maru-button-secondary-link-outline:hover {\n  background-color: var(--maru-background-primary-hover);\n  color: var(--maru-text-secondary);\n  box-shadow: 0 0 0 1px var(--maru-border-primary) inset;\n}\n.maru-button-secondary-link-outline:focus-visible, .maru-button-secondary-link-outline:active {\n  background-color: var(--maru-border-secondary);\n  color: var(--maru-text-secondary);\n  box-shadow: 0 0 0 1px var(--maru-border-primary) inset;\n}\n.maru-button-secondary-round {\n  background-color: #ffffff;\n  color: var(--maru-text-primary);\n  border-radius: 999px;\n}\n.maru-button-secondary-round:hover {\n  background-color: var(--maru-background-primary-hover);\n}\n.maru-button-secondary-round:focus-visible, .maru-button-secondary-round:active {\n  background-color: var(--maru-background-primary-hover);\n  color: var(--maru-text-primary);\n  box-shadow: 0 0 0 1px var(--maru-border-primary) inset;\n}\n.maru-button-secondary-color-on-focus {\n  background-color: #ffffff;\n  color: var(--maru-text-secondary);\n  box-shadow: 0 0 0 1px var(--maru-border-primary) inset;\n  padding: 5px 7px 5px 6px !important;\n  gap: 4px;\n}\n.maru-button-secondary-color-on-focus:hover {\n  background-color: var(--maru-background-secondary);\n}\n.maru-button-secondary-color-on-focus:focus-visible, .maru-button-secondary-color-on-focus:active {\n  background-color: var(--maru-background-secondary);\n  color: var(--maru-icon-tertiary);\n}\n.maru-button-positive-default {\n  background-color: var(--maru-background-info-solid-primary);\n  color: #ffffff;\n}\n.maru-button-positive-default:hover {\n  background-color: var(--maru-background-info-solid-primary-hover);\n  background-image: none;\n}\n.maru-button-positive-default:focus-visible, .maru-button-positive-default:active {\n  box-shadow: none;\n  background-image: none;\n  background-color: var(--maru-blue-100);\n  color: var(--maru-background-info-solid-primary);\n  box-shadow: 0 0 0 1px var(--maru-background-info-solid-primary) inset;\n}\n.maru-button-positive-default-light {\n  background-color: var(--maru-blue-100);\n  color: var(--maru-background-info-solid-primary);\n}\n.maru-button-positive-default-light:hover {\n  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));\n}\n.maru-button-positive-default-light:focus-visible, .maru-button-positive-default-light:active {\n  box-shadow: none;\n  background-image: none;\n  background-color: var(--maru-background-info-solid-primary);\n  color: #ffffff;\n}\n.maru-button-positive-outline {\n  background-color: var(--maru-background-primary);\n  color: var(--maru-background-info-solid-primary);\n  box-shadow: 0 0 0 1px var(--maru-background-info-solid-primary) inset;\n}\n.maru-button-positive-outline:hover {\n  background-color: var(--maru-background-info-secondary-hover);\n  box-shadow: 0 0 0 1px var(--maru-background-info-solid-primary) inset;\n}\n.maru-button-positive-outline:focus-visible, .maru-button-positive-outline:active {\n  box-shadow: none;\n  background-color: var(--maru-blue-200);\n  box-shadow: 0 0 0 1px var(--maru-background-info-solid-primary) inset;\n}\n.maru-button-positive-text {\n  background-color: transparent;\n  color: var(--maru-background-info-solid-primary);\n}\n.maru-button-positive-text:hover {\n  background-color: var(--maru-background-info-secondary-hover);\n}\n.maru-button-positive-link {\n  background-color: var(--maru-background-primary);\n  color: var(--maru-background-info-solid-primary);\n  border-radius: 4px;\n  padding: 0 2px;\n  min-height: 20px;\n  gap: 2px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 600;\n}\n.maru-button-positive-link:hover {\n  background-color: var(--maru-background-info-secondary-hover);\n}\n.maru-button-positive-link:focus-visible, .maru-button-positive-link:active {\n  background-color: var(--maru-blue-100);\n}\n.maru-button-positive-link-outline {\n  background-color: var(--maru-background-secondary);\n  color: var(--maru-text-secondary);\n  box-shadow: 0 0 0 1px var(--maru-border-primary) inset;\n  border-radius: 6px;\n  padding: 3px 4px;\n  min-height: 22px;\n  gap: 2px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 12px;\n  font-weight: 600;\n  background-color: var(--maru-background-info-secondary-hover);\n  color: var(--maru-background-info-solid-primary);\n  box-shadow: 0 0 0 1px var(--maru-background-info-solid-primary) inset;\n}\n.maru-button-positive-link-outline:hover {\n  background-color: var(--maru-blue-100);\n  color: var(--maru-background-info-solid-primary);\n  box-shadow: 0 0 0 1px var(--maru-background-info-solid-primary) inset;\n}\n.maru-button-positive-link-outline:focus-visible, .maru-button-positive-link-outline:active {\n  background-color: var(--maru-blue-100);\n  color: var(--maru-background-info-solid-primary);\n  box-shadow: 0 0 0 1px var(--maru-background-info-solid-primary) inset;\n}\n.maru-button-positive-round {\n  background-color: #ffffff;\n  color: var(--maru-background-info-solid-primary);\n  border-radius: 999px;\n}\n.maru-button-positive-round:hover {\n  background-color: var(--maru-background-info-secondary-hover);\n}\n.maru-button-positive-round:focus-visible, .maru-button-positive-round:active {\n  background-color: var(--maru-background-info-secondary-hover);\n  color: var(--maru-background-info-solid-primary);\n  box-shadow: 0 0 0 1px var(--maru-background-info-solid-primary) inset;\n}\n.maru-button-positive-color-on-focus {\n  background-color: #ffffff;\n  color: var(--maru-text-secondary);\n  box-shadow: 0 0 0 1px var(--maru-border-primary) inset;\n  padding: 5px 7px 5px 6px !important;\n  gap: 4px;\n}\n.maru-button-positive-color-on-focus:hover {\n  background-color: var(--maru-blue-100);\n}\n.maru-button-positive-color-on-focus:focus-visible, .maru-button-positive-color-on-focus:active {\n  background-color: var(--maru-blue-100);\n  color: var(--maru-background-info-solid-primary);\n}\n.maru-button-warning-default {\n  background-color: var(--maru-background-warning-solid-primary);\n  color: #ffffff;\n}\n.maru-button-warning-default:hover {\n  background-color: var(--maru-background-warning-solid-primary-hover);\n  background-image: none;\n}\n.maru-button-warning-default:focus-visible, .maru-button-warning-default:active {\n  box-shadow: none;\n  background-image: none;\n  background-color: var(--maru-yellow-200);\n  color: var(--maru-background-warning-solid-primary);\n}\n.maru-button-warning-default-light {\n  background-color: var(--maru-yellow-100);\n  color: var(--maru-background-warning-solid-primary);\n}\n.maru-button-warning-default-light:hover {\n  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));\n}\n.maru-button-warning-default-light:focus-visible, .maru-button-warning-default-light:active {\n  box-shadow: none;\n  background-image: none;\n  background-color: var(--maru-background-warning-solid-primary);\n  color: #ffffff;\n}\n.maru-button-warning-outline {\n  background-color: var(--maru-background-primary);\n  color: var(--maru-background-warning-solid-primary);\n  box-shadow: 0 0 0 1px var(--maru-background-warning-solid-primary) inset;\n}\n.maru-button-warning-outline:hover {\n  background-color: var(--maru-background-warning-primary-hover);\n  box-shadow: 0 0 0 1px var(--maru-background-warning-solid-primary) inset;\n}\n.maru-button-warning-outline:focus-visible, .maru-button-warning-outline:active {\n  box-shadow: none;\n  background-color: var(--maru-yellow-200);\n  box-shadow: 0 0 0 1px var(--maru-background-warning-solid-primary) inset;\n}\n.maru-button-warning-text {\n  background-color: transparent;\n  color: var(--maru-background-warning-solid-primary);\n}\n.maru-button-warning-text:hover {\n  background-color: var(--maru-background-warning-primary-hover);\n}\n.maru-button-warning-link {\n  background-color: var(--maru-background-primary);\n  color: var(--maru-background-warning-solid-primary);\n  border-radius: 4px;\n  padding: 0 2px;\n  min-height: 20px;\n  gap: 2px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 600;\n}\n.maru-button-warning-link:hover {\n  background-color: var(--maru-background-warning-primary-hover);\n}\n.maru-button-warning-link:focus-visible, .maru-button-warning-link:active {\n  background-color: var(--maru-yellow-100);\n}\n.maru-button-warning-link-outline {\n  background-color: var(--maru-background-secondary);\n  color: var(--maru-text-secondary);\n  box-shadow: 0 0 0 1px var(--maru-border-primary) inset;\n  border-radius: 6px;\n  padding: 3px 4px;\n  min-height: 22px;\n  gap: 2px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 12px;\n  font-weight: 600;\n  background-color: var(--maru-background-warning-primary-hover);\n  color: var(--maru-background-warning-solid-primary);\n  box-shadow: 0 0 0 1px var(--maru-background-warning-solid-primary) inset;\n}\n.maru-button-warning-link-outline:hover {\n  background-color: var(--maru-yellow-100);\n  color: var(--maru-background-warning-solid-primary);\n  box-shadow: 0 0 0 1px var(--maru-background-warning-solid-primary) inset;\n}\n.maru-button-warning-link-outline:focus-visible, .maru-button-warning-link-outline:active {\n  background-color: var(--maru-yellow-100);\n  color: var(--maru-background-warning-solid-primary);\n  box-shadow: 0 0 0 1px var(--maru-background-warning-solid-primary) inset;\n}\n.maru-button-warning-round {\n  background-color: #ffffff;\n  color: var(--maru-background-warning-solid-primary);\n  border-radius: 999px;\n}\n.maru-button-warning-round:hover {\n  background-color: var(--maru-background-warning-primary-hover);\n}\n.maru-button-warning-round:focus-visible, .maru-button-warning-round:active {\n  background-color: var(--maru-background-warning-primary-hover);\n  color: var(--maru-background-warning-solid-primary);\n  box-shadow: 0 0 0 1px var(--maru-background-warning-solid-primary) inset;\n}\n.maru-button-warning-color-on-focus {\n  background-color: #ffffff;\n  color: var(--maru-text-secondary);\n  box-shadow: 0 0 0 1px var(--maru-border-primary) inset;\n  padding: 5px 7px 5px 6px !important;\n  gap: 4px;\n}\n.maru-button-warning-color-on-focus:hover {\n  background-color: var(--maru-yellow-100);\n}\n.maru-button-warning-color-on-focus:focus-visible, .maru-button-warning-color-on-focus:active {\n  background-color: var(--maru-yellow-100);\n  color: var(--maru-background-warning-solid-primary);\n}\n.maru-button-danger-default {\n  background-color: var(--maru-background-error-solid-primary);\n  color: #ffffff;\n}\n.maru-button-danger-default:hover {\n  background-color: var(--maru-background-error-solid-primary-hover);\n  background-image: none;\n}\n.maru-button-danger-default:focus-visible, .maru-button-danger-default:active {\n  box-shadow: none;\n  background-image: none;\n  background-color: var(--maru-red-100);\n  color: var(--maru-background-error-solid-primary);\n  box-shadow: 0 0 0 1px var(--maru-background-error-solid-primary) inset;\n}\n.maru-button-danger-default-light {\n  background-color: var(--maru-red-100);\n  color: var(--maru-background-error-solid-primary);\n}\n.maru-button-danger-default-light:hover {\n  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));\n}\n.maru-button-danger-default-light:focus-visible, .maru-button-danger-default-light:active {\n  box-shadow: none;\n  background-image: none;\n  background-color: var(--maru-background-error-solid-primary);\n  color: #ffffff;\n}\n.maru-button-danger-outline {\n  background-color: var(--maru-background-primary);\n  color: var(--maru-background-error-solid-primary);\n  box-shadow: 0 0 0 1px var(--maru-background-error-solid-primary) inset;\n}\n.maru-button-danger-outline:hover {\n  background-color: var(--maru-red-50);\n  box-shadow: 0 0 0 1px var(--maru-background-error-solid-primary) inset;\n}\n.maru-button-danger-outline:focus-visible, .maru-button-danger-outline:active {\n  box-shadow: none;\n  background-color: var(--maru-red-200);\n  box-shadow: 0 0 0 1px var(--maru-background-error-solid-primary) inset;\n}\n.maru-button-danger-text {\n  background-color: transparent;\n  color: var(--maru-background-error-solid-primary);\n}\n.maru-button-danger-text:hover {\n  background-color: var(--maru-red-50);\n}\n.maru-button-danger-link {\n  background-color: var(--maru-background-primary);\n  color: var(--maru-background-error-solid-primary);\n  border-radius: 4px;\n  padding: 0 2px;\n  min-height: 20px;\n  gap: 2px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 600;\n}\n.maru-button-danger-link:hover {\n  background-color: var(--maru-red-50);\n}\n.maru-button-danger-link:focus-visible, .maru-button-danger-link:active {\n  background-color: var(--maru-red-100);\n}\n.maru-button-danger-link-outline {\n  background-color: var(--maru-background-secondary);\n  color: var(--maru-text-secondary);\n  box-shadow: 0 0 0 1px var(--maru-border-primary) inset;\n  border-radius: 6px;\n  padding: 3px 4px;\n  min-height: 22px;\n  gap: 2px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 12px;\n  font-weight: 600;\n  background-color: var(--maru-red-50);\n  color: var(--maru-background-error-solid-primary);\n  box-shadow: 0 0 0 1px var(--maru-background-error-solid-primary) inset;\n}\n.maru-button-danger-link-outline:hover {\n  background-color: var(--maru-red-100);\n  color: var(--maru-background-error-solid-primary);\n  box-shadow: 0 0 0 1px var(--maru-background-error-solid-primary) inset;\n}\n.maru-button-danger-link-outline:focus-visible, .maru-button-danger-link-outline:active {\n  background-color: var(--maru-red-100);\n  color: var(--maru-background-error-solid-primary);\n  box-shadow: 0 0 0 1px var(--maru-background-error-solid-primary) inset;\n}\n.maru-button-danger-round {\n  background-color: #ffffff;\n  color: var(--maru-background-error-solid-primary);\n  border-radius: 999px;\n}\n.maru-button-danger-round:hover {\n  background-color: var(--maru-red-50);\n}\n.maru-button-danger-round:focus-visible, .maru-button-danger-round:active {\n  background-color: var(--maru-red-50);\n  color: var(--maru-background-error-solid-primary);\n  box-shadow: 0 0 0 1px var(--maru-background-error-solid-primary) inset;\n}\n.maru-button-danger-color-on-focus {\n  background-color: #ffffff;\n  color: var(--maru-text-secondary);\n  box-shadow: 0 0 0 1px var(--maru-border-primary) inset;\n  padding: 5px 7px 5px 6px !important;\n  gap: 4px;\n}\n.maru-button-danger-color-on-focus:hover {\n  background-color: var(--maru-red-100);\n}\n.maru-button-danger-color-on-focus:focus-visible, .maru-button-danger-color-on-focus:active {\n  background-color: var(--maru-red-100);\n  color: var(--maru-background-error-solid-primary);\n}\n.maru-button-success-default {\n  background-color: var(--maru-background-positive-solid-primary);\n  color: #ffffff;\n}\n.maru-button-success-default:hover {\n  background-color: var(--maru-background-positive-solid-primary-hover);\n  background-image: none;\n}\n.maru-button-success-default:focus-visible, .maru-button-success-default:active {\n  box-shadow: none;\n  background-image: none;\n  background-color: var(--maru-green-100);\n  color: var(--maru-background-positive-solid-primary);\n  box-shadow: 0 0 0 1px var(--maru-background-positive-solid-primary) inset;\n}\n.maru-button-success-default-light {\n  background-color: var(--maru-green-100);\n  color: var(--maru-background-positive-solid-primary);\n}\n.maru-button-success-default-light:hover {\n  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));\n}\n.maru-button-success-default-light:focus-visible, .maru-button-success-default-light:active {\n  box-shadow: none;\n  background-image: none;\n  background-color: var(--maru-background-positive-solid-primary);\n  color: #ffffff;\n}\n.maru-button-success-outline {\n  background-color: var(--maru-background-primary);\n  color: var(--maru-background-positive-solid-primary);\n  box-shadow: 0 0 0 1px var(--maru-background-positive-solid-primary) inset;\n}\n.maru-button-success-outline:hover {\n  background-color: var(--maru-background-positive-primary-hover);\n  box-shadow: 0 0 0 1px var(--maru-background-positive-solid-primary) inset;\n}\n.maru-button-success-outline:focus-visible, .maru-button-success-outline:active {\n  box-shadow: none;\n  background-color: var(--maru-green-200);\n  box-shadow: 0 0 0 1px var(--maru-background-positive-solid-primary) inset;\n}\n.maru-button-success-text {\n  background-color: transparent;\n  color: var(--maru-background-positive-solid-primary);\n}\n.maru-button-success-text:hover {\n  background-color: var(--maru-background-positive-primary-hover);\n}\n.maru-button-success-link {\n  background-color: var(--maru-background-primary);\n  color: var(--maru-background-positive-solid-primary);\n  border-radius: 4px;\n  padding: 0 2px;\n  min-height: 20px;\n  gap: 2px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 600;\n}\n.maru-button-success-link:hover {\n  background-color: var(--maru-background-positive-primary-hover);\n}\n.maru-button-success-link:focus-visible, .maru-button-success-link:active {\n  background-color: var(--maru-green-100);\n}\n.maru-button-success-link-outline {\n  background-color: var(--maru-background-secondary);\n  color: var(--maru-text-secondary);\n  box-shadow: 0 0 0 1px var(--maru-border-primary) inset;\n  border-radius: 6px;\n  padding: 3px 4px;\n  min-height: 22px;\n  gap: 2px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 12px;\n  font-weight: 600;\n  background-color: var(--maru-background-positive-primary-hover);\n  color: var(--maru-background-positive-solid-primary);\n  box-shadow: 0 0 0 1px var(--maru-background-positive-solid-primary) inset;\n}\n.maru-button-success-link-outline:hover {\n  background-color: var(--maru-green-100);\n  color: var(--maru-background-positive-solid-primary);\n  box-shadow: 0 0 0 1px var(--maru-background-positive-solid-primary) inset;\n}\n.maru-button-success-link-outline:focus-visible, .maru-button-success-link-outline:active {\n  background-color: var(--maru-green-100);\n  color: var(--maru-background-positive-solid-primary);\n  box-shadow: 0 0 0 1px var(--maru-background-positive-solid-primary) inset;\n}\n.maru-button-success-round {\n  background-color: #ffffff;\n  color: var(--maru-background-positive-solid-primary);\n  border-radius: 999px;\n}\n.maru-button-success-round:hover {\n  background-color: var(--maru-background-positive-primary-hover);\n}\n.maru-button-success-round:focus-visible, .maru-button-success-round:active {\n  background-color: var(--maru-background-positive-primary-hover);\n  color: var(--maru-background-positive-solid-primary);\n  box-shadow: 0 0 0 1px var(--maru-background-positive-solid-primary) inset;\n}\n.maru-button-success-color-on-focus {\n  background-color: #ffffff;\n  color: var(--maru-text-secondary);\n  box-shadow: 0 0 0 1px var(--maru-border-primary) inset;\n  padding: 5px 7px 5px 6px !important;\n  gap: 4px;\n}\n.maru-button-success-color-on-focus:hover {\n  background-color: var(--maru-green-100);\n}\n.maru-button-success-color-on-focus:focus-visible, .maru-button-success-color-on-focus:active {\n  background-color: var(--maru-green-100);\n  color: var(--maru-background-positive-solid-primary);\n}\n.maru-button.maru-button-primary-default:not(.maru-button-only-icon):disabled, .maru-button.maru-button-primary-outline:not(.maru-button-only-icon):disabled {\n  opacity: 0.6;\n}\n\n.maru-button-with-start-icon.size-small,\n.maru-button-with-end-icon.size-small {\n  padding: 6px 10px;\n}\n.maru-button-with-start-icon.size-small .maru-button-default-icon,\n.maru-button-with-end-icon.size-small .maru-button-default-icon {\n  width: 16px;\n  height: 16px;\n}\n.maru-button-with-start-icon.size-small .maru-button-default-icon svg,\n.maru-button-with-end-icon.size-small .maru-button-default-icon svg {\n  width: 16px;\n  height: 16px;\n}\n.maru-button-with-start-icon.size-normal,\n.maru-button-with-end-icon.size-normal {\n  padding: 8px 10px;\n}\n.maru-button-with-start-icon.size-normal .maru-button-default-icon,\n.maru-button-with-end-icon.size-normal .maru-button-default-icon {\n  width: 20px;\n  height: 20px;\n}\n.maru-button-with-start-icon.size-normal .maru-button-default-icon svg,\n.maru-button-with-end-icon.size-normal .maru-button-default-icon svg {\n  width: 20px;\n  height: 20px;\n}\n.maru-button-with-start-icon.size-large,\n.maru-button-with-end-icon.size-large {\n  padding: 9px 10px;\n}\n.maru-button-with-start-icon.size-large .maru-button-default-icon,\n.maru-button-with-end-icon.size-large .maru-button-default-icon {\n  width: 20px;\n  height: 20px;\n}\n.maru-button-with-start-icon.size-large .maru-button-default-icon svg,\n.maru-button-with-end-icon.size-large .maru-button-default-icon svg {\n  width: 20px;\n  height: 20px;\n}\n\n.maru-button-only-icon {\n  justify-content: center;\n  align-items: center;\n  gap: 0;\n  line-height: 0;\n  box-sizing: border-box;\n  flex-shrink: 0;\n}\n.maru-button-only-icon.size-xxs {\n  padding: 3px;\n  width: 20px;\n  height: 20px;\n  min-height: 20px;\n  border-radius: 4px;\n}\n.maru-button-only-icon.size-xxs .maru-button-default-icon svg {\n  width: 14px;\n  height: 14px;\n}\n.maru-button-only-icon.size-xs {\n  padding: 4px;\n  width: 24px;\n  height: 24px;\n  min-height: 24px;\n  border-radius: 6px;\n}\n.maru-button-only-icon.size-xs .maru-button-default-icon svg {\n  width: 16px;\n  height: 16px;\n}\n.maru-button-only-icon.size-small {\n  padding: 8px;\n  width: 32px;\n  height: 32px;\n  min-height: 32px;\n  border-radius: 8px;\n}\n.maru-button-only-icon.size-small .maru-button-default-icon svg {\n  width: 16px;\n  height: 16px;\n}\n.maru-button-only-icon.size-normal {\n  padding: 6px;\n  width: 32px;\n  height: 32px;\n  min-height: 32px;\n  border-radius: 8px;\n}\n.maru-button-only-icon.size-normal .maru-button-default-icon svg {\n  width: 20px;\n  height: 20px;\n}\n.maru-button-only-icon.size-large {\n  padding: 6px;\n  width: 36px;\n  height: 36px;\n  min-height: 36px;\n  border-radius: 8px;\n}\n.maru-button-only-icon.size-large .maru-button-default-icon svg {\n  width: 24px;\n  height: 24px;\n}\n.maru-button-only-icon.maru-button-primary-default, .maru-button-only-icon.maru-button-primary-default-light {\n  background-color: var(--maru-background-primary);\n  color: var(--p);\n  background-image: none;\n  box-shadow: none;\n  color: var(--maru-icon-tertiary);\n}\n.maru-button-only-icon.maru-button-primary-default:hover, .maru-button-only-icon.maru-button-primary-default-light:hover {\n  background-image: none;\n  background-color: var(--maru-background-primary-hover);\n}\n.maru-button-only-icon.maru-button-primary-default:focus-visible, .maru-button-only-icon.maru-button-primary-default:active, .maru-button-only-icon.maru-button-primary-default-light:focus-visible, .maru-button-only-icon.maru-button-primary-default-light:active {\n  box-shadow: none;\n  background-image: none;\n  background-color: var(--maru-background-primary-hover);\n}\n.maru-button-only-icon.maru-button-secondary-default, .maru-button-only-icon.maru-button-secondary-default-light {\n  background-color: var(--maru-background-primary);\n  color: var(--maru-icon-tertiary);\n  background-image: none;\n  box-shadow: none;\n}\n.maru-button-only-icon.maru-button-secondary-default:hover, .maru-button-only-icon.maru-button-secondary-default-light:hover {\n  background-image: none;\n  background-color: var(--maru-background-primary-hover);\n}\n.maru-button-only-icon.maru-button-secondary-default:focus-visible, .maru-button-only-icon.maru-button-secondary-default:active, .maru-button-only-icon.maru-button-secondary-default-light:focus-visible, .maru-button-only-icon.maru-button-secondary-default-light:active {\n  box-shadow: none;\n  background-image: none;\n  background-color: var(--maru-background-primary-hover);\n}\n.maru-button-only-icon.maru-button-positive-default, .maru-button-only-icon.maru-button-positive-default-light {\n  background-color: var(--maru-background-primary);\n  color: var(--maru-background-info-solid-primary);\n  background-image: none;\n  box-shadow: none;\n}\n.maru-button-only-icon.maru-button-positive-default:hover, .maru-button-only-icon.maru-button-positive-default-light:hover {\n  background-image: none;\n  background-color: var(--maru-background-info-secondary-hover);\n}\n.maru-button-only-icon.maru-button-positive-default:focus-visible, .maru-button-only-icon.maru-button-positive-default:active, .maru-button-only-icon.maru-button-positive-default-light:focus-visible, .maru-button-only-icon.maru-button-positive-default-light:active {\n  box-shadow: none;\n  background-image: none;\n  background-color: var(--maru-background-info-secondary-hover);\n}\n.maru-button-only-icon.maru-button-warning-default, .maru-button-only-icon.maru-button-warning-default-light {\n  background-color: var(--maru-background-primary);\n  color: var(--maru-background-warning-solid-primary);\n  background-image: none;\n  box-shadow: none;\n}\n.maru-button-only-icon.maru-button-warning-default:hover, .maru-button-only-icon.maru-button-warning-default-light:hover {\n  background-image: none;\n  background-color: var(--maru-background-warning-primary-hover);\n}\n.maru-button-only-icon.maru-button-warning-default:focus-visible, .maru-button-only-icon.maru-button-warning-default:active, .maru-button-only-icon.maru-button-warning-default-light:focus-visible, .maru-button-only-icon.maru-button-warning-default-light:active {\n  box-shadow: none;\n  background-image: none;\n  background-color: var(--maru-background-warning-primary-hover);\n}\n.maru-button-only-icon.maru-button-danger-default, .maru-button-only-icon.maru-button-danger-default-light {\n  background-color: var(--maru-background-primary);\n  color: var(--maru-background-error-solid-primary);\n  background-image: none;\n  box-shadow: none;\n}\n.maru-button-only-icon.maru-button-danger-default:hover, .maru-button-only-icon.maru-button-danger-default-light:hover {\n  background-image: none;\n  background-color: var(--maru-red-50);\n}\n.maru-button-only-icon.maru-button-danger-default:focus-visible, .maru-button-only-icon.maru-button-danger-default:active, .maru-button-only-icon.maru-button-danger-default-light:focus-visible, .maru-button-only-icon.maru-button-danger-default-light:active {\n  box-shadow: none;\n  background-image: none;\n  background-color: var(--maru-red-50);\n}\n.maru-button-only-icon.maru-button-success-default, .maru-button-only-icon.maru-button-success-default-light {\n  background-color: var(--maru-background-primary);\n  color: var(--maru-background-positive-solid-primary);\n  background-image: none;\n  box-shadow: none;\n}\n.maru-button-only-icon.maru-button-success-default:hover, .maru-button-only-icon.maru-button-success-default-light:hover {\n  background-image: none;\n  background-color: var(--maru-background-positive-primary-hover);\n}\n.maru-button-only-icon.maru-button-success-default:focus-visible, .maru-button-only-icon.maru-button-success-default:active, .maru-button-only-icon.maru-button-success-default-light:focus-visible, .maru-button-only-icon.maru-button-success-default-light:active {\n  box-shadow: none;\n  background-image: none;\n  background-color: var(--maru-background-positive-primary-hover);\n}";
+styleInject(css_248z$q);
+
+var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _b, _c;
+  var children = _a.children,
+    _d = _a.color,
+    color = _d === void 0 ? 'primary' : _d,
+    _e = _a.size,
+    size = _e === void 0 ? 'normal' : _e,
+    _f = _a.variant,
+    variant = _f === void 0 ? 'default' : _f,
+    startIcon = _a.startIcon,
+    endIcon = _a.endIcon,
+    customStartIcon = _a.customStartIcon,
+    customEndIcon = _a.customEndIcon,
+    props = __rest(_a, ["children", "color", "size", "variant", "startIcon", "endIcon", "customStartIcon", "customEndIcon"]);
+  var hasChildren = children != null;
+  var hasCustomStartIcon = customStartIcon != null;
+  var hasCustomEndIcon = customEndIcon != null;
+  var hasStartIcon = hasCustomStartIcon || !!startIcon;
+  var hasEndIcon = hasCustomEndIcon || !!endIcon;
+  var startIconContent = customStartIcon;
+  if (!hasCustomStartIcon && startIcon) {
+    startIconContent = jsx(Icon, {
+      name: startIcon.name,
+      color: (_b = startIcon.color) !== null && _b !== void 0 ? _b : 'inherit',
+      hoverColor: startIcon.hoverColor
+    });
+  }
+  var endIconContent = customEndIcon;
+  if (!hasCustomEndIcon && endIcon) {
+    endIconContent = jsx(Icon, {
+      name: endIcon.name,
+      color: (_c = endIcon.color) !== null && _c !== void 0 ? _c : 'inherit',
+      hoverColor: endIcon.hoverColor
+    });
+  }
   useEffect(function () {
-    var handleMouseUp = function handleMouseUp() {
-      setIsActive(false);
-    };
-    document.addEventListener('mouseup', handleMouseUp);
-    return function () {
-      document.removeEventListener('mouseup', handleMouseUp);
-    };
-  }, [setIsActive]);
+    if (process.env.NODE_ENV === 'production') {
+      return;
+    }
+    if (hasCustomStartIcon && startIcon) {
+      console.warn('[Button] customStartIcon과 startIcon을 함께 넘겼습니다. customStartIcon만 사용됩니다.');
+    }
+    if (hasCustomEndIcon && endIcon) {
+      console.warn('[Button] customEndIcon과 endIcon을 함께 넘겼습니다. customEndIcon만 사용됩니다.');
+    }
+  }, [hasCustomStartIcon, startIcon, hasCustomEndIcon, endIcon]);
   return jsxs("button", __assign({}, props, {
     ref: ref,
     type: "button",
     className: classNames('maru-button', "maru-button-".concat(color, "-").concat(variant), "size-".concat(size), {
-      'maru-button-with-start-icon': children && startIcon
+      'maru-button-with-start-icon': hasChildren && hasStartIcon
     }, {
-      'maru-button-with-end-icon': children && endIcon
+      'maru-button-with-end-icon': hasChildren && hasEndIcon
     }, {
-      'maru-button-only-icon': !children && (startIcon || endIcon)
-    }, props.className),
-    onMouseEnter: function onMouseEnter(event) {
-      if (props.onMouseEnter) {
-        props.onMouseEnter(event);
-      }
-      setIsHover(true);
-    },
-    onMouseLeave: function onMouseLeave(event) {
-      if (props.onMouseLeave) {
-        props.onMouseLeave(event);
-      }
-      setIsHover(false);
-    },
-    onMouseDown: function onMouseDown(event) {
-      if (props.onMouseDown) {
-        props.onMouseDown(event);
-      }
-      setIsActive(true);
-    },
-    onMouseUp: function onMouseUp(event) {
-      if (props.onMouseUp) {
-        props.onMouseUp(event);
-      }
-      setIsActive(false);
-    }
+      'maru-button-only-icon': !hasChildren && (hasStartIcon || hasEndIcon)
+    }, props.className)
   }, {
-    children: [startIcon && jsx(Icon, {
-      name: startIcon.name,
-      color: getIconColor(startIcon),
-      hoverColor: startIcon.hoverColor
-    }), children, endIcon && jsx(Icon, {
-      name: endIcon.name,
-      color: getIconColor(endIcon),
-      hoverColor: endIcon.hoverColor
-    })]
+    children: [hasStartIcon && jsx("span", __assign({
+      className: classNames('maru-button-icon', {
+        'maru-button-default-icon': !hasCustomStartIcon,
+        'maru-button-custom-icon': hasCustomStartIcon
+      })
+    }, {
+      children: startIconContent
+    })), hasChildren && jsx("span", __assign({
+      className: "maru-button-label"
+    }, {
+      children: children
+    })), hasEndIcon && jsx("span", __assign({
+      className: classNames('maru-button-icon', {
+        'maru-button-default-icon': !hasCustomEndIcon,
+        'maru-button-custom-icon': hasCustomEndIcon
+      })
+    }, {
+      children: endIconContent
+    }))]
   }));
 });
 Button.defaultProps = {
@@ -7809,37 +8123,12 @@ Button.defaultProps = {
   size: 'normal',
   variant: 'default',
   startIcon: undefined,
-  endIcon: undefined
+  endIcon: undefined,
+  customStartIcon: undefined,
+  customEndIcon: undefined
 };
 Button.displayName = 'Button';
 
-var css_248z$m = ".maru-badge {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  padding: 4px 8px;\n  border-radius: 4px;\n  gap: 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: 400;\n  border: 1px solid transparent;\n}\n.maru-badge-primary {\n  background-color: #fafafa;\n  color: var(--p);\n}\n.maru-badge-secondary {\n  background-color: #fafafa;\n  color: #8c8c8c;\n}\n.maru-badge-blue {\n  background-color: #eaf3fa;\n  color: #20649b;\n}\n.maru-badge-green {\n  background-color: #f3f7e6;\n  color: #65a30d;\n}\n.maru-badge-purple {\n  background-color: #faf5ff;\n  color: #7c3aed;\n}\n.maru-badge-outlined {\n  background-color: transparent;\n  border-color: currentColor;\n}\n.maru-badge-outlined.maru-badge-primary {\n  color: var(--p);\n  border-color: var(--p);\n}\n.maru-badge-outlined.maru-badge-secondary {\n  color: #737a80;\n  border-color: #737a80;\n}\n.maru-badge-outlined.maru-badge-blue {\n  color: #20649b;\n  border-color: #20649b;\n}\n.maru-badge-outlined.maru-badge-green {\n  color: #65a30d;\n  border-color: #65a30d;\n}\n.maru-badge-outlined.maru-badge-purple {\n  color: #7c3aed;\n  border-color: #7c3aed;\n}\n.maru-badge .maru-badge-x-icon-button {\n  color: inherit;\n  transform: translateY(-1px);\n}";
-styleInject(css_248z$m);
-
-function Badge(_a) {
-  var children = _a.children,
-    _b = _a.color,
-    color = _b === void 0 ? 'blue' : _b,
-    _c = _a.variant,
-    variant = _c === void 0 ? 'default' : _c,
-    className = _a.className,
-    onXIconClick = _a.onXIconClick;
-  return jsxs("div", __assign({
-    className: classNames('maru-badge', "maru-badge-".concat(color), "maru-badge-".concat(variant), className)
-  }, {
-    children: [children, onXIconClick && jsx(Button, {
-      className: "maru-badge-x-icon-button",
-      endIcon: {
-        name: ICONS.X_s1210,
-        color: 'inherit'
-      },
-      onClick: onXIconClick,
-      color: "secondary",
-      variant: "text"
-    })]
-  }));
-}
-
 /**
  * 파라미터로 들어온 ref들을 generic type을 가진 ref로 바꾸는 hook
  * ex. refs(주로 부모 refs)가 HTMLInputElement인 RefObject일 때,
@@ -7889,8 +8178,8 @@ function uuidv4(length) {
   }
 }
 
-var css_248z$l = ".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: 400;\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$l);
+var css_248z$p = ".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  flex-shrink: 0;\n}\n.maru-checkbox-inner-wrapper:has(.maru-checkbox:focus-visible) {\n  box-shadow: 0 0 0 2px var(--maru-background-primary), 0 0 0 4px #dbe4ec;\n}\n.maru-checkbox-inner-wrapper:has(.maru-checkbox:disabled) {\n  opacity: 0.5;\n}\n\n.maru-checkbox-inner-16 {\n  border-radius: 4px;\n}\n\n.maru-checkbox-inner-18 {\n  border-radius: 5px;\n}\n\n.maru-checkbox-inner-24 {\n  border-radius: 6px;\n}\n\n.maru-checkbox {\n  position: absolute;\n  inset: 0;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n.maru-checkbox:focus {\n  outline: none;\n}\n.maru-checkbox:disabled {\n  cursor: default;\n}\n\n.maru-checkbox-label {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--maru-text-secondary);\n  cursor: pointer;\n}\n\n.maru-checkbox-wrapper:has(.maru-checkbox:disabled) .maru-checkbox-label {\n  color: var(--maru-text-disabled);\n  cursor: default;\n}";
+styleInject(css_248z$p);
 
 var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b;
@@ -7909,6 +8198,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
     isChecked = _f[0],
     setIsChecked = _f[1];
   var combineRef = useCombineRef(ref);
+  var inputId = "maru-checkbox-".concat(hashId);
   useEffect(function () {
     var _a;
     setIsChecked((_a = checked !== null && checked !== void 0 ? checked : props.defaultChecked) !== null && _a !== void 0 ? _a : false);
@@ -7919,28 +8209,27 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
       props.onChange(e);
     }
   };
+  var iconColor = isChecked ? keyColor : 'borderPrimary';
   return jsxs("div", __assign({
     className: classNames('maru-checkbox-wrapper', "maru-checkbox-wrapper-".concat(gap), props.className)
   }, {
     children: [jsxs("div", __assign({
-      className: "maru-checkbox-inner-wrapper"
+      className: classNames('maru-checkbox-inner-wrapper', "maru-checkbox-inner-".concat(size))
     }, {
       children: [jsx("input", __assign({}, props, {
         ref: combineRef,
-        id: "maru-checkbox-".concat(hashId),
+        id: inputId,
         type: "checkbox",
         checked: isChecked,
         onChange: handleChange,
         className: "maru-checkbox"
       })), jsx(Icon, {
         name: isChecked ? "CheckboxOn_s".concat(size, "10") : "CheckboxOff_s".concat(size, "10"),
-        color: props.disabled ? '#BDBDBD' : keyColor
+        color: iconColor
       })]
     })), label && jsx("label", __assign({
-      htmlFor: "maru-checkbox-".concat(hashId),
-      className: classNames('maru-checkbox-label', {
-        'label-disabled': props.disabled
-      })
+      htmlFor: inputId,
+      className: "maru-checkbox-label"
     }, {
       children: label
     }))]
@@ -7955,35 +8244,109 @@ Checkbox.defaultProps = {
 };
 Checkbox.displayName = 'Checkbox';
 
-var css_248z$k = ".maru-chip {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\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: 400;\n  border-radius: 10px;\n  gap: 2px;\n}\n.maru-chip-size-normal {\n  padding: 2px 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: 400;\n  border-radius: 16px;\n  gap: 8px;\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: #eaf3fa;\n  color: #308acc;\n}\n.maru-chip-positive-default.maru-chip-warning-default, .maru-chip-positive-default.maru-chip-positive-default {\n  background-color: #d6e8f5;\n}\n.maru-chip-positive-outline {\n  background-color: #eaf3fa;\n  border: 1px solid #308acc;\n  color: #308acc;\n}\n.maru-chip-positive-outline.maru-chip-warning-default, .maru-chip-positive-outline.maru-chip-positive-default {\n  background-color: #d6e8f5;\n}\n.maru-chip-positive-dot {\n  color: #308acc;\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: #eaf6f3;\n  color: #32a483;\n}\n.maru-chip-success-default.maru-chip-warning-default, .maru-chip-success-default.maru-chip-positive-default {\n  background-color: #d6ede6;\n}\n.maru-chip-success-outline {\n  background-color: #eaf6f3;\n  border: 1px solid #32a483;\n  color: #32a483;\n}\n.maru-chip-success-outline.maru-chip-warning-default, .maru-chip-success-outline.maru-chip-positive-default {\n  background-color: #d6ede6;\n}\n.maru-chip-success-dot {\n  color: #32a483;\n  gap: 2px;\n  padding: unset;\n}\n.maru-chip .maru-chip-x-icon-button {\n  transform: translateY(-1px);\n}";
-styleInject(css_248z$k);
+var css_248z$o = ".maru-chip {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 12px;\n  font-weight: 600;\n  box-sizing: border-box;\n  gap: 4px;\n  line-height: 16px;\n  white-space: nowrap;\n  border: 1px solid transparent;\n  border-radius: 16px;\n}\n.maru-chip-size-small {\n  width: fit-content;\n  height: 22px;\n  padding: 0 8px;\n}\n.maru-chip-size-normal {\n  width: fit-content;\n  height: 24px;\n  padding: 0 10px;\n}\n.maru-chip-size-large {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 500;\n  width: fit-content;\n  height: 28px;\n  padding: 0 12px;\n  line-height: 20px;\n}\n.maru-chip-primary-default, .maru-chip-primary-outline {\n  color: var(--maru-text-brand);\n  background-color: var(--maru-badge-brand-primary);\n  border-color: var(--maru-border-brand-tertiary);\n}\n.maru-chip-secondary-default, .maru-chip-secondary-outline {\n  color: var(--maru-text-primary);\n  background-color: var(--maru-badge-primary);\n  border-color: var(--maru-border-secondary);\n}\n.maru-chip-danger-default, .maru-chip-danger-outline {\n  color: var(--maru-text-error-primary);\n  background-color: var(--maru-badge-error-primary);\n  border-color: var(--maru-border-error-secondary);\n}\n.maru-chip-success-default, .maru-chip-success-outline {\n  color: var(--maru-text-positive-primary);\n  background-color: var(--maru-badge-positive-primary);\n  border-color: var(--maru-border-success-primary);\n}\n.maru-chip-positive-default, .maru-chip-positive-outline {\n  color: var(--maru-text-info-primary);\n  background-color: var(--maru-badge-info-primary);\n  border-color: var(--maru-text-info-primary);\n}\n.maru-chip-warning-default, .maru-chip-warning-outline {\n  color: var(--maru-background-warning-solid-primary);\n  background-color: var(--maru-yellow-200);\n  border-color: var(--maru-background-warning-solid-primary);\n}\n.maru-chip-primary-dot {\n  height: auto;\n  padding: 0;\n  color: var(--p);\n  background-color: transparent;\n  border: 0;\n}\n.maru-chip-secondary-dot {\n  height: auto;\n  padding: 0;\n  color: var(--maru-icon-tertiary);\n  background-color: transparent;\n  border: 0;\n}\n.maru-chip-positive-dot {\n  height: auto;\n  padding: 0;\n  color: var(--maru-background-info-solid-primary);\n  background-color: transparent;\n  border: 0;\n}\n.maru-chip-warning-dot {\n  height: auto;\n  padding: 0;\n  color: var(--maru-background-warning-solid-primary);\n  background-color: transparent;\n  border: 0;\n}\n.maru-chip-danger-dot {\n  height: auto;\n  padding: 0;\n  color: var(--maru-background-error-solid-primary);\n  background-color: transparent;\n  border: 0;\n}\n.maru-chip-success-dot {\n  height: auto;\n  padding: 0;\n  color: var(--maru-background-positive-solid-primary);\n  background-color: transparent;\n  border: 0;\n}\n.maru-chip.maru-chip-with-leading-icon.maru-chip-size-small {\n  padding-left: 6px;\n}\n.maru-chip.maru-chip-with-leading-icon.maru-chip-size-normal {\n  padding-left: 8px;\n}\n.maru-chip.maru-chip-with-leading-icon.maru-chip-size-large {\n  padding-left: 10px;\n}\n.maru-chip.maru-chip-with-trailing-icon.maru-chip-size-small {\n  padding-right: 6px;\n}\n.maru-chip.maru-chip-with-trailing-icon.maru-chip-size-normal {\n  padding-right: 8px;\n}\n.maru-chip.maru-chip-with-trailing-icon.maru-chip-size-large {\n  padding-right: 10px;\n}\n.maru-chip.maru-chip-with-dot {\n  gap: 6px;\n}\n.maru-chip.maru-chip-standalone-dot {\n  height: auto;\n  padding: 0;\n  background-color: transparent;\n  border: 0;\n}\n.maru-chip .maru-chip-dot {\n  width: 8px;\n  height: 8px;\n  flex-shrink: 0;\n  background-color: currentColor;\n  border-radius: 50%;\n}\n.maru-chip .maru-chip-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  width: 12px;\n  height: 12px;\n  flex-shrink: 0;\n  overflow: hidden;\n  line-height: 0;\n}\n.maru-chip .maru-chip-icon svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.maru-chip.maru-chip-only-icon {\n  justify-content: center;\n  align-items: center;\n  flex-shrink: 0;\n  gap: 0;\n  padding: 0;\n  line-height: 0;\n}\n.maru-chip.maru-chip-only-icon.maru-chip-size-small {\n  width: 22px;\n  min-width: 22px;\n}\n.maru-chip.maru-chip-only-icon.maru-chip-size-normal {\n  width: 24px;\n  min-width: 24px;\n}\n.maru-chip.maru-chip-only-icon.maru-chip-size-large {\n  width: 28px;\n  min-width: 28px;\n}\n.maru-chip.maru-chip-disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n.maru-chip .maru-chip-x-icon-button {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  width: 12px;\n  height: 12px;\n  flex-shrink: 0;\n  padding: 0;\n  margin: 0;\n  color: inherit;\n  cursor: pointer;\n  background: transparent;\n  border: none;\n  line-height: 0;\n}\n.maru-chip .maru-chip-x-icon-button svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.maru-chip .maru-chip-x-icon-button:disabled {\n  cursor: default;\n}\n.maru-chip .maru-chip-x-icon-button:focus-visible {\n  outline: 1px solid currentColor;\n  outline-offset: 1px;\n  border-radius: 2px;\n}";
+styleInject(css_248z$o);
 
 function Chip(_a) {
+  var _b, _c;
   var children = _a.children,
-    _b = _a.color,
-    color = _b === void 0 ? 'primary' : _b,
-    _c = _a.size,
-    size = _c === void 0 ? 'normal' : _c,
-    _d = _a.variant,
-    variant = _d === void 0 ? 'default' : _d,
+    _d = _a.color,
+    color = _d === void 0 ? 'primary' : _d,
+    _e = _a.size,
+    size = _e === void 0 ? 'normal' : _e,
+    _f = _a.variant,
+    variant = _f === void 0 ? 'default' : _f,
     className = _a.className,
-    onXIconClick = _a.onXIconClick;
+    onXIconClick = _a.onXIconClick,
+    startIcon = _a.startIcon,
+    endIcon = _a.endIcon,
+    customStartIcon = _a.customStartIcon,
+    customEndIcon = _a.customEndIcon,
+    _g = _a.showDot,
+    showDot = _g === void 0 ? false : _g,
+    _h = _a.disabled,
+    disabled = _h === void 0 ? false : _h,
+    _j = _a.closeButtonAriaLabel,
+    closeButtonAriaLabel = _j === void 0 ? '칩 닫기' : _j;
+  var hasChildren = children != null && children !== '';
+  var hasCustomStartIcon = customStartIcon != null;
+  var hasCustomEndIcon = customEndIcon != null;
+  var hasStartIcon = hasCustomStartIcon || !!startIcon;
+  var hasEndIcon = hasCustomEndIcon || !!endIcon;
+  var hasDot = showDot || variant === 'dot';
+  var isOnlyIcon = !hasChildren && !hasDot && (hasStartIcon && !hasEndIcon || !hasStartIcon && hasEndIcon) && !onXIconClick;
+  var startIconContent = customStartIcon;
+  if (!hasCustomStartIcon && startIcon) {
+    startIconContent = jsx(Icon, {
+      name: startIcon.name,
+      color: (_b = startIcon.color) !== null && _b !== void 0 ? _b : 'inherit',
+      hoverColor: startIcon.hoverColor
+    });
+  }
+  var endIconContent = customEndIcon;
+  if (!hasCustomEndIcon && endIcon) {
+    endIconContent = jsx(Icon, {
+      name: endIcon.name,
+      color: (_c = endIcon.color) !== null && _c !== void 0 ? _c : 'inherit',
+      hoverColor: endIcon.hoverColor
+    });
+  }
+  useEffect(function () {
+    if (process.env.NODE_ENV === 'production') {
+      return;
+    }
+    if (hasCustomStartIcon && startIcon) {
+      console.warn('[Chip] customStartIcon과 startIcon을 함께 넘겼습니다. customStartIcon만 사용됩니다.');
+    }
+    if (hasCustomEndIcon && endIcon) {
+      console.warn('[Chip] customEndIcon과 endIcon을 함께 넘겼습니다. customEndIcon만 사용됩니다.');
+    }
+    if (onXIconClick && (endIcon || hasCustomEndIcon)) {
+      console.warn('[Chip] onXIconClick이 있으면 endIcon/customEndIcon은 렌더되지 않고 X 버튼만 표시됩니다.');
+    }
+  }, [hasCustomStartIcon, startIcon, hasCustomEndIcon, endIcon, onXIconClick]);
   return jsxs("div", __assign({
-    className: classNames('maru-chip', "maru-chip-".concat(color, "-").concat(variant), "maru-chip-size-".concat(size), className)
+    className: classNames('maru-chip', "maru-chip-".concat(color, "-").concat(variant), "maru-chip-size-".concat(size), {
+      'maru-chip-only-icon': isOnlyIcon,
+      'maru-chip-disabled': disabled,
+      'maru-chip-with-leading-icon': hasStartIcon || hasDot,
+      'maru-chip-with-trailing-icon': hasEndIcon && !onXIconClick || !!onXIconClick,
+      'maru-chip-with-dot': hasDot,
+      'maru-chip-standalone-dot': variant === 'dot'
+    }, className),
+    "aria-disabled": disabled || undefined
   }, {
-    children: [variant === 'dot' && jsx(Icon, {
-      name: ICONS.State_s1610,
-      color: color
-    }), typeof children === 'number' ? jsx("span", {
+    children: [hasDot && jsx("span", {
+      className: "maru-chip-dot",
+      "aria-hidden": true
+    }), hasStartIcon && jsx("span", __assign({
+      className: classNames('maru-chip-icon', {
+        'maru-chip-default-icon': !hasCustomStartIcon,
+        'maru-chip-custom-icon': hasCustomStartIcon
+      })
+    }, {
+      children: startIconContent
+    })), hasChildren && (typeof children === 'number' ? jsx("span", {
       children: children.toLocaleString('en')
-    }) : children, onXIconClick && jsx(Button, {
-      endIcon: {
-        name: ICONS.X_s1410,
-        color: color
-      },
+    }) : children), hasEndIcon && !onXIconClick && jsx("span", __assign({
+      className: classNames('maru-chip-icon', {
+        'maru-chip-default-icon': !hasCustomEndIcon,
+        'maru-chip-custom-icon': hasCustomEndIcon
+      })
+    }, {
+      children: endIconContent
+    })), onXIconClick && jsx("button", __assign({
+      type: "button",
+      className: "maru-chip-x-icon-button",
       onClick: onXIconClick,
-      className: "maru-chip-x-icon-button"
-    })]
+      disabled: disabled,
+      "aria-label": closeButtonAriaLabel
+    }, {
+      children: jsx(Icon, {
+        name: ICONS.X_s1210,
+        color: "inherit"
+      })
+    }))]
   }));
 }
 
@@ -69944,11 +70307,11 @@ var textCopy = function textCopy(text) {
   });
 };
 
-var css_248z$j = "pre code.hljs {\n  display: block;\n  overflow-x: auto;\n  padding: 1em\n}\ncode.hljs {\n  padding: 3px 5px\n}\n/*!\n  Theme: a11y-light\n  Author: @ericwbailey\n  Maintainer: @ericwbailey\n\n  Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css\n*/\n.hljs {\n  background: #fefefe;\n  color: #545454\n}\n/* Comment */\n.hljs-comment,\n.hljs-quote {\n  color: #696969\n}\n/* Red */\n.hljs-variable,\n.hljs-template-variable,\n.hljs-tag,\n.hljs-name,\n.hljs-selector-id,\n.hljs-selector-class,\n.hljs-regexp,\n.hljs-deletion {\n  color: #d91e18\n}\n/* Orange */\n.hljs-number,\n.hljs-built_in,\n.hljs-literal,\n.hljs-type,\n.hljs-params,\n.hljs-meta,\n.hljs-link {\n  color: #aa5d00\n}\n/* Yellow */\n.hljs-attribute {\n  color: #aa5d00\n}\n/* Green */\n.hljs-string,\n.hljs-symbol,\n.hljs-bullet,\n.hljs-addition {\n  color: #008000\n}\n/* Blue */\n.hljs-title,\n.hljs-section {\n  color: #007faa\n}\n/* Purple */\n.hljs-keyword,\n.hljs-selector-tag {\n  color: #7928a1\n}\n.hljs-emphasis {\n  font-style: italic\n}\n.hljs-strong {\n  font-weight: bold\n}\n@media screen and (-ms-high-contrast: active) {\n  .hljs-addition,\n  .hljs-attribute,\n  .hljs-built_in,\n  .hljs-bullet,\n  .hljs-comment,\n  .hljs-link,\n  .hljs-literal,\n  .hljs-meta,\n  .hljs-number,\n  .hljs-params,\n  .hljs-string,\n  .hljs-symbol,\n  .hljs-type,\n  .hljs-quote {\n    color: highlight\n  }\n  .hljs-keyword,\n  .hljs-selector-tag {\n    font-weight: bold\n  }\n}";
-styleInject(css_248z$j);
+var css_248z$n = "pre code.hljs {\n  display: block;\n  overflow-x: auto;\n  padding: 1em\n}\ncode.hljs {\n  padding: 3px 5px\n}\n/*!\n  Theme: a11y-light\n  Author: @ericwbailey\n  Maintainer: @ericwbailey\n\n  Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css\n*/\n.hljs {\n  background: #fefefe;\n  color: #545454\n}\n/* Comment */\n.hljs-comment,\n.hljs-quote {\n  color: #696969\n}\n/* Red */\n.hljs-variable,\n.hljs-template-variable,\n.hljs-tag,\n.hljs-name,\n.hljs-selector-id,\n.hljs-selector-class,\n.hljs-regexp,\n.hljs-deletion {\n  color: #d91e18\n}\n/* Orange */\n.hljs-number,\n.hljs-built_in,\n.hljs-literal,\n.hljs-type,\n.hljs-params,\n.hljs-meta,\n.hljs-link {\n  color: #aa5d00\n}\n/* Yellow */\n.hljs-attribute {\n  color: #aa5d00\n}\n/* Green */\n.hljs-string,\n.hljs-symbol,\n.hljs-bullet,\n.hljs-addition {\n  color: #008000\n}\n/* Blue */\n.hljs-title,\n.hljs-section {\n  color: #007faa\n}\n/* Purple */\n.hljs-keyword,\n.hljs-selector-tag {\n  color: #7928a1\n}\n.hljs-emphasis {\n  font-style: italic\n}\n.hljs-strong {\n  font-weight: bold\n}\n@media screen and (-ms-high-contrast: active) {\n  .hljs-addition,\n  .hljs-attribute,\n  .hljs-built_in,\n  .hljs-bullet,\n  .hljs-comment,\n  .hljs-link,\n  .hljs-literal,\n  .hljs-meta,\n  .hljs-number,\n  .hljs-params,\n  .hljs-string,\n  .hljs-symbol,\n  .hljs-type,\n  .hljs-quote {\n    color: highlight\n  }\n  .hljs-keyword,\n  .hljs-selector-tag {\n    font-weight: bold\n  }\n}";
+styleInject(css_248z$n);
 
-var css_248z$i = ".maru-code {\n  position: relative;\n}\n.maru-code .maru-code-copy-button {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n}\n.maru-code > code {\n  border-radius: 4px;\n  border: 1px solid #e4e4e4;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;\n  font-size: 14px;\n  white-space: pre-wrap;\n  word-break: break-word;\n}";
-styleInject(css_248z$i);
+var css_248z$m = ".maru-code {\n  position: relative;\n}\n.maru-code .maru-code-copy-button {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n}\n.maru-code > code {\n  border-radius: 4px;\n  border: 1px solid var(--maru-border-secondary);\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;\n  font-size: 14px;\n  white-space: pre-wrap;\n  word-break: break-word;\n}";
+styleInject(css_248z$m);
 
 function Code(_a) {
   var value = _a.value,
@@ -69974,37 +70337,66 @@ function Code(_a) {
   }));
 }
 
-var css_248z$h = ".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: 500;\n}\n.maru-input-wrapper .maru-input-label label {\n  color: #5c5c5c;\n}\n.maru-input-wrapper .maru-input {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  flex-direction: row;\n  height: 37px;\n  padding: 8px 10px 8px 14px;\n  border: 1px solid #e4e4e4;\n  border-radius: 6px;\n  position: relative;\n  z-index: 0;\n}\n.maru-input-wrapper .maru-input .persistent-placeholder {\n  position: absolute;\n  z-index: -1;\n  left: 14px;\n  right: 10px;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n  overflow: hidden;\n}\n.maru-input-wrapper .maru-input .persistent-placeholder > span {\n  color: #8c8c8c;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 300;\n  white-space: pre;\n  flex: none;\n}\n.maru-input-wrapper .maru-input .persistent-placeholder > span[data-hidden] {\n  visibility: hidden;\n}\n.maru-input-wrapper .maru-input .persistent-placeholder > span:not([data-hidden]) {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: pre;\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: 400;\n  color: #5c5c5c;\n  padding: unset;\n}\n.maru-input-wrapper .maru-input > input::-webkit-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input::-moz-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input:-ms-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input::-ms-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input > input::placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-input-wrapper .maru-input:focus-visible, .maru-input-wrapper .maru-input:focus-within {\n  border-color: #5c5c5c;\n  background-color: rgba(228, 228, 228, 0.2);\n}\n.maru-input-wrapper .maru-input.errored {\n  outline: 1px solid #e53e3e;\n  border-color: #e53e3e;\n}\n.maru-input-wrapper .maru-input:hover {\n  outline: 1px solid #e4e4e4;\n  border-color: #e4e4e4;\n  background-color: rgba(228, 228, 228, 0.2);\n}\n.maru-input-wrapper .maru-input.disabled {\n  background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input.disabled > input {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::-webkit-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::-moz-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input:-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled > input::placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input.disabled:hover {\n  outline: unset;\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  gap: 6px;\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  display: flex;\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}\n.maru-input-wrapper .maru-input-end-node-wrapper.maru-input-end-node-margin {\n  margin-left: 8px;\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  font-weight: 400;\n}";
-styleInject(css_248z$h);
+var css_248z$l = ".maru-input-wrapper {\n  width: 100%;\n}\n.maru-input-wrapper .maru-input-label {\n  margin-bottom: 4px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 500;\n}\n.maru-input-wrapper .maru-input-label label {\n  color: var(--maru-text-secondary);\n}\n.maru-input-wrapper .maru-input {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  flex-direction: row;\n  box-sizing: border-box;\n  min-height: 36px;\n  padding: 7px 12px;\n  border: 1px solid var(--maru-border-primary);\n  border-radius: 8px;\n  background-color: var(--maru-background-primary);\n  position: relative;\n  z-index: 0;\n  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;\n}\n.maru-input-wrapper .maru-input .maru-input-value-wrapper {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  min-width: 0;\n  overflow: hidden;\n  position: relative;\n}\n.maru-input-wrapper .maru-input .maru-input-value-wrapper .persistent-placeholder {\n  position: absolute;\n  z-index: -1;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n  overflow: hidden;\n}\n.maru-input-wrapper .maru-input .maru-input-value-wrapper .persistent-placeholder > span {\n  color: var(--maru-text-tertiary);\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 500;\n  white-space: pre;\n  flex: none;\n}\n.maru-input-wrapper .maru-input .maru-input-value-wrapper .persistent-placeholder > span[data-hidden] {\n  visibility: hidden;\n}\n.maru-input-wrapper .maru-input .maru-input-value-wrapper .persistent-placeholder > span:not([data-hidden]) {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: pre;\n}\n.maru-input-wrapper .maru-input .maru-input-value-wrapper .maru-input-highlight-layer {\n  width: max-content;\n  min-width: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  color: var(--maru-text-secondary);\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n  white-space: pre;\n  pointer-events: none;\n}\n.maru-input-wrapper .maru-input .maru-input-value-wrapper .maru-input-highlight-layer > [data-highlighted] {\n  background-color: var(--maru-feature-highlight);\n}\n.maru-input-wrapper .maru-input .maru-input-value-wrapper.highlighted > input {\n  color: transparent;\n  caret-color: var(--maru-text-primary);\n}\n.maru-input-wrapper .maru-input input {\n  width: 100%;\n  min-width: 0;\n  border: unset;\n  outline: unset;\n  background-color: transparent;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--maru-text-secondary);\n  line-height: 20px;\n  padding: unset;\n}\n.maru-input-wrapper .maru-input input::-webkit-input-placeholder {\n  font-weight: 500;\n  color: var(--maru-text-tertiary);\n}\n.maru-input-wrapper .maru-input input::-moz-placeholder {\n  font-weight: 500;\n  color: var(--maru-text-tertiary);\n}\n.maru-input-wrapper .maru-input input:-ms-input-placeholder {\n  font-weight: 500;\n  color: var(--maru-text-tertiary);\n}\n.maru-input-wrapper .maru-input input::-ms-input-placeholder {\n  font-weight: 500;\n  color: var(--maru-text-tertiary);\n}\n.maru-input-wrapper .maru-input input::placeholder {\n  font-weight: 500;\n  color: var(--maru-text-tertiary);\n}\n.maru-input-wrapper .maru-input:focus-within {\n  border-color: var(--maru-border-brand-primary);\n  box-shadow: 0 0 0 1px var(--maru-border-brand-primary);\n}\n.maru-input-wrapper .maru-input.errored {\n  border-color: var(--maru-border-error-secondary);\n}\n.maru-input-wrapper .maru-input.errored:focus-within {\n  border-color: var(--maru-border-error-primary);\n  background-color: var(--maru-background-primary-hover);\n  box-shadow: 0 0 0 1px var(--maru-border-error-primary);\n}\n.maru-input-wrapper .maru-input:hover {\n  background-color: var(--maru-background-primary-hover);\n}\n.maru-input-wrapper .maru-input.disabled {\n  background-color: var(--maru-background-primary);\n  opacity: 0.5;\n}\n.maru-input-wrapper .maru-input.disabled input {\n  color: var(--maru-text-disabled);\n}\n.maru-input-wrapper .maru-input.disabled input::-webkit-input-placeholder {\n  color: var(--maru-text-disabled);\n}\n.maru-input-wrapper .maru-input.disabled input::-moz-placeholder {\n  color: var(--maru-text-disabled);\n}\n.maru-input-wrapper .maru-input.disabled input:-ms-input-placeholder {\n  color: var(--maru-text-disabled);\n}\n.maru-input-wrapper .maru-input.disabled input::-ms-input-placeholder {\n  color: var(--maru-text-disabled);\n}\n.maru-input-wrapper .maru-input.disabled input::placeholder {\n  color: var(--maru-text-disabled);\n}\n.maru-input-wrapper .maru-input.disabled .maru-input-value-wrapper.highlighted > input {\n  color: transparent;\n}\n.maru-input-wrapper .maru-input.disabled:hover {\n  background-color: var(--maru-background-primary);\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  flex: 0 0 16px;\n  margin-right: 8px;\n}\n.maru-input-wrapper .maru-input-start-node > svg {\n  width: 16px;\n  height: 16px;\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  gap: 8px;\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  display: flex;\n  color: var(--maru-icon-quaternary);\n}\n.maru-input-wrapper .maru-input-end-node-wrapper > button:focus-visible {\n  outline: 2px solid var(--maru-border-brand-primary);\n  outline-offset: 2px;\n  border-radius: 2px;\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}\n.maru-input-wrapper .maru-input-end-node-wrapper.maru-input-end-node-margin {\n  margin-left: 8px;\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  letter-spacing: 0;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--maru-text-secondary);\n  font-weight: 400;\n}\n.maru-input-wrapper .maru-input-footer.maru-input-footer-error > span {\n  color: var(--maru-text-error-primary);\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n  letter-spacing: 0;\n}";
+styleInject(css_248z$l);
 
 var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
+  var _b;
   var invalid = _a.invalid,
     label = _a.label,
-    _b = _a.type,
-    type = _b === void 0 ? 'text' : _b,
+    helperText = _a.helperText,
+    _c = _a.type,
+    type = _c === void 0 ? 'text' : _c,
     onClear = _a.onClear,
     hiddenClearButton = _a.hiddenClearButton,
     wrapperRef = _a.wrapperRef,
     startNode = _a.startNode,
     endNode = _a.endNode,
     className = _a.className,
-    _c = _a.persistentPlaceholder,
-    persistentPlaceholder = _c === void 0 ? false : _c,
-    props = __rest(_a, ["invalid", "label", "type", "onClear", "hiddenClearButton", "wrapperRef", "startNode", "endNode", "className", "persistentPlaceholder"]);
-  var _d = useState(true),
-    maskingPassword = _d[0],
-    setMaskingPassword = _d[1]; // *로 보이고 싶으면 true
-  var _e = useState(false),
-    showClearButton = _e[0],
-    setShowClearButton = _e[1];
-  var _f = useState(''),
-    hiddenPlaceholder = _f[0],
-    setHiddenPlaceholder = _f[1];
+    _d = _a.persistentPlaceholder,
+    persistentPlaceholder = _d === void 0 ? false : _d,
+    highlightText = _a.highlightText,
+    props = __rest(_a, ["invalid", "label", "helperText", "type", "onClear", "hiddenClearButton", "wrapperRef", "startNode", "endNode", "className", "persistentPlaceholder", "highlightText"]);
+  var _e = useState(true),
+    maskingPassword = _e[0],
+    setMaskingPassword = _e[1]; // *로 보이고 싶으면 true
+  var _f = useState(false),
+    showClearButton = _f[0],
+    setShowClearButton = _f[1];
   var _g = useState(''),
-    remainPlaceholder = _g[0],
-    setRemainPlaceholder = _g[1];
+    hiddenPlaceholder = _g[0],
+    setHiddenPlaceholder = _g[1];
+  var _h = useState(''),
+    remainPlaceholder = _h[0],
+    setRemainPlaceholder = _h[1];
+  var _j = useState(0),
+    highlightScrollLeft = _j[0],
+    setHighlightScrollLeft = _j[1];
+  var _k = useState(function () {
+      var _a, _b;
+      return String((_b = (_a = props.value) !== null && _a !== void 0 ? _a : props.defaultValue) !== null && _b !== void 0 ? _b : '');
+    }),
+    inputValueForHighlight = _k[0],
+    setInputValueForHighlight = _k[1];
   var combineRef = useCombineRef(inputRef);
   var hashId = uuidv4(4);
+  var inputId = (_b = props.id) !== null && _b !== void 0 ? _b : "maru-input-".concat(hashId);
+  var helperTextId = "".concat(inputId, "-helper-text");
+  var currentInputValue = props.value != null ? String(props.value) : inputValueForHighlight;
+  var normalizedHighlightText = highlightText !== null && highlightText !== void 0 ? highlightText : '';
+  var hasHighlightedText = normalizedHighlightText.length > 0 && type !== 'password' && currentInputValue.includes(normalizedHighlightText);
+  var highlightSegments = hasHighlightedText ? currentInputValue.split(normalizedHighlightText).flatMap(function (content, index, parts) {
+    return __spreadArray(__spreadArray([], content ? [{
+      content: content,
+      highlighted: false
+    }] : [], true), index < parts.length - 1 ? [{
+      content: normalizedHighlightText,
+      highlighted: true
+    }] : [], true);
+  }) : [];
+  var footerContent = (invalid === null || invalid === void 0 ? void 0 : invalid.on) && invalid.message != null ? invalid.message : helperText;
+  var hasFooterContent = footerContent != null;
+  var ariaDescribedBy = [props['aria-describedby'], hasFooterContent ? helperTextId : undefined].filter(Boolean).join(' ');
   useEffect(function () {
     return function () {
       setMaskingPassword(true);
@@ -70024,6 +70416,11 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
       setShowClearButton(!hiddenClearButton);
     }
   }, [props.defaultValue, hiddenClearButton]);
+  useEffect(function () {
+    if (props.value != null) {
+      setInputValueForHighlight(String(props.value));
+    }
+  }, [props.value]);
   /**
    * persistentPlaceholder = true일때 보여줄 placeholder 세팅
    */
@@ -70109,6 +70506,7 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
       setHiddenPlaceholder(newValue);
       setRemainPlaceholder(props.placeholder.substring(newValue.length));
     }
+    setInputValueForHighlight(newValue);
     e.currentTarget.value = newValue;
     (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
   };
@@ -70124,13 +70522,21 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
     if (!newValue) {
       setShowClearButton(false );
     }
+    setInputValueForHighlight(newValue);
     e.currentTarget.value = newValue;
     (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
   };
+  var handleInputScroll = function handleInputScroll(e) {
+    var _a;
+    setHighlightScrollLeft(e.currentTarget.scrollLeft);
+    (_a = props.onScroll) === null || _a === void 0 ? void 0 : _a.call(props, e);
+  };
   var handleClearClick = function handleClearClick() {
     if (combineRef.current) {
       setShowClearButton(false );
       combineRef.current.value = '';
+      setInputValueForHighlight('');
+      setHighlightScrollLeft(0);
       combineRef.current.focus();
       if (persistentPlaceholder && props.placeholder) {
         setHiddenPlaceholder('');
@@ -70147,7 +70553,7 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
       className: "maru-input-label"
     }, {
       children: jsx("label", __assign({
-        htmlFor: "maru-input-".concat(hashId)
+        htmlFor: inputId
       }, {
         children: label
       }))
@@ -70161,23 +70567,46 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
         className: "maru-input-start-node"
       }, {
         children: startNode
-      })), persistentPlaceholder && jsxs("span", __assign({
-        className: "persistent-placeholder"
+      })), jsxs("div", __assign({
+        className: classNames('maru-input-value-wrapper', {
+          highlighted: hasHighlightedText
+        })
       }, {
-        children: [jsx("span", __assign({
-          "data-hidden": true
+        children: [persistentPlaceholder && !hasHighlightedText && jsxs("span", __assign({
+          className: "persistent-placeholder"
         }, {
-          children: hiddenPlaceholder
-        })), jsx("span", {
-          children: remainPlaceholder
-        })]
-      })), jsx("input", __assign({}, props, {
-        id: "maru-input-".concat(hashId),
-        ref: combineRef,
-        type: type === 'password' && maskingPassword ? 'password' : 'text',
-        onChange: handleInputChange,
-        onBlur: handleInputBlur,
-        placeholder: persistentPlaceholder ? undefined : props.placeholder
+          children: [jsx("span", __assign({
+            "data-hidden": true
+          }, {
+            children: hiddenPlaceholder
+          })), jsx("span", {
+            children: remainPlaceholder
+          })]
+        })), hasHighlightedText && jsx("span", __assign({
+          className: "maru-input-highlight-layer",
+          "aria-hidden": "true",
+          style: {
+            transform: "translateX(-".concat(highlightScrollLeft, "px)")
+          }
+        }, {
+          children: highlightSegments.map(function (segment, index) {
+            return jsx("span", __assign({
+              "data-highlighted": segment.highlighted || undefined
+            }, {
+              children: segment.content
+            }), "".concat(segment.content, "-").concat(index));
+          })
+        })), jsx("input", __assign({}, props, {
+          id: inputId,
+          ref: combineRef,
+          type: type === 'password' && maskingPassword ? 'password' : 'text',
+          onChange: handleInputChange,
+          onBlur: handleInputBlur,
+          onScroll: handleInputScroll,
+          placeholder: persistentPlaceholder ? undefined : props.placeholder,
+          "aria-invalid": (invalid === null || invalid === void 0 ? void 0 : invalid.on) ? true : props['aria-invalid'],
+          "aria-describedby": ariaDescribedBy || undefined
+        }))]
       })), jsxs("div", __assign({
         className: classNames('maru-input-end-node-wrapper', {
           // 셋 중 뭐라도 있으면 margin-left: 8px;
@@ -70195,23 +70624,25 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
               return !prev;
             });
           },
-          tabIndex: -1
+          tabIndex: -1,
+          "aria-label": maskingPassword ? '비밀번호 표시' : '비밀번호 숨기기'
         }, {
           children: jsx(Icon
           // 현재 상태에 대한 아이콘이 아니라 어떻게 하고싶냐는 뜻의 아이콘이니까 반대로 되어있는게 맞다
           , {
             // 현재 상태에 대한 아이콘이 아니라 어떻게 하고싶냐는 뜻의 아이콘이니까 반대로 되어있는게 맞다
             name: maskingPassword ? ICONS.Eye_s1610 : ICONS.EyeOff_s1610,
-            color: "#bdbdbd"
+            color: "iconQuaternary"
           })
         })), showClearButton && !props.disabled && jsx("button", __assign({
           type: "button",
           onClick: handleClearClick,
-          tabIndex: -1
+          tabIndex: -1,
+          "aria-label": "\uC785\uB825 \uB0B4\uC6A9 \uC9C0\uC6B0\uAE30"
         }, {
           children: jsx(Icon, {
             name: ICONS.X_s1615,
-            color: "#5c5c5c"
+            color: "textSecondary"
           })
         })), endNode && jsx("div", __assign({
           className: "maru-input-end-node"
@@ -70219,11 +70650,14 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
           children: endNode
         }))]
       }))]
-    })), invalid && invalid.on && jsx("div", __assign({
-      className: "maru-input-footer"
+    })), hasFooterContent && jsx("div", __assign({
+      id: helperTextId,
+      className: classNames('maru-input-footer', {
+        'maru-input-footer-error': invalid === null || invalid === void 0 ? void 0 : invalid.on
+      })
     }, {
       children: jsx("span", {
-        children: invalid.message
+        children: footerContent
       })
     }))]
   }));
@@ -70231,6 +70665,7 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
 Input.defaultProps = {
   invalid: undefined,
   label: undefined,
+  helperText: undefined,
   type: 'text',
   onClear: undefined,
   hiddenClearButton: undefined,
@@ -70238,7 +70673,8 @@ Input.defaultProps = {
   startNode: undefined,
   endNode: undefined,
   className: undefined,
-  persistentPlaceholder: undefined
+  persistentPlaceholder: undefined,
+  highlightText: undefined
 };
 Input.displayName = 'Input';
 
@@ -72041,8 +72477,8 @@ function CreatePortal(_a) {
   return (parentElement || styleRootElement) && /*#__PURE__*/ReactDOM__default.createPortal(children, parentElement ? parentElement.current : styleRootElement);
 }
 
-var css_248z$g = ".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$g);
+var css_248z$k = ".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: var(--maru-background-primary);\n  outline: none;\n  box-shadow: 0px 0px 4px var(--maru-shadow-default);\n}";
+styleInject(css_248z$k);
 
 function Popover(_a) {
   var anchorEl = _a.anchorEl,
@@ -72107,36 +72543,49 @@ function Popover(_a) {
   }) : PopoverBody;
 }
 
-var css_248z$f = ".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 #bdbdbd;\n  position: relative;\n  display: inline-block;\n  cursor: pointer;\n  background-color: transparent;\n}\n.maru-radio:checked {\n  border-color: var(--p);\n  background: var(--p);\n}\n.maru-radio:checked::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background-color: #fafafa;\n}\n.maru-radio:not(.maru-radio-primary):checked {\n  border-color: #5c5c5c;\n  background: #5c5c5c;\n}\n.maru-radio:not(:disabled):hover {\n  border-color: #5c5c5c;\n  filter: brightness(1.3);\n}\n.maru-radio.maru-radio-primary:not(:disabled):hover {\n  border-color: var(--p);\n}\n.maru-radio:not(:checked):not(:disabled):focus {\n  outline: 3px solid #5c5c5c;\n  outline-offset: 3px;\n}\n.maru-radio.maru-radio-primary:not(:checked):not(:disabled):focus {\n  outline: 3px solid var(--p);\n  outline-offset: 3px;\n}\n.maru-radio:checked:not(:disabled):focus {\n  outline: none;\n}\n.maru-radio:not(.maru-radio-primary):checked:not(:disabled):focus {\n  background: color-mix(in srgb, #5c5c5c 80%, black);\n  border-color: color-mix(in srgb, #5c5c5c 80%, black);\n}\n.maru-radio.maru-radio-primary:checked:not(:disabled):focus {\n  background: color-mix(in srgb, var(--p) 80%, black);\n  border-color: color-mix(in srgb, var(--p) 80%, black);\n}\n.maru-radio:not(:checked):disabled {\n  background-color: #fafafa;\n}\n.maru-radio:checked:disabled {\n  opacity: 1;\n  background: #bdbdbd;\n  border-color: #bdbdbd;\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: 400;\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$f);
+var TRadioGap = {
+  EightPx: '8px',
+  SixPx: '6px',
+  FourPx: '4px',
+  TwoPx: '2px'
+};
+var TRadioSize = {
+  Md: 'md',
+  Sm: 'sm'
+};
+
+var css_248z$j = ".maru-radio-wrapper {\n  display: inline-flex;\n  align-items: center;\n  width: fit-content;\n  cursor: pointer;\n}\n.maru-radio-wrapper-disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n\n.maru-radio-wrapper-8px {\n  gap: 8px;\n}\n\n.maru-radio-wrapper-6px {\n  gap: 6px;\n}\n\n.maru-radio-wrapper-4px {\n  gap: 4px;\n}\n\n.maru-radio-wrapper-2px {\n  gap: 2px;\n}\n\n.maru-radio {\n  --maru-radio-size: 16px;\n  --maru-radio-dot-size: 6px;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  position: relative;\n  display: inline-block;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  width: var(--maru-radio-size);\n  height: var(--maru-radio-size);\n  margin: 0;\n  border: 1px solid var(--maru-border-primary);\n  border-radius: 50%;\n  background-color: var(--maru-background-primary);\n  cursor: pointer;\n}\n.maru-radio-md {\n  --maru-radio-size: 20px;\n  --maru-radio-dot-size: 8px;\n}\n.maru-radio:checked {\n  border-color: var(--maru-icon-brand-primary);\n  background-color: var(--maru-icon-brand-primary);\n}\n.maru-radio:checked::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: var(--maru-radio-dot-size);\n  height: var(--maru-radio-dot-size);\n  transform: translate(-50%, -50%);\n  border-radius: 50%;\n  background-color: var(--maru-background-primary);\n}\n.maru-radio:not(.maru-radio-primary):checked {\n  border-color: var(--maru-text-secondary);\n  background-color: var(--maru-text-secondary);\n}\n.maru-radio:focus {\n  outline: none;\n}\n.maru-radio:focus-visible:not(:disabled) {\n  box-shadow: 0 0 0 2px var(--maru-background-primary), 0 0 0 4px #dbe4ec;\n}\n.maru-radio:disabled {\n  cursor: default;\n}\n\n.maru-radio-label {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--maru-text-primary);\n  line-height: 20px;\n  white-space: nowrap;\n  cursor: pointer;\n}\n\n.maru-radio-wrapper-disabled .maru-radio-label {\n  cursor: default;\n}";
+styleInject(css_248z$j);
 
 var Radio = /*#__PURE__*/forwardRef(function (_a, ref) {
   var checked = _a.checked,
     _b = _a.color,
-    color = _b === void 0 ? 'default' : _b,
+    color = _b === void 0 ? 'primary' : _b,
     _c = _a.gap,
-    gap = _c === void 0 ? '8px' : _c,
+    gap = _c === void 0 ? TRadioGap.SixPx : _c,
     label = _a.label,
-    props = __rest(_a, ["checked", "color", "gap", "label"]);
+    _d = _a.size,
+    size = _d === void 0 ? TRadioSize.Sm : _d,
+    props = __rest(_a, ["checked", "color", "gap", "label", "size"]);
   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)
+    className: classNames('maru-radio-wrapper', "maru-radio-wrapper-".concat(gap), {
+      'maru-radio-wrapper-disabled': props.disabled
+    }, props.className)
   }, {
     children: [jsx("input", __assign({}, props, {
       ref: combineRef,
       id: inputId,
       type: "radio",
       checked: checked == null ? undefined : !!checked,
-      className: classNames('maru-radio', {
+      className: classNames('maru-radio', "maru-radio-".concat(size), {
         'maru-radio-primary': color === 'primary'
       })
     })), label && jsx("label", __assign({
       htmlFor: inputId,
-      className: classNames('maru-radio-label', {
-        'label-disabled': props.disabled
-      }),
+      className: "maru-radio-label",
       onClick: function onClick(e) {
         return e.stopPropagation();
       }
@@ -72147,9 +72596,10 @@ var Radio = /*#__PURE__*/forwardRef(function (_a, ref) {
 });
 Radio.defaultProps = {
   checked: undefined,
-  color: 'default',
-  gap: '8px',
-  label: undefined
+  color: 'primary',
+  gap: TRadioGap.SixPx,
+  label: undefined,
+  size: TRadioSize.Sm
 };
 Radio.displayName = 'Radio';
 
@@ -72173,8 +72623,8 @@ function Contents() {
   }));
 }
 
-var css_248z$e = "@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 20px 20px 20px;\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: 210px;\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: 72px;\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$e);
+var css_248z$i = "@keyframes colorFade {\n  0%, 100% {\n    background-color: var(--maru-skeleton-base);\n  }\n  50% {\n    background-color: var(--maru-skeleton-highlight);\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: var(--maru-background-secondary);\n}\n.maru-skeleton .maru-skeleton-side-bar {\n  width: 250px;\n  height: 100%;\n  border-radius: 0 20px 20px 0;\n  background-color: var(--maru-background-secondary);\n  box-shadow: 0 0 6px 0 var(--maru-shadow-default);\n  padding: 27px 20px 20px 20px;\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: 210px;\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: 72px;\n  box-shadow: 0 4px 6px -4px var(--maru-shadow-default);\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 var(--maru-shadow-default);\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$i);
 
 function Skeleton(_a) {
   var _b = _a.variant,
@@ -72222,12 +72672,9 @@ function Skeleton(_a) {
   });
 }
 
-var css_248z$d = ".maru-slider-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  position: relative;\n  width: 100%;\n}\n.maru-slider-container.maru-slider-show-value {\n  margin-top: 24px;\n}\n\n.maru-slider-thumb-wrapper {\n  position: absolute;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  pointer-events: none;\n  left: calc(7px + (100% - 14px) * var(--slider-progress-raw) / 100);\n}\n\n.maru-slider-value {\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  position: absolute;\n  bottom: 100%;\n  margin-bottom: 4px;\n  color: #5c5c5c;\n  white-space: nowrap;\n}\n\n.maru-slider-custom-thumb {\n  width: 14px;\n  height: 14px;\n  background: white;\n  border-radius: 50%;\n  transition: transform 0.2s ease;\n}\n\n.maru-slider {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  outline: none;\n  width: 100%;\n  height: 6px;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: background 0.2s ease;\n}\n.maru-slider::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 14px;\n  height: 14px;\n  background: white;\n  border-radius: 50%;\n  transition: transform 0.2s ease;\n}\n.maru-slider::-moz-range-thumb {\n  appearance: none;\n  width: 14px;\n  height: 14px;\n  background: white;\n  border-radius: 50%;\n  transition: transform 0.2s ease;\n}\n.maru-slider:active::-webkit-slider-thumb {\n  transform: scale(1.2);\n}\n.maru-slider:active::-moz-range-thumb {\n  transform: scale(1.2);\n}\n.maru-slider[disabled] {\n  cursor: default;\n  opacity: 0.5;\n}\n.maru-slider[disabled]:active::-webkit-slider-thumb {\n  transform: none;\n}\n.maru-slider[disabled]:active::-moz-range-thumb {\n  transform: none;\n}\n\n.maru-slider-primary .maru-slider {\n  background: linear-gradient(to right, var(--p) 0%, var(--p) var(--slider-progress), #e4e4e4 var(--slider-progress), #e4e4e4 100%);\n}\n.maru-slider-primary .maru-slider::-webkit-slider-thumb {\n  border: 3px solid var(--p);\n}\n.maru-slider-primary .maru-slider::-moz-range-thumb {\n  border: 3px solid var(--p);\n}\n.maru-slider-primary .maru-slider-custom-thumb {\n  border: 3px solid var(--p);\n}\n\n.maru-slider-secondary .maru-slider {\n  background: linear-gradient(to right, #8c8c8c 0%, #8c8c8c var(--slider-progress), #e4e4e4 var(--slider-progress), #e4e4e4 100%);\n}\n.maru-slider-secondary .maru-slider::-webkit-slider-thumb {\n  border: 3px solid #8c8c8c;\n}\n.maru-slider-secondary .maru-slider::-moz-range-thumb {\n  border: 3px solid #8c8c8c;\n}\n.maru-slider-secondary .maru-slider-custom-thumb {\n  border: 3px solid #8c8c8c;\n}\n\n.maru-slider-positive .maru-slider {\n  background: linear-gradient(to right, #308acc 0%, #308acc var(--slider-progress), #e4e4e4 var(--slider-progress), #e4e4e4 100%);\n}\n.maru-slider-positive .maru-slider::-webkit-slider-thumb {\n  border: 3px solid #308acc;\n}\n.maru-slider-positive .maru-slider::-moz-range-thumb {\n  border: 3px solid #308acc;\n}\n.maru-slider-positive .maru-slider-custom-thumb {\n  border: 3px solid #308acc;\n}\n\n.maru-slider-warning .maru-slider {\n  background: linear-gradient(to right, #ffb020 0%, #ffb020 var(--slider-progress), #e4e4e4 var(--slider-progress), #e4e4e4 100%);\n}\n.maru-slider-warning .maru-slider::-webkit-slider-thumb {\n  border: 3px solid #ffb020;\n}\n.maru-slider-warning .maru-slider::-moz-range-thumb {\n  border: 3px solid #ffb020;\n}\n.maru-slider-warning .maru-slider-custom-thumb {\n  border: 3px solid #ffb020;\n}\n\n.maru-slider-danger .maru-slider {\n  background: linear-gradient(to right, #e53e3e 0%, #e53e3e var(--slider-progress), #e4e4e4 var(--slider-progress), #e4e4e4 100%);\n}\n.maru-slider-danger .maru-slider::-webkit-slider-thumb {\n  border: 3px solid #e53e3e;\n}\n.maru-slider-danger .maru-slider::-moz-range-thumb {\n  border: 3px solid #e53e3e;\n}\n.maru-slider-danger .maru-slider-custom-thumb {\n  border: 3px solid #e53e3e;\n}\n\n.maru-slider-success .maru-slider {\n  background: linear-gradient(to right, #32a483 0%, #32a483 var(--slider-progress), #e4e4e4 var(--slider-progress), #e4e4e4 100%);\n}\n.maru-slider-success .maru-slider::-webkit-slider-thumb {\n  border: 3px solid #32a483;\n}\n.maru-slider-success .maru-slider::-moz-range-thumb {\n  border: 3px solid #32a483;\n}\n.maru-slider-success .maru-slider-custom-thumb {\n  border: 3px solid #32a483;\n}\n\n.maru-slider-show-value .maru-slider::-webkit-slider-thumb {\n  opacity: 0;\n}\n.maru-slider-show-value .maru-slider::-moz-range-thumb {\n  opacity: 0;\n}\n.maru-slider-show-value:active .maru-slider-custom-thumb {\n  transform: scale(1.2);\n}\n.maru-slider-show-value.maru-slider-disabled .maru-slider-custom-thumb {\n  transform: none;\n}";
-styleInject(css_248z$d);
+var css_248z$h = ".maru-slider-container {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  width: 100%;\n}\n.maru-slider-container.maru-slider-show-value {\n  margin-top: 24px;\n}\n\n.maru-slider-control {\n  position: relative;\n  flex-shrink: 0;\n  width: 100%;\n  height: 24px;\n}\n\n.maru-slider {\n  position: absolute;\n  z-index: 2;\n  inset: 0;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  width: 100%;\n  height: 24px;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n  outline: none;\n}\n.maru-slider::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 20px;\n  height: 24px;\n}\n.maru-slider::-moz-range-thumb {\n  appearance: none;\n  width: 20px;\n  height: 24px;\n  border: 0;\n}\n.maru-slider[disabled] {\n  cursor: default;\n}\n\n.maru-slider-rail,\n.maru-slider-track {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  transform: translateY(-50%);\n  border-radius: 6px;\n  pointer-events: none;\n}\n\n.maru-slider-rail {\n  width: 100%;\n  height: 4px;\n  background-color: var(--maru-border-secondary);\n}\n\n.maru-slider-track {\n  width: calc(10px + (100% - 20px) * var(--slider-progress-raw) / 100);\n  height: 6px;\n}\n\n.maru-slider-custom-thumb {\n  position: absolute;\n  top: 50%;\n  left: calc(10px + (100% - 20px) * var(--slider-progress-raw) / 100);\n  z-index: 1;\n  box-sizing: border-box;\n  width: 20px;\n  height: 20px;\n  transform: translate(-50%, -50%);\n  border: 3px solid;\n  border-radius: 50%;\n  background-color: var(--maru-background-primary);\n  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);\n  pointer-events: none;\n  transition: box-shadow 0.2s ease;\n}\n.maru-slider-custom-thumb::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  z-index: -1;\n  width: 40px;\n  height: 40px;\n  transform: translate(-50%, -50%);\n  border-radius: 50%;\n  background-color: var(--maru-slider-color);\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\n.maru-slider-current-value {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 500;\n  position: absolute;\n  bottom: calc(100% + 7px);\n  left: 50%;\n  transform: translateX(-50%);\n  color: var(--maru-text-secondary);\n  line-height: 20px;\n  white-space: nowrap;\n}\n\n.maru-slider:not(:disabled):hover ~ .maru-slider-custom-thumb::before,\n.maru-slider:not(:disabled):focus-visible ~ .maru-slider-custom-thumb::before {\n  opacity: 0.09;\n}\n\n.maru-slider:not(:disabled):active ~ .maru-slider-custom-thumb {\n  box-shadow: none;\n}\n.maru-slider:not(:disabled):active ~ .maru-slider-custom-thumb::before {\n  opacity: 0.32;\n}\n\n.maru-slider-values {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 500;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  height: 20px;\n  color: var(--maru-text-secondary);\n  line-height: 20px;\n  white-space: nowrap;\n  pointer-events: none;\n}\n\n.maru-slider-disabled {\n  opacity: 0.5;\n}\n\n.maru-slider-primary {\n  --maru-slider-color: var(--p);\n}\n.maru-slider-primary .maru-slider-track {\n  background-color: var(--maru-slider-color);\n}\n.maru-slider-primary .maru-slider-custom-thumb {\n  border-color: var(--maru-slider-color);\n}\n\n.maru-slider-secondary {\n  --maru-slider-color: var(--maru-icon-tertiary);\n}\n.maru-slider-secondary .maru-slider-track {\n  background-color: var(--maru-slider-color);\n}\n.maru-slider-secondary .maru-slider-custom-thumb {\n  border-color: var(--maru-slider-color);\n}\n\n.maru-slider-positive {\n  --maru-slider-color: var(--maru-background-info-solid-primary);\n}\n.maru-slider-positive .maru-slider-track {\n  background-color: var(--maru-slider-color);\n}\n.maru-slider-positive .maru-slider-custom-thumb {\n  border-color: var(--maru-slider-color);\n}\n\n.maru-slider-warning {\n  --maru-slider-color: var(--maru-background-warning-solid-primary);\n}\n.maru-slider-warning .maru-slider-track {\n  background-color: var(--maru-slider-color);\n}\n.maru-slider-warning .maru-slider-custom-thumb {\n  border-color: var(--maru-slider-color);\n}\n\n.maru-slider-danger {\n  --maru-slider-color: var(--maru-background-error-solid-primary);\n}\n.maru-slider-danger .maru-slider-track {\n  background-color: var(--maru-slider-color);\n}\n.maru-slider-danger .maru-slider-custom-thumb {\n  border-color: var(--maru-slider-color);\n}\n\n.maru-slider-success {\n  --maru-slider-color: var(--maru-background-positive-solid-primary);\n}\n.maru-slider-success .maru-slider-track {\n  background-color: var(--maru-slider-color);\n}\n.maru-slider-success .maru-slider-custom-thumb {\n  border-color: var(--maru-slider-color);\n}";
+styleInject(css_248z$h);
 
-/**
- * showValue에 관한 글: showValue가 true면 기존 input에 있는 thumb를 숨기고 custom thumb를 보여준다.
- */
 function Slider(_a) {
   var value = _a.value,
     onChange = _a.onChange,
@@ -72254,35 +72701,49 @@ function Slider(_a) {
       'maru-slider-show-value': showValue
     }, className),
     style: {
-      '--slider-progress': "".concat(progress, "%"),
       '--slider-progress-raw': progress
     }
   }, {
-    children: [jsx("input", {
-      type: "range",
-      className: "maru-slider",
-      value: value,
-      onChange: handleSliderChange,
-      min: min,
-      max: max,
-      step: step,
-      disabled: disabled
-    }), showValue && jsxs("div", __assign({
-      className: "maru-slider-thumb-wrapper"
+    children: [jsxs("div", __assign({
+      className: "maru-slider-control"
     }, {
-      children: [jsx("span", __assign({
-        className: "maru-slider-value"
-      }, {
-        children: value
-      })), jsx("div", {
+      children: [jsx("input", {
+        type: "range",
+        className: "maru-slider",
+        value: value,
+        onChange: handleSliderChange,
+        min: min,
+        max: max,
+        step: step,
+        disabled: disabled
+      }), jsx("div", {
+        className: "maru-slider-rail"
+      }), jsx("div", {
+        className: "maru-slider-track"
+      }), jsx("div", __assign({
         className: "maru-slider-custom-thumb"
+      }, {
+        children: showValue && jsx("span", __assign({
+          className: "maru-slider-current-value"
+        }, {
+          children: value
+        }))
+      }))]
+    })), jsxs("div", __assign({
+      className: "maru-slider-values",
+      "aria-hidden": "true"
+    }, {
+      children: [jsx("span", {
+        children: min
+      }), jsx("span", {
+        children: max
       })]
     }))]
   }));
 }
 
-var css_248z$c = ".maru-textarea-wrapper .maru-textarea-resizable-wrapper {\n  position: relative;\n}\n.maru-textarea-wrapper .maru-textarea {\n  display: flex;\n  justify-content: center;\n  align-items: flex-start;\n  flex-direction: row;\n  padding: 8px 8px 8px 12px;\n  border: 1px solid #e4e4e4;\n  border-radius: 6px;\n  gap: 8px;\n}\n.maru-textarea-wrapper .maru-textarea > textarea {\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: 400;\n  color: #5c5c5c;\n  resize: none;\n}\n.maru-textarea-wrapper .maru-textarea > textarea::-webkit-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-textarea-wrapper .maru-textarea > textarea::-moz-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-textarea-wrapper .maru-textarea > textarea:-ms-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-textarea-wrapper .maru-textarea > textarea::-ms-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-textarea-wrapper .maru-textarea > textarea::placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-textarea-wrapper .maru-textarea:focus-visible, .maru-textarea-wrapper .maru-textarea:focus-within {\n  border-color: #5c5c5c;\n  background-color: #fafafa;\n}\n.maru-textarea-wrapper .maru-textarea.errored {\n  outline: 1px solid #e53e3e;\n  border-color: #e53e3e;\n}\n.maru-textarea-wrapper .maru-textarea:hover {\n  outline: 1px solid #e4e4e4;\n  border-color: #e4e4e4;\n  background-color: #fafafa;\n}\n.maru-textarea-wrapper .maru-textarea.disabled {\n  background-color: #fafafa;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea {\n  color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::-webkit-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::-moz-placeholder {\n  color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea:-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::placeholder {\n  color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled:hover {\n  outline: unset;\n}\n.maru-textarea-wrapper .maru-textarea-end-node-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-textarea-wrapper .maru-textarea-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-textarea-wrapper .resizer {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  height: 5px;\n  width: 100%;\n  cursor: ns-resize;\n  background: transparent;\n}\n.maru-textarea-wrapper .maru-textarea-footer {\n  display: block;\n  margin-top: 4px;\n}\n.maru-textarea-wrapper .maru-textarea-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 css_248z$g = ".maru-textarea-wrapper .maru-textarea-resizable-wrapper {\n  position: relative;\n}\n.maru-textarea-wrapper .maru-textarea {\n  display: flex;\n  justify-content: center;\n  align-items: flex-start;\n  flex-direction: row;\n  padding: 8px 8px 8px 12px;\n  border: 1px solid var(--maru-border-secondary);\n  border-radius: 6px;\n  gap: 8px;\n}\n.maru-textarea-wrapper .maru-textarea > textarea {\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  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--maru-text-secondary);\n  resize: none;\n}\n.maru-textarea-wrapper .maru-textarea > textarea::-webkit-input-placeholder {\n  font-weight: 300;\n  color: var(--maru-text-tertiary);\n}\n.maru-textarea-wrapper .maru-textarea > textarea::-moz-placeholder {\n  font-weight: 300;\n  color: var(--maru-text-tertiary);\n}\n.maru-textarea-wrapper .maru-textarea > textarea:-ms-input-placeholder {\n  font-weight: 300;\n  color: var(--maru-text-tertiary);\n}\n.maru-textarea-wrapper .maru-textarea > textarea::-ms-input-placeholder {\n  font-weight: 300;\n  color: var(--maru-text-tertiary);\n}\n.maru-textarea-wrapper .maru-textarea > textarea::placeholder {\n  font-weight: 300;\n  color: var(--maru-text-tertiary);\n}\n.maru-textarea-wrapper .maru-textarea:focus-visible, .maru-textarea-wrapper .maru-textarea:focus-within {\n  border-color: #5c5c5c;\n  background-color: var(--maru-background-primary-hover);\n}\n.maru-textarea-wrapper .maru-textarea.errored {\n  outline: 1px solid var(--maru-border-error-primary);\n  border-color: var(--maru-border-error-primary);\n}\n.maru-textarea-wrapper .maru-textarea:hover {\n  outline: 1px solid var(--maru-border-secondary);\n  border-color: var(--maru-border-secondary);\n  background-color: var(--maru-background-primary-hover);\n}\n.maru-textarea-wrapper .maru-textarea.disabled {\n  background-color: var(--maru-background-secondary);\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea {\n  color: var(--maru-text-disabled);\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::-webkit-input-placeholder {\n  color: var(--maru-text-disabled);\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::-moz-placeholder {\n  color: var(--maru-text-disabled);\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea:-ms-input-placeholder {\n  color: var(--maru-text-disabled);\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::-ms-input-placeholder {\n  color: var(--maru-text-disabled);\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::placeholder {\n  color: var(--maru-text-disabled);\n}\n.maru-textarea-wrapper .maru-textarea.disabled:hover {\n  outline: unset;\n}\n.maru-textarea-wrapper .maru-textarea-end-node-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-textarea-wrapper .maru-textarea-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-textarea-wrapper .resizer {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  height: 5px;\n  width: 100%;\n  cursor: ns-resize;\n  background: transparent;\n}\n.maru-textarea-wrapper .maru-textarea-footer {\n  display: block;\n  margin-top: 4px;\n}\n.maru-textarea-wrapper .maru-textarea-footer > span {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--maru-text-error-primary);\n}";
+styleInject(css_248z$g);
 
 var Textarea = /*#__PURE__*/forwardRef(function (_a, textareaRef) {
   var invalid = _a.invalid,
@@ -72416,7 +72877,7 @@ var Textarea = /*#__PURE__*/forwardRef(function (_a, textareaRef) {
           }, {
             children: jsx(Icon, {
               name: ICONS.X_s1615,
-              color: "#5c5c5c"
+              color: "textSecondary"
             })
           }))
         }))]
@@ -72445,116 +72906,55 @@ Textarea.defaultProps = {
 };
 Textarea.displayName = 'Textarea';
 
-var css_248z$b = ".maru-toggle-wrapper {\n  display: inline-block;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper {\n  position: relative;\n  width: 30px;\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: #4a4e52;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-rail {\n  position: absolute;\n  width: 30px;\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::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-color: transparent;\n  transition: background-color 0.2s ease-in-out;\n  pointer-events: none;\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: #308acc;\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: #32a483;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle:not(:disabled):hover ~ .maru-toggle-rail::after {\n  background-color: rgba(0, 0, 0, 0.2);\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-thumb {\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  transition: all 0.2s ease-in-out;\n  background-color: white;\n  top: 2px;\n  right: 14px;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-thumb .maru-toggle-thumb-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  width: inherit;\n  height: inherit;\n  color: #4a4e52;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle-thumb .maru-toggle-thumb-icon > svg {\n  display: block;\n  width: inherit;\n  height: inherit;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper .maru-toggle:checked ~ .maru-toggle-thumb {\n  transform: translateX(12px);\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.maru-toggle-primary .maru-toggle:checked ~ .maru-toggle-thumb .maru-toggle-thumb-icon {\n  color: var(--p);\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.maru-toggle-secondary .maru-toggle:checked ~ .maru-toggle-thumb .maru-toggle-thumb-icon {\n  color: #8c8c8c;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.maru-toggle-positive .maru-toggle:checked ~ .maru-toggle-thumb .maru-toggle-thumb-icon {\n  color: #308acc;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.maru-toggle-warning .maru-toggle:checked ~ .maru-toggle-thumb .maru-toggle-thumb-icon {\n  color: #ffb020;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.maru-toggle-danger .maru-toggle:checked ~ .maru-toggle-thumb .maru-toggle-thumb-icon {\n  color: #e53e3e;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.maru-toggle-success .maru-toggle:checked ~ .maru-toggle-thumb .maru-toggle-thumb-icon {\n  color: #32a483;\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-thumb {\n  background-color: white;\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle-thumb .maru-toggle-thumb-icon {\n  color: #bdbdbd;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle:not(:checked) ~ .maru-toggle-rail {\n  background-color: #e4e4e4 !important;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle:checked ~ .maru-toggle-rail-primary {\n  background-color: var(--p-20) !important;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle:checked ~ .maru-toggle-rail-secondary {\n  background-color: #e4e4e4 !important;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle:checked ~ .maru-toggle-rail-positive {\n  background-color: #d6e8f5 !important;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle:checked ~ .maru-toggle-rail-warning {\n  background-color: #ffefd2 !important;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle:checked ~ .maru-toggle-rail-danger {\n  background-color: #fad8d8 !important;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.toggle-disabled .maru-toggle:checked ~ .maru-toggle-rail-success {\n  background-color: #d6ede6 !important;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.maru-toggle-primary.toggle-disabled .maru-toggle:checked ~ .maru-toggle-thumb .maru-toggle-thumb-icon {\n  color: var(--p-20);\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.maru-toggle-secondary.toggle-disabled .maru-toggle:checked ~ .maru-toggle-thumb .maru-toggle-thumb-icon {\n  color: #e4e4e4;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.maru-toggle-positive.toggle-disabled .maru-toggle:checked ~ .maru-toggle-thumb .maru-toggle-thumb-icon {\n  color: #d6e8f5;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.maru-toggle-warning.toggle-disabled .maru-toggle:checked ~ .maru-toggle-thumb .maru-toggle-thumb-icon {\n  color: #ffefd2;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.maru-toggle-danger.toggle-disabled .maru-toggle:checked ~ .maru-toggle-thumb .maru-toggle-thumb-icon {\n  color: #fad8d8;\n}\n.maru-toggle-wrapper .maru-toggle-inner-wrapper.maru-toggle-success.toggle-disabled .maru-toggle:checked ~ .maru-toggle-thumb .maru-toggle-thumb-icon {\n  color: #d6ede6;\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 #308acc inset;\n}\n.maru-toggle-text-positive .maru-toggle-text-thumb {\n  background-color: #308acc;\n}\n.maru-toggle-text-positive .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #d6e8f5;\n}\n.maru-toggle-text-positive .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #d6e8f5;\n}\n.maru-toggle-text-positive .maru-toggle-text-button {\n  color: #308acc;\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 #97c4e5 inset;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-thumb {\n  background-color: #97c4e5;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #eaf3fa;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #eaf3fa;\n}\n.maru-toggle-text-positive.maru-toggle-text-disabled .maru-toggle-text-button {\n  color: #97c4e5;\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 #32a483 inset;\n}\n.maru-toggle-text-success .maru-toggle-text-thumb {\n  background-color: #32a483;\n}\n.maru-toggle-text-success .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #d6ede6;\n}\n.maru-toggle-text-success .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #d6ede6;\n}\n.maru-toggle-text-success .maru-toggle-text-button {\n  color: #32a483;\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 #98d1c1 inset;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .maru-toggle-text-thumb {\n  background-color: #98d1c1;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-before {\n  box-shadow: -4px 0px 4px 0px #eaf6f3;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .maru-toggle-text-thumb.shadow-after {\n  box-shadow: 4px 0px 4px 0px #eaf6f3;\n}\n.maru-toggle-text-success.maru-toggle-text-disabled .maru-toggle-text-button {\n  color: #98d1c1;\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.maru-toggle-text .maru-toggle-text-thumb::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-color: transparent;\n  transition: background-color 0.2s ease-in-out;\n  pointer-events: none;\n}\n.maru-toggle-text:not(.maru-toggle-text-disabled):hover .maru-toggle-text-thumb::after {\n  background-color: rgba(0, 0, 0, 0.2);\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$b);
+var css_248z$f = ".maru-toggle-wrapper {\n  display: inline-flex;\n  align-items: center;\n  width: fit-content;\n  gap: 8px;\n  cursor: pointer;\n}\n.maru-toggle-wrapper-disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n\n.maru-toggle-inner-wrapper {\n  --maru-toggle-width: 36px;\n  --maru-toggle-height: 20px;\n  --maru-toggle-thumb-size: 16px;\n  --maru-toggle-thumb-distance: 16px;\n  position: relative;\n  display: inline-flex;\n  flex-shrink: 0;\n  width: var(--maru-toggle-width);\n  height: var(--maru-toggle-height);\n}\n.maru-toggle-inner-wrapper-md {\n  --maru-toggle-width: 44px;\n  --maru-toggle-height: 24px;\n  --maru-toggle-thumb-size: 20px;\n  --maru-toggle-thumb-distance: 20px;\n}\n\n.maru-toggle {\n  position: absolute;\n  z-index: 1;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  appearance: none;\n  cursor: pointer;\n}\n.maru-toggle:focus {\n  outline: none;\n}\n.maru-toggle:disabled {\n  cursor: default;\n}\n.maru-toggle:checked ~ .maru-toggle-rail {\n  border-color: var(--maru-background-brand-solid-primary);\n  background-color: var(--maru-background-brand-solid-primary);\n}\n.maru-toggle:not(:disabled):hover:checked ~ .maru-toggle-rail {\n  border-color: var(--maru-background-brand-solid-primary-hover);\n  background-color: var(--maru-background-brand-solid-primary-hover);\n}\n.maru-toggle:focus-visible ~ .maru-toggle-rail {\n  box-shadow: 0 0 0 2px var(--maru-background-primary), 0 0 0 4px #dbe4ec;\n}\n.maru-toggle:checked ~ .maru-toggle-thumb {\n  transform: translateX(var(--maru-toggle-thumb-distance));\n}\n\n.maru-toggle-rail {\n  position: absolute;\n  inset: 0;\n  box-sizing: border-box;\n  border: 1px solid var(--maru-border-secondary);\n  border-radius: 17.5px;\n  background-color: var(--maru-background-quaternary);\n  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;\n}\n\n.maru-toggle-thumb {\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: var(--maru-toggle-thumb-size);\n  height: var(--maru-toggle-thumb-size);\n  border-radius: 50%;\n  background-color: var(--maru-background-primary);\n  box-shadow: 0 2px 4px var(--maru-shadow-default);\n  transition: transform 0.2s ease-in-out;\n}\n\n.maru-toggle-label {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--maru-text-primary);\n  line-height: 20px;\n  white-space: nowrap;\n}";
+styleInject(css_248z$f);
 
 function Toggle(_a) {
   var checked = _a.checked,
     onChange = _a.onChange,
     className = _a.className,
-    _b = _a.color,
-    color = _b === void 0 ? 'primary' : _b,
     disabled = _a.disabled,
     text = _a.text,
-    _c = _a.showIcon,
-    showIcon = _c === void 0 ? false : _c,
-    _d = _a.scale,
-    scale = _d === void 0 ? 1 : _d;
-  var _e = useState(false),
-    buttonToggle = _e[0],
-    setButtonToggle = _e[1];
-  useEffect(function () {
-    setButtonToggle(checked);
-  }, [checked]);
+    _b = _a.size,
+    size = _b === void 0 ? 'sm' : _b,
+    props = __rest(_a, ["checked", "onChange", "className", "disabled", "text", "size"]);
   var handleInputChange = function handleInputChange(e) {
     onChange(e.currentTarget.checked);
   };
-  var handleClick = function handleClick() {
-    setButtonToggle(function (prev) {
-      onChange(!prev);
-      return !prev;
-    });
-  };
-  return jsx(Fragment, {
-    children: text ? jsxs("div", __assign({
-      className: classNames('maru-toggle-text', "maru-toggle-text-".concat(color), {
-        'maru-toggle-text-disabled': disabled
-      }, className),
-      style: {
-        transform: "scale(".concat(scale, ")"),
-        transformOrigin: 'left center'
-      }
+  return jsxs("label", __assign({
+    className: classNames('maru-toggle-wrapper', {
+      'maru-toggle-wrapper-disabled': disabled
+    }, className)
+  }, {
+    children: [jsxs("span", __assign({
+      className: classNames('maru-toggle-inner-wrapper', "maru-toggle-inner-wrapper-".concat(size))
     }, {
-      children: [jsx("span", {
-        className: classNames('maru-toggle-text-thumb', {
-          'slide-after': buttonToggle,
-          'shadow-before': buttonToggle,
-          'shadow-after': !buttonToggle
-        })
-      }), jsxs("div", __assign({
-        className: "maru-toggle-text-button-wrapper"
-      }, {
-        children: [jsx("button", __assign({
-          type: "button",
-          value: text.left,
-          onClick: handleClick,
-          className: classNames('maru-toggle-text-button', {
-            'toggle-active': !buttonToggle
-          }),
-          disabled: disabled
-        }, {
-          children: text.left
-        })), jsx("button", __assign({
-          type: "button",
-          value: text.right,
-          onClick: handleClick,
-          className: classNames('maru-toggle-text-button', {
-            'toggle-active': buttonToggle
-          }),
-          disabled: disabled
-        }, {
-          children: text.right
-        }))]
-      }))]
-    })) : jsx("div", __assign({
-      className: classNames('maru-toggle-wrapper', className),
-      style: {
-        transform: "scale(".concat(scale, ")"),
-        transformOrigin: 'left center'
-      }
+      children: [jsx("input", __assign({}, props, {
+        type: "checkbox",
+        className: "maru-toggle",
+        disabled: disabled,
+        checked: checked,
+        onChange: handleInputChange
+      })), jsx("span", {
+        className: "maru-toggle-rail"
+      }), jsx("span", {
+        className: "maru-toggle-thumb"
+      })]
+    })), text && jsx("span", __assign({
+      className: "maru-toggle-label"
     }, {
-      children: jsxs("div", __assign({
-        className: classNames('maru-toggle-inner-wrapper', "maru-toggle-".concat(color), {
-          'toggle-disabled': disabled
-        })
-      }, {
-        children: [jsx("input", {
-          type: "checkbox",
-          className: "maru-toggle",
-          disabled: disabled,
-          checked: checked == null ? undefined : !!checked,
-          onChange: handleInputChange
-        }), jsx("span", {
-          className: classNames('maru-toggle-rail', "maru-toggle-rail-".concat(color))
-        }), jsx("span", __assign({
-          className: "maru-toggle-thumb"
-        }, {
-          children: showIcon && jsx("span", __assign({
-            className: "maru-toggle-thumb-icon"
-          }, {
-            children: jsx(Icon, {
-              name: checked ? ICONS.Check_s1413 : ICONS.SubtractLine_s1610,
-              color: "inherit"
-            })
-          }))
-        }))]
-      }))
-    }))
-  });
+      children: text
+    }))]
+  }));
 }
 
-var css_248z$a = ".maru-tooltip-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  width: -webkit-fit-content;\n  width: -moz-fit-content;\n  width: fit-content;\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: 400;\n  line-height: 140%;\n}";
-styleInject(css_248z$a);
+var TToggleSize = {
+  Md: 'md',
+  Sm: 'sm'
+};
+
+var css_248z$e = ".maru-tooltip-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  width: -webkit-fit-content;\n  width: -moz-fit-content;\n  width: fit-content;\n}\n\n.maru-tooltip {\n  box-sizing: border-box;\n  max-width: 340px;\n  z-index: 1612;\n  border-radius: 8px;\n  padding: 10px 14px;\n  display: none;\n  background-color: var(--maru-feature-tooltip);\n  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.07);\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: var(--maru-text-white);\n  word-break: break-word;\n  white-space: pre-wrap;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 16px;\n}";
+styleInject(css_248z$e);
 
 function Tooltip(_a) {
   var children = _a.children,
@@ -72626,8 +73026,8 @@ function Tooltip(_a) {
   }));
 }
 
-var css_248z$9 = ".maru-button-group {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  flex-direction: row;\n  width: fit-content;\n  user-select: none;\n}\n\n.maru-button-group-button {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  border: 0;\n  background-color: transparent;\n  cursor: pointer;\n  white-space: nowrap;\n  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;\n}\n.maru-button-group-button:focus-visible {\n  outline: 2px solid var(--p-20);\n  outline-offset: 2px;\n}\n.maru-button-group-button:disabled {\n  cursor: default;\n}\n\n.maru-button-group-size-sm .maru-button-group-button {\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  padding: 4px 10px;\n  border-radius: 4px;\n  min-height: 28px;\n}\n\n.maru-button-group-size-md .maru-button-group-button {\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  padding: 8px 12px;\n  border-radius: 4px;\n  min-height: 34px;\n  color: #5c5c5c;\n}\n\n.maru-button-group-segmented {\n  background-color: #fafafa;\n  border-radius: 6px;\n  padding: 4px;\n  gap: 4px;\n}\n.maru-button-group-segmented .maru-button-group-button {\n  color: #5c5c5c;\n}\n.maru-button-group-segmented .maru-button-group-button:not(.is-selected):not(:disabled):hover {\n  background-color: #e4e4e4;\n  color: #4a4e52;\n}\n.maru-button-group-segmented .maru-button-group-button.is-selected {\n  background-color: var(--p);\n  color: white;\n  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n}\n.maru-button-group-segmented .maru-button-group-button:disabled {\n  color: #bdbdbd;\n}\n.maru-button-group-segmented .maru-button-group-button.is-selected:disabled {\n  background-color: #e4e4e4;\n  color: #8c8c8c;\n  box-shadow: none;\n}\n.maru-button-group-segmented .maru-button-group-button svg {\n  display: block;\n}\n.maru-button-group-segmented .maru-button-group-button svg path[stroke],\n.maru-button-group-segmented .maru-button-group-button svg rect[stroke],\n.maru-button-group-segmented .maru-button-group-button svg circle[stroke] {\n  stroke: currentColor;\n}\n.maru-button-group-segmented .maru-button-group-button svg path[fill],\n.maru-button-group-segmented .maru-button-group-button svg rect[fill],\n.maru-button-group-segmented .maru-button-group-button svg circle[fill] {\n  fill: currentColor;\n}\n.maru-button-group-segmented.is-disabled {\n  background-color: #fafafa;\n}\n.maru-button-group-segmented.is-disabled .maru-button-group-button {\n  color: #bdbdbd;\n  cursor: default;\n}\n.maru-button-group-segmented.is-disabled .maru-button-group-button.is-selected {\n  background-color: #e4e4e4;\n  color: #8c8c8c;\n  box-shadow: none;\n}\n\n.maru-button-group-segmented.maru-button-group-segmented-secondary .maru-button-group-button.is-selected {\n  background-color: #ffffff;\n  color: var(--p);\n}\n.maru-button-group-segmented.maru-button-group-segmented-secondary .maru-button-group-button.is-selected:disabled {\n  background-color: #e4e4e4;\n  color: #8c8c8c;\n  box-shadow: none;\n}\n.maru-button-group-segmented.maru-button-group-segmented-secondary.is-disabled .maru-button-group-button.is-selected {\n  background-color: #e4e4e4;\n  color: #8c8c8c;\n  box-shadow: none;\n}\n\n.maru-button-group-icon {\n  background-color: white;\n  border: 1px solid var(--p);\n  border-radius: 4px;\n  padding: 0;\n  gap: 0;\n  overflow: hidden;\n}\n.maru-button-group-icon .maru-button-group-button {\n  color: #8c8c8c;\n  padding: 0;\n  border-radius: 0;\n}\n.maru-button-group-icon .maru-button-group-button:first-child {\n  border-top-left-radius: 3px;\n  border-bottom-left-radius: 3px;\n}\n.maru-button-group-icon .maru-button-group-button:last-child {\n  border-top-right-radius: 3px;\n  border-bottom-right-radius: 3px;\n}\n.maru-button-group-icon .maru-button-group-button + .maru-button-group-button {\n  border-left: 1px solid var(--p-20);\n}\n.maru-button-group-icon .maru-button-group-button:not(.is-selected):not(:disabled):hover {\n  background-color: var(--p-07);\n  color: var(--p);\n}\n.maru-button-group-icon .maru-button-group-button.is-selected {\n  background-color: var(--p);\n  color: white;\n}\n.maru-button-group-icon .maru-button-group-button:disabled {\n  background-color: #fafafa;\n  color: #bdbdbd;\n}\n.maru-button-group-icon .maru-button-group-button.is-selected:disabled {\n  background-color: #e4e4e4;\n  color: #8c8c8c;\n}\n.maru-button-group-icon .maru-button-group-button svg {\n  display: block;\n}\n.maru-button-group-icon .maru-button-group-button svg path[stroke],\n.maru-button-group-icon .maru-button-group-button svg rect[stroke],\n.maru-button-group-icon .maru-button-group-button svg circle[stroke] {\n  stroke: currentColor;\n}\n.maru-button-group-icon .maru-button-group-button svg path[fill],\n.maru-button-group-icon .maru-button-group-button svg rect[fill],\n.maru-button-group-icon .maru-button-group-button svg circle[fill] {\n  fill: currentColor;\n}\n.maru-button-group-icon.is-disabled {\n  border-color: #bdbdbd;\n  background-color: #fafafa;\n}\n.maru-button-group-icon.is-disabled .maru-button-group-button {\n  color: #bdbdbd;\n  cursor: default;\n}\n.maru-button-group-icon.is-disabled .maru-button-group-button + .maru-button-group-button {\n  border-left-color: #bdbdbd;\n}\n.maru-button-group-icon.is-disabled .maru-button-group-button.is-selected {\n  background-color: #e4e4e4;\n  color: #8c8c8c;\n}\n\n.maru-button-group-icon.maru-button-group-size-sm .maru-button-group-button {\n  width: 26px;\n  height: 26px;\n}\n\n.maru-button-group-icon.maru-button-group-size-md .maru-button-group-button {\n  width: 32px;\n  height: 32px;\n}";
-styleInject(css_248z$9);
+var css_248z$d = ".maru-button-group {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  flex-direction: row;\n  width: fit-content;\n  user-select: none;\n}\n\n.maru-button-group-button {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  border: 0;\n  background-color: transparent;\n  cursor: pointer;\n  white-space: nowrap;\n  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;\n}\n.maru-button-group-button:focus-visible {\n  outline: 2px solid var(--p-20);\n  outline-offset: 2px;\n}\n.maru-button-group-button:disabled {\n  cursor: default;\n}\n\n.maru-button-group-size-sm .maru-button-group-button {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 12px;\n  font-weight: 500;\n  padding: 4px 10px;\n  border-radius: 4px;\n  min-height: 28px;\n}\n\n.maru-button-group-size-md .maru-button-group-button {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 500;\n  padding: 8px 12px;\n  border-radius: 4px;\n  min-height: 34px;\n  color: var(--maru-text-secondary);\n}\n\n.maru-button-group-segmented {\n  background-color: var(--maru-background-secondary);\n  border-radius: 6px;\n  padding: 4px;\n  gap: 4px;\n}\n.maru-button-group-segmented .maru-button-group-button {\n  color: var(--maru-text-secondary);\n}\n.maru-button-group-segmented .maru-button-group-button:not(.is-selected):not(:disabled):hover {\n  background-color: var(--maru-background-quaternary);\n  color: var(--maru-text-primary);\n}\n.maru-button-group-segmented .maru-button-group-button.is-selected {\n  background-color: var(--p);\n  color: #ffffff;\n  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n}\n.maru-button-group-segmented .maru-button-group-button:disabled {\n  color: var(--maru-text-tertiary);\n}\n.maru-button-group-segmented .maru-button-group-button.is-selected:disabled {\n  background-color: var(--maru-background-quaternary);\n  color: var(--maru-icon-tertiary);\n  box-shadow: none;\n}\n.maru-button-group-segmented .maru-button-group-button svg {\n  display: block;\n}\n.maru-button-group-segmented .maru-button-group-button svg path[stroke],\n.maru-button-group-segmented .maru-button-group-button svg rect[stroke],\n.maru-button-group-segmented .maru-button-group-button svg circle[stroke] {\n  stroke: currentColor;\n}\n.maru-button-group-segmented .maru-button-group-button svg path[fill],\n.maru-button-group-segmented .maru-button-group-button svg rect[fill],\n.maru-button-group-segmented .maru-button-group-button svg circle[fill] {\n  fill: currentColor;\n}\n.maru-button-group-segmented.is-disabled {\n  background-color: var(--maru-background-secondary);\n}\n.maru-button-group-segmented.is-disabled .maru-button-group-button {\n  color: var(--maru-text-tertiary);\n  cursor: default;\n}\n.maru-button-group-segmented.is-disabled .maru-button-group-button.is-selected {\n  background-color: var(--maru-background-quaternary);\n  color: var(--maru-icon-tertiary);\n  box-shadow: none;\n}\n\n.maru-button-group-segmented.maru-button-group-segmented-secondary .maru-button-group-button.is-selected {\n  background-color: #ffffff;\n  color: var(--p);\n}\n.maru-button-group-segmented.maru-button-group-segmented-secondary .maru-button-group-button.is-selected:disabled {\n  background-color: var(--maru-background-quaternary);\n  color: var(--maru-icon-tertiary);\n  box-shadow: none;\n}\n.maru-button-group-segmented.maru-button-group-segmented-secondary.is-disabled .maru-button-group-button.is-selected {\n  background-color: var(--maru-background-quaternary);\n  color: var(--maru-icon-tertiary);\n  box-shadow: none;\n}\n\n.maru-button-group-icon {\n  background-color: #ffffff;\n  border: 1px solid var(--p);\n  border-radius: 4px;\n  padding: 0;\n  gap: 0;\n  overflow: hidden;\n}\n.maru-button-group-icon .maru-button-group-button {\n  color: var(--maru-icon-tertiary);\n  padding: 0;\n  border-radius: 0;\n}\n.maru-button-group-icon .maru-button-group-button:first-child {\n  border-top-left-radius: 3px;\n  border-bottom-left-radius: 3px;\n}\n.maru-button-group-icon .maru-button-group-button:last-child {\n  border-top-right-radius: 3px;\n  border-bottom-right-radius: 3px;\n}\n.maru-button-group-icon .maru-button-group-button + .maru-button-group-button {\n  border-left: 1px solid var(--p-20);\n}\n.maru-button-group-icon .maru-button-group-button:not(.is-selected):not(:disabled):hover {\n  background-color: var(--p-07);\n  color: var(--p);\n}\n.maru-button-group-icon .maru-button-group-button.is-selected {\n  background-color: var(--p);\n  color: #ffffff;\n}\n.maru-button-group-icon .maru-button-group-button:disabled {\n  background-color: var(--maru-background-secondary);\n  color: var(--maru-text-tertiary);\n}\n.maru-button-group-icon .maru-button-group-button.is-selected:disabled {\n  background-color: var(--maru-background-quaternary);\n  color: var(--maru-icon-tertiary);\n}\n.maru-button-group-icon .maru-button-group-button svg {\n  display: block;\n}\n.maru-button-group-icon .maru-button-group-button svg path[stroke],\n.maru-button-group-icon .maru-button-group-button svg rect[stroke],\n.maru-button-group-icon .maru-button-group-button svg circle[stroke] {\n  stroke: currentColor;\n}\n.maru-button-group-icon .maru-button-group-button svg path[fill],\n.maru-button-group-icon .maru-button-group-button svg rect[fill],\n.maru-button-group-icon .maru-button-group-button svg circle[fill] {\n  fill: currentColor;\n}\n.maru-button-group-icon.is-disabled {\n  border-color: var(--maru-border-primary);\n  background-color: var(--maru-background-secondary);\n}\n.maru-button-group-icon.is-disabled .maru-button-group-button {\n  color: var(--maru-text-tertiary);\n  cursor: default;\n}\n.maru-button-group-icon.is-disabled .maru-button-group-button + .maru-button-group-button {\n  border-left-color: var(--maru-border-primary);\n}\n.maru-button-group-icon.is-disabled .maru-button-group-button.is-selected {\n  background-color: var(--maru-background-quaternary);\n  color: var(--maru-icon-tertiary);\n}\n\n.maru-button-group-icon.maru-button-group-size-sm .maru-button-group-button {\n  width: 26px;\n  height: 26px;\n}\n\n.maru-button-group-icon.maru-button-group-size-md .maru-button-group-button {\n  width: 32px;\n  height: 32px;\n}";
+styleInject(css_248z$d);
 
 function ButtonGroup(_a) {
   var value = _a.value,
@@ -89106,8 +89506,8 @@ function DatePickerHeader(_a) {
   }));
 }
 
-var css_248z$8 = "@charset \"UTF-8\";\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow,\n.react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before {\n  border-color: #ccc;\n  border-style: solid;\n  border-width: 3px 3px 0 0;\n  content: \"\";\n  display: block;\n  height: 9px;\n  position: absolute;\n  top: 6px;\n  width: 9px;\n}\n.react-datepicker-wrapper {\n  display: inline-block;\n  padding: 0;\n  border: 0;\n}\n\n.react-datepicker {\n  font-family: \"Helvetica Neue\", helvetica, arial, sans-serif;\n  font-size: 0.8rem;\n  background-color: #fff;\n  color: #000;\n  border: 1px solid #aeaeae;\n  border-radius: 0.3rem;\n  display: inline-block;\n  position: relative;\n  line-height: initial;\n}\n\n.react-datepicker--time-only .react-datepicker__time-container {\n  border-left: 0;\n}\n.react-datepicker--time-only .react-datepicker__time,\n.react-datepicker--time-only .react-datepicker__time-box {\n  border-bottom-left-radius: 0.3rem;\n  border-bottom-right-radius: 0.3rem;\n}\n\n.react-datepicker-popper {\n  z-index: 1;\n  line-height: 0;\n}\n.react-datepicker-popper .react-datepicker__triangle {\n  stroke: #aeaeae;\n}\n.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {\n  fill: #f0f0f0;\n  color: #f0f0f0;\n}\n.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {\n  fill: #fff;\n  color: #fff;\n}\n\n.react-datepicker__header {\n  text-align: center;\n  background-color: #f0f0f0;\n  border-bottom: 1px solid #aeaeae;\n  border-top-left-radius: 0.3rem;\n  padding: 8px 0;\n  position: relative;\n}\n.react-datepicker__header--time {\n  padding-bottom: 8px;\n  padding-left: 5px;\n  padding-right: 5px;\n}\n.react-datepicker__header--time:not(.react-datepicker__header--time--only) {\n  border-top-left-radius: 0;\n}\n.react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n  border-top-right-radius: 0.3rem;\n}\n\n.react-datepicker__year-dropdown-container--select,\n.react-datepicker__month-dropdown-container--select,\n.react-datepicker__month-year-dropdown-container--select,\n.react-datepicker__year-dropdown-container--scroll,\n.react-datepicker__month-dropdown-container--scroll,\n.react-datepicker__month-year-dropdown-container--scroll {\n  display: inline-block;\n  margin: 0 15px;\n}\n\n.react-datepicker__current-month,\n.react-datepicker-time__header,\n.react-datepicker-year-header {\n  margin-top: 0;\n  color: #000;\n  font-weight: bold;\n  font-size: 0.944rem;\n}\n\n.react-datepicker-time__header {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n.react-datepicker__navigation {\n  align-items: center;\n  background: none;\n  display: flex;\n  justify-content: center;\n  text-align: center;\n  cursor: pointer;\n  position: absolute;\n  top: 2px;\n  padding: 0;\n  border: none;\n  z-index: 1;\n  height: 32px;\n  width: 32px;\n  text-indent: -999em;\n  overflow: hidden;\n}\n.react-datepicker__navigation--previous {\n  left: 2px;\n}\n.react-datepicker__navigation--next {\n  right: 2px;\n}\n.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {\n  right: 85px;\n}\n.react-datepicker__navigation--years {\n  position: relative;\n  top: 0;\n  display: block;\n  margin-left: auto;\n  margin-right: auto;\n}\n.react-datepicker__navigation--years-previous {\n  top: 4px;\n}\n.react-datepicker__navigation--years-upcoming {\n  top: -4px;\n}\n.react-datepicker__navigation:hover *::before {\n  border-color: #a6a6a6;\n}\n\n.react-datepicker__navigation-icon {\n  position: relative;\n  top: -1px;\n  font-size: 20px;\n  width: 0;\n}\n.react-datepicker__navigation-icon--next {\n  left: -2px;\n}\n.react-datepicker__navigation-icon--next::before {\n  transform: rotate(45deg);\n  left: -7px;\n}\n.react-datepicker__navigation-icon--previous {\n  right: -2px;\n}\n.react-datepicker__navigation-icon--previous::before {\n  transform: rotate(225deg);\n  right: -7px;\n}\n\n.react-datepicker__month-container {\n  float: left;\n}\n\n.react-datepicker__year {\n  margin: 0.4rem;\n  text-align: center;\n}\n.react-datepicker__year-wrapper {\n  display: flex;\n  flex-wrap: wrap;\n  max-width: 180px;\n}\n.react-datepicker__year .react-datepicker__year-text {\n  display: inline-block;\n  width: 4rem;\n  margin: 2px;\n}\n\n.react-datepicker__month {\n  margin: 0.4rem;\n  text-align: center;\n}\n.react-datepicker__month .react-datepicker__month-text,\n.react-datepicker__month .react-datepicker__quarter-text {\n  display: inline-block;\n  width: 4rem;\n  margin: 2px;\n}\n\n.react-datepicker__input-time-container {\n  clear: both;\n  width: 100%;\n  float: left;\n  margin: 5px 0 10px 15px;\n  text-align: left;\n}\n.react-datepicker__input-time-container .react-datepicker-time__caption {\n  display: inline-block;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container {\n  display: inline-block;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {\n  display: inline-block;\n  margin-left: 10px;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {\n  width: auto;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,\n.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {\n  -moz-appearance: textfield;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {\n  margin-left: 5px;\n  display: inline-block;\n}\n\n.react-datepicker__time-container {\n  float: right;\n  border-left: 1px solid #aeaeae;\n  width: 85px;\n}\n.react-datepicker__time-container--with-today-button {\n  display: inline;\n  border: 1px solid #aeaeae;\n  border-radius: 0.3rem;\n  position: absolute;\n  right: -87px;\n  top: 0;\n}\n.react-datepicker__time-container .react-datepicker__time {\n  position: relative;\n  background: white;\n  border-bottom-right-radius: 0.3rem;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {\n  width: 85px;\n  overflow-x: hidden;\n  margin: 0 auto;\n  text-align: center;\n  border-bottom-right-radius: 0.3rem;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {\n  list-style: none;\n  margin: 0;\n  height: calc(195px + 1.7rem / 2);\n  overflow-y: scroll;\n  padding-right: 0;\n  padding-left: 0;\n  width: 100%;\n  box-sizing: content-box;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {\n  height: 30px;\n  padding: 5px 10px;\n  white-space: nowrap;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {\n  cursor: pointer;\n  background-color: #f0f0f0;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {\n  background-color: #216ba5;\n  color: white;\n  font-weight: bold;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {\n  background-color: #216ba5;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {\n  color: #ccc;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {\n  cursor: default;\n  background-color: transparent;\n}\n\n.react-datepicker__week-number {\n  color: #ccc;\n  display: inline-block;\n  width: 1.7rem;\n  line-height: 1.7rem;\n  text-align: center;\n  margin: 0.166rem;\n}\n.react-datepicker__week-number.react-datepicker__week-number--clickable {\n  cursor: pointer;\n}\n.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected,\n.react-datepicker__week-number--keyboard-selected):hover {\n  border-radius: 0.3rem;\n  background-color: #f0f0f0;\n}\n.react-datepicker__week-number--selected {\n  border-radius: 0.3rem;\n  background-color: #216ba5;\n  color: #fff;\n}\n.react-datepicker__week-number--selected:hover {\n  background-color: #1d5d90;\n}\n.react-datepicker__week-number--keyboard-selected {\n  border-radius: 0.3rem;\n  background-color: #2a87d0;\n  color: #fff;\n}\n.react-datepicker__week-number--keyboard-selected:hover {\n  background-color: #1d5d90;\n}\n\n.react-datepicker__day-names {\n  white-space: nowrap;\n  margin-bottom: -8px;\n}\n\n.react-datepicker__week {\n  white-space: nowrap;\n}\n\n.react-datepicker__day-name,\n.react-datepicker__day,\n.react-datepicker__time-name {\n  color: #000;\n  display: inline-block;\n  width: 1.7rem;\n  line-height: 1.7rem;\n  text-align: center;\n  margin: 0.166rem;\n}\n\n.react-datepicker__day,\n.react-datepicker__month-text,\n.react-datepicker__quarter-text,\n.react-datepicker__year-text {\n  cursor: pointer;\n}\n.react-datepicker__day:hover,\n.react-datepicker__month-text:hover,\n.react-datepicker__quarter-text:hover,\n.react-datepicker__year-text:hover {\n  border-radius: 0.3rem;\n  background-color: #f0f0f0;\n}\n.react-datepicker__day--today,\n.react-datepicker__month-text--today,\n.react-datepicker__quarter-text--today,\n.react-datepicker__year-text--today {\n  font-weight: bold;\n}\n.react-datepicker__day--highlighted,\n.react-datepicker__month-text--highlighted,\n.react-datepicker__quarter-text--highlighted,\n.react-datepicker__year-text--highlighted {\n  border-radius: 0.3rem;\n  background-color: #3dcc4a;\n  color: #fff;\n}\n.react-datepicker__day--highlighted:hover,\n.react-datepicker__month-text--highlighted:hover,\n.react-datepicker__quarter-text--highlighted:hover,\n.react-datepicker__year-text--highlighted:hover {\n  background-color: #32be3f;\n}\n.react-datepicker__day--highlighted-custom-1,\n.react-datepicker__month-text--highlighted-custom-1,\n.react-datepicker__quarter-text--highlighted-custom-1,\n.react-datepicker__year-text--highlighted-custom-1 {\n  color: magenta;\n}\n.react-datepicker__day--highlighted-custom-2,\n.react-datepicker__month-text--highlighted-custom-2,\n.react-datepicker__quarter-text--highlighted-custom-2,\n.react-datepicker__year-text--highlighted-custom-2 {\n  color: green;\n}\n.react-datepicker__day--holidays,\n.react-datepicker__month-text--holidays,\n.react-datepicker__quarter-text--holidays,\n.react-datepicker__year-text--holidays {\n  position: relative;\n  border-radius: 0.3rem;\n  background-color: #ff6803;\n  color: #fff;\n}\n.react-datepicker__day--holidays .overlay,\n.react-datepicker__month-text--holidays .overlay,\n.react-datepicker__quarter-text--holidays .overlay,\n.react-datepicker__year-text--holidays .overlay {\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: #333;\n  color: #fff;\n  padding: 4px;\n  border-radius: 4px;\n  white-space: nowrap;\n  visibility: hidden;\n  opacity: 0;\n  transition: visibility 0s, opacity 0.3s ease-in-out;\n}\n.react-datepicker__day--holidays:hover,\n.react-datepicker__month-text--holidays:hover,\n.react-datepicker__quarter-text--holidays:hover,\n.react-datepicker__year-text--holidays:hover {\n  background-color: #cf5300;\n}\n.react-datepicker__day--holidays:hover .overlay,\n.react-datepicker__month-text--holidays:hover .overlay,\n.react-datepicker__quarter-text--holidays:hover .overlay,\n.react-datepicker__year-text--holidays:hover .overlay {\n  visibility: visible;\n  opacity: 1;\n}\n.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,\n.react-datepicker__month-text--selected,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--selected,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--selected,\n.react-datepicker__year-text--in-selecting-range,\n.react-datepicker__year-text--in-range {\n  border-radius: 0.3rem;\n  background-color: #216ba5;\n  color: #fff;\n}\n.react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,\n.react-datepicker__month-text--selected:hover,\n.react-datepicker__month-text--in-selecting-range:hover,\n.react-datepicker__month-text--in-range:hover,\n.react-datepicker__quarter-text--selected:hover,\n.react-datepicker__quarter-text--in-selecting-range:hover,\n.react-datepicker__quarter-text--in-range:hover,\n.react-datepicker__year-text--selected:hover,\n.react-datepicker__year-text--in-selecting-range:hover,\n.react-datepicker__year-text--in-range:hover {\n  background-color: #1d5d90;\n}\n.react-datepicker__day--keyboard-selected,\n.react-datepicker__month-text--keyboard-selected,\n.react-datepicker__quarter-text--keyboard-selected,\n.react-datepicker__year-text--keyboard-selected {\n  border-radius: 0.3rem;\n  background-color: #bad9f1;\n  color: rgb(0, 0, 0);\n}\n.react-datepicker__day--keyboard-selected:hover,\n.react-datepicker__month-text--keyboard-selected:hover,\n.react-datepicker__quarter-text--keyboard-selected:hover,\n.react-datepicker__year-text--keyboard-selected:hover {\n  background-color: #1d5d90;\n}\n.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range),\n.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range),\n.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range),\n.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range) {\n  background-color: rgba(33, 107, 165, 0.5);\n}\n.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range) {\n  background-color: #f0f0f0;\n  color: #000;\n}\n.react-datepicker__day--disabled,\n.react-datepicker__month-text--disabled,\n.react-datepicker__quarter-text--disabled,\n.react-datepicker__year-text--disabled {\n  cursor: default;\n  color: #ccc;\n}\n.react-datepicker__day--disabled:hover,\n.react-datepicker__month-text--disabled:hover,\n.react-datepicker__quarter-text--disabled:hover,\n.react-datepicker__year-text--disabled:hover {\n  background-color: transparent;\n}\n.react-datepicker__day--disabled .overlay,\n.react-datepicker__month-text--disabled .overlay,\n.react-datepicker__quarter-text--disabled .overlay,\n.react-datepicker__year-text--disabled .overlay {\n  position: absolute;\n  bottom: 70%;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: #333;\n  color: #fff;\n  padding: 4px;\n  border-radius: 4px;\n  white-space: nowrap;\n  visibility: hidden;\n  opacity: 0;\n  transition: visibility 0s, opacity 0.3s ease-in-out;\n}\n\n.react-datepicker__input-container {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n}\n.react-datepicker__input-container .react-datepicker__calendar-icon {\n  position: absolute;\n  padding: 0.5rem;\n  box-sizing: content-box;\n}\n\n.react-datepicker__view-calendar-icon input {\n  padding: 6px 10px 5px 25px;\n}\n\n.react-datepicker__year-read-view,\n.react-datepicker__month-read-view,\n.react-datepicker__month-year-read-view {\n  border: 1px solid transparent;\n  border-radius: 0.3rem;\n  position: relative;\n}\n.react-datepicker__year-read-view:hover,\n.react-datepicker__month-read-view:hover,\n.react-datepicker__month-year-read-view:hover {\n  cursor: pointer;\n}\n.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,\n.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,\n.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {\n  border-top-color: #b3b3b3;\n}\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow,\n.react-datepicker__month-year-read-view--down-arrow {\n  transform: rotate(135deg);\n  right: -16px;\n  top: 0;\n}\n\n.react-datepicker__year-dropdown,\n.react-datepicker__month-dropdown,\n.react-datepicker__month-year-dropdown {\n  background-color: #f0f0f0;\n  position: absolute;\n  width: 50%;\n  left: 25%;\n  top: 30px;\n  z-index: 1;\n  text-align: center;\n  border-radius: 0.3rem;\n  border: 1px solid #aeaeae;\n}\n.react-datepicker__year-dropdown:hover,\n.react-datepicker__month-dropdown:hover,\n.react-datepicker__month-year-dropdown:hover {\n  cursor: pointer;\n}\n.react-datepicker__year-dropdown--scrollable,\n.react-datepicker__month-dropdown--scrollable,\n.react-datepicker__month-year-dropdown--scrollable {\n  height: 150px;\n  overflow-y: scroll;\n}\n\n.react-datepicker__year-option,\n.react-datepicker__month-option,\n.react-datepicker__month-year-option {\n  line-height: 20px;\n  width: 100%;\n  display: block;\n  margin-left: auto;\n  margin-right: auto;\n}\n.react-datepicker__year-option:first-of-type,\n.react-datepicker__month-option:first-of-type,\n.react-datepicker__month-year-option:first-of-type {\n  border-top-left-radius: 0.3rem;\n  border-top-right-radius: 0.3rem;\n}\n.react-datepicker__year-option:last-of-type,\n.react-datepicker__month-option:last-of-type,\n.react-datepicker__month-year-option:last-of-type {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  border-bottom-left-radius: 0.3rem;\n  border-bottom-right-radius: 0.3rem;\n}\n.react-datepicker__year-option:hover,\n.react-datepicker__month-option:hover,\n.react-datepicker__month-year-option:hover {\n  background-color: #ccc;\n}\n.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,\n.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,\n.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {\n  border-bottom-color: #b3b3b3;\n}\n.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,\n.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,\n.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {\n  border-top-color: #b3b3b3;\n}\n.react-datepicker__year-option--selected,\n.react-datepicker__month-option--selected,\n.react-datepicker__month-year-option--selected {\n  position: absolute;\n  left: 15px;\n}\n\n.react-datepicker__close-icon {\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  outline: 0;\n  padding: 0 6px 0 0;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  display: table-cell;\n  vertical-align: middle;\n}\n.react-datepicker__close-icon::after {\n  cursor: pointer;\n  background-color: #216ba5;\n  color: #fff;\n  border-radius: 50%;\n  height: 16px;\n  width: 16px;\n  padding: 2px;\n  font-size: 12px;\n  line-height: 1;\n  text-align: center;\n  display: table-cell;\n  vertical-align: middle;\n  content: \"×\";\n}\n.react-datepicker__close-icon--disabled {\n  cursor: default;\n}\n.react-datepicker__close-icon--disabled::after {\n  cursor: default;\n  background-color: #ccc;\n}\n\n.react-datepicker__today-button {\n  background: #f0f0f0;\n  border-top: 1px solid #aeaeae;\n  cursor: pointer;\n  text-align: center;\n  font-weight: bold;\n  padding: 5px 0;\n  clear: left;\n}\n\n.react-datepicker__portal {\n  position: fixed;\n  width: 100vw;\n  height: 100vh;\n  background-color: rgba(0, 0, 0, 0.8);\n  left: 0;\n  top: 0;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  z-index: 2147483647;\n}\n.react-datepicker__portal .react-datepicker__day-name,\n.react-datepicker__portal .react-datepicker__day,\n.react-datepicker__portal .react-datepicker__time-name {\n  width: 3rem;\n  line-height: 3rem;\n}\n@media (max-width: 400px), (max-height: 550px) {\n  .react-datepicker__portal .react-datepicker__day-name,\n  .react-datepicker__portal .react-datepicker__day,\n  .react-datepicker__portal .react-datepicker__time-name {\n    width: 2rem;\n    line-height: 2rem;\n  }\n}\n.react-datepicker__portal .react-datepicker__current-month,\n.react-datepicker__portal .react-datepicker-time__header {\n  font-size: 1.44rem;\n}\n\n.react-datepicker__children-container {\n  width: 13.8rem;\n  margin: 0.4rem;\n  padding-right: 0.2rem;\n  padding-left: 0.2rem;\n  height: auto;\n}\n\n.react-datepicker__aria-live {\n  position: absolute;\n  clip-path: circle(0);\n  border: 0;\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  width: 1px;\n  white-space: nowrap;\n}\n\n.react-datepicker__calendar-icon {\n  width: 1em;\n  height: 1em;\n  vertical-align: -0.125em;\n}\n";
-styleInject(css_248z$8);
+var css_248z$c = "@charset \"UTF-8\";\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow,\n.react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before {\n  border-color: #ccc;\n  border-style: solid;\n  border-width: 3px 3px 0 0;\n  content: \"\";\n  display: block;\n  height: 9px;\n  position: absolute;\n  top: 6px;\n  width: 9px;\n}\n.react-datepicker-wrapper {\n  display: inline-block;\n  padding: 0;\n  border: 0;\n}\n\n.react-datepicker {\n  font-family: \"Helvetica Neue\", helvetica, arial, sans-serif;\n  font-size: 0.8rem;\n  background-color: #fff;\n  color: #000;\n  border: 1px solid #aeaeae;\n  border-radius: 0.3rem;\n  display: inline-block;\n  position: relative;\n  line-height: initial;\n}\n\n.react-datepicker--time-only .react-datepicker__time-container {\n  border-left: 0;\n}\n.react-datepicker--time-only .react-datepicker__time,\n.react-datepicker--time-only .react-datepicker__time-box {\n  border-bottom-left-radius: 0.3rem;\n  border-bottom-right-radius: 0.3rem;\n}\n\n.react-datepicker-popper {\n  z-index: 1;\n  line-height: 0;\n}\n.react-datepicker-popper .react-datepicker__triangle {\n  stroke: #aeaeae;\n}\n.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {\n  fill: #f0f0f0;\n  color: #f0f0f0;\n}\n.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {\n  fill: #fff;\n  color: #fff;\n}\n\n.react-datepicker__header {\n  text-align: center;\n  background-color: #f0f0f0;\n  border-bottom: 1px solid #aeaeae;\n  border-top-left-radius: 0.3rem;\n  padding: 8px 0;\n  position: relative;\n}\n.react-datepicker__header--time {\n  padding-bottom: 8px;\n  padding-left: 5px;\n  padding-right: 5px;\n}\n.react-datepicker__header--time:not(.react-datepicker__header--time--only) {\n  border-top-left-radius: 0;\n}\n.react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n  border-top-right-radius: 0.3rem;\n}\n\n.react-datepicker__year-dropdown-container--select,\n.react-datepicker__month-dropdown-container--select,\n.react-datepicker__month-year-dropdown-container--select,\n.react-datepicker__year-dropdown-container--scroll,\n.react-datepicker__month-dropdown-container--scroll,\n.react-datepicker__month-year-dropdown-container--scroll {\n  display: inline-block;\n  margin: 0 15px;\n}\n\n.react-datepicker__current-month,\n.react-datepicker-time__header,\n.react-datepicker-year-header {\n  margin-top: 0;\n  color: #000;\n  font-weight: bold;\n  font-size: 0.944rem;\n}\n\n.react-datepicker-time__header {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n.react-datepicker__navigation {\n  align-items: center;\n  background: none;\n  display: flex;\n  justify-content: center;\n  text-align: center;\n  cursor: pointer;\n  position: absolute;\n  top: 2px;\n  padding: 0;\n  border: none;\n  z-index: 1;\n  height: 32px;\n  width: 32px;\n  text-indent: -999em;\n  overflow: hidden;\n}\n.react-datepicker__navigation--previous {\n  left: 2px;\n}\n.react-datepicker__navigation--next {\n  right: 2px;\n}\n.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {\n  right: 85px;\n}\n.react-datepicker__navigation--years {\n  position: relative;\n  top: 0;\n  display: block;\n  margin-left: auto;\n  margin-right: auto;\n}\n.react-datepicker__navigation--years-previous {\n  top: 4px;\n}\n.react-datepicker__navigation--years-upcoming {\n  top: -4px;\n}\n.react-datepicker__navigation:hover *::before {\n  border-color: #a6a6a6;\n}\n\n.react-datepicker__navigation-icon {\n  position: relative;\n  top: -1px;\n  font-size: 20px;\n  width: 0;\n}\n.react-datepicker__navigation-icon--next {\n  left: -2px;\n}\n.react-datepicker__navigation-icon--next::before {\n  transform: rotate(45deg);\n  left: -7px;\n}\n.react-datepicker__navigation-icon--previous {\n  right: -2px;\n}\n.react-datepicker__navigation-icon--previous::before {\n  transform: rotate(225deg);\n  right: -7px;\n}\n\n.react-datepicker__month-container {\n  float: left;\n}\n\n.react-datepicker__year {\n  margin: 0.4rem;\n  text-align: center;\n}\n.react-datepicker__year-wrapper {\n  display: flex;\n  flex-wrap: wrap;\n  max-width: 180px;\n}\n.react-datepicker__year .react-datepicker__year-text {\n  display: inline-block;\n  width: 4rem;\n  margin: 2px;\n}\n\n.react-datepicker__month {\n  margin: 0.4rem;\n  text-align: center;\n}\n.react-datepicker__month .react-datepicker__month-text,\n.react-datepicker__month .react-datepicker__quarter-text {\n  display: inline-block;\n  width: 4rem;\n  margin: 2px;\n}\n\n.react-datepicker__input-time-container {\n  clear: both;\n  width: 100%;\n  float: left;\n  margin: 5px 0 10px 15px;\n  text-align: left;\n}\n.react-datepicker__input-time-container .react-datepicker-time__caption {\n  display: inline-block;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container {\n  display: inline-block;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {\n  display: inline-block;\n  margin-left: 10px;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {\n  width: auto;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,\n.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {\n  -moz-appearance: textfield;\n}\n.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {\n  margin-left: 5px;\n  display: inline-block;\n}\n\n.react-datepicker__time-container {\n  float: right;\n  border-left: 1px solid #aeaeae;\n  width: 85px;\n}\n.react-datepicker__time-container--with-today-button {\n  display: inline;\n  border: 1px solid #aeaeae;\n  border-radius: 0.3rem;\n  position: absolute;\n  right: -87px;\n  top: 0;\n}\n.react-datepicker__time-container .react-datepicker__time {\n  position: relative;\n  background: white;\n  border-bottom-right-radius: 0.3rem;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {\n  width: 85px;\n  overflow-x: hidden;\n  margin: 0 auto;\n  text-align: center;\n  border-bottom-right-radius: 0.3rem;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {\n  list-style: none;\n  margin: 0;\n  height: calc(195px + 1.7rem / 2);\n  overflow-y: scroll;\n  padding-right: 0;\n  padding-left: 0;\n  width: 100%;\n  box-sizing: content-box;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {\n  height: 30px;\n  padding: 5px 10px;\n  white-space: nowrap;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {\n  cursor: pointer;\n  background-color: #f0f0f0;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {\n  background-color: #216ba5;\n  color: white;\n  font-weight: bold;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {\n  background-color: #216ba5;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {\n  color: #ccc;\n}\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {\n  cursor: default;\n  background-color: transparent;\n}\n\n.react-datepicker__week-number {\n  color: #ccc;\n  display: inline-block;\n  width: 1.7rem;\n  line-height: 1.7rem;\n  text-align: center;\n  margin: 0.166rem;\n}\n.react-datepicker__week-number.react-datepicker__week-number--clickable {\n  cursor: pointer;\n}\n.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected,\n.react-datepicker__week-number--keyboard-selected):hover {\n  border-radius: 0.3rem;\n  background-color: #f0f0f0;\n}\n.react-datepicker__week-number--selected {\n  border-radius: 0.3rem;\n  background-color: #216ba5;\n  color: #fff;\n}\n.react-datepicker__week-number--selected:hover {\n  background-color: #1d5d90;\n}\n.react-datepicker__week-number--keyboard-selected {\n  border-radius: 0.3rem;\n  background-color: #2a87d0;\n  color: #fff;\n}\n.react-datepicker__week-number--keyboard-selected:hover {\n  background-color: #1d5d90;\n}\n\n.react-datepicker__day-names {\n  white-space: nowrap;\n  margin-bottom: -8px;\n}\n\n.react-datepicker__week {\n  white-space: nowrap;\n}\n\n.react-datepicker__day-name,\n.react-datepicker__day,\n.react-datepicker__time-name {\n  color: #000;\n  display: inline-block;\n  width: 1.7rem;\n  line-height: 1.7rem;\n  text-align: center;\n  margin: 0.166rem;\n}\n\n.react-datepicker__day,\n.react-datepicker__month-text,\n.react-datepicker__quarter-text,\n.react-datepicker__year-text {\n  cursor: pointer;\n}\n.react-datepicker__day:hover,\n.react-datepicker__month-text:hover,\n.react-datepicker__quarter-text:hover,\n.react-datepicker__year-text:hover {\n  border-radius: 0.3rem;\n  background-color: #f0f0f0;\n}\n.react-datepicker__day--today,\n.react-datepicker__month-text--today,\n.react-datepicker__quarter-text--today,\n.react-datepicker__year-text--today {\n  font-weight: bold;\n}\n.react-datepicker__day--highlighted,\n.react-datepicker__month-text--highlighted,\n.react-datepicker__quarter-text--highlighted,\n.react-datepicker__year-text--highlighted {\n  border-radius: 0.3rem;\n  background-color: #3dcc4a;\n  color: #fff;\n}\n.react-datepicker__day--highlighted:hover,\n.react-datepicker__month-text--highlighted:hover,\n.react-datepicker__quarter-text--highlighted:hover,\n.react-datepicker__year-text--highlighted:hover {\n  background-color: #32be3f;\n}\n.react-datepicker__day--highlighted-custom-1,\n.react-datepicker__month-text--highlighted-custom-1,\n.react-datepicker__quarter-text--highlighted-custom-1,\n.react-datepicker__year-text--highlighted-custom-1 {\n  color: magenta;\n}\n.react-datepicker__day--highlighted-custom-2,\n.react-datepicker__month-text--highlighted-custom-2,\n.react-datepicker__quarter-text--highlighted-custom-2,\n.react-datepicker__year-text--highlighted-custom-2 {\n  color: green;\n}\n.react-datepicker__day--holidays,\n.react-datepicker__month-text--holidays,\n.react-datepicker__quarter-text--holidays,\n.react-datepicker__year-text--holidays {\n  position: relative;\n  border-radius: 0.3rem;\n  background-color: #ff6803;\n  color: #fff;\n}\n.react-datepicker__day--holidays .overlay,\n.react-datepicker__month-text--holidays .overlay,\n.react-datepicker__quarter-text--holidays .overlay,\n.react-datepicker__year-text--holidays .overlay {\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: #333;\n  color: #fff;\n  padding: 4px;\n  border-radius: 4px;\n  white-space: nowrap;\n  visibility: hidden;\n  opacity: 0;\n  transition: visibility 0s, opacity 0.3s ease-in-out;\n}\n.react-datepicker__day--holidays:hover,\n.react-datepicker__month-text--holidays:hover,\n.react-datepicker__quarter-text--holidays:hover,\n.react-datepicker__year-text--holidays:hover {\n  background-color: #cf5300;\n}\n.react-datepicker__day--holidays:hover .overlay,\n.react-datepicker__month-text--holidays:hover .overlay,\n.react-datepicker__quarter-text--holidays:hover .overlay,\n.react-datepicker__year-text--holidays:hover .overlay {\n  visibility: visible;\n  opacity: 1;\n}\n.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,\n.react-datepicker__month-text--selected,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--selected,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--selected,\n.react-datepicker__year-text--in-selecting-range,\n.react-datepicker__year-text--in-range {\n  border-radius: 0.3rem;\n  background-color: #216ba5;\n  color: #fff;\n}\n.react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,\n.react-datepicker__month-text--selected:hover,\n.react-datepicker__month-text--in-selecting-range:hover,\n.react-datepicker__month-text--in-range:hover,\n.react-datepicker__quarter-text--selected:hover,\n.react-datepicker__quarter-text--in-selecting-range:hover,\n.react-datepicker__quarter-text--in-range:hover,\n.react-datepicker__year-text--selected:hover,\n.react-datepicker__year-text--in-selecting-range:hover,\n.react-datepicker__year-text--in-range:hover {\n  background-color: #1d5d90;\n}\n.react-datepicker__day--keyboard-selected,\n.react-datepicker__month-text--keyboard-selected,\n.react-datepicker__quarter-text--keyboard-selected,\n.react-datepicker__year-text--keyboard-selected {\n  border-radius: 0.3rem;\n  background-color: #bad9f1;\n  color: rgb(0, 0, 0);\n}\n.react-datepicker__day--keyboard-selected:hover,\n.react-datepicker__month-text--keyboard-selected:hover,\n.react-datepicker__quarter-text--keyboard-selected:hover,\n.react-datepicker__year-text--keyboard-selected:hover {\n  background-color: #1d5d90;\n}\n.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range),\n.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range),\n.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range),\n.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,\n.react-datepicker__month-text--in-range,\n.react-datepicker__quarter-text--in-range,\n.react-datepicker__year-text--in-range) {\n  background-color: rgba(33, 107, 165, 0.5);\n}\n.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range),\n.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,\n.react-datepicker__month-text--in-selecting-range,\n.react-datepicker__quarter-text--in-selecting-range,\n.react-datepicker__year-text--in-selecting-range) {\n  background-color: #f0f0f0;\n  color: #000;\n}\n.react-datepicker__day--disabled,\n.react-datepicker__month-text--disabled,\n.react-datepicker__quarter-text--disabled,\n.react-datepicker__year-text--disabled {\n  cursor: default;\n  color: #ccc;\n}\n.react-datepicker__day--disabled:hover,\n.react-datepicker__month-text--disabled:hover,\n.react-datepicker__quarter-text--disabled:hover,\n.react-datepicker__year-text--disabled:hover {\n  background-color: transparent;\n}\n.react-datepicker__day--disabled .overlay,\n.react-datepicker__month-text--disabled .overlay,\n.react-datepicker__quarter-text--disabled .overlay,\n.react-datepicker__year-text--disabled .overlay {\n  position: absolute;\n  bottom: 70%;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: #333;\n  color: #fff;\n  padding: 4px;\n  border-radius: 4px;\n  white-space: nowrap;\n  visibility: hidden;\n  opacity: 0;\n  transition: visibility 0s, opacity 0.3s ease-in-out;\n}\n\n.react-datepicker__input-container {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n}\n.react-datepicker__input-container .react-datepicker__calendar-icon {\n  position: absolute;\n  padding: 0.5rem;\n  box-sizing: content-box;\n}\n\n.react-datepicker__view-calendar-icon input {\n  padding: 6px 10px 5px 25px;\n}\n\n.react-datepicker__year-read-view,\n.react-datepicker__month-read-view,\n.react-datepicker__month-year-read-view {\n  border: 1px solid transparent;\n  border-radius: 0.3rem;\n  position: relative;\n}\n.react-datepicker__year-read-view:hover,\n.react-datepicker__month-read-view:hover,\n.react-datepicker__month-year-read-view:hover {\n  cursor: pointer;\n}\n.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,\n.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,\n.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {\n  border-top-color: #b3b3b3;\n}\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow,\n.react-datepicker__month-year-read-view--down-arrow {\n  transform: rotate(135deg);\n  right: -16px;\n  top: 0;\n}\n\n.react-datepicker__year-dropdown,\n.react-datepicker__month-dropdown,\n.react-datepicker__month-year-dropdown {\n  background-color: #f0f0f0;\n  position: absolute;\n  width: 50%;\n  left: 25%;\n  top: 30px;\n  z-index: 1;\n  text-align: center;\n  border-radius: 0.3rem;\n  border: 1px solid #aeaeae;\n}\n.react-datepicker__year-dropdown:hover,\n.react-datepicker__month-dropdown:hover,\n.react-datepicker__month-year-dropdown:hover {\n  cursor: pointer;\n}\n.react-datepicker__year-dropdown--scrollable,\n.react-datepicker__month-dropdown--scrollable,\n.react-datepicker__month-year-dropdown--scrollable {\n  height: 150px;\n  overflow-y: scroll;\n}\n\n.react-datepicker__year-option,\n.react-datepicker__month-option,\n.react-datepicker__month-year-option {\n  line-height: 20px;\n  width: 100%;\n  display: block;\n  margin-left: auto;\n  margin-right: auto;\n}\n.react-datepicker__year-option:first-of-type,\n.react-datepicker__month-option:first-of-type,\n.react-datepicker__month-year-option:first-of-type {\n  border-top-left-radius: 0.3rem;\n  border-top-right-radius: 0.3rem;\n}\n.react-datepicker__year-option:last-of-type,\n.react-datepicker__month-option:last-of-type,\n.react-datepicker__month-year-option:last-of-type {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  border-bottom-left-radius: 0.3rem;\n  border-bottom-right-radius: 0.3rem;\n}\n.react-datepicker__year-option:hover,\n.react-datepicker__month-option:hover,\n.react-datepicker__month-year-option:hover {\n  background-color: #ccc;\n}\n.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,\n.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,\n.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {\n  border-bottom-color: #b3b3b3;\n}\n.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,\n.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,\n.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {\n  border-top-color: #b3b3b3;\n}\n.react-datepicker__year-option--selected,\n.react-datepicker__month-option--selected,\n.react-datepicker__month-year-option--selected {\n  position: absolute;\n  left: 15px;\n}\n\n.react-datepicker__close-icon {\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  outline: 0;\n  padding: 0 6px 0 0;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  display: table-cell;\n  vertical-align: middle;\n}\n.react-datepicker__close-icon::after {\n  cursor: pointer;\n  background-color: #216ba5;\n  color: #fff;\n  border-radius: 50%;\n  height: 16px;\n  width: 16px;\n  padding: 2px;\n  font-size: 12px;\n  line-height: 1;\n  text-align: center;\n  display: table-cell;\n  vertical-align: middle;\n  content: \"×\";\n}\n.react-datepicker__close-icon--disabled {\n  cursor: default;\n}\n.react-datepicker__close-icon--disabled::after {\n  cursor: default;\n  background-color: #ccc;\n}\n\n.react-datepicker__today-button {\n  background: #f0f0f0;\n  border-top: 1px solid #aeaeae;\n  cursor: pointer;\n  text-align: center;\n  font-weight: bold;\n  padding: 5px 0;\n  clear: left;\n}\n\n.react-datepicker__portal {\n  position: fixed;\n  width: 100vw;\n  height: 100vh;\n  background-color: rgba(0, 0, 0, 0.8);\n  left: 0;\n  top: 0;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  z-index: 2147483647;\n}\n.react-datepicker__portal .react-datepicker__day-name,\n.react-datepicker__portal .react-datepicker__day,\n.react-datepicker__portal .react-datepicker__time-name {\n  width: 3rem;\n  line-height: 3rem;\n}\n@media (max-width: 400px), (max-height: 550px) {\n  .react-datepicker__portal .react-datepicker__day-name,\n  .react-datepicker__portal .react-datepicker__day,\n  .react-datepicker__portal .react-datepicker__time-name {\n    width: 2rem;\n    line-height: 2rem;\n  }\n}\n.react-datepicker__portal .react-datepicker__current-month,\n.react-datepicker__portal .react-datepicker-time__header {\n  font-size: 1.44rem;\n}\n\n.react-datepicker__children-container {\n  width: 13.8rem;\n  margin: 0.4rem;\n  padding-right: 0.2rem;\n  padding-left: 0.2rem;\n  height: auto;\n}\n\n.react-datepicker__aria-live {\n  position: absolute;\n  clip-path: circle(0);\n  border: 0;\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  width: 1px;\n  white-space: nowrap;\n}\n\n.react-datepicker__calendar-icon {\n  width: 1em;\n  height: 1em;\n  vertical-align: -0.125em;\n}\n";
+styleInject(css_248z$c);
 
 var SEP = '-'; // 구분자
 var DATE_FORMAT = 'yyyy-MM-dd';
@@ -89333,8 +89733,8 @@ function DatePickerWrapper(_a) {
   }));
 }
 
-var css_248z$7 = ".maru-calendar .datepicker-wrapper {\n  width: 300px;\n  padding: 20px;\n  border-radius: 6px;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker {\n  border: unset;\n  border-radius: unset;\n  width: 100%;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__month-container {\n  width: 100%;\n  float: unset;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__header {\n  background-color: transparent;\n  border: unset;\n  padding: unset;\n  border-radius: unset;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__header .maru-calender-header {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  margin-bottom: 24px;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__header .maru-calender-header .maru-calender-header-month {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 18px;\n  letter-spacing: -0.72px;\n  font-weight: 700;\n  color: #5c5c5c;\n  display: block;\n  margin: 0 24px;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__month {\n  margin: unset;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day-names {\n  margin: unset;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day-name {\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: var(--p);\n  width: 36px;\n  height: 28px;\n  margin: unset;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day {\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  width: 36px;\n  height: 28px;\n  padding: 2px;\n  margin: 2px 0;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--outside-month {\n  color: #8c8c8c;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--today, .maru-calendar .datepicker-wrapper .react-datepicker__day--keyboard-selected {\n  background-color: unset;\n  color: var(--p);\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--in-selecting-range {\n  background-color: var(--p-20-per);\n  border-radius: unset;\n  border: 1px solid var(--p-20);\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--selecting-range-start {\n  border-top-left-radius: 50%;\n  border-bottom-left-radius: 50%;\n  border: 1px solid var(--p-20);\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--selecting-range-end {\n  border-top-right-radius: 50%;\n  border-bottom-right-radius: 50%;\n  border: 1px solid var(--p-20);\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--in-range, .maru-calendar .datepicker-wrapper .react-datepicker__day--selected {\n  background-color: var(--p);\n  color: white;\n  border-radius: unset;\n  border: 1px solid var(--p);\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--range-start {\n  border-top-left-radius: 50%;\n  border-bottom-left-radius: 50%;\n  border: 1px solid var(--p);\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--range-end {\n  border-top-right-radius: 50%;\n  border-bottom-right-radius: 50%;\n  border: 1px solid var(--p);\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--disabled {\n  color: #bdbdbd;\n}\n.maru-calendar .datepicker-wrapper .maru-calendar-footer {\n  margin-top: 24px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-calendar .datepicker-wrapper .maru-calendar-footer > div {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-calendar .datepicker-wrapper .maru-calendar-footer > div .maru-input {\n  padding: 8px;\n  width: 93px;\n}\n.maru-calendar .datepicker-wrapper .maru-calendar-footer > div .maru-input > input {\n  color: var(--p);\n  text-align: center;\n  font-size: 13px;\n  letter-spacing: -0.52px;\n}\n.maru-calendar .datepicker-wrapper .maru-calendar-footer > div .maru-input > input[type=text i] {\n  padding-block: unset;\n  padding-inline: unset;\n}\n.maru-calendar .datepicker-wrapper .maru-calendar-footer > div > span {\n  margin: 0 2px;\n  color: #bdbdbd;\n}\n.maru-calendar .datepicker-wrapper .maru-calendar-footer .maru-calendar-footer-okay-button {\n  width: 56px;\n}";
-styleInject(css_248z$7);
+var css_248z$b = ".maru-calendar .datepicker-wrapper {\n  width: 300px;\n  padding: 20px;\n  border-radius: 6px;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker {\n  border: unset;\n  border-radius: unset;\n  width: 100%;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__month-container {\n  width: 100%;\n  float: unset;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__header {\n  background-color: transparent;\n  border: unset;\n  padding: unset;\n  border-radius: unset;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__header .maru-calender-header {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  margin-bottom: 24px;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__header .maru-calender-header .maru-calender-header-month {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--maru-text-secondary);\n  display: block;\n  margin: 0 24px;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__month {\n  margin: unset;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day-names {\n  margin: unset;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day-name {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--p);\n  width: 36px;\n  height: 28px;\n  margin: unset;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--maru-text-secondary);\n  width: 36px;\n  height: 28px;\n  padding: 2px;\n  margin: 2px 0;\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--outside-month {\n  color: var(--maru-text-tertiary);\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--today, .maru-calendar .datepicker-wrapper .react-datepicker__day--keyboard-selected {\n  background-color: unset;\n  color: var(--p);\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--in-selecting-range {\n  background-color: var(--p-20-per);\n  border-radius: unset;\n  border: 1px solid var(--p-20);\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--selecting-range-start {\n  border-top-left-radius: 50%;\n  border-bottom-left-radius: 50%;\n  border: 1px solid var(--p-20);\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--selecting-range-end {\n  border-top-right-radius: 50%;\n  border-bottom-right-radius: 50%;\n  border: 1px solid var(--p-20);\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--in-range, .maru-calendar .datepicker-wrapper .react-datepicker__day--selected {\n  background-color: var(--p);\n  color: var(--maru-text-white);\n  border-radius: unset;\n  border: 1px solid var(--p);\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--range-start {\n  border-top-left-radius: 50%;\n  border-bottom-left-radius: 50%;\n  border: 1px solid var(--p);\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--range-end {\n  border-top-right-radius: 50%;\n  border-bottom-right-radius: 50%;\n  border: 1px solid var(--p);\n}\n.maru-calendar .datepicker-wrapper .react-datepicker__day--disabled {\n  color: var(--maru-text-disabled);\n}\n.maru-calendar .datepicker-wrapper .maru-calendar-footer {\n  margin-top: 24px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-calendar .datepicker-wrapper .maru-calendar-footer > div {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-calendar .datepicker-wrapper .maru-calendar-footer > div .maru-input {\n  padding: 8px;\n  width: 93px;\n}\n.maru-calendar .datepicker-wrapper .maru-calendar-footer > div .maru-input > input {\n  color: var(--p);\n  text-align: center;\n  font-size: 13px;\n  letter-spacing: -0.52px;\n}\n.maru-calendar .datepicker-wrapper .maru-calendar-footer > div .maru-input > input[type=text i] {\n  padding-block: unset;\n  padding-inline: unset;\n}\n.maru-calendar .datepicker-wrapper .maru-calendar-footer > div > span {\n  margin: 0 2px;\n  color: var(--maru-text-disabled);\n}\n.maru-calendar .datepicker-wrapper .maru-calendar-footer .maru-calendar-footer-okay-button {\n  width: 56px;\n}";
+styleInject(css_248z$b);
 
 function Calendar(_a) {
   var children = _a.children,
@@ -89579,7 +89979,7 @@ function DropdownMenu$1(_a) {
         }, {
           children: [jsx(Icon, {
             name: ICONS.Information_s1410,
-            color: "#8c8c8c"
+            color: "iconTertiary"
           }), jsx("span", {
             children: noDataMessage
           })]
@@ -89592,7 +89992,7 @@ function DropdownMenu$1(_a) {
               onChange: handleInputChange,
               startNode: jsx(Icon, {
                 name: ICONS.SearchMd_s1615,
-                color: "#bdbdbd"
+                color: "iconQuaternary"
               }),
               className: "maru-dropdown-menu-item-search-input",
               onClear: handleInputClear,
@@ -89603,7 +90003,7 @@ function DropdownMenu$1(_a) {
           }, {
             children: [jsx(Icon, {
               name: ICONS.Information_s1410,
-              color: "#8c8c8c"
+              color: "iconTertiary"
             }), jsx("span", {
               children: noResultMessage
             })]
@@ -89635,7 +90035,6 @@ function DropdownMenu$1(_a) {
 
 function Arrow$1(_a) {
   var open = _a.open,
-    focus = _a.focus,
     color = _a.color,
     disabled = _a.disabled;
   return jsx("span", __assign({
@@ -89643,7 +90042,7 @@ function Arrow$1(_a) {
   }, {
     children: jsx(Icon, {
       name: open ? ICONS.ChevronUp_s1615 : ICONS.ChevronDown_s1615,
-      color: disabled ? '#e4e4e4' : focus || open ? color : '#bdbdbd'
+      color: disabled ? 'borderSecondary' : open ? color : 'iconQuaternary'
     })
   }));
 }
@@ -89663,7 +90062,7 @@ function Clear$1(_a) {
   }, {
     children: jsx(Icon, {
       name: ICONS.X_s1615,
-      color: focus ? '#5c5c5c' : '#bdbdbd'
+      color: focus ? 'textSecondary' : 'iconQuaternary'
     })
   }));
 }
@@ -89675,6 +90074,7 @@ function DropdownToggleButton$1(_a) {
     color = _a.color,
     stopPropagation = _a.stopPropagation,
     width = _a.width,
+    gap = _a.gap,
     customButton = _a.customButton,
     open = _a.open,
     selected = _a.selected,
@@ -89736,7 +90136,10 @@ function DropdownToggleButton$1(_a) {
       type: "button",
       className: "maru-dropdown-button",
       disabled: disabled,
-      onClick: handleClick
+      onClick: handleClick,
+      style: {
+        gap: "".concat(gap, "px")
+      }
     }, {
       children: [customButton || jsx("span", __assign({
         className: classNames('maru-dropdown-button-contents', {
@@ -89762,7 +90165,6 @@ function DropdownToggleButton$1(_a) {
           onClear: onClear
         }), jsx(Arrow$1, {
           open: open,
-          focus: focus,
           color: color,
           disabled: disabled
         })]
@@ -89771,8 +90173,8 @@ function DropdownToggleButton$1(_a) {
   }));
 }
 
-var css_248z$6 = ".maru-dropdown .maru-dropdown-label {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n  color: #5c5c5c;\n  display: block;\n  margin-bottom: 4px;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper {\n  width: 100%;\n  border-radius: 6px;\n  border: unset;\n  box-shadow: 0 0 0 1px #e4e4e4 inset;\n  cursor: pointer;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n  background-color: white;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover {\n  border: unset;\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-button {\n  color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-button ::-webkit-input-placeholder {\n  color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-button ::-moz-placeholder {\n  color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-button :-ms-input-placeholder {\n  color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-button ::-ms-input-placeholder {\n  color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-button ::placeholder {\n  color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within {\n  border: unset;\n  box-shadow: 0 0 0 1px var(--p) inset;\n  outline: none;\n  background-color: var(--p-10);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within.closed {\n  border: unset;\n  box-shadow: 0 0 0 2px var(--p) inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-button {\n  color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-button:focus-visible {\n  outline: none;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-button ::-webkit-input-placeholder {\n  color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-button ::-moz-placeholder {\n  color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-button :-ms-input-placeholder {\n  color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-button ::-ms-input-placeholder {\n  color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-button ::placeholder {\n  color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled {\n  border: unset;\n  box-shadow: 0 0 0 1px #e4e4e4 inset;\n  outline: none;\n  background-color: #fafafa;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled.closed {\n  border: unset;\n  box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled .maru-dropdown-button {\n  color: #bdbdbd;\n  font-weight: 400;\n  cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled .maru-dropdown-button ::-webkit-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled .maru-dropdown-button ::-moz-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled .maru-dropdown-button :-ms-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled .maru-dropdown-button ::-ms-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled .maru-dropdown-button ::placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover {\n  border: unset;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-button {\n  color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-button ::-webkit-input-placeholder {\n  color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-button ::-moz-placeholder {\n  color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-button :-ms-input-placeholder {\n  color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-button ::-ms-input-placeholder {\n  color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-button ::placeholder {\n  color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within {\n  border: unset;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n  outline: none;\n  background-color: #fafafa;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within.closed {\n  border: unset;\n  box-shadow: 0 0 0 2px #8c8c8c inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-button {\n  color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-button:focus-visible {\n  outline: none;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-button ::-webkit-input-placeholder {\n  color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-button ::-moz-placeholder {\n  color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-button :-ms-input-placeholder {\n  color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-button ::-ms-input-placeholder {\n  color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-button ::placeholder {\n  color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled {\n  border: unset;\n  box-shadow: 0 0 0 1px #e4e4e4 inset;\n  outline: none;\n  background-color: #fafafa;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled.closed {\n  border: unset;\n  box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled .maru-dropdown-button {\n  color: #bdbdbd;\n  font-weight: 400;\n  cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled .maru-dropdown-button ::-webkit-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled .maru-dropdown-button ::-moz-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled .maru-dropdown-button :-ms-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled .maru-dropdown-button ::-ms-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled .maru-dropdown-button ::placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover {\n  border: unset;\n  box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-button {\n  color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-button ::-webkit-input-placeholder {\n  color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-button ::-moz-placeholder {\n  color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-button :-ms-input-placeholder {\n  color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-button ::-ms-input-placeholder {\n  color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-button ::placeholder {\n  color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within {\n  border: unset;\n  box-shadow: 0 0 0 1px #308acc inset;\n  outline: none;\n  background-color: #eaf3fa;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within.closed {\n  border: unset;\n  box-shadow: 0 0 0 2px #308acc inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-button {\n  color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-button:focus-visible {\n  outline: none;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-button ::-webkit-input-placeholder {\n  color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-button ::-moz-placeholder {\n  color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-button :-ms-input-placeholder {\n  color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-button ::-ms-input-placeholder {\n  color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-button ::placeholder {\n  color: #308acc;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled {\n  border: unset;\n  box-shadow: 0 0 0 1px #e4e4e4 inset;\n  outline: none;\n  background-color: #fafafa;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled.closed {\n  border: unset;\n  box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled .maru-dropdown-button {\n  color: #bdbdbd;\n  font-weight: 400;\n  cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled .maru-dropdown-button ::-webkit-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled .maru-dropdown-button ::-moz-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled .maru-dropdown-button :-ms-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled .maru-dropdown-button ::-ms-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled .maru-dropdown-button ::placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover {\n  border: unset;\n  box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-button {\n  color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-button ::-webkit-input-placeholder {\n  color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-button ::-moz-placeholder {\n  color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-button :-ms-input-placeholder {\n  color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-button ::-ms-input-placeholder {\n  color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-button ::placeholder {\n  color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within {\n  border: unset;\n  box-shadow: 0 0 0 1px #ffb020 inset;\n  outline: none;\n  background-color: #fff7e9;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within.closed {\n  border: unset;\n  box-shadow: 0 0 0 2px #ffb020 inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-button {\n  color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-button:focus-visible {\n  outline: none;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-button ::-webkit-input-placeholder {\n  color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-button ::-moz-placeholder {\n  color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-button :-ms-input-placeholder {\n  color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-button ::-ms-input-placeholder {\n  color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-button ::placeholder {\n  color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled {\n  border: unset;\n  box-shadow: 0 0 0 1px #e4e4e4 inset;\n  outline: none;\n  background-color: #fafafa;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled.closed {\n  border: unset;\n  box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled .maru-dropdown-button {\n  color: #bdbdbd;\n  font-weight: 400;\n  cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled .maru-dropdown-button ::-webkit-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled .maru-dropdown-button ::-moz-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled .maru-dropdown-button :-ms-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled .maru-dropdown-button ::-ms-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled .maru-dropdown-button ::placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover {\n  border: unset;\n  box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-button {\n  color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-button ::-webkit-input-placeholder {\n  color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-button ::-moz-placeholder {\n  color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-button :-ms-input-placeholder {\n  color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-button ::-ms-input-placeholder {\n  color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-button ::placeholder {\n  color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within {\n  border: unset;\n  box-shadow: 0 0 0 1px #e53e3e inset;\n  outline: none;\n  background-color: #fcecec;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within.closed {\n  border: unset;\n  box-shadow: 0 0 0 2px #e53e3e inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-button {\n  color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-button:focus-visible {\n  outline: none;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-button ::-webkit-input-placeholder {\n  color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-button ::-moz-placeholder {\n  color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-button :-ms-input-placeholder {\n  color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-button ::-ms-input-placeholder {\n  color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-button ::placeholder {\n  color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled {\n  border: unset;\n  box-shadow: 0 0 0 1px #e4e4e4 inset;\n  outline: none;\n  background-color: #fafafa;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled.closed {\n  border: unset;\n  box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled .maru-dropdown-button {\n  color: #bdbdbd;\n  font-weight: 400;\n  cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled .maru-dropdown-button ::-webkit-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled .maru-dropdown-button ::-moz-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled .maru-dropdown-button :-ms-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled .maru-dropdown-button ::-ms-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled .maru-dropdown-button ::placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover {\n  border: unset;\n  box-shadow: 0 0 0 1px #32a483 inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-button {\n  color: #32a483;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-button ::-webkit-input-placeholder {\n  color: #32a483;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-button ::-moz-placeholder {\n  color: #32a483;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-button :-ms-input-placeholder {\n  color: #32a483;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-button ::-ms-input-placeholder {\n  color: #32a483;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover .maru-dropdown-button ::placeholder {\n  color: #32a483;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within {\n  border: unset;\n  box-shadow: 0 0 0 1px #32a483 inset;\n  outline: none;\n  background-color: #eaf6f3;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible.closed, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within.closed {\n  border: unset;\n  box-shadow: 0 0 0 2px #32a483 inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible .maru-dropdown-button, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within .maru-dropdown-button {\n  color: #32a483;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within .maru-dropdown-button:focus-visible {\n  outline: none;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible .maru-dropdown-button ::-webkit-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within .maru-dropdown-button ::-webkit-input-placeholder {\n  color: #32a483;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible .maru-dropdown-button ::-moz-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within .maru-dropdown-button ::-moz-placeholder {\n  color: #32a483;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible .maru-dropdown-button :-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within .maru-dropdown-button :-ms-input-placeholder {\n  color: #32a483;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible .maru-dropdown-button ::-ms-input-placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within .maru-dropdown-button ::-ms-input-placeholder {\n  color: #32a483;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible .maru-dropdown-button ::placeholder, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within .maru-dropdown-button ::placeholder {\n  color: #32a483;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled {\n  border: unset;\n  box-shadow: 0 0 0 1px #e4e4e4 inset;\n  outline: none;\n  background-color: #fafafa;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled.closed {\n  border: unset;\n  box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled .maru-dropdown-button {\n  color: #bdbdbd;\n  font-weight: 400;\n  cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled .maru-dropdown-button ::-webkit-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled .maru-dropdown-button ::-moz-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled .maru-dropdown-button :-ms-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled .maru-dropdown-button ::-ms-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled .maru-dropdown-button ::placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n  width: 100%;\n  height: 37px;\n  border: unset;\n  border-radius: 6px;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 8px 10px 8px 14px;\n  color: #5c5c5c;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 400;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button ::-webkit-input-placeholder {\n  font-weight: 300;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button ::-moz-placeholder {\n  font-weight: 300;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button :-ms-input-placeholder {\n  font-weight: 300;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button ::-ms-input-placeholder {\n  font-weight: 300;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button ::placeholder {\n  font-weight: 300;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button .maru-dropdown-button-contents {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button .maru-dropdown-button-contents.placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button .maru-dropdown-button-contents .maru-tooltip-wrapper {\n  width: 100%;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button .maru-dropdown-button-contents .maru-tooltip-wrapper > span {\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button .maru-dropdown-button-icon-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.errored {\n  border: unset;\n  box-shadow: 0 0 0 2px #e53e3e inset;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-toggle-clear {\n  padding: unset;\n  margin: unset;\n  border: unset;\n  background-color: unset;\n  cursor: pointer;\n  display: flex;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-toggle-clear:last-of-type {\n  margin: 0 6px 0 8px;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-toggle-arrow {\n  display: flex;\n}\n.maru-dropdown .maru-dropdown-error-message {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 400;\n  color: #e53e3e;\n  display: block;\n  margin-top: 4px;\n}\n\n.maru-dropdown-menu-wrapper {\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  position: fixed;\n  z-index: 1600;\n  display: none;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu {\n  margin-top: 4px;\n  position: absolute;\n  z-index: 1601;\n  border-radius: 6px;\n  box-shadow: 0px 0px 4px #e4e4e4;\n  background-color: white;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-primary {\n  border: 1px solid var(--p);\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-primary .maru-dropdown-menu-item-menu-header {\n  border-bottom: 1px solid var(--p);\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-secondary {\n  border: 1px solid #8c8c8c;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-secondary .maru-dropdown-menu-item-menu-header {\n  border-bottom: 1px solid #8c8c8c;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-positive {\n  border: 1px solid #308acc;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-positive .maru-dropdown-menu-item-menu-header {\n  border-bottom: 1px solid #308acc;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-warning {\n  border: 1px solid #ffb020;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-warning .maru-dropdown-menu-item-menu-header {\n  border-bottom: 1px solid #ffb020;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-danger {\n  border: 1px solid #e53e3e;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-danger .maru-dropdown-menu-item-menu-header {\n  border-bottom: 1px solid #e53e3e;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-success {\n  border: 1px solid #32a483;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-success .maru-dropdown-menu-item-menu-header {\n  border-bottom: 1px solid #32a483;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper {\n  overflow-y: auto;\n  border-top-left-radius: 6px;\n  border-top-right-radius: 6px;\n  border-bottom-left-radius: 6px;\n  border-bottom-right-radius: 6px;\n  width: 100%;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item {\n  text-align: start;\n  width: 100%;\n  background-color: white;\n  border: unset;\n  cursor: pointer;\n  height: 37px;\n  padding: 8px 14px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 400;\n  color: #5c5c5c;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item.selected, .maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item:hover {\n  background-color: #fafafa;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item-empty {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  flex-direction: row;\n  gap: 6px;\n  color: #8c8c8c;\n  font-weight: 300;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item-menu-header .maru-dropdown-menu-item-search-input .maru-input {\n  border-bottom-left-radius: unset;\n  border-bottom-right-radius: unset;\n  border: unset;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item-menu-header .maru-dropdown-menu-item-search-input .maru-input:focus-visible, .maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item-menu-header .maru-dropdown-menu-item-search-input .maru-input:focus-within, .maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item-menu-header .maru-dropdown-menu-item-search-input .maru-input:hover {\n  outline: unset;\n  border: unset;\n  background-color: transparent;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item .maru-tooltip-wrapper {\n  width: 100%;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item .maru-tooltip-wrapper > span {\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-bottom-button {\n  width: 100%;\n  border-top-left-radius: unset;\n  border-top-right-radius: unset;\n  box-shadow: unset;\n  gap: 8px;\n  border-top: 1px solid #e4e4e4;\n}";
-styleInject(css_248z$6);
+var css_248z$a = ".maru-dropdown .maru-dropdown-label {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--maru-text-secondary);\n  display: block;\n  margin-bottom: 4px;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper {\n  box-sizing: border-box;\n  width: 100%;\n  border-radius: 8px;\n  border: 1px solid var(--maru-border-primary);\n  cursor: pointer;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 500;\n  background-color: var(--maru-background-primary);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover:not(.disabled) {\n  border-color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active:not(.disabled), .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus:not(.disabled), .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible:not(.disabled), .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within:not(.disabled), .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:not(.closed):not(.disabled) {\n  border-color: var(--p);\n  border-width: 2px;\n  outline: none;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active:not(.disabled) .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus:not(.disabled) .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-visible:not(.disabled) .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within:not(.disabled) .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:not(.closed):not(.disabled) .maru-dropdown-button:focus-visible {\n  outline: none;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled {\n  border-color: var(--maru-border-primary);\n  border-width: 1px;\n  outline: none;\n  background-color: var(--maru-background-primary);\n  opacity: 0.5;\n  cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary.disabled .maru-dropdown-button {\n  color: var(--maru-text-tertiary);\n  cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover:not(.disabled) {\n  border-color: var(--maru-icon-tertiary);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active:not(.disabled), .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus:not(.disabled), .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible:not(.disabled), .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within:not(.disabled), .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:not(.closed):not(.disabled) {\n  border-color: var(--maru-icon-tertiary);\n  border-width: 2px;\n  outline: none;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active:not(.disabled) .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus:not(.disabled) .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-visible:not(.disabled) .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within:not(.disabled) .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:not(.closed):not(.disabled) .maru-dropdown-button:focus-visible {\n  outline: none;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled {\n  border-color: var(--maru-border-primary);\n  border-width: 1px;\n  outline: none;\n  background-color: var(--maru-background-primary);\n  opacity: 0.5;\n  cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary.disabled .maru-dropdown-button {\n  color: var(--maru-text-tertiary);\n  cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover:not(.disabled) {\n  border-color: var(--maru-background-info-solid-primary);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active:not(.disabled), .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus:not(.disabled), .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible:not(.disabled), .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within:not(.disabled), .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:not(.closed):not(.disabled) {\n  border-color: var(--maru-background-info-solid-primary);\n  border-width: 2px;\n  outline: none;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active:not(.disabled) .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus:not(.disabled) .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-visible:not(.disabled) .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within:not(.disabled) .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:not(.closed):not(.disabled) .maru-dropdown-button:focus-visible {\n  outline: none;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled {\n  border-color: var(--maru-border-primary);\n  border-width: 1px;\n  outline: none;\n  background-color: var(--maru-background-primary);\n  opacity: 0.5;\n  cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive.disabled .maru-dropdown-button {\n  color: var(--maru-text-tertiary);\n  cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover:not(.disabled) {\n  border-color: var(--maru-background-warning-solid-primary);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active:not(.disabled), .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus:not(.disabled), .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible:not(.disabled), .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within:not(.disabled), .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:not(.closed):not(.disabled) {\n  border-color: var(--maru-background-warning-solid-primary);\n  border-width: 2px;\n  outline: none;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active:not(.disabled) .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus:not(.disabled) .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-visible:not(.disabled) .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within:not(.disabled) .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:not(.closed):not(.disabled) .maru-dropdown-button:focus-visible {\n  outline: none;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled {\n  border-color: var(--maru-border-primary);\n  border-width: 1px;\n  outline: none;\n  background-color: var(--maru-background-primary);\n  opacity: 0.5;\n  cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning.disabled .maru-dropdown-button {\n  color: var(--maru-text-tertiary);\n  cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover:not(.disabled) {\n  border-color: var(--maru-background-error-solid-primary);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active:not(.disabled), .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus:not(.disabled), .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible:not(.disabled), .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within:not(.disabled), .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:not(.closed):not(.disabled) {\n  border-color: var(--maru-background-error-solid-primary);\n  border-width: 2px;\n  outline: none;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active:not(.disabled) .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus:not(.disabled) .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-visible:not(.disabled) .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within:not(.disabled) .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:not(.closed):not(.disabled) .maru-dropdown-button:focus-visible {\n  outline: none;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled {\n  border-color: var(--maru-border-primary);\n  border-width: 1px;\n  outline: none;\n  background-color: var(--maru-background-primary);\n  opacity: 0.5;\n  cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger.disabled .maru-dropdown-button {\n  color: var(--maru-text-tertiary);\n  cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:hover:not(.disabled) {\n  border-color: var(--maru-background-positive-solid-primary);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active:not(.disabled), .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus:not(.disabled), .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible:not(.disabled), .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within:not(.disabled), .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:not(.closed):not(.disabled) {\n  border-color: var(--maru-background-positive-solid-primary);\n  border-width: 2px;\n  outline: none;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:active:not(.disabled) .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus:not(.disabled) .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-visible:not(.disabled) .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:focus-within:not(.disabled) .maru-dropdown-button:focus-visible, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success:not(.closed):not(.disabled) .maru-dropdown-button:focus-visible {\n  outline: none;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled {\n  border-color: var(--maru-border-primary);\n  border-width: 1px;\n  outline: none;\n  background-color: var(--maru-background-primary);\n  opacity: 0.5;\n  cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-success.disabled .maru-dropdown-button {\n  color: var(--maru-text-tertiary);\n  cursor: default;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n  box-sizing: border-box;\n  width: 100%;\n  min-height: 36px;\n  border: unset;\n  border-radius: 8px;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 8px 12px;\n  color: var(--maru-text-primary);\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 500;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button .placeholder,\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button ::placeholder {\n  font-weight: 400;\n  color: var(--maru-text-tertiary);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button .maru-dropdown-button-contents {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n  flex: 1 1 auto;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button .maru-dropdown-button-contents.placeholder {\n  font-weight: 400;\n  color: var(--maru-text-tertiary);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button .maru-dropdown-button-contents .maru-tooltip-wrapper {\n  width: 100%;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button .maru-dropdown-button-contents .maru-tooltip-wrapper > span {\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button .maru-dropdown-button-icon-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  flex-shrink: 0;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.errored {\n  border: 2px solid var(--maru-border-error-primary);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-toggle-clear {\n  padding: unset;\n  margin: unset;\n  border: unset;\n  background-color: unset;\n  cursor: pointer;\n  display: flex;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-toggle-clear:last-of-type {\n  margin: 0 6px 0 8px;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-toggle-arrow {\n  display: flex;\n}\n.maru-dropdown .maru-dropdown-error-message {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 12px;\n  font-weight: 400;\n  color: var(--maru-text-error-primary);\n  display: block;\n  margin-top: 4px;\n}\n\n.maru-dropdown-menu-wrapper {\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  position: fixed;\n  z-index: 1600;\n  display: none;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu {\n  margin-top: 4px;\n  position: absolute;\n  z-index: 1601;\n  border-radius: 8px;\n  border: 1px solid var(--maru-border-primary);\n  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.07);\n  background-color: var(--maru-background-primary);\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-primary {\n  border: 1px solid var(--p);\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-primary .maru-dropdown-menu-item-menu-header {\n  border-bottom: 1px solid var(--p);\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-secondary {\n  border: 1px solid var(--maru-icon-tertiary);\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-secondary .maru-dropdown-menu-item-menu-header {\n  border-bottom: 1px solid var(--maru-icon-tertiary);\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-positive {\n  border: 1px solid var(--maru-background-info-solid-primary);\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-positive .maru-dropdown-menu-item-menu-header {\n  border-bottom: 1px solid var(--maru-background-info-solid-primary);\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-warning {\n  border: 1px solid var(--maru-background-warning-solid-primary);\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-warning .maru-dropdown-menu-item-menu-header {\n  border-bottom: 1px solid var(--maru-background-warning-solid-primary);\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-danger {\n  border: 1px solid var(--maru-background-error-solid-primary);\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-danger .maru-dropdown-menu-item-menu-header {\n  border-bottom: 1px solid var(--maru-background-error-solid-primary);\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-success {\n  border: 1px solid var(--maru-background-positive-solid-primary);\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu.maru-dropdown-search-menu.maru-dropdown-menu-success .maru-dropdown-menu-item-menu-header {\n  border-bottom: 1px solid var(--maru-background-positive-solid-primary);\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper {\n  overflow-y: auto;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n  width: 100%;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item {\n  text-align: start;\n  width: 100%;\n  background-color: var(--maru-background-primary);\n  border: unset;\n  cursor: pointer;\n  min-height: 36px;\n  padding: 8px 12px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--maru-text-primary);\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item.selected, .maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item:hover {\n  background-color: var(--maru-background-primary-hover);\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item-empty {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  flex-direction: row;\n  gap: 6px;\n  color: var(--maru-text-tertiary);\n  font-weight: 400;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item-menu-header .maru-dropdown-menu-item-search-input .maru-input {\n  border-bottom-left-radius: unset;\n  border-bottom-right-radius: unset;\n  border: unset;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item-menu-header .maru-dropdown-menu-item-search-input .maru-input:focus-visible, .maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item-menu-header .maru-dropdown-menu-item-search-input .maru-input:focus-within, .maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item-menu-header .maru-dropdown-menu-item-search-input .maru-input:hover {\n  outline: unset;\n  border: unset;\n  background-color: transparent;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item .maru-tooltip-wrapper {\n  width: 100%;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item .maru-tooltip-wrapper > span {\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-bottom-button {\n  width: 100%;\n  border-top-left-radius: unset;\n  border-top-right-radius: unset;\n  box-shadow: unset;\n  gap: 8px;\n  border-top: 1px solid var(--maru-border-secondary);\n}";
+styleInject(css_248z$a);
 
 // eslint-disable-next-line import/prefer-default-export
 function Dropdown(_a) {
@@ -89797,13 +90199,15 @@ function Dropdown(_a) {
     noResultMessage = _a.noResultMessage,
     width = _a.width,
     height = _a.height,
+    _d = _a.gap,
+    gap = _d === void 0 ? 8 : _d,
     customButton = _a.customButton,
     customMenuItem = _a.customMenuItem,
     anchorEl = _a.anchorEl,
     menuBottomButton = _a.menuBottomButton;
-  var _d = useState(false),
-    open = _d[0],
-    setOpen = _d[1];
+  var _e = useState(false),
+    open = _e[0],
+    setOpen = _e[1];
   var wrapperRef = useRef(null);
   var selected = useMemo(function () {
     return data.find(function (d) {
@@ -89829,6 +90233,7 @@ function Dropdown(_a) {
       color: color,
       stopPropagation: stopPropagation,
       width: width,
+      gap: gap,
       customButton: customButton,
       //
       open: open,
@@ -89875,45 +90280,187 @@ function Dropdown(_a) {
   }));
 }
 
-var css_248z$5 = ".maru-modal-wrapper {\n  width: 100vw;\n  height: 100vh;\n  position: fixed;\n  top: 0;\n  left: 0;\n  background-color: rgba(92, 92, 92, 0.5019607843);\n  z-index: 6006;\n  display: block;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-modal-wrapper .maru-modal {\n  background-color: white;\n  box-shadow: 0px 5px 20px 0px #8c8c8c;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-xs {\n  width: 300px;\n  box-shadow: 0px 2px 8px 1px #8c8c8c;\n  padding: 32px;\n  border-radius: 10px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-s {\n  width: 400px;\n  padding: 32px;\n  border-radius: 10px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-m {\n  width: 550px;\n  padding: 28px 36px 36px 36px;\n  border-radius: 12px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-l {\n  width: 860px;\n  padding: 28px 36px 36px 36px;\n  border-radius: 12px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-xl {\n  width: 1200px;\n  padding: 30px 40px 40px 40px;\n  border-radius: 12px;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n  margin-bottom: 24px;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header > div {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  flex-direction: row;\n  gap: 8px;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header > div > h1 {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 16px;\n  letter-spacing: -0.64px;\n  font-weight: 600;\n  color: #5c5c5c;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header > div .sub-title-wrapper {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 400;\n  color: #8c8c8c;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-body {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 400;\n  color: #5c5c5c;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-footer {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  flex-direction: row;\n  margin-top: 24px;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-footer button {\n  margin: 0 0 0 6px;\n}";
-styleInject(css_248z$5);
+var css_248z$9 = ".maru-input-with-action-wrapper {\n  width: 100%;\n}\n.maru-input-with-action-wrapper .maru-input-with-action-label {\n  display: block;\n  margin-bottom: 4px;\n  color: var(--maru-text-secondary);\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 500;\n}\n.maru-input-with-action-wrapper .maru-input-with-action {\n  display: flex;\n  align-items: flex-start;\n}\n.maru-input-with-action-wrapper .maru-input-with-action .maru-input-with-action-field {\n  min-width: 0;\n  flex: 1 1 auto;\n}\n.maru-input-with-action-wrapper .maru-input-with-action .maru-input-with-action-field:focus-within, .maru-input-with-action-wrapper .maru-input-with-action .maru-input-with-action-field.maru-input-with-action-field-error {\n  position: relative;\n  z-index: 2;\n}\n.maru-input-with-action-wrapper .maru-input-with-action .maru-input-with-action-field .maru-input {\n  border-radius: 8px 0 0 8px;\n}\n.maru-input-with-action-wrapper .maru-input-with-action .maru-input-with-action-button {\n  flex: 0 0 auto;\n  min-height: 36px;\n  margin-left: -1px;\n  border-radius: 0 8px 8px 0;\n  position: relative;\n  z-index: 1;\n}\n.maru-input-with-action-wrapper .maru-input-footer {\n  display: block;\n  margin-top: 4px;\n}\n.maru-input-with-action-wrapper .maru-input-footer > span {\n  color: var(--maru-text-secondary);\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 12px;\n  font-weight: 400;\n}\n.maru-input-with-action-wrapper .maru-input-footer.maru-input-footer-error > span {\n  color: var(--maru-text-error-primary);\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n  letter-spacing: 0;\n}";
+styleInject(css_248z$9);
+
+var InputWithAction = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _b;
+  var actionContent = _a.actionContent,
+    onAction = _a.onAction,
+    _c = _a.actionDisabled,
+    actionDisabled = _c === void 0 ? false : _c,
+    actionAriaLabel = _a.actionAriaLabel,
+    className = _a.className,
+    disabled = _a.disabled,
+    label = _a.label,
+    helperText = _a.helperText,
+    invalid = _a.invalid,
+    inputProps = __rest(_a, ["actionContent", "onAction", "actionDisabled", "actionAriaLabel", "className", "disabled", "label", "helperText", "invalid"]);
+  var hashId = uuidv4(4);
+  var inputId = (_b = inputProps.id) !== null && _b !== void 0 ? _b : "maru-input-with-action-".concat(hashId);
+  var helperTextId = "".concat(inputId, "-helper-text");
+  var footerContent = (invalid === null || invalid === void 0 ? void 0 : invalid.on) && invalid.message != null ? invalid.message : helperText;
+  var hasFooterContent = footerContent != null;
+  var ariaDescribedBy = [inputProps['aria-describedby'], hasFooterContent ? helperTextId : undefined].filter(Boolean).join(' ');
+  return jsxs("div", __assign({
+    className: classNames('maru-input-with-action-wrapper', className)
+  }, {
+    children: [label && jsx("label", __assign({
+      className: "maru-input-with-action-label",
+      htmlFor: inputId
+    }, {
+      children: label
+    })), jsxs("div", __assign({
+      className: "maru-input-with-action"
+    }, {
+      children: [jsx(Input, __assign({}, inputProps, {
+        id: inputId,
+        ref: ref,
+        disabled: disabled,
+        invalid: invalid ? {
+          on: invalid.on
+        } : undefined,
+        "aria-invalid": (invalid === null || invalid === void 0 ? void 0 : invalid.on) ? true : inputProps['aria-invalid'],
+        "aria-describedby": ariaDescribedBy || undefined,
+        className: classNames('maru-input-with-action-field', {
+          'maru-input-with-action-field-error': invalid === null || invalid === void 0 ? void 0 : invalid.on
+        })
+      })), jsx(Button, __assign({
+        color: "secondary",
+        variant: "outline",
+        size: "normal",
+        disabled: disabled || actionDisabled,
+        onClick: onAction,
+        "aria-label": actionAriaLabel,
+        className: "maru-input-with-action-button"
+      }, {
+        children: actionContent
+      }))]
+    })), hasFooterContent && jsx("div", __assign({
+      id: helperTextId,
+      className: classNames('maru-input-footer', {
+        'maru-input-footer-error': invalid === null || invalid === void 0 ? void 0 : invalid.on
+      })
+    }, {
+      children: jsx("span", {
+        children: footerContent
+      })
+    }))]
+  }));
+});
+InputWithAction.displayName = 'InputWithAction';
+InputWithAction.defaultProps = {
+  actionDisabled: false,
+  actionAriaLabel: undefined
+};
+
+var css_248z$8 = ".maru-modal-wrapper {\n  width: 100vw;\n  height: 100vh;\n  position: fixed;\n  top: 0;\n  left: 0;\n  background-color: var(--maru-background-popup-primary);\n  backdrop-filter: blur(2.5px);\n  -webkit-backdrop-filter: blur(2.5px);\n  z-index: 6006;\n  display: block;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-modal-wrapper .maru-modal {\n  background-color: var(--maru-background-primary);\n  border: 1px solid var(--maru-border-secondary);\n  box-shadow: 0px 6px 8px 0px var(--maru-shadow-default);\n  border-radius: 24px;\n  padding: 24px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-xs {\n  width: 300px;\n  box-shadow: 0px 2px 8px 1px var(--maru-shadow-default);\n}\n.maru-modal-wrapper .maru-modal.maru-modal-s {\n  width: 400px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-m {\n  width: 550px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-l {\n  width: 860px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-xl {\n  width: 1200px;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  flex-direction: row;\n  margin-bottom: 6px;\n  gap: 8px;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header .maru-modal-header-content {\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  flex-direction: column;\n  gap: 16px;\n  flex: 1;\n  min-width: 0;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header .maru-modal-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 10px;\n  border: 1px solid var(--maru-border-primary);\n  border-radius: 8px;\n  background-color: var(--maru-background-primary);\n  flex-shrink: 0;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header .maru-modal-icon > * {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  overflow: hidden;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header .maru-modal-icon > * svg,\n.maru-modal-wrapper .maru-modal .maru-modal-header .maru-modal-icon > * img {\n  width: 100%;\n  height: 100%;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header .maru-modal-title-group {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  flex-direction: row;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header .maru-modal-title-group > h1 {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--maru-text-primary);\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header .maru-modal-title-group .sub-title-wrapper {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 12px;\n  font-weight: 400;\n  color: var(--maru-text-tertiary);\n}\n.maru-modal-wrapper .maru-modal .maru-modal-body {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--maru-text-secondary);\n}\n.maru-modal-wrapper .maru-modal .maru-modal-footer {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  flex-direction: row;\n  margin-top: 32px;\n  gap: 12px;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-footer button {\n  margin: 0;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-footer--full button {\n  flex: 1;\n  min-width: 0;\n}";
+styleInject(css_248z$8);
 
 function Modal(_a) {
   var children = _a.children,
     onClose = _a.onClose,
     open = _a.open,
+    ariaLabel = _a.ariaLabel,
     _b = _a.backdrop,
     backdrop = _b === void 0 ? true : _b,
     cancelButton = _a.cancelButton,
     className = _a.className,
+    _c = _a.closeButtonAriaLabel,
+    closeButtonAriaLabel = _c === void 0 ? '모달 닫기' : _c,
     disabledEnter = _a.disabledEnter,
+    _d = _a.fullFooter,
+    fullFooter = _d === void 0 ? false : _d,
     hiddenCloseButton = _a.hiddenCloseButton,
+    icon = _a.icon,
     okButton = _a.okButton,
-    _c = _a.size,
-    size = _c === void 0 ? 's' : _c,
+    _e = _a.size,
+    size = _e === void 0 ? 's' : _e,
     title = _a.title,
     subTitle = _a.subTitle;
-  var wrapperRef = useRef(null);
+  var dialogRef = useRef(null);
+  var previouslyFocusedElementRef = useRef(null);
+  var pointerDownOnBackdropRef = useRef(false);
+  var generatedTitleId = useId$1();
+  var titleId = "maru-modal-title-".concat(generatedTitleId.replace(/:/g, ''));
   useEffect(function () {
-    if (open) {
-      if (wrapperRef.current) {
-        wrapperRef.current.focus();
-      }
+    if (!open) {
+      return undefined;
     }
+    previouslyFocusedElementRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    var animationFrame = window.requestAnimationFrame(function () {
+      var dialog = dialogRef.current;
+      if (!dialog) {
+        return;
+      }
+      var focusableSelector = ['button:not(:disabled)', 'a[href]', 'input:not(:disabled)', 'select:not(:disabled)', 'textarea:not(:disabled)', '[contenteditable="true"]', '[tabindex]:not([tabindex="-1"])'].join(',');
+      var firstFocusableElement = dialog.querySelector(focusableSelector);
+      (firstFocusableElement !== null && firstFocusableElement !== void 0 ? firstFocusableElement : dialog).focus();
+    });
+    return function () {
+      window.cancelAnimationFrame(animationFrame);
+      var previouslyFocusedElement = previouslyFocusedElementRef.current;
+      if (previouslyFocusedElement === null || previouslyFocusedElement === void 0 ? void 0 : previouslyFocusedElement.isConnected) {
+        previouslyFocusedElement.focus();
+      }
+      previouslyFocusedElementRef.current = null;
+    };
   }, [open]);
-  var handleWrapperClick = function handleWrapperClick() {
-    if (backdrop) {
+  useEffect(function () {
+    if (process.env.NODE_ENV !== 'production' && open && !title && !ariaLabel) {
+      console.warn('[Modal] 접근성 이름을 위해 title 또는 ariaLabel을 제공해야 합니다.');
+    }
+  }, [ariaLabel, open, title]);
+  var handleWrapperPointerDown = function handleWrapperPointerDown(e) {
+    pointerDownOnBackdropRef.current = e.target === e.currentTarget;
+  };
+  var handleWrapperPointerUp = function handleWrapperPointerUp(e) {
+    var pointerUpOnBackdrop = e.target === e.currentTarget;
+    if (backdrop && pointerDownOnBackdropRef.current && pointerUpOnBackdrop) {
       onClose();
     }
+    pointerDownOnBackdropRef.current = false;
   };
-  var handleWrapperKeyDown = function handleWrapperKeyDown(e) {
-    var _a;
+  var handleDialogKeyDown = function handleDialogKeyDown(e) {
     if (e.key === 'Escape') {
+      e.preventDefault();
       onClose();
+      return;
+    }
+    if (e.key === 'Tab') {
+      var dialog = dialogRef.current;
+      if (!dialog) {
+        return;
+      }
+      var focusableSelector = ['button:not(:disabled)', 'a[href]', 'input:not(:disabled)', 'select:not(:disabled)', 'textarea:not(:disabled)', '[contenteditable="true"]', '[tabindex]:not([tabindex="-1"])'].join(',');
+      var focusableElements = Array.from(dialog.querySelectorAll(focusableSelector)).filter(function (element) {
+        return element.getAttribute('aria-hidden') !== 'true' && element.getClientRects().length > 0;
+      });
+      if (focusableElements.length === 0) {
+        e.preventDefault();
+        dialog.focus();
+        return;
+      }
+      var firstFocusableElement = focusableElements[0];
+      var lastFocusableElement = focusableElements[focusableElements.length - 1];
+      if (e.shiftKey && (document.activeElement === firstFocusableElement || !dialog.contains(document.activeElement))) {
+        e.preventDefault();
+        lastFocusableElement.focus();
+      } else if (!e.shiftKey && (document.activeElement === lastFocusableElement || !dialog.contains(document.activeElement))) {
+        e.preventDefault();
+        firstFocusableElement.focus();
+      }
+      return;
+    }
+    if (disabledEnter || e.key !== 'Enter' || e.nativeEvent.isComposing || !(okButton === null || okButton === void 0 ? void 0 : okButton.onClick) || okButton.disabled) {
+      return;
     }
-    if (!disabledEnter && e.key === 'Enter') {
-      (_a = okButton === null || okButton === void 0 ? void 0 : okButton.onClick) === null || _a === void 0 ? void 0 : _a.call(okButton);
+    var eventTarget = e.target;
+    if (eventTarget instanceof HTMLElement && eventTarget.closest('button, input, a[href], select, textarea, [contenteditable="true"]')) {
+      return;
     }
+    e.preventDefault();
+    okButton.onClick();
   };
   var handleClose = function handleClose() {
     onClose();
@@ -89921,67 +90468,79 @@ function Modal(_a) {
   var handleModalClick = function handleModalClick(e) {
     e.stopPropagation();
   };
-  var handleFooterKeyDown = function handleFooterKeyDown(e) {
-    e.stopPropagation();
-  };
-  // FIXME: 취소에서 탭 > 엔터하면 confirm 동작. 확인 필요
   var handleOkButtonClick = function handleOkButtonClick() {
     var _a;
     (_a = okButton === null || okButton === void 0 ? void 0 : okButton.onClick) === null || _a === void 0 ? void 0 : _a.call(okButton);
   };
+  var showHeader = !!(title || icon || !hiddenCloseButton);
   return jsx(CreatePortal, {
     children: open && jsx("div", __assign({
-      ref: wrapperRef,
       className: "maru-modal-wrapper",
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-      tabIndex: 0,
-      onClick: handleWrapperClick,
-      onKeyDown: handleWrapperKeyDown,
+      onPointerDown: handleWrapperPointerDown,
+      onPointerUp: handleWrapperPointerUp,
       role: "presentation"
     }, {
       children: jsxs("div", __assign({
+        ref: dialogRef,
         className: classNames('maru-modal', "maru-modal-".concat(size), className),
         onClick: handleModalClick,
+        onKeyDown: handleDialogKeyDown,
         role: "dialog",
-        "aria-modal": true
+        "aria-modal": true,
+        "aria-labelledby": title ? titleId : undefined,
+        "aria-label": title ? undefined : ariaLabel,
+        tabIndex: -1
       }, {
-        children: [(title || !hiddenCloseButton) && jsxs("header", __assign({
+        children: [showHeader && jsxs("header", __assign({
           className: "maru-modal-header"
         }, {
-          children: [jsxs("div", {
-            children: [title && jsx("h1", {
-              children: title
-            }), subTitle && jsx("h2", __assign({
-              className: "sub-title-wrapper"
+          children: [jsxs("div", __assign({
+            className: "maru-modal-header-content"
+          }, {
+            children: [icon && jsx("div", __assign({
+              className: "maru-modal-icon"
             }, {
-              children: subTitle
+              children: icon
+            })), (title || subTitle) && jsxs("div", __assign({
+              className: "maru-modal-title-group"
+            }, {
+              children: [title && jsx("h1", __assign({
+                id: titleId
+              }, {
+                children: title
+              })), subTitle && jsx("h2", __assign({
+                className: "sub-title-wrapper"
+              }, {
+                children: subTitle
+              }))]
             }))]
-          }), !hiddenCloseButton && jsx(Button, {
+          })), !hiddenCloseButton && jsx(Button, {
             startIcon: {
               name: ICONS.X_s2420,
-              color: '#5c5c5c'
+              color: 'textSecondary'
             },
             color: "secondary",
-            onClick: handleClose
+            onClick: handleClose,
+            "aria-label": closeButtonAriaLabel
           })]
         })), jsx("main", __assign({
           className: "maru-modal-body"
         }, {
           children: children
         })), (cancelButton || okButton) && jsxs("footer", __assign({
-          className: "maru-modal-footer"
+          className: classNames('maru-modal-footer', {
+            'maru-modal-footer--full': fullFooter
+          })
         }, {
           children: [cancelButton && jsx(Button, __assign({
             color: "secondary",
             onClick: handleClose,
-            onKeyDown: handleFooterKeyDown,
             disabled: cancelButton.disabled
           }, {
             children: cancelButton.content
           })), okButton && jsx(Button, __assign({
             color: okButton.color || 'primary',
             onClick: handleOkButtonClick,
-            onKeyDown: handleFooterKeyDown,
             disabled: okButton.disabled
           }, {
             children: okButton.content
@@ -90230,7 +90789,7 @@ function DropdownMenu(_a) {
         }, {
           children: [jsx(Icon, {
             name: ICONS.Information_s1410,
-            color: "#8c8c8c"
+            color: "iconTertiary"
           }), jsx("span", {
             children: noDataMessage
           })]
@@ -90247,7 +90806,7 @@ function DropdownMenu(_a) {
               onChange: handleInputChange,
               endNode: jsx(Icon, {
                 name: ICONS.SearchMd_s1615,
-                color: "#bdbdbd"
+                color: "iconQuaternary"
               }),
               className: "maru-multi-select-dropdown-menu-item-search-input",
               onClear: handleInputClear,
@@ -90262,7 +90821,7 @@ function DropdownMenu(_a) {
           }, {
             children: [jsx(Icon, {
               name: ICONS.Information_s1410,
-              color: "#8c8c8c"
+              color: "iconTertiary"
             }), jsx("span", {
               children: noResultMessage
             })]
@@ -90293,7 +90852,7 @@ function Arrow(_a) {
   }, {
     children: jsx(Icon, {
       name: open ? ICONS.ChevronUp_s1615 : ICONS.ChevronDown_s1615,
-      color: disabled ? '#e4e4e4' : focus || open ? color : '#bdbdbd'
+      color: disabled ? 'borderSecondary' : focus || open ? color : 'iconQuaternary'
     })
   }));
 }
@@ -90313,7 +90872,7 @@ function Clear(_a) {
   }, {
     children: jsx(Icon, {
       name: ICONS.X_s1615,
-      color: focus ? '#5c5c5c' : '#bdbdbd'
+      color: focus ? 'textSecondary' : 'iconQuaternary'
     })
   }));
 }
@@ -90420,8 +90979,8 @@ function DropdownToggleButton(_a) {
   }));
 }
 
-var css_248z$4 = ".maru-multi-select-dropdown .maru-multi-select-dropdown-label {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n  color: #5c5c5c;\n  display: block;\n  margin-bottom: 4px;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper {\n  width: 100%;\n  border-radius: 6px;\n  border: unset;\n  box-shadow: 0 0 0 1px #e4e4e4 inset;\n  cursor: pointer;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n  background-color: white;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:hover {\n  border: unset;\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:hover .maru-multi-select-dropdown-button {\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:hover .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:hover .maru-multi-select-dropdown-button ::-moz-placeholder {\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:hover .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:hover .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:hover .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:hover .maru-multi-select-dropdown-button ::placeholder {\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:active, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-within {\n  border: unset;\n  box-shadow: 0 0 0 1px var(--p) inset;\n  outline: none;\n  background-color: var(--p-10);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:active.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-visible.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-within.closed {\n  border: unset;\n  box-shadow: 0 0 0 2px var(--p) inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:active .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-visible .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-within .maru-multi-select-dropdown-button {\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:active .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-visible .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-within .maru-multi-select-dropdown-button:focus-visible {\n  outline: none;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:active .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-visible .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-within .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:active .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-visible .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-within .maru-multi-select-dropdown-button ::-moz-placeholder {\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:active .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-visible .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-within .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:active .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-visible .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-within .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:active .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:active .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-visible .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-visible .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-within .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-within .maru-multi-select-dropdown-button ::placeholder {\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary.disabled {\n  border: unset;\n  box-shadow: 0 0 0 1px #e4e4e4 inset;\n  outline: none;\n  background-color: #fafafa;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary.disabled.closed {\n  border: unset;\n  box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary.disabled .maru-multi-select-dropdown-button {\n  color: #bdbdbd;\n  font-weight: 400;\n  cursor: default;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary.disabled .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary.disabled .maru-multi-select-dropdown-button ::-moz-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary.disabled .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary.disabled .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary.disabled .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary.disabled .maru-multi-select-dropdown-button ::placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:hover {\n  border: unset;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:hover .maru-multi-select-dropdown-button {\n  color: #8c8c8c;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:hover .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  color: #8c8c8c;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:hover .maru-multi-select-dropdown-button ::-moz-placeholder {\n  color: #8c8c8c;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:hover .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  color: #8c8c8c;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:hover .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  color: #8c8c8c;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:hover .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:hover .maru-multi-select-dropdown-button ::placeholder {\n  color: #8c8c8c;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:active, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-within {\n  border: unset;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n  outline: none;\n  background-color: #fafafa;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:active.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-visible.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-within.closed {\n  border: unset;\n  box-shadow: 0 0 0 2px #8c8c8c inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:active .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-visible .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-within .maru-multi-select-dropdown-button {\n  color: #8c8c8c;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:active .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-visible .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-within .maru-multi-select-dropdown-button:focus-visible {\n  outline: none;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:active .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-visible .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-within .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  color: #8c8c8c;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:active .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-visible .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-within .maru-multi-select-dropdown-button ::-moz-placeholder {\n  color: #8c8c8c;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:active .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-visible .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-within .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  color: #8c8c8c;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:active .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-visible .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-within .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  color: #8c8c8c;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:active .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:active .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-visible .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-visible .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-within .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-within .maru-multi-select-dropdown-button ::placeholder {\n  color: #8c8c8c;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary.disabled {\n  border: unset;\n  box-shadow: 0 0 0 1px #e4e4e4 inset;\n  outline: none;\n  background-color: #fafafa;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary.disabled.closed {\n  border: unset;\n  box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary.disabled .maru-multi-select-dropdown-button {\n  color: #bdbdbd;\n  font-weight: 400;\n  cursor: default;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary.disabled .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary.disabled .maru-multi-select-dropdown-button ::-moz-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary.disabled .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary.disabled .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary.disabled .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary.disabled .maru-multi-select-dropdown-button ::placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:hover {\n  border: unset;\n  box-shadow: 0 0 0 1px #308acc inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:hover .maru-multi-select-dropdown-button {\n  color: #308acc;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:hover .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  color: #308acc;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:hover .maru-multi-select-dropdown-button ::-moz-placeholder {\n  color: #308acc;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:hover .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  color: #308acc;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:hover .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  color: #308acc;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:hover .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:hover .maru-multi-select-dropdown-button ::placeholder {\n  color: #308acc;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:active, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-within {\n  border: unset;\n  box-shadow: 0 0 0 1px #308acc inset;\n  outline: none;\n  background-color: #eaf3fa;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:active.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-visible.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-within.closed {\n  border: unset;\n  box-shadow: 0 0 0 2px #308acc inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:active .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-visible .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-within .maru-multi-select-dropdown-button {\n  color: #308acc;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:active .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-visible .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-within .maru-multi-select-dropdown-button:focus-visible {\n  outline: none;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:active .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-visible .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-within .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  color: #308acc;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:active .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-visible .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-within .maru-multi-select-dropdown-button ::-moz-placeholder {\n  color: #308acc;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:active .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-visible .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-within .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  color: #308acc;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:active .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-visible .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-within .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  color: #308acc;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:active .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:active .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-visible .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-visible .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-within .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-within .maru-multi-select-dropdown-button ::placeholder {\n  color: #308acc;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive.disabled {\n  border: unset;\n  box-shadow: 0 0 0 1px #e4e4e4 inset;\n  outline: none;\n  background-color: #fafafa;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive.disabled.closed {\n  border: unset;\n  box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive.disabled .maru-multi-select-dropdown-button {\n  color: #bdbdbd;\n  font-weight: 400;\n  cursor: default;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive.disabled .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive.disabled .maru-multi-select-dropdown-button ::-moz-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive.disabled .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive.disabled .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive.disabled .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive.disabled .maru-multi-select-dropdown-button ::placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:hover {\n  border: unset;\n  box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:hover .maru-multi-select-dropdown-button {\n  color: #ffb020;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:hover .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  color: #ffb020;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:hover .maru-multi-select-dropdown-button ::-moz-placeholder {\n  color: #ffb020;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:hover .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  color: #ffb020;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:hover .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  color: #ffb020;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:hover .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:hover .maru-multi-select-dropdown-button ::placeholder {\n  color: #ffb020;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:active, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-within {\n  border: unset;\n  box-shadow: 0 0 0 1px #ffb020 inset;\n  outline: none;\n  background-color: #fff7e9;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:active.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-visible.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-within.closed {\n  border: unset;\n  box-shadow: 0 0 0 2px #ffb020 inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:active .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-visible .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-within .maru-multi-select-dropdown-button {\n  color: #ffb020;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:active .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-visible .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-within .maru-multi-select-dropdown-button:focus-visible {\n  outline: none;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:active .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-visible .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-within .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  color: #ffb020;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:active .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-visible .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-within .maru-multi-select-dropdown-button ::-moz-placeholder {\n  color: #ffb020;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:active .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-visible .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-within .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  color: #ffb020;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:active .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-visible .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-within .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  color: #ffb020;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:active .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:active .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-visible .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-visible .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-within .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-within .maru-multi-select-dropdown-button ::placeholder {\n  color: #ffb020;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning.disabled {\n  border: unset;\n  box-shadow: 0 0 0 1px #e4e4e4 inset;\n  outline: none;\n  background-color: #fafafa;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning.disabled.closed {\n  border: unset;\n  box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning.disabled .maru-multi-select-dropdown-button {\n  color: #bdbdbd;\n  font-weight: 400;\n  cursor: default;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning.disabled .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning.disabled .maru-multi-select-dropdown-button ::-moz-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning.disabled .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning.disabled .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning.disabled .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning.disabled .maru-multi-select-dropdown-button ::placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:hover {\n  border: unset;\n  box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:hover .maru-multi-select-dropdown-button {\n  color: #e53e3e;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:hover .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  color: #e53e3e;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:hover .maru-multi-select-dropdown-button ::-moz-placeholder {\n  color: #e53e3e;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:hover .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  color: #e53e3e;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:hover .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  color: #e53e3e;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:hover .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:hover .maru-multi-select-dropdown-button ::placeholder {\n  color: #e53e3e;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:active, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-within {\n  border: unset;\n  box-shadow: 0 0 0 1px #e53e3e inset;\n  outline: none;\n  background-color: #fcecec;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:active.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-visible.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-within.closed {\n  border: unset;\n  box-shadow: 0 0 0 2px #e53e3e inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:active .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-visible .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-within .maru-multi-select-dropdown-button {\n  color: #e53e3e;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:active .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-visible .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-within .maru-multi-select-dropdown-button:focus-visible {\n  outline: none;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:active .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-visible .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-within .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  color: #e53e3e;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:active .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-visible .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-within .maru-multi-select-dropdown-button ::-moz-placeholder {\n  color: #e53e3e;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:active .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-visible .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-within .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  color: #e53e3e;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:active .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-visible .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-within .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  color: #e53e3e;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:active .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:active .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-visible .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-visible .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-within .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-within .maru-multi-select-dropdown-button ::placeholder {\n  color: #e53e3e;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger.disabled {\n  border: unset;\n  box-shadow: 0 0 0 1px #e4e4e4 inset;\n  outline: none;\n  background-color: #fafafa;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger.disabled.closed {\n  border: unset;\n  box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger.disabled .maru-multi-select-dropdown-button {\n  color: #bdbdbd;\n  font-weight: 400;\n  cursor: default;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger.disabled .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger.disabled .maru-multi-select-dropdown-button ::-moz-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger.disabled .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger.disabled .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger.disabled .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger.disabled .maru-multi-select-dropdown-button ::placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:hover {\n  border: unset;\n  box-shadow: 0 0 0 1px #32a483 inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:hover .maru-multi-select-dropdown-button {\n  color: #32a483;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:hover .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  color: #32a483;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:hover .maru-multi-select-dropdown-button ::-moz-placeholder {\n  color: #32a483;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:hover .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  color: #32a483;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:hover .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  color: #32a483;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:hover .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:hover .maru-multi-select-dropdown-button ::placeholder {\n  color: #32a483;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:active, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-within {\n  border: unset;\n  box-shadow: 0 0 0 1px #32a483 inset;\n  outline: none;\n  background-color: #eaf6f3;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:active.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-visible.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-within.closed {\n  border: unset;\n  box-shadow: 0 0 0 2px #32a483 inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:active .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-visible .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-within .maru-multi-select-dropdown-button {\n  color: #32a483;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:active .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-visible .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-within .maru-multi-select-dropdown-button:focus-visible {\n  outline: none;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:active .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-visible .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-within .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  color: #32a483;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:active .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-visible .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-within .maru-multi-select-dropdown-button ::-moz-placeholder {\n  color: #32a483;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:active .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-visible .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-within .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  color: #32a483;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:active .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-visible .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-within .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  color: #32a483;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:active .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:active .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-visible .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-visible .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-within .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-within .maru-multi-select-dropdown-button ::placeholder {\n  color: #32a483;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success.disabled {\n  border: unset;\n  box-shadow: 0 0 0 1px #e4e4e4 inset;\n  outline: none;\n  background-color: #fafafa;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success.disabled.closed {\n  border: unset;\n  box-shadow: 0 0 0 1px #e4e4e4 inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success.disabled .maru-multi-select-dropdown-button {\n  color: #bdbdbd;\n  font-weight: 400;\n  cursor: default;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success.disabled .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success.disabled .maru-multi-select-dropdown-button ::-moz-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success.disabled .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success.disabled .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success.disabled .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success.disabled .maru-multi-select-dropdown-button ::placeholder {\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n  width: 100%;\n  height: 37px;\n  border: unset;\n  border-radius: 6px;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 8px 10px 8px 14px;\n  color: #5c5c5c;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 400;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  font-weight: 300;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button ::-moz-placeholder {\n  font-weight: 300;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  font-weight: 300;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  font-weight: 300;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button ::placeholder {\n  font-weight: 300;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button .maru-multi-select-dropdown-button-contents {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button .maru-multi-select-dropdown-button-contents.placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button .maru-multi-select-dropdown-button-contents .maru-tooltip-wrapper {\n  width: 100%;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button .maru-multi-select-dropdown-button-contents .maru-tooltip-wrapper > span {\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button .maru-multi-select-dropdown-button-icon-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.errored {\n  border: unset;\n  box-shadow: 0 0 0 2px #e53e3e inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-toggle-clear {\n  padding: unset;\n  margin: unset;\n  border: unset;\n  background-color: unset;\n  cursor: pointer;\n  display: flex;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-toggle-clear:last-of-type {\n  margin: 0 6px 0 8px;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-toggle-arrow {\n  display: flex;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-error-message {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 400;\n  color: #e53e3e;\n  display: block;\n  margin-top: 4px;\n}\n\n.maru-multi-select-dropdown-menu-wrapper {\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  position: fixed;\n  z-index: 1600;\n  display: none;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu {\n  margin-top: 4px;\n  position: absolute;\n  z-index: 1601;\n  border-radius: 6px;\n  box-shadow: 0px 0px 4px #e4e4e4;\n  background-color: white;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-primary {\n  border: 1px solid var(--p);\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-primary .maru-multi-select-dropdown-menu-item-menu-header {\n  border-bottom: 1px solid var(--p);\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-secondary {\n  border: 1px solid #8c8c8c;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-secondary .maru-multi-select-dropdown-menu-item-menu-header {\n  border-bottom: 1px solid #8c8c8c;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-positive {\n  border: 1px solid #308acc;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-positive .maru-multi-select-dropdown-menu-item-menu-header {\n  border-bottom: 1px solid #308acc;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-warning {\n  border: 1px solid #ffb020;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-warning .maru-multi-select-dropdown-menu-item-menu-header {\n  border-bottom: 1px solid #ffb020;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-danger {\n  border: 1px solid #e53e3e;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-danger .maru-multi-select-dropdown-menu-item-menu-header {\n  border-bottom: 1px solid #e53e3e;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-success {\n  border: 1px solid #32a483;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-success .maru-multi-select-dropdown-menu-item-menu-header {\n  border-bottom: 1px solid #32a483;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper {\n  overflow-y: auto;\n  border-top-left-radius: 6px;\n  border-top-right-radius: 6px;\n  border-bottom-left-radius: 6px;\n  border-bottom-right-radius: 6px;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  flex-direction: row;\n  gap: 8px;\n  width: 100%;\n  background-color: white;\n  border: unset;\n  cursor: pointer;\n  height: 37px;\n  padding: 8px 14px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 400;\n  color: #5c5c5c;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item:hover {\n  background-color: #fafafa;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item-empty {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  flex-direction: row;\n  gap: 6px;\n  color: #8c8c8c;\n  font-weight: 300;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item-menu-header {\n  display: flex;\n  padding-left: 14px;\n  height: 37px;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item-menu-header .maru-multi-select-dropdown-menu-item-search-input {\n  width: 100%;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item-menu-header .maru-multi-select-dropdown-menu-item-search-input .maru-input {\n  padding: 8px 10px 8px 8px;\n  border-bottom-left-radius: unset;\n  border-bottom-right-radius: unset;\n  border: unset;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item-menu-header .maru-multi-select-dropdown-menu-item-search-input .maru-input:focus-visible, .maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item-menu-header .maru-multi-select-dropdown-menu-item-search-input .maru-input:focus-within, .maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item-menu-header .maru-multi-select-dropdown-menu-item-search-input .maru-input:hover {\n  outline: unset;\n  border: unset;\n  background-color: transparent;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item-menu-header .maru-multi-select-dropdown-menu-item-all-check-label {\n  width: 100%;\n  padding: 8px 10px 8px 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: 400;\n  color: #5c5c5c;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item .maru-tooltip-wrapper {\n  width: 100%;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item .maru-tooltip-wrapper .maru-checkbox-wrapper {\n  width: 100%;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item .maru-tooltip-wrapper .maru-checkbox-wrapper .maru-checkbox-label {\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}";
-styleInject(css_248z$4);
+var css_248z$7 = ".maru-multi-select-dropdown .maru-multi-select-dropdown-label {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--maru-text-secondary);\n  display: block;\n  margin-bottom: 4px;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper {\n  width: 100%;\n  border-radius: 6px;\n  border: unset;\n  box-shadow: 0 0 0 1px var(--maru-border-secondary) inset;\n  cursor: pointer;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 500;\n  background-color: var(--maru-background-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:hover {\n  border: unset;\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:hover .maru-multi-select-dropdown-button {\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:hover .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:hover .maru-multi-select-dropdown-button ::-moz-placeholder {\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:hover .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:hover .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:hover .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:hover .maru-multi-select-dropdown-button ::placeholder {\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:active, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-within {\n  border: unset;\n  box-shadow: 0 0 0 1px var(--p) inset;\n  outline: none;\n  background-color: var(--p-10);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:active.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-visible.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-within.closed {\n  border: unset;\n  box-shadow: 0 0 0 2px var(--p) inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:active .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-visible .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-within .maru-multi-select-dropdown-button {\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:active .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-visible .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-within .maru-multi-select-dropdown-button:focus-visible {\n  outline: none;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:active .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-visible .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-within .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:active .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-visible .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-within .maru-multi-select-dropdown-button ::-moz-placeholder {\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:active .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-visible .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-within .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:active .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-visible .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-within .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:active .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:active .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-visible .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-visible .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-within .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary:focus-within .maru-multi-select-dropdown-button ::placeholder {\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary.disabled {\n  border: unset;\n  box-shadow: 0 0 0 1px var(--maru-border-secondary) inset;\n  outline: none;\n  background-color: var(--maru-background-secondary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary.disabled.closed {\n  border: unset;\n  box-shadow: 0 0 0 1px var(--maru-border-secondary) inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary.disabled .maru-multi-select-dropdown-button {\n  color: var(--maru-text-disabled);\n  font-weight: 400;\n  cursor: default;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary.disabled .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  font-weight: 400;\n  color: var(--maru-text-disabled);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary.disabled .maru-multi-select-dropdown-button ::-moz-placeholder {\n  font-weight: 400;\n  color: var(--maru-text-disabled);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary.disabled .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  font-weight: 400;\n  color: var(--maru-text-disabled);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary.disabled .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  font-weight: 400;\n  color: var(--maru-text-disabled);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary.disabled .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-primary.disabled .maru-multi-select-dropdown-button ::placeholder {\n  font-weight: 400;\n  color: var(--maru-text-disabled);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:hover {\n  border: unset;\n  box-shadow: 0 0 0 1px var(--maru-icon-tertiary) inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:hover .maru-multi-select-dropdown-button {\n  color: var(--maru-icon-tertiary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:hover .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  color: var(--maru-icon-tertiary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:hover .maru-multi-select-dropdown-button ::-moz-placeholder {\n  color: var(--maru-icon-tertiary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:hover .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  color: var(--maru-icon-tertiary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:hover .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  color: var(--maru-icon-tertiary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:hover .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:hover .maru-multi-select-dropdown-button ::placeholder {\n  color: var(--maru-icon-tertiary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:active, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-within {\n  border: unset;\n  box-shadow: 0 0 0 1px var(--maru-icon-tertiary) inset;\n  outline: none;\n  background-color: var(--maru-background-secondary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:active.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-visible.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-within.closed {\n  border: unset;\n  box-shadow: 0 0 0 2px var(--maru-icon-tertiary) inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:active .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-visible .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-within .maru-multi-select-dropdown-button {\n  color: var(--maru-icon-tertiary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:active .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-visible .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-within .maru-multi-select-dropdown-button:focus-visible {\n  outline: none;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:active .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-visible .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-within .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  color: var(--maru-icon-tertiary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:active .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-visible .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-within .maru-multi-select-dropdown-button ::-moz-placeholder {\n  color: var(--maru-icon-tertiary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:active .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-visible .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-within .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  color: var(--maru-icon-tertiary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:active .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-visible .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-within .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  color: var(--maru-icon-tertiary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:active .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:active .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-visible .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-visible .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-within .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary:focus-within .maru-multi-select-dropdown-button ::placeholder {\n  color: var(--maru-icon-tertiary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary.disabled {\n  border: unset;\n  box-shadow: 0 0 0 1px var(--maru-border-secondary) inset;\n  outline: none;\n  background-color: var(--maru-background-secondary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary.disabled.closed {\n  border: unset;\n  box-shadow: 0 0 0 1px var(--maru-border-secondary) inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary.disabled .maru-multi-select-dropdown-button {\n  color: var(--maru-text-disabled);\n  font-weight: 400;\n  cursor: default;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary.disabled .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  font-weight: 400;\n  color: var(--maru-text-disabled);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary.disabled .maru-multi-select-dropdown-button ::-moz-placeholder {\n  font-weight: 400;\n  color: var(--maru-text-disabled);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary.disabled .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  font-weight: 400;\n  color: var(--maru-text-disabled);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary.disabled .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  font-weight: 400;\n  color: var(--maru-text-disabled);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary.disabled .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-secondary.disabled .maru-multi-select-dropdown-button ::placeholder {\n  font-weight: 400;\n  color: var(--maru-text-disabled);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:hover {\n  border: unset;\n  box-shadow: 0 0 0 1px var(--maru-background-info-solid-primary) inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:hover .maru-multi-select-dropdown-button {\n  color: var(--maru-background-info-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:hover .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  color: var(--maru-background-info-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:hover .maru-multi-select-dropdown-button ::-moz-placeholder {\n  color: var(--maru-background-info-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:hover .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  color: var(--maru-background-info-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:hover .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  color: var(--maru-background-info-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:hover .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:hover .maru-multi-select-dropdown-button ::placeholder {\n  color: var(--maru-background-info-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:active, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-within {\n  border: unset;\n  box-shadow: 0 0 0 1px var(--maru-background-info-solid-primary) inset;\n  outline: none;\n  background-color: var(--maru-blue-100);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:active.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-visible.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-within.closed {\n  border: unset;\n  box-shadow: 0 0 0 2px var(--maru-background-info-solid-primary) inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:active .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-visible .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-within .maru-multi-select-dropdown-button {\n  color: var(--maru-background-info-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:active .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-visible .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-within .maru-multi-select-dropdown-button:focus-visible {\n  outline: none;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:active .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-visible .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-within .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  color: var(--maru-background-info-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:active .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-visible .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-within .maru-multi-select-dropdown-button ::-moz-placeholder {\n  color: var(--maru-background-info-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:active .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-visible .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-within .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  color: var(--maru-background-info-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:active .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-visible .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-within .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  color: var(--maru-background-info-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:active .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:active .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-visible .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-visible .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-within .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive:focus-within .maru-multi-select-dropdown-button ::placeholder {\n  color: var(--maru-background-info-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive.disabled {\n  border: unset;\n  box-shadow: 0 0 0 1px var(--maru-border-secondary) inset;\n  outline: none;\n  background-color: var(--maru-background-secondary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive.disabled.closed {\n  border: unset;\n  box-shadow: 0 0 0 1px var(--maru-border-secondary) inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive.disabled .maru-multi-select-dropdown-button {\n  color: var(--maru-text-disabled);\n  font-weight: 400;\n  cursor: default;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive.disabled .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  font-weight: 400;\n  color: var(--maru-text-disabled);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive.disabled .maru-multi-select-dropdown-button ::-moz-placeholder {\n  font-weight: 400;\n  color: var(--maru-text-disabled);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive.disabled .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  font-weight: 400;\n  color: var(--maru-text-disabled);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive.disabled .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  font-weight: 400;\n  color: var(--maru-text-disabled);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive.disabled .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-positive.disabled .maru-multi-select-dropdown-button ::placeholder {\n  font-weight: 400;\n  color: var(--maru-text-disabled);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:hover {\n  border: unset;\n  box-shadow: 0 0 0 1px var(--maru-background-warning-solid-primary) inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:hover .maru-multi-select-dropdown-button {\n  color: var(--maru-background-warning-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:hover .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  color: var(--maru-background-warning-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:hover .maru-multi-select-dropdown-button ::-moz-placeholder {\n  color: var(--maru-background-warning-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:hover .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  color: var(--maru-background-warning-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:hover .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  color: var(--maru-background-warning-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:hover .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:hover .maru-multi-select-dropdown-button ::placeholder {\n  color: var(--maru-background-warning-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:active, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-within {\n  border: unset;\n  box-shadow: 0 0 0 1px var(--maru-background-warning-solid-primary) inset;\n  outline: none;\n  background-color: var(--maru-yellow-100);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:active.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-visible.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-within.closed {\n  border: unset;\n  box-shadow: 0 0 0 2px var(--maru-background-warning-solid-primary) inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:active .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-visible .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-within .maru-multi-select-dropdown-button {\n  color: var(--maru-background-warning-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:active .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-visible .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-within .maru-multi-select-dropdown-button:focus-visible {\n  outline: none;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:active .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-visible .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-within .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  color: var(--maru-background-warning-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:active .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-visible .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-within .maru-multi-select-dropdown-button ::-moz-placeholder {\n  color: var(--maru-background-warning-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:active .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-visible .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-within .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  color: var(--maru-background-warning-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:active .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-visible .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-within .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  color: var(--maru-background-warning-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:active .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:active .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-visible .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-visible .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-within .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning:focus-within .maru-multi-select-dropdown-button ::placeholder {\n  color: var(--maru-background-warning-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning.disabled {\n  border: unset;\n  box-shadow: 0 0 0 1px var(--maru-border-secondary) inset;\n  outline: none;\n  background-color: var(--maru-background-secondary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning.disabled.closed {\n  border: unset;\n  box-shadow: 0 0 0 1px var(--maru-border-secondary) inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning.disabled .maru-multi-select-dropdown-button {\n  color: var(--maru-text-disabled);\n  font-weight: 400;\n  cursor: default;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning.disabled .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  font-weight: 400;\n  color: var(--maru-text-disabled);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning.disabled .maru-multi-select-dropdown-button ::-moz-placeholder {\n  font-weight: 400;\n  color: var(--maru-text-disabled);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning.disabled .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  font-weight: 400;\n  color: var(--maru-text-disabled);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning.disabled .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  font-weight: 400;\n  color: var(--maru-text-disabled);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning.disabled .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-warning.disabled .maru-multi-select-dropdown-button ::placeholder {\n  font-weight: 400;\n  color: var(--maru-text-disabled);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:hover {\n  border: unset;\n  box-shadow: 0 0 0 1px var(--maru-background-error-solid-primary) inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:hover .maru-multi-select-dropdown-button {\n  color: var(--maru-background-error-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:hover .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  color: var(--maru-background-error-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:hover .maru-multi-select-dropdown-button ::-moz-placeholder {\n  color: var(--maru-background-error-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:hover .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  color: var(--maru-background-error-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:hover .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  color: var(--maru-background-error-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:hover .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:hover .maru-multi-select-dropdown-button ::placeholder {\n  color: var(--maru-background-error-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:active, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-within {\n  border: unset;\n  box-shadow: 0 0 0 1px var(--maru-background-error-solid-primary) inset;\n  outline: none;\n  background-color: var(--maru-red-100);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:active.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-visible.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-within.closed {\n  border: unset;\n  box-shadow: 0 0 0 2px var(--maru-background-error-solid-primary) inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:active .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-visible .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-within .maru-multi-select-dropdown-button {\n  color: var(--maru-background-error-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:active .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-visible .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-within .maru-multi-select-dropdown-button:focus-visible {\n  outline: none;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:active .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-visible .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-within .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  color: var(--maru-background-error-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:active .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-visible .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-within .maru-multi-select-dropdown-button ::-moz-placeholder {\n  color: var(--maru-background-error-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:active .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-visible .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-within .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  color: var(--maru-background-error-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:active .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-visible .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-within .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  color: var(--maru-background-error-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:active .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:active .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-visible .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-visible .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-within .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger:focus-within .maru-multi-select-dropdown-button ::placeholder {\n  color: var(--maru-background-error-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger.disabled {\n  border: unset;\n  box-shadow: 0 0 0 1px var(--maru-border-secondary) inset;\n  outline: none;\n  background-color: var(--maru-background-secondary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger.disabled.closed {\n  border: unset;\n  box-shadow: 0 0 0 1px var(--maru-border-secondary) inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger.disabled .maru-multi-select-dropdown-button {\n  color: var(--maru-text-disabled);\n  font-weight: 400;\n  cursor: default;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger.disabled .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  font-weight: 400;\n  color: var(--maru-text-disabled);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger.disabled .maru-multi-select-dropdown-button ::-moz-placeholder {\n  font-weight: 400;\n  color: var(--maru-text-disabled);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger.disabled .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  font-weight: 400;\n  color: var(--maru-text-disabled);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger.disabled .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  font-weight: 400;\n  color: var(--maru-text-disabled);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger.disabled .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-danger.disabled .maru-multi-select-dropdown-button ::placeholder {\n  font-weight: 400;\n  color: var(--maru-text-disabled);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:hover {\n  border: unset;\n  box-shadow: 0 0 0 1px var(--maru-background-positive-solid-primary) inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:hover .maru-multi-select-dropdown-button {\n  color: var(--maru-background-positive-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:hover .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  color: var(--maru-background-positive-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:hover .maru-multi-select-dropdown-button ::-moz-placeholder {\n  color: var(--maru-background-positive-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:hover .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  color: var(--maru-background-positive-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:hover .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  color: var(--maru-background-positive-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:hover .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:hover .maru-multi-select-dropdown-button ::placeholder {\n  color: var(--maru-background-positive-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:active, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-within {\n  border: unset;\n  box-shadow: 0 0 0 1px var(--maru-background-positive-solid-primary) inset;\n  outline: none;\n  background-color: var(--maru-green-100);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:active.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-visible.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-within.closed {\n  border: unset;\n  box-shadow: 0 0 0 2px var(--maru-background-positive-solid-primary) inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:active .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-visible .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-within .maru-multi-select-dropdown-button {\n  color: var(--maru-background-positive-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:active .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-visible .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-within .maru-multi-select-dropdown-button:focus-visible {\n  outline: none;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:active .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-visible .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-within .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  color: var(--maru-background-positive-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:active .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-visible .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-within .maru-multi-select-dropdown-button ::-moz-placeholder {\n  color: var(--maru-background-positive-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:active .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-visible .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-within .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  color: var(--maru-background-positive-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:active .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-visible .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-within .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  color: var(--maru-background-positive-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:active .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:active .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-visible .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-visible .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-within .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success:focus-within .maru-multi-select-dropdown-button ::placeholder {\n  color: var(--maru-background-positive-solid-primary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success.disabled {\n  border: unset;\n  box-shadow: 0 0 0 1px var(--maru-border-secondary) inset;\n  outline: none;\n  background-color: var(--maru-background-secondary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success.disabled.closed {\n  border: unset;\n  box-shadow: 0 0 0 1px var(--maru-border-secondary) inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success.disabled .maru-multi-select-dropdown-button {\n  color: var(--maru-text-disabled);\n  font-weight: 400;\n  cursor: default;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success.disabled .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  font-weight: 400;\n  color: var(--maru-text-disabled);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success.disabled .maru-multi-select-dropdown-button ::-moz-placeholder {\n  font-weight: 400;\n  color: var(--maru-text-disabled);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success.disabled .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  font-weight: 400;\n  color: var(--maru-text-disabled);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success.disabled .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  font-weight: 400;\n  color: var(--maru-text-disabled);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success.disabled .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.maru-multi-select-dropdown-toggle-wrapper-success.disabled .maru-multi-select-dropdown-button ::placeholder {\n  font-weight: 400;\n  color: var(--maru-text-disabled);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n  width: 100%;\n  height: 37px;\n  border: unset;\n  border-radius: 6px;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 8px 10px 8px 14px;\n  color: var(--maru-text-secondary);\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 400;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  font-weight: 300;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button ::-moz-placeholder {\n  font-weight: 300;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  font-weight: 300;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  font-weight: 300;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button ::placeholder {\n  font-weight: 300;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button .maru-multi-select-dropdown-button-contents {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button .maru-multi-select-dropdown-button-contents.placeholder {\n  font-weight: 300;\n  color: var(--maru-text-tertiary);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button .maru-multi-select-dropdown-button-contents .maru-tooltip-wrapper {\n  width: 100%;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button .maru-multi-select-dropdown-button-contents .maru-tooltip-wrapper > span {\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-button .maru-multi-select-dropdown-button-icon-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.errored {\n  border: unset;\n  box-shadow: 0 0 0 2px var(--maru-border-error-primary) inset;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-toggle-clear {\n  padding: unset;\n  margin: unset;\n  border: unset;\n  background-color: unset;\n  cursor: pointer;\n  display: flex;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-toggle-clear:last-of-type {\n  margin: 0 6px 0 8px;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper .maru-multi-select-dropdown-toggle-arrow {\n  display: flex;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-error-message {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 12px;\n  font-weight: 400;\n  color: var(--maru-text-error-primary);\n  display: block;\n  margin-top: 4px;\n}\n\n.maru-multi-select-dropdown-menu-wrapper {\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  position: fixed;\n  z-index: 1600;\n  display: none;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu {\n  margin-top: 4px;\n  position: absolute;\n  z-index: 1601;\n  border-radius: 6px;\n  box-shadow: 0px 0px 4px var(--maru-shadow-default);\n  background-color: var(--maru-background-primary);\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-primary {\n  border: 1px solid var(--p);\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-primary .maru-multi-select-dropdown-menu-item-menu-header {\n  border-bottom: 1px solid var(--p);\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-secondary {\n  border: 1px solid var(--maru-icon-tertiary);\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-secondary .maru-multi-select-dropdown-menu-item-menu-header {\n  border-bottom: 1px solid var(--maru-icon-tertiary);\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-positive {\n  border: 1px solid var(--maru-background-info-solid-primary);\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-positive .maru-multi-select-dropdown-menu-item-menu-header {\n  border-bottom: 1px solid var(--maru-background-info-solid-primary);\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-warning {\n  border: 1px solid var(--maru-background-warning-solid-primary);\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-warning .maru-multi-select-dropdown-menu-item-menu-header {\n  border-bottom: 1px solid var(--maru-background-warning-solid-primary);\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-danger {\n  border: 1px solid var(--maru-background-error-solid-primary);\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-danger .maru-multi-select-dropdown-menu-item-menu-header {\n  border-bottom: 1px solid var(--maru-background-error-solid-primary);\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-success {\n  border: 1px solid var(--maru-background-positive-solid-primary);\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu.maru-multi-select-dropdown-menu-success .maru-multi-select-dropdown-menu-item-menu-header {\n  border-bottom: 1px solid var(--maru-background-positive-solid-primary);\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper {\n  overflow-y: auto;\n  border-top-left-radius: 6px;\n  border-top-right-radius: 6px;\n  border-bottom-left-radius: 6px;\n  border-bottom-right-radius: 6px;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  flex-direction: row;\n  gap: 8px;\n  width: 100%;\n  background-color: var(--maru-background-primary);\n  border: unset;\n  cursor: pointer;\n  height: 37px;\n  padding: 8px 14px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--maru-text-secondary);\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item:hover {\n  background-color: var(--maru-background-primary-hover);\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item-empty {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  flex-direction: row;\n  gap: 6px;\n  color: var(--maru-text-tertiary);\n  font-weight: 300;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item-menu-header {\n  display: flex;\n  padding-left: 14px;\n  height: 37px;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item-menu-header .maru-multi-select-dropdown-menu-item-search-input {\n  width: 100%;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item-menu-header .maru-multi-select-dropdown-menu-item-search-input .maru-input {\n  padding: 8px 10px 8px 8px;\n  border-bottom-left-radius: unset;\n  border-bottom-right-radius: unset;\n  border: unset;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item-menu-header .maru-multi-select-dropdown-menu-item-search-input .maru-input:focus-visible, .maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item-menu-header .maru-multi-select-dropdown-menu-item-search-input .maru-input:focus-within, .maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item-menu-header .maru-multi-select-dropdown-menu-item-search-input .maru-input:hover {\n  outline: unset;\n  border: unset;\n  background-color: transparent;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item-menu-header .maru-multi-select-dropdown-menu-item-all-check-label {\n  width: 100%;\n  padding: 8px 10px 8px 8px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--maru-text-secondary);\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item .maru-tooltip-wrapper {\n  width: 100%;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item .maru-tooltip-wrapper .maru-checkbox-wrapper {\n  width: 100%;\n}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-item .maru-tooltip-wrapper .maru-checkbox-wrapper .maru-checkbox-label {\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}";
+styleInject(css_248z$7);
 
 function MultiSelectDropdown(_a) {
   var data = _a.data,
@@ -90514,8 +91073,111 @@ function MultiSelectDropdown(_a) {
   }));
 }
 
-var css_248z$3 = ".maru-pagination-wrapper .maru-pagination {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-pagination-wrapper .maru-pagination button {\n  cursor: pointer;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 500;\n  color: #8c8c8c;\n  padding: 4px;\n  margin: unset;\n  background-color: unset;\n  border: unset;\n  min-width: 30px;\n  min-height: 30px;\n  border-radius: 6px;\n}\n.maru-pagination-wrapper .maru-pagination button > span {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-pagination-wrapper .maru-pagination button:active {\n  background-color: #bdbdbd;\n}\n.maru-pagination-wrapper .maru-pagination button:disabled {\n  cursor: default;\n}\n.maru-pagination-wrapper .maru-pagination .maru-pagination-input-wrapper {\n  margin: 0 12px;\n}\n.maru-pagination-wrapper .maru-pagination .maru-pagination-input-wrapper .maru-pagination-input {\n  width: 36px;\n  height: 24px;\n  border: 1px solid #bdbdbd;\n  border-radius: 4px;\n  padding: 3px 8px 4px 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  margin-right: 8px;\n  color: #5c5c5c;\n  text-align: center;\n}\n.maru-pagination-wrapper .maru-pagination .maru-pagination-input-wrapper .maru-pagination-input::-webkit-outer-spin-button, .maru-pagination-wrapper .maru-pagination .maru-pagination-input-wrapper .maru-pagination-input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.maru-pagination-wrapper .maru-pagination .maru-pagination-input-wrapper .maru-pagination-input:disabled {\n  pointer-events: none;\n  border: none;\n  background-color: transparent;\n  width: auto;\n  margin-right: 0;\n  padding: 0;\n}\n.maru-pagination-wrapper .maru-pagination .maru-pagination-input-wrapper .maru-pagination-input-label {\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: #5c5c5c;\n}";
-styleInject(css_248z$3);
+var NUMBER_INPUT_MAXIMUM_DECIMAL_PLACES = 15;
+
+var css_248z$6 = ".maru-number-input .maru-input {\n  padding: 0;\n}\n.maru-number-input .maru-input-start-node,\n.maru-number-input .maru-input-end-node-wrapper {\n  margin: 0;\n  flex: 0 0 36px;\n  align-self: stretch;\n}\n.maru-number-input .maru-input-start-node {\n  border-right: 1px solid var(--maru-border-primary);\n}\n.maru-number-input .maru-input-end-node-wrapper {\n  border-left: 1px solid var(--maru-border-primary);\n}\n.maru-number-input input {\n  min-width: 0;\n  text-align: center;\n  padding: 7px 8px !important;\n}\n.maru-number-input .maru-number-input-step-button {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n}\n.maru-number-input .maru-number-input-step-button:disabled {\n  cursor: default;\n  opacity: 0.5;\n}\n.maru-number-input .maru-number-input-step-button:focus-visible {\n  outline: 2px solid var(--maru-border-brand-primary);\n  outline-offset: -2px;\n}";
+styleInject(css_248z$6);
+
+var NumberInput = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var value = _a.value,
+    _b = _a.defaultValue,
+    defaultValue = _b === void 0 ? '' : _b,
+    onValueChange = _a.onValueChange,
+    min = _a.min,
+    max = _a.max,
+    _c = _a.step,
+    step = _c === void 0 ? 1 : _c,
+    disabled = _a.disabled,
+    className = _a.className,
+    _onBlur = _a.onBlur,
+    inputProps = __rest(_a, ["value", "defaultValue", "onValueChange", "min", "max", "step", "disabled", "className", "onBlur"]);
+  var _d = useState(defaultValue),
+    internalValue = _d[0],
+    setInternalValue = _d[1];
+  var currentValue = value !== null && value !== void 0 ? value : internalValue;
+  var parsedValue = Number(currentValue);
+  var numericValue = Number.isFinite(parsedValue) ? parsedValue : min !== null && min !== void 0 ? min : 0;
+  var getDecimalPlaces = function getDecimalPlaces(numericText) {
+    var _a, _b;
+    var _c = numericText.toLowerCase().split('e'),
+      coefficient = _c[0],
+      exponentText = _c[1];
+    var fractionLength = (_b = (_a = coefficient.split('.')[1]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+    var exponent = Number(exponentText !== null && exponentText !== void 0 ? exponentText : 0);
+    return Math.max(0, fractionLength - exponent);
+  };
+  var updateValue = function updateValue(nextValue) {
+    if (value === undefined) {
+      setInternalValue(nextValue);
+    }
+    onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(nextValue);
+  };
+  var changeByStep = function changeByStep(direction) {
+    var decimalPlaces = Math.min(NUMBER_INPUT_MAXIMUM_DECIMAL_PLACES, Math.max(getDecimalPlaces(currentValue), getDecimalPlaces(String(step)), getDecimalPlaces(String(min !== null && min !== void 0 ? min : '')), getDecimalPlaces(String(max !== null && max !== void 0 ? max : ''))));
+    var decimalScale = Math.pow(10, decimalPlaces);
+    var steppedValue = (Math.round(numericValue * decimalScale) + Math.round(step * direction * decimalScale)) / decimalScale;
+    var boundedValue = Math.min(max !== null && max !== void 0 ? max : Number.POSITIVE_INFINITY, Math.max(min !== null && min !== void 0 ? min : Number.NEGATIVE_INFINITY, steppedValue));
+    var normalizedValue = Math.round(boundedValue * decimalScale) / decimalScale;
+    updateValue(String(normalizedValue));
+  };
+  return jsx(Input, __assign({}, inputProps, {
+    ref: ref,
+    type: "number",
+    value: currentValue,
+    disabled: disabled,
+    hiddenClearButton: true,
+    className: classNames('maru-number-input', className),
+    startNode: jsx("button", __assign({
+      type: "button",
+      className: "maru-number-input-step-button",
+      onClick: function onClick() {
+        return changeByStep(-1);
+      },
+      disabled: disabled || min !== undefined && numericValue <= min,
+      "aria-label": "\uAC12 \uAC10\uC18C"
+    }, {
+      children: jsx(Icon, {
+        name: ICONS.SubtractLine_s1610,
+        color: "iconSecondary"
+      })
+    })),
+    endNode: jsx("button", __assign({
+      type: "button",
+      className: "maru-number-input-step-button",
+      onClick: function onClick() {
+        return changeByStep(1);
+      },
+      disabled: disabled || max !== undefined && numericValue >= max,
+      "aria-label": "\uAC12 \uC99D\uAC00"
+    }, {
+      children: jsx(Icon, {
+        name: ICONS.Plus_s1610,
+        color: "iconSecondary"
+      })
+    })),
+    onChange: function onChange(event) {
+      return updateValue(event.currentTarget.value);
+    },
+    onBlur: function onBlur(event) {
+      if (event.currentTarget.value !== currentValue) {
+        updateValue(event.currentTarget.value);
+      }
+      _onBlur === null || _onBlur === void 0 ? void 0 : _onBlur(event);
+    }
+  }));
+});
+NumberInput.displayName = 'NumberInput';
+NumberInput.defaultProps = {
+  value: undefined,
+  defaultValue: '',
+  onValueChange: undefined,
+  min: undefined,
+  max: undefined,
+  step: 1
+};
+
+var css_248z$5 = ".maru-pagination-wrapper .maru-pagination {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-pagination-wrapper .maru-pagination button {\n  cursor: pointer;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--maru-icon-tertiary);\n  padding: 4px;\n  margin: unset;\n  background-color: unset;\n  border: unset;\n  min-width: 30px;\n  min-height: 30px;\n  border-radius: 6px;\n}\n.maru-pagination-wrapper .maru-pagination button > span {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-pagination-wrapper .maru-pagination button:active {\n  background-color: var(--maru-background-disabled);\n}\n.maru-pagination-wrapper .maru-pagination button:disabled {\n  cursor: default;\n}\n.maru-pagination-wrapper .maru-pagination .maru-pagination-input-wrapper {\n  margin: 0 12px;\n}\n.maru-pagination-wrapper .maru-pagination .maru-pagination-input-wrapper .maru-pagination-input {\n  width: 36px;\n  height: 24px;\n  border: 1px solid var(--maru-border-primary);\n  border-radius: 4px;\n  padding: 3px 8px 4px 8px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 12px;\n  font-weight: 500;\n  margin-right: 8px;\n  color: var(--maru-text-secondary);\n  text-align: center;\n}\n.maru-pagination-wrapper .maru-pagination .maru-pagination-input-wrapper .maru-pagination-input::-webkit-outer-spin-button, .maru-pagination-wrapper .maru-pagination .maru-pagination-input-wrapper .maru-pagination-input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.maru-pagination-wrapper .maru-pagination .maru-pagination-input-wrapper .maru-pagination-input:disabled {\n  pointer-events: none;\n  border: none;\n  background-color: transparent;\n  width: auto;\n  margin-right: 0;\n  padding: 0;\n}\n.maru-pagination-wrapper .maru-pagination .maru-pagination-input-wrapper .maru-pagination-input-label {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--maru-text-secondary);\n}";
+styleInject(css_248z$5);
 
 function Pagination(_a) {
   var page = _a.page,
@@ -90615,7 +91277,7 @@ function Pagination(_a) {
     setInputValue(e.currentTarget.value);
   };
   var iconColor = function iconColor(idx) {
-    return active === idx ? 'white' : hover === idx ? '#5c5c5c' : '#bdbdbd';
+    return active === idx ? 'textWhite' : hover === idx ? 'textSecondary' : 'iconQuaternary';
   };
   return jsx("div", __assign({
     className: classNames('maru-pagination-wrapper', className)
@@ -90893,8 +91555,8 @@ function Filter(_a) {
   }));
 }
 
-var css_248z$2 = ".maru-search-input .maru-input {\n  border: 1px solid #e4e4e4;\n  background-color: white;\n}\n.maru-search-input .maru-input:focus-visible, .maru-search-input .maru-input:focus-within {\n  background-color: white;\n}\n.maru-search-input .maru-input:hover {\n  background-color: white;\n}\n.maru-search-input .maru-input .maru-input-start-node {\n  margin-right: 8px;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button {\n  border: unset;\n  background-color: unset;\n  padding: unset;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button .maru-tooltip-wrapper {\n  padding: 6px 0;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button svg > path {\n  stroke: #bdbdbd;\n  fill: white;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button:hover svg > path {\n  stroke: #8c8c8c;\n  fill: #e4e4e4;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button.active {\n  visibility: hidden;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button.selected svg > path {\n  stroke: var(--p);\n  fill: var(--p-50);\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper {\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  position: fixed;\n  z-index: 1600;\n  display: none;\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover {\n  margin-top: 4px;\n  position: absolute;\n  z-index: 1601;\n  border-radius: 6px;\n  box-shadow: 0px 0px 4px #e4e4e4;\n  background-color: white;\n  padding: 32px;\n  border: 1px solid #e4e4e4;\n  width: 402px;\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover > div > ul {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover > div > ul > li {\n  display: flex;\n  gap: 16px;\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover > div > ul > li .filter-key {\n  width: 88px;\n  display: flex;\n  align-items: center;\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-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover > div > ul > li .filter-value {\n  width: 232px;\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover > div > div {\n  margin-top: 24px;\n  display: flex;\n  justify-content: flex-end;\n  gap: 6px;\n}";
-styleInject(css_248z$2);
+var css_248z$4 = ".maru-search-input .maru-input {\n  border: 1px solid var(--maru-border-secondary);\n  background-color: #ffffff;\n}\n.maru-search-input .maru-input:focus-visible, .maru-search-input .maru-input:focus-within {\n  background-color: #ffffff;\n}\n.maru-search-input .maru-input:hover {\n  background-color: #ffffff;\n}\n.maru-search-input .maru-input .maru-input-start-node {\n  margin-right: 8px;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button {\n  border: unset;\n  background-color: unset;\n  padding: unset;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button .maru-tooltip-wrapper {\n  padding: 6px 0;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button svg > path {\n  stroke: var(--maru-border-primary);\n  fill: #ffffff;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button:hover svg > path {\n  stroke: var(--maru-icon-tertiary);\n  fill: var(--maru-background-quaternary);\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button.active {\n  visibility: hidden;\n}\n.maru-search-input .maru-search-input-filter .maru-search-input-filter-button.selected svg > path {\n  stroke: var(--p);\n  fill: var(--p-50);\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper {\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  position: fixed;\n  z-index: 1600;\n  display: none;\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover {\n  margin-top: 4px;\n  position: absolute;\n  z-index: 1601;\n  border-radius: 6px;\n  box-shadow: 0px 0px 4px var(--maru-shadow-search-bar);\n  background-color: #ffffff;\n  padding: 32px;\n  border: 1px solid var(--maru-border-secondary);\n  width: 402px;\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover > div > ul {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover > div > ul > li {\n  display: flex;\n  gap: 16px;\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover > div > ul > li .filter-key {\n  width: 88px;\n  display: flex;\n  align-items: center;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--maru-text-secondary);\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover > div > ul > li .filter-value {\n  width: 232px;\n}\n.maru-search-input .maru-search-input-filter-popover-wrapper .maru-search-input-filter-popover > div > div {\n  margin-top: 24px;\n  display: flex;\n  justify-content: flex-end;\n  gap: 6px;\n}";
+styleInject(css_248z$4);
 
 function SearchInput(_a) {
   var hiddenClearButton = _a.hiddenClearButton,
@@ -90908,7 +91570,7 @@ function SearchInput(_a) {
     className: classNames('maru-search-input', className),
     startNode: jsx(Icon, {
       name: ICONS.SearchMd_s1615,
-      color: "#bdbdbd"
+      color: "iconQuaternary"
     }),
     endNode: filter ? jsx(Filter, {
       on: filter.on,
@@ -90924,6 +91586,117 @@ function SearchInput(_a) {
   }));
 }
 
+var css_248z$3 = ".maru-tag-input-wrapper {\n  width: 100%;\n}\n.maru-tag-input-wrapper .maru-tag-input-label {\n  display: block;\n  margin-bottom: 4px;\n  color: var(--maru-text-secondary);\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 500;\n}\n.maru-tag-input-wrapper .maru-tag-input {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 4px;\n  box-sizing: border-box;\n  min-height: 36px;\n  padding: 5px 8px;\n  border: 1px solid var(--maru-border-primary);\n  border-radius: 8px;\n  background-color: var(--maru-background-primary);\n}\n.maru-tag-input-wrapper .maru-tag-input:hover {\n  background-color: var(--maru-background-primary-hover);\n}\n.maru-tag-input-wrapper .maru-tag-input:focus-within {\n  border-color: var(--maru-border-brand-primary);\n  box-shadow: 0 0 0 1px var(--maru-border-brand-primary);\n}\n.maru-tag-input-wrapper .maru-tag-input.errored {\n  border-color: var(--maru-border-error-secondary);\n}\n.maru-tag-input-wrapper .maru-tag-input.errored:focus-within {\n  box-shadow: 0 0 0 1px var(--maru-border-error-secondary);\n}\n.maru-tag-input-wrapper .maru-tag-input.disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n.maru-tag-input-wrapper .maru-tag-input > input {\n  flex: 1 0 64px;\n  min-width: 64px;\n  padding: 0 4px;\n  border: 0;\n  outline: 0;\n  background: transparent;\n  color: var(--maru-text-primary);\n  line-height: 20px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 500;\n}\n.maru-tag-input-wrapper .maru-tag-input > input::placeholder {\n  color: var(--maru-text-tertiary);\n}\n.maru-tag-input-wrapper .maru-tag-input-tags {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n}\n.maru-tag-input-wrapper .maru-tag-input-tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 2px;\n  min-height: 24px;\n  box-sizing: border-box;\n  padding: 3px 4px;\n  border: 1px solid var(--maru-border-primary);\n  border-radius: 6px;\n  background-color: var(--maru-background-secondary);\n  color: var(--maru-text-secondary);\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 14px;\n}\n.maru-tag-input-wrapper .maru-tag-input-tag > button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 12px;\n  height: 12px;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n  line-height: 0;\n}\n.maru-tag-input-wrapper .maru-tag-input-tag > button svg {\n  display: block;\n}\n.maru-tag-input-wrapper .maru-tag-input-tag > button:focus-visible {\n  outline: 2px solid var(--maru-border-brand-primary);\n  outline-offset: 1px;\n  border-radius: 2px;\n}\n.maru-tag-input-wrapper .maru-input-footer {\n  display: block;\n  margin-top: 4px;\n}\n.maru-tag-input-wrapper .maru-input-footer > span {\n  color: var(--maru-text-secondary);\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 12px;\n  font-weight: 400;\n}\n.maru-tag-input-wrapper .maru-input-footer.maru-input-footer-error > span {\n  color: var(--maru-text-error-primary);\n}";
+styleInject(css_248z$3);
+
+var TagInput = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _b;
+  var tags = _a.tags,
+    onTagAdd = _a.onTagAdd,
+    onTagRemove = _a.onTagRemove,
+    label = _a.label,
+    helperText = _a.helperText,
+    invalid = _a.invalid,
+    className = _a.className,
+    disabled = _a.disabled,
+    _c = _a.placeholder,
+    placeholder = _c === void 0 ? '추가' : _c,
+    onKeyDown = _a.onKeyDown,
+    inputProps = __rest(_a, ["tags", "onTagAdd", "onTagRemove", "label", "helperText", "invalid", "className", "disabled", "placeholder", "onKeyDown"]);
+  var _d = useState(''),
+    inputValue = _d[0],
+    setInputValue = _d[1];
+  var hashId = uuidv4(4);
+  var inputId = (_b = inputProps.id) !== null && _b !== void 0 ? _b : "maru-tag-input-".concat(hashId);
+  var helperTextId = "".concat(inputId, "-helper-text");
+  var footerContent = (invalid === null || invalid === void 0 ? void 0 : invalid.on) && invalid.message != null ? invalid.message : helperText;
+  var hasFooterContent = footerContent != null;
+  var ariaDescribedBy = [inputProps['aria-describedby'], hasFooterContent ? helperTextId : undefined].filter(Boolean).join(' ');
+  var handleKeyDown = function handleKeyDown(event) {
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    if (event.defaultPrevented || event.nativeEvent.isComposing || event.key !== 'Enter') {
+      return;
+    }
+    var nextTagValue = inputValue.trim();
+    if (!nextTagValue) {
+      return;
+    }
+    event.preventDefault();
+    onTagAdd === null || onTagAdd === void 0 ? void 0 : onTagAdd(nextTagValue);
+    setInputValue('');
+  };
+  return jsxs("div", __assign({
+    className: classNames('maru-tag-input-wrapper', className)
+  }, {
+    children: [label && jsx("label", __assign({
+      className: "maru-tag-input-label",
+      htmlFor: inputId
+    }, {
+      children: label
+    })), jsxs("div", __assign({
+      className: classNames('maru-tag-input', {
+        errored: invalid === null || invalid === void 0 ? void 0 : invalid.on,
+        disabled: disabled
+      })
+    }, {
+      children: [jsx("div", __assign({
+        className: "maru-tag-input-tags"
+      }, {
+        children: tags.map(function (tag) {
+          return jsxs("span", __assign({
+            className: "maru-tag-input-tag"
+          }, {
+            children: [jsx("span", {
+              children: tag.label
+            }), jsx("button", __assign({
+              type: "button",
+              onClick: function onClick() {
+                return onTagRemove(tag.value);
+              },
+              disabled: disabled,
+              "aria-label": "".concat(tag.value, " \uD0DC\uADF8 \uC0AD\uC81C")
+            }, {
+              children: jsx(Icon, {
+                name: ICONS.X_s1210,
+                color: "iconSecondary"
+              })
+            }))]
+          }), tag.value);
+        })
+      })), jsx("input", __assign({}, inputProps, {
+        id: inputId,
+        ref: ref,
+        value: inputValue,
+        disabled: disabled,
+        placeholder: tags.length === 0 ? placeholder : undefined,
+        onChange: function onChange(event) {
+          return setInputValue(event.currentTarget.value);
+        },
+        onKeyDown: handleKeyDown,
+        "aria-invalid": (invalid === null || invalid === void 0 ? void 0 : invalid.on) ? true : inputProps['aria-invalid'],
+        "aria-describedby": ariaDescribedBy || undefined
+      }))]
+    })), hasFooterContent && jsx("div", __assign({
+      id: helperTextId,
+      className: classNames('maru-input-footer', {
+        'maru-input-footer-error': invalid === null || invalid === void 0 ? void 0 : invalid.on
+      })
+    }, {
+      children: jsx("span", {
+        children: footerContent
+      })
+    }))]
+  }));
+});
+TagInput.displayName = 'TagInput';
+TagInput.defaultProps = {
+  onTagAdd: undefined,
+  label: undefined,
+  helperText: undefined,
+  invalid: undefined,
+  className: undefined
+};
+
 function EmptyTr(_a) {
   var noDataMessage = _a.noDataMessage,
     loadingContent = _a.loadingContent,
@@ -90942,7 +91715,7 @@ function EmptyTr(_a) {
       children: noDataMessage ? jsxs(Fragment, {
         children: [jsx(Icon, {
           name: ICONS.FileX02_s3220,
-          color: "#bdbdbd"
+          color: "iconQuaternary"
         }), jsx("p", {
           children: noDataMessage
         })]
@@ -90951,7 +91724,7 @@ function EmptyTr(_a) {
       }, {
         children: jsx(Icon, {
           name: ICONS.Loading02_s2420,
-          color: "#bdbdbd"
+          color: "iconQuaternary"
         })
       }))
     })
@@ -90975,7 +91748,7 @@ function BinButtonTd(_a) {
       children: jsx(Button, {
         startIcon: {
           name: ICONS.Trash01_s1815,
-          color: hovered ? 'danger' : '#8c8c8c'
+          color: hovered ? 'danger' : 'iconTertiary'
         },
         color: "danger",
         onClick: handleClick
@@ -91002,9 +91775,9 @@ function ChartButtonTd(_a) {
       children: jsx(Button, {
         startIcon: {
           name: selected ? ICONS.BarChartSquare01Bg_s1810 : ICONS.BarChartSquare01_s1810,
-          color: selected ? 'primary' : hovered ? '#5c5c5c' : '#8c8c8c'
+          color: selected ? 'primary' : hovered ? 'textSecondary' : 'iconTertiary'
         },
-        color: "#8c8c8c",
+        color: "secondary",
         onClick: handleClick
       })
     }))
@@ -91013,6 +91786,7 @@ function ChartButtonTd(_a) {
 
 function CheckboxTd(_a) {
   var checked = _a.checked,
+    disabled = _a.disabled,
     onCheck = _a.onCheck;
   var handleCheck = function handleCheck(e) {
     onCheck(e.currentTarget.checked);
@@ -91024,11 +91798,13 @@ function CheckboxTd(_a) {
     }, {
       children: jsx(Checkbox, {
         checked: checked,
+        disabled: disabled,
         onChange: handleCheck,
         onClick: function onClick(e) {
           return e.stopPropagation();
         },
-        color: "#5C5C5C"
+        color: "primary",
+        size: 16
       })
     }))
   );
@@ -91059,7 +91835,7 @@ function KebabMenuTd(_a) {
         className: "maru-table-body-kebab",
         startIcon: {
           name: ICONS.DotsVertical_s1815,
-          color: '#5c5c5c'
+          color: 'textSecondary'
         },
         variant: "text",
         color: "secondary",
@@ -91080,6 +91856,7 @@ function KebabMenuTd(_a) {
 
 function RadioTd(_a) {
   var checked = _a.checked,
+    disabled = _a.disabled,
     onCheck = _a.onCheck;
   var handleCheck = function handleCheck(e) {
     onCheck(e.currentTarget.checked);
@@ -91091,6 +91868,7 @@ function RadioTd(_a) {
     }, {
       children: jsx(Radio, {
         checked: checked,
+        disabled: disabled,
         onChange: handleCheck,
         onClick: function onClick(e) {
           return e.stopPropagation();
@@ -91101,6 +91879,7 @@ function RadioTd(_a) {
 }
 
 function Tr(_a) {
+  var _b;
   var row = _a.row,
     rowIdKey = _a.rowIdKey,
     formats = _a.formats,
@@ -91114,14 +91893,16 @@ function Tr(_a) {
     chartButton = _a.chartButton,
     onRowClick = _a.onRowClick,
     selectedRow = _a.selectedRow,
-    highlightRows = _a.highlightRows;
-  var _b = useState(''),
-    hoveredRowId = _b[0],
-    setHoveredRowId = _b[1];
+    highlightRows = _a.highlightRows,
+    disabledRows = _a.disabledRows;
+  var _c = useState(''),
+    hoveredRowId = _c[0],
+    setHoveredRowId = _c[1];
   var ref = useRef(null);
   var rowId = useMemo(function () {
-    return row[rowIdKey];
+    return String(row[rowIdKey]);
   }, [row, rowIdKey]);
+  var isDisabled = (_b = disabledRows === null || disabledRows === void 0 ? void 0 : disabledRows.rowIds.includes(rowId)) !== null && _b !== void 0 ? _b : false;
   useEffect(function () {
     var _a;
     if (rowId === (selectedRow === null || selectedRow === void 0 ? void 0 : selectedRow.rowId) && (selectedRow === null || selectedRow === void 0 ? void 0 : selectedRow.scrollIntoView)) {
@@ -91129,6 +91910,7 @@ function Tr(_a) {
     }
   }, [rowId, selectedRow]);
   var handleCheck = function handleCheck(checked) {
+    if (isDisabled) return;
     if (checked) {
       var newCheckedArray = checkedIds ? __spreadArray([], checkedIds, true) : [];
       newCheckedArray.push(rowId);
@@ -91141,14 +91923,16 @@ function Tr(_a) {
     }
   };
   var handleRadioCheck = function handleRadioCheck(checked) {
-    if (checked) {
+    if (checked && !isDisabled) {
       onRadioCheck === null || onRadioCheck === void 0 ? void 0 : onRadioCheck(rowId);
     }
   };
   var handleRowClick = function handleRowClick() {
+    if (isDisabled) return;
     onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(rowId);
   };
   var handleRowEnter = function handleRowEnter() {
+    if (isDisabled) return;
     setHoveredRowId(rowId);
   };
   var handleRowLeave = function handleRowLeave() {
@@ -91159,24 +91943,35 @@ function Tr(_a) {
     onClick: handleRowClick,
     onMouseEnter: handleRowEnter,
     onMouseLeave: handleRowLeave,
+    "aria-disabled": isDisabled || undefined,
     className: classNames({
-      'clickable-row': onRowClick,
+      'clickable-row': onRowClick && !isDisabled,
+      'checked-row': checkedIds === null || checkedIds === void 0 ? void 0 : checkedIds.includes(rowId),
       'selected-row': selectedRow && selectedRow.rowId === rowId,
-      'highlight-row': highlightRows && highlightRows.rowIds.includes(rowId)
-    }, selectedRow && selectedRow.className, highlightRows && highlightRows.className)
+      'highlight-row': highlightRows && highlightRows.rowIds.includes(rowId),
+      'disabled-row': isDisabled
+    }, selectedRow && selectedRow.className, highlightRows && highlightRows.className, isDisabled && (disabledRows === null || disabledRows === void 0 ? void 0 : disabledRows.className))
   }, {
     children: [checkedIds != null && jsx(CheckboxTd, {
       checked: !!(checkedIds === null || checkedIds === void 0 ? void 0 : checkedIds.includes(rowId)),
+      disabled: isDisabled,
       onCheck: handleCheck
     }), radioCheckedId != null && jsx(RadioTd, {
       checked: radioCheckedId === rowId,
+      disabled: isDisabled,
       onCheck: handleRadioCheck
     }), formats.map(function (format) {
       if (format.isHide) return null;
       return jsx("td", {
         children: format.customColumn ? format.customColumn(row[format.columnIdKey], rowId) : row[format.columnIdKey]
       }, format.columnIdKey + (format.key || ''));
-    }), (kebabMenu === null || kebabMenu === void 0 ? void 0 : kebabMenu.show(rowId)) === 'always' || (kebabMenu === null || kebabMenu === void 0 ? void 0 : kebabMenu.show(rowId)) === 'hover' && hoveredRowId === rowId ? jsx(KebabMenuTd, {
+    }), isDisabled && hasActionCol ? jsx("td", {
+      children: jsx("div", {
+        style: {
+          width: '18px'
+        }
+      })
+    }) : (kebabMenu === null || kebabMenu === void 0 ? void 0 : kebabMenu.show(rowId)) === 'always' || (kebabMenu === null || kebabMenu === void 0 ? void 0 : kebabMenu.show(rowId)) === 'hover' && hoveredRowId === rowId ? jsx(KebabMenuTd, {
       rowId: rowId,
       kebabContent: kebabMenu.content
     }) :
@@ -91219,6 +92014,7 @@ function TBody(_a) {
     onRowClick = _a.onRowClick,
     selectedRow = _a.selectedRow,
     highlightRows = _a.highlightRows,
+    disabledRows = _a.disabledRows,
     noData = _a.noData,
     loading = _a.loading,
     emptyBodyHeight = _a.emptyBodyHeight;
@@ -91245,6 +92041,7 @@ function TBody(_a) {
         onRowClick: onRowClick,
         selectedRow: selectedRow,
         highlightRows: highlightRows,
+        disabledRows: disabledRows,
         // 필수 props라서 전달하지만 쓰지는 않는 쓰레기값
         data: [],
         maxHeight: -1
@@ -91299,7 +92096,7 @@ function FilterButtonsTh(_a) {
         onClick: onReset,
         startIcon: {
           name: ICONS.RefreshCw01_s1815,
-          color: '#bdbdbd'
+          color: 'iconQuaternary'
         },
         className: "reset-button"
       })]
@@ -91324,54 +92121,30 @@ function FilterTh(_a) {
   }));
 }
 
-/**
- * 정렬 아닌거 마우스오버하면 쌍방 화살표
- * 내림차순 정렬이면 아래 화살표
- * 오름차순 정렬이면 위 화살표
- * 색깔은 언제나 b500 #5c5c5c
- * @returns
- */
 function SortableColumn(_a) {
   var format = _a.format,
     sort = _a.sort,
     onSortClick = _a.onSortClick;
-  var _b = useState(false),
-    hover = _b[0],
-    setHover = _b[1];
-  var iconName = useMemo(function () {
-    // 정렬 아닌거 마우스오버하면 쌍방 화살표
-    if (sort && sort.columnName !== format.columnIdKey && hover) {
-      return ICONS.SortOutline_s1415;
-    }
-    if (sort && sort.columnName === format.columnIdKey) {
-      // 내림차순 정렬이면 아래 화살표
-      if (sort.desc) {
-        return ICONS.SortDown_s0815;
-      }
-      // 오름차순 정렬이면 위 화살표
-      return ICONS.SortUp_s0815;
-    }
-    return undefined;
-  }, [sort, format, hover]);
-  return !format.sortable ? jsx("span", {
+  var iconName = sort != null && sort.columnName === format.columnIdKey ? sort.desc ? ICONS.ArrowDown_s1215 : ICONS.ArrowUp_s1215 : ICONS.ChevronSelectorVertical_s1215;
+  return !format.sortable ? jsx("span", __assign({
+    className: "maru-table-header-label"
+  }, {
     children: format.columnName
-  }) : jsx(Button, __assign({
+  })) : jsx(Button, __assign({
     onClick: onSortClick(format.columnIdKey),
     variant: "text",
-    endIcon: iconName && {
+    endIcon: {
       name: iconName,
-      color: '#5c5c5c'
+      color: 'textTertiary'
     },
     color: "secondary",
-    className: "maru-table-header-sortable",
-    onMouseOver: function onMouseOver() {
-      return setHover(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setHover(false);
-    }
+    className: "maru-table-header-sortable"
   }, {
-    children: format.columnName
+    children: jsx("span", __assign({
+      className: "maru-table-header-label"
+    }, {
+      children: format.columnName
+    }))
   }));
 }
 
@@ -91416,20 +92189,27 @@ function THead(_a) {
           children: jsx(Checkbox, {
             checked: allCheckbox,
             onChange: handleAllCheckChange,
-            color: "#5C5C5C"
+            color: "primary",
+            size: 16
           })
         })) : jsx(Checkbox, {
           checked: allCheckbox,
           onChange: handleAllCheckChange,
-          color: "#5C5C5C"
+          color: "primary",
+          size: 16
         })
-      })), hasRadio && jsx("th", {
-        children: jsx("div", {
-          style: {
-            width: '4px'
-          }
+      })), hasRadio &&
+      // eslint-disable-next-line jsx-a11y/control-has-associated-label
+      jsx("th", __assign({
+        className: "radio-td",
+        "aria-hidden": "true"
+      }, {
+        children: jsx(Radio, {
+          className: "maru-table-header-radio-spacer",
+          tabIndex: -1,
+          disabled: true
         })
-      }), formats === null || formats === void 0 ? void 0 : formats.map(function (format) {
+      })), formats === null || formats === void 0 ? void 0 : formats.map(function (format) {
         if (format.isHide) return null;
         return jsx("th", {
           children: filter ? jsx(FilterTh, __assign({
@@ -91449,7 +92229,7 @@ function THead(_a) {
               }, {
                 children: jsx(Icon, {
                   name: ICONS.Information_s1410,
-                  color: "#5c5c5c"
+                  color: "iconQuaternary"
                 })
               }))]
             }))
@@ -91466,7 +92246,7 @@ function THead(_a) {
             }, {
               children: jsx(Icon, {
                 name: ICONS.Information_s1410,
-                color: "#5c5c5c"
+                color: "iconQuaternary"
               })
             }))]
           }))
@@ -91486,8 +92266,8 @@ function THead(_a) {
   }));
 }
 
-var css_248z$1 = "@-webkit-keyframes rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n@-webkit-keyframes blink {\n  0% {\n    opacity: 0.6;\n  }\n  20% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0.6;\n  }\n}\n@keyframes blink {\n  0% {\n    opacity: 0.6;\n  }\n  20% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0.6;\n  }\n}\n@-webkit-keyframes fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.maru-table-wrapper {\n  width: 100%;\n  background-color: white;\n  box-shadow: 0px 0px 6px 0px #e4e4e4;\n  border-radius: 6px;\n  overflow-x: auto;\n}\n.maru-table-wrapper .maru-table-header-wrapper,\n.maru-table-wrapper .maru-table-body-wrapper {\n  width: 100%;\n}\n.maru-table-wrapper tr {\n  height: 54px;\n}\n.maru-table-wrapper th,\n.maru-table-wrapper td {\n  text-align: start;\n  vertical-align: middle;\n  padding: 16.5px 15px;\n  word-break: break-word;\n  color: #5c5c5c;\n}\n.maru-table-wrapper th:first-of-type,\n.maru-table-wrapper td:first-of-type {\n  padding: 16.5px 25px;\n}\n.maru-table-wrapper .checkbox-td {\n  padding: 18px 15px 18px 25px !important;\n}\n.maru-table-wrapper .radio-td {\n  padding: 11px 15px !important;\n}\n.maru-table-wrapper .maru-table-header tr {\n  border-bottom: 1px solid #e4e4e4;\n}\n.maru-table-wrapper .maru-table-header tr th {\n  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-table-wrapper .maru-table-header .filter-th {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 16.5px;\n}\n.maru-table-wrapper .maru-table-header .filter-th.toggle-on .filter-box {\n  width: 100%;\n  height: 33px;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th.toggle-on {\n  padding: 18px 15px 16px 15px;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th.toggle-on .filter-buttons-wrapper {\n  height: 67px;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th .filter-buttons-wrapper {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th .filter-buttons-wrapper .reset-button {\n  margin-bottom: 8px;\n}\n.maru-table-wrapper .maru-table-header .maru-table-header-sortable {\n  padding: unset;\n  margin: unset;\n  color: #5c5c5c;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 600;\n}\n.maru-table-wrapper .maru-table-header .sort-icon-wrapper-th {\n  display: flex;\n}\n.maru-table-wrapper .maru-table-body-scroll-wrapper {\n  overflow-y: auto;\n}\n.maru-table-wrapper .maru-table-body-scroll-wrapper .maru-table-scroll {\n  overflow-y: auto;\n}\n.maru-table-wrapper .maru-table-body tr:not(:last-of-type) {\n  border-bottom: 1px solid #fafafa;\n}\n.maru-table-wrapper .maru-table-body tr:hover,\n.maru-table-wrapper .maru-table-body .clickable-row:hover,\n.maru-table-wrapper .maru-table-body .selected-row {\n  background-color: var(--p-05);\n}\n.maru-table-wrapper .maru-table-body .highlight-row {\n  background-color: var(--p-20);\n}\n.maru-table-wrapper .maru-table-body td {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 400;\n}\n.maru-table-wrapper .maru-table-body tr:last-of-type td:first-of-type {\n  border-bottom-left-radius: 6px;\n}\n.maru-table-wrapper .maru-table-body tr:last-of-type td:last-of-type {\n  border-bottom-right-radius: 6px;\n}\n.maru-table-wrapper .maru-table-body .clickable-row {\n  cursor: pointer;\n}\n.maru-table-wrapper .maru-table-body-kebab-td .maru-table-body-kebab-wrapper {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.maru-table-wrapper .maru-table-body-bin-button-td .maru-table-body-bin-button-wrapper {\n  display: flex;\n  flex-direction: column;\n}\n.maru-table-wrapper .maru-table-body-kebab {\n  margin: unset;\n  padding: unset;\n  height: auto;\n  width: -webkit-fit-content;\n  width: -moz-fit-content;\n  width: fit-content;\n}\n.maru-table-wrapper .maru-table-body-empty-tr > td {\n  width: 100%;\n  vertical-align: middle;\n  text-align: center;\n}\n.maru-table-wrapper .maru-table-body-empty-tr > td p {\n  margin-top: 20px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 400;\n  color: #bdbdbd;\n}\n.maru-table-wrapper .maru-table-body-empty-tr:hover {\n  background-color: inherit !important;\n}\n.maru-table-wrapper .maru-table-body-empty-tr .loading-wrapper {\n  -webkit-animation: blink 1s infinite;\n  animation: blink 1s infinite;\n}";
-styleInject(css_248z$1);
+var css_248z$2 = "@-webkit-keyframes rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n@-webkit-keyframes blink {\n  0% {\n    opacity: 0.6;\n  }\n  20% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0.6;\n  }\n}\n@keyframes blink {\n  0% {\n    opacity: 0.6;\n  }\n  20% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0.6;\n  }\n}\n@-webkit-keyframes fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.maru-table-wrapper {\n  width: 100%;\n  background-color: var(--maru-background-primary);\n  border: 1px solid var(--maru-border-secondary);\n  border-radius: 12px;\n  overflow-x: auto;\n}\n.maru-table-wrapper .maru-table-header-wrapper {\n  background-color: var(--maru-background-secondary);\n}\n.maru-table-wrapper .maru-table-header-wrapper,\n.maru-table-wrapper .maru-table-body-wrapper {\n  width: 100%;\n}\n.maru-table-wrapper tr {\n  height: 48px;\n}\n.maru-table-wrapper th,\n.maru-table-wrapper td {\n  text-align: start;\n  vertical-align: middle;\n  padding: 14px 16px;\n  word-break: break-word;\n  color: var(--maru-text-primary);\n}\n.maru-table-wrapper th:first-of-type,\n.maru-table-wrapper td:first-of-type {\n  padding: 14px 16px;\n}\n.maru-table-wrapper .checkbox-td {\n  padding: 0 0 0 16px !important;\n}\n.maru-table-wrapper .checkbox-td + th, .maru-table-wrapper .checkbox-td + td {\n  padding-left: 12px !important;\n}\n.maru-table-wrapper .checkbox-td .maru-checkbox:not(:checked):not(:disabled) + svg path {\n  fill: var(--maru-border-primary);\n}\n.maru-table-wrapper .checkbox-td .maru-checkbox:disabled + svg path {\n  fill: var(--maru-icon-quaternary);\n}\n.maru-table-wrapper .radio-td {\n  padding: 0 0 0 16px !important;\n}\n.maru-table-wrapper .radio-td + th, .maru-table-wrapper .radio-td + td {\n  padding-left: 12px !important;\n}\n.maru-table-wrapper .radio-td .maru-table-header-radio-spacer {\n  visibility: hidden;\n  pointer-events: none;\n}\n.maru-table-wrapper .maru-table-header tr {\n  height: 40px;\n  border-bottom: 1px solid var(--maru-border-secondary);\n}\n.maru-table-wrapper .maru-table-header tr th {\n  padding: 12px 16px;\n  color: var(--maru-text-tertiary);\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 16px;\n  letter-spacing: 0;\n}\n.maru-table-wrapper .maru-table-header .filter-th {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 16.5px;\n}\n.maru-table-wrapper .maru-table-header .filter-th.toggle-on .filter-box {\n  width: 100%;\n  height: 33px;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th.toggle-on {\n  padding: 18px 15px 16px 15px;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th.toggle-on .filter-buttons-wrapper {\n  height: 67px;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th .filter-buttons-wrapper {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th .filter-buttons-wrapper .reset-button {\n  margin-bottom: 8px;\n}\n.maru-table-wrapper .maru-table-header .maru-table-header-label {\n  display: inline-flex;\n  align-items: center;\n  height: 16px;\n}\n.maru-table-wrapper .maru-table-header .maru-table-header-sortable {\n  padding: unset;\n  margin: unset;\n  min-height: unset;\n  color: var(--maru-text-tertiary);\n  gap: 4px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 16px;\n  letter-spacing: 0;\n}\n.maru-table-wrapper .maru-table-header .maru-table-header-sortable:hover {\n  background-color: transparent;\n}\n.maru-table-wrapper .maru-table-header .maru-table-header-sortable .maru-button-default-icon,\n.maru-table-wrapper .maru-table-header .maru-table-header-sortable .maru-button-default-icon svg {\n  width: 12px;\n  height: 12px;\n}\n.maru-table-wrapper .maru-table-header .sort-icon-wrapper-th {\n  display: flex;\n  align-items: center;\n}\n.maru-table-wrapper .maru-table-body-scroll-wrapper {\n  overflow-y: auto;\n}\n.maru-table-wrapper .maru-table-body-scroll-wrapper .maru-table-scroll {\n  overflow-y: auto;\n}\n.maru-table-wrapper .maru-table-body tr:not(:last-of-type) {\n  border-bottom: 1px solid var(--maru-border-secondary);\n}\n.maru-table-wrapper .maru-table-body tr:hover,\n.maru-table-wrapper .maru-table-body .clickable-row:hover,\n.maru-table-wrapper .maru-table-body .checked-row,\n.maru-table-wrapper .maru-table-body .highlight-row,\n.maru-table-wrapper .maru-table-body .selected-row {\n  background-color: var(--maru-background-primary-hover);\n}\n.maru-table-wrapper .maru-table-body .disabled-row,\n.maru-table-wrapper .maru-table-body .disabled-row:hover {\n  color: var(--maru-text-disabled);\n  background-color: var(--maru-background-primary);\n  cursor: default;\n}\n.maru-table-wrapper .maru-table-body .disabled-row td,\n.maru-table-wrapper .maru-table-body .disabled-row:hover td {\n  color: var(--maru-text-disabled);\n}\n.maru-table-wrapper .maru-table-body td {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 20px;\n  letter-spacing: 0;\n}\n.maru-table-wrapper .maru-table-body tr:last-of-type td:first-of-type {\n  border-bottom-left-radius: 12px;\n}\n.maru-table-wrapper .maru-table-body tr:last-of-type td:last-of-type {\n  border-bottom-right-radius: 12px;\n}\n.maru-table-wrapper .maru-table-body .clickable-row {\n  cursor: pointer;\n}\n.maru-table-wrapper .maru-table-body-kebab-td .maru-table-body-kebab-wrapper {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.maru-table-wrapper .maru-table-body-bin-button-td .maru-table-body-bin-button-wrapper {\n  display: flex;\n  flex-direction: column;\n}\n.maru-table-wrapper .maru-table-body-kebab {\n  margin: unset;\n  padding: unset;\n  height: auto;\n  width: -webkit-fit-content;\n  width: -moz-fit-content;\n  width: fit-content;\n}\n.maru-table-wrapper .maru-table-body-empty-tr > td {\n  width: 100%;\n  vertical-align: middle;\n  text-align: center;\n}\n.maru-table-wrapper .maru-table-body-empty-tr > td p {\n  margin-top: 20px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--maru-text-tertiary);\n}\n.maru-table-wrapper .maru-table-body-empty-tr:hover {\n  background-color: inherit !important;\n}\n.maru-table-wrapper .maru-table-body-empty-tr .loading-wrapper {\n  -webkit-animation: blink 1s infinite;\n  animation: blink 1s infinite;\n}";
+styleInject(css_248z$2);
 
 // eslint-disable-next-line import/prefer-default-export
 function Table(_a) {
@@ -91508,6 +92288,7 @@ function Table(_a) {
     onRowClick = _a.onRowClick,
     selectedRow = _a.selectedRow,
     highlightRows = _a.highlightRows,
+    disabledRows = _a.disabledRows,
     className = _a.className,
     id = _a.id,
     noData = _a.noData,
@@ -91531,6 +92312,13 @@ function Table(_a) {
    * 바디에는 kebabMenu, binButton, chartButton 중 하나가 올 수 있다.
    */
   var hasActionCol = filter != null || kebabMenu != null || binButton != null || chartButton != null;
+  var enabledDataIds = useMemo(function () {
+    return data.map(function (row) {
+      return String(row[rowIdKey]);
+    }).filter(function (rowId) {
+      return !(disabledRows === null || disabledRows === void 0 ? void 0 : disabledRows.rowIds.includes(rowId));
+    });
+  }, [data, disabledRows === null || disabledRows === void 0 ? void 0 : disabledRows.rowIds, rowIdKey]);
   /**
    * 테이블 바디 높이 조정
    * 1. maxHeight가 헤더 높이보다 클때만 조정 (참고로 헤더 높이는 최소 55 최대 105)
@@ -91572,26 +92360,12 @@ function Table(_a) {
    */
   useEffect(function () {
     if (checkedIds != null) {
-      if (!data.length) {
-        setAllCheck(false);
-      } else {
-        // eslint-disable-next-line no-lonely-if
-        if (!(checkedIds === null || checkedIds === void 0 ? void 0 : checkedIds.length)) {
-          setAllCheck(false);
-        } else {
-          var checkCount_1 = 0;
-          checkedIds.forEach(function (checkedId) {
-            if (data.find(function (item) {
-              return item[rowIdKey] === checkedId;
-            })) {
-              checkCount_1 += 1;
-            }
-          });
-          setAllCheck(checkCount_1 === data.length);
-        }
-      }
+      var checkedEnabledCount = enabledDataIds.filter(function (rowId) {
+        return checkedIds.includes(rowId);
+      }).length;
+      setAllCheck(enabledDataIds.length > 0 && checkedEnabledCount === enabledDataIds.length);
     }
-  }, [data, checkedIds]);
+  }, [checkedIds, enabledDataIds]);
   var handleSortClick = function handleSortClick(columnName) {
     return function () {
       if (sort) {
@@ -91605,30 +92379,20 @@ function Table(_a) {
     };
   };
   var handleAllCheckboxChange = function handleAllCheckboxChange(checked) {
-    var dataIdArray = data.map(function (el) {
-      return el[rowIdKey];
-    });
     setAllCheck(checked);
     if (checked) {
-      var newCheckedArray = __spreadArray([], dataIdArray, true);
-      if (checkedIds === null || checkedIds === void 0 ? void 0 : checkedIds.length) {
-        newCheckedArray = dataIdArray.reduce(function (acc, curr) {
-          if (!checkedIds.includes(curr)) {
-            acc.push(curr);
-          }
-          return acc;
-        }, []);
-        newCheckedArray.push.apply(newCheckedArray, checkedIds);
-      }
-      onCheck === null || onCheck === void 0 ? void 0 : onCheck(__spreadArray([], newCheckedArray, true));
-    } else {
-      var leftChecked = !(checkedIds === null || checkedIds === void 0 ? void 0 : checkedIds.length) ? [] : checkedIds.reduce(function (acc, curr) {
-        if (!dataIdArray.includes(curr)) {
-          acc.push(curr);
+      var newCheckedIds_1 = checkedIds ? __spreadArray([], checkedIds, true) : [];
+      enabledDataIds.forEach(function (rowId) {
+        if (!newCheckedIds_1.includes(rowId)) {
+          newCheckedIds_1.push(rowId);
         }
-        return acc;
-      }, []);
-      onCheck === null || onCheck === void 0 ? void 0 : onCheck(__spreadArray([], leftChecked, true));
+      });
+      onCheck === null || onCheck === void 0 ? void 0 : onCheck(newCheckedIds_1);
+    } else {
+      var leftCheckedIds = checkedIds === null || checkedIds === void 0 ? void 0 : checkedIds.filter(function (rowId) {
+        return !enabledDataIds.includes(rowId);
+      });
+      onCheck === null || onCheck === void 0 ? void 0 : onCheck(leftCheckedIds || []);
     }
   };
   return jsxs("div", __assign({
@@ -91687,6 +92451,7 @@ function Table(_a) {
           onRowClick: onRowClick,
           selectedRow: selectedRow,
           highlightRows: highlightRows,
+          disabledRows: disabledRows,
           noData: noData,
           loading: loading,
           emptyBodyHeight: emptyBodyHeight
@@ -91696,59 +92461,352 @@ function Table(_a) {
   }));
 }
 
-function Details(_a) {
-  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;
+var TabsContext = /*#__PURE__*/createContext(null);
+
+var Tab = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var value = _a.value,
+    children = _a.children,
+    _b = _a.disabled,
+    disabled = _b === void 0 ? false : _b,
+    className = _a.className,
+    onClick = _a.onClick,
+    props = __rest(_a, ["value", "children", "disabled", "className", "onClick"]);
+  var tabsContext = useContext(TabsContext);
+  if (!tabsContext) {
+    throw new Error('[Tab] Tab은 Tabs 내부에서 사용해야 합니다.');
+  }
+  var isSelected = tabsContext.selectedValue === value;
+  var isFocusable = !disabled && tabsContext.focusableValue === value;
+  var handleClick = function handleClick(event) {
+    onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    if (event.defaultPrevented || disabled || isSelected) {
+      return;
+    }
+    tabsContext.onChange(value);
+  };
+  return jsx("button", __assign({}, props, {
+    ref: ref,
+    type: "button",
+    role: "tab",
+    value: value,
+    "aria-selected": isSelected,
+    tabIndex: isFocusable ? 0 : -1,
+    disabled: disabled,
+    className: classNames('maru-tab', {
+      'is-selected': isSelected
+    }, className),
+    onClick: handleClick
+  }, {
+    children: children
+  }));
+});
+Tab.displayName = 'Tab';
+
+var css_248z$1 = ".maru-tabs {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  width: fit-content;\n  background-color: var(--maru-background-primary);\n  user-select: none;\n}\n.maru-tabs::before {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  height: 1px;\n  background-color: var(--maru-border-secondary);\n  content: \"\";\n}\n\n.maru-tabs-full-width {\n  display: flex;\n  width: 100%;\n}\n.maru-tabs-full-width > .maru-tab {\n  flex: 1 1 0;\n  min-width: 0;\n}\n\n.maru-tab {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 400;\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  height: 38px;\n  padding: 6px 8px 12px;\n  border: 0;\n  background-color: transparent;\n  color: var(--maru-text-secondary);\n  line-height: 20px;\n  white-space: nowrap;\n  cursor: pointer;\n  transition: color 0.2s ease-in-out;\n}\n.maru-tab:not(:disabled):hover {\n  color: var(--maru-text-brand);\n  font-weight: 600;\n}\n.maru-tab.is-selected {\n  color: var(--maru-text-brand);\n  font-weight: 600;\n}\n.maru-tab:focus-visible {\n  outline: 2px solid var(--p-20);\n  outline-offset: -2px;\n}\n.maru-tab:disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n.maru-tab.is-selected:disabled {\n  font-weight: 400;\n}\n\n.maru-tabs-indicator {\n  position: absolute;\n  z-index: 1;\n  bottom: 0;\n  left: 0;\n  height: 2px;\n  background-color: var(--maru-border-brand-primary);\n  opacity: 0;\n  pointer-events: none;\n}\n.maru-tabs-indicator.is-visible {\n  opacity: 1;\n}\n.maru-tabs-indicator.is-disabled {\n  opacity: 0.5;\n}\n.maru-tabs-indicator.is-animated {\n  transition: width 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .maru-tabs-indicator.is-animated {\n    transition-duration: 1ms;\n  }\n}";
+styleInject(css_248z$1);
+
+var Tabs = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var value = _a.value,
+    onChange = _a.onChange,
+    _b = _a.fullWidth,
+    fullWidth = _b === void 0 ? false : _b,
+    children = _a.children,
+    className = _a.className,
+    onKeyDown = _a.onKeyDown,
+    props = __rest(_a, ["value", "onChange", "fullWidth", "children", "className", "onKeyDown"]);
+  var tabsRef = useCombineRef(ref);
+  var _c = useState({
+      offsetLeft: 0,
+      width: 0,
+      isVisible: false,
+      isDisabled: false,
+      isPositioned: false
+    }),
+    indicatorMetrics = _c[0],
+    setIndicatorMetrics = _c[1];
+  var _d = useState(false),
+    isIndicatorAnimated = _d[0],
+    setIsIndicatorAnimated = _d[1];
+  var _e = useState(value),
+    focusableValue = _e[0],
+    setFocusableValue = _e[1];
+  var getEnabledTabs = useCallback(function () {
+    if (!tabsRef.current) {
+      return [];
+    }
+    return Array.from(tabsRef.current.querySelectorAll(':scope > .maru-tab:not(:disabled)'));
+  }, [tabsRef]);
+  var updateIndicator = useCallback(function () {
+    var tabsElement = tabsRef.current;
+    if (!tabsElement) {
+      return;
+    }
+    var selectedTab = Array.from(tabsElement.children).find(function (child) {
+      return child instanceof HTMLButtonElement && child.classList.contains('maru-tab') && child.getAttribute('aria-selected') === 'true';
+    });
+    setIndicatorMetrics(function (previousMetrics) {
+      if (!selectedTab) {
+        if (!previousMetrics.isVisible) {
+          return previousMetrics;
+        }
+        return __assign(__assign({}, previousMetrics), {
+          width: 0,
+          isVisible: false,
+          isDisabled: false
+        });
+      }
+      var nextMetrics = {
+        offsetLeft: selectedTab.offsetLeft,
+        width: selectedTab.offsetWidth,
+        isVisible: true,
+        isDisabled: selectedTab.disabled,
+        isPositioned: true
+      };
+      if (previousMetrics.offsetLeft === nextMetrics.offsetLeft && previousMetrics.width === nextMetrics.width && previousMetrics.isVisible === nextMetrics.isVisible && previousMetrics.isDisabled === nextMetrics.isDisabled && previousMetrics.isPositioned === nextMetrics.isPositioned) {
+        return previousMetrics;
+      }
+      return nextMetrics;
+    });
+  }, [tabsRef]);
+  useEffect(function () {
+    updateIndicator();
+  }, [children, fullWidth, updateIndicator, value]);
+  useEffect(function () {
+    var _a, _b;
+    var enabledTabs = getEnabledTabs();
+    var selectedEnabledTab = enabledTabs.find(function (tab) {
+      return tab.value === value;
     });
+    setFocusableValue((_a = selectedEnabledTab === null || selectedEnabledTab === void 0 ? void 0 : selectedEnabledTab.value) !== null && _a !== void 0 ? _a : (_b = enabledTabs[0]) === null || _b === void 0 ? void 0 : _b.value);
+  }, [children, getEnabledTabs, value]);
+  useEffect(function () {
+    var tabsElement = tabsRef.current;
+    if (!tabsElement) {
+      return undefined;
+    }
+    var handleResize = function handleResize() {
+      updateIndicator();
+    };
+    var resizeObserver;
+    window.addEventListener('resize', handleResize);
+    if (typeof ResizeObserver !== 'undefined') {
+      resizeObserver = new ResizeObserver(handleResize);
+      resizeObserver.observe(tabsElement);
+      Array.from(tabsElement.children).forEach(function (child) {
+        if (child instanceof HTMLButtonElement) {
+          resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(child);
+        }
+      });
+    }
+    return function () {
+      window.removeEventListener('resize', handleResize);
+      resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+    };
+  }, [children, tabsRef, updateIndicator]);
+  useEffect(function () {
+    if (!indicatorMetrics.isPositioned) {
+      return undefined;
+    }
+    var animationFrame = window.requestAnimationFrame(function () {
+      setIsIndicatorAnimated(true);
+    });
+    return function () {
+      window.cancelAnimationFrame(animationFrame);
+    };
+  }, [indicatorMetrics.isPositioned]);
+  useEffect(function () {
+    if (process.env.NODE_ENV === 'production' || !tabsRef.current) {
+      return;
+    }
+    var tabValues = Array.from(tabsRef.current.children).filter(function (child) {
+      return child instanceof HTMLButtonElement && child.classList.contains('maru-tab');
+    }).map(function (tab) {
+      return tab.value;
+    });
+    var duplicateValues = tabValues.filter(function (tabValue, index) {
+      return tabValues.indexOf(tabValue) !== index;
+    });
+    if (duplicateValues.length > 0) {
+      console.warn('[Tabs] 각 Tab의 value는 고유해야 합니다.');
+    }
+  }, [children, tabsRef]);
+  var handleKeyDown = function handleKeyDown(event) {
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    if (event.defaultPrevented) {
+      return;
+    }
+    var focusedTab = event.target;
+    if (!(focusedTab instanceof HTMLButtonElement) || !focusedTab.classList.contains('maru-tab')) {
+      return;
+    }
+    var enabledTabs = getEnabledTabs();
+    var focusedTabIndex = enabledTabs.indexOf(focusedTab);
+    if (focusedTabIndex < 0 || enabledTabs.length === 0) {
+      return;
+    }
+    var nextTab;
+    if (event.key === 'ArrowRight') {
+      nextTab = enabledTabs[(focusedTabIndex + 1) % enabledTabs.length];
+    } else if (event.key === 'ArrowLeft') {
+      nextTab = enabledTabs[(focusedTabIndex - 1 + enabledTabs.length) % enabledTabs.length];
+    } else if (event.key === 'Home') {
+      nextTab = enabledTabs[0];
+    } else if (event.key === 'End') {
+      nextTab = enabledTabs[enabledTabs.length - 1];
+    }
+    if (!nextTab) {
+      return;
+    }
+    event.preventDefault();
+    setFocusableValue(nextTab.value);
+    nextTab.focus();
+    if (nextTab !== focusedTab) {
+      onChange(nextTab.value);
+    }
   };
+  var tabsContextValue = useMemo(function () {
+    return {
+      selectedValue: value,
+      focusableValue: focusableValue,
+      onChange: onChange
+    };
+  }, [focusableValue, onChange, value]);
+  return (
+    // tablist 자체가 아닌 roving tabIndex를 가진 Tab이 포커스 진입점입니다.
+    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+    jsx("div", __assign({}, props, {
+      ref: tabsRef,
+      role: "tablist",
+      "aria-orientation": "horizontal",
+      onKeyDown: handleKeyDown,
+      className: classNames('maru-tabs', {
+        'maru-tabs-full-width': fullWidth
+      }, className)
+    }, {
+      children: jsxs(TabsContext.Provider, __assign({
+        value: tabsContextValue
+      }, {
+        children: [children, jsx("span", {
+          "aria-hidden": "true",
+          className: classNames('maru-tabs-indicator', {
+            'is-visible': indicatorMetrics.isVisible,
+            'is-disabled': indicatorMetrics.isDisabled,
+            'is-animated': isIndicatorAnimated
+          }),
+          style: {
+            width: "".concat(indicatorMetrics.width, "px"),
+            transform: "translate3d(".concat(indicatorMetrics.offsetLeft, "px, 0, 0)")
+          }
+        })]
+      }))
+    }))
+  );
+});
+Tabs.displayName = 'Tabs';
+Tabs.defaultProps = {
+  fullWidth: false
+};
+
+var TOAST_AUTO_DISMISS_DELAY = 5000;
+
+var TToastLayout = {
+  INLINE: 'inline',
+  STACKED: 'stacked'
+};
+
+function DetailsItem(_a) {
+  var name = _a.name;
+  var _b = useState(false),
+    showTooltip = _b[0],
+    setShowTooltip = _b[1];
+  var nameRef = useRef(null);
+  useEffect(function () {
+    var nameElement = nameRef.current;
+    if (!nameElement) return undefined;
+    var checkOverflow = function checkOverflow() {
+      setShowTooltip(nameElement.scrollWidth > nameElement.clientWidth);
+    };
+    checkOverflow();
+    var resizeObserver;
+    window.addEventListener('resize', checkOverflow);
+    if (typeof ResizeObserver !== 'undefined') {
+      resizeObserver = new ResizeObserver(checkOverflow);
+      resizeObserver.observe(nameElement);
+    }
+    return function () {
+      window.removeEventListener('resize', checkOverflow);
+      resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+    };
+  }, [name]);
+  return jsx("li", {
+    children: jsx(Tooltip, __assign({
+      className: "maru-toast-details-item-tooltip",
+      content: name,
+      direction: "bottom-start",
+      hidden: !showTooltip,
+      portal: true
+    }, {
+      children: jsx("span", __assign({
+        ref: nameRef,
+        className: "maru-toast-details-item-text",
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex: showTooltip ? 0 : undefined
+      }, {
+        children: name
+      }))
+    }))
+  });
+}
+
+function Details(_a) {
+  var details = _a.details;
   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("summary", {
-          children: jsxs("div", {
-            children: [jsx("div", {
-              children: item.summary
-            }), jsx("div", __assign({
-              className: "maru-toast-details-summary-icon"
-            }, {
-              children: jsx(Icon, {
-                name: openStates[index] ? ICONS.Up_s1610 : ICONS.Down_s1610
-              })
-            }))]
-          })
+      return jsxs("details", {
+        children: [jsxs("summary", {
+          children: [jsx("span", __assign({
+            className: "maru-toast-details-summary-icon maru-toast-details-summary-icon-closed"
+          }, {
+            children: jsx(Icon, {
+              name: ICONS.ChevronRight_s1615,
+              color: "iconTertiary"
+            })
+          })), jsx("span", __assign({
+            className: "maru-toast-details-summary-icon maru-toast-details-summary-icon-open"
+          }, {
+            children: jsx(Icon, {
+              name: ICONS.ChevronDown_s1615,
+              color: "iconTertiary"
+            })
+          })), jsx("span", __assign({
+            className: "maru-toast-details-summary-text"
+          }, {
+            children: item.summary
+          }))]
         }), jsx("ul", {
           children: item.subDetails.map(function (detail, idx) {
-            return jsx("li", {
-              children: detail
+            return jsx(DetailsItem, {
+              name: detail
             }, idx);
           })
         })]
-      }), index);
+      }, index);
     })
   }));
 }
 
-var css_248z = ".maru-toast-style {\n  padding: 10px 12px 10px 12px;\n  border-radius: 6px;\n  background-color: #fff;\n  box-shadow: 0 0 6px 0 #bdbdbd;\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  flex-direction: column;\n  max-width: 527px;\n}\n.maru-toast-style div:first-child {\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  flex-direction: row;\n  width: 100%;\n}\n.maru-toast-style .maru-toast-style-content {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\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  gap: 8px;\n  margin-right: 16px;\n}\n.maru-toast-style .maru-toast-style-content span {\n  line-height: 24px;\n}\n.maru-toast-style .maru-toast-style-content-expanded {\n  gap: 10px;\n}\n.maru-toast-style .maru-toast-style-content-expanded p {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 16px;\n  letter-spacing: -0.64px;\n  font-weight: 700;\n  align-items: center;\n  line-height: 24px;\n}\n.maru-toast-style .maru-toast-style-content-expanded p span {\n  display: inline-block;\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  margin-left: 5px;\n  line-height: 24px;\n}\n.maru-toast-style .maru-toast-snackbar-button {\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: #5c5c5c;\n  border: 0;\n  background-color: transparent;\n  padding: 0;\n  text-decoration: underline;\n  cursor: pointer;\n  white-space: nowrap;\n}\n.maru-toast-style .maru-toast-revert-button {\n  display: block;\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: var(--p);\n  margin-top: 4px;\n  cursor: pointer;\n  white-space: nowrap;\n  text-decoration: underline;\n  background: none;\n  border: none;\n  padding: 0;\n}\n.maru-toast-style .maru-toast-close-button-wrapper {\n  display: flex;\n  align-items: center;\n  height: 24px;\n}\n.maru-toast-style .maru-toast-details {\n  width: 100%;\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  cursor: pointer;\n}\n.maru-toast-style .maru-toast-details summary > div {\n  width: auto;\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 > div .maru-toast-details-summary-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  margin-left: 8px;\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-bottom: 24px;\n  position: relative;\n  opacity: 0;\n  transform: translateX(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: translateX(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  top: 120px;\n  transition: transform 0.5s ease-out;\n  display: flex;\n  flex-direction: column-reverse;\n  align-items: flex-end;\n}";
+var css_248z = "@charset \"UTF-8\";\n.maru-toast-style {\n  position: relative;\n  box-sizing: border-box;\n  width: 380px;\n  max-width: calc(100vw - 32px);\n  padding: 16px;\n  border: 0;\n  border-radius: 12px;\n  background-color: var(--maru-background-primary);\n  box-shadow: inset 0 0 0 1px var(--maru-border-secondary), 0 6px 8px rgba(0, 0, 0, 0.07);\n  color: var(--maru-text-primary);\n}\n.maru-toast-style .maru-toast-style-row {\n  display: flex;\n  width: 100%;\n  min-width: 0;\n}\n.maru-toast-style .maru-toast-style-content {\n  display: flex;\n  flex: 1;\n  gap: 8px;\n  min-width: 0;\n}\n.maru-toast-style .maru-toast-style-content-inline {\n  flex-direction: row;\n  align-items: flex-start;\n}\n.maru-toast-style.maru-toast-style-message .maru-toast-style-content-inline {\n  align-items: center;\n}\n.maru-toast-style .maru-toast-style-content-stacked {\n  flex-direction: column;\n  align-items: flex-start;\n}\n.maru-toast-style:not(.maru-toast-style-custom-close) .maru-toast-style-content {\n  padding-right: 40px;\n}\n.maru-toast-style .maru-toast-style-status-icon {\n  display: flex;\n  width: 24px;\n  height: 24px;\n  flex: 0 0 24px;\n  align-items: center;\n  justify-content: center;\n}\n.maru-toast-style .maru-toast-style-status-icon svg {\n  display: block;\n  width: 24px;\n  height: 24px;\n}\n.maru-toast-style.maru-toast-style-message.maru-toast-style-stacked .maru-toast-style-status-icon {\n  width: 32px;\n  height: 32px;\n  flex-basis: 32px;\n}\n.maru-toast-style.maru-toast-style-message.maru-toast-style-stacked .maru-toast-style-status-icon svg {\n  width: 32px;\n  height: 32px;\n}\n.maru-toast-style .maru-toast-style-copy {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 4px;\n  min-width: 0;\n}\n.maru-toast-style .maru-toast-style-message-text,\n.maru-toast-style .maru-toast-style-title,\n.maru-toast-style .maru-toast-style-description-text {\n  margin: 0;\n  overflow-wrap: anywhere;\n}\n.maru-toast-style .maru-toast-style-message-text {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n}\n.maru-toast-style .maru-toast-style-title {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 20px;\n}\n.maru-toast-style .maru-toast-style-title span {\n  display: inline;\n  margin-left: 5px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 20px;\n}\n.maru-toast-style .maru-toast-style-description-text {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--maru-text-secondary);\n  line-height: 20px;\n}\n.maru-toast-style .maru-toast-snackbar-button,\n.maru-toast-style .maru-toast-revert-button {\n  border: 0;\n  border-radius: 4px;\n  background-color: transparent;\n  color: var(--maru-text-brand);\n  cursor: pointer;\n  white-space: nowrap;\n}\n.maru-toast-style .maru-toast-snackbar-button:hover,\n.maru-toast-style .maru-toast-revert-button:hover {\n  color: var(--maru-text-brand-hover);\n}\n.maru-toast-style .maru-toast-snackbar-button:focus-visible,\n.maru-toast-style .maru-toast-revert-button:focus-visible {\n  outline: 2px solid var(--maru-border-brand-primary);\n  outline-offset: 2px;\n}\n.maru-toast-style .maru-toast-revert-button {\n  align-self: flex-start;\n  padding: 0 2px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 20px;\n}\n.maru-toast-style .maru-toast-snackbar-button {\n  flex-shrink: 0;\n  align-self: flex-start;\n  margin-left: 8px;\n  padding: 2px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 20px;\n  text-decoration: underline;\n}\n.maru-toast-style .maru-toast-close-button {\n  position: absolute;\n  top: 9px;\n  right: 9px;\n  width: 32px;\n  height: 32px;\n  min-height: 32px;\n  padding: 8px;\n  border-radius: 8px;\n  background-color: var(--maru-background-primary);\n}\n.maru-toast-style .maru-toast-close-button .maru-button-default-icon,\n.maru-toast-style .maru-toast-close-button .maru-button-default-icon svg {\n  width: 16px;\n  height: 16px;\n}\n.maru-toast-style .maru-toast-close-button:hover {\n  background-color: var(--maru-background-primary-hover);\n}\n.maru-toast-style .maru-toast-close-button:focus-visible {\n  outline: 2px solid var(--maru-border-brand-primary);\n  outline-offset: 2px;\n}\n.maru-toast-style.maru-toast-style-has-details {\n  padding: 24px;\n  border: 1px solid var(--maru-border-secondary);\n  border-radius: 16px;\n  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.07);\n}\n.maru-toast-style.maru-toast-style-has-details:not(.maru-toast-style-custom-close) .maru-toast-style-content {\n  padding-right: 0;\n}\n.maru-toast-style.maru-toast-style-has-details.maru-toast-style-message .maru-toast-style-content-inline {\n  align-items: flex-start;\n}\n.maru-toast-style.maru-toast-style-has-details .maru-toast-style-content {\n  align-items: flex-start;\n}\n.maru-toast-style.maru-toast-style-has-details:not(.maru-toast-style-custom-close) .maru-toast-style-message-text,\n.maru-toast-style.maru-toast-style-has-details:not(.maru-toast-style-custom-close) .maru-toast-style-title {\n  padding-right: 40px;\n}\n.maru-toast-style.maru-toast-style-has-details .maru-toast-style-copy {\n  gap: 2px;\n  padding-top: 2px;\n}\n.maru-toast-style.maru-toast-style-has-details .maru-toast-style-content-stacked .maru-toast-style-copy {\n  width: 100%;\n  align-self: stretch;\n}\n.maru-toast-style.maru-toast-style-has-details .maru-toast-style-message-text {\n  padding-bottom: 16px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 600;\n}\n.maru-toast-style.maru-toast-style-has-details .maru-toast-close-button {\n  top: 13px;\n  right: 13px;\n}\n.maru-toast-style .maru-toast-details {\n  display: flex;\n  width: 100%;\n  box-sizing: border-box;\n  flex-direction: column;\n  gap: 2px;\n  padding: 0;\n  margin: 0;\n  background-color: transparent;\n  color: var(--maru-text-secondary);\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 400;\n}\n.maru-toast-style .maru-toast-details details {\n  width: 100%;\n}\n.maru-toast-style .maru-toast-details summary {\n  display: flex;\n  min-height: 32px;\n  box-sizing: border-box;\n  gap: 4px;\n  align-items: center;\n  padding: 6px 8px;\n  border-radius: 6px;\n  list-style: none;\n  margin: 0;\n  white-space: pre-wrap;\n  cursor: pointer;\n  line-height: 20px;\n}\n.maru-toast-style .maru-toast-details summary::marker {\n  content: \"\";\n}\n.maru-toast-style .maru-toast-details summary::-webkit-details-marker {\n  display: none;\n}\n.maru-toast-style .maru-toast-details summary .maru-toast-details-summary-icon {\n  display: flex;\n  width: 16px;\n  height: 16px;\n  flex: 0 0 16px;\n  align-items: center;\n  justify-content: center;\n}\n.maru-toast-style .maru-toast-details summary .maru-toast-details-summary-icon svg {\n  display: block;\n  width: 16px;\n  height: 16px;\n}\n.maru-toast-style .maru-toast-details summary .maru-toast-details-summary-icon-open {\n  display: none;\n}\n.maru-toast-style .maru-toast-details summary .maru-toast-details-summary-text {\n  min-width: 0;\n  flex: 1;\n  overflow-wrap: anywhere;\n}\n.maru-toast-style .maru-toast-details details[open] summary {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 500;\n}\n.maru-toast-style .maru-toast-details details[open] summary .maru-toast-details-summary-icon-closed {\n  display: none;\n}\n.maru-toast-style .maru-toast-details details[open] summary .maru-toast-details-summary-icon-open {\n  display: flex;\n}\n.maru-toast-style .maru-toast-details ul {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n}\n.maru-toast-style .maru-toast-details li {\n  display: flex;\n  min-height: 32px;\n  box-sizing: border-box;\n  gap: 4px;\n  align-items: center;\n  padding: 6px 8px;\n  line-height: 20px;\n  overflow-wrap: anywhere;\n}\n.maru-toast-style .maru-toast-details li::before {\n  width: 36px;\n  flex: 0 0 36px;\n  content: \"•\";\n  text-align: right;\n}\n.maru-toast-style .maru-toast-details li .maru-toast-details-item-tooltip {\n  width: 100%;\n  min-width: 0;\n  flex: 1;\n}\n.maru-toast-style .maru-toast-details li .maru-toast-details-item-text {\n  display: block;\n  width: 100%;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.maru-toast-style .maru-toast-details li .maru-toast-details-item-text:focus-visible {\n  border-radius: 2px;\n  outline: 2px solid var(--maru-border-brand-primary);\n  outline-offset: 2px;\n}\n\n.maru-toast {\n  position: relative;\n  margin-bottom: 24px;\n  opacity: 0;\n  transform: translateX(100%);\n  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease-out;\n}\n.maru-toast.entered {\n  opacity: 1;\n  transform: translateX(0);\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  top: 120px;\n  right: 24px;\n  display: flex;\n  flex-direction: column-reverse;\n  align-items: flex-end;\n  transition: transform 0.3s ease-out;\n}\n\n@media (max-width: 480px) {\n  .maru-toaster {\n    right: 16px;\n    left: 16px;\n    align-items: stretch;\n  }\n  .maru-toast-style {\n    width: 100%;\n    max-width: none;\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .maru-toast,\n  .maru-toaster {\n    transition-duration: 1ms;\n  }\n}";
 styleInject(css_248z);
 
 function ToastStyle(_a) {
   var _b = _a.variant,
     variant = _b === void 0 ? 'success' : _b,
     content = _a.content,
+    _c = _a.layout,
+    layout = _c === void 0 ? TToastLayout.INLINE : _c,
     title = _a.title,
     closeButton = _a.closeButton,
     revert = _a.revert,
@@ -91759,6 +92817,11 @@ function ToastStyle(_a) {
     warning: ICONS.AlertTriangleBg_s2410,
     danger: ICONS.XDiamondBg_s2415
   };
+  var iconColor = {
+    success: 'iconPositivePrimary',
+    warning: 'iconWarningPrimary',
+    danger: 'iconErrorPrimary'
+  };
   var handleClose = function handleClose() {
     onClose();
   };
@@ -91766,54 +92829,77 @@ function ToastStyle(_a) {
     closeButton === null || closeButton === void 0 ? void 0 : closeButton.onClick();
     onClose();
   };
-  return jsxs("div", __assign({
-    className: "maru-toast-style"
+  return jsx("div", __assign({
+    className: classNames('maru-toast-style', "maru-toast-style-".concat(layout), {
+      'maru-toast-style-message': !title,
+      'maru-toast-style-description': title,
+      'maru-toast-style-custom-close': closeButton,
+      'maru-toast-style-has-details': details && details.length > 0
+    }),
+    role: variant === 'danger' ? 'alert' : 'status',
+    "aria-live": variant === 'danger' ? 'assertive' : 'polite',
+    "aria-atomic": "true"
   }, {
-    children: [jsxs("div", {
+    children: jsxs("div", __assign({
+      className: "maru-toast-style-row"
+    }, {
       children: [jsxs("div", __assign({
-        className: classNames('maru-toast-style-content', {
-          'maru-toast-style-content-expanded': title
-        })
+        className: classNames('maru-toast-style-content', "maru-toast-style-content-".concat(layout))
       }, {
-        children: [jsx(Icon, {
-          name: iconName[variant],
-          color: variant
-        }), jsxs("div", {
-          children: [jsxs("p", {
-            children: [title === null || title === void 0 ? void 0 : title.main, jsx("span", {
-              children: title === null || title === void 0 ? void 0 : title.sub
+        children: [jsx("span", __assign({
+          className: "maru-toast-style-status-icon",
+          "aria-hidden": "true"
+        }, {
+          children: jsx(Icon, {
+            name: iconName[variant],
+            color: iconColor[variant]
+          })
+        })), jsxs("div", __assign({
+          className: "maru-toast-style-copy"
+        }, {
+          children: [title ? jsxs("p", __assign({
+            className: "maru-toast-style-title"
+          }, {
+            children: [title.main, title.sub && jsx("span", {
+              children: title.sub
             })]
-          }), jsx("span", {
+          })) : jsx("p", __assign({
+            className: "maru-toast-style-message-text"
+          }, {
             children: content
-          }), revert && jsx("button", __assign({
+          })), title && jsx("p", __assign({
+            className: "maru-toast-style-description-text"
+          }, {
+            children: content
+          })), revert && jsx("button", __assign({
             type: "button",
             className: "maru-toast-revert-button",
             onClick: revert.onRevert
           }, {
             children: revert.label
-          }))]
-        })]
+          })), jsx(Details, {
+            details: details
+          })]
+        }))]
       })), closeButton ? jsx("button", __assign({
         type: "button",
         onClick: handleSnackbarClose,
         className: "maru-toast-snackbar-button"
       }, {
         children: closeButton.content
-      })) : jsx("span", __assign({
-        className: "maru-toast-close-button-wrapper"
-      }, {
-        children: jsx(Button, {
-          startIcon: {
-            name: ICONS.X_s1615,
-            color: '#5C5C5C'
-          },
-          color: "secondary",
-          onClick: handleClose
-        })
-      }))]
-    }), jsx(Details, {
-      details: details
-    })]
+      })) : jsx(Button, {
+        className: "maru-toast-close-button",
+        startIcon: {
+          name: ICONS.X_s1615,
+          color: 'textTertiary'
+        },
+        color: "secondary",
+        variant: "text",
+        size: "small",
+        "aria-label": "Toast \uB2EB\uAE30",
+        onClick: handleClose
+      })]
+    }))
   }));
 }
 
@@ -91826,11 +92912,11 @@ function Toast(_a) {
     animationState = _b[0],
     setAnimationState = _b[1];
   useEffect(function () {
-    var timer = setTimeout(function () {
+    var animationFrameId = requestAnimationFrame(function () {
       setAnimationState('entered');
-    }, 10); // DOM이 렌더링되고 난 직후 애니메이션을 트리거
+    });
     return function () {
-      return clearTimeout(timer);
+      return cancelAnimationFrame(animationFrameId);
     };
   }, [toast]);
   useEffect(function () {
@@ -91838,28 +92924,29 @@ function Toast(_a) {
     if (toast && !toast.disableAutoOff) {
       timeoutId = setTimeout(function () {
         setAnimationState('fade-out');
-        timeoutId = setTimeout(function () {
-          drop(id);
-        }, 300);
-      }, 5000);
+      }, TOAST_AUTO_DISMISS_DELAY);
     }
     return function () {
       if (timeoutId) clearTimeout(timeoutId);
     };
-  }, [toast, id]);
+  }, [toast]);
   if (!toast) return null;
   var handleClose = function handleClose() {
     setAnimationState('fade-out');
-    setTimeout(function () {
-      return drop(id);
-    }, 300);
+  };
+  var handleTransitionEnd = function handleTransitionEnd(event) {
+    if (event.target === event.currentTarget && event.propertyName === 'opacity' && animationState === 'fade-out') {
+      drop(id);
+    }
   };
   return jsx("div", __assign({
-    className: classNames('maru-toast', animationState, className)
+    className: classNames('maru-toast', animationState, className),
+    onTransitionEnd: handleTransitionEnd
   }, {
     children: jsx(ToastStyle, {
       variant: toast.variant,
       content: toast.content,
+      layout: toast.layout,
       title: toast.title,
       closeButton: toast.closeButton,
       revert: toast.revert,
@@ -91869,4 +92956,4 @@ function Toast(_a) {
   }));
 }
 
-export { Badge, Button, ButtonGroup, Calendar, Checkbox, Chip, Code, Dropdown, ICONS, Icon, Input, Modal, MultiSelectDropdown, Pagination, Popover, Radio, SearchInput, Skeleton, Slider, StyleProvider, Table, Textarea, Toast, Toggle, Tooltip };
+export { Badge, Button, ButtonGroup, COLORS, COLOR_TOKEN_VALUES, Calendar, Checkbox, Chip, Code, DColor, Dropdown, ICONS, Icon, Input, InputWithAction, Modal, MultiSelectDropdown, NumberInput, PRIMITIVE_COLOR_TOKEN_VALUES, Pagination, Popover, Radio, SEMANTIC_COLOR_TOKEN_VALUES, SearchInput, SemanticColor, Skeleton, Slider, StyleProvider, TRadioGap, TRadioSize, TToastLayout, TToggleSize, Tab, Table, Tabs, TagInput, Textarea, Toast, Toggle, Tooltip };