reshaped 3.4.2 → 3.4.4

package/dist/components/Accordion/Accordion.d.ts

@@ -1,7 +1,14 @@
 import * as T from "./Accordion.types";
 declare const Accordion: {
     (props: T.Props): import("react/jsx-runtime").JSX.Element;
-    Trigger: (props: T.TriggerProps) => import("react/jsx-runtime").JSX.Element;
-    Content: (props: T.ContentProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: {
+        (props: T.TriggerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        (props: T.ContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    displayName: string;
 };
 export default Accordion;

package/dist/components/Accordion/Accordion.js

@@ -11,4 +11,5 @@ const Accordion = (props) => {
 };
 Accordion.Trigger = AccordionTrigger;
 Accordion.Content = AccordionContent;
+Accordion.displayName = "Accordion";
 export default Accordion;

package/dist/components/Accordion/AccordionContent.d.ts

@@ -1,3 +1,6 @@
 import type * as T from "./Accordion.types";
-declare const AccordionContent: (props: T.ContentProps) => import("react/jsx-runtime").JSX.Element;
+declare const AccordionContent: {
+    (props: T.ContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default AccordionContent;

package/dist/components/Accordion/AccordionContent.js

@@ -8,4 +8,5 @@ const AccordionContent = (props) => {
     const { active, triggerId, contentId } = React.useContext(AccordionContext);
     return (_jsx(Expandable, { active: active, attributes: { "aria-labelledby": triggerId, id: contentId }, children: children }));
 };
+AccordionContent.displayName = "Accordion.Content";
 export default AccordionContent;

package/dist/components/Accordion/AccordionControlled.d.ts

@@ -1,3 +1,6 @@
 import * as T from "./Accordion.types";
-declare const AccordionControlled: (props: T.ControlledProps) => import("react/jsx-runtime").JSX.Element;
+declare const AccordionControlled: {
+    (props: T.ControlledProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default AccordionControlled;

package/dist/components/Accordion/AccordionControlled.js

@@ -20,4 +20,5 @@ const AccordionControlled = (props) => {
     [active]);
     return (_jsx("div", { ...attributes, className: rootClassNames, children: _jsx(AccordionContext.Provider, { value: value, children: children }) }));
 };
+AccordionControlled.displayName = "AccordionControlled";
 export default AccordionControlled;

package/dist/components/Accordion/AccordionTrigger.d.ts

@@ -1,3 +1,6 @@
 import * as T from "./Accordion.types";
-declare const AccordionTrigger: (props: T.TriggerProps) => import("react/jsx-runtime").JSX.Element;
+declare const AccordionTrigger: {
+    (props: T.TriggerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default AccordionTrigger;

package/dist/components/Accordion/AccordionTrigger.js

@@ -21,4 +21,5 @@ const AccordionTrigger = (props) => {
     }
     return (_jsx(Actionable, { onClick: handleClick, fullWidth: true, attributes: attributes, children: _jsxs(View, { gap: 2, direction: iconPosition === "start" ? "row-reverse" : "row", align: "center", children: [_jsx(View.Item, { grow: true, children: children }), _jsx(Icon, { size: iconSize || 4, svg: IconChevronDown, className: iconClassNames })] }) }));
 };
+AccordionTrigger.displayName = "Accordion.Trigger";
 export default AccordionTrigger;

package/dist/components/Accordion/AccordionUncontrolled.d.ts

@@ -1,3 +1,6 @@
 import * as T from "./Accordion.types";
-declare const AccordionUncontrolled: (props: T.UncontrolledProps) => import("react/jsx-runtime").JSX.Element;
+declare const AccordionUncontrolled: {
+    (props: T.UncontrolledProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default AccordionUncontrolled;

package/dist/components/Accordion/AccordionUncontrolled.js

@@ -11,4 +11,5 @@ const AccordionUncontrolled = (props) => {
     };
     return _jsx(AccordionControlled, { ...controlledProps, onToggle: handleToggle, active: active });
 };
+AccordionUncontrolled.displayName = "AccordionUncontrolled";
 export default AccordionUncontrolled;

package/dist/components/Accordion/tests/Accordion.stories.d.ts

@@ -4,8 +4,15 @@ declare const _default: {
     title: string;
     component: {
         (props: import("./..").AccordionProps): import("react").JSX.Element;
-        Trigger: (props: import("../Accordion.types").TriggerProps) => import("react").JSX.Element;
-        Content: (props: import("../Accordion.types").ContentProps) => import("react").JSX.Element;
+        Trigger: {
+            (props: import("../Accordion.types").TriggerProps): import("react").JSX.Element;
+            displayName: string;
+        };
+        Content: {
+            (props: import("../Accordion.types").ContentProps): import("react").JSX.Element;
+            displayName: string;
+        };
+        displayName: string;
     };
     parameters: {
         iframe: {

package/dist/components/Accordion/tests/Accordion.stories.js

@@ -4,7 +4,7 @@ import Accordion from "../index.js";
 import Button from "../../Button/index.js";
 import View from "../../View/index.js";
 export default {
-    title: "Utilities/Accordion",
+    title: "Utility components/Accordion",
     component: Accordion,
     parameters: {
         iframe: {

package/dist/components/ActionBar/ActionBar.d.ts

@@ -1,3 +1,6 @@
 import type * as T from "./ActionBar.types";
-declare const ActionBar: (props: T.Props) => import("react/jsx-runtime").JSX.Element;
+declare const ActionBar: {
+    (props: T.Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default ActionBar;

package/dist/components/ActionBar/ActionBar.js

@@ -7,4 +7,5 @@ const ActionBar = (props) => {
     const rootClassNames = classNames(s.root, elevated && s["--elevated"], position && s[`--position-${position}`], className);
     return (_jsx(View, { className: rootClassNames, attributes: attributes, paddingBlock: padding || paddingBlock, paddingInline: padding || paddingInline, children: children }));
 };
+ActionBar.displayName = "ActionBar";
 export default ActionBar;

package/dist/components/ActionBar/tests/ActionBar.stories.d.ts

@@ -1,6 +1,9 @@
 declare const _default: {
     title: string;
-    component: (props: import("./..").ActionBarProps) => import("react").JSX.Element;
+    component: {
+        (props: import("./..").ActionBarProps): import("react").JSX.Element;
+        displayName: string;
+    };
     parameters: {
         iframe: {
             url: string;

package/dist/components/ActionBar/tests/ActionBar.test.stories.d.ts

@@ -1,7 +1,10 @@
 import { StoryObj } from "@storybook/react";
 declare const _default: {
     title: string;
-    component: (props: import("./..").ActionBarProps) => import("react").JSX.Element;
+    component: {
+        (props: import("./..").ActionBarProps): import("react").JSX.Element;
+        displayName: string;
+    };
     parameters: {
         iframe: {
             url: string;

package/dist/components/Actionable/Actionable.js

@@ -59,4 +59,5 @@ const Actionable = forwardRef((props, ref) => {
     };
     return (_jsx(TagName, { ref: ref, ...rootAttributes, "aria-disabled": disabled ? true : undefined, className: rootClassNames, onClick: handlePress, onKeyDown: handleKeyDown, children: children }));
 });
+Actionable.displayName = "Actionable";
 export default Actionable;

package/dist/components/Actionable/tests/Actionable.stories.js

@@ -3,7 +3,7 @@ import { Example } from "../../../utilities/storybook/index.js";
 import Actionable from "../index.js";
 import View from "../../View/index.js";
 export default {
-    title: "Utilities/Actionable",
+    title: "Utility components/Actionable",
     component: Actionable,
     parameters: {
         iframe: {

package/dist/components/Actionable/tests/Actionable.test.stories.js

@@ -1,7 +1,7 @@
 import { userEvent, expect, fn } from "@storybook/test";
 import Actionable from "../index.js";
 export default {
-    title: "Utilities/Actionable/tests",
+    title: "Utility components/Actionable/tests",
     component: Actionable,
     parameters: {
         iframe: {

package/dist/components/Alert/Alert.d.ts

@@ -1,3 +1,6 @@
 import * as T from "./Alert.types";
-declare const Alert: (props: T.Props) => import("react/jsx-runtime").JSX.Element;
+declare const Alert: {
+    (props: T.Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default Alert;

package/dist/components/Alert/Alert.js

@@ -22,4 +22,5 @@ const Alert = (props) => {
             role: color === "critical" ? "alert" : "status",
         }, children: icon ? (_jsxs(_Fragment, { children: [_jsx("div", { className: s.icon, children: _jsx(Icon, { svg: icon, size: 5, color: isNeutral ? "primary" : color }) }), _jsx(View.Item, { grow: true, children: applyActions(renderContent()) })] })) : (applyActions(renderContent())) }));
 };
+Alert.displayName = "Alert";
 export default Alert;

package/dist/components/Alert/tests/Alert.stories.d.ts

@@ -1,7 +1,10 @@
 import React from "react";
 declare const _default: {
     title: string;
-    component: (props: import("./..").AlertProps) => React.JSX.Element;
+    component: {
+        (props: import("./..").AlertProps): React.JSX.Element;
+        displayName: string;
+    };
     parameters: {
         iframe: {
             url: string;

package/dist/components/Alert/tests/Alert.test.stories.d.ts

@@ -1,7 +1,10 @@
 import { StoryObj } from "@storybook/react";
 declare const _default: {
     title: string;
-    component: (props: import("./..").AlertProps) => import("react").JSX.Element;
+    component: {
+        (props: import("./..").AlertProps): import("react").JSX.Element;
+        displayName: string;
+    };
     parameters: {
         iframe: {
             url: string;

package/dist/components/Autocomplete/Autocomplete.d.ts

@@ -1,6 +1,10 @@
 import * as T from "./Autocomplete.types";
 declare const Autocomplete: {
     (props: T.Props): import("react/jsx-runtime").JSX.Element;
-    Item: (props: T.ItemProps) => import("react/jsx-runtime").JSX.Element;
+    Item: {
+        (props: T.ItemProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    displayName: string;
 };
 export default Autocomplete;

package/dist/components/Autocomplete/Autocomplete.js

@@ -98,4 +98,6 @@ const AutocompleteItem = (props) => {
     return (_jsx(DropdownMenu.Item, { ...menuItemProps, attributes: { ...menuItemProps.attributes, role: "option" }, onClick: handleClick }));
 };
 Autocomplete.Item = AutocompleteItem;
+Autocomplete.displayName = "Autocomplete";
+AutocompleteItem.displayName = "Autocomplete.Item";
 export default Autocomplete;

package/dist/components/Autocomplete/tests/Autocomplete.stories.d.ts

@@ -4,7 +4,11 @@ declare const _default: {
     title: string;
     component: {
         (props: import("./..").AutocompleteProps): React.JSX.Element;
-        Item: (props: import("../Autocomplete.types").ItemProps) => React.JSX.Element;
+        Item: {
+            (props: import("../Autocomplete.types").ItemProps): React.JSX.Element;
+            displayName: string;
+        };
+        displayName: string;
     };
     parameters: {
         iframe: {

package/dist/components/Autocomplete/tests/Autocomplete.test.stories.d.ts

@@ -5,7 +5,11 @@ declare const _default: {
     title: string;
     component: {
         (props: import("./..").AutocompleteProps): React.JSX.Element;
-        Item: (props: import("../Autocomplete.types").ItemProps) => React.JSX.Element;
+        Item: {
+            (props: import("../Autocomplete.types").ItemProps): React.JSX.Element;
+            displayName: string;
+        };
+        displayName: string;
     };
     parameters: {
         iframe: {

package/dist/components/Avatar/Avatar.d.ts

@@ -1,3 +1,6 @@
 import type * as T from "./Avatar.types";
-declare const Avatar: (props: T.Props) => import("react/jsx-runtime").JSX.Element;
+declare const Avatar: {
+    (props: T.Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default Avatar;

package/dist/components/Avatar/Avatar.js

@@ -5,7 +5,8 @@ import Icon from "../Icon/index.js";
 import View from "../View/index.js";
 import s from "./Avatar.module.css";
 const Avatar = (props) => {
-    const { color = "neutral", variant, src, size = 12, squared, initials, icon, alt, className, attributes, } = props;
+    const { color = "neutral", variant, src, size = 12, squared, initials, icon, className, imageAttributes, attributes, } = props;
+    const alt = props.alt || imageAttributes?.alt;
     const radius = squared
         ? responsivePropDependency(size, (size) => {
             if (size >= 24)
@@ -19,11 +20,12 @@ const Avatar = (props) => {
     const rootClassNames = classNames(s.root, className, heightStyles?.classNames, color && s[`--color-${color}`], variant && s[`--variant-${variant}`]);
     const renderContent = () => {
         if (src)
-            return _jsx("img", { role: !alt ? "presentation" : undefined, src: src, alt: alt, className: s.img });
+            return (_jsx("img", { ...imageAttributes, role: !alt ? "presentation" : undefined, src: src, alt: alt, className: s.img }));
         if (icon)
             return (_jsx(Icon, { svg: icon, size: responsivePropDependency(size, (size) => Math.ceil(size * 0.4)) }));
         return initials;
     };
     return (_jsx(View, { borderRadius: radius, attributes: { ...attributes, style: { ...heightStyles?.variables } }, backgroundColor: variant === "faded" ? `${color}-${variant}` : color, className: rootClassNames, children: renderContent() }));
 };
+Avatar.displayName = "Avatar";
 export default Avatar;

package/dist/components/Avatar/Avatar.types.d.ts

@@ -1,25 +1,11 @@
 import type { IconProps } from "../Icon";
 import type * as G from "../../types/global";
-type WithImage = {
-    src: string;
+export type Props = {
+    src?: string;
+    alt?: string;
+    imageAttributes?: G.Attributes<"img">;
     initials?: string;
     icon?: IconProps["svg"];
-    alt?: string;
-};
-type WithInitials = {
-    src?: never;
-    initials: string;
-    icon?: never;
-    alt?: never;
-};
-type WithIcon = {
-    src?: never;
-    initials?: never;
-    icon: IconProps["svg"];
-    alt?: never;
-};
-type WithContent = WithImage | WithInitials | WithIcon;
-export type Props = WithContent & {
     squared?: boolean;
     variant?: "solid" | "faded";
     color?: "neutral" | "critical" | "warning" | "positive" | "primary";
@@ -27,4 +13,3 @@ export type Props = WithContent & {
     className?: G.ClassName;
     attributes?: G.Attributes<"div">;
 };
-export {};

package/dist/components/Avatar/tests/Avatar.stories.d.ts

@@ -1,7 +1,11 @@
 import { StoryObj } from "@storybook/react";
+import { Mock } from "@storybook/test";
 declare const _default: {
     title: string;
-    component: (props: import("./..").AvatarProps) => import("react").JSX.Element;
+    component: {
+        (props: import("./..").AvatarProps): import("react").JSX.Element;
+        displayName: string;
+    };
     parameters: {
         iframe: {
             url: string;
@@ -10,6 +14,7 @@ declare const _default: {
 };
 export default _default;
 export declare const src: StoryObj;
+export declare const initials: StoryObj;
 export declare const size: {
     name: string;
     render: () => import("react").JSX.Element;
@@ -22,3 +27,7 @@ export declare const colors: {
     name: string;
     render: () => import("react").JSX.Element;
 };
+export declare const fallback: StoryObj<{
+    handleError: Mock;
+}>;
+export declare const className: StoryObj;

package/dist/components/Avatar/tests/Avatar.stories.js

@@ -1,3 +1,5 @@
+import { useState } from "react";
+import { expect, fn, waitFor } from "@storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import Avatar from "../index.js";
 import View from "../../View/index.js";
@@ -12,17 +14,32 @@ export default {
     },
 };
 export const src = {
-    name: "src, initials, icon",
+    name: "src, alt",
     render: () => (<Example>
-			<Example.Item title="With image">
-				<Avatar src="https://pbs.twimg.com/profile_images/1096029593335676929/OZbE9ZXV_400x400.png"/>
+			<Example.Item title="src, alt">
+				<Avatar src="https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80" alt="Amsterdam canal"/>
 			</Example.Item>
 
-			<Example.Item title="With initials">
+			<Example.Item title="src">
+				<Avatar src="https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80"/>
+			</Example.Item>
+		</Example>),
+    play: ({ canvas }) => {
+        const presentation = canvas.getByRole("presentation");
+        const img = canvas.getByRole("img");
+        expect(presentation).toBeInTheDocument();
+        expect(img).toBeInTheDocument();
+        expect(img).toHaveAccessibleName("Amsterdam canal");
+    },
+};
+export const initials = {
+    name: "initials, icon",
+    render: () => (<Example>
+			<Example.Item title="initials">
 				<Avatar initials="RS"/>
 			</Example.Item>
 
-			<Example.Item title="With icon">
+			<Example.Item title="icon">
 				<Avatar icon={IconZap}/>
 			</Example.Item>
 		</Example>),
@@ -63,7 +80,7 @@ export const squared = {
     name: "squared",
     render: () => (<Example>
 			<Example.Item title="squared, with image">
-				<Avatar squared src="https://pbs.twimg.com/profile_images/1096029593335676929/OZbE9ZXV_400x400.png"/>
+				<Avatar squared src="https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80"/>
 			</Example.Item>
 			<Example.Item title="squared, with initials">
 				<Avatar squared initials="RS"/>
@@ -74,37 +91,72 @@ export const squared = {
 		</Example>),
 };
 export const colors = {
-    name: "color",
+    name: "color, variant",
     render: () => (<Example>
 			<Example.Item title="color: neutral">
-				<Avatar color="neutral" icon={IconZap}/>
-			</Example.Item>
-			<Example.Item title="color: neutral, variant: faded">
-				<Avatar color="neutral" variant="faded" icon={IconZap}/>
+				<View gap={4} direction="row">
+					<Avatar color="neutral" icon={IconZap}/>
+					<Avatar color="neutral" variant="faded" icon={IconZap}/>
+				</View>
 			</Example.Item>
 			<Example.Item title="color: primary">
-				<Avatar color="primary" icon={IconZap}/>
-			</Example.Item>
-			<Example.Item title="color: primary, variant: faded">
-				<Avatar color="primary" variant="faded" icon={IconZap}/>
+				<View gap={4} direction="row">
+					<Avatar color="primary" icon={IconZap}/>
+					<Avatar color="primary" variant="faded" icon={IconZap}/>
+				</View>
 			</Example.Item>
 			<Example.Item title="color: positive">
-				<Avatar color="positive" icon={IconZap}/>
-			</Example.Item>
-			<Example.Item title="color: positive, variant: faded">
-				<Avatar color="positive" variant="faded" icon={IconZap}/>
+				<View gap={4} direction="row">
+					<Avatar color="positive" icon={IconZap}/>
+					<Avatar color="positive" variant="faded" icon={IconZap}/>
+				</View>
 			</Example.Item>
 			<Example.Item title="color: warning">
-				<Avatar color="warning" icon={IconZap}/>
-			</Example.Item>
-			<Example.Item title="color: warning, variant: faded">
-				<Avatar color="warning" variant="faded" icon={IconZap}/>
+				<View gap={4} direction="row">
+					<Avatar color="warning" icon={IconZap}/>
+					<Avatar color="warning" variant="faded" icon={IconZap}/>
+				</View>
 			</Example.Item>
 			<Example.Item title="color: critical">
-				<Avatar color="critical" icon={IconZap}/>
-			</Example.Item>
-			<Example.Item title="color: critical, variant: faded">
-				<Avatar color="critical" variant="faded" icon={IconZap}/>
+				<View gap={4} direction="row">
+					<Avatar color="critical" icon={IconZap}/>
+					<Avatar color="critical" variant="faded" icon={IconZap}/>
+				</View>
 			</Example.Item>
 		</Example>),
 };
+export const fallback = {
+    name: "test: fallback",
+    args: {
+        handleError: fn(),
+    },
+    render: (args) => {
+        const [error, setError] = useState(false);
+        return (<Avatar src={error ? undefined : "/foo"} icon={IconZap} imageAttributes={{
+                onError: () => {
+                    setError(true);
+                    args.handleError();
+                },
+            }}/>);
+    },
+    play: async ({ args }) => {
+        await waitFor(() => {
+            expect(args.handleError).toHaveBeenCalledTimes(1);
+        });
+    },
+};
+export const className = {
+    name: "className, attributes, imageAttributes",
+    render: () => (<div data-testid="root">
+			<Avatar src="https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80" className="test-classname" attributes={{ id: "test-id" }} imageAttributes={{ id: "test-image-id", alt: "test image" }}/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        const img = canvas.getByRole("img");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(img).toHaveAttribute("id", "test-image-id");
+        // Uses alt attribute in case prop is not passed
+        expect(img).toHaveAccessibleName("test image");
+    },
+};

package/dist/components/Badge/Badge.js

@@ -21,4 +21,5 @@ const Badge = forwardRef((props, ref) => {
                 }, children: children })), endIcon && _jsx(Icon, { svg: endIcon, autoWidth: true, size: iconSize }), onDismiss && (_jsx(Actionable, { onClick: hnadleDismiss, className: s.dismiss, as: "span", attributes: { "aria-label": dismissAriaLabel }, children: _jsx(Icon, { svg: IconClose, size: iconSize }) }))] }));
 });
 Badge.Container = BadgeContainer;
+Badge.displayName = "Badge";
 export default Badge;

package/dist/components/Badge/BadgeContainer.d.ts

@@ -1,3 +1,6 @@
 import type * as T from "./Badge.types";
-declare const BadgeContainer: (props: T.ContainerProps) => import("react/jsx-runtime").JSX.Element;
+declare const BadgeContainer: {
+    (props: T.ContainerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default BadgeContainer;

package/dist/components/Badge/BadgeContainer.js

@@ -6,4 +6,5 @@ const BadgeContainer = (props) => {
     const rootClassNames = classNames(s.container, className, overlap && s["--container-overlap"], position && s[`--container-position-${position}`]);
     return (_jsx("div", { ...attributes, className: rootClassNames, children: children }));
 };
+BadgeContainer.displayName = "Badge.Container";
 export default BadgeContainer;

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,3 +1,6 @@
 import * as T from "./Breadcrumbs.types";
-declare const Breadcrumbs: (props: T.Props) => import("react/jsx-runtime").JSX.Element;
+declare const Breadcrumbs: {
+    (props: T.Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default Breadcrumbs;

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -39,4 +39,5 @@ const Breadcrumbs = (props) => {
                 return (_jsxs(View, { as: "li", gap: 2, direction: "row", align: "center", children: [index > 0 && (isDisplayed || isCollapseButton) && (_jsx(Text, { color: "neutral-faded", children: separator || _jsx(Icon, { svg: IconChevronRight, size: 3 }) })), _jsx(Text, { variant: "body-3", color: color === "primary" ? "primary" : "neutral-faded", children: itemNode })] }, index));
             }) }) }));
 };
+Breadcrumbs.displayName = "Breadcrumbs";
 export default Breadcrumbs;

package/dist/components/Breadcrumbs/BreadcrumbsItem.d.ts

@@ -1,3 +1,6 @@
 import type * as T from "./Breadcrumbs.types";
-declare const BreadcrumbsItem: (props: T.ItemProps) => import("react/jsx-runtime").JSX.Element;
+declare const BreadcrumbsItem: {
+    (props: T.ItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default BreadcrumbsItem;

package/dist/components/Breadcrumbs/BreadcrumbsItem.js

@@ -8,4 +8,5 @@ const BreadcrumbsItem = (props) => {
     }
     return (_jsx(Link, { onClick: onClick, href: href, icon: icon, disabled: disabled, variant: "plain", color: "inherit", children: children }));
 };
+BreadcrumbsItem.displayName = "Breadcrumbs.Item";
 export default BreadcrumbsItem;

package/dist/components/Breadcrumbs/index.d.ts

@@ -2,7 +2,10 @@ import BreadcrumbsItem from "./BreadcrumbsItem";
 type CompoundComponent = typeof Breadcrumbs & {
     Item: typeof BreadcrumbsItem;
 };
-declare const Breadcrumbs: (props: import("./Breadcrumbs.types").Props) => import("react/jsx-runtime").JSX.Element;
+declare const Breadcrumbs: {
+    (props: import("./Breadcrumbs.types").Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export type { Props as BreadcrumbsProps } from "./Breadcrumbs.types";
 declare const _default: CompoundComponent;
 export default _default;

package/dist/components/Breadcrumbs/tests/Breadcrumbs.stories.d.ts

@@ -1,7 +1,13 @@
 declare const _default: {
     title: string;
-    component: ((props: import("./..").BreadcrumbsProps) => import("react").JSX.Element) & {
-        Item: (props: import("../Breadcrumbs.types").ItemProps) => import("react").JSX.Element;
+    component: {
+        (props: import("./..").BreadcrumbsProps): import("react").JSX.Element;
+        displayName: string;
+    } & {
+        Item: {
+            (props: import("../Breadcrumbs.types").ItemProps): import("react").JSX.Element;
+            displayName: string;
+        };
     };
     parameters: {
         iframe: {

package/dist/components/Breadcrumbs/tests/Breadcrumbs.test.stories.d.ts

@@ -2,8 +2,14 @@ import { StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 declare const _default: {
     title: string;
-    component: ((props: import("./..").BreadcrumbsProps) => import("react").JSX.Element) & {
-        Item: (props: import("../Breadcrumbs.types").ItemProps) => import("react").JSX.Element;
+    component: {
+        (props: import("./..").BreadcrumbsProps): import("react").JSX.Element;
+        displayName: string;
+    } & {
+        Item: {
+            (props: import("../Breadcrumbs.types").ItemProps): import("react").JSX.Element;
+            displayName: string;
+        };
     };
     parameters: {
         iframe: {