import { SxProps, Theme, TypographyProps } from '@mui/material';
import { default as React, ReactNode } from 'react';
type RepeatableGroupWrapperType = 'card' | 'elevatedCard' | 'none';
type RepeatableRemovePosition = 'bottom' | 'right';
export type RepeatableFormGroupProps<T> = {
    /**
     * Name of field. Must match the name of the array in Formik.
     */
    name: string;
    /**
     * An "empty" object of type T.
     * This is what you would normally pass to initialState for Formik for a single object of type T
     */
    initialState: T;
    /**
     * Component that makes up the fields in your form group.
     *
     * IMPORTANT: Make sure to pass the name to your fields such that name={`${name}.fieldName`}.
     * For example: `<Text`Field name={`${name}.phoneNumber`} label="Phone Number" />`
     *
     * @param name
     * @returns
     */
    renderFormGroup: (name: string, index: number) => React.ReactNode;
    /**
     * Content for the Add button. @default "Add Another"
     */
    addButtonContent?: ReactNode;
    /**
     * Content for the Remove button. @default "Remove"
     */
    removeButtonContent?: ReactNode;
    /**
     * Variant for the wrapper for each group. @default card
     */
    variant?: RepeatableGroupWrapperType;
    /**
     * Style overrides for the Add button
     */
    addButtonSx?: SxProps<Theme>;
    /**
     * Style overrides for the Remove button
     */
    removeButtonSx?: SxProps<Theme>;
    /**
     * If true, will always display 'Remove' button on all field groups.
     * If false, will only display 'Remove' button as long as there are 2 or more field groups displayed.
     * @default false
     */
    allowRemoveAll?: boolean;
    /**
     * If `true`, the component becomes readonly. The `add` and `remove` buttons are hidden.
     * This does not change the individual formGroups, which must be made readOnly separately.
     * @default false
     */
    readOnly?: boolean;
    /**
     * (Optional) Label for entire group.
     */
    label?: string;
    /**
     * Props from MUI-Bueno's Typography component.
     * Used to customize the label when the static label option is selected or the field is readOnly.
     */
    labelProps?: TypographyProps;
    /**
     * This will display as the "value" when the field is readonly
     * @default "None"
     */
    emptyListMsg?: string;
    /**
     * If true, adds a horizontal divider line in between each field grouping
     * @default false
     */
    showDivider?: boolean;
    /**
     * Defines the position of the remove buttons relative to each grouping of fields.
     * - "bottom" (default) - remove button will appear BELOW each grouping of fields
     * - "right" - remove button will appear to the RIGHT (centered vertically) of each grouping of fields -- best for inline field groups
     * - sx - pass in your own MUI style to fine-tune the flexbox container settings
     */
    removePosition?: RepeatableRemovePosition | SxProps<Theme>;
};
/**
 * Repeatable Form Group is used for handling arrays in forms. It automatically handles adding & removing
 * field groups (components containing one or multiple fields) using Formik.
 */
export declare const RepeatableFormGroup: <T>(props: RepeatableFormGroupProps<T>) => import("react/jsx-runtime").JSX.Element;
export default RepeatableFormGroup;
