import * as react_jsx_runtime_js from 'react/jsx-runtime.js';
import { FC, HTMLAttributes, ReactNode } from 'react';

declare const TypeToEmoji: {
    default: react_jsx_runtime_js.JSX.Element;
    error: react_jsx_runtime_js.JSX.Element;
    info: react_jsx_runtime_js.JSX.Element;
    warning: react_jsx_runtime_js.JSX.Element;
    important: react_jsx_runtime_js.JSX.Element;
};
type CalloutType = keyof typeof TypeToEmoji;
type CalloutProps = HTMLAttributes<HTMLDivElement> & {
    /**
     * Defines the style of the callout and determines the default icon if `emoji` is not provided.
     *
     * If set to `null`, no border, background, or text styling will be applied.
     * @default 'default'
     */
    type?: CalloutType | null;
    /**
     * Icon displayed in the callout. Can be a string emoji or a custom React element.
     *
     * Default values based on `type`:
     * - `<GitHubTipIcon />` for `type: 'default'`
     * - `<GitHubCautionIcon />` for `type: 'error'`
     * - `<GitHubNoteIcon />` for `type: 'info'`
     * - `<GitHubWarningIcon />` for `type: 'warning'`
     * - `<GitHubImportantIcon />` for `type: 'important'`
     * @default Determined by `type`
     */
    emoji?: ReactNode;
};
/**
 * A built-in component to show important information to the reader.
 *
 * @example
 * <Callout>
 *   A **callout** is a short piece of text intended to attract attention.
 * </Callout>
 *
 * <Callout type="info">
 *   A **callout** is a short piece of text intended to attract attention.
 * </Callout>
 *
 * <Callout type="warning">
 *   A **callout** is a short piece of text intended to attract attention.
 * </Callout>
 *
 * <Callout type="error">
 *   A **callout** is a short piece of text intended to attract attention.
 * </Callout>
 *
 * <Callout type="important">
 *   A **callout** is a short piece of text intended to attract attention.
 * </Callout>
 *
 * @usage
 * ### Default
 *
 * <Callout>Helpful advice for doing things better or more easily.</Callout>
 *
 * ```mdx
 * import { Callout } from 'nextra/components'
 *
 * <Callout>Helpful advice for doing things better or more easily.</Callout>
 * ```
 *
 * ### Info
 *
 * <Callout type="info">
 *   Useful information that users should know, even when skimming content.
 * </Callout>
 *
 * ```mdx
 * import { Callout } from 'nextra/components'
 *
 * <Callout type="info">
 *   Useful information that users should know, even when skimming content.
 * </Callout>
 * ```
 *
 * ### Warning
 *
 * <Callout type="warning">
 *   Urgent info that needs immediate user attention to avoid problems.
 * </Callout>
 *
 * ```mdx
 * import { Callout } from 'nextra/components'
 *
 * <Callout type="warning">
 *   Urgent info that needs immediate user attention to avoid problems.
 * </Callout>
 * ```
 *
 * ### Error
 *
 * <Callout type="error">
 *   Advises about risks or negative outcomes of certain actions.
 * </Callout>
 *
 * ```mdx
 * import { Callout } from 'nextra/components'
 *
 * <Callout type="error">
 *   Advises about risks or negative outcomes of certain actions.
 * </Callout>
 * ```
 *
 * ### Important
 *
 * <Callout type="important">
 *   Key information users need to know to achieve their goal.
 * </Callout>
 *
 * ```mdx
 * import { Callout } from 'nextra/components'
 *
 * <Callout type="important">
 *   Key information users need to know to achieve their goal.
 * </Callout>
 * ```
 *
 * ### Custom icon
 *
 * <Callout type="info" emoji="⭐">Nextra has 13k stars on GitHub!</Callout>
 *
 * ```mdx
 * import { Callout } from 'nextra/components'
 *
 * <Callout type="info" emoji="⭐">Nextra has 13k stars on GitHub!</Callout>
 * ```
 */
declare const Callout: FC<CalloutProps>;

export { Callout };