@igne-agency/react-web-ui 0.3.0 → 0.4.0

package/dist/components/attachment-tile/attachment-tile.js

@@ -1,84 +1,201 @@
-import SvgClose from "../../vendor/@material-design-icons/svg/outlined/close.js";
 import { Button as Button$1 } from "../button/button.js";
 import { AttachmentPreview, useAttachmentPreview } from "./attachment-preview.js";
 import attachment_tile_module_default from "./attachment-tile.module.js";
 import { c } from "react/compiler-runtime";
-import { useId } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 import { Button, Tag } from "react-aria-components";
 // src/components/attachment-tile/attachment-tile.tsx
 /**
-* A single staged attachment as a square thumbnail inside a `TagList`: an image
-* preview where the file is one, its extension otherwise, and a pointer-only
-* remove button in the corner. Removal is owned by the surrounding `TagGroup`.
-*
-* @example
-* <AttachmentTile id={id} file={file} hint={hint} removeLabel={label} invalid={false} disabled={false} />
+* The square frame of a tile. Render it as react-aria's `Tag` inside a
+* `TagList` for a staged file, or as an `<a>` for a download.
 */
-var AttachmentTile = (t0) => {
-	const $ = c(15);
-	const { id, file, hint, removeLabel, invalid, disabled } = t0;
-	const preview = useAttachmentPreview(file);
+var Root = (t0) => {
+	const $ = c(16);
+	let className;
+	let props;
+	let ref;
+	let render;
+	let t1;
+	if ($[0] !== t0) {
+		({invalid: t1, className, render, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+		$[5] = t1;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+		t1 = $[5];
+	}
+	const invalid = t1 === void 0 ? false : t1;
+	let t2;
+	if ($[6] !== className) {
+		t2 = clsx(attachment_tile_module_default.tile, className);
+		$[6] = className;
+		$[7] = t2;
+	} else t2 = $[7];
+	const t3 = invalid || void 0;
+	let t4;
+	if ($[8] !== props || $[9] !== t2 || $[10] !== t3) {
+		t4 = {
+			...props,
+			className: t2,
+			"data-invalid": t3
+		};
+		$[8] = props;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] !== ref || $[13] !== render || $[14] !== t4) {
+		t5 = {
+			defaultTagName: "span",
+			render,
+			ref,
+			props: t4
+		};
+		$[12] = ref;
+		$[13] = render;
+		$[14] = t4;
+		$[15] = t5;
+	} else t5 = $[15];
+	return useRender(t5);
+};
+/**
+* The pointer-only remove button in a staged tile's corner, its children the
+* glyph. The surrounding `TagGroup` owns the removal, and the keyboard removes
+* with Delete.
+*/
+var Remove = (t0) => {
+	const $ = c(11);
+	const { label, children, className } = t0;
 	const removeId = useId();
-	const t1 = invalid || void 0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(attachment_tile_module_default.remove, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
 	let t2;
-	if ($[0] !== file.name || $[1] !== hint || $[2] !== preview.pending || $[3] !== preview.src) {
-		t2 = /* @__PURE__ */ jsx(AttachmentPreview, {
-			name: file.name,
-			hint,
-			src: preview.src,
-			pending: preview.pending
+	if ($[2] !== removeId) {
+		t2 = /* @__PURE__ */ jsx(Button, {
+			slot: "remove",
+			id: removeId,
+			"aria-labelledby": removeId,
+			excludeFromTabOrder: true
 		});
-		$[0] = file.name;
-		$[1] = hint;
-		$[2] = preview.pending;
-		$[3] = preview.src;
-		$[4] = t2;
-	} else t2 = $[4];
+		$[2] = removeId;
+		$[3] = t2;
+	} else t2 = $[3];
 	let t3;
-	if ($[5] !== removeId || $[6] !== removeLabel) {
-		t3 = removeLabel === void 0 ? null : /* @__PURE__ */ jsx("span", {
-			className: attachment_tile_module_default.remove,
-			children: /* @__PURE__ */ jsx(Button$1, {
-				variant: "tertiary",
-				size: "sm",
-				iconOnly: true,
-				icon: SvgClose,
-				label: removeLabel,
-				render: /* @__PURE__ */ jsx(Button, {
-					slot: "remove",
-					id: removeId,
-					"aria-labelledby": removeId,
-					excludeFromTabOrder: true
-				})
-			})
+	if ($[4] !== children || $[5] !== label || $[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Button$1, {
+			variant: "tertiary",
+			size: "sm",
+			iconOnly: true,
+			icon: children,
+			label,
+			render: t2
 		});
-		$[5] = removeId;
-		$[6] = removeLabel;
+		$[4] = children;
+		$[5] = label;
+		$[6] = t2;
 		$[7] = t3;
 	} else t3 = $[7];
 	let t4;
-	if ($[8] !== disabled || $[9] !== file.name || $[10] !== id || $[11] !== t1 || $[12] !== t2 || $[13] !== t3) {
-		t4 = /* @__PURE__ */ jsxs(Tag, {
+	if ($[8] !== t1 || $[9] !== t3) {
+		t4 = /* @__PURE__ */ jsx("span", {
+			className: t1,
+			children: t3
+		});
+		$[8] = t1;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	return t4;
+};
+var Prefab = (t0) => {
+	const $ = c(19);
+	const { id, file, hint, removeLabel, removeIcon, invalid, disabled, icon, className } = t0;
+	const preview = useAttachmentPreview(file);
+	let t1;
+	if ($[0] !== disabled || $[1] !== file.name || $[2] !== id) {
+		t1 = /* @__PURE__ */ jsx(Tag, {
 			id,
 			textValue: file.name,
-			isDisabled: disabled,
-			className: attachment_tile_module_default.tile,
-			"data-invalid": t1,
+			isDisabled: disabled
+		});
+		$[0] = disabled;
+		$[1] = file.name;
+		$[2] = id;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== file.name || $[5] !== hint || $[6] !== icon || $[7] !== preview.pending || $[8] !== preview.src) {
+		t2 = /* @__PURE__ */ jsx(AttachmentPreview, {
+			name: file.name,
+			hint,
+			src: preview.src,
+			pending: preview.pending,
+			icon
+		});
+		$[4] = file.name;
+		$[5] = hint;
+		$[6] = icon;
+		$[7] = preview.pending;
+		$[8] = preview.src;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== removeIcon || $[11] !== removeLabel) {
+		t3 = removeLabel === void 0 ? null : /* @__PURE__ */ jsx(Remove, {
+			label: removeLabel,
+			children: removeIcon
+		});
+		$[10] = removeIcon;
+		$[11] = removeLabel;
+		$[12] = t3;
+	} else t3 = $[12];
+	let t4;
+	if ($[13] !== className || $[14] !== invalid || $[15] !== t1 || $[16] !== t2 || $[17] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Root, {
+			invalid,
+			className,
+			render: t1,
 			children: [t2, t3]
 		});
-		$[8] = disabled;
-		$[9] = file.name;
-		$[10] = id;
-		$[11] = t1;
-		$[12] = t2;
-		$[13] = t3;
-		$[14] = t4;
-	} else t4 = $[14];
+		$[13] = className;
+		$[14] = invalid;
+		$[15] = t1;
+		$[16] = t2;
+		$[17] = t3;
+		$[18] = t4;
+	} else t4 = $[18];
 	return t4;
 };
 /**
+* A single staged attachment as a square thumbnail inside a `TagList`: an image
+* preview where the file is one, its extension otherwise, and a pointer-only
+* remove button in the corner. Removal is owned by the surrounding `TagGroup`.
+* The parts hanging off it compose a tile by hand.
+*
+* @example
+* <AttachmentTile id={id} file={file} hint={hint} removeLabel="Remove" removeIcon={<CloseIcon />} invalid={false} disabled={false} />
+*/
+var AttachmentTile = Object.assign(Prefab, {
+	Root,
+	Preview: AttachmentPreview,
+	Remove
+});
+/**
 * An attachment on a message that has been sent: the tile the composer stages,
 * without the remove button, and as a download of the stored file once there is
 * one.
@@ -87,40 +204,47 @@ var AttachmentTile = (t0) => {
 * <SentAttachmentTile name="nota.pdf" hint="nota.pdf (12 kB)" src={url} href={url} label="Download nota.pdf" />
 */
 var SentAttachmentTile = (props) => {
-	const $ = c(10);
+	const $ = c(14);
 	let t0;
-	if ($[0] !== props.hint || $[1] !== props.name || $[2] !== props.pending || $[3] !== props.src) {
-		t0 = /* @__PURE__ */ jsx(AttachmentPreview, {
+	if ($[0] !== props.href || $[1] !== props.label || $[2] !== props.name) {
+		t0 = props.href === void 0 ? void 0 : /* @__PURE__ */ jsx("a", {
+			href: props.href,
+			download: props.name,
+			"aria-label": props.label
+		});
+		$[0] = props.href;
+		$[1] = props.label;
+		$[2] = props.name;
+		$[3] = t0;
+	} else t0 = $[3];
+	let t1;
+	if ($[4] !== props.hint || $[5] !== props.icon || $[6] !== props.name || $[7] !== props.pending || $[8] !== props.src) {
+		t1 = /* @__PURE__ */ jsx(AttachmentPreview, {
 			name: props.name,
 			hint: props.hint,
 			src: props.src,
-			pending: props.pending
+			pending: props.pending,
+			icon: props.icon
 		});
-		$[0] = props.hint;
-		$[1] = props.name;
-		$[2] = props.pending;
-		$[3] = props.src;
-		$[4] = t0;
-	} else t0 = $[4];
-	const preview = t0;
-	let t1;
-	if ($[5] !== preview || $[6] !== props.href || $[7] !== props.label || $[8] !== props.name) {
-		t1 = props.href === void 0 ? /* @__PURE__ */ jsx("span", {
-			className: attachment_tile_module_default.tile,
-			children: preview
-		}) : /* @__PURE__ */ jsx("a", {
-			className: clsx(attachment_tile_module_default.tile, attachment_tile_module_default.link),
-			href: props.href,
-			download: props.name,
-			"aria-label": props.label,
-			children: preview
-		});
-		$[5] = preview;
-		$[6] = props.href;
-		$[7] = props.label;
-		$[8] = props.name;
+		$[4] = props.hint;
+		$[5] = props.icon;
+		$[6] = props.name;
+		$[7] = props.pending;
+		$[8] = props.src;
 		$[9] = t1;
 	} else t1 = $[9];
-	return t1;
+	let t2;
+	if ($[10] !== props.className || $[11] !== t0 || $[12] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Root, {
+			className: props.className,
+			render: t0,
+			children: t1
+		});
+		$[10] = props.className;
+		$[11] = t0;
+		$[12] = t1;
+		$[13] = t2;
+	} else t2 = $[13];
+	return t2;
 };
 export { AttachmentTile, SentAttachmentTile };

package/dist/components/attachment-tile/attachment-tile.module.js

@@ -1,20 +1,20 @@
 import './attachment-tile.css';// src/components/attachment-tile/attachment-tile.module.scss
-var tile = "_tile_1v5fo_3";
-var link = "_link_1v5fo_38";
-var preview = "_preview_1v5fo_48";
-var image = "_image_1v5fo_59";
-var imageSkeleton = "_imageSkeleton_1v5fo_64";
-var extension = "_extension_1v5fo_71";
-var name = "_name_1v5fo_75";
-var remove = "_remove_1v5fo_83";
+var tile = "_tile_gqsrq_3";
+var preview = "_preview_gqsrq_48";
+var image = "_image_gqsrq_59";
+var imageSkeleton = "_imageSkeleton_gqsrq_64";
+var icon = "_icon_gqsrq_71";
+var extension = "_extension_gqsrq_80";
+var name = "_name_gqsrq_84";
+var remove = "_remove_gqsrq_92";
 var attachment_tile_module_default = {
 	tile,
-	link,
 	preview,
 	image,
 	imageSkeleton,
+	icon,
 	extension,
 	name,
 	remove
 };
-export { attachment_tile_module_default as default, extension, image, imageSkeleton, link, name, preview, remove, tile };
+export { attachment_tile_module_default as default, extension, icon, image, imageSkeleton, name, preview, remove, tile };

package/dist/components/attachment-tile/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./attachment-preview.tsx";
+export { type AttachmentPreviewProps, type AttachmentPreviewSource, useAttachmentPreview, } from "./attachment-preview.tsx";
 export * from "./attachment-tile.tsx";

package/dist/components/attachment-tile/index.js

@@ -1,3 +1,3 @@
-import { AttachmentPreview, useAttachmentPreview } from "./attachment-preview.js";
+import { useAttachmentPreview } from "./attachment-preview.js";
 import { AttachmentTile, SentAttachmentTile } from "./attachment-tile.js";
-export { AttachmentPreview, AttachmentTile, SentAttachmentTile, useAttachmentPreview };
+export { AttachmentTile, SentAttachmentTile, useAttachmentPreview };

package/dist/components/avatar/avatar.d.ts

@@ -1,19 +1,19 @@
-import type { ReactNode } from "react";
-export type AvatarProps = Readonly<{
+import type { ComponentPropsWithRef, ReactNode } from "react";
+export type AvatarProps = Omit<ComponentPropsWithRef<"span">, "children"> & Readonly<{
     /** Display name; drives the initials and the (stable) tone. */
     name: string;
     /** Portrait to show in place of the initials, where there is one. */
     src?: string;
     /** Diameter relative to the surrounding font size (in `em`). @default 2.5 */
     size?: number;
-    className?: string;
 }>;
 /**
  * A small circular avatar: the portrait at `src`, falling back to initials over
  * a colour that stays the same for the same name. Decorative: the name it
- * stands for is always beside it, so it is not announced.
+ * stands for is always beside it, so it is not announced. Other props go to
+ * the `<span>`.
  *
  * @example
  * <Avatar name="Ada Lovelace" src={colleague.portraitUrl} />
  */
-export declare const Avatar: ({ name, src, size, className, }: AvatarProps) => ReactNode;
+export declare const Avatar: ({ name, src, size, className, style: inlineStyle, ...props }: AvatarProps) => ReactNode;

package/dist/components/avatar/avatar.js

@@ -1,7 +1,7 @@
 import avatar_module_default from "./avatar.module.js";
 import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Avatar } from "@base-ui/react/avatar";
 // src/components/avatar/avatar.tsx
 var TONE_COUNT = 5;
@@ -20,79 +20,106 @@ var toneOf = (name) => {
 /**
 * A small circular avatar: the portrait at `src`, falling back to initials over
 * a colour that stays the same for the same name. Decorative: the name it
-* stands for is always beside it, so it is not announced.
+* stands for is always beside it, so it is not announced. Other props go to
+* the `<span>`.
 *
 * @example
 * <Avatar name="Ada Lovelace" src={colleague.portraitUrl} />
 */
 var Avatar$1 = (t0) => {
-	const $ = c(18);
-	const { name, src, size: t1, className } = t0;
+	const $ = c(27);
+	let className;
+	let inlineStyle;
+	let name;
+	let props;
+	let src;
+	let t1;
+	if ($[0] !== t0) {
+		({name, src, size: t1, className, style: inlineStyle, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = inlineStyle;
+		$[3] = name;
+		$[4] = props;
+		$[5] = src;
+		$[6] = t1;
+	} else {
+		className = $[1];
+		inlineStyle = $[2];
+		name = $[3];
+		props = $[4];
+		src = $[5];
+		t1 = $[6];
+	}
 	const size = t1 === void 0 ? 2.5 : t1;
 	let t2;
-	if ($[0] !== className) {
+	if ($[7] !== className) {
 		t2 = clsx(avatar_module_default.avatar, className);
-		$[0] = className;
-		$[1] = t2;
-	} else t2 = $[1];
+		$[7] = className;
+		$[8] = t2;
+	} else t2 = $[8];
 	const t3 = `${size * INITIALS_RATIO}em`;
 	let t4;
-	if ($[2] !== t3) {
+	if ($[9] !== inlineStyle || $[10] !== t3) {
 		t4 = {
 			fontSize: t3,
 			inlineSize: `${1 / INITIALS_RATIO}em`,
-			blockSize: `${1 / INITIALS_RATIO}em`
+			blockSize: `${1 / INITIALS_RATIO}em`,
+			...inlineStyle
 		};
-		$[2] = t3;
-		$[3] = t4;
-	} else t4 = $[3];
+		$[9] = inlineStyle;
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
 	let t5;
-	if ($[4] !== name) {
+	if ($[12] !== name) {
 		t5 = toneOf(name);
-		$[4] = name;
-		$[5] = t5;
-	} else t5 = $[5];
+		$[12] = name;
+		$[13] = t5;
+	} else t5 = $[13];
 	let t6;
-	if ($[6] !== src) {
+	if ($[14] !== src) {
 		t6 = src === void 0 ? null : /* @__PURE__ */ jsx(Avatar.Image, {
 			src,
 			alt: "",
 			className: avatar_module_default.image
 		});
-		$[6] = src;
-		$[7] = t6;
-	} else t6 = $[7];
+		$[14] = src;
+		$[15] = t6;
+	} else t6 = $[15];
 	let t7;
-	if ($[8] !== name) {
+	if ($[16] !== name) {
 		t7 = initialsOf(name);
-		$[8] = name;
-		$[9] = t7;
-	} else t7 = $[9];
+		$[16] = name;
+		$[17] = t7;
+	} else t7 = $[17];
 	let t8;
-	if ($[10] !== t7) {
+	if ($[18] !== t7) {
 		t8 = /* @__PURE__ */ jsx(Avatar.Fallback, {
 			className: avatar_module_default.fallback,
 			children: t7
 		});
-		$[10] = t7;
-		$[11] = t8;
-	} else t8 = $[11];
+		$[18] = t7;
+		$[19] = t8;
+	} else t8 = $[19];
 	let t9;
-	if ($[12] !== t2 || $[13] !== t4 || $[14] !== t5 || $[15] !== t6 || $[16] !== t8) {
+	if ($[20] !== props || $[21] !== t2 || $[22] !== t4 || $[23] !== t5 || $[24] !== t6 || $[25] !== t8) {
 		t9 = /* @__PURE__ */ jsxs(Avatar.Root, {
+			...props,
 			className: t2,
 			style: t4,
 			"data-tone": t5,
 			"aria-hidden": "true",
 			children: [t6, t8]
 		});
-		$[12] = t2;
-		$[13] = t4;
-		$[14] = t5;
-		$[15] = t6;
-		$[16] = t8;
-		$[17] = t9;
-	} else t9 = $[17];
+		$[20] = props;
+		$[21] = t2;
+		$[22] = t4;
+		$[23] = t5;
+		$[24] = t6;
+		$[25] = t8;
+		$[26] = t9;
+	} else t9 = $[26];
 	return t9;
 };
 export { Avatar$1 as Avatar };

package/dist/components/avatar-group/avatar-group.js

@@ -4,9 +4,9 @@ import { Popover } from "../popover/popover.js";
 import { AvatarGroupContext, useAvatarGroup } from "./avatar-group-context.js";
 import avatar_group_module_default from "./avatar-group.module.js";
 import { c } from "react/compiler-runtime";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { clsx } from "clsx";
 import { useRender } from "@base-ui/react/use-render";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 // src/components/avatar-group/avatar-group.tsx
 var LIST_AVATAR_SIZE = 1.5;
 /** The stack: a named group of avatars, overlapping, with no control of its own. */

package/dist/components/badge/badge.js

@@ -1,7 +1,7 @@
 import badge_module_default from "./badge.module.js";
 import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
 // src/components/badge/badge.tsx
 /**
 * Small styled leaf for counts and short status labels. Coloured by

package/dist/components/breadcrumbs/breadcrumbs.d.ts

@@ -29,28 +29,37 @@ export type BreadcrumbsPageProps = ComponentPropsWithRef<"span">;
  */
 declare const Page: ({ className, children, ...props }: BreadcrumbsPageProps) => ReactNode;
 export type BreadcrumbsSeparatorProps = useRender.ComponentProps<"li">;
-/** The decorative mark between two crumbs; a chevron unless given `children`. */
-declare const Separator: ({ render, className, children, ref, ...props }: BreadcrumbsSeparatorProps) => ReactElement;
+/**
+ * The decorative space between two crumbs, holding the app's mark, such as a
+ * chevron, given as `children`. Without one it is spacing alone.
+ */
+declare const Separator: ({ render, className, ref, ...props }: BreadcrumbsSeparatorProps) => ReactElement;
 export type BreadcrumbsOverflowProps = Readonly<{
     /** Accessible name of the button, such as "Show more", surfaced as its tooltip. */
     label: string;
+    /** The button's glyph, such as the app's ellipsis. */
+    icon: ReactNode;
     /** The folded crumbs, each a `Menu.LinkItem`. */
     children: ReactNode;
 }>;
 /** A button that opens a menu of the crumbs the trail has no room for. */
-declare const Overflow: ({ label, children, }: BreadcrumbsOverflowProps) => ReactNode;
+declare const Overflow: ({ label, icon, children, }: BreadcrumbsOverflowProps) => ReactNode;
 export type BreadcrumbsGaugeProps = Readonly<{
     /** Every crumb's label, outermost first. */
     labels: readonly ReactNode[];
     /** The `Overflow` button's label, so the copy measures the same. */
     overflowLabel: string;
+    /** The `Overflow` button's glyph, so the copy measures the same. */
+    overflowIcon: ReactNode;
+    /** The mark between crumbs, so the copy measures the same. */
+    separator?: ReactNode;
     ref: Ref<HTMLOListElement>;
 }>;
 /**
  * A hidden copy of the whole trail at its full length, with one separator and
  * the overflow button, for `useFold` to measure.
  */
-declare const Gauge: ({ labels, overflowLabel, ref, }: BreadcrumbsGaugeProps) => ReactNode;
+declare const Gauge: ({ labels, overflowLabel, overflowIcon, separator, ref, }: BreadcrumbsGaugeProps) => ReactNode;
 /** One crumb of a trail: its label and, above the current page, the link it renders as. */
 export type Crumb = Readonly<{
     /** Stable key, such as the route id. */
@@ -66,6 +75,10 @@ export type BreadcrumbsProps = Readonly<{
     label: string;
     /** The overflow button's name, such as "Show more". */
     overflowLabel: string;
+    /** The overflow button's glyph, such as the app's ellipsis. */
+    overflowIcon: ReactNode;
+    /** The mark between crumbs, such as the app's chevron; without one, crumbs are kept apart by spacing alone. */
+    separator?: ReactNode;
     /** The trail, outermost first; the last crumb is the current page. */
     crumbs: readonly Crumb[];
     className?: string;
@@ -75,7 +88,7 @@ export type BreadcrumbsProps = Readonly<{
  * first fold into an overflow menu, one by one, until it fits. The first crumb
  * and the current page stay. Renders nothing for a trail of one.
  */
-declare const Trail: ({ label, overflowLabel, crumbs, className, }: BreadcrumbsProps) => ReactNode;
+declare const Trail: ({ label, overflowLabel, overflowIcon, separator, crumbs, className, }: BreadcrumbsProps) => ReactNode;
 type BreadcrumbsParts = typeof Trail & Readonly<{
     Root: typeof Root;
     List: typeof List;
@@ -94,10 +107,12 @@ type BreadcrumbsParts = typeof Trail & Readonly<{
  * <Breadcrumbs
  * 	label="Breadcrumbs"
  * 	overflowLabel="Show more"
+ * 	overflowIcon={<MoreIcon />}
+ * 	separator={<ChevronIcon />}
  * 	crumbs={[
  * 		{ id: "home", label: "Home", render: <Link to="/" /> },
- * 		{ id: "declarations", label: "Declarations", render: <Link to="/declarations" /> },
- * 		{ id: "declaration", label: "Declaration 2041" },
+ * 		{ id: "invoices", label: "Invoices", render: <Link to="/invoices" /> },
+ * 		{ id: "invoice", label: "Invoice 2041" },
  * 	]}
  * />
  */