import { useViewportWidth } from '@xstyled/styled-components';
import { FC } from 'react';
import { StyledProps } from 'styled-components';
import { Screen } from '../theme';
import { AnyNumber, AnyString } from '../utils';
import { ChildrenProp } from './types';
type ScreenWidth = Screen | AnyNumber | AnyString;
export type RenderOnScreenProps = {
    /** Breakpoint to compare viewport width against. */
    maxWidth?: Screen;
    /** Breakpoint to compare viewport width against. */
    minWidth?: Screen;
};
/** Returns CSS media string with appropriate min-width and max-width values. */
export declare const mediaBetween: (minWidth: ScreenWidth, maxWidth: ScreenWidth) => (props: StyledProps<unknown>) => string;
/** Returns CSS media string with appropriate max-width value */
export declare const mediaDown: (width: ScreenWidth) => (props: StyledProps<unknown>) => string;
/** Returns CSS media string with appropriate min-width value. */
export declare const mediaUp: (width: ScreenWidth) => (props: StyledProps<unknown>) => string;
/**
 * Renders its content when viewport width is at or above a provided breakpoint.
 * Optionally, direction can be set to down, or below, the breakpoint.
 */
export declare const RenderOnScreen: FC<RenderOnScreenProps & ChildrenProp>;
/** Returns true if current viewport width is smaller than provided width. */
export declare function useDown(width: ScreenWidth): boolean;
/** Returns true if current viewport width is larger than or equal to provided width. */
export declare function useUp(width: ScreenWidth): boolean;
/** Returns true if current viewport width is between provided min and max widths. */
export declare function useBetween(minWidth: ScreenWidth, maxWidth: ScreenWidth): boolean;
/** Return the width of the viewport. */
export { useViewportWidth };
//# sourceMappingURL=media.d.ts.map