import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
import { InputHTMLAttributes } from 'react';
import { InputSize } from '../@types/InputSize.js';
import { Props } from '../@types/Props.js';
import { ThemeTextArea } from './theme.js';

interface TextAreaProps extends Omit<InputHTMLAttributes<HTMLTextAreaElement>, 'size'>, Props {
    id?: string;
    /**
     * The contents of the text area. This is necessary when using the [controlled approach](https://reactjs.org/docs/forms.html#controlled-components) to form state management.
     *
     * _Note: if you pass the `value` prop, you MUST also pass an `onChange` handler, or the field will be rendered as read-only._
     */
    value?: string;
    /**
     * Appears above the text area
     */
    label: string;
    /**
     * Adds the word "Optional" after the label. Non-optional fields are rendered with the `required` attribute.
     */
    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;
    /**
     * Size of the text area, label and error message if visible.
     */
    size?: InputSize;
    /**
     * Appears as an inline error message.
     */
    error?: 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;
    /**
     * Specify the number of rows the component should display by default.
     */
    rows?: number;
    /**
     * 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>
     *  `borderError`<br>
     *  `borderSuccess`<br>
     *
     */
    theme?: Partial<ThemeTextArea>;
}
/**
 * [Storybook](https://guardian.github.io/storybooks/?path=/story/source_react-components-textarea--default-default-theme) •
 * [Design System](https://theguardian.design/2a1e5182b/p/567182-text-area/b/42916b) •
 * [GitHub](https://github.com/guardian/csnx/tree/main/libs/@guardian/source/src/react-components/text-area/TextArea.tsx) •
 * [NPM](https://www.npmjs.com/package/@guardian/source)
 *
 * The following themes are supported: `light`
 */
declare const TextArea: ({ id, label: labelText, optional, hideLabel, supporting, size, error, success, cssOverrides, rows, className, value, theme, ...props }: TextAreaProps) => _emotion_react_jsx_runtime.JSX.Element;

export { TextArea };
export type { TextAreaProps };