import React from 'react';
import type { ResponsiveProps } from '../types';
import type { UseBreakpointsOptions } from './BreakpointContext';
import type { MediaQueryProps } from './MediaQuery';
declare global {
    namespace JSX {
        interface IntrinsicAttributes {
            slot?: string;
        }
    }
}
export declare type WithMediaQueryProps<P extends ResponsiveProps> = MediaQueryProps<P['style']> & P;
export declare type WithMediaQueryStyleProps<P extends ResponsiveProps> = P & UseBreakpointsOptions<P['style']>;
export declare type WithMediaQueryInnerProps<P extends ResponsiveProps> = P & {
    /**
     * @TJS-ignore
     */
    dataSet?: Record<string, ''>;
    /**
     * @TJS-ignore
     */
    hostDataSet?: Record<string, ''>;
    /**
     * @TJS-ignore
     */
    containerDataSet?: Record<string, ''>;
};
/**
 * A higher order component that will enhance a given component so
 * that if a `breakpoints` or `(xs|sm|md|lg|xl)Style` prop is provided
 * that component will be wrapped in a `MediaQuery`
 *
 * @param Component a component to enhance with
 * the `breakpoints` props
 * @return an enhanced component that will apply styles
 * based on conditions specified in the `breakpoints` prop
 * @example
 * ```tsx
 * const ResponsiveView = withMediaQuery(View);
 *
 * <ResponsiveView
 *   style={{ width: 100 }}
 *   breakpoints={[
 *     minWidth(500, { width: 200 }),
 *     minWidth(700, { width: 300 })
 *   ]}
 * />
 * ```
 */
export declare const withMediaQuery: <P extends ResponsiveProps<import("../types").Style>>(Component: React.ComponentType<WithMediaQueryInnerProps<P>>) => React.FC<WithMediaQueryProps<P>>;