import { FlexDirectionProperty } from "csstype";
import React, { ComponentType, ComponentPropsWithoutRef } from "react";
import { IBreakPointDescriptor } from "../../layout/mediaQueries";
import { Theme } from "../../support/theme";
export interface ISharedElementProps {
    padding?: string | IBreakPointDescriptor<string>;
    margin?: string | IBreakPointDescriptor<string>;
    cssWithTheme?: (props: {
        theme: Theme;
    }) => string;
}
export declare const addCssWithTheme: ({ cssWithTheme, theme }: ISharedElementProps & {
    theme?: {
        colors: {
            brand01: string;
            brand02: string;
            brand03: string;
            ui01: string;
            ui02: string;
            ui03: string;
            ui04: string;
            ui05: string;
            text01: string;
            text02: string;
            text03: string;
            inverse01: string;
            field01: string;
            support01: string;
            support02: string;
            support03: string;
            support04: string;
            nav01: string;
            nav02: string;
        };
        color: {
            brand01: string;
            brand02: string;
            brand03: string;
            ui01: string;
            ui02: string;
            ui03: string;
            ui04: string;
            ui05: string;
            text01: string;
            text02: string;
            text03: string;
            inverse01: string;
            field01: string;
            support01: string;
            support02: string;
            support03: string;
            support04: string;
            nav01: string;
            nav02: string;
        };
        spacing: {
            spacing: {
                "3xs": string;
                xs3: string;
                "2xs": string;
                xs2: string;
                xs: string;
                sm: string;
                md: string;
                lg: string;
                xl: string;
                "2xl": string;
                xl2: string;
                "3xl": string;
                xl3: string;
            };
            layout: {
                "2xs": string;
                xs2: string;
                xs: string;
                sm: string;
                md: string;
                lg: string;
                xl: string;
                "2xl": string;
                xl2: string;
            };
        };
        layers: typeof import("../../layout/layers").layers;
        fonts: {
            weights: {
                thin: number;
                regular: number;
                bold: number;
            };
            styles: {
                alpha: string;
                beta: string;
                gamma: string;
                delta: string;
                epsilon: string;
                body: string;
                specialtyBody: string;
                label: string;
                input: string;
                large: string;
                dataVizLabel: string;
            };
        };
        breakpoints: Required<IBreakPointDescriptor<number>>;
    };
}) => string;
export declare const buildSharedPropsStyles: (props: ISharedElementProps & {
    theme?: {
        colors: {
            brand01: string;
            brand02: string;
            brand03: string;
            ui01: string;
            ui02: string;
            ui03: string;
            ui04: string;
            ui05: string;
            text01: string;
            text02: string;
            text03: string;
            inverse01: string;
            field01: string;
            support01: string;
            support02: string;
            support03: string;
            support04: string;
            nav01: string;
            nav02: string;
        };
        color: {
            brand01: string;
            brand02: string;
            brand03: string;
            ui01: string;
            ui02: string;
            ui03: string;
            ui04: string;
            ui05: string;
            text01: string;
            text02: string;
            text03: string;
            inverse01: string;
            field01: string;
            support01: string;
            support02: string;
            support03: string;
            support04: string;
            nav01: string;
            nav02: string;
        };
        spacing: {
            spacing: {
                "3xs": string;
                xs3: string;
                "2xs": string;
                xs2: string;
                xs: string;
                sm: string;
                md: string;
                lg: string;
                xl: string;
                "2xl": string;
                xl2: string;
                "3xl": string;
                xl3: string;
            };
            layout: {
                "2xs": string;
                xs2: string;
                xs: string;
                sm: string;
                md: string;
                lg: string;
                xl: string;
                "2xl": string;
                xl2: string;
            };
        };
        layers: typeof import("../../layout/layers").layers;
        fonts: {
            weights: {
                thin: number;
                regular: number;
                bold: number;
            };
            styles: {
                alpha: string;
                beta: string;
                gamma: string;
                delta: string;
                epsilon: string;
                body: string;
                specialtyBody: string;
                label: string;
                input: string;
                large: string;
                dataVizLabel: string;
            };
        };
        breakpoints: Required<IBreakPointDescriptor<number>>;
    };
}) => string;
export declare const makeBaseElement: <Props extends {
    className?: string;
}>(element: React.ComponentType<Props> | string, additionalClassNames?: string[]) => ComponentType<ISharedElementProps & {
    className?: string;
} & Props>;
export declare const CenteredBlock: import("create-emotion-styled").StyledOtherComponent<ISharedElementProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
    colors: {
        brand01: string;
        brand02: string;
        brand03: string;
        ui01: string;
        ui02: string;
        ui03: string;
        ui04: string;
        ui05: string;
        text01: string;
        text02: string;
        text03: string;
        inverse01: string;
        field01: string;
        support01: string;
        support02: string;
        support03: string;
        support04: string;
        nav01: string;
        nav02: string;
    };
    color: {
        brand01: string;
        brand02: string;
        brand03: string;
        ui01: string;
        ui02: string;
        ui03: string;
        ui04: string;
        ui05: string;
        text01: string;
        text02: string;
        text03: string;
        inverse01: string;
        field01: string;
        support01: string;
        support02: string;
        support03: string;
        support04: string;
        nav01: string;
        nav02: string;
    };
    spacing: {
        spacing: {
            "3xs": string;
            xs3: string;
            "2xs": string;
            xs2: string;
            xs: string;
            sm: string;
            md: string;
            lg: string;
            xl: string;
            "2xl": string;
            xl2: string;
            "3xl": string;
            xl3: string;
        };
        layout: {
            "2xs": string;
            xs2: string;
            xs: string;
            sm: string;
            md: string;
            lg: string;
            xl: string;
            "2xl": string;
            xl2: string;
        };
    };
    layers: typeof import("../../layout/layers").layers;
    fonts: {
        weights: {
            thin: number;
            regular: number;
            bold: number;
        };
        styles: {
            alpha: string;
            beta: string;
            gamma: string;
            delta: string;
            epsilon: string;
            body: string;
            specialtyBody: string;
            label: string;
            input: string;
            large: string;
            dataVizLabel: string;
        };
    };
    breakpoints: Required<IBreakPointDescriptor<number>>;
}> & {
    formatter: (props: ISharedElementProps) => string;
};
export declare const Block: import("create-emotion-styled").StyledOtherComponent<ISharedElementProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
    colors: {
        brand01: string;
        brand02: string;
        brand03: string;
        ui01: string;
        ui02: string;
        ui03: string;
        ui04: string;
        ui05: string;
        text01: string;
        text02: string;
        text03: string;
        inverse01: string;
        field01: string;
        support01: string;
        support02: string;
        support03: string;
        support04: string;
        nav01: string;
        nav02: string;
    };
    color: {
        brand01: string;
        brand02: string;
        brand03: string;
        ui01: string;
        ui02: string;
        ui03: string;
        ui04: string;
        ui05: string;
        text01: string;
        text02: string;
        text03: string;
        inverse01: string;
        field01: string;
        support01: string;
        support02: string;
        support03: string;
        support04: string;
        nav01: string;
        nav02: string;
    };
    spacing: {
        spacing: {
            "3xs": string;
            xs3: string;
            "2xs": string;
            xs2: string;
            xs: string;
            sm: string;
            md: string;
            lg: string;
            xl: string;
            "2xl": string;
            xl2: string;
            "3xl": string;
            xl3: string;
        };
        layout: {
            "2xs": string;
            xs2: string;
            xs: string;
            sm: string;
            md: string;
            lg: string;
            xl: string;
            "2xl": string;
            xl2: string;
        };
    };
    layers: typeof import("../../layout/layers").layers;
    fonts: {
        weights: {
            thin: number;
            regular: number;
            bold: number;
        };
        styles: {
            alpha: string;
            beta: string;
            gamma: string;
            delta: string;
            epsilon: string;
            body: string;
            specialtyBody: string;
            label: string;
            input: string;
            large: string;
            dataVizLabel: string;
        };
    };
    breakpoints: Required<IBreakPointDescriptor<number>>;
}> & {
    formatter: (props: ISharedElementProps & {
        theme?: {
            colors: {
                brand01: string;
                brand02: string;
                brand03: string;
                ui01: string;
                ui02: string;
                ui03: string;
                ui04: string;
                ui05: string;
                text01: string;
                text02: string;
                text03: string;
                inverse01: string;
                field01: string;
                support01: string;
                support02: string;
                support03: string;
                support04: string;
                nav01: string;
                nav02: string;
            };
            color: {
                brand01: string;
                brand02: string;
                brand03: string;
                ui01: string;
                ui02: string;
                ui03: string;
                ui04: string;
                ui05: string;
                text01: string;
                text02: string;
                text03: string;
                inverse01: string;
                field01: string;
                support01: string;
                support02: string;
                support03: string;
                support04: string;
                nav01: string;
                nav02: string;
            };
            spacing: {
                spacing: {
                    "3xs": string;
                    xs3: string;
                    "2xs": string;
                    xs2: string;
                    xs: string;
                    sm: string;
                    md: string;
                    lg: string;
                    xl: string;
                    "2xl": string;
                    xl2: string;
                    "3xl": string;
                    xl3: string;
                };
                layout: {
                    "2xs": string;
                    xs2: string;
                    xs: string;
                    sm: string;
                    md: string;
                    lg: string;
                    xl: string;
                    "2xl": string;
                    xl2: string;
                };
            };
            layers: typeof import("../../layout/layers").layers;
            fonts: {
                weights: {
                    thin: number;
                    regular: number;
                    bold: number;
                };
                styles: {
                    alpha: string;
                    beta: string;
                    gamma: string;
                    delta: string;
                    epsilon: string;
                    body: string;
                    specialtyBody: string;
                    label: string;
                    input: string;
                    large: string;
                    dataVizLabel: string;
                };
            };
            breakpoints: Required<IBreakPointDescriptor<number>>;
        };
    }) => string;
};
export declare const Inline: import("create-emotion-styled").StyledOtherComponent<ISharedElementProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
    colors: {
        brand01: string;
        brand02: string;
        brand03: string;
        ui01: string;
        ui02: string;
        ui03: string;
        ui04: string;
        ui05: string;
        text01: string;
        text02: string;
        text03: string;
        inverse01: string;
        field01: string;
        support01: string;
        support02: string;
        support03: string;
        support04: string;
        nav01: string;
        nav02: string;
    };
    color: {
        brand01: string;
        brand02: string;
        brand03: string;
        ui01: string;
        ui02: string;
        ui03: string;
        ui04: string;
        ui05: string;
        text01: string;
        text02: string;
        text03: string;
        inverse01: string;
        field01: string;
        support01: string;
        support02: string;
        support03: string;
        support04: string;
        nav01: string;
        nav02: string;
    };
    spacing: {
        spacing: {
            "3xs": string;
            xs3: string;
            "2xs": string;
            xs2: string;
            xs: string;
            sm: string;
            md: string;
            lg: string;
            xl: string;
            "2xl": string;
            xl2: string;
            "3xl": string;
            xl3: string;
        };
        layout: {
            "2xs": string;
            xs2: string;
            xs: string;
            sm: string;
            md: string;
            lg: string;
            xl: string;
            "2xl": string;
            xl2: string;
        };
    };
    layers: typeof import("../../layout/layers").layers;
    fonts: {
        weights: {
            thin: number;
            regular: number;
            bold: number;
        };
        styles: {
            alpha: string;
            beta: string;
            gamma: string;
            delta: string;
            epsilon: string;
            body: string;
            specialtyBody: string;
            label: string;
            input: string;
            large: string;
            dataVizLabel: string;
        };
    };
    breakpoints: Required<IBreakPointDescriptor<number>>;
}> & {
    formatter: (props: ISharedElementProps & {
        theme?: {
            colors: {
                brand01: string;
                brand02: string;
                brand03: string;
                ui01: string;
                ui02: string;
                ui03: string;
                ui04: string;
                ui05: string;
                text01: string;
                text02: string;
                text03: string;
                inverse01: string;
                field01: string;
                support01: string;
                support02: string;
                support03: string;
                support04: string;
                nav01: string;
                nav02: string;
            };
            color: {
                brand01: string;
                brand02: string;
                brand03: string;
                ui01: string;
                ui02: string;
                ui03: string;
                ui04: string;
                ui05: string;
                text01: string;
                text02: string;
                text03: string;
                inverse01: string;
                field01: string;
                support01: string;
                support02: string;
                support03: string;
                support04: string;
                nav01: string;
                nav02: string;
            };
            spacing: {
                spacing: {
                    "3xs": string;
                    xs3: string;
                    "2xs": string;
                    xs2: string;
                    xs: string;
                    sm: string;
                    md: string;
                    lg: string;
                    xl: string;
                    "2xl": string;
                    xl2: string;
                    "3xl": string;
                    xl3: string;
                };
                layout: {
                    "2xs": string;
                    xs2: string;
                    xs: string;
                    sm: string;
                    md: string;
                    lg: string;
                    xl: string;
                    "2xl": string;
                    xl2: string;
                };
            };
            layers: typeof import("../../layout/layers").layers;
            fonts: {
                weights: {
                    thin: number;
                    regular: number;
                    bold: number;
                };
                styles: {
                    alpha: string;
                    beta: string;
                    gamma: string;
                    delta: string;
                    epsilon: string;
                    body: string;
                    specialtyBody: string;
                    label: string;
                    input: string;
                    large: string;
                    dataVizLabel: string;
                };
            };
            breakpoints: Required<IBreakPointDescriptor<number>>;
        };
    }) => string;
};
export declare const InlineBlock: import("create-emotion-styled").StyledOtherComponent<ISharedElementProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
    colors: {
        brand01: string;
        brand02: string;
        brand03: string;
        ui01: string;
        ui02: string;
        ui03: string;
        ui04: string;
        ui05: string;
        text01: string;
        text02: string;
        text03: string;
        inverse01: string;
        field01: string;
        support01: string;
        support02: string;
        support03: string;
        support04: string;
        nav01: string;
        nav02: string;
    };
    color: {
        brand01: string;
        brand02: string;
        brand03: string;
        ui01: string;
        ui02: string;
        ui03: string;
        ui04: string;
        ui05: string;
        text01: string;
        text02: string;
        text03: string;
        inverse01: string;
        field01: string;
        support01: string;
        support02: string;
        support03: string;
        support04: string;
        nav01: string;
        nav02: string;
    };
    spacing: {
        spacing: {
            "3xs": string;
            xs3: string;
            "2xs": string;
            xs2: string;
            xs: string;
            sm: string;
            md: string;
            lg: string;
            xl: string;
            "2xl": string;
            xl2: string;
            "3xl": string;
            xl3: string;
        };
        layout: {
            "2xs": string;
            xs2: string;
            xs: string;
            sm: string;
            md: string;
            lg: string;
            xl: string;
            "2xl": string;
            xl2: string;
        };
    };
    layers: typeof import("../../layout/layers").layers;
    fonts: {
        weights: {
            thin: number;
            regular: number;
            bold: number;
        };
        styles: {
            alpha: string;
            beta: string;
            gamma: string;
            delta: string;
            epsilon: string;
            body: string;
            specialtyBody: string;
            label: string;
            input: string;
            large: string;
            dataVizLabel: string;
        };
    };
    breakpoints: Required<IBreakPointDescriptor<number>>;
}> & {
    formatter: (props: FlexProps) => string;
};
export declare type FlexProps = {
    direction?: FlexDirectionProperty;
    alignment?: string;
} & ISharedElementProps;
export declare const Flex: import("create-emotion-styled").StyledOtherComponent<FlexProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
    colors: {
        brand01: string;
        brand02: string;
        brand03: string;
        ui01: string;
        ui02: string;
        ui03: string;
        ui04: string;
        ui05: string;
        text01: string;
        text02: string;
        text03: string;
        inverse01: string;
        field01: string;
        support01: string;
        support02: string;
        support03: string;
        support04: string;
        nav01: string;
        nav02: string;
    };
    color: {
        brand01: string;
        brand02: string;
        brand03: string;
        ui01: string;
        ui02: string;
        ui03: string;
        ui04: string;
        ui05: string;
        text01: string;
        text02: string;
        text03: string;
        inverse01: string;
        field01: string;
        support01: string;
        support02: string;
        support03: string;
        support04: string;
        nav01: string;
        nav02: string;
    };
    spacing: {
        spacing: {
            "3xs": string;
            xs3: string;
            "2xs": string;
            xs2: string;
            xs: string;
            sm: string;
            md: string;
            lg: string;
            xl: string;
            "2xl": string;
            xl2: string;
            "3xl": string;
            xl3: string;
        };
        layout: {
            "2xs": string;
            xs2: string;
            xs: string;
            sm: string;
            md: string;
            lg: string;
            xl: string;
            "2xl": string;
            xl2: string;
        };
    };
    layers: typeof import("../../layout/layers").layers;
    fonts: {
        weights: {
            thin: number;
            regular: number;
            bold: number;
        };
        styles: {
            alpha: string;
            beta: string;
            gamma: string;
            delta: string;
            epsilon: string;
            body: string;
            specialtyBody: string;
            label: string;
            input: string;
            large: string;
            dataVizLabel: string;
        };
    };
    breakpoints: Required<IBreakPointDescriptor<number>>;
}> & {
    formatter: (props: FlexProps) => string;
};
export declare const Seperator: ({ inverse, fullWidth, padding, className, hideBar, withinGrid }: {
    inverse?: boolean;
    fullWidth?: boolean;
    padding?: string | IBreakPointDescriptor<string>;
    className?: string;
    hideBar?: boolean;
    withinGrid?: boolean;
}) => JSX.Element;
export declare const VerticalSeperator: ({ inverse, padding, className }: {
    inverse?: boolean;
    padding?: string | IBreakPointDescriptor<string>;
    className?: string;
}) => JSX.Element;
export declare const ContentWrapper: import("create-emotion-styled").StyledOtherComponent<{}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
    colors: {
        brand01: string;
        brand02: string;
        brand03: string;
        ui01: string;
        ui02: string;
        ui03: string;
        ui04: string;
        ui05: string;
        text01: string;
        text02: string;
        text03: string;
        inverse01: string;
        field01: string;
        support01: string;
        support02: string;
        support03: string;
        support04: string;
        nav01: string;
        nav02: string;
    };
    color: {
        brand01: string;
        brand02: string;
        brand03: string;
        ui01: string;
        ui02: string;
        ui03: string;
        ui04: string;
        ui05: string;
        text01: string;
        text02: string;
        text03: string;
        inverse01: string;
        field01: string;
        support01: string;
        support02: string;
        support03: string;
        support04: string;
        nav01: string;
        nav02: string;
    };
    spacing: {
        spacing: {
            "3xs": string;
            xs3: string;
            "2xs": string;
            xs2: string;
            xs: string;
            sm: string;
            md: string;
            lg: string;
            xl: string;
            "2xl": string;
            xl2: string;
            "3xl": string;
            xl3: string;
        };
        layout: {
            "2xs": string;
            xs2: string;
            xs: string;
            sm: string;
            md: string;
            lg: string;
            xl: string;
            "2xl": string;
            xl2: string;
        };
    };
    layers: typeof import("../../layout/layers").layers;
    fonts: {
        weights: {
            thin: number;
            regular: number;
            bold: number;
        };
        styles: {
            alpha: string;
            beta: string;
            gamma: string;
            delta: string;
            epsilon: string;
            body: string;
            specialtyBody: string;
            label: string;
            input: string;
            large: string;
            dataVizLabel: string;
        };
    };
    breakpoints: Required<IBreakPointDescriptor<number>>;
}>;
export declare const ContentBottomPadding: import("create-emotion-styled").StyledOtherComponent<{}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
    colors: {
        brand01: string;
        brand02: string;
        brand03: string;
        ui01: string;
        ui02: string;
        ui03: string;
        ui04: string;
        ui05: string;
        text01: string;
        text02: string;
        text03: string;
        inverse01: string;
        field01: string;
        support01: string;
        support02: string;
        support03: string;
        support04: string;
        nav01: string;
        nav02: string;
    };
    color: {
        brand01: string;
        brand02: string;
        brand03: string;
        ui01: string;
        ui02: string;
        ui03: string;
        ui04: string;
        ui05: string;
        text01: string;
        text02: string;
        text03: string;
        inverse01: string;
        field01: string;
        support01: string;
        support02: string;
        support03: string;
        support04: string;
        nav01: string;
        nav02: string;
    };
    spacing: {
        spacing: {
            "3xs": string;
            xs3: string;
            "2xs": string;
            xs2: string;
            xs: string;
            sm: string;
            md: string;
            lg: string;
            xl: string;
            "2xl": string;
            xl2: string;
            "3xl": string;
            xl3: string;
        };
        layout: {
            "2xs": string;
            xs2: string;
            xs: string;
            sm: string;
            md: string;
            lg: string;
            xl: string;
            "2xl": string;
            xl2: string;
        };
    };
    layers: typeof import("../../layout/layers").layers;
    fonts: {
        weights: {
            thin: number;
            regular: number;
            bold: number;
        };
        styles: {
            alpha: string;
            beta: string;
            gamma: string;
            delta: string;
            epsilon: string;
            body: string;
            specialtyBody: string;
            label: string;
            input: string;
            large: string;
            dataVizLabel: string;
        };
    };
    breakpoints: Required<IBreakPointDescriptor<number>>;
}>;
export declare const MainWrapper: import("create-emotion-styled").StyledOtherComponent<{}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
    colors: {
        brand01: string;
        brand02: string;
        brand03: string;
        ui01: string;
        ui02: string;
        ui03: string;
        ui04: string;
        ui05: string;
        text01: string;
        text02: string;
        text03: string;
        inverse01: string;
        field01: string;
        support01: string;
        support02: string;
        support03: string;
        support04: string;
        nav01: string;
        nav02: string;
    };
    color: {
        brand01: string;
        brand02: string;
        brand03: string;
        ui01: string;
        ui02: string;
        ui03: string;
        ui04: string;
        ui05: string;
        text01: string;
        text02: string;
        text03: string;
        inverse01: string;
        field01: string;
        support01: string;
        support02: string;
        support03: string;
        support04: string;
        nav01: string;
        nav02: string;
    };
    spacing: {
        spacing: {
            "3xs": string;
            xs3: string;
            "2xs": string;
            xs2: string;
            xs: string;
            sm: string;
            md: string;
            lg: string;
            xl: string;
            "2xl": string;
            xl2: string;
            "3xl": string;
            xl3: string;
        };
        layout: {
            "2xs": string;
            xs2: string;
            xs: string;
            sm: string;
            md: string;
            lg: string;
            xl: string;
            "2xl": string;
            xl2: string;
        };
    };
    layers: typeof import("../../layout/layers").layers;
    fonts: {
        weights: {
            thin: number;
            regular: number;
            bold: number;
        };
        styles: {
            alpha: string;
            beta: string;
            gamma: string;
            delta: string;
            epsilon: string;
            body: string;
            specialtyBody: string;
            label: string;
            input: string;
            large: string;
            dataVizLabel: string;
        };
    };
    breakpoints: Required<IBreakPointDescriptor<number>>;
}>;
/**
 * Be careful, the following element cannot be a flex item that wraps a grid element
 * so you can toggle the flex off if the grid is immediately within this element.
 * This is due to a very annoying bug in safari that causes general weirdness if a
 * grid is contained in an expanding flexbox.
 *
 * Update: Overriden this bizarre bug by preventing height of all elements within the
 * grid from being set to height 100%.
 *
 * Update 2: Turns out the issue was only vaguely related to this element. An element in safari
 * had a min-height of 200px combined with a flex: 1 1 auto. That seems to have
 * been the cause. Changing to flex: 1 1 200px resolves the issue. I believe it's related to
 * this: https://github.com/philipwalton/flexbugs/issues/132#issuecomment-222266165
 */
declare const VerticalScrollableContentInternal: import("create-emotion-styled").StyledOtherComponent<{}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
    colors: {
        brand01: string;
        brand02: string;
        brand03: string;
        ui01: string;
        ui02: string;
        ui03: string;
        ui04: string;
        ui05: string;
        text01: string;
        text02: string;
        text03: string;
        inverse01: string;
        field01: string;
        support01: string;
        support02: string;
        support03: string;
        support04: string;
        nav01: string;
        nav02: string;
    };
    color: {
        brand01: string;
        brand02: string;
        brand03: string;
        ui01: string;
        ui02: string;
        ui03: string;
        ui04: string;
        ui05: string;
        text01: string;
        text02: string;
        text03: string;
        inverse01: string;
        field01: string;
        support01: string;
        support02: string;
        support03: string;
        support04: string;
        nav01: string;
        nav02: string;
    };
    spacing: {
        spacing: {
            "3xs": string;
            xs3: string;
            "2xs": string;
            xs2: string;
            xs: string;
            sm: string;
            md: string;
            lg: string;
            xl: string;
            "2xl": string;
            xl2: string;
            "3xl": string;
            xl3: string;
        };
        layout: {
            "2xs": string;
            xs2: string;
            xs: string;
            sm: string;
            md: string;
            lg: string;
            xl: string;
            "2xl": string;
            xl2: string;
        };
    };
    layers: typeof import("../../layout/layers").layers;
    fonts: {
        weights: {
            thin: number;
            regular: number;
            bold: number;
        };
        styles: {
            alpha: string;
            beta: string;
            gamma: string;
            delta: string;
            epsilon: string;
            body: string;
            specialtyBody: string;
            label: string;
            input: string;
            large: string;
            dataVizLabel: string;
        };
    };
    breakpoints: Required<IBreakPointDescriptor<number>>;
}>;
export declare class VerticalScrollableContent extends React.PureComponent<ComponentPropsWithoutRef<typeof VerticalScrollableContentInternal> & {
    /** Optionally disable scroll locking (used only for iOS) */
    disableScrollLock?: boolean;
}> {
    trackingNode: HTMLElement;
    static defaultProps: {
        disableScrollLock: boolean;
    };
    componentDidMount(): void;
    componentWillUnmount(): void;
    render(): JSX.Element;
}
export {};