import { Theme } from '../types';
declare type ThemeProp = {
    theme: Theme.ThemeInterface;
};
export declare type ThemeFn<T> = ({ theme }: {
    theme: Theme.ThemeInterface;
}) => T;
/**
 * Curry function to provide the theme as first parameter, followed up with other parameters
 * @param cb
 *
 * @example
 * const myThemeHelperFunction = withTheme((theme, ...otherParams) => {
 *   ...
 * })
 *
 * css`
 *  ${myThemeHelperFunction(param1, param2)}
 * `
 */
export declare const withTheme: <T extends any[], U = any>(cb: (theme: Theme.ThemeInterface, ...params: T) => U) => (...params: T) => ({ theme }: {
    theme: Theme.ThemeInterface;
}) => U;
/**
 * A shortcut to the `fromProps` that will get a value out of the props.theme object
 */
export declare const getValueFromTheme: (params_0: string, params_1?: ((value: any) => void) | undefined) => ({ theme }: {
    theme: Theme.ThemeInterface;
}) => any;
export declare const themeColor: (params_0?: "error" | "default" | "none" | "primary" | "secondary" | "bright" | "tint" | "support" | "supplement" | undefined, params_1?: string | undefined, params_2?: string | undefined) => ({ theme }: {
    theme: Theme.ThemeInterface;
}) => string;
export declare const breakpoint: (params_0: Theme.TypeBreakpoint, params_1: "mobileS" | "mobileM" | "mobileL" | "tabletS" | "tabletM" | "laptop" | "laptopM" | "laptopL" | "desktop" | "desktopL") => ({ theme }: {
    theme: Theme.ThemeInterface;
}) => any;
export declare const getTypographyFromTheme: () => ({ as: asProp, gutterBottom, styleAs, theme, }: any) => "" | import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
export declare const getTypographyValueFromProperty: (params_0: "small" | "fontFamily" | "fontSize" | "a" | "em" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "li" | "p" | "span", params_1: "color" | "fontSize" | "fontWeight" | "letterSpacing" | "lineHeight" | "marginBottom", params_2?: "mobileS" | "mobileM" | "mobileL" | "tabletS" | "tabletM" | "laptop" | "laptopM" | "laptopL" | "desktop" | "desktopL" | undefined) => ({ theme }: {
    theme: Theme.ThemeInterface;
}) => any;
/**
 * When this style is applied on an element it will be hidden but still readable by screen readers.
 *
 * For example:
 * ```ts
 * const OnlyVisibleForScreenReaders = styled.button`${srOnlyStyle}`
 * ```
 */
export declare const srOnlyStyle: import("styled-components").FlattenSimpleInterpolation;
/**
 * Fills the elements in an SVG with a color, useful for styling icons.
 *
 * For example, using a theme color:
 * ```jsx
 * const PrimaryCarIcon = styled(CarIcon)`
 *   ${svgFill(themeColor('primary'))}
 * `
 * ```
 *
 * Or by setting the color directly using any color valid in CSS, such as hexadecimal, rgba() and hsla().
 *
 * ```jsx
 * const RedCarIcon = styled(CarIcon)`
 *   ${svgFill('#FF0000')}
 * `
 * ```
 */
export declare const svgFill: (color: string | ThemeFn<string>) => ({ theme }: {
    theme: Theme.ThemeInterface;
}) => import("styled-components").FlattenSimpleInterpolation;
/**
 * Adds an animated background to the element to indicate the content is loading.
 * @param animateLoading Allows toggling the animation effect, if false a fixed color will be used instead.
 */
export declare const perceivedLoading: (animateLoading?: boolean | undefined) => ({ theme }: {
    theme: Theme.ThemeInterface;
}) => import("styled-components").FlattenSimpleInterpolation;
/**
 * @deprecated Only used in deprecated component GridItem
 * @param sizes
 * @param propertyName
 * @param theme
 */
export declare const mapToBreakpoints: (sizes: string[], propertyName: string, theme: Theme.ThemeInterface) => import("styled-components").FlattenSimpleInterpolation;
export interface ShowHideTypes {
    showAt?: keyof Theme.BreakpointsInterface;
    hideAt?: keyof Theme.BreakpointsInterface;
}
declare type ShowHideProps = ThemeProp & ShowHideTypes;
export declare const showHide: () => ({ hideAt, showAt, theme }: ShowHideProps) => import("styled-components").FlattenSimpleInterpolation;
export declare const showAboveBackDrop: (show?: boolean | undefined) => ({ hasBackDrop, zIndexOffset, }: {
    hasBackDrop?: boolean | undefined;
    zIndexOffset?: number | undefined;
}) => "" | import("styled-components").FlattenSimpleInterpolation;
/**
 * Retrieve an amount of pixels by passing a factor that will multiply it by the theme's spacing unit
 *
 * @example If the theme's spacing unit is 4px:
 * css`
 *  padding: ${themeSpacing(1, 2, 1, 4)} // padding: 4px 8px 4px 16px;
 *  margin-bottom: ${themeSpacing(3)} // margin-bottom: 12px;
 * `
 */
export declare const themeSpacing: (params_0: number, params_1?: number | undefined, params_2?: number | undefined, params_3?: number | undefined) => ({ theme }: {
    theme: Theme.ThemeInterface;
}) => any;
/**
 * @deprecated Please wrap around the SC styled() method to extend your styles.
 */
export declare const customCss: (props: any) => import("styled-components").FlattenSimpleInterpolation;
export interface CustomCssPropsInterface {
    css?: any;
}
export declare type CustomCssPropsType = {
    css?: any;
};
export {};
//# sourceMappingURL=themeUtils.d.ts.map