import { type ComponentProps, type ComponentPropsWithoutRef, type FC, type PropsWithChildren, type ReactNode } from 'react';
import { type VariantProps } from 'tailwind-variants';
import { Base } from '../Base';
declare const classNameGenerator: import("tailwind-variants").TVReturnType<{
    /** 下地 */
    base: {
        none: {};
        base: {
            wrapper: string;
        };
    };
    /** メッセージの種類 */
    type: {
        info: {
            icon: string;
        };
        success: {};
        warning: {
            icon: string;
        };
        error: {};
        sync: {
            icon: string;
        };
    };
    /** 強調するかどうか */
    bold: {
        true: string;
        false: string;
    };
    /** スライドインするかどうか */
    animate: {
        true: {
            wrapper: string;
        };
    };
}, {
    wrapper: string;
    inner: string;
    messageArea: string[];
    icon: string;
    actionArea: string;
    closeButton: string;
}, undefined, import("tailwind-variants/dist/config").TVConfig<{
    /** 下地 */
    base: {
        none: {};
        base: {
            wrapper: string;
        };
    };
    /** メッセージの種類 */
    type: {
        info: {
            icon: string;
        };
        success: {};
        warning: {
            icon: string;
        };
        error: {};
        sync: {
            icon: string;
        };
    };
    /** 強調するかどうか */
    bold: {
        true: string;
        false: string;
    };
    /** スライドインするかどうか */
    animate: {
        true: {
            wrapper: string;
        };
    };
}, {
    /** 下地 */
    base: {
        none: {};
        base: {
            wrapper: string;
        };
    };
    /** メッセージの種類 */
    type: {
        info: {
            icon: string;
        };
        success: {};
        warning: {
            icon: string;
        };
        error: {};
        sync: {
            icon: string;
        };
    };
    /** 強調するかどうか */
    bold: {
        true: string;
        false: string;
    };
    /** スライドインするかどうか */
    animate: {
        true: {
            wrapper: string;
        };
    };
}>, {
    /** 下地 */
    base: {
        none: {};
        base: {
            wrapper: string;
        };
    };
    /** メッセージの種類 */
    type: {
        info: {
            icon: string;
        };
        success: {};
        warning: {
            icon: string;
        };
        error: {};
        sync: {
            icon: string;
        };
    };
    /** 強調するかどうか */
    bold: {
        true: string;
        false: string;
    };
    /** スライドインするかどうか */
    animate: {
        true: {
            wrapper: string;
        };
    };
}, {
    wrapper: string;
    inner: string;
    messageArea: string[];
    icon: string;
    actionArea: string;
    closeButton: string;
}, import("tailwind-variants").TVReturnType<{
    /** 下地 */
    base: {
        none: {};
        base: {
            wrapper: string;
        };
    };
    /** メッセージの種類 */
    type: {
        info: {
            icon: string;
        };
        success: {};
        warning: {
            icon: string;
        };
        error: {};
        sync: {
            icon: string;
        };
    };
    /** 強調するかどうか */
    bold: {
        true: string;
        false: string;
    };
    /** スライドインするかどうか */
    animate: {
        true: {
            wrapper: string;
        };
    };
}, {
    wrapper: string;
    inner: string;
    messageArea: string[];
    icon: string;
    actionArea: string;
    closeButton: string;
}, undefined, import("tailwind-variants/dist/config").TVConfig<{
    /** 下地 */
    base: {
        none: {};
        base: {
            wrapper: string;
        };
    };
    /** メッセージの種類 */
    type: {
        info: {
            icon: string;
        };
        success: {};
        warning: {
            icon: string;
        };
        error: {};
        sync: {
            icon: string;
        };
    };
    /** 強調するかどうか */
    bold: {
        true: string;
        false: string;
    };
    /** スライドインするかどうか */
    animate: {
        true: {
            wrapper: string;
        };
    };
}, {
    /** 下地 */
    base: {
        none: {};
        base: {
            wrapper: string;
        };
    };
    /** メッセージの種類 */
    type: {
        info: {
            icon: string;
        };
        success: {};
        warning: {
            icon: string;
        };
        error: {};
        sync: {
            icon: string;
        };
    };
    /** 強調するかどうか */
    bold: {
        true: string;
        false: string;
    };
    /** スライドインするかどうか */
    animate: {
        true: {
            wrapper: string;
        };
    };
}>, unknown, unknown, undefined>>;
type StyleVariants = VariantProps<typeof classNameGenerator>;
type AbstractProps = PropsWithChildren<Omit<StyleVariants, 'type'> & Required<Pick<StyleVariants, 'type'>> & {
    /** コンポーネント右の領域 */
    subActionArea?: ReactNode;
    /** 閉じるボタン押下時に発火させる関数 */
    onClose?: () => void;
    /** role 属性 */
    role?: 'alert' | 'status';
}>;
type BaseProps = Pick<ComponentProps<typeof Base>, 'layer'>;
type Props = AbstractProps & Omit<ComponentPropsWithoutRef<'div'>, keyof AbstractProps> & Omit<BaseProps, keyof AbstractProps>;
export declare const NotificationBar: FC<Props>;
export {};