import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
import { SelectHTMLAttributes, ReactNode } from 'react';
import { Props } from '../@types/Props.js';
import { ThemeSelect } from './theme.js';

interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement>, Props {
    id?: string;
    /**
     * Appears above the select box
     */
    label: string;
    /**
     * Adds the word "Optional" after the label
     */
    optional?: boolean;
    /**
     * Visually hides the label and the "Optional" text set by the `optional` flag.
     */
    hideLabel?: boolean;
    /**
     * Additional text that appears below the label
     */
    supporting?: string;
    /**
     * Whether error styling should apply to this select box. The string appears as an inline error message.
     */
    error?: string;
    /**
     * Whether success styling should apply to this select box. The string appears as an inline success message. This prop should not have a value set at the same time as the error prop. In the event that both are set, errors take precedence.
     */
    success?: string;
    children: ReactNode;
    /**
     * Partial or complete theme to override the component's colour palette.
     * The sanctioned colours have been set out by the design system team.
     * The colours which can be changed are:
     *
     *  `textUserInput`<br>
     *  `textLabel`<br>
     *  `textOptional`<br>
     *  `textSupporting`<br>
     *  `textError`<br>
     *  `textSuccess`<br>
     *  `backgroundInput`<br>
     *  `border`<br>
     *  `borderActive`<br>
     *  `borderError`<br>
     *  `borderSuccess`<br>
     *  `iconFill`<br>
     *
     */
    theme?: Partial<ThemeSelect>;
}
/**
 * [Storybook](https://guardian.github.io/storybooks/?path=/story/source_react-components-select--default-default-theme) •
 * [Design System](https://theguardian.design/2a1e5182b/p/663879-select-box/b/10875c) •
 * [GitHub](https://github.com/guardian/csnx/tree/main/libs/@guardian/source/src/react-components/select/Select.tsx) •
 * [NPM](https://www.npmjs.com/package/@guardian/source)
 *
 * Select boxes allow the user to make a choice from a long list of similar options.
 *
 * The following themes are supported: `light`
 */
declare const Select: ({ id, label: labelText, optional, hideLabel, supporting, error, success, cssOverrides, children, theme, ...props }: SelectProps) => _emotion_react_jsx_runtime.JSX.Element;

export { Select };
export type { SelectProps };