import { ElementProps, Group } from '../../core/types';
import React from 'react';
import './InputoutputPill.scss';
export interface ColourOption {
    readonly value: string;
    readonly label: string;
    readonly color: string;
    readonly isFixed?: boolean;
    readonly isDisabled?: boolean;
}
export interface FlavourOption {
    readonly value: string;
    readonly label: string;
    readonly rating: string;
}
export interface GroupedOption {
    readonly label: string;
    readonly options: readonly ColourOption[] | readonly FlavourOption[];
}
export type InputoutputPillProps<T extends string | string[]> = ElementProps & {
    options?: T | (string | Group<string>)[];
    value?: T;
    threshold?: number;
    onChange?: (v: T) => void;
    placeholder?: string;
    title?: string;
    supportTitle?: string;
    leftIcon?: React.ReactNode;
    rightIcon?: React.ReactNode;
    rightChild?: React.ReactNode;
    onLeftIconHover?: (e: React.MouseEvent) => void;
    onRightIconHover?: (e: React.MouseEvent) => void;
    disabled?: boolean;
    isOutput?: boolean;
    isAlert?: boolean;
    isWarning?: boolean;
    isSuccess?: boolean;
    isSmall?: boolean;
    isPill?: boolean;
    onCreateOption?: (str: string) => void;
    hasClearButton?: boolean;
    name?: string;
    isRequired?: boolean;
    errorMessage?: string;
    pillColorMap?: Record<string, string>;
    pillIconMap?: Record<string, React.ReactNode>;
};
/**
 * InputoutputPill component
 * whether it's a single or multi select is determined by the type of the value prop
 * if it's an array, it will be treated as a multi select, otherwise it will be treated as a single select
 * @param props - props for the InputoutputPill component
 * @param props.options - options for the InputoutputPill component
 * @param props.value - value for the InputoutputPill component. If it's an array, it will be treated as a multi select, otherwise it will be treated as a single select
 * @param props.onChange - onChange for the InputoutputPill component
 * @param props.placeholder - placeholder for the InputoutputPill component
 * @param props.title - title for the InputoutputPill component
 * @param props.supportTitle - supportTitle for the InputoutputPill component
 * @param props.leftIcon - leftIcon for the InputoutputPill component
 * @param props.rightIcon - rightIcon for the InputoutputPill component
 * @param props.rightChild - placed inside the input box, right of the input field and dropdown indicator
 * @param props.onLeftIconHover - onLeftIconHover for the InputoutputPill component
 * @param props.onRightIconHover - onRightIconHover for the InputoutputPill component
 * @param props.disabled - disabled for the InputoutputPill component
 * @param props.isOutput - isOutput for the InputoutputPill component
 * @param props.isAlert - isAlert for the InputoutputPill component
 * @param props.isWarning - isWarning for the InputoutputPill component
 * @param props.isSuccess - isSuccess for the InputoutputPill component
 * @param props.isSmall - isSmall for the InputoutputPill component
 * @param props.isPill - isPill for the InputoutputPill component
 * @param props.hasClearButton - controls whether the clear X button is shown
 * @param props.pillColorMap - a map of values to colors for the pills
 * @param props.pillIconMap - a map of values to icons for the pill(s) inside the input box
 * @returns - the InputoutputPill component
 */
export declare const InputoutputPill: <T extends string | string[]>(props: InputoutputPillProps<T>) => import("react/jsx-runtime").JSX.Element;
export default InputoutputPill;