import type { Spacing, WithStyleProps, ComponentStyle } from '@instructure/emotion';
import type { NewComponentTypes } from '@instructure/ui-themes';
import type { AsElementType, OtherHTMLAttributes } from '@instructure/shared-types';
import type { ViewProps } from '@instructure/ui-view/latest';
import { MouseEvent } from 'react';
import { Renderable } from '@instructure/shared-types';
type HeroIconSize = 'medium' | 'x-large' | 'large';
type BillboardOwnProps = {
    /**
     * Provide an <Img> component or Instructure Icon for the hero image
     */
    hero?: React.ReactElement | ((iconSize?: HeroIconSize) => React.ReactElement);
    /**
     * If you're using an icon, this prop will size it. Also sets the font-size
     * of the headline and message.
     */
    size?: 'small' | 'medium' | 'large';
    /**
     * the element type to render as
     */
    as?: AsElementType;
    /**
     * provides a reference to the underlying html root element
     */
    elementRef?: (element: Element | null) => void;
    /**
     * The headline for the Billboard. Is styled as an h1 element by default
     */
    heading?: string;
    /**
     * Choose the appropriately semantic tag for the heading
     */
    headingAs?: 'h1' | 'h2' | 'h3' | 'span';
    /**
     * Choose the font-size for the heading (see the Heading component)
     */
    headingLevel?: 'h1' | 'h2' | 'h3' | 'h4';
    /**
     * Instructions or information for the Billboard. Note: you should not pass
     * interactive content to this prop if you are also providing an `href` or
     * `onClick`. That would cause the Billboard to render as a button or link
     * and would result in nested interactive content.
     */
    message?: Renderable;
    /**
     * If you add an onClick prop, the Billboard renders as a clickable button
     */
    onClick?: (e: MouseEvent<ViewProps>) => void;
    /**
     * If `href` is provided, Billboard will render as a link
     */
    href?: string;
    /**
     * Whether or not to disable the billboard
     */
    disabled?: boolean;
    /**
     * Works just like disabled but keeps the same styles as if it were active
     */
    readOnly?: boolean;
    /**
     * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
     * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
     * familiar CSS-like shorthand. For example: `margin="small auto large"`.
     */
    margin?: Spacing;
};
type PropKeys = keyof BillboardOwnProps;
type AllowedPropKeys = Readonly<Array<PropKeys>>;
type BillboardProps = BillboardOwnProps & WithStyleProps<ReturnType<NewComponentTypes['Billboard']>, BillboardStyle> & OtherHTMLAttributes<BillboardOwnProps>;
type BillboardStyle = ComponentStyle<'billboard' | 'content' | 'hero' | 'heading' | 'message'>;
declare const allowedProps: AllowedPropKeys;
export type { BillboardProps, BillboardStyle, HeroIconSize };
export { allowedProps };
//# sourceMappingURL=props.d.ts.map