import type { BreakpointQueries, QueriesMatching } from '../../utils/v1/QueryType';
interface ResponsivePropsObject {
    [propName: string]: any;
}
/**
 * Consists of an object where the keys match the breakpoint names used in the query. The values are objects with keys representing prop names and values representing prop values Ex. `{small: { myProp: 'fillscreen' }, large: { myProp: 'fillcontainer' }}`
 */
type ResponsiveByBreakpointProps = {
    [breakpointName: string]: ResponsivePropsObject;
};
type ResponsiveOwnProps = {
    /**
     * Consists of an object where the keys define the names of breakpoints. The values are query objects
     * with keys representing the breakpoint condition and values representing a breakpoint value as a
     * string or number. Ex. `{small: { maxWidth: 400 }, large: { minWidth: '600em'}}`
     */
    query: BreakpointQueries;
    /**
     * Specifies if the `<Responsive />` component should use element or media queries
     */
    match?: 'element' | 'media';
    /**
     * Consists of an object where the keys match the breakpoint names used in the query. The values
     * are objects with keys representing prop names and values representing prop values Ex.
     * `{small: { myProp: 'fillscreen' }, large: { myProp: 'fillcontainer' }}`
     */
    props?: ResponsiveByBreakpointProps;
    /**
     * Function called on render with the following form `(props, matches) => {...}` where the props
     * are the current props to be applied and matches is an array of current matches from the query
     * prop. Either this or a `children` prop function must be supplied.
     */
    render?: (props?: ResponsivePropsObject | null, matches?: QueriesMatching) => any;
    /**
     * Function that takes the same form and arguments as the render prop. Either this or a `render`
     * prop function must be supplied.
     */
    children?: (props?: ResponsivePropsObject | null, matches?: QueriesMatching) => any;
    /**
     * The Responsive component is rendered as a `<div>`,
     * so it has `display="block"` by default.
     * You can override the display value with this prop.
     */
    display?: 'inline' | 'block' | 'inline-block' | 'flex' | 'inline-flex';
    /**
     * A function that returns a reference to root HTML element
     */
    elementRef?: (el: HTMLDivElement | null) => void;
};
type PropKeys = keyof ResponsiveOwnProps;
type AllowedPropKeys = Readonly<Array<PropKeys>>;
type ResponsiveProps = ResponsiveOwnProps;
declare const allowedProps: AllowedPropKeys;
export type { ResponsiveProps, ResponsivePropsObject, ResponsiveByBreakpointProps };
export { allowedProps };
//# sourceMappingURL=props.d.ts.map