import { CSSProperties, ReactNode } from 'react';
export type ResponsiveBreakpointIndex = 0 | 1 | 2 | 3;
export interface ResponsiveLateProps {
    children: (breakpoint: ResponsiveBreakpointIndex) => ReactNode;
}
export interface ResponsiveMultipleProps<TCase> {
    /**
     * Tuple of user defined identifiers for each breakpoint.
     * `null` means that the prior case should be used.
     *
     * @example ["tall", null, "grande", "venti"]
     */
    cases: [TCase | null, TCase | null, (TCase | null)?, (TCase | null)?];
    children: (caseName: TCase) => ReactNode;
    /**
     * @default "block"
     */
    display?: CSSProperties['display'];
}
/**
 * Renders JSX returned from `children` based on current viewport breakpoint.
 *
 * ⚠️ **Use responsibly!** We should always prefer using a simple media query or
 * responsive tuple when it’s possible. This component is meant for edge cases.
 *
 * Prior Art:
 * - @arsty/fresnel — https://github.com/artsy/fresnel
 * - The Perils of Rehydration — https://joshwcomeau.com/react/the-perils-of-rehydration
 */
export declare const Responsive: {
    Late: typeof ResponsiveLate;
    Multiple: typeof ResponsiveMultiple;
};
/**
 * Strategy "late" does not render anything on the server, and after a first useEffect renders
 * just the correct breakpoint, only on the client. This would be used whenever a skeleton is
 * outside of the component or the data depends on the user so we couldn’t SSR anyway.
 */
declare function ResponsiveLate({ children }: ResponsiveLateProps): import("theme-ui/jsx-runtime").JSX.Element;
/**
 * Strategy "multiple" renders all variants and hides every except of one based on a media query.
 * We would get useEffects running in all the components.
 * If we fetch data in the component, we **WILL** send multiple requests.
 */
declare function ResponsiveMultiple<TCase extends string | number | null | undefined>({ cases, children, display, }: ResponsiveMultipleProps<TCase>): import("theme-ui/jsx-runtime").JSX.Element;
export {};
