import * as React from 'react';
export declare const PanelSurface: import("@stitches/react").IStyledComponent<"div", {}, {
    tokens: {
        colors: {
            $white: string;
            $black: string;
            $highlight: string;
            $glass: string;
        };
        space: {
            $1: string;
            $2: string;
            $3: string;
            $4: string;
            $5: string;
            $6: string;
            $7: string;
            $8: string;
        };
        fonts: {
            $mono: string;
        };
        fontWeights: {};
        fontSizes: {};
        lineHeights: {};
        letterSpacings: {};
        sizes: {};
        borderWidths: {
            $normal: string;
            $thick: string;
        };
        radii: {};
        shadows: {};
        zIndices: {};
        transitions: {};
    };
    breakpoints: {
        md: (rule: string) => string;
        sm: (rule: string) => string;
    };
}>;
export declare type PanelProps = {
    children?: React.ReactNode;
    anchor: 'left' | 'right';
    open?: boolean;
    onClose?: () => void;
};
export declare function Panel({ anchor, open: controlledOpen, onClose, ...rest }: PanelProps): JSX.Element;
export declare const PanelContent: import("@stitches/react").IStyledComponent<"div", {}, {
    tokens: {
        colors: {
            $white: string;
            $black: string;
            $highlight: string;
            $glass: string;
        };
        space: {
            $1: string;
            $2: string;
            $3: string;
            $4: string;
            $5: string;
            $6: string;
            $7: string;
            $8: string;
        };
        fonts: {
            $mono: string;
        };
        fontWeights: {};
        fontSizes: {};
        lineHeights: {};
        letterSpacings: {};
        sizes: {};
        borderWidths: {
            $normal: string;
            $thick: string;
        };
        radii: {};
        shadows: {};
        zIndices: {};
        transitions: {};
    };
    breakpoints: {
        md: (rule: string) => string;
        sm: (rule: string) => string;
    };
}>;
export declare function PanelToggle({ children }: {
    children?: React.ReactNode;
}): JSX.Element;
export declare const PanelHeader: import("@stitches/react").IStyledComponent<"div", {}, {
    tokens: {
        colors: {
            $white: string;
            $black: string;
            $highlight: string;
            $glass: string;
        };
        space: {
            $1: string;
            $2: string;
            $3: string;
            $4: string;
            $5: string;
            $6: string;
            $7: string;
            $8: string;
        };
        fonts: {
            $mono: string;
        };
        fontWeights: {};
        fontSizes: {};
        lineHeights: {};
        letterSpacings: {};
        sizes: {};
        borderWidths: {
            $normal: string;
            $thick: string;
        };
        radii: {};
        shadows: {};
        zIndices: {};
        transitions: {};
    };
    breakpoints: {
        md: (rule: string) => string;
        sm: (rule: string) => string;
    };
}>;