maru_design2 2.20.3 → 2.20.4

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.20.4](https://github.com/42maru-ai/maru-design2/compare/v2.20.3...v2.20.4) (2025-01-21)
+
+
+### Bug Fixes
+
+* :lipstick: add disabled to MultiSelectDropdown ([034ec2f](https://github.com/42maru-ai/maru-design2/commit/034ec2f2d3a0061c2227fcec2d2c46625b104f3b))
+
 ## [2.20.3](https://github.com/42maru-ai/maru-design2/compare/v2.20.2...v2.20.3) (2025-01-21)
 
 

package/dist/components/molecules/multiSelectDropdown/toggle/Arrow.d.ts

@@ -1,6 +1,7 @@
 interface Props {
     open: boolean;
     focus: boolean;
+    disabled?: boolean;
 }
-declare function Arrow({ open, focus }: Props): import("react/jsx-runtime").JSX.Element;
+declare function Arrow({ open, focus, disabled }: Props): import("react/jsx-runtime").JSX.Element;
 export default Arrow;

package/dist/index.js

@@ -25843,13 +25843,14 @@ function DropdownMenu(_a) {
 
 function Arrow(_a) {
   var open = _a.open,
-    focus = _a.focus;
+    focus = _a.focus,
+    disabled = _a.disabled;
   return jsx("span", __assign({
     className: "maru-multi-select-dropdown-toggle-arrow"
   }, {
     children: jsx(Icon, {
       name: open ? ICONS.ChevronUp_s1615 : ICONS.ChevronDown_s1615,
-      color: focus || open ? 'primary' : '#bdbdbd'
+      color: disabled ? '#e4e4e4' : focus || open ? 'primary' : '#bdbdbd'
     })
   }));
 }
@@ -25875,7 +25876,8 @@ function DropdownToggleButton(_a) {
   };
   return jsx("div", __assign({
     className: classNames('maru-multi-select-dropdown-toggle-wrapper', {
-      closed: !open
+      closed: !open,
+      disabled: disabled
     }),
     style: {
       width: width || '100%'
@@ -25905,15 +25907,16 @@ function DropdownToggleButton(_a) {
         })
       }, {
         children: selected ? content : placeholder
-      })), !disabled && jsx(Arrow, {
+      })), jsx(Arrow, {
         open: open,
-        focus: focus
+        focus: focus,
+        disabled: disabled
       })]
     }))
   }));
 }
 
-var css_248z$4 = ".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: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:hover .maru-multi-select-dropdown-button {\n  font-weight: 400;\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:hover .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  font-weight: 300;\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:hover .maru-multi-select-dropdown-button ::-moz-placeholder {\n  font-weight: 300;\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:hover .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  font-weight: 300;\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:hover .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  font-weight: 300;\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:hover .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:hover .maru-multi-select-dropdown-button ::placeholder {\n  font-weight: 300;\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:active, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper: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:active.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-visible.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper: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:active .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-visible .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-within .maru-multi-select-dropdown-button {\n  font-weight: 400;\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:active .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-visible .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-within .maru-multi-select-dropdown-button:focus-visible {\n  outline: none;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:active .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-visible .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-within .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  font-weight: 300;\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:active .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-visible .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-within .maru-multi-select-dropdown-button ::-moz-placeholder {\n  font-weight: 300;\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:active .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-visible .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-within .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  font-weight: 300;\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:active .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-visible .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-within .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  font-weight: 300;\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:active .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:active .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-visible .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-visible .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-within .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-within .maru-multi-select-dropdown-button ::placeholder {\n  font-weight: 300;\n  color: var(--p);\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 .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-toggle-arrow {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\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  border: 1px solid var(--p);\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-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-header {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  flex-direction: row;\n  gap: 8px;\n  width: 100%;\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  border-bottom: 1px solid var(--p);\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-header .input-wrapper {\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n  gap: 8px;\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-header .input-wrapper > 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}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-header .input-wrapper > input::-webkit-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\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-header .input-wrapper > input::-moz-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\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-header .input-wrapper > input:-ms-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\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-header .input-wrapper > input::-ms-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\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-header .input-wrapper > input::placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\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  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}";
+var css_248z$4 = ".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: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:hover .maru-multi-select-dropdown-button {\n  font-weight: 400;\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:hover .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  font-weight: 300;\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:hover .maru-multi-select-dropdown-button ::-moz-placeholder {\n  font-weight: 300;\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:hover .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  font-weight: 300;\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:hover .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  font-weight: 300;\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:hover .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:hover .maru-multi-select-dropdown-button ::placeholder {\n  font-weight: 300;\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:active, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper: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:active.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-visible.closed, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper: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:active .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-visible .maru-multi-select-dropdown-button, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-within .maru-multi-select-dropdown-button {\n  font-weight: 400;\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:active .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-visible .maru-multi-select-dropdown-button:focus-visible, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-within .maru-multi-select-dropdown-button:focus-visible {\n  outline: none;\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:active .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-visible .maru-multi-select-dropdown-button ::-webkit-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-within .maru-multi-select-dropdown-button ::-webkit-input-placeholder {\n  font-weight: 300;\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:active .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-visible .maru-multi-select-dropdown-button ::-moz-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-within .maru-multi-select-dropdown-button ::-moz-placeholder {\n  font-weight: 300;\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:active .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-visible .maru-multi-select-dropdown-button :-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-within .maru-multi-select-dropdown-button :-ms-input-placeholder {\n  font-weight: 300;\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:active .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-visible .maru-multi-select-dropdown-button ::-ms-input-placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-within .maru-multi-select-dropdown-button ::-ms-input-placeholder {\n  font-weight: 300;\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:active .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:active .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-visible .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-visible .maru-multi-select-dropdown-button ::placeholder, .maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-within .maru-multi-select-dropdown-button .placeholder,\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper:focus-within .maru-multi-select-dropdown-button ::placeholder {\n  font-weight: 300;\n  color: var(--p);\n}\n.maru-multi-select-dropdown .maru-multi-select-dropdown-toggle-wrapper.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.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.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-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 .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-toggle-arrow {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\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  border: 1px solid var(--p);\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-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-header {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  flex-direction: row;\n  gap: 8px;\n  width: 100%;\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  border-bottom: 1px solid var(--p);\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-header .input-wrapper {\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n  gap: 8px;\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-header .input-wrapper > 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}\n.maru-multi-select-dropdown-menu-wrapper .maru-multi-select-dropdown-menu .maru-multi-select-dropdown-menu-item-wrapper .maru-multi-select-dropdown-menu-header .input-wrapper > input::-webkit-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\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-header .input-wrapper > input::-moz-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\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-header .input-wrapper > input:-ms-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\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-header .input-wrapper > input::-ms-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\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-header .input-wrapper > input::placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\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  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}";
 styleInject(css_248z$4);
 
 function MultiSelectDropdown(_a) {

package/package.json

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