import { BoxProps, ChakraComponent } from '@chakra-ui/react';
import { default as React } from 'react';
import { ComponentImageProps } from '../Image/Image';
export declare const heroVariantsArray: readonly ["primary", "tertiary", "campaign"];
export type HeroVariants = typeof heroVariantsArray[number];
export interface HeroImageProps extends Omit<BoxProps, "onError">, Pick<ComponentImageProps, "alt" | "fallbackSrc" | "id" | "src" | "onError" | "component"> {
}
export interface HeroProps extends BoxProps {
    /**
     * Optional background color for the backdrop only in the `campaign` variant.
     * When both `backdropBackgroundColor` and `backgroundImageSrc` are passed,
     * the `backgroundImageSrc` will take precedence.
     */
    backdropBackgroundColor?: string;
    /** Optional color value used to override the default background color for a
     * given `Hero` variant.
     *
     * Note: not all `Hero` variants utilize this prop. */
    backgroundColor?: string;
    /** Optional path to an image that will be used as a background image for the
     * `Hero` component.
     *
     * Note: not all `Hero` variants utilize this prop. */
    backgroundImageSrc?: string;
    /** **This prop has been deprecated in favor of the `textColor` prop.**
     *
     * Optional color value used to override the default text color for a given
     * `Hero` variant.
     *
     * Note: not all `Hero` variants utilize this prop. */
    foregroundColor?: string;
    /** Optional heading element. */
    heading?: JSX.Element;
    /** Object used to create and render the `Image` component. You can pass `component`
     * (with its own internal props, which will override) or `src`, `alt`, `id`,
     * `fallBackSrc`, and `onError`. If `imageProps.alt` is left blank, a warning
     * will be logged to the console and will cause accessibility issues. For
     * `imageProps.src`, it will only work for the "campaign" `Hero` type. */
    imageProps?: HeroImageProps;
    /** Optional boolean used to toggle the default text color from light to dark.
     * Set `isDarkText` to `true` if the `textBackgroundColor` is set to a light
     * color. */
    isDarkText?: boolean;
    /** Optional boolean used to toggle the blur treatment of the background image
     * in the "campaign" variant. If true, the background image will be blurred
     * and darkened slightly.
     */
    isBlurredBackgroundImage?: boolean;
    /** Optional boolean used to toggle the color treatment of the background
     * image in the "campaign" variant. If true, the background image will be
     * converted to black & white and darkened moderately. */
    isDarkBackgroundImage?: boolean;
    /** Optional string used for the subheader that displays underneath the
     * heading element. */
    subHeaderText?: string | JSX.Element;
    /** Optional color value used to override the default background color for a
     * text content area in a given `Hero` variant. */
    textBackgroundColor?: string;
    /** Optional color value used to override the default text color for a given
     * `Hero` variant. This prop should be used in lieu of the deprecated
     * `foregroundColor` prop.
     *
     * Note: not all `Hero` variants utilize this prop. */
    textColor?: string;
    /** Used to control how the `Hero` component will be rendered. */
    variant?: HeroVariants;
}
export declare const Hero: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<HeroProps> & React.RefAttributes<HTMLDivElement>>, HeroProps>;
export default Hero;