@croquiscom/pds 0.43.0 → 0.45.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @croquiscom/pds
 
+## 0.45.0
+
+### Minor Changes
+
+- e333756: IconMessage24, IconLocked16 아이콘 추가
+
+### Patch Changes
+
+- 47be844: Button Disabled 컬러 opacity 적용 추가
+
+## 0.44.0
+
+### Minor Changes
+
+- 89d8071: BasicModal CustomFooter FullScreen 모드 fixed 지원 추가
+
+  ## BreakPoint
+
+  BasicModal props가 다음과 같이 변경되었습니다.
+
+  - fixedHeader, fixedFooter props가 제거되었습니다.
+  - fullScreen 속성이 true일 경우 Modal header, footer 영역이 자동 fixed 처리됩니다.
+  - footer 속성을 통해 커스텀할 경우에도 footer node 영역이 자동 fixed 처리됩니다.
+  - contentProps 속성에 maxHeight이 추가되었습니다.
+    - 콘텐츠 영역 maxHeight을 커스텀할 수 있습니다.
+
 ## 0.43.0
 
 ### Minor Changes

package/README.md

@@ -2,7 +2,7 @@
 
 # PDS
 
-- 🎨 [Storybook](https://main--63219cdd878b411aa90ad43c.chromatic.com/)
+- 🎨 [Storybook](https://storybook.kakaostyle.in/master/pds/?path=/story/intro--page)
 
 PDS(파트너 디자인 시스템)은 [카카오스타일 파트너센터](https://shop.zigzag.kr/) 디자인 시스템을 위한 리액트 기반의 라이브러리입니다.
 

package/assets/icons/Locked16.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.96674 6.6333V4.66663C3.96674 3.59693 4.39167 2.57103 5.14807 1.81464C5.90447 1.05824 6.93036 0.633301 8.00007 0.633301C9.06978 0.633301 10.0957 1.05824 10.8521 1.81464C11.6085 2.57103 12.0334 3.59693 12.0334 4.66663V6.6333H12.6667C13.7897 6.6333 14.7 7.54365 14.7 8.66663V13.3333C14.7 14.4563 13.7897 15.3666 12.6667 15.3666H3.33338C2.2104 15.3666 1.30005 14.4563 1.30005 13.3333V8.66663C1.30005 7.54365 2.2104 6.6333 3.33338 6.6333H3.96674ZM6.13802 2.80459C6.63187 2.31074 7.30167 2.0333 8.00007 2.0333C8.69847 2.0333 9.36827 2.31074 9.86212 2.80459C10.356 3.29843 10.6334 3.96823 10.6334 4.66663V6.6333H5.36674V4.66663C5.36674 3.96823 5.64418 3.29843 6.13802 2.80459ZM3.33338 8.0333C2.9836 8.0333 2.70005 8.31685 2.70005 8.66663V13.3333C2.70005 13.6831 2.9836 13.9666 3.33338 13.9666H12.6667C13.0165 13.9666 13.3 13.6831 13.3 13.3333V8.66663C13.3 8.31685 13.0165 8.0333 12.6667 8.0333H3.33338Z" fill="#363644"/>
+</svg>

package/assets/icons/Message24.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 7.78613C4 5.69511 5.61614 4 7.60976 4H16.3902C18.3839 4 20 5.69511 20 7.78613V13.8199C20 15.9109 18.3839 17.6061 16.3902 17.6061H7.81164L6.02568 19.6085C5.30022 20.4218 4 19.8834 4 18.7696V7.78613ZM7.60976 5.43259C6.37048 5.43259 5.36585 6.4863 5.36585 7.78613V18.2513L7.01662 16.4004C7.14575 16.2556 7.32632 16.1735 7.51534 16.1735H16.3902C17.6295 16.1735 18.6341 15.1198 18.6341 13.8199V7.78613C18.6341 6.4863 17.6295 5.43259 16.3902 5.43259H7.60976Z" fill="#363644"/>
+<path d="M7.60976 9.32104C7.60976 8.92544 7.91551 8.60475 8.29268 8.60475H15.7073C16.0845 8.60475 16.3902 8.92544 16.3902 9.32104C16.3902 9.71664 16.0845 10.0373 15.7073 10.0373H8.29268C7.91551 10.0373 7.60976 9.71664 7.60976 9.32104Z" fill="#363644"/>
+<path d="M7.60976 12.5955C7.60976 12.1999 7.91551 11.8792 8.29268 11.8792H13.7561C14.1333 11.8792 14.439 12.1999 14.439 12.5955C14.439 12.9911 14.1333 13.3118 13.7561 13.3118H8.29268C7.91551 13.3118 7.60976 12.9911 7.60976 12.5955Z" fill="#363644"/>
+</svg>

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

@@ -9,7 +9,11 @@ export interface BadgeProps {
     size?: BadgeSize;
     /** @default black */
     color?: BadgeColor;
-    /** 라벨 우측 영역에 렌더링 될 아이콘 요소 */
+    /**
+     * 라벨 우측 영역에 렌더링 될 아이콘 요소
+     *  - Icon 컴포넌트 color props가 있더라도 BadgeColor에 따라 currentColor가 지정됩니다.
+     *  - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 8로 고정됩니다.
+     */
     icon?: ReactElement<IconProps>;
 }
 export declare const Badge: ({ className, kind, size, color, icon, children, }: PropsWithChildren<BadgeProps>) => JSX.Element;

package/dist/components/banner/NormalBanner.d.ts

@@ -7,6 +7,11 @@ export interface NormalBannerProps {
      * @default info
      */
     kind?: NormalBannerKind;
+    /**
+     * 타이블 좌측에 렌더링 될 아이콘 요소
+     *  - Icon 컴포넌트 color props가 있더라도 kind 따라 currentColor가 지정됩니다.
+     *  - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 16으로 고정됩니다.
+     */
     iconComponent?: React.ComponentType<IconProps>;
     title: string;
     message?: ReactNode;

package/dist/components/bottom-sheet/BottomSheet.d.ts

@@ -5,17 +5,21 @@ type BottomSheetContentWithCloseAction = (action: {
 export interface BottomSheetProps {
     className?: string;
     opened?: boolean;
-    /** @default 1020 */
+    /**
+     * 기본값으로 [ZIndexOrder](https://github.com/croquiscom/pds/blob/main/src/styles/zIndex.ts) 규칙을 적용합니다.
+     * @default 1020
+     */
     zIndex?: number;
     title?: ReactNode;
     subTitle?: ReactNode;
     content?: ReactNode | BottomSheetContentWithCloseAction;
     /**
+     * 오버레이 클릭 닫힘 사용 여부
      * @default true
      */
     canClickOutside?: boolean;
     /**
-     * @desc bottom sheet 드래그 닫힘 지원 여부
+     * 드래그 닫힘 사용 여부
      * @default true
      */
     canDragClose?: boolean;

package/dist/components/bottom-sheet/BottomSheet.stories.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
-import { ComponentMeta } from '@storybook/react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { BottomSheet } from './BottomSheet';
 declare const _default: ComponentMeta<({ className, zIndex, opened: openProp, canClickOutside, canDragClose, title, subTitle, content, onClose, }: import("./BottomSheet").BottomSheetProps) => JSX.Element>;
 export default _default;
 export declare const Base: any;
-export declare const MaxHeight: () => JSX.Element;
+export declare const MaxHeight: ComponentStory<typeof BottomSheet>;
 export declare const DisabledCloseDimClick: any;
 export declare const DisabledCloseDrag: any;
-export declare const ContentWithCloseAction: () => JSX.Element;
+export declare const ContentWithCloseAction: ComponentStory<typeof BottomSheet>;

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

@@ -2,6 +2,9 @@ import React, { ButtonHTMLAttributes, ReactElement } from 'react';
 import { ButtonSize, ButtonKind } from './types';
 import { IconProps } from '../icons/generated';
 export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    /**
+     * 너비 100% 사용 여부
+     */
     fill?: boolean;
     /** @default secondary */
     kind?: ButtonKind;
@@ -11,9 +14,17 @@ export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement
     type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
     /** @default false */
     loading?: boolean;
-    /** @desc 좌측 영역에 렌더링 될 아이콘 요소 */
+    /**
+     * 버튼 좌측 영역에 렌더링 될 아이콘 요소
+     *  - Icon 컴포넌트 color props가 있더라도 kind 따라 currentColor가 지정됩니다.
+     *  - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 ButtonSize에 따라 고정됩니다.
+     */
     startIcon?: ReactElement<IconProps>;
-    /** @desc 우측 영역에 렌더링 될 아이콘 요소 */
+    /**
+     * 버튼 우측 영역에 렌더링 될 아이콘 요소
+     *  - Icon 컴포넌트 color props가 있더라도 kind 따라 currentColor가 지정됩니다.
+     *  - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 ButtonSize에 따라 고정됩니다.
+     */
     endIcon?: ReactElement<IconProps>;
 }
 export interface ButtonIconProps {

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { Button } from './Button';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
 declare const _default: ComponentMeta<React.ForwardRefExoticComponent<import("./Button").ButtonProps & React.RefAttributes<HTMLButtonElement>>>;
 export default _default;
 export declare const Primary: any;
@@ -10,4 +11,4 @@ export declare const StartIcon: any;
 export declare const EndIcon: any;
 export declare const Loading: any;
 export declare const FullWidth: any;
-export declare const Focus: () => JSX.Element;
+export declare const Focus: ComponentStory<typeof Button>;

package/dist/components/button/IconButton.d.ts

@@ -4,12 +4,14 @@ import { ButtonProps } from './Button';
 import { IconProps } from '../icons/generated';
 export interface IconButtonProps extends Omit<ButtonProps, 'size' | 'loading' | 'startIcon' | 'endIcon' | 'kind'> {
     /**
-     * @desc shape 'circle'의 경우 적용되지 않습니다.
+     * shape 속성이 'circle'의 경우 적용되지 않습니다.
      * @default outlined_secondary
      */
     kind?: IconButtonKind;
     /**
-     * @desc 렌더링 될 아이콘 요소
+     * 렌더링 될 아이콘 요소
+     *  - Icon 컴포넌트 color props가 없다면 currentColor가 지정됩니다.
+     *  - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 16으로 고정됩니다.
      */
     icon?: ReactElement<IconProps>;
     /** @default rectangle */

package/dist/components/button/TextButton.d.ts

@@ -9,7 +9,7 @@ export interface TextButtonProps extends Omit<ButtonProps, 'loading' | 'kind'> {
     /** @default medium */
     size?: TextButtonSize;
     /**
-     * @desc kind값이 link일 경우 적용되지 않습니다.
+     * kind값이 link일 경우 고정 컬러(semantic_colors.content.primary)로 지정됩니다.
      * @default semantic_colors.content.primary
      */
     color?: string;

package/dist/components/date-picker/DatePicker.d.ts

@@ -6,15 +6,34 @@ export declare const DATE_FORMAT = "yyyy.MM.dd";
 export declare const DATE_HOUR_MINUTE_FORMAT = "yyyy.MM.dd HH:mm";
 export declare const DATE_HOUR_MINUTE_SECOND_FORMAT = "yyyy.MM.dd HH:mm:ss";
 export interface DatePickerBaseProps {
+    /**
+     * Input 너비를 지정할 수 있습니다.
+     * @default 100%
+     */
     width?: CSSValueWithLength;
     error?: boolean;
     disabled?: boolean;
     className?: string;
+    /**
+     * Input 우측 입력한 value를 지울 수 있는 remove 버튼 사용 유무
+     *   - 입력된 value가 없다면 기본 달력 아이콘이 노출됩니다.
+     *   - 입력된 value가 있다면 마우스 호버시 remove 버튼이 노출됩니다.
+     * @default false
+     */
     showRemoveButton?: boolean;
     opened?: boolean;
     onOpen?: () => void;
     onClose?: () => void;
+    /**
+     * Overlay 영역 클릭시 닫힘 사용 여부
+     * @default true
+     */
     canClickOutside?: boolean;
+    /**
+     * 기본값으로 [ZIndexOrder](https://github.com/croquiscom/pds/blob/main/src/styles/zIndex.ts) 규칙을 적용합니다.
+     * @default 1035
+     */
+    zIndex?: number;
 }
 export interface DatePickerProps extends DatePickerBaseProps {
     /**
@@ -22,22 +41,33 @@ export interface DatePickerProps extends DatePickerBaseProps {
      */
     placeholder?: string;
     value?: Date;
+    /**
+     * 선택 불가능한 날짜를 지정할 수 있습니다.
+     *  [Matcher](https://github.com/gpbl/react-day-picker/blob/master/packages/react-day-picker/src/types/Matchers.ts#L52)
+     */
     disabledDays?: Matcher | Matcher[];
     /**
+     * 달력 하단 '오늘' 날짜를 바로 선택할 수 있는 버튼 사용 유무
      * @default false
      */
     showTodayButton?: boolean;
+    /**
+     * 타임 노출이 필요한 경우 포멧을 지정할 수 있습니다.
+     *  - 'hourMinute'일 경우 yyyy.MM.dd HH:mm
+     *  - 'hourMinuteSecond' 일 경우 yyyy.MM.dd HH:mm:ss
+     *  - showTimePicker 속성이 true일 경우 displayTimeFormat은 hourMinute으로 적용됩니다.
+     */
     displayTimeFormat?: displayTimeFormat;
     /**
+     * 달력 하단 TimePicker를 노출합니다. onChange value에 시간 정보를 포함하여 전달합니다.
      * @default false
-     * @desc 달력 하단 TimePicker를 노출합니다. onChange value에 시간 정보를 포함하여 전달합니다.
      */
     showTimePicker?: boolean;
     /**
+     * TimePicker 사용시 Footer 영역(취소/확인)은 고정 노출됩니다.
      * @default false
-     * @desc TimePicker 사용시 Footer 영역은 고정 노출됩니다.
      */
     showFooter?: boolean;
     onChange?: (value: Date | null) => void;
 }
-export declare const DatePicker: ({ width, error, disabled, className, placeholder, displayTimeFormat, value, disabledDays, canClickOutside, showRemoveButton, showTodayButton, showTimePicker, showFooter, onChange, opened: openProp, onOpen, onClose, }: DatePickerProps) => JSX.Element;
+export declare const DatePicker: ({ width, error, disabled, className, placeholder, displayTimeFormat, value, disabledDays, canClickOutside, showRemoveButton, showTodayButton, showTimePicker, showFooter, zIndex, onChange, opened: openProp, onOpen, onClose, }: DatePickerProps) => JSX.Element;

package/dist/components/date-picker/DatePicker.stories.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<({ width, error, disabled, className, placeholder, displayTimeFormat, value, disabledDays, canClickOutside, showRemoveButton, showTodayButton, showTimePicker, showFooter, onChange, opened: openProp, onOpen, onClose, }: import("./DatePicker").DatePickerProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ width, error, disabled, className, placeholder, displayTimeFormat, value, disabledDays, canClickOutside, showRemoveButton, showTodayButton, showTimePicker, showFooter, zIndex, onChange, opened: openProp, onOpen, onClose, }: import("./DatePicker").DatePickerProps) => JSX.Element>;
 export default _default;
 export declare const Base: any;
 export declare const Disabled: any;
@@ -9,7 +9,6 @@ export declare const ShowRemoveButton: any;
 export declare const ShowFooter: any;
 export declare const ShowTodayButton: any;
 export declare const ShowTimePicker: any;
-export declare const Opened: any;
 export declare const ShowTimeHourMinute: any;
 export declare const ShowTimeHourMinuteSecond: any;
 export declare const DisableDays: any;

package/dist/components/date-picker/DateRangePicker.d.ts

@@ -9,15 +9,29 @@ export type DatePresetItem = {
 export type DatePreset = DatePresetItem[];
 export type Dates = DateRange;
 export interface DateRangePickerProps extends DatePickerBaseProps {
+    /**
+     * 좌측 DatePreset 사용 유무
+     * @default false
+     */
     showDatePreset?: boolean;
+    /**
+     * [Dates Type](https://github.com/gpbl/react-day-picker/blob/master/packages/react-day-picker/src/types/Matchers.ts#L73)
+     */
     dates?: Dates;
     minDate?: Date;
     maxDate?: Date;
+    /**
+     * MaxRange 범위를 지정할 수 있습니다.
+     *  - [keyof Duration](https://github.com/date-fns/date-fns/blob/main/src/types.ts#L19)
+     */
     maxRange?: [number, keyof Duration];
+    /**
+     * DatePreset 타입에 맞는 사용자 지정 preset을 사용할 수 있습니다.
+     */
     customDatePreset?: DatePreset;
     /**
+     * 지정해서 보여지는 개월의 개수를 임의로 조정할 수 있습니다.
      * @default 2
-     * @desc 지정해서 보여지는 개월의 개수를 임의로 조정할 수 있습니다.
      */
     numberOfMonths?: number;
     onChange?: (start: Dates['from'], end: Dates['to']) => void;

package/dist/components/date-picker/DateRangePicker.stories.d.ts

@@ -5,7 +5,6 @@ export default _default;
 export declare const Base: any;
 export declare const Disabled: any;
 export declare const Error: any;
-export declare const Opened: any;
 export declare const ShowRemoveButton: any;
 export declare const NumberOfMonths: any;
 export declare const MinDate: any;

package/dist/components/divider/Divider.d.ts

@@ -5,12 +5,19 @@ export type DividerSize = 'small' | 'medium';
 export interface DividerProps {
     /** @default 'horizontal' */
     direction?: direction;
+    /**
+     * 간격을 설정할 수 있습니다.
+     *  - direction horizontal 일경우 상하 간격에 적용됩니다.
+     *  - direction vertical 일경우 좌우 간격에 적용됩니다.
+     */
     spacing?: CSSValueWithLength;
     /** @default 'small' */
     size?: DividerSize;
     /**
+     * 지정된 길이를 설정할 수 있습니다.
+     *  - 지정하지 않을 경우 direction horizontal 이라면 width 값이 100%로 고정됩니다.
+     *  - 지정하지 않을 경우 direction vertical 이라면 height값이 100%로 고정됩니다.
      * @default '100%'
-     * @desc 지정되지 않을 경우 horizontal 일경우 width 값이, vertical 일경우 height값이 100%로 고정됩니다.
      */
     length?: CSSValueWithLength;
 }

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

@@ -7,20 +7,28 @@ export interface DropdownOption<OptionValue> {
 }
 export interface DropdownProps<OptionValue> {
     className?: string;
+    /**
+     * Input 너비를 지정할 수 있습니다.
+     */
     width?: CSSValueWithLength;
     /**
-     * @desc Dropdown maxHeight값
+     * Dropdown OptionList maxHeight값
      * @default 400
      */
     maxHeight?: number;
-    /** @default 1030 */
+    /**
+     * 기본값으로 [ZIndexOrder](https://github.com/croquiscom/pds/blob/main/src/styles/zIndex.ts) 규칙을 적용합니다.
+     * @default 1030
+     */
     zIndex?: number;
     disabled?: boolean;
     options: Array<DropdownOption<OptionValue>>;
     placeholder?: string;
     value?: OptionValue;
     /**
-     * @desc floating 요소가 reference 영역을 넘어갈 경우 자동 위치 처리 사용 유무
+     * floating 요소가 reference 영역을 넘어갈 경우 자동 위치 처리 사용 유무
+     *  - 자동 위치 상/하만 적용됩니다.
+     * @default true
      */
     autoPlacement?: boolean;
     keyExtractor?: (item: DropdownOption<OptionValue>, index: number) => string | number;

package/dist/components/dropdown/DropdownInput.d.ts

@@ -6,6 +6,9 @@ export interface DropdownInputOption<OptionValue> {
     disabled?: boolean;
 }
 export interface DropdownInputProps<OptionValue> extends Omit<DropdownProps<OptionValue>, 'options' | 'keyExtractor' | 'onChange'> {
+    /**
+     * 입력된 검색결과를 전달합니다.
+     */
     onSearch?: (inputValue: string) => void;
     onChange?: (value: OptionValue | undefined) => void;
     options: Array<DropdownInputOption<OptionValue>>;

package/dist/components/file-upload/FileUpload.d.ts

@@ -14,21 +14,40 @@ export interface UploadFile {
 export interface FileUploadProps {
     className?: string;
     label?: ReactNode;
+    /**
+     * HTMLInputElement['accept']
+     */
     accept?: HTMLInputElement['accept'];
     disabled?: boolean;
+    /**
+     * HTMLInputElement['multiple']
+     */
     multiple?: boolean;
+    /**
+     * 최대 업로드 파일 갯수
+     */
     maxCount?: number;
     /**
+     * FileList내 삭제버튼 사용 유무
      * @default true
      */
     showRemoveButton?: boolean;
     /**
-     * @desc FileUploadButton과 함께 업로드된 FileList를 노출하려면 지정된 UploadFile 타입으로 전달해야합니다.
+     * FileList를 노출하려면 지정된 UploadFile 타입으로 전달해야합니다.
      */
     fileList?: UploadFile[];
     onChange?: (file: File | FileList) => void;
+    /**
+     * FileList 클릭시 인덱스 정보와 함께 전달합니다.
+     */
     onClickFile?: (file: UploadFile, index: number) => void;
+    /**
+     * 업로드 시도시 maxCount를 넘길 경우 전달합니다.
+     */
     onLimitMaxCount?: () => void;
+    /**
+     * 삭제 버튼 클릭시 인덱스 정보와 함께  전달합니다.
+     */
     onClickFileRemove?: (file: UploadFile, index: number) => void;
 }
 export declare const FileUpload: ({ className, accept, label, disabled, multiple, maxCount, showRemoveButton, fileList, onChange, onClickFile, onLimitMaxCount, onClickFileRemove, }: FileUploadProps) => JSX.Element;

package/dist/components/form/FormField.d.ts

@@ -4,9 +4,21 @@ import { CSSValueWithLength } from '../../styles';
 export interface FormFieldProps {
     className?: string;
     label?: ReactNode;
+    /**
+     * 라벨 우측 렌더링될 Addon 요소
+     */
     rightAddon?: ReactNode;
+    /**
+     * 라벨 필수(*) 표시 사용 유무
+     */
     required?: boolean;
+    /**
+     * HelpTextProps 타입으로 넘길 경우 라벨 우측 IconHelp14에 자동으로 popover 처리됩니다.
+     */
     helper?: HelpTextProps;
+    /**
+     * 최소너비 80px내에서 라벨 너비를 지정할 수 있습니다.
+     */
     labelWidth?: CSSValueWithLength;
 }
 export declare const FormField: ({ className, label, rightAddon, required, helper, labelWidth, children, }: PropsWithChildren<FormFieldProps>) => JSX.Element;

package/dist/components/form/FormField.stories.d.ts

@@ -4,7 +4,7 @@ import { FormField } from './FormField';
 declare const _default: ComponentMeta<({ className, label, rightAddon, required, helper, labelWidth, children, }: React.PropsWithChildren<import("./FormField").FormFieldProps>) => JSX.Element>;
 export default _default;
 export declare const Base: any;
-export declare const LabelWith: any;
+export declare const LabelWidth: any;
 export declare const WithRadioGroup: ComponentStory<typeof FormField>;
 export declare const WithCheckboxGroup: ComponentStory<typeof FormField>;
 export declare const WithHelpPopover: any;

package/dist/components/icons/generated/Locked16.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IconProps } from '.';
+declare const SvgLocked16: ({ size, color, secondaryColor, ...props }: IconProps) => JSX.Element;
+export default SvgLocked16;

package/dist/components/icons/generated/Message24.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IconProps } from '.';
+declare const SvgMessage24: ({ size, color, secondaryColor, ...props }: IconProps) => JSX.Element;
+export default SvgMessage24;

package/dist/components/icons/generated/index.d.ts

@@ -108,10 +108,12 @@ export { default as IconLoading24 } from './Loading24';
 export { default as IconLoadingDonuts30 } from './LoadingDonuts30';
 export { default as IconLoadingDots30 } from './LoadingDots30';
 export { default as IconLock18 } from './Lock18';
+export { default as IconLocked16 } from './Locked16';
 export { default as IconMarketing24 } from './Marketing24';
 export { default as IconMegaphone14 } from './Megaphone14';
 export { default as IconMemoAttention20 } from './MemoAttention20';
 export { default as IconMemoDefault20 } from './MemoDefault20';
+export { default as IconMessage24 } from './Message24';
 export { default as IconMinus20 } from './Minus20';
 export { default as IconMove10 } from './Move10';
 export { default as IconNew10 } from './New10';

package/dist/components/input/InputAffix.d.ts

@@ -6,9 +6,9 @@ export interface InputAffixProps {
     disabled?: boolean;
     status?: InputStatus;
     width?: CSSValueWithLength;
-    /** Addon Left */
+    /** Input 좌측에 렌더링될 Addon 요소 */
     prefix?: string;
-    /** Addon Right */
+    /** Input 우측에 렌더링될 Addon 요소 */
     suffix?: string;
 }
 export declare const InputAffix: ({ className, disabled, children, status, prefix, suffix, width, }: PropsWithChildren<InputAffixProps>) => JSX.Element;

package/dist/components/input/InputBase.d.ts

@@ -7,16 +7,19 @@ export interface InputBaseType {
     alignment?: InputAlignment;
     /** @default info */
     status?: InputStatus;
-    /** @desc 좌측 영역에 렌더링 될 요소 */
+    /** 좌측 영역에 렌더링 될 요소 */
     startElement?: ReactElement<IconProps> | ReactNode;
-    /** @desc 우측 영역에 렌더링 될 요소 */
+    /** 우측 영역에 렌더링 될 요소 */
     endElement?: ReactElement<IconProps> | ReactNode;
-    /** @desc prefix */
+    /** Input prefix 요소 */
     leftAddon?: InputAffixProps['prefix'];
-    /** @desc suffix */
+    /** Input suffix 요소 */
     rightAddon?: InputAffixProps['suffix'];
     width?: CSSValueWithLength;
-    /** @default false */
+    /**
+     * 입력된 value count 노출 여부
+     * @default false
+     */
     showCounter?: boolean;
 }
 export type InputBaseProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'width'> & InputBaseType;

package/dist/components/menu/Menu.d.ts

@@ -17,6 +17,9 @@ export declare const useMenuContext: () => MenuContextProps;
 export interface MenuProps extends HTMLAttributes<HTMLUListElement> {
     selectedMenu?: MenuContextProps['activeMenu'];
     onClickMenu?: (id: MenuContextProps['activeMenuGroup']) => void;
+    /**
+     * Toggle 기능 사용 여부
+     */
     toggleMode?: MenuContextProps['toggleMode'];
 }
 export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLUListElement>>;

package/dist/components/modal/AlertModal.d.ts

@@ -7,5 +7,5 @@ export interface AlertModalProps extends Omit<ConfirmModalProps, 'cancelText' |
      */
     kind?: NotificationKind;
 }
-export declare const AlertModal: ({ width, kind, dense, fill, title, confirmText, text, subtext, onConfirm, onExited, ...props }: AlertModalProps) => JSX.Element;
+export declare const AlertModal: ({ width, kind, dense, fill, title, confirmText, text, subtext, zIndex, onConfirm, onExited, ...props }: AlertModalProps) => JSX.Element;
 export declare const Alert: (properties: AlertModalProps) => Promise<void>;

package/dist/components/modal/AlertModal.stories.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { AlertModal, AlertModalProps } from './AlertModal';
-declare const _default: ComponentMeta<({ width, kind, dense, fill, title, confirmText, text, subtext, onConfirm, onExited, ...props }: AlertModalProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ width, kind, dense, fill, title, confirmText, text, subtext, zIndex, onConfirm, onExited, ...props }: AlertModalProps) => JSX.Element>;
 export default _default;
 export declare const Base: ComponentStory<typeof AlertModal>;
 export declare const Dense: ComponentStory<typeof AlertModal>;

package/dist/components/modal/ConfirmModal.d.ts

@@ -1,15 +1,21 @@
 import { ReactNode } from 'react';
 import { ModalOverlayBaseProps } from './ModalOverlay';
-export interface ConfirmModalProps extends Omit<ModalOverlayBaseProps, 'onClose' | 'fullScreen'> {
+export interface ConfirmModalProps extends Omit<ModalOverlayBaseProps, 'onClose'> {
     title: ReactNode;
     text?: ReactNode;
     subtext?: ReactNode;
+    /**
+     * 좁은 간격 사용 유무
+     */
     dense?: boolean;
     confirmText?: string;
     cancelText?: string;
+    /**
+     * onConfirm/onCancel이 호출된 직후 onClose가 호출됩니다.
+     */
     onConfirm?: () => void | Promise<void>;
     onCancel?: () => void | Promise<void>;
     onClose?: () => void | Promise<void>;
 }
-export declare const ConfirmModal: ({ title, width, dense, fill, text, subtext, confirmText, cancelText, onConfirm, onCancel, onClose, onExited, ...props }: ConfirmModalProps) => JSX.Element;
+export declare const ConfirmModal: ({ title, width, zIndex, dense, fill, text, subtext, confirmText, cancelText, onConfirm, onCancel, onClose, onExited, ...props }: ConfirmModalProps) => JSX.Element;
 export declare const Confirm: (properties: ConfirmModalProps) => Promise<boolean>;

package/dist/components/modal/ConfirmModal.stories.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { ConfirmModal } from './ConfirmModal';
-declare const _default: ComponentMeta<({ title, width, dense, fill, text, subtext, confirmText, cancelText, onConfirm, onCancel, onClose, onExited, ...props }: import("./ConfirmModal").ConfirmModalProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ title, width, zIndex, dense, fill, text, subtext, confirmText, cancelText, onConfirm, onCancel, onClose, onExited, ...props }: import("./ConfirmModal").ConfirmModalProps) => JSX.Element>;
 export default _default;
 export declare const Base: ComponentStory<typeof ConfirmModal>;
 export declare const Dense: ComponentStory<typeof ConfirmModal>;