import { ReactNode } from 'react';
/**
 * Below this many options a search box is more chrome than help. The same
 * number the field picker uses, so the two searches appear at the same point
 * rather than at two numbers picked separately.
 */
export declare const SELECT_SEARCH_THRESHOLD = 6;
/**
 * Option search. Matches the label and the hint — the hint carries a mailing
 * list's description, so a word from the description finds the list, the way
 * field search matches a field's description. Whitespace-separated terms must
 * all match, in any order, so "news weekly" finds "Weekly newsletter".
 */
export declare function matchesSelectQuery(option: Pick<SelectOption<string>, 'label' | 'hint'>, query: string): boolean;
export interface SelectOption<T extends string> {
    value: T;
    label: string;
    /** Optional leading icon (inline SVG / element). Rendered in the trigger and the row. */
    icon?: ReactNode;
    /** Optional second line under the label in the open menu. */
    hint?: string;
}
/**
 * A styled dropdown that replaces the native <select> in the side editor.
 * Bigger hit area, a leading icon per option, and a popover list with a check on
 * the current choice. Rendered inline (no portal) so it inherits the builder's
 * shadow-root styling. The menu flips above the trigger when there isn't room
 * below.
 *
 * Accessibility: follows the ARIA listbox pattern. The trigger is a button
 * (`aria-haspopup=listbox`, `aria-expanded`, `aria-controls`); the popover is a
 * `role=listbox` whose options carry `role=option` + `aria-selected`. Keyboard:
 * Enter/Space/Arrow opens, Arrow/Home/End move the active option (roving focus),
 * Enter/Space selects, Escape closes and returns focus to the trigger.
 */
export declare function Select<T extends string>({ value, options, onChange, ariaLabel, }: {
    value: T;
    options: SelectOption<T>[];
    onChange: (value: T) => void;
    ariaLabel?: string;
}): import("react").JSX.Element;