import type { CSSObject } from '@emotion/react';
import facepaint from 'facepaint';
import type { Breakpoint } from "./themes/default/breakpoints.js";
type ResponsiveObject<T> = Partial<Record<Breakpoint, T>>;
export type ResponsiveProp<T> = T | ResponsiveObject<T>;
/**
 * Utilities related to responsive props. Emotion's
 * [facepaint](https://github.com/emotion-js/facepaint) ultimately generates
 * media queries for the resolved styles.
 */
export declare const makeThemeUtils: () => {
    mapResponsiveProp: <Value>(value?: ResponsiveProp<Value>) => Value | (NonNullable<Value> | null)[] | undefined;
    mapResponsiveScale: <KeyOrBreakpointMap extends keyof ScaleDefinition, ScaleDefinition>(value: ResponsiveProp<KeyOrBreakpointMap> | undefined, scaleDefinition: ScaleDefinition) => ScaleDefinition[KeyOrBreakpointMap] | (ScaleDefinition[KeyOrBreakpointMap] | null)[] | undefined;
    optimizeResponsiveArray: <Value extends string | number>(value: ResponsiveArray<Value>) => ResponsiveArray<Value>;
    responsiveRange: (props: ResponsiveRangeProps) => [boolean, boolean, boolean, boolean];
    responsiveStyles: ({ mobile, tablet, desktop, wide, }: ResponsiveStyle) => CSSObject | undefined;
    resolveResponsiveProps: facepaint.DynamicStyleFunction;
};
/**
 * Helper for mapping keys/breakpoint map to a theme scale e.g.
 *
 * @example
 * mapResponsiveProp('small', { small: 8, large: 16 }) // 8
 * mapResponsiveProp(
 *   { mobile:'small', tablet:'large' },
 *   { small: 8, large: 16 }
 * ) // [8,16]
 */
export declare const mapResponsiveScale: <KeyOrBreakpointMap extends keyof ScaleDefinition, ScaleDefinition>(value: ResponsiveProp<KeyOrBreakpointMap> | undefined, scaleDefinition: ScaleDefinition) => ScaleDefinition[KeyOrBreakpointMap] | (ScaleDefinition[KeyOrBreakpointMap] | null)[] | undefined;
export declare const mapResponsiveProp: <Value>(value?: ResponsiveProp<Value>) => Value | (NonNullable<Value> | null)[] | undefined;
export declare function createResponsiveMapFn<Keys extends keyof LookupMap, LookupMap>(lookupMap: LookupMap): (prop?: ResponsiveProp<Keys>) => LookupMap[Keys] | {
    mobile: LookupMap[Keys] | undefined;
    tablet: LookupMap[Keys] | undefined;
    desktop: LookupMap[Keys] | undefined;
    wide: LookupMap[Keys] | undefined;
} | undefined;
export type ResponsiveRangeProps = {
    /** Sets the screen width floor breakpoint the elements should be hidden. */
    above?: Exclude<Breakpoint, 'wide'>;
    /** Sets the screen width ceiling breakpoint the elements should be hidden. */
    below?: Exclude<Breakpoint, 'mobile'>;
};
export declare const responsiveRange: (props: ResponsiveRangeProps) => [boolean, boolean, boolean, boolean];
type ResponsiveArray<Value extends string | number> = ReadonlyArray<Value | null> & {
    length: 2 | 3 | 4;
} & {
    0: Value | null;
};
export declare const optimizeResponsiveArray: <Value extends string | number>(value: ResponsiveArray<Value>) => ResponsiveArray<Value>;
export declare const breakpointQuery: {
    readonly tablet: string;
    readonly desktop: string;
    readonly wide: string;
};
export interface ResponsiveStyle {
    mobile?: CSSObject;
    tablet?: CSSObject;
    desktop?: CSSObject;
    wide?: CSSObject;
}
export declare const responsiveStyles: ({ mobile, tablet, desktop, wide, }: ResponsiveStyle) => CSSObject | undefined;
export {};