maru_design2 2.31.1 → 3.0.2

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # Changelog
 
+## [3.0.2](https://github.com/42maru-ai/maru-design2/compare/v3.0.1...v3.0.2) (2026-07-27)
+
+
+### Bug Fixes
+
+* restore package ESM configuration ([40b766d](https://github.com/42maru-ai/maru-design2/commit/40b766d3d70c5ed97d2695d5bcd7d5324d0074eb))
+
+## [3.0.1](https://github.com/42maru-ai/maru-design2/compare/v3.0.0...v3.0.1) (2026-07-27)
+
+
+### Bug Fixes
+
+* apply Pretendard globally in Storybook ([e30df92](https://github.com/42maru-ai/maru-design2/commit/e30df92466d50b1c32aad5da64411461338c4729))
+* improve input styles and table filter ([94a4c57](https://github.com/42maru-ai/maru-design2/commit/94a4c573709b8a8fdffb3f255c0a097678ae218c))
+* improve input styles and table filter ([fd8e0f8](https://github.com/42maru-ai/maru-design2/commit/fd8e0f82cf066b08c35f08c0e1aa0ca3d203aa5b))
+* initialize table filter visibility ([52d35c3](https://github.com/42maru-ai/maru-design2/commit/52d35c3668d9ba7ccbe8a73322de21567d9103ee))
+* keep table filter story empty ([33e35b8](https://github.com/42maru-ai/maru-design2/commit/33e35b885bc11baf3c40a249aba7dc227a3c9453))
+* refine table header and toast details ([5992c77](https://github.com/42maru-ai/maru-design2/commit/5992c778a823e7fcf688bf99d4cc6e184c7ea08e))
+
+## [3.0.0](https://github.com/42maru-ai/maru-design2/compare/v2.32.0...v3.0.0) (2026-07-24)
+
+
+### ⚠ BREAKING CHANGES
+
+* MaruDesign v3는 React 18과 ESM만 지원하며 React 17, CommonJS, 레거시 Badge 색상 및 Toggle API를 지원하지 않습니다.
+
+### Features
+
+* MaruDesign v3 릴리즈 계약과 접근성 완성 ([20a44a0](https://github.com/42maru-ai/maru-design2/commit/20a44a04e03dc0a966796cdb08b5f266aea78b1e))
+* update Badge and Chip for v3 sizes, icons, and states ([8723178](https://github.com/42maru-ai/maru-design2/commit/87231787052f9110bc22238ad8b3a2439454ab14))
+* update Button for v3 variants, sizes, and custom icons ([2bb27b0](https://github.com/42maru-ai/maru-design2/commit/2bb27b0806005f674ef6f187589a4b5a18487f54))
+* update design system components and add tabs ([dbbe235](https://github.com/42maru-ai/maru-design2/commit/dbbe235b770f9505124c1e6f10c02f619184181e))
+* update Input for v3 and add related input molecules ([ab6df75](https://github.com/42maru-ai/maru-design2/commit/ab6df75cabd44008ce9f3111d82533c51b3abf76))
+
+
+### Bug Fixes
+
+* align Button only-icon, Modal overlay, and TagInput with v3 ([389a89e](https://github.com/42maru-ai/maru-design2/commit/389a89e7fb50df659e6e6c209b7fc03e9a3a8254))
+
+## [2.32.0](https://github.com/42maru-ai/maru-design2/compare/v2.31.1...v2.32.0) (2026-07-13)
+
+
+### Features
+
+* improve table interaction states and styling ([1a3c242](https://github.com/42maru-ai/maru-design2/commit/1a3c2423357b820aa583f7fdf533845821f90dea))
+
 ## [2.31.1](https://github.com/42maru-ai/maru-design2/compare/v2.31.0...v2.31.1) (2026-03-19)
 
 

package/dist/components/atoms/badge/Badge.d.ts

@@ -1,11 +1,14 @@
 import React from 'react';
+import { TBadgeSize } from '../../../enums/size';
 import { TBadgeColor, TBadgeVariant } from '../../../enums/variant';
+import { IconProps } from '../icon';
 import './badge.scss';
 export interface BadgeProps {
     /**
-     * 컴포넌트에 들어갈 내용
+     * 컴포넌트에 들어갈 내용.
+     * iconOnly(아이콘만)일 때는 생략할 수 있습니다.
      */
-    children: React.ReactNode;
+    children?: React.ReactNode;
     /**
      * 배지 색상
      */
@@ -14,10 +17,44 @@ export interface BadgeProps {
      * 배지 스타일 변형
      */
     variant?: TBadgeVariant;
+    /**
+     * 사이즈. Figma sm/md/lg ↔ small/normal/large. 기본값 `normal`.
+     */
+    size?: TBadgeSize;
     className?: string;
     /**
      * 설정하면 X아이콘이 렌더링되고 클릭 이벤트가 할당됩니다.
      */
     onXIconClick?: () => void;
+    /**
+     * 마루 Icon 시작 아이콘. `customStartIcon`과 함께 넘기면 custom이 우선입니다.
+     */
+    startIcon?: IconProps;
+    /**
+     * 마루 Icon 끝 아이콘. `customEndIcon`과 함께 넘기면 custom이 우선입니다.
+     * `onXIconClick`이 있으면 X 버튼이 end 쪽에 렌더되고 이 prop은 무시됩니다.
+     */
+    endIcon?: IconProps;
+    /**
+     * 마루 Icon 외 커스텀 시작 아이콘(Lucide 등). `startIcon`보다 우선합니다.
+     */
+    customStartIcon?: React.ReactNode;
+    /**
+     * 마루 Icon 외 커스텀 끝 아이콘(Lucide 등). `endIcon`보다 우선합니다.
+     * `onXIconClick`이 있으면 무시됩니다.
+     */
+    customEndIcon?: React.ReactNode;
+    /**
+     * Figma `Icon=Dot`에 대응하는 상태점 표시 여부.
+     */
+    showDot?: boolean;
+    /**
+     * 비활성 상태. opacity 50% 적용.
+     */
+    disabled?: boolean;
+    /**
+     * X 아이콘 버튼의 접근성 레이블.
+     */
+    closeButtonAriaLabel?: string;
 }
-export declare function Badge({ children, color, variant, className, onXIconClick, }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export declare function Badge({ children, color, variant, size, className, onXIconClick, startIcon, endIcon, customStartIcon, customEndIcon, showDot, disabled, closeButtonAriaLabel, }: BadgeProps): React.JSX.Element;

package/dist/components/atoms/button/Button.d.ts

@@ -15,19 +15,35 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     color?: TColor;
     /**
      * 사이즈 (@v1 kind)
+     * Figma `xxs`/`xs`/`sm`/`md`/`lg` ↔ `xxs`/`xs`/`small`/`normal`/`large`
+     * `xs`/`xxs`는 주로 icon-only용
      */
     size?: TButtonSize;
     /**
      * 모양 (@v1 kind)
+     * - `link` / `link-outline`: 컴팩트 텍스트·칩 (Round의 작은 버전이 아님)
+     * - `round`: pill shape 컨테이너
      */
     variant?: TButtonVariant;
     /**
      * 컴포넌트 시작점에 위치시킬 아이콘 (@v1 icon)
+     * `customStartIcon`과 함께 넘기면 custom이 우선이며 개발 환경에서 console.warn을 출력합니다.
      */
     startIcon?: IconProps;
     /**
      * 컴포넌트 끝점에 위치시킬 아이콘 (@v1 icon)
+     * `customEndIcon`과 함께 넘기면 custom이 우선이며 개발 환경에서 console.warn을 출력합니다.
      */
     endIcon?: IconProps;
+    /**
+     * 마루 Icon 외 커스텀 시작 아이콘 노드
+     * `startIcon`보다 우선합니다. 함께 넘기면 개발 환경에서 console.warn을 출력합니다.
+     */
+    customStartIcon?: React.ReactNode;
+    /**
+     * 마루 Icon 외 커스텀 끝 아이콘 노드
+     * `endIcon`보다 우선합니다. 함께 넘기면 개발 환경에서 console.warn을 출력합니다.
+     */
+    customEndIcon?: React.ReactNode;
 }
 export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/atoms/checkbox/Checkbox.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { TColorValue } from '../../../types/color';
 import { TGap } from '../../../enums/gap';
 import { TCheckboxSize } from '../../../enums/size';
 import './checkbox.scss';
@@ -8,7 +9,7 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     /**
      * (@v1 variant)
      */
-    color?: string;
+    color?: TColorValue;
     /**
      * 컴포넌트와 라벨 사이의 거리
      */

package/dist/components/atoms/chip/Chip.d.ts

@@ -2,18 +2,21 @@ import React from 'react';
 import { TColor } from '../../../enums/color';
 import { TChipSize } from '../../../enums/size';
 import { TChipVariant } from '../../../enums/variant';
+import { IconProps } from '../icon';
 import './chip.scss';
 export interface ChipProps {
     /**
-     * 컴포넌트에 들어갈 내용. number인 경우 천의 자리마다 컴마(,) 표시됨
+     * 컴포넌트에 들어갈 내용. number인 경우 천의 자리마다 컴마(,) 표시됨.
+     * iconOnly(아이콘만)일 때는 생략할 수 있습니다.
      */
-    children: React.ReactNode | string | number;
+    children?: React.ReactNode | string | number;
     /**
      * (@v1 variant)
      */
     color?: TColor;
     /**
      * (@v1 kind)
+     * Figma sm/md/lg ↔ small/normal/large
      */
     size?: TChipSize;
     /**
@@ -25,5 +28,35 @@ export interface ChipProps {
      * 설정하면 X아이콘 생기며, 해당 아이콘에 클릭 이벤트를 할당함.
      */
     onXIconClick?: () => void;
+    /**
+     * 마루 Icon 시작 아이콘. `customStartIcon`과 함께 넘기면 custom이 우선입니다.
+     */
+    startIcon?: IconProps;
+    /**
+     * 마루 Icon 끝 아이콘. `customEndIcon`과 함께 넘기면 custom이 우선입니다.
+     * `onXIconClick`이 있으면 X 버튼이 end 쪽에 렌더되고 이 prop은 무시됩니다.
+     */
+    endIcon?: IconProps;
+    /**
+     * 마루 Icon 외 커스텀 시작 아이콘(Lucide 등). `startIcon`보다 우선합니다.
+     */
+    customStartIcon?: React.ReactNode;
+    /**
+     * 마루 Icon 외 커스텀 끝 아이콘(Lucide 등). `endIcon`보다 우선합니다.
+     * `onXIconClick`이 있으면 무시됩니다.
+     */
+    customEndIcon?: React.ReactNode;
+    /**
+     * Figma `Icon=Dot`에 대응하는 상태점 표시 여부.
+     */
+    showDot?: boolean;
+    /**
+     * 비활성 상태. opacity 50% 적용.
+     */
+    disabled?: boolean;
+    /**
+     * X 아이콘 버튼의 접근성 레이블.
+     */
+    closeButtonAriaLabel?: string;
 }
-export declare function Chip({ children, color, size, variant, className, onXIconClick, }: ChipProps): import("react/jsx-runtime").JSX.Element;
+export declare function Chip({ children, color, size, variant, className, onXIconClick, startIcon, endIcon, customStartIcon, customEndIcon, showDot, disabled, closeButtonAriaLabel, }: ChipProps): React.JSX.Element;

package/dist/components/atoms/code/Code.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import 'highlight.js/styles/a11y-light.css';
 import './code.scss';
 export interface CodeProps {
     value: string;
     copyable?: boolean;
 }
-export declare function Code({ value, copyable }: CodeProps): import("react/jsx-runtime").JSX.Element;
+export declare function Code({ value, copyable }: CodeProps): React.JSX.Element;

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

@@ -1,3 +1,5 @@
+import React from 'react';
+import type { TColorValue } from '../../../types/color';
 import { TIcons } from './iconmap';
 export interface IconProps {
     /**
@@ -7,10 +9,10 @@ export interface IconProps {
     /**
      * primary, secondary, positive, warning, danger + rgb. (@v1 fill)
      */
-    color?: string;
+    color?: TColorValue;
     /**
      * primary, secondary, positive, warning, danger + rgb. (@v1 fill)
      */
-    hoverColor?: string;
+    hoverColor?: TColorValue;
 }
-export declare function Icon({ name, color, hoverColor }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function Icon({ name, color, hoverColor }: IconProps): React.JSX.Element;

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

@@ -45,6 +45,7 @@ export declare const ICONS: {
     readonly AlertTriangle_s1615: "AlertTriangle_s1615";
     readonly ArrowCross_s1613: "ArrowCross_s1613";
     readonly ArrowDownCircle_s1413: "ArrowDownCircle_s1413";
+    readonly ArrowDown_s1215: "ArrowDown_s1215";
     readonly ArrowLeftIn_s1613: "ArrowLeftIn_s1613";
     readonly ArrowLeftOut_s1810: "ArrowLeftOut_s1810";
     readonly ArrowLeft_s1613: "ArrowLeft_s1613";
@@ -56,6 +57,7 @@ export declare const ICONS: {
     readonly ArrowRight_s1613: "ArrowRight_s1613";
     readonly ArrowRight_s1813: "ArrowRight_s1813";
     readonly ArrowRight_s2420: "ArrowRight_s2420";
+    readonly ArrowUp_s1215: "ArrowUp_s1215";
     readonly Atom01_s1615: "Atom01_s1615";
     readonly BackToLines_s1615: "BackToLines_s1615";
     readonly BagSetting_s2415: "BagSetting_s2415";
@@ -118,6 +120,7 @@ export declare const ICONS: {
     readonly ChevronRight_s1615: "ChevronRight_s1615";
     readonly ChevronRight_s2020: "ChevronRight_s2020";
     readonly ChevronRight_s2420: "ChevronRight_s2420";
+    readonly ChevronSelectorVertical_s1215: "ChevronSelectorVertical_s1215";
     readonly ChevronSelectorVertical_s2020: "ChevronSelectorVertical_s2020";
     readonly ChevronUp_s1613: "ChevronUp_s1613";
     readonly ChevronUp_s1615: "ChevronUp_s1615";
@@ -318,6 +321,7 @@ export declare const ICONS: {
     readonly PlusDownLines_s1413: "PlusDownLines_s1413";
     readonly PlusLines_s1210: "PlusLines_s1210";
     readonly PlusUpLines_s1413: "PlusUpLines_s1413";
+    readonly Plus_s1210: "Plus_s1210";
     readonly Plus_s1610: "Plus_s1610";
     readonly PreviewEye_s1413: "PreviewEye_s1413";
     readonly PreviewLine_s2013: "PreviewLine_s2013";

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

@@ -10,6 +10,10 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
         message?: string;
     };
     label?: string;
+    /**
+     * 인풋 하단에 표시할 도움말
+     */
+    helperText?: React.ReactNode;
     /**
      * 데이터 타입
      */
@@ -39,5 +43,9 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
      * true이면 placeholder가 없어지지 않음
      */
     persistentPlaceholder?: boolean;
+    /**
+     * 입력값에서 feature highlight 색상으로 강조할 문자열
+     */
+    highlightText?: string;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/atoms/popover/Popover.d.ts

@@ -16,4 +16,4 @@ export interface PopoverProps {
     portal?: boolean;
     className?: string;
 }
-export declare function Popover({ anchorEl, children, open, className, direction, onClose, portal, }: PopoverProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Popover({ anchorEl, children, open, className, direction, onClose, portal, }: PopoverProps): React.JSX.Element | null;

package/dist/components/atoms/radio/Radio.d.ts

@@ -1,23 +1,27 @@
 import React from 'react';
+import { TRadioGap, TRadioSize } from '../../../types/radio';
 import { TRadioColor } from '../../../enums/color';
-import { TGap } from '../../../enums/gap';
 import './radio.scss';
-export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'checked' | 'type'> {
+export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'checked' | 'size' | 'type'> {
     /**
      * 라디오 토글의 값
      */
     checked?: boolean;
     /**
-     * 기본 회색, 메인 테마색 ['primary']
+     * 메인 테마색, 기존 회색 ['default']
      */
     color?: TRadioColor;
     /**
-     * 컴포넌트와 라벨 사이의 거리. ['8px', '4px', '2px']
+     * 컴포넌트와 라벨 사이의 거리. ['8px', '6px', '4px', '2px']
      */
-    gap?: TGap;
+    gap?: TRadioGap;
     /**
      * 라디오 버튼 옆 문자 내용
      */
     label?: string;
+    /**
+     * 라디오 버튼 크기
+     */
+    size?: TRadioSize;
 }
 export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -1 +1,2 @@
 export * from './Radio';
+export { TRadioGap, TRadioSize } from '../../../types/radio';

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

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

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

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

package/dist/components/atoms/slider/Slider.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { TColor } from '../../../enums/color';
 import './slider.scss';
 export interface SliderProps {
@@ -26,13 +27,10 @@ export interface SliderProps {
      */
     step?: number;
     /**
-     * 값 표시 여부
+     * 포인터 위에 현재 값 표시 여부
      */
     showValue?: boolean;
     disabled?: boolean;
     className?: string;
 }
-/**
- * showValue에 관한 글: showValue가 true면 기존 input에 있는 thumb를 숨기고 custom thumb를 보여준다.
- */
-export declare function Slider({ value, onChange, color, min, max, step, showValue, disabled, className, }: SliderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Slider({ value, onChange, color, min, max, step, showValue, disabled, className, }: SliderProps): React.JSX.Element;

package/dist/components/atoms/toggle/Toggle.d.ts

@@ -1,31 +1,16 @@
-import { TColor } from '../../../enums/color';
+import React from 'react';
+import type { TToggleSize } from '../../../types/toggle';
 import './toggle.scss';
-export interface ToggleProps {
+export interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'checked' | 'onChange' | 'size' | 'type'> {
     checked: boolean;
     onChange: (checked: boolean) => void;
-    className?: string;
     /**
-     * ['primary', 'secondary', 'positive', 'warning', 'danger']. (@v1 variant)
+     * 토글 오른쪽에 표시할 텍스트
      */
-    color?: TColor;
+    text?: string;
     /**
-     * 비활성화 여부
+     * 토글 크기
      */
-    disabled?: boolean;
-    /**
-     * 텍스트가 있는 토글.
-     */
-    text?: {
-        left?: string;
-        right?: string;
-    };
-    /**
-     * 토글 아이콘 표시 여부
-     */
-    showIcon?: boolean;
-    /**
-     * 토글 크기 배율 (기본값: 1)
-     */
-    scale?: number;
+    size?: TToggleSize;
 }
-export declare function Toggle({ checked, onChange, className, color, disabled, text, showIcon, scale, }: ToggleProps): import("react/jsx-runtime").JSX.Element;
+export declare function Toggle({ checked, onChange, className, disabled, text, size, ...props }: ToggleProps): React.JSX.Element;

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

@@ -1 +1,2 @@
 export * from './Toggle';
+export { TToggleSize } from '../../../types/toggle';

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

@@ -26,4 +26,4 @@ export interface TooltipProps {
      */
     gap?: TTooltipGap;
 }
-export declare function Tooltip({ children, content, className, hidden, direction, portal, gap, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tooltip({ children, content, className, hidden, direction, portal, gap, }: TooltipProps): React.JSX.Element;

package/dist/components/molecules/buttonGroup/ButtonGroup.d.ts

@@ -53,4 +53,4 @@ export interface ButtonGroupProps<T extends string> {
     disabled?: boolean;
     className?: string;
 }
-export declare function ButtonGroup<T extends string>({ value, onChange, buttons, variant, size, disabled, className, }: ButtonGroupProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ButtonGroup<T extends string>({ value, onChange, buttons, variant, size, disabled, className, }: ButtonGroupProps<T>): React.JSX.Element;

package/dist/components/molecules/calendar/Calendar.d.ts

@@ -24,4 +24,4 @@ export interface CalendarProps {
     onSaveClick: (startDate?: string, endDate?: string) => void;
     className?: string;
 }
-export declare function Calendar({ children, minStartDate, saveButtonContent, onSaveClick, className, }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+export declare function Calendar({ children, minStartDate, saveButtonContent, onSaveClick, className, }: CalendarProps): React.JSX.Element;

package/dist/components/molecules/calendar/DatePickerHeader.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ReactDatePickerCustomHeaderProps } from 'react-datepicker';
-declare function DatePickerHeader({ date, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, }: ReactDatePickerCustomHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function DatePickerHeader({ date, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, }: ReactDatePickerCustomHeaderProps): React.JSX.Element;
 export default DatePickerHeader;

package/dist/components/molecules/calendar/DatePickerWrapper.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import 'react-datepicker/dist/react-datepicker.css';
 interface Props {
     minStartDate?: Date | null;
@@ -5,5 +6,5 @@ interface Props {
     onSaveClick: (startDate?: string, endDate?: string) => void;
     setOpen: (open: boolean) => void;
 }
-declare function DatePickerWrapper({ minStartDate, saveButtonContent, onSaveClick, setOpen, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function DatePickerWrapper({ minStartDate, saveButtonContent, onSaveClick, setOpen, }: Props): React.JSX.Element;
 export default DatePickerWrapper;

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

@@ -62,6 +62,11 @@ interface DropdownProps<T extends Record<string, any>> {
      * 메뉴 세로 크기(px) (@v1 menuPosition.height)
      */
     height?: number;
+    /**
+     * 텍스트와 화살표(아이콘) 사이 간격(px)
+     * @default 8
+     */
+    gap?: number;
     /**
      * 드롭다운 토글 버튼 사용자 정의 노드. (@v1 toggleChildren)
      */
@@ -86,5 +91,5 @@ interface DropdownProps<T extends Record<string, any>> {
         onClick: () => void;
     };
 }
-export declare function Dropdown<T extends Record<string, any>>({ data, selectedId, onSelect, idKey, displayKey, className, placeholder, searchPlaceholder, disabled, color, stopPropagation, type, errorMessage, label, onClear, noDataMessage, noResultMessage, width, height, customButton, customMenuItem, anchorEl, menuBottomButton, }: DropdownProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Dropdown<T extends Record<string, any>>({ data, selectedId, onSelect, idKey, displayKey, className, placeholder, searchPlaceholder, disabled, color, stopPropagation, type, errorMessage, label, onClear, noDataMessage, noResultMessage, width, height, gap, customButton, customMenuItem, anchorEl, menuBottomButton, }: DropdownProps<T>): React.JSX.Element;
 export {};

package/dist/components/molecules/dropdown/menu/MenuItem.d.ts

@@ -12,5 +12,5 @@ interface Props<T extends Record<string, any>> {
     }) => JSX.Element;
     onClose: () => void;
 }
-declare function MenuItem<T extends Record<string, any>>({ item, selectedId, onSelect, idKey, displayKey, width, customMenuItem: CustomMenuItem, onClose, }: Props<T>): import("react/jsx-runtime").JSX.Element;
+declare function MenuItem<T extends Record<string, any>>({ item, selectedId, onSelect, idKey, displayKey, width, customMenuItem: CustomMenuItem, onClose, }: Props<T>): React.JSX.Element;
 export default MenuItem;

package/dist/components/molecules/dropdown/menu/index.d.ts

@@ -27,5 +27,5 @@ interface Props<T extends Record<string, any>> {
         onClick: () => void;
     };
 }
-declare function DropdownMenu<T extends Record<string, any>>({ data, selectedId, onSelect, idKey, displayKey, color, searchPlaceholder, noDataMessage, noResultMessage, width, height, customMenuItem, isSearch, parent, open, onClose, menuBottomButton, }: Props<T>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenu<T extends Record<string, any>>({ data, selectedId, onSelect, idKey, displayKey, color, searchPlaceholder, noDataMessage, noResultMessage, width, height, customMenuItem, isSearch, parent, open, onClose, menuBottomButton, }: Props<T>): React.JSX.Element;
 export default DropdownMenu;

package/dist/components/molecules/dropdown/toggleButton/Arrow.d.ts

@@ -1,9 +1,9 @@
+import React from 'react';
 import { TColor } from '../../../../enums/color';
 interface Props {
     open: boolean;
-    focus: boolean;
     color: TColor;
     disabled?: boolean;
 }
-declare function Arrow({ open, focus, color, disabled }: Props): import("react/jsx-runtime").JSX.Element;
+declare function Arrow({ open, color, disabled }: Props): React.JSX.Element;
 export default Arrow;

package/dist/components/molecules/dropdown/toggleButton/Clear.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 interface Props {
     focus: boolean;
     onClear: () => void;
 }
-declare function Clear({ focus, onClear }: Props): import("react/jsx-runtime").JSX.Element;
+declare function Clear({ focus, onClear }: Props): React.JSX.Element;
 export default Clear;

package/dist/components/molecules/dropdown/toggleButton/index.d.ts

@@ -7,6 +7,7 @@ interface Props<T extends Record<string, any>> {
     color: TColor;
     stopPropagation?: boolean;
     width?: number;
+    gap: number;
     customButton?: React.ReactNode;
     open: boolean;
     selected: T | undefined;
@@ -15,5 +16,5 @@ interface Props<T extends Record<string, any>> {
     onClear: () => void;
     onClick: () => void;
 }
-declare function DropdownToggleButton<T extends Record<string, any>>({ displayKey, placeholder, disabled, color, stopPropagation, width, customButton, open, selected, errored, hasClearBtn, onClear, onClick, }: Props<T>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownToggleButton<T extends Record<string, any>>({ displayKey, placeholder, disabled, color, stopPropagation, width, gap, customButton, open, selected, errored, hasClearBtn, onClear, onClick, }: Props<T>): React.JSX.Element;
 export default DropdownToggleButton;

package/dist/components/molecules/inputWithAction/InputWithAction.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { InputProps } from '../../atoms/input';
+import './input-with-action.scss';
+export interface InputWithActionProps extends InputProps {
+    /** 우측 액션 버튼 내용 */
+    actionContent: React.ReactNode;
+    /** 우측 액션 버튼 클릭 이벤트 */
+    onAction: () => void;
+    /** 액션 버튼만 별도로 비활성화할지 여부 */
+    actionDisabled?: boolean;
+    /** 액션 버튼의 접근성 이름 */
+    actionAriaLabel?: string;
+}
+export declare const InputWithAction: React.ForwardRefExoticComponent<InputWithActionProps & React.RefAttributes<HTMLInputElement>>;

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

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

package/dist/components/molecules/modal/Modal.d.ts

@@ -7,7 +7,12 @@ export interface ModalProps {
     onClose: () => void;
     open: boolean;
     /**
-     * 배경 클릭 시 컴포넌트 닫히는지 여부. (@v1 backdropOff)
+     * 제목이 없는 모달의 접근성 이름
+     */
+    ariaLabel?: string;
+    /**
+     * 배경에서 누르고 뗄 때 컴포넌트 닫히는지 여부. (@v1 backdropOff)
+     * 모달 안에서 시작해 바깥에서 떼는 드래그는 닫히지 않습니다.
      */
     backdrop?: boolean;
     /**
@@ -18,14 +23,27 @@ export interface ModalProps {
         disabled?: boolean;
     };
     className?: string;
+    /**
+     * 닫기 아이콘 버튼의 접근성 이름
+     */
+    closeButtonAriaLabel?: string;
     /**
      * 엔터키 비활성화 여부. (@v1 disableEnterKeyDown)
      */
     disabledEnter?: boolean;
+    /**
+     * true면 푸터 버튼이 하단 너비를 반반 차지합니다. 기본은 우측 정렬입니다.
+     */
+    fullFooter?: boolean;
     /**
      * 모달 닫기 버튼 숨김 여부. (@v1 hasCloseButton)
      */
     hiddenCloseButton?: boolean;
+    /**
+     * 타이틀 위 아이콘. 없으면 타이틀이 최상단입니다.
+     * Modal은 테두리 박스와 내부 사이즈만 담당하고, 아이콘 노드는 소비자가 넘깁니다.
+     */
+    icon?: React.ReactNode;
     /**
      * 모달 확인버튼 설정 (@v1 confirmButton)
      */
@@ -45,4 +63,4 @@ export interface ModalProps {
      */
     subTitle?: React.ReactNode;
 }
-export declare function Modal({ children, onClose, open, backdrop, cancelButton, className, disabledEnter, hiddenCloseButton, okButton, size, title, subTitle, }: ModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function Modal({ children, onClose, open, ariaLabel, backdrop, cancelButton, className, closeButtonAriaLabel, disabledEnter, fullFooter, hiddenCloseButton, icon, okButton, size, title, subTitle, }: ModalProps): React.JSX.Element;

package/dist/components/molecules/multiSelectDropdown/MultiSelectDropdown.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { TColor } from '../../../enums/color';
 import { TDropdownType } from '../../../enums/type';
 import './multi-select-dropdown.scss';
@@ -73,4 +74,4 @@ export interface MultiSelectDropdownProps<T extends Record<string, any>> {
      */
     anchorEl?: HTMLElement | null;
 }
-export declare function MultiSelectDropdown<T extends Record<string, any>>({ data, selectedIds, onSelect, idKey, displayKey, content, className, placeholder, searchPlaceholder, disabled, color, stopPropagation, type, errorMessage, label, allCheckLabel, onClear, noDataMessage, noResultMessage, width, height, anchorEl, }: MultiSelectDropdownProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function MultiSelectDropdown<T extends Record<string, any>>({ data, selectedIds, onSelect, idKey, displayKey, content, className, placeholder, searchPlaceholder, disabled, color, stopPropagation, type, errorMessage, label, allCheckLabel, onClear, noDataMessage, noResultMessage, width, height, anchorEl, }: MultiSelectDropdownProps<T>): React.JSX.Element;