import React, { type ReactNode } from 'react';
import { type IconName } from '../Icon';
type Separators = '|' | '>' | '/';
type ReactChildArray = ReturnType<typeof React.Children.toArray>;
export declare function flattenReactChildren(children: ReactNode): ReactChildArray;
type Props = {
    /**
     * aria-label for `nav` element to describe Breadcrumbs navigation to screen readers
     */
    'aria-label'?: string;
    /**
     * Child node(s) that can be nested inside component
     */
    children?: ReactNode;
    /**
     * CSS class names that can be appended to the component
     */
    className?: string;
    /**
     * HTML id for the component
     */
    id?: string;
    /**
     * Custom string separator between individual breadcrumbs
     *
     * **Defaults to `"/"`**.
     */
    separator?: Separators;
};
/**
 * `import {Breadcrumbs} from "@chanzuckerberg/eds";`
 *
 * List of Breadcrumb components showing the user where they are in the system and allow them
 * to navigate to parent pages.
 */
export declare const Breadcrumbs: {
    ({ "aria-label": ariaLabel, className, children, id, separator, ...other }: Props): React.JSX.Element;
    displayName: string;
    Item: {
        (props: React.ComponentProps<typeof BreadcrumbsItem>): React.JSX.Element;
        displayName: string;
    };
};
type BreadcrumbItemProps = {
    /**
     * CSS class names that can be appended to the component.
     */
    className?: string;
    /**
     * URL for the breadcrumbs item.
     * Required since breadcrumbs should reroute user.
     * Null case is used for the collapsed variant, which uses Menu Items which has hrefs.
     */
    href: string | null;
    /**
     * Icon override for component. Default is 'chevron-left'
     */
    icon?: Extract<IconName, 'chevron-left'>;
    /**
     * URLs for the collapsed breadcrumbs variant.
     * Should be <Menu.Item href={href}>{text}</Menu.Item>.
     */
    menuItems?: ReactNode[];
    /**
     * Custom string separator after current breadcrumb item.
     * Defaults to '/'
     */
    separator?: Separators;
    /**
     * Breadcrumbs item text.
     */
    text?: string;
    /**
     * Behavior variations for the breadcrumbs item.
     * - **back** - results in a left facing icon, usually denoting the second last breadcrumb item in a mobile breakpoint.
     * - **collapsed** - results in an ellipsis, where interaction spawns a Menu containing more links.
     */
    variant?: 'back' | 'collapsed';
};
/**
 * `import {BreadcrumbsItem} from "@chanzuckerberg/eds";`
 *
 * A single breadcrumb subcomponent, to be used in the Breadcrumbs component.
 */
export declare const BreadcrumbsItem: ({ className, href, icon, menuItems, separator, text, variant, ...other }: BreadcrumbItemProps) => React.JSX.Element;
export {};