import { CSSObject } from 'styled-components';
import { MultiSelectMenuSize, MultiSelectSelectionTagType, MultiSelectVariant } from './types';
import { FoundationTokenType } from '../../tokens/theme.token';
import { BreakpointType } from '../../breakpoints/breakPoints';
type TriggerStates = 'open' | 'closed' | 'hover' | 'focus' | 'error';
export type MultiSelectItemStates = 'default' | 'hover' | 'active' | 'focus' | 'focusVisible' | 'disabled' | 'selected';
export type MultiSelectTokensType = {
    gap: CSSObject['gap'];
    label: {
        fontSize: CSSObject['fontSize'];
        fontWeight: CSSObject['fontWeight'];
        color: {
            [key in MultiSelectItemStates]: CSSObject['color'];
        };
    };
    subLabel: {
        fontSize: CSSObject['fontSize'];
        fontWeight: CSSObject['fontWeight'];
        color: {
            [key in MultiSelectItemStates]: CSSObject['color'];
        };
    };
    hintText: {
        fontSize: CSSObject['fontSize'];
        fontWeight: CSSObject['fontWeight'];
        color: {
            [key in MultiSelectItemStates]: CSSObject['color'];
        };
    };
    errorMessage: {
        fontSize: CSSObject['fontSize'];
        fontWeight: CSSObject['fontWeight'];
        color: CSSObject['color'];
    };
    required: {
        color: CSSObject['color'];
    };
    trigger: {
        height: {
            [key in MultiSelectMenuSize]: {
                [key in MultiSelectVariant]: CSSObject['height'];
            };
        };
        padding: {
            [key in MultiSelectMenuSize]: {
                [key in MultiSelectVariant]: {
                    x: CSSObject['padding'];
                    y: CSSObject['padding'];
                };
            };
        };
        borderRadius: {
            [key in MultiSelectMenuSize]: {
                [key in MultiSelectVariant]: CSSObject['borderRadius'];
            };
        };
        boxShadow: {
            [key in MultiSelectVariant]: CSSObject['boxShadow'];
        };
        backgroundColor: {
            [key in MultiSelectVariant]: {
                [key in TriggerStates]: CSSObject['backgroundColor'];
            };
        };
        outline: {
            [key in MultiSelectVariant]: {
                [key in TriggerStates]: CSSObject['outline'];
            };
        };
        selectionTag: {
            [key in MultiSelectVariant]: {
                [key in MultiSelectSelectionTagType]: {
                    color: CSSObject['color'];
                    backgroundColor: CSSObject['backgroundColor'];
                    fontWeight: CSSObject['fontWeight'];
                };
            };
        };
        placeholder: {
            color: CSSObject['color'];
            fontSize: CSSObject['fontSize'];
            fontWeight: CSSObject['fontWeight'];
        };
        selectedValue: {
            color: CSSObject['color'];
            fontSize: CSSObject['fontSize'];
            fontWeight: CSSObject['fontWeight'];
        };
    };
    menu: {
        backgroundColor: CSSObject['backgroundColor'];
        border: CSSObject['border'];
        borderRadius: CSSObject['borderRadius'];
        padding: {
            [key in MultiSelectMenuSize]: {
                [key in MultiSelectVariant]: {
                    x: CSSObject['padding'];
                    y: CSSObject['padding'];
                };
            };
        };
        item: {
            padding: CSSObject['padding'];
            margin: CSSObject['margin'];
            borderRadius: CSSObject['borderRadius'];
            gap: CSSObject['gap'];
            backgroundColor: {
                [key in MultiSelectItemStates]: CSSObject['backgroundColor'];
            };
            optionsLabel: {
                fontSize: CSSObject['fontSize'];
                fontWeight: CSSObject['fontWeight'];
                color: {
                    [key in MultiSelectItemStates]: CSSObject['color'];
                };
            };
            option: {
                fontSize: CSSObject['fontSize'];
                fontWeight: CSSObject['fontWeight'];
                color: {
                    [key in MultiSelectItemStates]: CSSObject['color'];
                };
            };
            description: {
                fontSize: CSSObject['fontSize'];
                fontWeight: CSSObject['fontWeight'];
                color: {
                    [key in MultiSelectItemStates]: CSSObject['color'];
                };
            };
            seperator: {
                color: CSSObject['color'];
                height: CSSObject['height'];
                margin: CSSObject['margin'];
            };
        };
    };
    drawer: {
        header: {
            paddingX: CSSObject['padding'];
            paddingBottom: CSSObject['padding'];
            borderBottom: CSSObject['borderBottom'];
        };
        search: {
            paddingX: CSSObject['padding'];
            marginTop: CSSObject['margin'];
            marginBottom: CSSObject['margin'];
        };
        content: {
            gap: CSSObject['gap'];
        };
    };
};
export type ResponsiveMultiSelectTokens = {
    [key in keyof BreakpointType]: MultiSelectTokensType;
};
export declare const getMultiSelectTokens: (foundationToken: FoundationTokenType) => ResponsiveMultiSelectTokens;
export {};