import { filterUndefined } from "../utils/object.js";
import { cs } from "../utils/styles.js";
import { useStyleConfig } from "../core/theme.js";
import styled from "../core/styled.js";
import vui from "../core/vui.js";
import { BreadcrumbsProvider } from "./context.js";
import BreadcrumbsItem from "./breadcrumbsItem.js";
import BreadcrumbsSeparator from "./breadcrumbsSeparator.js";
import { Children, Fragment, useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/breadcrumbs/breadcrumbs.tsx
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. */
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 /* @__PURE__ */ jsx(BreadcrumbsProvider, {
		value: context,
		children: /* @__PURE__ */ jsx(BreadcrumbsBase, {
			className: cs("vui-breadcrumbs", className),
			ref,
			...styles.main,
			...aliasedProps,
			...rest,
			children: Children.map(arrayChildren, (child, key) => /* @__PURE__ */ jsxs(Fragment, { children: [child, key !== arrayChildren.length - 1 && /* @__PURE__ */ jsx(BreadcrumbsSeparator, {})] }, key))
		})
	});
});
Breadcrumbs.Item = BreadcrumbsItem;
Breadcrumbs.displayName = "Breadcrumbs";

//#endregion
export { BreadcrumbsBase, Breadcrumbs as default };
globalThis.__vuiVersion__ = "4.0.1"
//# sourceMappingURL=breadcrumbs.js.map