@zenkigen-inc/component-ui 1.18.0 → 1.18.2

package/dist/index.d.mts

@@ -1,18 +1,19 @@
 import * as react from 'react';
-import react__default, { PropsWithChildren, ElementType, ComponentPropsWithoutRef, CSSProperties, ReactNode, ChangeEvent, MouseEvent, MutableRefObject, ReactElement, RefObject, InputHTMLAttributes, FormEvent, ButtonHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import react__default, { PropsWithChildren, ElementType, ComponentPropsWithoutRef, CSSProperties, ReactNode, ChangeEvent, MouseEvent, MutableRefObject, ReactElement, RefObject, HTMLAttributes, InputHTMLAttributes, ForwardRefExoticComponent, RefAttributes, FormEvent, ButtonHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import * as _zenkigen_inc_component_icons from '@zenkigen-inc/component-icons';
 import { IconName } from '@zenkigen-inc/component-icons';
 import { iconColors, tagLightColors } from '@zenkigen-inc/component-theme';
 import { tokens } from '@zenkigen-inc/component-config';
 import { useFloating } from '@floating-ui/react';
 
-type Props$z = {
+type Props$y = {
     size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
     userId?: number;
     firstName?: string;
     lastName?: string;
     isDisabled?: boolean;
 };
-declare function Avatar({ size, ...props }: Props$z): react.JSX.Element;
+declare function Avatar({ size, ...props }: Props$y): react.JSX.Element;
 
 declare function Breadcrumb({ children }: PropsWithChildren): react.JSX.Element;
 declare namespace Breadcrumb {
@@ -27,6 +28,12 @@ type AsProp<T extends ElementAs> = {
     elementAs?: T;
 };
 type PolymorphicPropsWithoutRef<T extends ElementAs, P extends object> = PropsWithChildren<P> & ComponentPropsWithoutRef<T> & AsProp<T>;
+type DeprecatedClassNameProp<T extends ElementAs> = {
+    /**
+     * @deprecated 外部から className を渡してスタイルを上書きすることは非推奨です。
+     */
+    className?: ComponentPropsWithoutRef<T>['className'];
+};
 type BaseProps$1<T extends ElementAs> = PolymorphicPropsWithoutRef<T, {
     size?: Size$3;
     width?: CSSProperties['width'];
@@ -36,13 +43,13 @@ type BaseProps$1<T extends ElementAs> = PolymorphicPropsWithoutRef<T, {
     after?: ReactNode;
     borderRadius?: CSSProperties['borderRadius'];
     justifyContent?: JustifyContent;
-}>;
+}> & DeprecatedClassNameProp<T>;
 type PublicProps<T extends ElementAs> = BaseProps$1<T> & {
     variant?: Variant$1;
 };
 declare const Button: <T extends ElementAs = "button">(props: PublicProps<T>) => react.JSX.Element;
 
-type Props$y = {
+type Props$x = {
     name?: string;
     value?: string;
     id?: string;
@@ -53,13 +60,13 @@ type Props$y = {
     label?: string;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 };
-declare function Checkbox({ name, value, id, isChecked, isIndeterminate, isDisabled, onChange, label, color, }: Props$y): react.JSX.Element;
+declare function Checkbox({ name, value, id, isChecked, isIndeterminate, isDisabled, onChange, label, color, }: Props$x): react.JSX.Element;
 
-type Props$x = {
+type Props$w = {
     color?: 'gray' | 'red';
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 };
-declare function DropdownItem({ children, color, onClick }: PropsWithChildren<Props$x>): react.JSX.Element;
+declare function DropdownItem({ children, color, onClick }: PropsWithChildren<Props$w>): react.JSX.Element;
 
 type DropdownItemType = {
     id: string;
@@ -70,15 +77,15 @@ type DropdownItemType = {
 type DropdownVerticalPosition = 'top' | 'bottom';
 type DropdownHorizontalAlign = 'left' | 'center' | 'right';
 
-type Props$w = {
+type Props$v = {
     maxHeight?: CSSProperties['height'];
     isNoPadding?: boolean;
     verticalPosition?: DropdownVerticalPosition;
     horizontalAlign?: DropdownHorizontalAlign;
 };
-declare function DropdownMenu({ children, maxHeight, isNoPadding, verticalPosition, horizontalAlign, }: PropsWithChildren<Props$w>): false | react.JSX.Element;
+declare function DropdownMenu({ children, maxHeight, isNoPadding, verticalPosition, horizontalAlign, }: PropsWithChildren<Props$v>): false | react.JSX.Element;
 
-type Props$v = {
+type Props$u = {
     size?: 'x-small' | 'small' | 'medium' | 'large';
     variant?: 'text' | 'outline';
     title?: string;
@@ -94,19 +101,19 @@ type Props$v = {
     label: string;
     icon?: IconName;
 });
-declare function Dropdown({ children, target, label, icon, size, variant, title, isDisabled, isArrowHidden, portalTargetRef, }: PropsWithChildren<Props$v>): react.JSX.Element;
+declare function Dropdown({ children, target, label, icon, size, variant, title, isDisabled, isArrowHidden, portalTargetRef, }: PropsWithChildren<Props$u>): react.JSX.Element;
 declare namespace Dropdown {
     var Menu: typeof DropdownMenu;
     var Item: typeof DropdownItem;
 }
 
-type Props$u = {
+type Props$t = {
     value: number;
     isEditable?: boolean;
     onChangeRating?: (newRating: number) => void | null;
     size?: 'medium' | 'large';
 };
-declare function EvaluationStar({ value, isEditable, onChangeRating, size }: Props$u): react.JSX.Element;
+declare function EvaluationStar({ value, isEditable, onChangeRating, size }: Props$t): react.JSX.Element;
 
 type Size$2 = 'small' | 'medium' | 'large';
 declare const ERROR_TYPES: {
@@ -154,13 +161,13 @@ type FileInputRef = {
 declare const FileInput: react.ForwardRefExoticComponent<FileInputProps & react.RefAttributes<FileInputRef>>;
 
 type Level = 1 | 2 | 3 | 4 | 5;
-type Props$t = {
+type Props$s = {
     level: Level;
     before?: ReactNode;
     after?: ReactNode;
     children?: ReactNode;
 };
-declare function Heading(props: Props$t): react.JSX.Element;
+declare function Heading(props: Props$s): react.JSX.Element;
 
 declare const useOutsideClick: <T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>, handler: (event: Event) => void, enabled?: boolean) => void;
 
@@ -231,7 +238,7 @@ type ColorToken = UserColorToken | TextColorToken | LinkColorToken | BackgroundC
 
 type Size$1 = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
 type Color = keyof typeof iconColors;
-type Props$s = {
+type Props$r = {
     name: IconName;
     size?: Size$1;
     color?: Color;
@@ -239,11 +246,11 @@ type Props$s = {
     isDisabled?: boolean;
     className?: string;
 };
-declare const Icon: ({ size, isDisabled, ...props }: Props$s) => react.JSX.Element;
+declare const Icon: ({ size, isDisabled, ...props }: Props$r) => react.JSX.Element;
 
 type Size = 'small' | 'medium' | 'large';
 type Variant = 'outline' | 'text';
-type Props$r = {
+type Props$q = {
     /** 表示するアイコン名 */
     icon: IconName;
     /** ボタンのサイズ */
@@ -263,28 +270,28 @@ type Props$r = {
 } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'className'>) | ({
     isAnchor?: false;
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled' | 'className'>));
-declare function IconButton({ icon, size, variant, isNoPadding, isDisabled, isSelected, ...props }: Props$r): react.JSX.Element;
+declare function IconButton({ icon, size, variant, isNoPadding, isDisabled, isSelected, ...props }: Props$q): react.JSX.Element;
 
-type Props$q = {
+type Props$p = {
     size?: 'small' | 'medium' | 'large';
     position?: 'fixed' | 'absolute' | 'static';
     height?: string;
 };
-declare function Loading({ size, position, height }: Props$q): react.JSX.Element;
+declare function Loading({ size, position, height }: Props$p): react.JSX.Element;
 
 declare function ModalBody({ children }: PropsWithChildren): react.JSX.Element;
 
-type Props$p = {
+type Props$o = {
     isNoBorder?: boolean;
 };
-declare function ModalFooter({ children, isNoBorder }: PropsWithChildren<Props$p>): react__default.JSX.Element;
+declare function ModalFooter({ children, isNoBorder }: PropsWithChildren<Props$o>): react__default.JSX.Element;
 
-type Props$o = {
+type Props$n = {
     isNoBorder?: boolean;
 };
-declare function ModalHeader({ children, isNoBorder }: PropsWithChildren<Props$o>): react.JSX.Element;
+declare function ModalHeader({ children, isNoBorder }: PropsWithChildren<Props$n>): react.JSX.Element;
 
-type Props$n = {
+type Props$m = {
     width?: CSSProperties['width'];
     height?: CSSProperties['height'];
     maxWidth?: CSSProperties['maxWidth'];
@@ -292,14 +299,14 @@ type Props$n = {
     onClose?: () => void;
     portalTargetRef?: MutableRefObject<HTMLElement | null>;
 };
-declare function Modal({ children, width, height, maxWidth, isOpen, onClose, portalTargetRef, }: PropsWithChildren<Props$n>): react.JSX.Element | null;
+declare function Modal({ children, width, height, maxWidth, isOpen, onClose, portalTargetRef, }: PropsWithChildren<Props$m>): react.JSX.Element | null;
 declare namespace Modal {
     var Body: typeof ModalBody;
     var Header: typeof ModalHeader;
     var Footer: typeof ModalFooter;
 }
 
-type Props$m = {
+type Props$l = {
     state?: 'success' | 'warning' | 'information' | 'attention' | 'default';
     size?: 'small' | 'medium';
     children?: ReactNode;
@@ -309,9 +316,9 @@ type Props$m = {
     showClose: true;
     onClickClose: () => void;
 });
-declare function NotificationInline({ state, size, ...props }: Props$m): react.JSX.Element;
+declare function NotificationInline({ state, size, ...props }: Props$l): react.JSX.Element;
 
-type Props$l = {
+type Props$k = {
     /** 現在のページ番号 */
     currentPage: number;
     /** トータルのページ数 */
@@ -321,9 +328,9 @@ type Props$l = {
     /** ボタンが押されたときのイベントハンドラ */
     onClick: (value: number) => void;
 };
-declare function Pagination({ currentPage, totalPage, sideNumPagesToShow, onClick }: Props$l): react.JSX.Element;
+declare function Pagination({ currentPage, totalPage, sideNumPagesToShow, onClick }: Props$k): react.JSX.Element | null;
 
-type Props$k = {
+type Props$j = {
     /** トータル件数 */
     totalSize: number;
     /** ページあたり件数 */
@@ -343,20 +350,33 @@ type Props$k = {
     /** Selectが切り替わった時のイベントハンドラ */
     onChange: (value: number) => void;
 };
-declare function PaginationSelect({ totalSize, currentPage, sizePerPage, countLabel, pageLabel, optionListMaxHeight, onClickPrevButton, onClickNextButton, onChange, }: Props$k): react.JSX.Element;
+declare function PaginationSelect({ totalSize, currentPage, sizePerPage, countLabel, pageLabel, optionListMaxHeight, onClickPrevButton, onClickNextButton, onChange, }: Props$j): react.JSX.Element;
+
+type TextInputErrorMessageProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+declare const TextInputErrorMessage: react.ForwardRefExoticComponent<TextInputErrorMessageProps & react.RefAttributes<HTMLDivElement>>;
 
-declare const TextInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
-    size?: "medium" | "large";
+type TextInputHelperMessageProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+declare const TextInputHelperMessage: react.ForwardRefExoticComponent<TextInputHelperMessageProps & react.RefAttributes<HTMLDivElement>>;
+
+type TextInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'className'> & {
+    size?: 'medium' | 'large';
     value: string;
     isError?: boolean;
     onClickClearButton?: () => void;
-} & {
-    /** 入力欄の末尾に表示する要素。例: アイコンやテキスト（内部実装用） */
-    after?: ReactNode;
-} & react.RefAttributes<HTMLInputElement>>;
+};
 
-type Props$j = Omit<ComponentPropsWithoutRef<typeof TextInput>, 'type' | 'onClickClearButton'>;
-declare const PasswordInput: react.ForwardRefExoticComponent<Props$j & react.RefAttributes<HTMLInputElement>>;
+type TextInputComponent = ForwardRefExoticComponent<TextInputProps & RefAttributes<HTMLInputElement>> & {
+    HelperMessage: typeof TextInputHelperMessage;
+    ErrorMessage: typeof TextInputErrorMessage;
+};
+declare const TextInput: TextInputComponent;
+
+type Props$i = Omit<ComponentPropsWithoutRef<typeof TextInput>, 'type' | 'onClickClearButton' | 'className'>;
+declare const PasswordInput: ForwardRefExoticComponent<Props$i & RefAttributes<HTMLInputElement>> & {
+    HelperMessage: ForwardRefExoticComponent<TextInputHelperMessageProps & RefAttributes<HTMLDivElement>>;
+    ErrorMessage: ForwardRefExoticComponent<TextInputErrorMessageProps & RefAttributes<HTMLDivElement>>;
+    displayName: string;
+};
 
 /**
  * Popoverが閉じられる理由を定義する型
@@ -386,14 +406,14 @@ type PopoverContextValue = {
     onClose?: (event: PopoverCloseEvent) => void;
 };
 
-type Props$i = {
+type Props$h = {
     isOpen: boolean;
     placement?: PopoverPlacement;
     offset?: number;
     onClose?: (event: PopoverCloseEvent) => void;
     anchorRef?: React.RefObject<HTMLElement | null>;
 };
-declare function Popover({ isOpen, children, placement, offset: offsetValue, onClose, anchorRef, }: PropsWithChildren<Props$i>): react.JSX.Element;
+declare function Popover({ isOpen, children, placement, offset: offsetValue, onClose, anchorRef, }: PropsWithChildren<Props$h>): react.JSX.Element;
 declare namespace Popover {
     var Trigger: react.ForwardRefExoticComponent<{
         children: React.ReactElement;
@@ -417,25 +437,25 @@ declare function PopupBody({ children }: PropsWithChildren): react.JSX.Element;
 
 declare function PopupFooter({ children }: PropsWithChildren): react__default.JSX.Element;
 
-type Props$h = PropsWithChildren<{
+type Props$g = PropsWithChildren<{
     before?: ReactNode;
 }>;
-declare function PopupHeader({ children, before }: Props$h): react.JSX.Element;
+declare function PopupHeader({ children, before }: Props$g): react.JSX.Element;
 
-type Props$g = {
+type Props$f = {
     isOpen?: boolean;
     width?: CSSProperties['width'];
     height?: CSSProperties['height'];
     onClose?: () => void;
 };
-declare function Popup({ children, isOpen: controlledIsOpen, width, height, onClose }: PropsWithChildren<Props$g>): react.JSX.Element | null;
+declare function Popup({ children, isOpen: controlledIsOpen, width, height, onClose }: PropsWithChildren<Props$f>): react.JSX.Element | null;
 declare namespace Popup {
     var Body: typeof PopupBody;
     var Header: typeof PopupHeader;
     var Footer: typeof PopupFooter;
 }
 
-type Props$f = {
+type Props$e = {
     name?: string;
     value?: string;
     id?: string;
@@ -444,9 +464,9 @@ type Props$f = {
     isDisabled?: boolean;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 };
-declare function Radio({ name, value, id, label, isChecked, isDisabled, onChange }: Props$f): react.JSX.Element;
+declare function Radio({ name, value, id, label, isChecked, isDisabled, onChange }: Props$e): react.JSX.Element;
 
-type Props$e = {
+type Props$d = {
     size?: 'medium' | 'large';
     placeholder?: string;
     width?: string;
@@ -455,7 +475,7 @@ type Props$e = {
     onSubmit?: (e: FormEvent<HTMLFormElement>) => void;
     onClickClearButton?: () => void;
 };
-declare const Search: react.ForwardRefExoticComponent<Props$e & react.RefAttributes<HTMLDivElement>>;
+declare const Search: react.ForwardRefExoticComponent<Props$d & react.RefAttributes<HTMLDivElement>>;
 
 type BaseProps = Omit<ComponentPropsWithoutRef<'button'>, 'onClick' | 'className'> & {
     value: string;
@@ -499,12 +519,12 @@ type SelectOption = {
     icon?: IconName;
 };
 
-type Props$d = {
+type Props$c = {
     option: SelectOption;
 };
-declare function SelectItem({ option }: Props$d): react.JSX.Element;
+declare function SelectItem({ option }: Props$c): react.JSX.Element;
 
-type Props$c = {
+type Props$b = {
     size?: 'x-small' | 'small' | 'medium' | 'large';
     variant?: 'outline' | 'text';
     width?: CSSProperties['width'];
@@ -518,14 +538,14 @@ type Props$c = {
     isOptionSelected?: boolean;
     onChange?: (option: SelectOption | null) => void;
 };
-declare function Select({ children, size, variant, width, maxWidth, placeholder, placeholderIcon, selectedOption, isDisabled, isError, isOptionSelected, onChange, optionListMaxHeight, }: PropsWithChildren<Props$c>): react.JSX.Element;
+declare function Select({ children, size, variant, width, maxWidth, placeholder, placeholderIcon, selectedOption, isDisabled, isError, isOptionSelected, onChange, optionListMaxHeight, }: PropsWithChildren<Props$b>): react.JSX.Element;
 declare namespace Select {
     var Option: typeof SelectItem;
 }
 
 type SortOrder = 'ascend' | 'descend' | null;
 
-type Props$b = {
+type Props$a = {
     size?: 'x-small' | 'small' | 'medium' | 'large';
     variant?: 'outline' | 'text';
     width?: CSSProperties['width'];
@@ -536,9 +556,9 @@ type Props$b = {
     onChange?: (value: SortOrder) => void;
     onClickDeselect?: () => void;
 };
-declare function SelectSort({ size, variant, width, label, sortOrder, isDisabled, isSortKey, onChange, onClickDeselect, }: Props$b): react.JSX.Element;
+declare function SelectSort({ size, variant, width, label, sortOrder, isDisabled, isSortKey, onChange, onClickDeselect, }: Props$a): react.JSX.Element;
 
-type Props$a = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'type' | 'disabled' | 'onClick' | 'aria-disabled' | 'aria-label'> & {
+type Props$9 = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'type' | 'disabled' | 'onClick' | 'aria-disabled' | 'aria-label'> & {
     size?: 'x-small' | 'small' | 'medium' | 'large';
     width?: CSSProperties['width'];
     label: string;
@@ -547,54 +567,56 @@ type Props$a = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'type
     'aria-label': string;
     onClick?: () => void;
 };
-declare function SortButton({ size, width, label, sortOrder, isDisabled, onClick, 'aria-label': ariaLabel, ...rest }: Props$a): react.JSX.Element;
+declare function SortButton({ size, width, label, sortOrder, isDisabled, onClick, 'aria-label': ariaLabel, ...rest }: Props$9): react.JSX.Element;
 
-type Props$9 = {
+type Props$8 = {
     children?: ReactNode;
     /** レイアウトタイプ */
     layout?: 'auto' | 'equal';
 };
-declare function Tab({ children, layout }: Props$9): react.JSX.Element;
+declare function Tab({ children, layout }: Props$8): react.JSX.Element;
 declare namespace Tab {
-    var Item: ({ isSelected, ...props }: {
+    var Item: ({ isSelected, isDisabled, icon, ...props }: {
         id: string;
         isSelected?: boolean;
         isDisabled?: boolean;
+        icon?: _zenkigen_inc_component_icons.IconName;
         children?: ReactNode;
         onClick: (id: string) => void;
     }) => react.JSX.Element;
 }
 
-type Props$8 = {
+type Props$7 = {
     id: string;
     isSelected?: boolean;
     isDisabled?: boolean;
+    icon?: IconName;
     children?: ReactNode;
     onClick: (id: string) => void;
 };
-declare const TabItem: ({ isSelected, ...props }: Props$8) => react.JSX.Element;
+declare const TabItem: ({ isSelected, isDisabled, icon, ...props }: Props$7) => react.JSX.Element;
 
-type Props$7 = {
+type Props$6 = {
     children?: ReactNode;
     className?: string;
     isHeader?: boolean;
 };
-declare function TableCell({ children, className, isHeader }: Props$7): react.JSX.Element;
+declare function TableCell({ children, className, isHeader }: Props$6): react.JSX.Element;
 
-type Props$6 = {
+type Props$5 = {
     children?: ReactNode;
     isHoverBackgroundVisible?: boolean;
 };
-declare function TableRow({ children, isHoverBackgroundVisible }: Props$6): react.JSX.Element;
+declare function TableRow({ children, isHoverBackgroundVisible }: Props$5): react.JSX.Element;
 
-type Props$5 = {
+type Props$4 = {
     width?: CSSProperties['width'];
     templateRows?: CSSProperties['gridTemplateRows'];
     templateColumns?: CSSProperties['gridTemplateColumns'];
     autoColumns?: CSSProperties['gridAutoColumns'];
     autoRows?: CSSProperties['gridAutoRows'];
 };
-declare function Table({ width, templateRows, templateColumns, autoColumns, autoRows, children, }: PropsWithChildren<Props$5>): react.JSX.Element;
+declare function Table({ width, templateRows, templateColumns, autoColumns, autoRows, children, }: PropsWithChildren<Props$4>): react.JSX.Element;
 declare namespace Table {
     var Row: typeof TableRow;
     var Cell: typeof TableCell;
@@ -603,7 +625,7 @@ declare namespace Table {
 type TagColor = keyof typeof tagLightColors;
 type ColorVariant = 'normal' | 'light';
 
-type Props$4 = {
+type Props$3 = {
     id: string;
     children: string;
     color: TagColor;
@@ -617,13 +639,17 @@ type Props$4 = {
     onDelete?: never;
     size?: 'x-small' | 'small' | 'medium';
 });
-declare function Tag({ id, children, color, variant, size, isEditable, onDelete }: Props$4): react.JSX.Element;
+declare function Tag({ id, children, color, variant, size, isEditable, onDelete }: Props$3): react.JSX.Element;
 
-type Props$3 = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className'> & {
     size?: 'medium' | 'large';
     value: string;
     height?: CSSProperties['height'];
     isError?: boolean;
+    /**
+     * @deprecated 外部から className を渡してスタイルを上書きすることは非推奨です。
+     */
+    className?: string;
 } & ({
     autoHeight: true;
     maxHeight?: CSSProperties['maxHeight'];
@@ -633,7 +659,18 @@ type Props$3 = TextareaHTMLAttributes<HTMLTextAreaElement> & {
     maxHeight?: never;
     isResizable?: boolean;
 });
-declare const TextArea: react.ForwardRefExoticComponent<Props$3 & react.RefAttributes<HTMLTextAreaElement>>;
+
+type TextAreaErrorMessageProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+declare const TextAreaErrorMessage: react.ForwardRefExoticComponent<TextAreaErrorMessageProps & react.RefAttributes<HTMLDivElement>>;
+
+type TextAreaHelperMessageProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+declare const TextAreaHelperMessage: react.ForwardRefExoticComponent<TextAreaHelperMessageProps & react.RefAttributes<HTMLDivElement>>;
+
+type TextAreaComponent = ForwardRefExoticComponent<TextAreaProps & RefAttributes<HTMLTextAreaElement>> & {
+    HelperMessage: typeof TextAreaHelperMessage;
+    ErrorMessage: typeof TextAreaErrorMessage;
+};
+declare const TextArea: TextAreaComponent;
 
 type ToastState = 'success' | 'error' | 'warning' | 'information';