maru_design2 2.0.0 → 2.0.1

package/dist/components/atoms/input/Input.d.ts

@@ -2,15 +2,15 @@ import React from 'react';
 import { TInputType } from '../../../enums/type';
 import './input.scss';
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /**
+     * 초기화 함수 (@v1 hasClearBtn, onClear)
+     */
+    onClear: () => void;
     /**
      * 에러났을때 메시지. (@v1 isValid, validMessage)
      */
     errorMessage?: string;
     label?: string;
-    /**
-     * 초기화 함수 (@v1 hasClearBtn, onClear)
-     */
-    onClear?: () => void;
     /**
      * 데이터 타입. ['text', 'password', 'number']
      */

package/dist/components/atoms/tooltip/Tooltip.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { TTooltipColor } from '../../../enums/color';
 import { TDirection } from '../../../enums/direction';
+import { TTooltipVariant } from '../../../enums/variant';
 import './tooltip.scss';
 export interface TooltipProps {
     children: React.ReactNode;
@@ -9,14 +9,14 @@ export interface TooltipProps {
      */
     content: React.ReactNode;
     className?: string;
-    /**
-     * ['default', 'danger']
-     */
-    color?: TTooltipColor;
     direction?: TDirection;
     /**
      * 컴포넌트 createPortal 여부. (@v1 isOnDocument)
      */
     portal?: boolean;
+    /**
+     * ['default', 'error']. error는 앞에 항상 아이콘 있음.
+     */
+    variant?: TTooltipVariant;
 }
-export declare function Tooltip({ children, content, className, color, direction, portal, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tooltip({ children, content, className, direction, portal, variant, }: TooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/dropdown/Dropdown.d.ts

@@ -47,14 +47,6 @@ interface DropdownProps<T extends Record<string, any>> {
      */
     inlineLabel?: string;
     label?: string;
-    /**
-     * 데이터가 없을때 메시지
-     */
-    noDataMessage?: string;
-    /**
-     * 검색 결과가 없을때 메시지
-     */
-    noSearchedMessage?: string;
     /**
      * 초기화 함수 (@v1 hasClearBtn, onClear)
      */
@@ -81,5 +73,5 @@ interface DropdownProps<T extends Record<string, any>> {
      */
     height?: number;
 }
-export declare function Dropdown<T extends Record<string, any>>({ data, selectedId, onSelect, idKey, displayKey, anchorEl, className, color, customButton, customMenuItem, disabled, errorMessage, inlineLabel, label, noDataMessage, noSearchedMessage, onClear, placeholder, startArrow, toggleEndNode, type, width, height, }: DropdownProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Dropdown<T extends Record<string, any>>({ data, selectedId, onSelect, idKey, displayKey, anchorEl, className, color, customButton, customMenuItem, disabled, errorMessage, inlineLabel, label, onClear, placeholder, startArrow, toggleEndNode, type, width, height, }: DropdownProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/molecules/dropdown/Menu.d.ts

@@ -8,7 +8,6 @@ interface Props<T extends Record<string, any>> {
     filteredData: T[];
     width?: number;
     height?: number;
-    noMessage?: string;
     customMenuItem?: ({ children, rowId, }: {
         children: React.ReactNode;
         rowId: string | number;
@@ -16,5 +15,5 @@ interface Props<T extends Record<string, any>> {
     onSelect: (id?: string) => void;
     closeMenu: () => void;
 }
-declare function DropdownMenu<T extends Record<string, any>>({ parent, menuItemEls, selectedId, idKey, displayKey, filteredData, width, height, noMessage, customMenuItem: CustomMenuItem, onSelect, closeMenu, }: Props<T>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenu<T extends Record<string, any>>({ parent, menuItemEls, selectedId, idKey, displayKey, filteredData, width, height, customMenuItem: CustomMenuItem, onSelect, closeMenu, }: Props<T>): import("react/jsx-runtime").JSX.Element;
 export default DropdownMenu;

package/dist/enums/color.d.ts

@@ -9,5 +9,3 @@ declare const DColor: {
 export declare const COLORS: string[];
 export type TColor = (typeof COLORS)[number];
 export { DColor };
-export declare const TOOLTIP_COLORS: readonly ["default", "danger"];
-export type TTooltipColor = (typeof TOOLTIP_COLORS)[number];

package/dist/enums/variant.d.ts

@@ -2,3 +2,5 @@ export declare const BUTTON_VARIANTS: readonly ["default", "default-light", "out
 export type TButtonVariant = (typeof BUTTON_VARIANTS)[number];
 export declare const CHIP_VARIANTS: readonly ["default", "outline", "dot"];
 export type TChipVariant = (typeof CHIP_VARIANTS)[number];
+export declare const TOOLTIP_VARIANTS: readonly ["default", "error"];
+export type TTooltipVariant = (typeof TOOLTIP_VARIANTS)[number];

package/dist/hooks/useButtonState.d.ts

@@ -1,18 +1,16 @@
 /// <reference types="react" />
 /**
- * 버튼 hover/active/focus 상태를 추적할 때 사용.
+ * 버튼 hover/active 상태를 추적할 때 사용.
  */
 interface IButtonState {
     isHover: boolean;
     isActive: boolean;
-    isFocused: boolean;
 }
 declare function useButtonState(): [
     IButtonState,
     {
         setIsHover: React.Dispatch<React.SetStateAction<boolean>>;
         setIsActive: React.Dispatch<React.SetStateAction<boolean>>;
-        setIsFocused: React.Dispatch<React.SetStateAction<boolean>>;
     }
 ];
 export default useButtonState;

package/dist/index.js

@@ -184,17 +184,12 @@ function useButtonState() {
   var _b = useState(false),
     isActive = _b[0],
     setIsActive = _b[1];
-  var _c = useState(false),
-    isFocused = _c[0],
-    setIsFocused = _c[1];
   return [{
     isHover: isHover,
-    isActive: isActive,
-    isFocused: isFocused
+    isActive: isActive
   }, {
     setIsHover: setIsHover,
-    setIsActive: setIsActive,
-    setIsFocused: setIsFocused
+    setIsActive: setIsActive
   }];
 }
 
@@ -2873,7 +2868,7 @@ function Icon(_a) {
   }));
 }
 
-var css_248z$a = ".size-small {\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 600;\n}\n\n.size-normal {\n  padding: 8px 10px;\n  border-radius: 8px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 600;\n}\n\n.size-large {\n  padding: 4px 12px;\n  border-radius: 8px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 600;\n}\n\n.maru-button {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  border: 0;\n  cursor: pointer;\n  gap: 8px;\n}\n.maru-button:focus-within {\n  outline: none;\n}\n.maru-button:disabled {\n  cursor: default;\n  opacity: 0.5;\n  pointer-events: none;\n}\n.maru-button-primary-default {\n  background-color: var(--p);\n  color: white;\n}\n.maru-button-primary-default:hover {\n  box-shadow: 0 0 6px var(--p);\n}\n.maru-button-primary-default:focus, .maru-button-primary-default:active {\n  box-shadow: none;\n  background-color: var(--p-10);\n  color: var(--p);\n}\n.maru-button-primary-default-light {\n  background-color: var(--p-10);\n  color: var(--p);\n}\n.maru-button-primary-default-light:hover {\n  box-shadow: 0 0 6px var(--p-50-per);\n}\n.maru-button-primary-default-light:focus, .maru-button-primary-default-light:active {\n  box-shadow: none;\n  background-color: var(--p);\n  color: white;\n}\n.maru-button-primary-outline {\n  background-color: white;\n  color: var(--p);\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-outline:hover {\n  box-shadow: 0 0 6px var(--p-20);\n}\n.maru-button-primary-outline:focus, .maru-button-primary-outline:active {\n  box-shadow: none;\n  background-color: var(--p-20);\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-outline:hover {\n  box-shadow: 0 0 6px var(--p-50-per);\n}\n.maru-button-primary-outline:focus, .maru-button-primary-outline:active {\n  box-shadow: none;\n  background-color: var(--p-10);\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-text {\n  background-color: white;\n  color: var(--p);\n}\n.maru-button-primary-color-on-focus {\n  background-color: white;\n  color: #bdbdbd;\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n  padding: 5px 8px !important;\n  gap: 4px;\n}\n.maru-button-primary-color-on-focus:hover {\n  box-shadow: 0px 0px 6px 0px #e4e4e4;\n}\n.maru-button-primary-color-on-focus:focus, .maru-button-primary-color-on-focus:active {\n  background-color: var(--p-10);\n  color: var(--p);\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-secondary-default {\n  background-color: #8c8c8c;\n  color: white;\n  background-color: #e4e4e4;\n  color: #8c8c8c;\n}\n.maru-button-secondary-default:hover {\n  box-shadow: 0 0 6px #8c8c8c;\n}\n.maru-button-secondary-default:focus, .maru-button-secondary-default:active {\n  box-shadow: none;\n  background-color: #fafafa;\n  color: #8c8c8c;\n}\n.maru-button-secondary-default:hover {\n  box-shadow: 0 0 6px #e4e4e4;\n}\n.maru-button-secondary-default:focus, .maru-button-secondary-default:active {\n  box-shadow: none;\n  background-color: #8c8c8c;\n  color: white;\n}\n.maru-button-secondary-default-light {\n  background-color: #fafafa;\n  color: #8c8c8c;\n}\n.maru-button-secondary-default-light:hover {\n  box-shadow: 0 0 6px;\n}\n.maru-button-secondary-default-light:focus, .maru-button-secondary-default-light:active {\n  box-shadow: none;\n  background-color: #8c8c8c;\n  color: white;\n}\n.maru-button-secondary-outline {\n  background-color: white;\n  color: #8c8c8c;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-button-secondary-outline:hover {\n  box-shadow: 0 0 6px #e4e4e4;\n}\n.maru-button-secondary-outline:focus, .maru-button-secondary-outline:active {\n  box-shadow: none;\n  background-color: #e4e4e4;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-button-secondary-text {\n  background-color: white;\n  color: #8c8c8c;\n}\n.maru-button-secondary-color-on-focus {\n  background-color: white;\n  color: #bdbdbd;\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n  padding: 5px 8px !important;\n  gap: 4px;\n}\n.maru-button-secondary-color-on-focus:hover {\n  box-shadow: 0px 0px 6px 0px #e4e4e4;\n}\n.maru-button-secondary-color-on-focus:focus, .maru-button-secondary-color-on-focus:active {\n  background-color: #e4e4e4;\n  color: #5c5c5c;\n  box-shadow: 0 0 0 1px #5c5c5c inset;\n}\n.maru-button-positive-default {\n  background-color: #58c5a6;\n  color: white;\n}\n.maru-button-positive-default:hover {\n  box-shadow: 0 0 6px #58c5a6;\n}\n.maru-button-positive-default:focus, .maru-button-positive-default:active {\n  box-shadow: none;\n  color: #58c5a6;\n}\n.maru-button-positive-default-light {\n  color: #58c5a6;\n}\n.maru-button-positive-default-light:hover {\n  box-shadow: 0 0 6px rgba(88, 196, 166, 0.5019607843);\n}\n.maru-button-positive-default-light:focus, .maru-button-positive-default-light:active {\n  box-shadow: none;\n  background-color: #58c5a6;\n  color: white;\n}\n.maru-button-positive-outline {\n  background-color: white;\n  color: #58c5a6;\n  box-shadow: 0 0 0 1px #58c5a6 inset;\n}\n.maru-button-positive-outline:hover {\n  box-shadow: 0 0 6px #def3ed;\n}\n.maru-button-positive-outline:focus, .maru-button-positive-outline:active {\n  box-shadow: none;\n  background-color: #def3ed;\n  box-shadow: 0 0 0 1px #58c5a6 inset;\n}\n.maru-button-positive-text {\n  background-color: white;\n  color: #58c5a6;\n}\n.maru-button-positive-color-on-focus {\n  background-color: white;\n  color: #bdbdbd;\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n  padding: 5px 8px !important;\n  gap: 4px;\n}\n.maru-button-positive-color-on-focus:hover {\n  box-shadow: 0px 0px 6px 0px #e4e4e4;\n}\n.maru-button-positive-color-on-focus:focus, .maru-button-positive-color-on-focus:active {\n  color: #58c5a6;\n  box-shadow: 0 0 0 1px #58c5a6 inset;\n}\n.maru-button-warning-default {\n  background-color: #ffb020;\n  color: white;\n}\n.maru-button-warning-default:hover {\n  box-shadow: 0 0 6px #ffb020;\n}\n.maru-button-warning-default:focus, .maru-button-warning-default:active {\n  box-shadow: none;\n  background-color: #ffefd2;\n  color: #ffb020;\n}\n.maru-button-warning-default-light {\n  background-color: #fff7e9;\n  color: #ffb020;\n}\n.maru-button-warning-default-light:hover {\n  box-shadow: 0 0 6px rgba(255, 177, 32, 0.5019607843);\n}\n.maru-button-warning-default-light:focus, .maru-button-warning-default-light:active {\n  box-shadow: none;\n  background-color: #ffb020;\n  color: white;\n}\n.maru-button-warning-outline {\n  background-color: white;\n  color: #ffb020;\n  box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-button-warning-outline:hover {\n  box-shadow: 0 0 6px #ffefd2;\n}\n.maru-button-warning-outline:focus, .maru-button-warning-outline:active {\n  box-shadow: none;\n  background-color: #ffefd2;\n  box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-button-warning-text {\n  background-color: white;\n  color: #ffb020;\n}\n.maru-button-warning-color-on-focus {\n  background-color: white;\n  color: #bdbdbd;\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n  padding: 5px 8px !important;\n  gap: 4px;\n}\n.maru-button-warning-color-on-focus:hover {\n  box-shadow: 0px 0px 6px 0px #e4e4e4;\n}\n.maru-button-warning-color-on-focus:focus, .maru-button-warning-color-on-focus:active {\n  background-color: #ffefd2;\n  color: #ffb020;\n  box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-button-danger-default {\n  background-color: #e53e3e;\n  color: white;\n}\n.maru-button-danger-default:hover {\n  box-shadow: 0 0 6px #e53e3e;\n}\n.maru-button-danger-default:focus, .maru-button-danger-default:active {\n  box-shadow: none;\n  background-color: #fcecec;\n  color: #e53e3e;\n}\n.maru-button-danger-default-light {\n  background-color: #fcecec;\n  color: #e53e3e;\n}\n.maru-button-danger-default-light:hover {\n  box-shadow: 0 0 6px rgba(229, 62, 62, 0.5019607843);\n}\n.maru-button-danger-default-light:focus, .maru-button-danger-default-light:active {\n  box-shadow: none;\n  background-color: #e53e3e;\n  color: white;\n}\n.maru-button-danger-outline {\n  background-color: white;\n  color: #e53e3e;\n  box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-button-danger-outline:hover {\n  box-shadow: 0 0 6px #fad8d8;\n}\n.maru-button-danger-outline:focus, .maru-button-danger-outline:active {\n  box-shadow: none;\n  background-color: #fad8d8;\n  box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-button-danger-text {\n  background-color: white;\n  color: #e53e3e;\n}\n.maru-button-danger-color-on-focus {\n  background-color: white;\n  color: #bdbdbd;\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n  padding: 5px 8px !important;\n  gap: 4px;\n}\n.maru-button-danger-color-on-focus:hover {\n  box-shadow: 0px 0px 6px 0px #e4e4e4;\n}\n.maru-button-danger-color-on-focus:focus, .maru-button-danger-color-on-focus:active {\n  background-color: #fcecec;\n  color: #e53e3e;\n  box-shadow: 0 0 0 1px #e53e3e inset;\n}\n\n.maru-button-with-start-icon.size-normal,\n.maru-button-with-end-icon.size-normal {\n  padding: 8px 14px;\n}\n.maru-button-with-start-icon.size-small,\n.maru-button-with-end-icon.size-small {\n  padding: 6px 12px;\n}\n.maru-button-with-start-icon.maru-button-primary-text:hover, .maru-button-with-start-icon.maru-button-primary-text:focus, .maru-button-with-start-icon.maru-button-primary-text:active,\n.maru-button-with-end-icon.maru-button-primary-text:hover,\n.maru-button-with-end-icon.maru-button-primary-text:focus,\n.maru-button-with-end-icon.maru-button-primary-text:active {\n  background-color: var(--p-10);\n  color: var(--p);\n}\n.maru-button-with-start-icon.maru-button-secondary-default-light:hover, .maru-button-with-start-icon.maru-button-secondary-default-light:focus, .maru-button-with-start-icon.maru-button-secondary-default-light:active,\n.maru-button-with-end-icon.maru-button-secondary-default-light:hover,\n.maru-button-with-end-icon.maru-button-secondary-default-light:focus,\n.maru-button-with-end-icon.maru-button-secondary-default-light:active {\n  box-shadow: none;\n  background-color: #fafafa;\n  color: #8c8c8c;\n}\n\n.maru-button-only-icon {\n  padding: 0;\n  justify-content: center;\n  background-color: transparent;\n}\n.maru-button-only-icon:hover, .maru-button-only-icon:focus, .maru-button-only-icon:active {\n  box-shadow: none;\n  background-color: transparent;\n}";
+var css_248z$a = ".size-small {\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 600;\n}\n\n.size-normal {\n  padding: 8px 10px;\n  border-radius: 8px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 600;\n}\n\n.size-large {\n  padding: 4px 12px;\n  border-radius: 8px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 600;\n}\n\n.maru-button {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  border: 0;\n  cursor: pointer;\n  gap: 8px;\n}\n.maru-button:focus-within {\n  outline: none;\n}\n.maru-button:disabled {\n  cursor: default;\n  opacity: 0.5;\n  pointer-events: none;\n}\n.maru-button-primary-default {\n  background-color: var(--p);\n  color: white;\n}\n.maru-button-primary-default:hover {\n  box-shadow: 0 0 6px var(--p);\n}\n.maru-button-primary-default:focus-visible, .maru-button-primary-default:active {\n  box-shadow: none;\n  background-color: var(--p-10);\n  color: var(--p);\n}\n.maru-button-primary-default-light {\n  background-color: var(--p-10);\n  color: var(--p);\n}\n.maru-button-primary-default-light:hover {\n  box-shadow: 0 0 6px var(--p-50-per);\n}\n.maru-button-primary-default-light:focus-visible, .maru-button-primary-default-light:active {\n  box-shadow: none;\n  background-color: var(--p);\n  color: white;\n}\n.maru-button-primary-outline {\n  background-color: white;\n  color: var(--p);\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-outline:hover {\n  box-shadow: 0 0 6px var(--p-20);\n}\n.maru-button-primary-outline:focus-visible, .maru-button-primary-outline:active {\n  box-shadow: none;\n  background-color: var(--p-20);\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-outline:hover {\n  box-shadow: 0 0 6px var(--p-50-per);\n}\n.maru-button-primary-outline:focus-visible, .maru-button-primary-outline:active {\n  box-shadow: none;\n  background-color: var(--p-10);\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-primary-text {\n  background-color: white;\n  color: var(--p);\n}\n.maru-button-primary-color-on-focus {\n  background-color: white;\n  color: #bdbdbd;\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n  padding: 5px 8px !important;\n  gap: 4px;\n}\n.maru-button-primary-color-on-focus:hover {\n  box-shadow: 0px 0px 6px 0px #e4e4e4;\n}\n.maru-button-primary-color-on-focus:focus-visible, .maru-button-primary-color-on-focus:active {\n  background-color: var(--p-10);\n  color: var(--p);\n  box-shadow: 0 0 0 1px var(--p) inset;\n}\n.maru-button-secondary-default {\n  background-color: #8c8c8c;\n  color: white;\n  background-color: #e4e4e4;\n  color: #8c8c8c;\n}\n.maru-button-secondary-default:hover {\n  box-shadow: 0 0 6px #8c8c8c;\n}\n.maru-button-secondary-default:focus-visible, .maru-button-secondary-default:active {\n  box-shadow: none;\n  background-color: #fafafa;\n  color: #8c8c8c;\n}\n.maru-button-secondary-default:hover {\n  box-shadow: 0 0 6px #e4e4e4;\n}\n.maru-button-secondary-default:focus-visible, .maru-button-secondary-default:active {\n  box-shadow: none;\n  background-color: #8c8c8c;\n  color: white;\n}\n.maru-button-secondary-default-light {\n  background-color: #fafafa;\n  color: #8c8c8c;\n}\n.maru-button-secondary-default-light:hover {\n  box-shadow: 0 0 6px;\n}\n.maru-button-secondary-default-light:focus-visible, .maru-button-secondary-default-light:active {\n  box-shadow: none;\n  background-color: #8c8c8c;\n  color: white;\n}\n.maru-button-secondary-outline {\n  background-color: white;\n  color: #8c8c8c;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-button-secondary-outline:hover {\n  box-shadow: 0 0 6px #e4e4e4;\n}\n.maru-button-secondary-outline:focus-visible, .maru-button-secondary-outline:active {\n  box-shadow: none;\n  background-color: #e4e4e4;\n  box-shadow: 0 0 0 1px #8c8c8c inset;\n}\n.maru-button-secondary-text {\n  background-color: white;\n  color: #8c8c8c;\n}\n.maru-button-secondary-color-on-focus {\n  background-color: white;\n  color: #bdbdbd;\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n  padding: 5px 8px !important;\n  gap: 4px;\n}\n.maru-button-secondary-color-on-focus:hover {\n  box-shadow: 0px 0px 6px 0px #e4e4e4;\n}\n.maru-button-secondary-color-on-focus:focus-visible, .maru-button-secondary-color-on-focus:active {\n  background-color: #e4e4e4;\n  color: #5c5c5c;\n  box-shadow: 0 0 0 1px #5c5c5c inset;\n}\n.maru-button-positive-default {\n  background-color: #58c5a6;\n  color: white;\n}\n.maru-button-positive-default:hover {\n  box-shadow: 0 0 6px #58c5a6;\n}\n.maru-button-positive-default:focus-visible, .maru-button-positive-default:active {\n  box-shadow: none;\n  color: #58c5a6;\n}\n.maru-button-positive-default-light {\n  color: #58c5a6;\n}\n.maru-button-positive-default-light:hover {\n  box-shadow: 0 0 6px rgba(88, 196, 166, 0.5019607843);\n}\n.maru-button-positive-default-light:focus-visible, .maru-button-positive-default-light:active {\n  box-shadow: none;\n  background-color: #58c5a6;\n  color: white;\n}\n.maru-button-positive-outline {\n  background-color: white;\n  color: #58c5a6;\n  box-shadow: 0 0 0 1px #58c5a6 inset;\n}\n.maru-button-positive-outline:hover {\n  box-shadow: 0 0 6px #def3ed;\n}\n.maru-button-positive-outline:focus-visible, .maru-button-positive-outline:active {\n  box-shadow: none;\n  background-color: #def3ed;\n  box-shadow: 0 0 0 1px #58c5a6 inset;\n}\n.maru-button-positive-text {\n  background-color: white;\n  color: #58c5a6;\n}\n.maru-button-positive-color-on-focus {\n  background-color: white;\n  color: #bdbdbd;\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n  padding: 5px 8px !important;\n  gap: 4px;\n}\n.maru-button-positive-color-on-focus:hover {\n  box-shadow: 0px 0px 6px 0px #e4e4e4;\n}\n.maru-button-positive-color-on-focus:focus-visible, .maru-button-positive-color-on-focus:active {\n  color: #58c5a6;\n  box-shadow: 0 0 0 1px #58c5a6 inset;\n}\n.maru-button-warning-default {\n  background-color: #ffb020;\n  color: white;\n}\n.maru-button-warning-default:hover {\n  box-shadow: 0 0 6px #ffb020;\n}\n.maru-button-warning-default:focus-visible, .maru-button-warning-default:active {\n  box-shadow: none;\n  background-color: #ffefd2;\n  color: #ffb020;\n}\n.maru-button-warning-default-light {\n  background-color: #fff7e9;\n  color: #ffb020;\n}\n.maru-button-warning-default-light:hover {\n  box-shadow: 0 0 6px rgba(255, 177, 32, 0.5019607843);\n}\n.maru-button-warning-default-light:focus-visible, .maru-button-warning-default-light:active {\n  box-shadow: none;\n  background-color: #ffb020;\n  color: white;\n}\n.maru-button-warning-outline {\n  background-color: white;\n  color: #ffb020;\n  box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-button-warning-outline:hover {\n  box-shadow: 0 0 6px #ffefd2;\n}\n.maru-button-warning-outline:focus-visible, .maru-button-warning-outline:active {\n  box-shadow: none;\n  background-color: #ffefd2;\n  box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-button-warning-text {\n  background-color: white;\n  color: #ffb020;\n}\n.maru-button-warning-color-on-focus {\n  background-color: white;\n  color: #bdbdbd;\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n  padding: 5px 8px !important;\n  gap: 4px;\n}\n.maru-button-warning-color-on-focus:hover {\n  box-shadow: 0px 0px 6px 0px #e4e4e4;\n}\n.maru-button-warning-color-on-focus:focus-visible, .maru-button-warning-color-on-focus:active {\n  background-color: #ffefd2;\n  color: #ffb020;\n  box-shadow: 0 0 0 1px #ffb020 inset;\n}\n.maru-button-danger-default {\n  background-color: #e53e3e;\n  color: white;\n}\n.maru-button-danger-default:hover {\n  box-shadow: 0 0 6px #e53e3e;\n}\n.maru-button-danger-default:focus-visible, .maru-button-danger-default:active {\n  box-shadow: none;\n  background-color: #fcecec;\n  color: #e53e3e;\n}\n.maru-button-danger-default-light {\n  background-color: #fcecec;\n  color: #e53e3e;\n}\n.maru-button-danger-default-light:hover {\n  box-shadow: 0 0 6px rgba(229, 62, 62, 0.5019607843);\n}\n.maru-button-danger-default-light:focus-visible, .maru-button-danger-default-light:active {\n  box-shadow: none;\n  background-color: #e53e3e;\n  color: white;\n}\n.maru-button-danger-outline {\n  background-color: white;\n  color: #e53e3e;\n  box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-button-danger-outline:hover {\n  box-shadow: 0 0 6px #fad8d8;\n}\n.maru-button-danger-outline:focus-visible, .maru-button-danger-outline:active {\n  box-shadow: none;\n  background-color: #fad8d8;\n  box-shadow: 0 0 0 1px #e53e3e inset;\n}\n.maru-button-danger-text {\n  background-color: white;\n  color: #e53e3e;\n}\n.maru-button-danger-color-on-focus {\n  background-color: white;\n  color: #bdbdbd;\n  box-shadow: 0 0 0 1px #bdbdbd inset;\n  padding: 5px 8px !important;\n  gap: 4px;\n}\n.maru-button-danger-color-on-focus:hover {\n  box-shadow: 0px 0px 6px 0px #e4e4e4;\n}\n.maru-button-danger-color-on-focus:focus-visible, .maru-button-danger-color-on-focus:active {\n  background-color: #fcecec;\n  color: #e53e3e;\n  box-shadow: 0 0 0 1px #e53e3e inset;\n}\n\n.maru-button-with-start-icon.size-normal,\n.maru-button-with-end-icon.size-normal {\n  padding: 8px 14px;\n}\n.maru-button-with-start-icon.size-small,\n.maru-button-with-end-icon.size-small {\n  padding: 6px 12px;\n}\n.maru-button-with-start-icon.maru-button-primary-text:hover, .maru-button-with-start-icon.maru-button-primary-text:focus-visible, .maru-button-with-start-icon.maru-button-primary-text:active,\n.maru-button-with-end-icon.maru-button-primary-text:hover,\n.maru-button-with-end-icon.maru-button-primary-text:focus-visible,\n.maru-button-with-end-icon.maru-button-primary-text:active {\n  background-color: var(--p-10);\n  color: var(--p);\n}\n.maru-button-with-start-icon.maru-button-secondary-default-light:hover, .maru-button-with-start-icon.maru-button-secondary-default-light:focus-visible, .maru-button-with-start-icon.maru-button-secondary-default-light:active,\n.maru-button-with-end-icon.maru-button-secondary-default-light:hover,\n.maru-button-with-end-icon.maru-button-secondary-default-light:focus-visible,\n.maru-button-with-end-icon.maru-button-secondary-default-light:active {\n  box-shadow: none;\n  background-color: #fafafa;\n  color: #8c8c8c;\n}\n\n.maru-button-only-icon {\n  padding: 0;\n  justify-content: center;\n  background-color: transparent;\n}\n.maru-button-only-icon:hover, .maru-button-only-icon:focus-visible, .maru-button-only-icon:active {\n  box-shadow: none;\n  background-color: transparent;\n}";
 styleInject(css_248z$a);
 
 var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
@@ -2891,15 +2886,14 @@ var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
     mouseState = _e[0],
     _f = _e[1],
     setIsHover = _f.setIsHover,
-    setIsActive = _f.setIsActive,
-    setIsFocused = _f.setIsFocused;
+    setIsActive = _f.setIsActive;
   var getIconColor = function getIconColor(icon) {
     var _a;
-    if (color === 'primary' && variant === 'default' && (mouseState.isActive || mouseState.isFocused)) {
+    if (color === 'primary' && variant === 'default' && mouseState.isActive) {
       return 'primary';
     }
     if (color === 'primary' && !children) {
-      if (mouseState.isActive || mouseState.isFocused) {
+      if (mouseState.isActive) {
         return 'primary';
       }
       if (mouseState.isHover) {
@@ -2907,7 +2901,7 @@ var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
       }
     }
     if (color === 'danger' && !children) {
-      if (mouseState.isActive || mouseState.isFocused) {
+      if (mouseState.isActive) {
         return 'danger';
       }
       if (mouseState.isHover) {
@@ -2937,12 +2931,6 @@ var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
     },
     onMouseUp: function onMouseUp() {
       return setIsActive(false);
-    },
-    onFocus: function onFocus() {
-      return setIsFocused(true);
-    },
-    onBlur: function onBlur() {
-      return setIsFocused(false);
     }
   }, {
     children: [startIcon && jsx(Icon, {
@@ -3092,60 +3080,54 @@ function Chip(_a) {
   }));
 }
 
-var css_248z$7 = ".maru-input-wrapper .maru-input-label {\n  margin-bottom: 8px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 600;\n}\n.maru-input-wrapper .maru-input {\n  border: 1px solid #e4e4e4;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  height: 37px;\n  padding: 8px 10px 8px 14px;\n  border-radius: 8px;\n}\n.maru-input-wrapper .maru-input:focus-visible, .maru-input-wrapper .maru-input:focus-within {\n  border: 2px solid #e4e4e4;\n  background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input.errored {\n  border: 2px solid #e53e3e;\n}\n.maru-input-wrapper .maru-input.errored:focus-visible, .maru-input-wrapper .maru-input.errored:focus-within {\n  border: 2px solid #e4e4e4;\n  background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input:hover {\n  border: 2px solid #e4e4e4;\n  background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input > input {\n  width: 100%;\n  border: unset;\n  outline: unset;\n  background-color: transparent;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n  color: #5c5c5c;\n}\n.maru-input-wrapper .maru-input > input::-webkit-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input > input::-moz-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input > input:-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input > input::-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input > input::placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input-start-node {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  margin-right: 10px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper > button {\n  padding: unset;\n  margin: unset;\n  border: unset;\n  background-color: unset;\n  cursor: pointer;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper > button:last-of-type {\n  margin-left: 0.25em;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper .maru-input-end-icon-wrapper {\n  width: 16px;\n  height: 16px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper .maru-input-end-node {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  margin-left: 10px;\n}\n.maru-input-wrapper .maru-input-footer {\n  display: block;\n  margin-top: 4px;\n}\n.maru-input-wrapper .maru-input-footer > span {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 500;\n  color: #e53e3e;\n}\n.maru-input-wrapper.maru-input-disabled input {\n  opacity: 0.5;\n  pointer-events: none;\n}\n.maru-input-wrapper.maru-input-disabled .maru-input-default:hover,\n.maru-input-wrapper.maru-input-disabled .maru-input-default:focus-within,\n.maru-input-wrapper.maru-input-disabled .maru-input-underline:hover,\n.maru-input-wrapper.maru-input-disabled .maru-input-underline:focus-within {\n  border-color: transparent;\n  outline: transparent;\n}";
+var css_248z$7 = ".maru-input-wrapper.disabled input {\n  opacity: 0.5;\n  pointer-events: none;\n}\n.maru-input-wrapper.disabled .maru-input-default:hover,\n.maru-input-wrapper.disabled .maru-input-default:focus-within,\n.maru-input-wrapper.disabled .maru-input-underline:hover,\n.maru-input-wrapper.disabled .maru-input-underline:focus-within {\n  border-color: transparent;\n  outline: transparent;\n}\n.maru-input-wrapper .maru-input-label {\n  margin-bottom: 8px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 600;\n}\n.maru-input-wrapper .maru-input {\n  border: 1px solid #e4e4e4;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  height: 37px;\n  padding: 8px 10px 8px 14px;\n  border-radius: 8px;\n}\n.maru-input-wrapper .maru-input:focus-visible, .maru-input-wrapper .maru-input:focus-within {\n  border: 2px solid #e4e4e4;\n  background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input.errored {\n  border: 2px solid #e53e3e;\n}\n.maru-input-wrapper .maru-input.errored:focus-visible, .maru-input-wrapper .maru-input.errored:focus-within {\n  border: 2px solid #e4e4e4;\n  background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input:hover {\n  border: 2px solid #e4e4e4;\n  background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input > input {\n  width: 100%;\n  border: unset;\n  outline: unset;\n  background-color: transparent;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n  color: #5c5c5c;\n}\n.maru-input-wrapper .maru-input > input::-webkit-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input > input::-moz-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input > input:-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input > input::-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input > input::placeholder {\n  color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input-start-node {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  margin-right: 10px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper > button {\n  padding: unset;\n  margin: unset;\n  border: unset;\n  background-color: unset;\n  cursor: pointer;\n  width: 16px;\n  height: 16px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper > button:last-of-type {\n  margin-left: 10px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper .maru-input-end-node {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  margin-left: 10px;\n}\n.maru-input-wrapper .maru-input-footer {\n  display: block;\n  margin-top: 4px;\n}\n.maru-input-wrapper .maru-input-footer > span {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 500;\n  color: #e53e3e;\n}";
 styleInject(css_248z$7);
 
 var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
-  var errorMessage = _a.errorMessage,
+  var onClear = _a.onClear,
+    errorMessage = _a.errorMessage,
     label = _a.label,
-    onClear = _a.onClear,
     _b = _a.type,
     type = _b === void 0 ? 'text' : _b,
     wrapperRef = _a.wrapperRef,
     startNode = _a.startNode,
     endNode = _a.endNode,
-    props = __rest(_a, ["errorMessage", "label", "onClear", "type", "wrapperRef", "startNode", "endNode"]);
+    props = __rest(_a, ["onClear", "errorMessage", "label", "type", "wrapperRef", "startNode", "endNode"]);
   var _c = useState(true),
-    isPwdInVisible = _c[0],
-    setIsPwdInVisible = _c[1];
+    pwdVision = _c[0],
+    setPwdVision = _c[1];
   var _d = useState(false),
     showClearButton = _d[0],
     setShowClearButton = _d[1];
   var combineRef = useCombineRef(inputRef);
   var hashId = uuidv4(4);
-  var currType = type !== 'password' ? 'text' : !isPwdInVisible ? 'text' : 'password';
-  var setShowClearButtnWithClearProp = function setShowClearButtnWithClearProp(bool) {
-    if (onClear) {
-      setShowClearButton(bool);
-    }
-  };
   useEffect(function () {
     return function () {
-      setIsPwdInVisible(false);
-      setShowClearButtnWithClearProp(false);
+      setPwdVision(false);
+      setShowClearButton(false);
     };
   }, []);
   useEffect(function () {
     if (props.defaultValue) {
-      setShowClearButtnWithClearProp(true);
+      setShowClearButton(true);
     }
   }, [props.defaultValue]);
   useEffect(function () {
     var _a;
     if ((_a = combineRef.current) === null || _a === void 0 ? void 0 : _a.value) {
-      setShowClearButtnWithClearProp(true);
+      setShowClearButton(true);
     }
   }, [combineRef.current]);
   var handleInputChange = function handleInputChange(e) {
     var _a, _b;
-    setShowClearButtnWithClearProp(true);
-    var currValue = e.currentTarget.value;
-    if (!currValue) {
-      setShowClearButtnWithClearProp(false);
+    setShowClearButton(true);
+    var curValue = e.currentTarget.value;
+    if (!curValue) {
+      setShowClearButton(false);
     }
-    if (type === 'number' && !!currValue.at(-1)) {
-      if (!/[0-9,-]/.test(currValue.at(-1)) || /^-*/.test(currValue) && (((_a = currValue.match(/-/g)) === null || _a === void 0 ? void 0 : _a.length) || 0) > 1) {
-        e.currentTarget.value = currValue.slice(0, currValue.length - 1);
+    if (type === 'number' && !!curValue.at(-1)) {
+      if (!/[0-9,-]/.test(curValue.at(-1)) || /^-*/.test(curValue) && (((_a = curValue.match(/-/g)) === null || _a === void 0 ? void 0 : _a.length) || 0) > 1) {
+        e.currentTarget.value = curValue.slice(0, curValue.length - 1);
       }
     }
     (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, e);
@@ -3153,88 +3135,23 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
   var handleInputBlur = function handleInputBlur(e) {
     var _a;
     if (type === 'number') {
-      var currValue = e.currentTarget.value;
-      e.currentTarget.value = "".concat(currValue != null && currValue !== '' ? +currValue : '');
+      var curValue = e.currentTarget.value;
+      e.currentTarget.value = "".concat(curValue != null && curValue !== '' ? +curValue : '');
     }
     (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
   };
-  var handlePwdVisibleClick = function handlePwdVisibleClick(isVisible) {
-    return function () {
-      setIsPwdInVisible(isVisible);
-    };
-  };
-  var handleQueryClearClick = function handleQueryClearClick() {
+  var handleClearClick = function handleClearClick() {
     if (combineRef.current) {
-      setShowClearButtnWithClearProp(false);
+      setShowClearButton(false);
       combineRef.current.value = '';
       combineRef.current.focus();
     }
-    onClear === null || onClear === void 0 ? void 0 : onClear();
-  };
-  var EndNode = function EndNode() {
-    var passwordElement = null;
-    var clearElement = null;
-    var nodeElement = null;
-    if (type === 'password') {
-      if (!isPwdInVisible) {
-        passwordElement = jsx("button", __assign({
-          type: "button",
-          onClick: handlePwdVisibleClick(true),
-          className: "maru-input-end-icon-wrapper",
-          tabIndex: -1
-        }, {
-          children: jsx(Icon, {
-            name: ICONS.FiEyeOffThin,
-            color: "#bdbdbd",
-            size: 16
-          })
-        }));
-      } else {
-        passwordElement = jsx("button", __assign({
-          type: "button",
-          onClick: handlePwdVisibleClick(false),
-          className: "maru-input-end-icon-wrapper",
-          tabIndex: -1
-        }, {
-          children: jsx(Icon, {
-            name: ICONS.FiEyeThin,
-            color: "#bdbdbd",
-            size: 16
-          })
-        }));
-      }
-    }
-    if (endNode) {
-      nodeElement = jsx("span", __assign({
-        className: "maru-input-end-node"
-      }, {
-        children: endNode
-      }));
-    }
-    if (onClear && showClearButton) {
-      clearElement = jsx("button", __assign({
-        type: "button",
-        onClick: handleQueryClearClick,
-        className: "maru-input-end-icon-wrapper",
-        tabIndex: -1
-      }, {
-        children: jsx(Icon, {
-          name: ICONS.XSmallThin,
-          color: "#bdbdbd",
-          size: 16
-        })
-      }));
-    }
-    return jsxs("div", __assign({
-      className: "maru-input-end-node-wrapper"
-    }, {
-      children: [!props.disabled && passwordElement, !clearElement ? nodeElement : null, !props.disabled && clearElement]
-    }));
+    onClear();
   };
   return jsxs("div", __assign({
     ref: wrapperRef,
     className: classNames('maru-input-wrapper', props.className, {
-      'maru-input-disabled': props.disabled
+      disabled: props.disabled
     })
   }, {
     children: [label && jsx("div", __assign({
@@ -3250,17 +3167,49 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
         errored: errorMessage
       })
     }, {
-      children: [startNode && jsx("span", __assign({
+      children: [startNode && jsx("div", __assign({
         className: "maru-input-start-node"
       }, {
         children: startNode
       })), jsx("input", __assign({}, props, {
         id: "maru-input-".concat(hashId),
         ref: combineRef,
-        type: currType,
+        type: type === 'password' && pwdVision ? 'password' : 'text',
         onChange: handleInputChange,
         onBlur: handleInputBlur
-      })), EndNode()]
+      })), jsxs("div", __assign({
+        className: "maru-input-end-node-wrapper"
+      }, {
+        children: [type === 'password' && !props.disabled && jsx("button", __assign({
+          type: "button",
+          onClick: function onClick() {
+            return setPwdVision(function (prev) {
+              return !prev;
+            });
+          },
+          tabIndex: -1
+        }, {
+          children: jsx(Icon, {
+            name: pwdVision ? ICONS.FiEyeThin : ICONS.FiEyeOffThin,
+            color: "#bdbdbd",
+            size: 16
+          })
+        })), endNode && jsx("div", __assign({
+          className: "maru-input-end-node"
+        }, {
+          children: endNode
+        })), showClearButton && !props.disabled && jsx("button", __assign({
+          type: "button",
+          onClick: handleClearClick,
+          tabIndex: -1
+        }, {
+          children: jsx(Icon, {
+            name: ICONS.XSmallThin,
+            color: "#bdbdbd",
+            size: 16
+          })
+        }))]
+      }))]
     })), errorMessage && jsx("div", __assign({
       className: "maru-input-footer"
     }, {
@@ -3273,7 +3222,6 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
 Input.defaultProps = {
   errorMessage: undefined,
   label: undefined,
-  onClear: undefined,
   type: 'text',
   wrapperRef: undefined,
   startNode: undefined,
@@ -5298,19 +5246,19 @@ function Toggle(_a) {
   });
 }
 
-var css_248z$3 = ".maru-tooltip {\n  z-index: 1612;\n  border-radius: 5px;\n  padding: 2px 4px;\n  display: none;\n}\n.maru-tooltip[data-open=true] {\n  display: block;\n}\n.maru-tooltip[data-open=false] {\n  display: none;\n}\n\n.maru-tooltip-default {\n  background-color: rgba(92, 92, 92, 0.5019607843);\n}\n.maru-tooltip-default,\n.maru-tooltip-default span,\n.maru-tooltip-default p,\n.maru-tooltip-default pre {\n  color: white;\n  white-space: pre-wrap;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n}\n\n.maru-tooltip-danger {\n  background-color: rgba(229, 62, 62, 0.1019607843);\n}\n.maru-tooltip-danger,\n.maru-tooltip-danger span,\n.maru-tooltip-danger p,\n.maru-tooltip-danger pre {\n  color: #e53e3e;\n  white-space: pre-wrap;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n}";
+var css_248z$3 = ".maru-tooltip-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n\n.maru-tooltip {\n  z-index: 1612;\n  border-radius: 5px;\n  padding: 2px 4px;\n  display: none;\n}\n.maru-tooltip[data-open=true] {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-tooltip[data-open=false] {\n  display: none;\n}\n.maru-tooltip.maru-tooltip-default {\n  background-color: rgba(92, 92, 92, 0.5019607843);\n}\n.maru-tooltip.maru-tooltip-default,\n.maru-tooltip.maru-tooltip-default span,\n.maru-tooltip.maru-tooltip-default p,\n.maru-tooltip.maru-tooltip-default pre {\n  color: white;\n  white-space: pre-wrap;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n}\n.maru-tooltip.maru-tooltip-error {\n  background-color: rgba(229, 62, 62, 0.1019607843);\n}\n.maru-tooltip.maru-tooltip-error .maru-tooltip-error-icon-wrapper {\n  width: 16px;\n  height: 16px;\n  margin-right: 4px;\n  transform: translateY(-1px);\n}\n.maru-tooltip.maru-tooltip-error,\n.maru-tooltip.maru-tooltip-error span,\n.maru-tooltip.maru-tooltip-error p,\n.maru-tooltip.maru-tooltip-error pre {\n  color: #e53e3e;\n  white-space: pre-wrap;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n}";
 styleInject(css_248z$3);
 
 function Tooltip(_a) {
   var children = _a.children,
     content = _a.content,
     className = _a.className,
-    _b = _a.color,
-    color = _b === void 0 ? 'default' : _b,
-    _c = _a.direction,
-    direction = _c === void 0 ? 'right' : _c,
-    _d = _a.portal,
-    portal = _d === void 0 ? false : _d;
+    _b = _a.direction,
+    direction = _b === void 0 ? 'bottom-start' : _b,
+    _c = _a.portal,
+    portal = _c === void 0 ? false : _c,
+    _d = _a.variant,
+    variant = _d === void 0 ? 'default' : _d;
   var _e = useState(false),
     open = _e[0],
     setOpen = _e[1];
@@ -5349,17 +5297,25 @@ function Tooltip(_a) {
     }
   }, [open]);
   var Tootip = useMemo(function () {
-    return jsx("div", __assign({
-      className: classNames('maru-tooltip', "maru-tooltip-".concat(color)),
+    return jsxs("div", __assign({
+      className: classNames('maru-tooltip', "maru-tooltip-".concat(variant)),
       ref: tooltipRef,
       role: "tooltip",
       "data-open": open
     }, {
-      children: content
+      children: [variant === 'error' && jsx("div", __assign({
+        className: "maru-tooltip-error-icon-wrapper"
+      }, {
+        children: jsx(Icon, {
+          name: ICONS.AlertCircleThin,
+          size: 16,
+          color: "danger"
+        })
+      })), content]
     }));
   }, [open]);
   return jsxs("div", __assign({
-    className: className,
+    className: classNames('maru-tooltip-wrapper', className),
     ref: wrapperRef,
     onMouseOver: function onMouseOver() {
       return setOpen(true);
@@ -5657,7 +5613,6 @@ function DropdownMenu(_a) {
     filteredData = _a.filteredData,
     width = _a.width,
     height = _a.height,
-    noMessage = _a.noMessage,
     CustomMenuItem = _a.customMenuItem,
     onSelect = _a.onSelect,
     closeMenu = _a.closeMenu;
@@ -5733,7 +5688,7 @@ function DropdownMenu(_a) {
           maxHeight: height ? "".concat(height, "px") : 'auto'
         }
       }, {
-        children: filteredData.length > 0 ? filteredData.map(function (item) {
+        children: filteredData === null || filteredData === void 0 ? void 0 : filteredData.map(function (item) {
           return jsx("button", __assign({
             type: "button",
             className: classNames('maru-dropdown-menu-item', {
@@ -5764,19 +5719,13 @@ function DropdownMenu(_a) {
               }
             })
           }), "maru-dropdown-menu-item-".concat(item[idKey]));
-        }) : jsx("div", __assign({
-          className: "maru-dropdown-menu-no-data"
-        }, {
-          children: jsx("span", {
-            children: noMessage
-          })
-        }))
+        })
       }))
     }))
   }));
 }
 
-var css_248z$2 = ".maru-dropdown .maru-dropdown-label {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 600;\n  color: #5c5c5c;\n  display: block;\n  margin-bottom: 4px;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper {\n  width: 100%;\n  border-radius: 8px;\n  border: 1px solid #e4e4e4;\n  cursor: pointer;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover {\n  border: 1px solid var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-input > input {\n  color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within {\n  border: 1px solid var(--p);\n  outline: none;\n  background-color: var(--p-10);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-input > input {\n  color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover {\n  border: 1px solid #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-input > input {\n  color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within {\n  border: 1px solid #8c8c8c;\n  outline: none;\n  background-color: #fafafa;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-input > input {\n  color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover {\n  border: 1px solid #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-input > input {\n  color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within {\n  border: 1px solid #58c5a6;\n  outline: none;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-input > input {\n  color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover {\n  border: 1px solid #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-input > input {\n  color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within {\n  border: 1px solid #ffb020;\n  outline: none;\n  background-color: #fff7e9;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-input > input {\n  color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover {\n  border: 1px solid #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-input > input {\n  color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within {\n  border: 1px solid #e53e3e;\n  outline: none;\n  background-color: #fcecec;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-input > input {\n  color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.inline-label-wrapper .maru-dropdown-button {\n  padding: 2px 10px 2px 14px;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .inline-label {\n  display: block;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 10px;\n  letter-spacing: -0.4px;\n  font-weight: 500;\n  color: #bdbdbd;\n  padding: 2px 10px 0 14px;\n  transform: translateY(3px);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n  width: 100%;\n  height: 37px;\n  border: unset;\n  border-radius: 8px;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 8px 10px 8px 14px;\n  color: #5c5c5c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button .maru-dropdown-button-contents {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button .maru-dropdown-button-contents.placeholder {\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n  width: 100%;\n  height: 37px;\n  border: unset;\n  border-radius: 8px;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 8px 10px 8px 14px;\n  color: #5c5c5c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input {\n  width: 100%;\n  height: 100%;\n  border: unset;\n  outline: unset;\n  background-color: unset;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input::-webkit-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input::-moz-placeholder {\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input:-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input::-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input::placeholder {\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-toggle-arrow {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.errored {\n  border: 2px solid #e53e3e;\n}\n.maru-dropdown .maru-dropdown-error-message {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 500;\n  color: #e53e3e;\n  display: block;\n  margin-top: 4px;\n}\n\n.maru-dropdown-menu-wrapper {\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  position: fixed;\n  z-index: 1600;\n  display: none;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu {\n  margin-top: 4px;\n  position: absolute;\n  z-index: 1601;\n  border-radius: 8px;\n  box-shadow: 0px 0px 6px #e4e4e4;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper {\n  overflow-y: auto;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n  width: 100%;\n  background-color: white;\n  border: unset;\n  cursor: pointer;\n  height: 37px;\n  padding: 8px 14px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n  color: #5c5c5c;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item-selected, .maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item:hover {\n  background-color: #fafafa;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item-span {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex: 1;\n  text-align: start;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item-span em {\n  font-style: unset;\n  background-color: var(--p-20-per);\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-no-data {\n  background-color: transparent;\n  border: unset;\n}";
+var css_248z$2 = ".maru-dropdown .maru-dropdown-label {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 600;\n  color: #5c5c5c;\n  display: block;\n  margin-bottom: 4px;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper {\n  width: 100%;\n  border-radius: 8px;\n  border: 1px solid #e4e4e4;\n  cursor: pointer;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover {\n  border: 1px solid var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-input > input {\n  color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within {\n  border: 1px solid var(--p);\n  outline: none;\n  background-color: var(--p-10);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-input > input {\n  color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover {\n  border: 1px solid #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-input > input {\n  color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within {\n  border: 1px solid #8c8c8c;\n  outline: none;\n  background-color: #fafafa;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-input > input {\n  color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover {\n  border: 1px solid #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-input > input {\n  color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within {\n  border: 1px solid #58c5a6;\n  outline: none;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-input > input {\n  color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover {\n  border: 1px solid #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-input > input {\n  color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within {\n  border: 1px solid #ffb020;\n  outline: none;\n  background-color: #fff7e9;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-input > input {\n  color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover {\n  border: 1px solid #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-input > input {\n  color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within {\n  border: 1px solid #e53e3e;\n  outline: none;\n  background-color: #fcecec;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-input > input {\n  color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.inline-label-wrapper .maru-dropdown-button {\n  padding: 2px 10px 2px 14px;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .inline-label {\n  display: block;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 10px;\n  letter-spacing: -0.4px;\n  font-weight: 500;\n  color: #bdbdbd;\n  padding: 2px 10px 0 14px;\n  transform: translateY(3px);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n  width: 100%;\n  height: 37px;\n  border: unset;\n  border-radius: 8px;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 8px 10px 8px 14px;\n  color: #5c5c5c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button .maru-dropdown-button-contents {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button .maru-dropdown-button-contents.placeholder {\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n  width: 100%;\n  height: 37px;\n  border: unset;\n  border-radius: 8px;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 8px 10px 8px 14px;\n  color: #5c5c5c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input {\n  width: 100%;\n  height: 100%;\n  border: unset;\n  outline: unset;\n  background-color: unset;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input::-webkit-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input::-moz-placeholder {\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input:-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input::-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input::placeholder {\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-toggle-arrow {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.errored {\n  border: 2px solid #e53e3e;\n}\n.maru-dropdown .maru-dropdown-error-message {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 500;\n  color: #e53e3e;\n  display: block;\n  margin-top: 4px;\n}\n\n.maru-dropdown-menu-wrapper {\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  position: fixed;\n  z-index: 1600;\n  display: none;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu {\n  margin-top: 4px;\n  position: absolute;\n  z-index: 1601;\n  border-radius: 8px;\n  box-shadow: 0px 0px 6px #e4e4e4;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper {\n  overflow-y: auto;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n  width: 100%;\n  background-color: white;\n  border: unset;\n  cursor: pointer;\n  height: 37px;\n  padding: 8px 14px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n  color: #5c5c5c;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item-selected, .maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item:hover {\n  background-color: #fafafa;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item-span {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex: 1;\n  text-align: start;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item-span em {\n  font-style: unset;\n  background-color: var(--p-20-per);\n}";
 styleInject(css_248z$2);
 
 // eslint-disable-next-line import/prefer-default-export
@@ -5796,8 +5745,6 @@ function Dropdown(_a) {
     errorMessage = _a.errorMessage,
     inlineLabel = _a.inlineLabel,
     label = _a.label,
-    noDataMessage = _a.noDataMessage,
-    noSearchedMessage = _a.noSearchedMessage,
     onClear = _a.onClear,
     placeholder = _a.placeholder,
     startArrow = _a.startArrow,
@@ -5966,7 +5913,7 @@ function Dropdown(_a) {
       className: "maru-dropdown-error-message"
     }, {
       children: errorMessage
-    })), open && jsx(CreatePortal, __assign({
+    })), open && filteredData.length > 0 && jsx(CreatePortal, __assign({
       parent: anchorEl || wrapperRef.current
     }, {
       children: jsx(DropdownMenu, {
@@ -5978,7 +5925,6 @@ function Dropdown(_a) {
         filteredData: filteredData,
         width: width,
         height: height,
-        noMessage: type === 'button' ? noDataMessage : noSearchedMessage,
         customMenuItem: customMenuItem,
         onSelect: onSelect,
         closeMenu: closeMenu

package/package.json

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