import { CSSObject } from 'styled-components';
import { KeyValuePairSize } from './types';
import { FoundationTokenType } from '../../tokens/theme.token';
import { BreakpointType } from '../../breakpoints/breakPoints';
/**
 * KeyValuePair Tokens following the pattern: [target].CSSProp.[size].[state]
 * component.CSSProp.[size].[variant].[subType].[state].value
 * Structure:
 * - target: container | key | value (defines what element the token applies to)
 * - CSSProp: gap | color | fontSize
 * - size: sm | md | lg (only for size-dependent properties like value fontSize)
 * - state: vertical | horizontal (layout state)
 *
 * Size-independent properties: gap, key color, key fontSize, value color
 * Size-dependent properties: value fontSize
 */
export type KeyValuePairTokensType = {
    gap: {
        [key in 'vertical' | 'horizontal']: CSSObject['gap'];
    };
    key: {
        color: CSSObject['color'];
        fontSize: CSSObject['fontSize'];
        fontWeight: CSSObject['fontWeight'];
        gap: CSSObject['gap'];
    };
    value: {
        color: CSSObject['color'];
        fontSize: {
            [key in KeyValuePairSize]: CSSObject['fontSize'];
        };
        fontWeight: CSSObject['fontWeight'];
        gap: CSSObject['gap'];
    };
};
export type ResponsiveKeyValuePairTokens = {
    [key in keyof BreakpointType]: KeyValuePairTokensType;
};
export declare const getKeyValuePairTokens: (foundationToken: FoundationTokenType) => ResponsiveKeyValuePairTokens;