import React from "react";
import { ComponentSizes, ComponentVariants, FinalPearlTheme, PaletteColors, ResponsiveValue } from "../../../theme/src/types";
import { BoxProps } from "../../atoms/box/box";
export type AvatarGroupProps = BoxProps & {
    /**
     * Size of all the children avatars in the group.
     *
     * @default "m"
     */
    size?: ResponsiveValue<ComponentSizes<"Avatar">>;
    /** Variant of all the children avatars in the group. */
    variant?: ResponsiveValue<ComponentVariants<"Avatar">>;
    /**
     * The spacing between the avatars
     *
     * @default 2
     */
    spacing?: ResponsiveValue<keyof FinalPearlTheme["spacing"]>;
    /** The background color of the circle which shows the "+X" label of remaining avatars */
    truncatedBackgroundColor?: ResponsiveValue<PaletteColors>;
    /** A custom component to show in place of the truncated avatars  */
    customTruncatedComponent?: React.ReactElement;
    /**
     * Maximum number of avatars to show. It'll truncate the avatars and show a "+X" label (where X is the remaining avatars)
     *
     * @default 3
     */
    max?: number;
};
/**
 * AvatarGroup is a component that groups multiple Avatar components together. It can truncate the avatars and show a "+X" label (where X is the remaining avatars).
 */
declare const AvatarGroup: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<AvatarGroupProps, "ref"> & React.RefAttributes<unknown>>>;
export default AvatarGroup;
//# sourceMappingURL=avatar-group.d.ts.map