import React from 'react';
import type { Breakpoints, Style } from '../types';
import type { UseBreakpointsOptions } from './BreakpointContext';
export interface MediaQueryProps<S extends Style = Style> extends UseBreakpointsOptions<S> {
    /**
     * A set of breakpoints used to build media query styles
     * for the given set of children.
     *
     * @example
     * ```tsx
     * <MediaQuery breakpoints={minWidth(500, { color: 'red' })}>
     *   <Text>Child</Text>
     * </MediaQuery>
     * ```
     */
    breakpoints?: Breakpoints<S>;
}
/**
 * A component used to apply `style` and `dataSet` props to children
 * based on a given set of breakpoints.
 *
 * @param props limited to the `breakpoints` and `children`
 * to apply those breakpoints to
 * @param props.breakpoints
 * @param props.children
 * @param props.lgStyle
 * @param props.mdStyle
 * @param props.smStyle
 * @param props.xlStyle
 * @param props.xsStyle
 * @return A fragment wrapping the children with the applied
 * `styleProps`
 * @example
 * ```tsx
 * <MediaQuery breakpoints={minWidth(500, { color: 'red' })}>
 *   <Text>Every</Text>
 *   <Text>child</Text>
 *   <Text>is</Text>
 *   <Text>styled</Text>
 * </MediaQuery>
 * ```
 */
export declare const MediaQuery: React.FC<MediaQueryProps>;