import { CSSObject } from 'styled-components';
import { FoundationTokenType } from '../../tokens/theme.token';
import { BreakpointType } from '../../breakpoints/breakPoints';
export type DrawerDirection = 'top' | 'bottom' | 'left' | 'right';
/**
 * Drawer Tokens following the pattern: [target].CSSProp.[variant].[state]
 *
 * Structure:
 * - target: overlay | content | handle | header | body | footer | mobileOffset (defines what element the token applies to)
 * - CSSProp: backgroundColor | borderRadius | boxShadow | zIndex | border | padding | fontSize | fontWeight | color | gap | etc.
 * - variant: top | bottom | left | right (drawer direction)
 * - state: default (interaction state)
 *
 * Pattern examples:
 * - overlay.backgroundColor.[state]
 * - overlay.zIndex (no variant dependency)
 * - content.backgroundColor.[variant].[state]
 * - content.borderRadius.[variant]
 * - handle.backgroundColor.[variant].[state]
 * - header.padding.[variant]
 * - header.text.title.fontSize (no variant dependency)
 * - body.padding.[variant]
 * - footer.gap.[variant]
 * - mobileOffset.top.[variant]
 */
export type DrawerTokensType = {
    borderRadius: {
        topLeft: CSSObject['borderTopLeftRadius'];
        topRight: CSSObject['borderTopRightRadius'];
        bottomLeft: CSSObject['borderBottomLeftRadius'];
        bottomRight: CSSObject['borderBottomRightRadius'];
    };
    overlay: {
        backgroundColor: CSSObject['backgroundColor'];
    };
    offset: {
        top: CSSObject['top'];
        bottom: CSSObject['bottom'];
        left: CSSObject['left'];
        right: CSSObject['right'];
    };
    content: {
        backgroundColor: CSSObject['backgroundColor'];
        padding: {
            x: CSSObject['padding'];
            y: CSSObject['padding'];
        };
        handle: {
            backgroundColor: CSSObject['backgroundColor'];
            borderRadius: CSSObject['borderRadius'];
            width: CSSObject['width'];
            height: CSSObject['height'];
        };
    };
};
export type ResponsiveDrawerTokens = {
    [key in keyof BreakpointType]: DrawerTokensType;
};
export declare const getDrawerComponentTokens: (foundationToken: FoundationTokenType) => ResponsiveDrawerTokens;