import React from 'react';
import { ResponsiveImageType } from '../../general';
declare const allowedElements: string[];
interface ContentPropObject {
    /** The text to display */
    text: string;
    /** The element to wrap the text in */
    element?: (typeof allowedElements)[number];
}
type ContentPropType = false | string | ContentPropObject;
interface ContentType {
    /** Eyebrow text, above the title */
    eyebrow?: ContentPropType;
    /** The title */
    title?: ContentPropType;
    /** The main text */
    text?: ContentPropType;
}
export interface BannerSectionType {
    /** Additional className */
    className?: string;
    /** The content to display */
    content: ContentType;
    /** The image to display */
    image?: ResponsiveImageType;
    /** The colour variant (when there's no image) */
    variant?: 'default' | 'light' | 'subtle';
    /** How to handle spacing on the banner */
    spacing?: 'normal' | 'slim';
    /** Styling meta data */
    styling?: {
        /** Whether or not to show the image full width */
        imageFullWidth?: boolean;
    };
    /** Whether or not to show the ContentType.text, eyebrow or title; this is in case it's set in Contentful but we don't want to show it on a particular place, e.g. in communities we set a description but show it in another component */
    hideElements?: {
        eyebrow?: boolean;
        title?: boolean;
        text?: boolean;
    };
    /** The CTA to display */
    cta?: {
        text: string;
        link: string;
        props?: {
            [key: string]: string | ((e: React.MouseEvent<HTMLElement>) => void);
        };
    };
    /** Any additional children */
    children?: React.ReactNode;
}
declare const _default: React.MemoExoticComponent<({ className, content: contentProp, image, variant, spacing, styling: stylingProps, hideElements, cta, children, }: BannerSectionType) => import("react/jsx-runtime").JSX.Element>;
export default _default;
