import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
import { type SectionMessageSlotRecipeVariant } from '../../styled-system/recipes';
import { type IconButtonProps } from '../IconButton';
/**
 * Props for SectionMessage component
 * It extends the props of `<div>` element.
 */
export type SectionMessageProps = {
    /**
     * The type of the message
     *
     * @default 'neutral'
     */
    messageType?: SectionMessageSlotRecipeVariant['messageType'];
    /**
     * Where to display this SectionMessage
     *
     * @default 'inline'
     */
    region?: SectionMessageSlotRecipeVariant['region'];
    /**
     * The action slot of the SectionMessage
     */
    actionSlot?: ReactNode;
    /**
     * The function to be called when the close button is clicked
     */
    onClose?: IconButtonProps['onClick'];
    /**
     * The content of the SectionMessage
     * Normally, it should be a string
     * If you don't define, it will be empty
     */
    children?: ReactNode;
    /**
     * Props for the status icon.
     *
     * @property aria-label - The text alternative for the status icon. By default, `messageType` is:
     * - `success`: '完了'
     * - `error`: 'エラー'
     * - `caution`: '注意'
     */
    statusIconProps?: Pick<ComponentPropsWithoutRef<'svg'>, 'aria-label'>;
    /**
     * Props for the close button.
     *
     * @property aria-label - The accessible name for the close button. It's '閉じる' by default.
     */
    closeButtonProps?: Pick<ComponentPropsWithoutRef<'svg'>, 'aria-label'>;
    /**
     * Whether to disable responsive layout behavior.
     * When false (default), the component will switch to mobile layout on narrow viewports (< 600px),
     * moving the actionSlot to the bottom while keeping the close button in the top right.
     * When true, the component maintains the desktop layout on all viewport sizes.
     *
     * @default false
     */
    disableResponsive?: boolean;
} & ComponentPropsWithoutRef<'div'>;