@hivcd-printshop/design-system 1.1.0 → 1.2.0

package/dist/index.d.mts

@@ -1,4 +1,5 @@
 import * as react from 'react';
+import react__default, { ReactNode, ComponentType, AnchorHTMLAttributes, Ref } from 'react';
 
 interface BackButtonProps {
     onClick?: () => void;
@@ -6,15 +7,241 @@ interface BackButtonProps {
 }
 declare const BackButton: ({ onClick, className }: BackButtonProps) => react.JSX.Element;
 
-interface CTAProps {
+interface CTAProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     primary?: boolean;
-    variable: CTAVariable;
+    alert?: boolean;
+    disabled?: boolean;
     label: string;
     onClick?: () => void;
     className?: string;
+    forModal?: boolean;
 }
-type CTAVariable = "disabled" | "default" | "pressed";
-declare const CTA: ({ primary, variable, label, onClick, className, }: CTAProps) => react.JSX.Element;
+declare const CTA: ({ primary, alert, disabled, label, onClick, className, forModal, ...props }: CTAProps) => react.JSX.Element;
+
+interface BaseProps$1 {
+    children: ReactNode;
+    className?: string;
+}
+declare const MultiColumn: (({ children, className }: BaseProps$1) => react__default.JSX.Element) & {
+    Columns: ({ children, className }: BaseProps$1) => react__default.JSX.Element;
+    CTAs: ({ children, className }: BaseProps$1) => react__default.JSX.Element | null;
+};
+
+interface ColumnProps {
+    className?: string;
+    children: React.ReactNode;
+    /**
+     * 컬럼 상단 제목. 생략하면 제목 영역을 렌더링하지 않으며,
+     * 이 경우 children 안에서 `ColumnSubTitle`로 섹션 제목을 직접 배치할 수 있다.
+     */
+    header?: string;
+}
+declare const Column: ({ className, children, header }: ColumnProps) => react.JSX.Element;
+
+interface ColumnContentContainerProps {
+    className?: string;
+    children: React.ReactNode;
+}
+declare const ColumnContentContainer: ({ className, children }: ColumnContentContainerProps) => react.JSX.Element;
+
+interface ColumnLabelProps {
+    className?: string;
+    children: string;
+    subLabel?: string;
+    htmlFor?: string;
+}
+declare const ColumnLabel: ({ className, children, subLabel, htmlFor }: ColumnLabelProps) => react.JSX.Element;
+
+interface ColumnTextProps {
+    className?: string;
+    children?: string | React.ReactNode;
+    onClick?: () => void;
+    alert?: boolean;
+}
+declare const ColumnTextStyle = "text-body3-book text-strong";
+declare const ModalTextStyle = "text-body1-regular text-primary";
+declare const ColumnText: ({ className, alert, children, onClick }: ColumnTextProps) => react.JSX.Element;
+
+interface ColumnSubTitleProps {
+    className?: string;
+    children: React.ReactNode;
+    /** 우측에 부연 아이콘/버튼 등을 배치할 때 사용 (예: 도움말 아이콘) */
+    action?: React.ReactNode;
+    as?: "h2" | "h3" | "h4" | "header";
+}
+/**
+ * Column 내부의 섹션 구분용 부제목.
+ * 예: "예약 정보", "예약자 정보", "예약 시 주의사항"
+ */
+declare const ColumnSubTitle: ({ className, children, action, as: Tag, }: ColumnSubTitleProps) => react.JSX.Element;
+
+interface BasicFormFieldProps {
+    children: React.ReactNode;
+    isDanger?: boolean;
+    dangerText?: string;
+    className?: string;
+}
+declare const BasicFormField: ({ children, isDanger, dangerText, className, }: BasicFormFieldProps) => react.JSX.Element;
+declare const getInputStyles: (isDanger?: boolean, additionalClass?: string) => string;
+
+interface FormTextProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    isDanger?: boolean;
+    dangerText?: string;
+}
+declare const FormText: ({ className, isDanger, dangerText, ...props }: FormTextProps) => react.JSX.Element;
+
+interface FormTextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    isDanger?: boolean;
+    dangerText?: string;
+}
+declare const FormTextArea: ({ className, isDanger, dangerText, ...props }: FormTextAreaProps) => react.JSX.Element;
+
+interface FormNumberProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    isDanger?: boolean;
+    dangerText?: string;
+}
+declare const FormNumber: ({ className, isDanger, dangerText, ...props }: FormNumberProps) => react.JSX.Element;
+
+interface FormPasswordProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    isDanger?: boolean;
+    dangerText?: string;
+}
+declare const FormPassword: ({ className, isDanger, dangerText, ...props }: FormPasswordProps) => react.JSX.Element;
+
+interface FormTelProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    isDanger?: boolean;
+    dangerText?: string;
+}
+declare const FormTel: ({ className, isDanger, dangerText, onChange, ...props }: FormTelProps) => react.JSX.Element;
+
+interface FormColorProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+    isDanger?: boolean;
+    dangerText?: string;
+}
+declare const FormColor: ({ className, isDanger, dangerText, value, defaultValue, onChange, ...props }: FormColorProps) => react.JSX.Element;
+
+interface FormFileProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+    isDanger?: boolean;
+    dangerText?: string;
+    fileUrl?: string;
+    filename?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+declare const FormFile: ({ className, isDanger, dangerText, placeholder, fileUrl, filename, onChange, ...props }: FormFileProps) => react.JSX.Element;
+
+interface FormCheckBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "checked"> {
+    isChecked: boolean;
+    setIsChecked: (checked: boolean) => void;
+    children?: React.ReactNode;
+    className?: string;
+    textStyle?: string;
+}
+declare const FormCheckBox: ({ isChecked, setIsChecked, children, className, textStyle, ...props }: FormCheckBoxProps) => react.JSX.Element;
+
+interface FormSelectBoxProps {
+    options: string[];
+    value: string;
+    onChange: (option: string) => void;
+    placeholder?: string;
+    isDanger?: boolean;
+    dangerText?: string;
+    className?: string;
+}
+declare const FormSelectBox: ({ options, value, onChange, placeholder, isDanger, dangerText, className, }: FormSelectBoxProps) => react.JSX.Element;
+
+interface SelectBoxOptionProps {
+    label: string;
+    onClick: () => void;
+    className?: string;
+}
+declare const SelectBoxOption: ({ label, onClick, className, }: SelectBoxOptionProps) => react.JSX.Element;
+
+type CommonProps = {
+    children: React.ReactNode;
+    /** 텍스트 앞/뒤에 붙는 아이콘 (예: 도움말 ⓘ, 경고 아이콘) */
+    icon?: React.ReactNode;
+    iconPosition?: "left" | "right";
+    /** 위험/경고 강조 색상 */
+    alert?: boolean;
+    /** 밑줄 표시 여부 (기본 true) */
+    underline?: boolean;
+    className?: string;
+};
+type TextButtonProps = CommonProps & (({
+    href: string;
+} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof CommonProps>) | ({
+    href?: undefined;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof CommonProps>));
+/**
+ * 인라인 텍스트 버튼/링크.
+ * 예: "파일 제작 가이드", "파일 첨부", "더 보기", "다시 시도"
+ */
+declare const TextButton: ({ children, icon, iconPosition, alert, underline, className, ...props }: TextButtonProps) => react.JSX.Element;
+
+interface DropdownProps {
+    selectedLabel: string;
+    setSelectedLabel: (label: string) => void;
+    labels: string[];
+    className?: string;
+}
+declare const Dropdown: ({ selectedLabel, setSelectedLabel, labels, className }: DropdownProps) => react.JSX.Element;
+
+interface TagProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    className?: string;
+    children: string | React.ReactNode;
+    selected?: boolean;
+    onClick?: () => void;
+    bgColor?: string;
+}
+declare const Tag: ({ className, children, selected, disabled, bgColor, onClick, ...props }: TagProps) => react.JSX.Element;
+
+interface ListProps extends Omit<React.HTMLAttributes<HTMLLIElement>, "children"> {
+    className?: string;
+    label1?: string;
+    label2?: string;
+    label2OnClick?: () => void;
+    label3?: string;
+    disabled?: boolean;
+    selected?: boolean;
+    onClick?: () => void;
+    children?: React.ReactElement<TagProps> | React.ReactElement<TagProps>[];
+}
+declare function List({ className, label1, label2, label2OnClick, label3, disabled, selected, onClick, children, ...props }: ListProps): react.JSX.Element;
+
+interface ModalProps {
+    isVisible: boolean;
+    header: string;
+    children: react__default.ReactNode;
+    className?: string;
+}
+interface BaseProps {
+    children: react__default.ReactNode;
+    className?: string;
+    row?: boolean;
+}
+declare const Modal: (({ isVisible, header, children, className }: ModalProps) => react__default.JSX.Element | null) & {
+    Contents: ({ children, className }: BaseProps) => react__default.JSX.Element;
+    CTAs: ({ children, className, row }: BaseProps) => react__default.JSX.Element | null;
+};
+
+interface ModalTextProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const ModalText: ({ children, className }: ModalTextProps) => react.JSX.Element;
+
+declare const IconChevronDownXS: ({ className, stroke, }: {
+    className?: string;
+    stroke?: string;
+}) => react.JSX.Element;
+declare const IconCheck: ({ className, stroke }: {
+    className?: string;
+    stroke?: string;
+}) => react.JSX.Element;
+declare const IconInfo: ({ className, stroke }: {
+    className?: string;
+    stroke?: string;
+}) => react.JSX.Element;
 
 interface CategorySegmentProps {
     selected?: boolean;
@@ -70,9 +297,21 @@ type PrintColor$1 = "Plotter" | "Printer" | "Riso" | "Fluorescent" | "UV" | "See
 type RadioToggle = {
     title: string;
     content: string;
+    /**
+     * 선택 상태를 식별할 값. 표시 텍스트(title)와 분리하고 싶을 때 사용한다.
+     * 생략하면 title이 식별자로 쓰인다. onSelect도 이 값을 넘겨준다.
+     */
+    value?: string;
     badges?: string[];
-    /** 선택됐을 때 라디오 행에 입힐 배경색. 없으면 회색(gray00)으로 표시 */
+    /** 선택됐을 때 라디오 행에 입힐 배경색(팔레트). `color`가 있으면 무시된다. */
     printColor?: PrintColor$1;
+    /**
+     * 선택됐을 때 라디오 행에 입힐 임의 배경색(hex/rgb/CSS 변수 등).
+     * 고정 팔레트(printColor) 밖의 색이 필요할 때 사용한다.
+     */
+    color?: string;
+    /** 라디오 행(button)에 덧붙일 클래스. 보더/그룹 구분 등 앱별 커스터마이징 훅. */
+    className?: string;
     labelTextButton?: string;
     onClickTextButton?: () => void;
 };
@@ -80,42 +319,55 @@ interface SideRadioAccordionProps {
     step: number;
     title: string;
     radioToggleList: RadioToggle[];
-    /** 처음에 선택돼 있을 항목의 title */
+    /** controlled: 현재 선택된 항목의 value(없으면 title). `null`이면 미선택. */
+    selected?: string | null;
+    /** uncontrolled 초기 선택값. `selected`를 함께 주면 무시된다. */
     defaultSelected?: string;
-    onSelect?: (title: string) => void;
+    /** 선택이 바뀔 때 호출. 인자는 항목의 value(없으면 title). */
+    onSelect?: (value: string) => void;
+    /** 헤더(Stepper)를 스크롤 컨테이너 상단에 고정한다. */
+    stickyHeader?: boolean;
+    /** 헤더 클릭으로 접기/펼치기를 허용할지. false면 항상 펼쳐지고 chevron도 감춘다. 기본 true. */
+    collapsible?: boolean;
+    /** uncontrolled 펼침 초기값. 기본 true. */
+    defaultOpen?: boolean;
+    /** controlled 펼침 상태. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
     quantityLimitLabel?: string;
     onClickQuantityLimit?: () => void;
     className?: string;
 }
-declare const SideRadioAccordion: ({ step, title, radioToggleList, defaultSelected, onSelect, quantityLimitLabel, onClickQuantityLimit, className, }: SideRadioAccordionProps) => react.JSX.Element;
-
-interface TagProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    className?: string;
-    children: string | React.ReactNode;
-    selected?: boolean;
-    onClick?: () => void;
-    bgColor?: string;
-}
-declare const Tag: ({ className, children, selected, disabled, bgColor, onClick, ...props }: TagProps) => react.JSX.Element;
+declare const SideRadioAccordion: react.ForwardRefExoticComponent<SideRadioAccordionProps & react.RefAttributes<HTMLDivElement>>;
 
 type Week = "thisWeek" | "nextWeek" | "twoWeeksLater";
 interface WeekNavigationProps {
     /** 표시 중인 주의 월요일(ISO "YYYY-MM-DD"). 범위 라벨(~금요일)을 여기서 계산한다. */
     date: string;
-    week: Week;
+    /** 3주 모델에 매핑되는 주차. `label`을 직접 주면 생략 가능. */
+    week?: Week;
+    /** 가운데 텍스트를 직접 지정(주어지면 week 기반 자동 라벨을 대체). */
+    label?: string;
+    /** 이전/다음 버튼 노출 여부를 명시적으로 제어. 생략 시 week로 자동 판단(thisWeek↔twoWeeksLater 경계). */
+    canPrev?: boolean;
+    canNext?: boolean;
     onPrevWeek?: () => void;
     onNextWeek?: () => void;
     className?: string;
 }
-declare const WeekNavigation: ({ date, week, onPrevWeek, onNextWeek, className, }: WeekNavigationProps) => react.JSX.Element;
+declare const WeekNavigation: react.ForwardRefExoticComponent<WeekNavigationProps & react.RefAttributes<HTMLDivElement>>;
 
 type PrintColor = "Plotter" | "Printer" | "Riso" | "Fluorescent" | "UV" | "Seet Cutting" | "Laser Cutting";
 type TimeSlotState = "none" | "default" | "disabled" | "selected";
 interface TimeSlot {
     time: string;
     state: TimeSlotState;
-    /** state가 "default"/"selected"일 때만 사용되는 hover 색상 */
+    /** state가 "default"/"selected"일 때만 사용되는 hover 색상(팔레트). `color`가 있으면 무시. */
     printColor?: PrintColor;
+    /** 고정 팔레트 밖의 임의 hover 색상(hex/rgb/CSS 변수 등). */
+    color?: string;
+    /** 셀(div)에 덧붙일 클래스. 보더/그룹 구분 등 앱별 커스터마이징 훅. */
+    className?: string;
 }
 interface DayColumn {
     /** 해당 요일의 ISO 날짜("YYYY-MM-DD") */
@@ -131,24 +383,63 @@ interface TimetableProps {
     onPrevWeek?: () => void;
     onNextWeek?: () => void;
     onSelectSlot?: (date: string, time: string) => void;
+    /**
+     * true면 열 너비가 고정폭(72px) 대신 컨테이너 폭에 맞춰 균등하게 늘어난다.
+     * 기존 고정폭 레이아웃이 필요하면 생략한다.
+     */
+    fluid?: boolean;
+    /** 상단 주간 네비게이션을 숨긴다(외부에서 별도로 렌더링할 때). */
+    hideWeekNavigation?: boolean;
+    /** 주간 네비게이션의 이전/다음 버튼 노출을 명시적으로 제어(생략 시 week로 자동 판단). */
+    canPrevWeek?: boolean;
+    canNextWeek?: boolean;
     className?: string;
 }
-declare const Timetable: ({ weekStart, week, days, onPrevWeek, onNextWeek, onSelectSlot, className, }: TimetableProps) => react.JSX.Element;
+declare const Timetable: react.ForwardRefExoticComponent<TimetableProps & react.RefAttributes<HTMLDivElement>>;
 
+/**
+ * href가 있는 항목을 실제 링크로 렌더링하기 위해 주입하는 컴포넌트.
+ * Next.js라면 `next/link`를 그대로 넘기면 된다.
+ * 주입하지 않으면 순수 `<a>`로 렌더링된다.
+ */
+type LinkComponent = ComponentType<Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "className" | "onClick" | "aria-current"> & {
+    children: ReactNode;
+    ref?: Ref<HTMLAnchorElement>;
+}>;
 type NavIcon = {
-    src: string;
+    /** 아이콘 이미지 URL. `icon`(ReactNode)과 택일해서 사용한다. */
+    src?: string;
+    /** 인라인 SVG 등 커스텀 노드. `src` 대신 사용한다. 선택 상태 대비를 위해 `currentColor` 사용을 권장. */
+    icon?: ReactNode;
     alt?: string;
+    /** 아이콘 옆에 함께 노출할 텍스트 라벨(예: "피드백"). 아이콘 없이 라벨만도 가능. */
+    label?: string;
+    /** key/상태 식별용 안정적 id(권장). 없으면 `src` → `label` 순으로 대체한다. */
+    id?: string;
+    /** 지정하면 `<a>`(또는 주입된 LinkComponent)로 렌더링된다. */
+    href?: string;
     onClick?: () => void;
-    /** true면 아이콘 배경을 검게 채워 강조한다(예: 알림/마이페이지 진입 상태) */
+    /** true면 아이콘 배경을 검게 채워 강조한다(예: 알림/마이페이지 진입 상태). */
     selected?: boolean;
+    /** 알림 개수 등 우상단 뱃지. `true`면 점(dot)만 표시. */
+    badge?: ReactNode;
     className?: string;
+    /** 렌더링된 `<a>`/`<button>` 엘리먼트로 전달되는 ref(외부 클릭 감지 등에 사용). */
+    ref?: Ref<HTMLElement>;
 };
 type LowerPartItem = {
     label: string;
+    /** key/상태 식별용 안정적 id(권장). 없으면 `label`을 사용한다. */
+    id?: string;
+    /** 지정하면 `<a>`(또는 주입된 LinkComponent)로 렌더링된다. */
+    href?: string;
     onClick?: () => void;
 };
 type UpperPartItem = {
     label: string;
+    id?: string;
+    href?: string;
+    onClick?: () => void;
     /** 이 상단 탭이 선택됐을 때 아래에 노출할 하위 메뉴 */
     lowerPartItemList: LowerPartItem[];
 };
@@ -157,17 +448,49 @@ interface TNBProps {
     upperPartItemList: UpperPartItem[];
     /** 우측 알림/마이페이지 등 아이콘 목록(로고 제외) */
     upperPartIconList: NavIcon[];
-    /** 처음에 선택돼 있을 상단 탭의 label */
+    /**
+     * controlled: 현재 선택된 상단 탭의 label.
+     * `null`을 넘기면 "선택된 탭 없음"(홈 등)으로 표시된다.
+     */
+    selected?: string | null;
+    /** uncontrolled 초기값. `selected`를 함께 넘기면 무시된다. 지정하지 않으면 선택된 탭이 없다. */
     defaultSelected?: string;
+    onSelectedChange?: (label: string) => void;
+    /** controlled: 현재 선택된 하위 메뉴 label. `null`이면 미선택. */
+    selectedLower?: string | null;
+    /** uncontrolled 초기값. */
+    defaultSelectedLower?: string;
+    onSelectedLowerChange?: (label: string) => void;
+    /** @deprecated `onSelectedChange`를 사용하세요. 하위 호환용 별칭입니다. */
     onSelectItem?: (label: string) => void;
+    /** href가 있는 항목을 렌더링할 링크 컴포넌트(Next.js면 `next/link`). */
+    linkComponent?: LinkComponent;
+    /** nav 랜드마크의 접근성 라벨. */
+    "aria-label"?: string;
     className?: string;
 }
-declare const TNB: ({ logo, upperPartItemList, upperPartIconList, defaultSelected, onSelectItem, className, }: TNBProps) => react.JSX.Element;
+declare const TNB: react.ForwardRefExoticComponent<TNBProps & react.RefAttributes<HTMLElement>>;
 
 interface ToastProps {
     message: string;
+    /**
+     * 표시 여부(controlled). 생략하면 항상 표시되는 순수 렌더 모드(하위 호환).
+     * `true`/`false`를 넘기면 페이드 인/아웃 + 언마운트를 컴포넌트가 스스로 처리한다.
+     */
+    open?: boolean;
+    /**
+     * 자동 소멸까지의 시간(ms). `0`/`null`이면 자동 소멸하지 않는다. 기본 3000.
+     * `open`이 `true`로 바뀔 때마다 타이머가 재시작된다.
+     */
+    duration?: number | null;
+    /** 자동 소멸 시각 또는 (배너 클릭 시) 호출. controlled 모드에서 `open`을 false로 되돌리는 데 사용. */
+    onClose?: () => void;
+    /**
+     * 화면 고정 위치. `"none"`이면 위치 스타일을 붙이지 않고 부모 레이아웃에 맡긴다(하위 호환 기본값).
+     */
+    position?: "top" | "bottom" | "none";
     className?: string;
 }
-declare const Toast: ({ message, className }: ToastProps) => react.JSX.Element;
+declare const Toast: react.ForwardRefExoticComponent<ToastProps & react.RefAttributes<HTMLDivElement>>;
 
-export { BackButton, type BackButtonProps, CTA, type CTAProps, type CTAVariable, CategorySegment, type CategorySegmentProps, CategorySegmentedControl, type CategorySegmentedControlProps, type DayColumn, type LowerPartItem, type NavIcon, NoticeBadge, type NoticeBadgeProps, type NoticeBadgeVariable, NoticeBar, type NoticeBarBadgeVariable, type NoticeBarProps, type NoticeBarVariable, type RadioToggle, SearchBar, type SearchBarProps, SideRadioAccordion, type PrintColor$1 as SideRadioAccordionPrintColor, type SideRadioAccordionProps, TNB, type TNBProps, Tag, type TagProps, type TimeSlot, type TimeSlotState, Timetable, type PrintColor as TimetablePrintColor, type TimetableProps, TitleInput, type TitleInputProps, Toast, type ToastProps, type UpperPartItem, type Week, WeekNavigation, type WeekNavigationProps };
+export { BackButton, type BackButtonProps, BasicFormField, type BasicFormFieldProps, CTA, type CTAProps, CategorySegment, type CategorySegmentProps, CategorySegmentedControl, type CategorySegmentedControlProps, Column, ColumnContentContainer, type ColumnContentContainerProps, ColumnLabel, type ColumnLabelProps, type ColumnProps, ColumnSubTitle, type ColumnSubTitleProps, ColumnText, type ColumnTextProps, ColumnTextStyle, type DayColumn, Dropdown, type DropdownProps, FormCheckBox, type FormCheckBoxProps, FormColor, type FormColorProps, FormFile, type FormFileProps, FormNumber, type FormNumberProps, FormPassword, type FormPasswordProps, FormSelectBox, type FormSelectBoxProps, FormTel, type FormTelProps, FormText, FormTextArea, type FormTextAreaProps, type FormTextProps, IconCheck, IconChevronDownXS, IconInfo, type LinkComponent, List, type ListProps, type LowerPartItem, Modal, type ModalProps, ModalText, type ModalTextProps, ModalTextStyle, MultiColumn, type NavIcon, NoticeBadge, type NoticeBadgeProps, type NoticeBadgeVariable, NoticeBar, type NoticeBarBadgeVariable, type NoticeBarProps, type NoticeBarVariable, type RadioToggle, SearchBar, type SearchBarProps, SelectBoxOption, type SelectBoxOptionProps, SideRadioAccordion, type PrintColor$1 as SideRadioAccordionPrintColor, type SideRadioAccordionProps, TNB, type TNBProps, Tag, type TagProps, TextButton, type TextButtonProps, type TimeSlot, type TimeSlotState, Timetable, type PrintColor as TimetablePrintColor, type TimetableProps, TitleInput, type TitleInputProps, Toast, type ToastProps, type UpperPartItem, type Week, WeekNavigation, type WeekNavigationProps, getInputStyles };