import React, { CSSProperties } from 'react';
import { ColorTokens } from '../../foundation/Colors';
import { TypographyTokens } from '../../foundation/Typography';
import { ExclaimTooltipProps } from '../ExclaimTooltip';
export type SelectOption<IdType extends string | number> = {
    icon?: React.ReactNode;
    id: IdType;
    isDisabled?: boolean;
    name: string;
};
export type SelectProps<Option extends SelectOption<string | number>> = {
    approving?: boolean;
    disabled?: boolean;
    label?: string;
    labelAttentionIndicatorColorToken?: ColorTokens;
    labelColorToken?: ColorTokens;
    labelTypographyToken?: TypographyTokens;
    onOptionChange: (optionId: Option['id']) => void;
    optionItemStyles?: CSSProperties;
    options: Option[];
    optionsContainerStyles?: CSSProperties;
    optionsTypographyToken?: TypographyTokens;
    placeholder?: string;
    popoverContainerStyle?: Partial<CSSStyleDeclaration>;
    renderItem?: ({ option, onClick, disabled, }: {
        disabled?: boolean;
        onClick: (optionId: Option['id']) => void;
        option: Option;
    }) => React.ReactNode;
    selectBoxStyles?: CSSProperties;
    selectedOptionId?: Option['id'] | null;
    tooltip?: ExclaimTooltipProps['children'];
    tooltipColorToken?: ColorTokens;
};
export declare function Select<Option extends SelectOption<string | number>>({ options, selectedOptionId, onOptionChange, approving, disabled, label, labelColorToken, labelTypographyToken, labelAttentionIndicatorColorToken, tooltip, tooltipColorToken, placeholder, optionsTypographyToken, selectBoxStyles, optionItemStyles, optionsContainerStyles, renderItem, popoverContainerStyle, }: SelectProps<Option>): React.JSX.Element | null;