@idbrnd/design-system 3.2.0 → 4.0.0

package/dist/components/DatePicker/DatePicker.types.d.ts

@@ -0,0 +1,118 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { TimePickerVariant } from '../TimePicker/TimePicker.types';
+/**
+ * - `normal`: 단일 날짜 선택, 달력 1개월 노출
+ * - `period`: 시작/종료 날짜 선택, 달력 1개월 노출
+ * - `range`: 시작/종료 날짜 선택, 연속된 2개월 동시 노출
+ * @defaultValue `'normal'`
+ */
+export type DatePickerVariant = 'normal' | 'period' | 'range';
+/**
+ * - `icon`: 아이콘 버튼 트리거. 텍스트 필드에 날짜 직접 입력 가능
+ * - `field`: 텍스트 필드 트리거. 클릭 시에만 달력이 열리고 직접 입력 불가
+ * @defaultValue `'icon'`
+ */
+export type DatePickerTrigger = 'icon' | 'field';
+/** Action area의 Main 버튼(적용) 스타일. @defaultValue `'fill'` */
+export type DatePickerActionMainType = 'fill' | 'text';
+export interface DatePickerDateRange {
+    start: Date | null;
+    end: Date | null;
+}
+/** Action area 커스텀 콘텐츠 함수형에 전달되는 인자 */
+export interface DatePickerActionRenderProps {
+    /** 기본 동작(오늘로 이동 / 적용)을 그대로 실행하는 핸들러. 커스텀 요소에 연결해 재사용할 수 있다 */
+    onClick: () => void;
+}
+/**
+ * Action area 슬롯 콘텐츠.
+ * - 미지정: 기본 콘텐츠(오늘 텍스트 버튼 / 적용 버튼) 노출
+ * - ReactNode: 완전히 다른 요소(체크박스, 아이콘 버튼 등)로 교체. 동작은 직접 구현해야 한다
+ * - 함수: 기본 동작 핸들러(`onClick`)를 전달받아, i18n 라벨 등 텍스트만 바꾼 커스텀 요소에 그대로 재사용할 수 있다
+ */
+export type DatePickerActionContent = ReactNode | ((props: DatePickerActionRenderProps) => ReactNode);
+interface DatePickerBaseProps {
+    /** 상단 heading(라벨) 텍스트. 미지정 시 라벨 영역이 노출되지 않는다. */
+    heading?: string;
+    /** 필수 입력 여부. heading 노출 시 `*`를 함께 표시한다. @defaultValue `false` */
+    required?: boolean;
+    /** 트리거 placeholder. @defaultValue `'YYYY-MM-DD'` */
+    placeholder?: string;
+    /** @defaultValue `'normal'` */
+    variant?: DatePickerVariant;
+    /** @defaultValue `'icon'` */
+    trigger?: DatePickerTrigger;
+    /** 전체 비활성화 여부. @defaultValue `false` */
+    disabled?: boolean;
+    /** 날짜 하단에 시간 입력(HH:MM)을 함께 노출할지 여부. @defaultValue `false` */
+    hasTime?: boolean;
+    /** hasTime일 때 시작/종료 시간 선택에 사용하는 TimePicker의 variant. @defaultValue `'aa-hh-mm'` */
+    timeVariant?: TimePickerVariant;
+    /** 팝오버 하단 액션 영역 노출 여부. `false`면 날짜 선택 즉시 onChange가 호출된다. @defaultValue `true` */
+    actionArea?: boolean;
+    /** Action area 내 보조 영역(기본: "오늘" 텍스트 버튼) 노출 여부. @defaultValue `true` */
+    actionSub?: boolean;
+    /** Action area 보조 영역 커스텀 콘텐츠. 미지정 시 기본 "오늘" 텍스트 버튼이 노출된다 */
+    actionSubContent?: DatePickerActionContent;
+    /** Action area 내 메인 영역(기본: "적용" 버튼) 노출 여부. @defaultValue `true` */
+    actionMain?: boolean;
+    /** Action area 메인 버튼 스타일. actionMainContent 지정 시 무시된다. @defaultValue `'text'` */
+    actionMainType?: DatePickerActionMainType;
+    /** Action area 메인 영역 커스텀 콘텐츠. 미지정 시 actionMainType에 따른 기본 "적용" 버튼이 노출된다 */
+    actionMainContent?: DatePickerActionContent;
+    /** 헤더의 년/월 라벨 클릭 시 년/월 빠른 선택 뷰로 전환할지 여부. @defaultValue `true` */
+    monthYearActionArea?: boolean;
+    /** 특정 날짜를 선택 불가 처리하는 판별 함수 */
+    isDateDisabled?: (date: Date) => boolean;
+    /** hasTime일 때 시작 시간 행의 라벨. @defaultValue `'시작'` */
+    startLabel?: string;
+    /** hasTime && (period|range)일 때 종료 시간 행의 라벨. @defaultValue `'종료'` */
+    endLabel?: string;
+    /**
+     * 캘린더 헤더/월·년 선택 라벨("2026년 8월") 포맷을 재정의한다. i18n 등에 사용.
+     * month는 1~12 값으로 전달된다. 미지정 시 `${year}년 ${month}월` 형식을 사용한다.
+     */
+    formatMonthYear?: (year: number, month: number) => string;
+    /**
+     * 트리거/시간 선택 박스에 표시되는 시간("오전 08:06") 포맷을 재정의한다. i18n 등에 사용.
+     * hours는 0~23(24시간제) 값으로 전달된다. 미지정 시 `오전/오후 HH:MM` 형식을 사용한다.
+     */
+    formatTime?: (hours: number, minutes: number) => string;
+    /** 시간 선택 휠 팝오버의 "현재" 버튼 라벨. @defaultValue `'현재'` */
+    timeNowLabel?: string;
+    /** 연/월 선택 드롭다운의 "초기화" 버튼 라벨. @defaultValue `'초기화'` */
+    monthYearResetLabel?: string;
+    /** 시간/연·월 선택 휠 팝오버 공용 "적용" 버튼 라벨. @defaultValue `'적용'` */
+    wheelApplyLabel?: string;
+    /**
+     * 캘린더 요일 라벨. 월요일을 첫 컬럼으로 배치하므로 월요일부터 순서대로 7개를 전달해야 한다.
+     * 미지정 시 `['월', '화', '수', '목', '금', '토', '일']`을 사용한다.
+     */
+    weekdayLabels?: readonly string[];
+    /** 시간 선택 휠의 오전(AM) 라벨. @defaultValue `'오전'` */
+    amLabel?: string;
+    /** 시간 선택 휠의 오후(PM) 라벨. @defaultValue `'오후'` */
+    pmLabel?: string;
+    /** 이전 달 이동 버튼의 aria-label. @defaultValue `'이전 달'` */
+    prevMonthLabel?: string;
+    /** 다음 달 이동 버튼의 aria-label. @defaultValue `'다음 달'` */
+    nextMonthLabel?: string;
+    /** 트리거의 달력 열기 아이콘 버튼 aria-label. @defaultValue `'달력 열기'` */
+    openCalendarLabel?: string;
+    /** hasTime일 때 시간 선택 박스에 값이 없을 때 노출되는 placeholder. @defaultValue `'AA HH:MM'` */
+    timePlaceholder?: string;
+    /** 루트 컨테이너에 적용할 추가 style */
+    customStyle?: CSSProperties;
+}
+export interface DatePickerNormalProps extends DatePickerBaseProps {
+    variant?: 'normal';
+    value: Date | null;
+    onChange: (value: Date | null) => void;
+}
+export interface DatePickerPeriodProps extends DatePickerBaseProps {
+    variant: 'period' | 'range';
+    value: DatePickerDateRange;
+    onChange: (value: DatePickerDateRange) => void;
+}
+export type DatePickerProps = DatePickerNormalProps | DatePickerPeriodProps;
+export {};

package/dist/components/DatePicker/MonthYearSelect.d.ts

@@ -0,0 +1,15 @@
+interface MonthYearSelectProps {
+    year: number;
+    month: number;
+    onChange: (year: number, month: number) => void;
+    /** false면 클릭해도 열리지 않는 정적 라벨로 렌더링한다 */
+    disabled?: boolean;
+    /** "2026년 8월" 라벨 포맷을 재정의한다. month는 1~12 값으로 전달된다 */
+    formatLabel?: (year: number, month: number) => string;
+    /** 드롭다운의 "초기화" 버튼 라벨. @defaultValue '초기화' */
+    resetLabel?: string;
+    /** 드롭다운의 "적용" 버튼 라벨. @defaultValue '적용' */
+    applyLabel?: string;
+}
+declare function MonthYearSelect({ year, month, onChange, disabled, formatLabel, resetLabel, applyLabel, }: MonthYearSelectProps): import("react/jsx-runtime").JSX.Element;
+export default MonthYearSelect;

package/dist/components/DatePicker/dateUtils.d.ts

@@ -0,0 +1,33 @@
+/** buildMonthGrid가 월요일을 첫 컬럼으로 배치하므로 라벨도 월요일부터 시작해야 한다 */
+export declare const WEEKDAY_LABELS: readonly ["월", "화", "수", "목", "금", "토", "일"];
+export interface CalendarDay {
+    date: Date;
+    inCurrentMonth: boolean;
+}
+export declare function startOfDay(date: Date): Date;
+export declare function isSameDay(a: Date | null, b: Date | null): boolean;
+export declare function isSameMonth(a: Date, b: Date): boolean;
+export declare function isBefore(a: Date, b: Date): boolean;
+export declare function isAfter(a: Date, b: Date): boolean;
+export declare function isWithinRange(date: Date, start: Date | null, end: Date | null): boolean;
+export declare function addMonths(year: number, month: number, delta: number): {
+    year: number;
+    month: number;
+};
+/** 항상 6주(6x7)로 구성된 달력 그리드를 생성한다 (앞/뒤 달 날짜 포함) */
+export declare function buildMonthGrid(year: number, month: number): CalendarDay[][];
+export declare function formatDate(date: Date | null): string;
+export declare function parseDate(value: string): Date | null;
+export declare function parseTime(value: string): {
+    hours: number;
+    minutes: number;
+} | null;
+export declare function withTime(date: Date, hours: number, minutes: number): Date;
+export declare function today(): Date;
+/**
+ * 날짜 직접 입력 필드에 숫자를 입력하면 4번째, 6번째 자리 뒤에 "-"를 자동으로 붙인다.
+ * "~"로 구분된 두 번째 날짜(기간 선택)에도 동일하게 적용된다.
+ * 자동으로 붙은 "-"를 backspace로 지웠을 때 아무 반응이 없어 보이는 걸 막기 위해,
+ * 직전 값과 비교해 실제로는 숫자 하나가 지워진 것으로 처리한다.
+ */
+export declare function formatDateInputMask(nextRaw: string, prevRaw: string): string;

package/dist/components/Feedback/EmptyState/EmptyState.d.ts

@@ -0,0 +1,30 @@
+import type { CSSProperties, ReactNode } from 'react';
+export type EmptyStateSize = 'large' | 'medium' | 'small';
+export interface EmptyStateProps {
+    /** 배치 구역의 크기·위계에 따른 사이즈 */
+    size?: EmptyStateSize;
+    /**
+     * 상단 시각 요소 슬롯. 일러스트·아이콘·이미지·임의의 컴포넌트를 모두 받는다.
+     * 넘기지 않으면 영역 자체를 렌더하지 않는다.
+     */
+    visualContent?: ReactNode;
+    /**
+     * 타이틀. 상황을 짧게 요약하며 단일 행을 권장한다.
+     * 넘기지 않으면 영역 자체를 렌더하지 않는다.
+     */
+    headingContent?: ReactNode;
+    /**
+     * 설명. 개행(`\n`)이 그대로 반영되며, 줄 수는 제한하지 않는다 (가이드상 두 줄 권장).
+     * 넘기지 않으면 영역 자체를 렌더하지 않는다.
+     */
+    descriptionContent?: ReactNode;
+    /**
+     * CTA 버튼 슬롯. 소비처가 원하는 버튼 컴포넌트를 직접 넣는다.
+     * 넘기지 않으면 영역 자체를 렌더하지 않는다.
+     */
+    buttonContent?: ReactNode;
+    customStyle?: CSSProperties;
+    className?: string;
+}
+declare function EmptyState({ size, visualContent, headingContent, descriptionContent, buttonContent, customStyle, className }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export default EmptyState;

package/dist/components/Feedback/Modal/Modal.d.ts

@@ -0,0 +1,3 @@
+import type { ModalProps } from "./Modal.types";
+declare function Modal({ open, onClose, size, type, heading, navBar, showClose, navLeadingSlot, navTrailingSlot, mainAction, subAction, actionSlot, closeOnEsc, closeOnDimClick, customStyle, className, children, }: ModalProps): import("react").ReactPortal | null;
+export default Modal;

package/dist/components/Feedback/Modal/Modal.types.d.ts

@@ -0,0 +1,48 @@
+import type { CSSProperties, ReactNode } from "react";
+export type ModalSize = "small" | "medium" | "large";
+export type ModalType = "fixed" | "hug";
+export interface ModalAction {
+    label: string;
+    onClick: () => void;
+    loading?: boolean;
+    disabled?: boolean;
+}
+export interface ModalProps {
+    /** 모달 표시 여부 (controlled) */
+    open: boolean;
+    /** ESC 키·닫기 버튼·딤 클릭으로 닫힐 때 호출 */
+    onClose: () => void;
+    /** 모달 너비 프리셋 @defaultValue 'medium' */
+    size?: ModalSize;
+    /**
+     * 너비 결정 방식
+     * - `fixed`: size별 고정 너비 (440 / 840 / 1440)
+     * - `hug`: 콘텐츠에 맞춰 size별 min~max 범위에서 결정
+     * @defaultValue 'fixed'
+     */
+    type?: ModalType;
+    /** 헤더 타이틀 — 문자열 또는 임의의 ReactNode */
+    heading?: ReactNode;
+    /** 헤더(Nav Bar) 노출 여부 @defaultValue true */
+    navBar?: boolean;
+    /** 헤더 우측 끝 닫기(X) 버튼 노출 여부 @defaultValue true */
+    showClose?: boolean;
+    /** 헤더 좌측 슬롯 */
+    navLeadingSlot?: ReactNode;
+    /** 헤더 우측 슬롯 (닫기 버튼 왼쪽에 배치) */
+    navTrailingSlot?: ReactNode;
+    /** 메인 액션 — FillButton으로 렌더링 */
+    mainAction?: ModalAction;
+    /** 서브 액션 — OutlineButton으로 렌더링 (메인 액션 좌측) */
+    subAction?: ModalAction;
+    /** 지정 시 mainAction/subAction 대신 액션 영역을 통째로 교체 */
+    actionSlot?: ReactNode;
+    /** ESC 키로 닫기 허용 @defaultValue true */
+    closeOnEsc?: boolean;
+    /** 딤 클릭으로 닫기 허용 @defaultValue false */
+    closeOnDimClick?: boolean;
+    customStyle?: CSSProperties;
+    className?: string;
+    /** 콘텐츠 영역 */
+    children?: ReactNode;
+}

package/dist/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,4 @@
+import type { TimePickerProps } from "./TimePicker.types";
+export type { TimePickerActionContent, TimePickerActionMainType, TimePickerActionRenderProps, TimePickerProps, TimePickerTrigger, TimePickerValue, TimePickerVariant, } from "./TimePicker.types";
+declare function TimePicker(props: TimePickerProps): import("react/jsx-runtime").JSX.Element;
+export default TimePicker;

package/dist/components/TimePicker/TimePicker.types.d.ts

@@ -0,0 +1,88 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { TimePickerValue, TimePickerVariant } from './timeUtils';
+export type { TimePickerValue, TimePickerVariant } from './timeUtils';
+/**
+ * - `icon`: 아이콘 버튼 트리거. 텍스트 필드에 시간 직접 입력 가능.
+ *   단, variant가 `aa-hh-mm`/`aa-hh`(오전/오후 컬럼 포함)면 amLabel/pmLabel 문자열을 그대로
+ *   입력받아야 해서 국제화가 불가능하므로 직접 입력이 비활성화되고 `field`처럼 동작한다.
+ *   `hh-mm`(24시간제)에서만 실제로 직접 입력이 가능하다.
+ * - `field`: 텍스트 필드 트리거. 클릭 시에만 팝오버가 열리고 직접 입력 불가
+ * - `compact`: heading 없이 값/placeholder만 노출하는 작은 셀렉트박스 트리거.
+ *   직접 입력은 지원하지 않는다. DatePicker의 시작/종료 시간 필드처럼 다른 컴포넌트 안에
+ *   인라인으로 임베드할 때 사용한다.
+ * @defaultValue `'icon'`
+ */
+export type TimePickerTrigger = 'icon' | 'field' | 'compact';
+/** Action area의 Main 버튼(적용) 스타일. @defaultValue `'text'` */
+export type TimePickerActionMainType = 'fill' | 'text';
+/** Action area 커스텀 콘텐츠 함수형에 전달되는 인자 */
+export interface TimePickerActionRenderProps {
+    /** 기본 동작(현재 시각으로 이동 / 적용)을 그대로 실행하는 핸들러. 커스텀 요소에 연결해 재사용할 수 있다 */
+    onClick: () => void;
+}
+/**
+ * Action area 슬롯 콘텐츠.
+ * - 미지정: 기본 콘텐츠(현재 텍스트 버튼 / 적용 버튼) 노출
+ * - ReactNode: 완전히 다른 요소로 교체. 동작은 직접 구현해야 한다
+ * - 함수: 기본 동작 핸들러(`onClick`)를 전달받아, i18n 라벨 등 텍스트만 바꾼 커스텀 요소에 그대로 재사용할 수 있다
+ */
+export type TimePickerActionContent = ReactNode | ((props: TimePickerActionRenderProps) => ReactNode);
+export interface TimePickerProps {
+    /** 현재 선택된 값 */
+    value: TimePickerValue | null;
+    /** 값 변경 시 호출되는 콜백 */
+    onChange: (value: TimePickerValue) => void;
+    /**
+     * - `aa-hh-mm`: 오전/오후 + 12시간제 시 + 분 (3열)
+     * - `aa-hh`: 오전/오후 + 12시간제 시 (분 없음, 2열)
+     * - `hh-mm`: 24시간제 시 + 분 (오전/오후 없음, 2열)
+     * @defaultValue `'aa-hh-mm'`
+     */
+    variant?: TimePickerVariant;
+    /** @defaultValue `'icon'` */
+    trigger?: TimePickerTrigger;
+    /** 상단 heading(라벨) 텍스트. 미지정 시 라벨 영역이 노출되지 않는다. */
+    heading?: string;
+    /** 필수 입력 여부. heading 노출 시 `*`를 함께 표시한다. @defaultValue `false` */
+    required?: boolean;
+    /** 트리거 placeholder. 미지정 시 variant에 맞는 형식(`"AA HH:MM"` 등)을 사용한다 */
+    placeholder?: string;
+    /** 전체 비활성화 여부. @defaultValue `false` */
+    disabled?: boolean;
+    /** 팝오버 하단 액션 영역 노출 여부. `false`면 값 선택 즉시 onChange가 호출된다. @defaultValue `true` */
+    actionArea?: boolean;
+    /** Action area 내 보조 영역(기본: "현재" 텍스트 버튼) 노출 여부. @defaultValue `true` */
+    actionSub?: boolean;
+    /** Action area 보조 영역 커스텀 콘텐츠. 미지정 시 기본 "현재" 텍스트 버튼이 노출된다 */
+    actionSubContent?: TimePickerActionContent;
+    /** Action area 내 메인 영역(기본: "적용" 버튼) 노출 여부. @defaultValue `true` */
+    actionMain?: boolean;
+    /** Action area 메인 버튼 스타일. actionMainContent 지정 시 무시된다. @defaultValue `'text'` */
+    actionMainType?: TimePickerActionMainType;
+    /** Action area 메인 영역 커스텀 콘텐츠. 미지정 시 actionMainType에 따른 기본 "적용" 버튼이 노출된다 */
+    actionMainContent?: TimePickerActionContent;
+    /** 휠 팝오버의 "현재" 버튼 라벨. @defaultValue `'현재'` */
+    nowLabel?: string;
+    /** 휠 팝오버의 "적용" 버튼 라벨. @defaultValue `'적용'` */
+    applyLabel?: string;
+    /** 오전(AM) 라벨. @defaultValue `'오전'` */
+    amLabel?: string;
+    /** 오후(PM) 라벨. @defaultValue `'오후'` */
+    pmLabel?: string;
+    /**
+     * 트리거에 표시되는 시간("오전 08:06") 포맷을 재정의한다. i18n 등에 사용.
+     * hours는 0~23(24시간제) 값으로 전달된다. 미지정 시 variant에 맞는 기본 형식을 사용한다.
+     */
+    formatTime?: (hours: number, minutes: number) => string;
+    /** 트리거의 시간 선택 아이콘 버튼 aria-label. @defaultValue `'시간 선택 열기'` */
+    openLabel?: string;
+    /** 루트 컨테이너에 적용할 추가 style */
+    customStyle?: CSSProperties;
+    /**
+     * @internal 팝오버 DOM 노드가 마운트/언마운트될 때 호출된다.
+     * TimePicker를 다른 컴포넌트(DatePicker 등)에 임베드할 때, 팝오버가 `document.body`에
+     * 별도로 포탈되어 부모의 outside-click/scroll 판정에서 "바깥"으로 오인되는 것을 막기 위해
+     * 부모가 이 팝오버 노드를 자신의 컨테인먼트 체크에 포함시킬 수 있도록 노출한다.
+     */
+    onPopoverRef?: (node: HTMLDivElement | null) => void;
+}

package/dist/components/TimePicker/timeUtils.d.ts

@@ -0,0 +1,27 @@
+export interface TimePickerValue {
+    hours: number;
+    minutes: number;
+}
+/**
+ * - `aa-hh-mm`: 오전/오후 + 12시간제 시 + 분 (3열)
+ * - `aa-hh`: 오전/오후 + 12시간제 시 (분 없음, 2열)
+ * - `hh-mm`: 24시간제 시 + 분 (오전/오후 없음, 2열)
+ */
+export type TimePickerVariant = 'aa-hh-mm' | 'aa-hh' | 'hh-mm';
+type Period = 'AM' | 'PM';
+export declare function hasMinuteColumn(variant: TimePickerVariant): boolean;
+export declare function hasPeriodColumn(variant: TimePickerVariant): boolean;
+export declare function toPeriod(hours: number): Period;
+export declare function toHour12(hours: number): number;
+export declare function toHours24(period: Period, hour12: number): number;
+/** 트리거/텍스트에 노출되는 기본 표시 포맷. amLabel/pmLabel로 i18n 라벨을 대체할 수 있다 */
+export declare function formatTimePickerValue(value: TimePickerValue, variant: TimePickerVariant, amLabel?: string, pmLabel?: string): string;
+/**
+ * 직접 입력 마스킹. 선행 비-숫자 문자(예: "오전")는 그대로 접두로 보존하고,
+ * 숫자 부분만 variant에 맞춰(HH 또는 HH:MM) 자동으로 ":"를 붙인다.
+ * 자동으로 붙은 ":"를 backspace로 지웠을 때도 숫자 하나가 지워지도록 보정한다.
+ */
+export declare function formatTimeInputMask(nextRaw: string, prevRaw: string, variant: TimePickerVariant): string;
+/** 직접 입력된 텍스트를 파싱한다. 형식이 맞지 않으면 null을 반환한다 */
+export declare function parseTimeInput(text: string, variant: TimePickerVariant, amLabel?: string, pmLabel?: string): TimePickerValue | null;
+export {};

package/dist/components/shared/WheelColumn.d.ts

@@ -0,0 +1,11 @@
+export type WheelColumnAlign = 'center' | 'top';
+interface WheelColumnProps<T extends string | number> {
+    items: T[];
+    value: T;
+    onChange: (value: T) => void;
+    format?: (item: T) => string;
+    /** 활성 항목을 컬럼의 중앙(center) 또는 최상단(top)에 정렬한다. @defaultValue 'center' */
+    align?: WheelColumnAlign;
+}
+declare function WheelColumn<T extends string | number>({ items, value, onChange, format, align, }: WheelColumnProps<T>): import("react/jsx-runtime").JSX.Element;
+export default WheelColumn;

package/dist/icons/generated/CalendarIcon.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../Icon.types";
+declare const CalendarIcon: ({ size, color, style, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default CalendarIcon;

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

@@ -14,6 +14,7 @@ export { default as BookFillIcon } from "./BookFillIcon";
 export { default as BookIcon } from "./BookIcon";
 export { default as BotIcon } from "./BotIcon";
 export { default as BuildingIcon } from "./BuildingIcon";
+export { default as CalendarIcon } from "./CalendarIcon";
 export { default as CarbonIcon } from "./CarbonIcon";
 export { default as CaretDownIcon } from "./CaretDownIcon";
 export { default as CaretUpIcon } from "./CaretUpIcon";

package/dist/icons/iconMap.d.ts

@@ -15,6 +15,7 @@ export declare const iconMap: {
     readonly book: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly bot: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly building: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
+    readonly calendar: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly carbon: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "caret-down": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "caret-up": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -28,10 +28,14 @@ export { default as ToggleSwitch } from "./components/Control/ToggleSwitch/Toggl
 export type { CheckBoxProps, CheckBoxVariant, CheckBoxSize, CheckBoxDensity, } from "./components/Control/CheckBox/CheckBox";
 export type { RadioProps, RadioVariant, RadioSize, RadioDensity, } from "./components/Control/Radio/Radio";
 export type { ToggleSwitchProps, ToggleSwitchSize, } from "./components/Control/ToggleSwitch/ToggleSwitch";
+export { default as EmptyState } from "./components/Feedback/EmptyState/EmptyState";
+export { default as Modal } from "./components/Feedback/Modal/Modal";
+export type { ModalProps, ModalSize, ModalType, ModalAction, } from "./components/Feedback/Modal/Modal.types";
 export { default as PushBadge } from "./components/Feedback/PushBadge/PushBadge";
 export { dismissToast, showToast } from "./components/Feedback/Toast/Toast";
 export { dismissSnackbar, showSnackbar, } from "./components/Feedback/Snackbar/Snackbar";
 export { default as Spinner, Clip, CustomSpinner, FadeSpinner, } from "./components/Spinner/Spinner";
+export type { EmptyStateProps, EmptyStateSize, } from "./components/Feedback/EmptyState/EmptyState";
 export type { PushBadgeProps, PushBadgeVariant, } from "./components/Feedback/PushBadge/PushBadge";
 export type { ToastShowOptions, ToastVariant, } from "./components/Feedback/Toast/Toast";
 export type { SnackbarShowOptions, SnackbarVariant, } from "./components/Feedback/Snackbar/Snackbar";
@@ -46,6 +50,10 @@ export { default as StateBadge } from "./components/Content/StateBadge/StateBadg
 export type { StateBadgeProps, StateBadgeVariant, StateBadgeSize, } from "./components/Content/StateBadge/StateBadge";
 export { default as Select } from "./components/Select/Select";
 export type { SelectProps, SelectVariant, SelectSize, SelectType, SelectAlign, } from "./components/Select/Select";
+export { default as DatePicker } from "./components/DatePicker/DatePicker";
+export type { DatePickerActionContent, DatePickerActionMainType, DatePickerActionRenderProps, DatePickerDateRange, DatePickerProps, DatePickerTrigger, DatePickerVariant, } from "./components/DatePicker/DatePicker";
+export { default as TimePicker } from "./components/TimePicker/TimePicker";
+export type { TimePickerActionContent, TimePickerActionMainType, TimePickerActionRenderProps, TimePickerProps, TimePickerTrigger, TimePickerValue, TimePickerVariant, } from "./components/TimePicker/TimePicker";
 export { default as Dropdown } from "./components/Dropdown/Dropdown";
 export type { DropdownProps, DropdownType, DropdownAlign, DropdownOption, } from "./components/Dropdown/Dropdown.types";
 export { default as Chip } from "./components/Chip/Chip/Chip";