import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Children, Fragment, useMemo } from 'react';
import { styled, useStyleConfig, vui } from '../core';
import { cs, filterUndefined } from '../utils';
import BreadcrumbsItem from './breadcrumbsItem';
import BreadcrumbsSeparator from './breadcrumbsSeparator';
import { BreadcrumbsProvider } from './context';
export const BreadcrumbsBase = styled.divBox `
  display: flex;
  min-width: 0;
  transition-duration: normal;

  .vui-breadcrumbs-item:last-of-type {
    font-weight: 600;
  }
`;
/** Breadcrumbs consist of a list of items that help a user visualize a page's location within the hierarchical structure of a website, and allow correspondent navigation. */
export const Breadcrumbs = vui((props, ref) => {
    const { children, className, size, variant, ...rest } = props;
    const styles = useStyleConfig('Breadcrumbs', props);
    const context = useMemo(() => filterUndefined({ size, variant }), [size, variant]);
    const aliasedProps = filterUndefined({});
    const arrayChildren = Children.toArray(children);
    return (_jsx(BreadcrumbsProvider, { value: context, children: _jsx(BreadcrumbsBase, { className: cs('vui-breadcrumbs', className), ref: ref, ...styles.main, ...aliasedProps, ...rest, children: Children.map(arrayChildren, (child, key) => (_jsxs(Fragment, { children: [child, key !== arrayChildren.length - 1 && _jsx(BreadcrumbsSeparator, {})] }, key))) }) }));
});
Breadcrumbs.Item = BreadcrumbsItem;
Breadcrumbs.displayName = 'Breadcrumbs';
export default Breadcrumbs;
//# sourceMappingURL=breadcrumbs.js.map