import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
import { InputHTMLAttributes, ReactElement, ChangeEventHandler } from 'react';
import { Props } from '../@types/Props.js';
import { ThemeChoiceCard } from './theme.js';

interface ChoiceCardProps extends InputHTMLAttributes<HTMLInputElement>, Props {
    id: string;
    /**
     * Appears inside the choice card
     */
    label: React.ReactNode;
    value: string;
    /**
     * Sets whether choice card is checked. Required when using the [controlled approach](https://reactjs.org/docs/forms.html#controlled-components) to form state management.
     *
     * **Note**: if you pass the `checked` prop, you must also pass an `onChange` handler, or the field will be rendered as read-only.
     */
    checked?: boolean;
    /**
     * Set the checked state in when using an [uncontrolled approach](https://reactjs.org/docs/uncontrolled-components.html).
     */
    defaultChecked?: boolean;
    /**
     * An icon that appears inside the button, alongside text
     */
    icon?: ReactElement;
    onChange?: ChangeEventHandler<HTMLInputElement>;
    /**
     * @ignore passed down by the parent
     */
    error?: boolean;
    /**
     * The type of input you want
     */
    type?: 'radio' | 'checkbox';
    /**
     * A component level theme to override the theme.
     * The sanctioned colours have been set out by the design system team.
     * The colours which can be changed are:
     *
     *  `textUnselected` <br>
     *  `textSelected` <br>
     *  `textHover` <br>
     *  `textError` <br>
     *  `borderUnselected` <br>
     *  `borderSelected` <br>
     *  `borderHover` <br>
     *  `borderError` <br>
     *  `backgroundUnselected` <br>
     *  `backgroundHover` <br>
     *  `backgroundSelected` <br>
     *  `backgroundTick` <br>
     *
     */
    theme?: Partial<ThemeChoiceCard>;
}
/**
 * [Storybook](https://guardian.github.io/storybooks/?path=/story/source_react-components-choicecard--default-default-theme) •
 * [Design System](https://theguardian.design/2a1e5182b/p/65ffe9-choice-card) •
 * [GitHub](https://github.com/guardian/csnx/tree/main/libs/@guardian/source/src/react-components/choice-card/ChoiceCard.tsx) •
 * [NPM](https://www.npmjs.com/package/@guardian/source)
 *
 * Choice cards are a tactile, single or multi-select mechanism used to group related options.
 *
 */
declare const ChoiceCard: ({ id, label: labelContent, value, icon: iconSvg, checked, defaultChecked, cssOverrides, error, onChange, theme, type, ...props }: ChoiceCardProps) => _emotion_react_jsx_runtime.JSX.Element;

export { ChoiceCard };
export type { ChoiceCardProps };