import React from 'react';
import { TooltipProps } from './Tooltip';
type ChildrenExtraProps = {
    id: string;
    'aria-invalid': 'true' | 'false';
    'aria-describedby': string | undefined;
};
export interface InputGroupProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
    /** The id that will be used on the input child if you don't want a generated one */
    inputId?: string;
    /** The id used on the label in this component. Could be necessary if your component needs a aria-labelledby. */
    labelId?: string;
    /** Unless you only have one element in your `InputGroup` you will have to use the function-as-a-child pattern. */
    children: NonNullable<React.ReactNode> | ((extraProps: ChildrenExtraProps) => React.ReactNode);
    /** Reserve space for showing `fieldMessage`s so content below don't move
     *  vertically if an errormessage shows up. Note that this will only reserve
     *  space for one line of content, so keep messages short.
     */
    extraMargin?: boolean;
    /** Use the ErrorFieldMessage component if you need more flexibility in how the content is rendered. */
    fieldMessage?: string | React.ReactElement<{
        id: string;
        /** @deprecated as part of update to Semantic Colors
         *
         * Use the `ffe-accent-color` class on the component or on the container of the component instead
         * [Read more in the upgrade guide](https://sparebank1.github.io/designsystem/?path=/docs/introduksjon-changelog--docs#2025---februar---semantiske-farger) */
        onColoredBg?: never;
    }> | null;
    /** To just render a static, always visible tooltip, use this. */
    description?: string | React.ReactElement;
    /** Use the Label component if you need more flexibility in how the content is rendered. */
    label?: string | React.ReactElement<{
        id: string;
        htmlFor: string;
        /** @deprecated as part of update to Semantic Colors
         *
         * Use the `ffe-accent-color` class on the component or on the container of the component instead
         * [Read more in the upgrade guide](https://sparebank1.github.io/designsystem/?path=/docs/introduksjon-changelog--docs#2025---februar---semantiske-farger) */
        onColoredBg?: never;
    }>;
    onTooltipToggle?: TooltipProps['onClick'];
    /** Use the Tooltip component if you need more flexibility in how the content is rendered. */
    tooltip?: React.ReactNode;
    /** @deprecated as part of update to Semantic Colors
     *
     * Use the `ffe-accent-color` class on the component or on the container of the component instead
     * [Read more in the upgrade guide](https://sparebank1.github.io/designsystem/?path=/docs/introduksjon-changelog--docs#2025---februar---semantiske-farger) */
    onColoredBg?: never;
}
export declare const InputGroup: React.FC<InputGroupProps>;
export {};